/* ==========================================================================
   Calcular-promedio.cl — design system v3
   ========================================================================== */

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/geist.woff2) format('woff2');
}

:root {
  --brand: #0369f6;
  --brand-2: #2f86ff;
  --brand-wash: #eaf2ff;
  --on-brand: #ffffff;
  --brand-rgb: 3, 105, 246;
  --logo: #0569f6;   /* el azul exacto del logo original */

  --pass: #067647; --pass-wash: #e7f7ee;
  --warn: #a35c00; --warn-wash: #fdf2e0;
  --fail: #bb2020; --fail-wash: #fdebeb;

  /* Neutros con tinte frío: el gris puro es lo que envejece una UI */
  --bg:        #f2f4f8;
  --surface:   #ffffff;
  --surface-2: #f6f8fb;
  --surface-3: #eef1f6;
  --line:      #e3e7ee;
  --line-2:    #ccd3de;
  --ink:       #0a0c10;
  --ink-2:     #4e5766;
  --ink-3:     #8791a1;

  --r-sm: 11px;
  --r:    14px;
  --r-lg: 18px;
  --r-xl: 24px;

  /* Sombras en capas: la sombra plana única es la firma del template */
  --sh-1: 0 1px 1px rgba(10,12,16,.04), 0 2px 4px rgba(10,12,16,.03);
  --sh-3: 0 1px 2px rgba(10,12,16,.05), 0 8px 16px -4px rgba(10,12,16,.07), 0 24px 48px -12px rgba(10,12,16,.12);
  --sh-up: 0 -1px 0 var(--line), 0 -8px 32px -8px rgba(10,12,16,.14);
  --ring: 0 0 0 1px rgba(10,12,16,.06);
  --sheen: color-mix(in srgb, var(--surface-2) 70%, transparent);

  --font: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Spring: el ease lineal es lo que hace que una app se sienta a web */
  --spring: cubic-bezier(.32, .72, 0, 1);
  --spring-out: cubic-bezier(.22, 1.4, .38, 1);

  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --tap: 50px;
}

/* --- Tema ---------------------------------------------------------------
   Tres estados: sin data-theme = sigue al sistema. data-theme="light"/"dark"
   = elección explícita del usuario y gana sobre el sistema.
   Los :root:not([data-theme=light]) son los que permiten que el toggle
   pueda forzar claro estando el SO en oscuro.
   ----------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand: #4d95ff; --brand-2: #78b0ff; --brand-wash: #16243d;
    /* Blanco sobre #4d95ff da 2.6:1. En dark el acento va con tinta oscura. */
    --on-brand: #05101f;
    --brand-rgb: 77, 149, 255;
    --logo: #4d95ff;   /* #0569f6 sobre negro da 2.3:1; se aclara solo en dark */
    --pass: #3ddc84; --pass-wash: #0f2a1c;
    --warn: #fbbf24; --warn-wash: #2c2410;
    --fail: #ff6b6b; --fail-wash: #33191a;

    /* Elevación INVERTIDA respecto a claro: aquí lo que sube se aclara.
       En oscuro las sombras no existen — sobre un fondo casi negro no hay
       nada que oscurecer. La jerarquía la dan la superficie y el borde.
       Escala medida en ΔL* (CIELAB), que sí es perceptual:
         bg 3.3  <  surface-3 4.9  <  surface-2 7.1  <  surface 12.2       */
    --bg:        #0a0c11;   /* el vacío                                    */
    --surface:   #1c212b;   /* card: +8.9 ΔL* sobre el fondo, se despega   */
    --surface-2: #12161d;   /* inputs y resultado: hundidos en la card     */
    --surface-3: #0d1116;   /* riel del segmented, canal del meter         */
    --line:      #2f3745;   /* el borde hace lo que la sombra no puede     */
    --line-2:    #414b5c;
    --ink:       #f2f4f8;
    --ink-2:     #9aa3b4;
    --ink-3:     #737d8e;

    /* Sombras casi apagadas: son decorativas aquí, no estructurales */
    --sh-1: 0 1px 2px rgba(0,0,0,.4);
    --sh-3: 0 2px 8px rgba(0,0,0,.4), 0 16px 40px -12px rgba(0,0,0,.6);
    --sh-up: 0 -1px 0 var(--line), 0 -8px 32px -8px rgba(0,0,0,.7);
    --ring: 0 0 0 1px rgba(255,255,255,.075);
    --sheen: rgba(255,255,255,.038);
  }
}
:root[data-theme="dark"] {
    --brand: #4d95ff; --brand-2: #78b0ff; --brand-wash: #16243d;
    /* Blanco sobre #4d95ff da 2.6:1. En dark el acento va con tinta oscura. */
    --on-brand: #05101f;
    --brand-rgb: 77, 149, 255;
    --logo: #4d95ff;   /* #0569f6 sobre negro da 2.3:1; se aclara solo en dark */
    --pass: #3ddc84; --pass-wash: #0f2a1c;
    --warn: #fbbf24; --warn-wash: #2c2410;
    --fail: #ff6b6b; --fail-wash: #33191a;

    /* Elevación INVERTIDA respecto a claro: aquí lo que sube se aclara.
       En oscuro las sombras no existen — sobre un fondo casi negro no hay
       nada que oscurecer. La jerarquía la dan la superficie y el borde.
       Escala medida en ΔL* (CIELAB), que sí es perceptual:
         bg 3.3  <  surface-3 4.9  <  surface-2 7.1  <  surface 12.2       */
    --bg:        #0a0c11;   /* el vacío                                    */
    --surface:   #1c212b;   /* card: +8.9 ΔL* sobre el fondo, se despega   */
    --surface-2: #12161d;   /* inputs y resultado: hundidos en la card     */
    --surface-3: #0d1116;   /* riel del segmented, canal del meter         */
    --line:      #2f3745;   /* el borde hace lo que la sombra no puede     */
    --line-2:    #414b5c;
    --ink:       #f2f4f8;
    --ink-2:     #9aa3b4;
    --ink-3:     #737d8e;

    /* Sombras casi apagadas: son decorativas aquí, no estructurales */
    --sh-1: 0 1px 2px rgba(0,0,0,.4);
    --sh-3: 0 2px 8px rgba(0,0,0,.4), 0 16px 40px -12px rgba(0,0,0,.6);
    --sh-up: 0 -1px 0 var(--line), 0 -8px 32px -8px rgba(0,0,0,.7);
    --ring: 0 0 0 1px rgba(255,255,255,.075);
    --sheen: rgba(255,255,255,.038);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* Red de seguridad del nowrap del h1: si Geist no cargara y la fuente de
   respaldo fuese más ancha de lo medido, el título desbordaría y arrastraría
   scroll horizontal a TODA la página. Con clip se recorta y nada más.
   clip y no hidden: hidden crea un contenedor de scroll y rompe el
   position:sticky del appbar.
   En html y body: WebKit ignora la propagación desde html y necesita body. */
html, body { overflow-x: clip; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
  overscroll-behavior-y: none;
  word-wrap: break-word;
}

/* Atmósfera: halo de marca detrás del contenido, no un fondo plano */
body::before {
  content: '';
  position: fixed;
  inset: 0 0 auto 0;
  height: 460px;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(120% 100% at 50% -22%, color-mix(in srgb, var(--brand) 14%, transparent) 0%, transparent 68%);
}
main, header, footer, .dock { position: relative; z-index: 1; }

a, button, select, input, textarea, label, summary { -webkit-tap-highlight-color: transparent; }

.wrap { max-width: 620px; margin: 0 auto; padding: 0 16px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ================= Appbar ================= */

.appbar {
  position: sticky; top: 0; z-index: 40;
  padding-top: var(--safe-t);
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  -webkit-backdrop-filter: saturate(190%) blur(24px);
  backdrop-filter: saturate(190%) blur(24px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background .3s;
}
.appbar.is-stuck {
  border-bottom-color: var(--line);
  background: color-mix(in srgb, var(--bg) 90%, transparent);
}
.appbar__in {
  max-width: 620px; margin: 0 auto; padding: 11px 16px;
  display: flex; align-items: center; gap: 10px; min-height: 54px;
}
.appbar__logo { width: 27px; height: 27px; display: block; }
/* Logo original: todo en #0569f6, weight 800. Sin partirlo en dos colores. */
.appbar__name {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--logo);
}

/* ================= Tipografía ================= */

h1, h2, h3 { color: var(--ink); line-height: 1.15; }
h1 {
  font-size: clamp(1.75rem, 7.4vw, 2.15rem);
  font-weight: 640; letter-spacing: -0.042em;
  margin: 18px 0 8px;
}
/* "Calcular promedio de notas." tiene que caber SIEMPRE en una línea.
   El texto es fijo, así que el tamaño se calcula, no se adivina: el string mide
   13.20 veces su font-size en Geist. El fallback del sistema mide 13.13 —más
   angosto—, así que calibrar contra Geist cubre también el momento en que la
   fuente aún no cargó. Divido por 13.4 en vez de 13.2 para dejar ~1.5% de
   holgura ante diferencias de redondeo entre motores.
   Solo aquí: los h1 de las páginas legales son más cortos y no lo necesitan.
   Medido con Geist cargada en Chromium 141, Firefox 142 y WebKit 26: k=13.20-13.23. */
.h1-fit {
  white-space: nowrap;
  font-size: clamp(1rem, calc((100vw - 34px) / 13.4), 2.15rem);
}

h2 { font-size: 1.3rem;  font-weight: 620; letter-spacing: -0.03em;  margin: 40px 0 12px; }
h3 { font-size: 1.06rem; font-weight: 620; letter-spacing: -0.022em; margin: 24px 0 8px; }
p  { margin: 0 0 14px; color: var(--ink-2); }
.lede { color: var(--ink-2); font-size: 1.02rem; letter-spacing: -0.014em; }

.prose { font-size: 16.5px; }
.prose ul { padding-left: 20px; color: var(--ink-2); margin: 0 0 16px; }
.prose li { margin-bottom: 8px; }
.prose li::marker { color: var(--ink-3); }
.prose a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ================= Card ================= */

.card {
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: var(--ring), var(--sh-3);
  overflow: hidden;
  /* Luz superior: volumen sin borde duro */
  background-image: linear-gradient(to bottom, var(--sheen), transparent 96px);
}
.card__body { padding: 18px; }

/* ================= Segmented control con pill deslizante ================= */

.seg {
  position: relative;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  padding: 3px;
  background: var(--surface-3);
  border-radius: 13px;
  box-shadow: inset 0 1px 2px rgba(10,12,16,.05);
  isolation: isolate;
}
.seg__pill {
  position: absolute; z-index: 0;
  top: 3px; bottom: 3px; left: 3px;
  width: calc(50% - 3px);
  background: var(--surface);
  border-radius: 10px;
  box-shadow: var(--ring), 0 1px 2px rgba(10,12,16,.08), 0 2px 8px -2px rgba(10,12,16,.1);
  transform: translateX(0);
  transition: transform .42s var(--spring);
}
.seg[data-mode="2"] .seg__pill { transform: translateX(100%); }

.seg__btn {
  position: relative; z-index: 1;
  appearance: none; border: 0; background: transparent;
  font-family: inherit; font-size: 14.5px; font-weight: 550; letter-spacing: -0.015em;
  color: var(--ink-3);
  padding: 11px 8px; min-height: 42px;
  border-radius: 10px; cursor: pointer;
  transition: color .28s var(--spring);
}
.seg__btn[aria-selected="true"] { color: var(--ink); font-weight: 600; }

.field-label {
  display: block;
  font-size: 13px; font-weight: 550;
  color: var(--ink-2); margin-bottom: 9px;
}
.field-hint { font-size: 12.5px; color: var(--ink-3); margin: 9px 0 0; line-height: 1.45; }

/* Los dos hints se apilaban como dos párrafos sueltos y volvían a formar un
   muro. Van como un bloque compacto: el modo primero, el tip del decimal
   debajo y más callado. */
.hints { margin: 9px 0 0; }
.hints .field-hint { margin: 0; }

/* ================= Filas ================= */

.rows { display: flex; flex-direction: column; gap: 7px; }

.row-nota {
  display: grid;
  grid-template-columns: 1fr 1fr var(--tap);
  gap: 7px; align-items: center;
  animation: rowIn .42s var(--spring-out);
}
@keyframes rowIn {
  from { opacity: 0; transform: translateY(-10px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
.row-nota.is-out { animation: rowOut .24s var(--spring) forwards; }
@keyframes rowOut {
  to { opacity: 0; transform: translateX(-24px) scale(.94); height: 0; margin-top: -7px; }
}

.inp-wrap { position: relative; display: block; }
.inp-wrap__unit {
  position: absolute; right: 13px; top: 50%; transform: translateY(-50%);
  font-size: 14px; font-weight: 550; color: var(--ink-3);
  pointer-events: none; transition: opacity .18s;
}
.inp:placeholder-shown + .inp-wrap__unit { opacity: 0; }

.inp {
  width: 100%;
  min-height: var(--tap);
  padding: 11px 15px;
  font-family: var(--font);
  font-size: 17px;   /* bajo 16px iOS zoomea al enfocar. Nunca bajar. */
  font-weight: 550; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  outline: none; appearance: none;
  transition: border-color .18s, background .18s, box-shadow .22s var(--spring);
}
.inp::placeholder { color: var(--ink-3); font-weight: 450; }
.inp:focus {
  border-color: var(--brand);
  background: var(--surface);
  box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--brand) 15%, transparent),
              0 2px 10px -2px color-mix(in srgb, var(--brand) 26%, transparent);
}
.inp--unit { padding-right: 36px; }
/* Solo se aplica cuando no se pudo leer NI UN número. Borde, sin gritar. */
.inp.is-bad { border-color: color-mix(in srgb, var(--fail) 55%, var(--line)); }
.inp.is-bad:focus {
  border-color: var(--fail);
  box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--fail) 14%, transparent);
}

.inp::-webkit-outer-spin-button, .inp::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.inp[type=number] { -moz-appearance: textfield; }

textarea.inp { min-height: 92px; line-height: 1.65; resize: vertical; font-weight: 500; }

/* ================= Iconos ================= */
/* Trazo 1.75, cap redondo. El icono macizo es lo que más envejece una UI. */
.ico {
  width: 17px; height: 17px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
}

.icon-btn {
  width: var(--tap); height: var(--tap);
  display: grid; place-items: center;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-3);
  border-radius: var(--r);
  cursor: pointer;
  transition: transform .3s var(--spring-out), background .18s, color .18s, border-color .18s;
}
.icon-btn:active { transform: scale(.86); background: var(--fail-wash); border-color: var(--fail); color: var(--fail); }
@media (hover: hover) {
  .icon-btn:hover { color: var(--fail); border-color: color-mix(in srgb, var(--fail) 45%, var(--line)); background: var(--fail-wash); }
}

/* ================= Botones ================= */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap);
  padding: 12px 20px;
  font-family: var(--font);
  font-size: 15.5px; font-weight: 570; letter-spacing: -0.018em;
  white-space: nowrap;
  border-radius: var(--r);
  border: 1px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: transform .3s var(--spring-out), filter .18s, background .18s, box-shadow .22s;
}
.btn:active { transform: scale(.97); }

.btn--primary {
  width: 100%;
  color: var(--on-brand);
  /* Gradiente + highlight interno superior = volumen real, no un rectángulo de color */
  background: linear-gradient(to bottom, var(--brand-2), var(--brand));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    0 1px 2px rgba(var(--brand-rgb), .34),
    0 6px 18px -4px rgba(var(--brand-rgb), .44);
}
.btn--primary:active {
  filter: brightness(.94);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(var(--brand-rgb), .3);
}

.btn--ghost { background: var(--surface-2); border-color: var(--line-2); color: var(--ink); }
.btn--ghost:active { background: var(--surface-3); }

.btn--add {
  width: 100%;
  background: transparent;
  border: 1px dashed var(--line-2);
  color: var(--brand);
  margin-top: 9px;
  font-size: 14.5px; min-height: 44px;
}
.btn--add:active { background: var(--brand-wash); border-style: solid; border-color: var(--brand); }
@media (hover: hover) { .btn--add:hover { border-color: var(--brand); background: var(--brand-wash); border-style: solid; } }

.btns { display: grid; gap: 10px; margin-top: 14px; }
.btns--2 { grid-template-columns: 1fr 1fr; }
.btns--2 .btn--primary { width: auto; }

/* ================= Resultado ================= */

.result {
  position: relative;
  padding: 20px 18px 22px;
  background: var(--surface-2);
  border-top: 1px solid var(--line);
  overflow: hidden;
}
/* Halo que adopta el color del veredicto */
.result::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(78% 130% at 14% 62%, color-mix(in srgb, var(--brand) 9%, transparent) 0%, transparent 72%);
  pointer-events: none;
}
.result > * { position: relative; }

.result__eyebrow {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 4px;
}
.result__label {
  font-size: 11.5px; font-weight: 600; letter-spacing: .075em;
  text-transform: uppercase; color: var(--ink-3);
}

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 570;
  font-variant-numeric: tabular-nums;
  padding: 4px 11px; border-radius: 999px;
  background: var(--surface-3);
  box-shadow: var(--ring);
  color: var(--ink-2);
  white-space: nowrap;
  transition: background .3s var(--spring), color .3s var(--spring);
}
.chip--ok   { background: var(--pass-wash); color: var(--pass); }
.chip--warn { background: var(--warn-wash); color: var(--warn); }

.result__value { display: flex; align-items: baseline; gap: 11px; flex-wrap: wrap; }

.big {
  display: inline-block;
  font-size: clamp(3.4rem, 17vw, 4.4rem);
  font-weight: 560;
  line-height: 1.04;
  letter-spacing: -0.055em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  transition: color .4s var(--spring);
}
.big.is-empty { color: var(--ink-3); opacity: .4; }

/* Micro-pop al cambiar: lo que hace que el número se sienta vivo */
.big.is-tick { animation: tick .4s var(--spring-out); }
@keyframes tick {
  0%   { transform: scale(1); }
  32%  { transform: scale(1.045); }
  100% { transform: scale(1); }
}

.big-sub { font-size: 14px; font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; }


.meter {
  height: 4px; border-radius: 999px;
  background: var(--surface-3);
  box-shadow: inset 0 0 0 1px rgba(10,12,16,.04);
  overflow: hidden; margin-top: 18px;
}
.meter__fill {
  height: 100%; width: 0%; border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-2), var(--brand));
  transition: width .55s var(--spring), background .35s;
}
.meter__fill.is-ok   { background: linear-gradient(90deg, color-mix(in srgb, var(--pass) 60%, white), var(--pass)); }
.meter__fill.is-over { background: linear-gradient(90deg, color-mix(in srgb, var(--warn) 60%, white), var(--warn)); }

/* ================= Detalle plegable ================= */

.disc { border-top: 1px solid var(--line); background: var(--surface); }
.disc__sum {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 15px 18px;
  font-size: 14px; font-weight: 550; letter-spacing: -0.014em;
  color: var(--ink-2);
  cursor: pointer; list-style: none;
  min-height: var(--tap); user-select: none;
  transition: color .18s;
}
.disc__sum::-webkit-details-marker { display: none; }
@media (hover: hover) { .disc__sum:hover { color: var(--ink); } }
.disc__chev {
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: var(--ink-3); stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .38s var(--spring);
}
details[open] .disc__chev { transform: rotate(180deg); }
.disc__body { padding: 0 18px 18px; }
details[open] .disc__body { animation: discIn .4s var(--spring); }
@keyframes discIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.math {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
  font-size: 13px; line-height: 1.75;
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 13px 15px;
  white-space: pre-wrap; word-break: break-word;
  margin: 0;
}

/* ================= Contenido ================= */

.mathBlock {
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--ring), var(--sh-1);
  padding: 16px 20px; margin: 20px 0;
  font-size: 16px; color: var(--ink-2);
}
.mathBlock ul { margin: 0 0 10px; padding-left: 18px; }
.mathBlock b { color: var(--ink); }

.store { display: inline-block; }
.store img { width: 194px; height: auto; display: block; }

/* ================= Footer ================= */

footer {
  margin-top: 48px;
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding: 24px 0 calc(26px + var(--safe-b));
  font-size: 13.5px; color: var(--ink-3);
}
.foot__in {
  max-width: 620px; margin: 0 auto; padding: 0 16px;
  display: flex; flex-wrap: wrap; gap: 10px 16px;
  justify-content: space-between; align-items: center;
}
.foot__links { display: flex; flex-wrap: wrap; gap: 14px; }
footer a { color: var(--ink-2); text-decoration: none; transition: color .18s; }
@media (hover: hover) { footer a:hover { color: var(--brand); } }

/* ================= Dock móvil ================= */

.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  padding: 11px 18px calc(11px + var(--safe-b));
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  -webkit-backdrop-filter: saturate(190%) blur(24px);
  backdrop-filter: saturate(190%) blur(24px);
  box-shadow: var(--sh-up);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  transform: translateY(115%);
  transition: transform .45s var(--spring);
}
.dock.is-on { transform: none; }
.dock__k { font-size: 11.5px; font-weight: 600; letter-spacing: .075em; text-transform: uppercase; color: var(--ink-3); }
.dock__v {
  font-size: 27px; font-weight: 560; line-height: 1.15;
  font-variant-numeric: tabular-nums; letter-spacing: -0.045em;
  transition: color .4s var(--spring);
}
@media (min-width: 700px) { .dock { display: none; } }

.sp { height: 4px; }
.sp--lg { height: 30px; }

/* ================= Modo app instalada ================= */

.app-mode main.wrap { padding-top: 8px; }
@media (display-mode: standalone) {
  body { overscroll-behavior: none; }
  .appbar { background: var(--bg); }
}

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

/* Dos card__body consecutivos duplicarían el padding vertical */
.card__body--tight { padding-top: 0; }

/* --- Botón día / noche --------------------------------------------------- */

.theme-btn {
  margin-left: auto;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  position: relative;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-2);
  border-radius: 11px;
  cursor: pointer;
  transition: transform .3s var(--spring-out), background .18s, color .18s, border-color .18s;
}
.theme-btn:active { transform: scale(.88); }
@media (hover: hover) { .theme-btn:hover { color: var(--brand); border-color: var(--brand); background: var(--brand-wash); } }

.theme-btn__ico {
  position: absolute;
  width: 17px; height: 17px;
  fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .45s var(--spring), opacity .3s var(--spring);
}
/* Se muestra el icono del modo AL QUE VAS A CAMBIAR, no el actual:
   en claro ves la luna (= ir a oscuro). Rotan al cruzarse. */
.theme-btn__ico--sun  { opacity: 0; transform: rotate(-90deg) scale(.4); }
.theme-btn__ico--moon { opacity: 1; transform: none; }

:root[data-theme="dark"] .theme-btn__ico--sun  { opacity: 1; transform: none; }
:root[data-theme="dark"] .theme-btn__ico--moon { opacity: 0; transform: rotate(90deg) scale(.4); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-btn__ico--sun  { opacity: 1; transform: none; }
  :root:not([data-theme="light"]) .theme-btn__ico--moon { opacity: 0; transform: rotate(90deg) scale(.4); }
}


/* El tip del separador decimal: mismo texto del copy, pero al lado del campo
   donde de verdad lo necesitas, no ocupando el hero antes de ver el formulario. */
.field-hint--tip {
  margin-top: 3px !important;
  font-size: 12px;
  opacity: .78;
}