/* QooreFit — estilos base. Tokens extraídos del design system de Claude Design.
   "Claridad con energía": fondo claro, números héroe, naranja solo para acción. */

:root {
  --bg: #FAF8F4;
  --surface: #ECE7DF;
  --card: #FFFFFF;
  --ink: #1A1A1A;
  --ink-2: #6F685C;
  --ink-3: #A39B8D;
  --line: #E4DED3;
  --accent: #F97316;     /* acción / energía — se raciona */
  --accent-press: #EA6A0C;
  --accent-deep: #C2410C;
  --ready: #22C55E;      /* estados "listo / recuperado" */
  --ready-deep: #15803D;

  /* Dirección visual "Cálido & suave" (1C): tinte del héroe + sombras CÁLIDAS teñidas
     (no grises) para dar profundidad sobre el crema sin romper la disciplina del acento. */
  --accent-tint: #FCEFE3;     /* fondo cálido de la card héroe */
  --accent-tint-ink: #8A6B53; /* texto sobre el tinte cálido */
  --surface-warm: #F4EEE4;    /* badges / chips cálidos */
  --ink-warm: #8A7B66;        /* número de orden sobre superficie cálida */
  --shadow-soft: 0 4px 12px -6px rgba(160, 90, 45, .30);
  --shadow-card: 0 8px 22px -14px rgba(160, 90, 45, .35);
  --shadow-hero: 0 12px 30px -14px rgba(200, 110, 50, .40);
  --shadow-accent: 0 11px 24px -10px rgba(249, 115, 22, .50);

  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: #E9E4DB; font-family: var(--font-body); color: var(--ink); -webkit-font-smoothing: antialiased; }
::selection { background: #F9731633; }
button { font-family: var(--font-display); cursor: pointer; }

/* ── Marco de teléfono ── */
.qf-stage { min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; padding: 32px 16px; }
.qf-phone {
  width: 390px; flex: none; background: var(--bg); border-radius: 46px; border: 1px solid var(--line);
  overflow: hidden; position: relative; height: 844px; max-height: calc(100vh - 64px);
  display: flex; flex-direction: column;
  /* ⚠️ NO SACAR ESTA LÍNEA. `position: relative` NO contiene a los hijos `position: fixed`: solo lo
     hacen transform, filter, perspective, will-change y contain. Sin esto, en escritorio la hoja del
     aviso de deriva y el toast se posicionan contra la VENTANA y se salen del marco del teléfono
     (se ven a todo el ancho del navegador). En un celular no se nota —el marco es la pantalla—, así
     que el bug es invisible justo donde se prueba la app. La barra de "sin conexión" no se ve
     afectada: vive en <body> a propósito. */
  transform: translateZ(0);
}

/* Celular real: la app ocupa toda la pantalla (sin marco ni fondo de "mockup"). El nav
   queda fijo abajo porque el marco mide exactamente la altura visible y #app scrollea adentro. */
@media (max-width: 480px) {
  body { background: var(--bg); }
  .qf-stage { padding: 0; min-height: 100dvh; }
  /* La barra de estado se respeta en el MARCO, no en #app: #app es lo que scrollea, y un margen
     adentro se va con el scroll → el contenido pasaba por DEBAJO de la hora y la batería.
     `--safe-area-inset-*` lo inyecta Capacitor (SystemBars) en la app de Android, porque ahí el
     `env()` del WebView da 0 (Android 15+ dibuja de borde a borde). En la web vale el `env()`. */
  .qf-phone { width: 100%; height: 100dvh; max-height: none; border-radius: 0; border: none;
    padding-top: var(--safe-area-inset-top, env(safe-area-inset-top)); }
  .qf-nav { padding-bottom: calc(22px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom))); }
}
.qf-statusbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 28px 6px; font-family: var(--font-mono); font-size: 14px; font-weight: 600; }
.qf-statusbar-icons { display: flex; align-items: center; gap: 7px; }
.qf-signal { display: flex; align-items: flex-end; gap: 2px; height: 11px; }
.qf-signal i { width: 3px; background: var(--ink); border-radius: 1px; }
.qf-signal i:nth-child(1) { height: 4px; } .qf-signal i:nth-child(2) { height: 6px; }
.qf-signal i:nth-child(3) { height: 8px; } .qf-signal i:nth-child(4) { height: 11px; }
.qf-battery { width: 16px; height: 11px; border: 1.5px solid var(--ink); border-radius: 3px; position: relative; }
.qf-battery span { position: absolute; inset: 1.5px; width: 9px; background: var(--ink); border-radius: 1px; display: block; }

.qf-scroll { flex: 1; overflow-y: auto; padding: 8px 24px 110px; }
.qf-scroll::-webkit-scrollbar { width: 0; }

/* ── Tipografía utilitaria ── */
.qf-mono { font-family: var(--font-mono); }
.qf-eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--ink-3); }
.qf-h1 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; margin: 0; }
.qf-hero-num { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; line-height: .9; }
.qf-muted { color: var(--ink-2); }
.qf-faint { color: var(--ink-3); }
.qf-label { display: block; font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--ink-2); margin: 0 2px 8px; }

/* ── Botones ── */
.qf-btn { font-weight: 600; font-size: 17px; color: #fff; background: var(--accent); border: none; border-radius: 16px; padding: 17px; width: 100%; box-shadow: var(--shadow-accent); transition: background .15s, transform .08s; }
.qf-btn:hover { background: var(--accent-press); }
.qf-btn:active { transform: scale(0.985); }
.qf-btn--ghost { background: transparent; color: var(--ink-3); font-weight: 500; font-size: 14px; font-family: var(--font-body); border: none; padding: 10px; width: auto; }
.qf-btn--ghost:hover { color: var(--ink-2); background: transparent; }
.qf-btn--soft { background: var(--surface); color: var(--ink); box-shadow: none; }
.qf-btn--soft:hover { background: #E2DBCF; }

/* ── Cards / pills ── */
.qf-card { background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: 18px; box-shadow: var(--shadow-soft); }
.qf-pill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-body); font-weight: 600; font-size: 12px; border-radius: 999px; padding: 5px 11px; }
.qf-pill--warn { color: var(--accent-deep); background: #F973161F; }
.qf-pill--ready { color: var(--ready-deep); background: #22C55E1F; }
.qf-pill--neutral { color: var(--ink-2); background: var(--surface-warm); }
.qf-pill i.dot { width: 7px; height: 7px; border-radius: 999px; display: inline-block; }

/* ── Opciones tappables (onboarding / check-in) ── */
.qf-opt { display: flex; align-items: center; justify-content: space-between; width: 100%; text-align: left; background: var(--card); border: 1.5px solid var(--line); border-radius: 16px; padding: 16px 18px; font-family: var(--font-body); font-size: 16px; color: var(--ink); font-weight: 500; box-shadow: var(--shadow-soft); transition: border-color .15s, background .15s, box-shadow .15s; }
.qf-opt:hover { border-color: var(--ink-3); }
.qf-opt[aria-pressed="true"] { border-color: var(--accent); background: #F9731610; }
.qf-opt-check { width: 22px; height: 22px; border-radius: 999px; border: 2px solid var(--line); flex: none; }
.qf-opt[aria-pressed="true"] .qf-opt-check { border-color: var(--accent); background: var(--accent); box-shadow: inset 0 0 0 3px #fff; }

/* ── Barra de progreso (onboarding) ── */
.qf-progress { height: 6px; background: var(--surface); border-radius: 999px; overflow: hidden; }
.qf-progress > div { height: 100%; background: var(--accent); border-radius: 999px; transition: width .25s; }

/* ── Escala plana (sin anillos) ── */
.qf-scale { position: relative; height: 8px; background: var(--surface); border-radius: 999px; }
.qf-scale > .fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; }
.qf-scale > .knob { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 16px; height: 16px; border-radius: 999px; background: #fff; }

/* ── Inputs de registro ── */
.qf-field { display: flex; align-items: center; background: #fff; border: 1.5px solid var(--line); border-radius: 14px; padding: 0 14px; box-shadow: var(--shadow-soft); transition: border-color .15s; }
.qf-field:focus-within { border-color: var(--accent); }
.qf-field input { flex: 1; font-family: var(--font-mono); font-weight: 500; font-size: 18px; color: var(--ink); background: transparent; border: none; padding: 12px 0; outline: none; min-width: 0; width: 100%; }
.qf-field .unit { font-family: var(--font-mono); font-size: 14px; color: var(--ink-3); }

/* ── Nav inferior ── */
.qf-nav { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-around; padding: 12px 32px 20px; background: var(--bg); border-top: 1px solid var(--line); box-shadow: 0 -6px 18px -12px rgba(160, 90, 45, .28); }
.qf-nav--4 { padding-left: 14px; padding-right: 14px; }
.qf-nav button { background: transparent; border: none; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.qf-nav .ico { width: 22px; height: 22px; border-radius: 7px; border: 2px solid #C6BEB1; }
.qf-nav .lbl { font-family: var(--font-body); font-size: 11px; font-weight: 500; color: var(--ink-3); }
.qf-nav button[aria-current="true"] .ico { background: var(--accent); border-color: var(--accent); }
.qf-nav button[aria-current="true"] .lbl { color: var(--ink); font-weight: 600; }

/* fila de ejercicio */
.qf-ex-row { display: flex; align-items: center; justify-content: space-between; padding: 11px 0; border-top: 1px solid var(--surface); }
.qf-ex-row .name { font-family: var(--font-body); font-size: 15px; }
.qf-ex-row .meta { font-family: var(--font-mono); font-size: 13px; color: var(--ink-2); }

/* ── B44 · cuenta regresiva del temporizador de trabajo ──────────────────────
   En los últimos 3 segundos el aro LATE. El bip solo no alcanza: en el gimnasio hay música, y el
   que no oye tampoco lo escucha — el sonido nunca puede ser el único canal (misma regla que el
   color: siempre un segundo canal). */
@keyframes qf-latido {
  0%, 100% { box-shadow: 0 16px 34px -12px rgba(194, 65, 12, .55), 0 0 0 0 rgba(249, 115, 22, .55); }
  50%      { box-shadow: 0 16px 34px -12px rgba(194, 65, 12, .55), 0 0 0 12px rgba(249, 115, 22, 0); }
}
@keyframes qf-late-num {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}
/* B74 — el latido de la nube de PAUSA. `qf-latido` tiene el naranja quemado adentro, asi que sobre
   el fondo tinta el halo salia naranja: cada reloj late en su propio color. */
@keyframes qf-latido-tinta {
  0%, 100% { box-shadow: 0 16px 34px -12px rgba(26, 26, 26, .5), 0 0 0 0 rgba(250, 248, 244, .45); }
  50%      { box-shadow: 0 16px 34px -12px rgba(26, 26, 26, .5), 0 0 0 12px rgba(250, 248, 244, 0); }
}
/* B74 — el CERO. No se puede mostrar un "0" (el reloj siguiente arranca en el mismo instante), asi
   que lo que se ve es el CAMBIO: la nube destella una vez en verde al pasar de trabajo a pausa o al
   reves. Verde = "listo" en la paleta, y es el unico momento en que aparece dentro del reloj. */
@keyframes qf-reloj-cambio {
  0%   { transform: scale(1);    filter: drop-shadow(0 0 0 rgba(34, 197, 94, 0)); }
  35%  { transform: scale(1.06); filter: drop-shadow(0 0 16px rgba(34, 197, 94, .95)); }
  100% { transform: scale(1);    filter: drop-shadow(0 0 0 rgba(34, 197, 94, 0)); }
}

@media (prefers-reduced-motion: reduce) {
  /* Quien pidió menos movimiento igual necesita ver que se termina: sin latido, pero el número
     sigue cambiando y el bip suena. */
  [style*="qf-latido"], [style*="qf-late-num"] { animation: none !important; }
  #qf-reloj { animation: none !important; }   /* B74 — el destello del cero tambien se apaga */
}