/* =====================================================================
   PantuFIT - estilos propios (complementan a Tailwind)
   Pijama: slate-900 #0f172a · Sudor: lime-400 #a3e635
   ===================================================================== */
:root {
    --pf-pijama: #0f172a;
    --pf-pijama-2: #1e293b;
    --pf-sudor: #a3e635;
    --pf-sudor-2: #bef264;
    color-scheme: dark;
}

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }
body {
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior-y: none;
    padding-top: env(safe-area-inset-top, 0px);
}

.pf-page { padding-bottom: calc(6.5rem + env(safe-area-inset-bottom, 0px)); }
.pf-bottom-nav { padding-bottom: env(safe-area-inset-bottom, 0px); }
.pf-bottom-bar { padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

/* ---------- Interruptor (toggle) ---------- */
.pf-switch {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    flex: none;
    width: 3.25rem;
    height: 1.875rem;
    border-radius: 999px;
    background: #334155;
    cursor: pointer;
    transition: background-color .2s ease;
}
.pf-switch::after {
    content: "";
    position: absolute;
    top: .1875rem;
    left: .1875rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    background: #f8fafc;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
    transition: transform .2s cubic-bezier(.3, 1.4, .6, 1);
}
.pf-switch:checked { background: var(--pf-sudor); }
.pf-switch:checked::after { transform: translateX(1.375rem); background: var(--pf-pijama); }
.pf-switch:focus-visible { outline: 2px solid var(--pf-sudor); outline-offset: 3px; }
.pf-switch:disabled { opacity: .5; cursor: wait; }

/* ---------- Barra de EXP ---------- */
.pf-exp-bar {
    background: linear-gradient(90deg, #84cc16, var(--pf-sudor) 60%, var(--pf-sudor-2));
    transition: width 1.2s cubic-bezier(.2, .8, .2, 1);
    position: relative;
    overflow: hidden;
}
.pf-exp-bar::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .45) 50%, transparent 80%);
    transform: translateX(-100%);
    animation: pf-shine 2.8s ease-in-out infinite;
}
@keyframes pf-shine { 60%, 100% { transform: translateX(100%); } }

/* ---------- Botón gigante ---------- */
.pf-cta {
    box-shadow: 0 12px 40px -12px rgba(163, 230, 53, .65), inset 0 -4px 0 rgba(15, 23, 42, .18);
}
.pf-cta:active { transform: scale(.97); box-shadow: 0 6px 20px -10px rgba(163, 230, 53, .6), inset 0 -2px 0 rgba(15, 23, 42, .18); }

/* ---------- Toasts ---------- */
.pf-toast-root {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 80;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: max(1rem, env(safe-area-inset-top, 0px)) 1rem 0;
    pointer-events: none;
}
.pf-toast {
    pointer-events: auto;
    max-width: 26rem;
    width: 100%;
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    padding: .875rem 1rem;
    border-radius: 1rem;
    font-size: .875rem;
    font-weight: 600;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .6);
    animation: pf-toast-in .35s cubic-bezier(.2, 1.2, .4, 1);
}
.pf-toast.is-leaving { animation: pf-toast-out .25s ease-in forwards; }
.pf-toast--success { background: var(--pf-sudor); color: var(--pf-pijama); }
.pf-toast--error { background: #ef4444; color: #fff; }
.pf-toast--info { background: #334155; color: #f8fafc; }
@keyframes pf-toast-in { from { opacity: 0; transform: translateY(-12px) scale(.96); } }
@keyframes pf-toast-out { to { opacity: 0; transform: translateY(-12px) scale(.96); } }

/* ---------- Aplauso ---------- */
.pf-clap.is-on { background: var(--pf-sudor); color: var(--pf-pijama); border-color: transparent; }
.pf-clap.is-popping i { animation: pf-pop .45s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes pf-pop { 40% { transform: scale(1.6) rotate(-12deg); } }

/* ---------- Reproductor HIIT ---------- */
.pf-player {
    --pf-bg: #1e293b;
    --pf-fg: #f8fafc;
    --pf-accent: var(--pf-sudor);
    --pf-muted: rgba(163, 230, 53, .15);
    background: var(--pf-bg);
    color: var(--pf-fg);
    transition: background-color .45s ease, color .45s ease;
    padding-top: env(safe-area-inset-top, 0px);
    user-select: none;
}
.pf-player.phase-work {
    --pf-bg: var(--pf-sudor);
    --pf-fg: var(--pf-pijama);
    --pf-accent: var(--pf-pijama);
    --pf-muted: rgba(15, 23, 42, .15);
}
.pf-player.phase-rest {
    --pf-bg: var(--pf-pijama);
    --pf-fg: #f8fafc;
    --pf-accent: var(--pf-sudor);
    --pf-muted: rgba(163, 230, 53, .14);
}
.pf-player .pf-accent { color: var(--pf-accent); }
.pf-player .pf-track { background: var(--pf-muted); }
.pf-player .pf-fill { background: var(--pf-accent); transition: width .2s linear; }
.pf-player .pf-ring-bg { stroke: var(--pf-muted); }
.pf-player .pf-ring { stroke: var(--pf-accent); transition: stroke-dashoffset .12s linear; }
.pf-player .pf-main { background: var(--pf-accent); color: var(--pf-bg); }
.pf-player .pf-ghost { background: var(--pf-muted); }
.pf-player .pf-time { font-variant-numeric: tabular-nums; letter-spacing: -.04em; line-height: 1; }
.pf-player .pf-paused-badge { display: none; }
.pf-player.is-paused .pf-paused-badge { display: inline-flex; }
.pf-player.is-paused .pf-time { animation: pf-blink 1.2s steps(2, start) infinite; }
.pf-player.is-flash .pf-time { animation: pf-flash .5s ease; }
@keyframes pf-blink { to { opacity: .25; } }
@keyframes pf-flash { 30% { transform: scale(1.12); } }

/* ---------- Monigote (figure.js) ---------- */
.pf-figure { overflow: visible; }
.pf-fig-band { stroke: #e879f9; }
.pf-player .pf-figure { color: var(--pf-accent); }
.pf-player .pf-upnext { background: var(--pf-accent); color: var(--pf-bg); }
.pf-player .pf-cheer { background: var(--pf-accent); color: var(--pf-bg); white-space: normal; text-align: center; }
.pf-cheer.is-in { animation: pf-cheer-in .45s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes pf-cheer-in { from { opacity: 0; transform: translate(-50%, 10px) scale(.85); } }

/* ---------- Resultado / subida de nivel ---------- */
.pf-levelup { animation: pf-levelup .8s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes pf-levelup { from { opacity: 0; transform: scale(.6) rotate(-6deg); } }

.pf-confetti {
    position: fixed;
    top: -2rem;
    font-size: 1.5rem;
    pointer-events: none;
    z-index: 90;
    animation: pf-fall linear forwards;
}
@keyframes pf-fall { to { transform: translateY(110vh) rotate(540deg); opacity: .8; } }

.pf-sheet { animation: pf-sheet-in .3s cubic-bezier(.2, 1, .3, 1); }
@keyframes pf-sheet-in { from { transform: translateY(100%); } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}