/* KairSun Web — base compartida de los mocks 1:1 por pantalla.
 *
 * Contrato: cada pantalla vive en assets/css/screens/ks-screen-<nombre>.css y
 * preview/<nombre>/index.html. Este archivo define lo que TODAS comparten:
 * fuentes locales, tokens reales de la app, el marco de teléfono y el toggle
 * Hoy|Tracking (CSS puro, sin JS). Nadie redefine esto; si algo falta, se pide.
 *
 * Unidad: --u = 1dp real. El ancho de pantalla del teléfono es 393dp (iPhone
 * base de la app). Todo el interior se mide en `calc(N * var(--u))` para que
 * escale igual en 320px y en 1440px sin una sola media query interna.
 */

@font-face {
  font-family: "DM Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/dm-sans-latin-400-normal-subset.woff2?v=subset1") format("woff2");
}
@font-face {
  font-family: "DM Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/assets/fonts/dm-sans-latin-500-normal-subset.woff2?v=subset1") format("woff2");
}
@font-face {
  font-family: "DM Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/assets/fonts/dm-sans-latin-600-normal-subset.woff2?v=subset1") format("woff2");
}
@font-face {
  font-family: "DM Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/fonts/dm-sans-latin-700-normal-subset.woff2?v=subset1") format("woff2");
}
@font-face {
  font-family: "DM Sans"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("/assets/fonts/dm-sans-latin-800-normal-subset.woff2?v=subset1") format("woff2");
}
@font-face {
  font-family: "Cinzel"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/fonts/cinzel-latin-700-normal-subset.woff2?v=subset1") format("woff2");
}

:root {
  /* Superficies — kair_surfaces.dart */
  --ks-bg: #0A0C10;
  --ks-bg-deep: #07070A;
  --ks-surface: #14161C;
  --ks-elev: #1D2029;
  --ks-line: rgba(255, 255, 255, 0.10);
  --ks-glass-border: rgba(255, 255, 255, 0.14);

  /* Textos — kair_surfaces.dart */
  --ks-text: #F8FAFC;
  --ks-text-2: #CBD5E1;
  --ks-muted: #8B98B2;

  /* Módulos — home_internals.dart / water_tokens.dart / app_theme.dart */
  --ks-water: #2DC4ED;
  --ks-water-soft: #7CE3FF;
  --ks-water-deep: #1AA9D6;
  --ks-routine: #FFB800;
  --ks-routine-soft: #FFD17A;
  --ks-routine-deep: #E89A2B;
  --ks-skills: #5BF6FF;
  --ks-skills-deep: #2A2470;
  --ks-skills-grad: #38E0FF;
  --ks-mood: #2BD9A0;
  --ks-streak: #FFA12E;
  --ks-ok: #10B981;

  /* Marca */
  --ks-gold: #F5C451;
  --ks-gold-hi: #FFE9B8;
  --ks-gold-base: #FFD777;
  --ks-gold-deep: #E8A93E;
  --ks-gold-ink: #2B1D00;
  --ks-mastery: #2DD4BF;

  /* Tipografía — kair_typography.dart */
  --ks-font: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ks-display: "Cinzel", Georgia, serif;
  --ks-r-card: calc(28 * var(--u));
  --ks-r-pill: 999px;
}

* { box-sizing: border-box; }

body.screen-page {
  margin: 0;
  padding: 36px 20px 96px;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(45, 212, 191, 0.08), transparent 60%),
    radial-gradient(900px 500px at 90% 110%, rgba(245, 196, 81, 0.06), transparent 60%),
    var(--ks-bg-deep);
  color: var(--ks-text);
  font-family: var(--ks-font);
  -webkit-font-smoothing: antialiased;
}

.screen-wrap {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  /* La columna implícita no puede crecer con el contenido: sin esto, un code
   * largo en las notas ensancha toda la página y rompe el QA de 320-390. */
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  overflow-wrap: anywhere;
}

.screen-head h1 {
  margin: 0 0 6px;
  font-family: var(--ks-display);
  font-size: clamp(1.4rem, 3vw, 2rem);
  letter-spacing: 0.01em;
}
.screen-head p { margin: 0; color: var(--ks-text-2); font-size: 0.95rem; }
.screen-head a { color: var(--ks-mastery); }

.screen-grid {
  display: grid;
  /* El piso nunca pide más que el ancho real: a 320px la página no scrollea. */
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 28px;
  align-items: start;
}

.screen-notes {
  border: 1px solid var(--ks-glass-border);
  border-radius: 16px;
  padding: 18px 20px;
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.9rem;
  color: var(--ks-text-2);
}
.screen-notes h2 { margin: 0 0 8px; font-size: 1rem; color: var(--ks-text); }
.screen-notes ul { margin: 8px 0 0; padding-left: 18px; }
.screen-notes li { margin: 4px 0; }
.screen-notes code { color: var(--ks-gold-hi); }

/* ── Teléfono ────────────────────────────────────────────────────────────
 * 393dp de ancho físico. `--u` convierte cualquier medida de la app a CSS.
 * El interior NUNCA usa px sueltos: siempre calc(N * var(--u)).
 *
 * El marco es sólo piel: padding, radio y geometría no cambian (la pantalla
 * sigue siendo 393×852), así que el contenido no se mueve. Lo que cambia es
 * el acabado (metal con luz, bisel de vidrio negro, botones laterales) y la
 * sombra. Los pseudo-elementos no participan del layout.
 *
 * `.phone` es container de tamaño inline: `--u` se resuelve contra el ancho
 * REAL de cada teléfono (no contra el viewport), así una columna angosta de
 * grilla jamás deja contenido más grande que el marco. La primera línea deja
 * el valor de respaldo para navegadores sin container queries. */
.phone {
  container-type: inline-size;
  --u: calc(min(380px, 92vw, 100vw - 40px) / 393);
  --ks-phone-r: calc(58 * var(--u));
  --ks-phone-screen-r: calc(47 * var(--u));
  width: min(380px, 92vw, 100vw - 40px);
  max-width: 100%;
  margin: 0 auto;
}
/* `--u` siempre sigue el ancho REAL del marco (container query), incluso si
 * otra hoja de la pantalla fija su propio ancho. La triple clase gana la
 * cascada sin `!important`; la línea de arriba queda de respaldo. */
@supports (container-type: inline-size) {
  .phone.phone.phone {
    --u: calc(min(100cqw, 380px) / 393);
  }
}
.phone__bezel {
  position: relative;
  padding: calc(11 * var(--u));
  border-radius: var(--ks-phone-r);
  border: 1px solid rgba(255, 255, 255, 0.10);
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 18%),
    linear-gradient(335deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 22%),
    conic-gradient(from 205deg at 32% 18%,
      rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 24%,
      rgba(0, 0, 0, 0.30) 58%, rgba(255, 255, 255, 0.06) 82%, rgba(255, 255, 255, 0.14)),
    linear-gradient(160deg, #4B5160 0%, #262A34 26%, #101218 50%, #1F232C 70%, #4E5563 88%, #666D7C 100%);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.55),
    0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(0, 0, 0, 0.55),
    0 calc(10 * var(--u)) calc(24 * var(--u)) rgba(0, 0, 0, 0.48),
    0 calc(28 * var(--u)) calc(60 * var(--u)) rgba(0, 0, 0, 0.54),
    0 calc(60 * var(--u)) calc(120 * var(--u)) rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 calc(-1 * var(--u)) calc(2 * var(--u)) rgba(0, 0, 0, 0.55);
}
/* Botones laterales sutiles: silueta fuera del layout. La izquierda dibuja
 * dos teclas (volumen); la derecha, una (encendido). No hay overflow real:
 * sobresalen calc(1.5 * var(--u)) y el fondo es transparente en el hueco. */
.phone__bezel::before,
.phone__bezel::after {
  content: "";
  position: absolute;
  width: calc(2.6 * var(--u));
  border-radius: calc(1.4 * var(--u));
  background: linear-gradient(90deg, #23262E, #7E8798 42%, #454B57 62%, #15181E);
  box-shadow: 0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(0, 0, 0, 0.45);
}
.phone__bezel::before {
  top: 15%;
  left: calc(-1.5 * var(--u));
  height: calc(104 * var(--u));
  background:
    linear-gradient(90deg, #23262E, #7E8798 42%, #454B57 62%, #15181E) top / 100% calc(32 * var(--u)) no-repeat,
    linear-gradient(90deg, #23262E, #7E8798 42%, #454B57 62%, #15181E) bottom / 100% calc(58 * var(--u)) no-repeat;
}
.phone__bezel::after {
  top: 21%;
  right: calc(-1.5 * var(--u));
  height: calc(92 * var(--u));
}
.phone__island {
  position: absolute;
  top: calc(21 * var(--u));
  left: 50%;
  translate: -50% 0;
  width: calc(114 * var(--u));
  height: calc(31 * var(--u));
  border-radius: 999px;
  z-index: 3;
  background:
    radial-gradient(circle at calc(100% - 14 * var(--u)) 50%,
      rgba(120, 150, 190, 0.55) 0 calc(1.7 * var(--u)),
      rgba(120, 150, 190, 0) calc(2.1 * var(--u))),
    radial-gradient(circle at calc(100% - 14 * var(--u)) 50%,
      #141B26 0 calc(4.4 * var(--u)),
      rgba(0, 0, 0, 0) calc(4.8 * var(--u))),
    #030407;
  box-shadow:
    inset 0 0 0 calc(0.7 * var(--u)) rgba(125, 140, 165, 0.18),
    inset 0 calc(1.2 * var(--u)) calc(2.4 * var(--u)) rgba(255, 255, 255, 0.05),
    0 calc(1 * var(--u)) calc(2.5 * var(--u)) rgba(0, 0, 0, 0.55);
}
.phone__screen {
  position: relative;
  overflow: hidden;
  border-radius: var(--ks-phone-screen-r);
  aspect-ratio: 393 / 852;
  background: var(--ks-bg);
  isolation: isolate;
  /* Bisel de vidrio negro entre el metal y el display + hairline de luz. */
  box-shadow:
    0 0 0 calc(2.4 * var(--u)) #04050A,
    0 0 0 calc(2.9 * var(--u)) rgba(255, 255, 255, 0.07),
    inset 0 0 0 calc(0.6 * var(--u)) rgba(255, 255, 255, 0.05);
}
/* Reflejo de vidrio fijo (sin animación): diagonal + especular superior. */
.phone__screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 8;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(118deg,
      rgba(255, 255, 255, 0.09) 0%,
      rgba(255, 255, 255, 0.035) 10%,
      rgba(255, 255, 255, 0) 24%,
      rgba(255, 255, 255, 0) 72%,
      rgba(255, 255, 255, 0.03) 86%,
      rgba(255, 255, 255, 0.065) 100%),
    radial-gradient(120% 55% at 84% -12%, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0) 58%);
}
.phone__caption {
  margin: calc(14 * var(--u)) 0 0;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.45;
  color: var(--ks-muted);
  text-wrap: balance;
}

/* Estados de escritorio: el teléfono se levanta apenas y la luz del metal
 * responde. Sólo donde hay hover real; reduced-motion ya apaga transiciones. */
@media (hover: hover) and (pointer: fine) {
  .phone__bezel {
    transition:
      box-shadow 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
      border-color 0.4s ease,
      transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .phone:hover .phone__bezel {
    transform: translateY(calc(-2 * var(--u)));
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.55),
      0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, 0.50),
      0 calc(14 * var(--u)) calc(30 * var(--u)) rgba(0, 0, 0, 0.50),
      0 calc(36 * var(--u)) calc(74 * var(--u)) rgba(0, 0, 0, 0.56),
      0 calc(72 * var(--u)) calc(140 * var(--u)) rgba(0, 0, 0, 0.38),
      inset 0 1px 0 rgba(255, 255, 255, 0.18),
      inset 0 calc(-1 * var(--u)) calc(2 * var(--u)) rgba(0, 0, 0, 0.55);
  }
  .phone:hover .phone__island {
    box-shadow:
      inset 0 0 0 calc(0.7 * var(--u)) rgba(125, 140, 165, 0.22),
      inset 0 calc(1.2 * var(--u)) calc(2.4 * var(--u)) rgba(255, 255, 255, 0.06),
      0 calc(1 * var(--u)) calc(2.5 * var(--u)) rgba(0, 0, 0, 0.55);
  }
}

/* ── Toggle Hoy | Tracking (CSS puro) ─────────────────────────────────────
 * Contrato EXACTO de markup (los dos inputs primero, después tabs, después panes):
 *   <div class="ks-view">
 *     <input type="radio" name="view-x" id="v-x-hoy" checked>
 *     <input type="radio" name="view-x" id="v-x-track">
 *     <div class="ks-view__tabs"><label for="v-x-hoy">Hoy</label><label for="v-x-track">Tracking</label></div>
 *     <div class="ks-view__panes">
 *       <div class="ks-pane">…pantalla principal…</div>
 *       <div class="ks-pane">…pantalla de tracking…</div>
 *     </div>
 *   </div> */
.ks-view { position: relative; }
.ks-view > input {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden;
}
.ks-view__tabs {
  display: inline-flex; gap: 4px; padding: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--ks-glass-border);
}
.ks-view__tabs label {
  min-height: 34px; padding: 0 16px;
  display: inline-flex; align-items: center;
  border-radius: 999px;
  font-size: calc(12 * var(--u));
  font-weight: 700;
  color: var(--ks-text-2);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.ks-view > input:nth-of-type(1):checked ~ .ks-view__tabs label:nth-of-type(1),
.ks-view > input:nth-of-type(2):checked ~ .ks-view__tabs label:nth-of-type(2) {
  background: rgba(255, 255, 255, 0.14);
  color: var(--ks-text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.ks-view > input:nth-of-type(1):focus-visible ~ .ks-view__tabs label:nth-of-type(1),
.ks-view > input:nth-of-type(2):focus-visible ~ .ks-view__tabs label:nth-of-type(2) {
  outline: 2px solid var(--ks-gold);
  outline-offset: 2px;
}
.ks-pane { display: none; }
.ks-view > input:nth-of-type(1):checked ~ .ks-view__panes .ks-pane:nth-of-type(1),
.ks-view > input:nth-of-type(2):checked ~ .ks-view__panes .ks-pane:nth-of-type(2) {
  display: block;
}

/* ── Piezas compartidas ──────────────────────────────────────────────── */
.ks-glass {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  border: 1px solid var(--ks-glass-border);
  backdrop-filter: blur(calc(10 * var(--u)));
}
.ks-chip {
  display: inline-flex; align-items: center; gap: calc(5 * var(--u));
  min-height: calc(22 * var(--u));
  padding: 0 calc(9 * var(--u));
  border-radius: 999px;
  font-size: calc(10 * var(--u));
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid currentColor;
}
.ks-bar {
  height: calc(6 * var(--u));
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
  overflow: hidden;
}
.ks-bar > i { display: block; height: 100%; border-radius: inherit; background: currentColor; }
.ks-num { font-variant-numeric: tabular-nums; }

/* Escala tipográfica de la app (kair_typography.dart) */
.t-display { font-size: calc(34 * var(--u)); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; }
.t-h2 { font-size: calc(22 * var(--u)); font-weight: 700; line-height: 1.15; }
.t-body { font-size: calc(15 * var(--u)); font-weight: 500; line-height: 1.4; }
.t-micro { font-size: calc(11 * var(--u)); font-weight: 600; letter-spacing: 0.04em; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* Cada pantalla declara su propio `data-screen`; el base solo garantiza que
 * nada quede animándose cuando el sistema pide calma. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Pipeline de screenshots: el toggle sigue siendo CSS puro. */
[data-shot-off] { display: none; }
.ks-shot-host > .ks-shot {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  background: var(--ks-bg);
}
/* El host NO declara position: si es .phone__screen ya es relative (base) y si
 * es .ks-pane, el absolute sube hasta el screen. */
.ks-shot-host > .ks-view { position: relative; z-index: 1; }
.ks-view__tabs { position: relative; z-index: 3; }
/* Si el toggle vive dentro del screen, reforzar el contraste del pill web. */
.ks-view:has(.ks-shot) > .ks-view__tabs { background: rgba(10, 12, 16, 0.72); }
/* Hardening de cascada: esta base se linkea antes que ks-screen-*.css, y las
 * raíces del mock declaran `display:` en su propia hoja (misma o mayor
 * especificidad). El atributo repetido gana sin `!important`. */
[data-shot-off][data-shot-off][data-shot-off] { display: none; }
/* Algunas hojas declaran `.ks-view .ks-pane { position: relative }`; se anula
 * solo en el pane que hospeda el shot para que el absolute resuelva contra el
 * screen, como define el pipeline. */
.ks-pane.ks-shot-host.ks-shot-host.ks-shot-host { position: static; }