/* Fita · estilos compartidos (Diseño base, 6 nov 2026).
   ÚNICO sitio donde se define un color, una fuente o un tamaño de la app.
   Las pantallas (hoy.css, estilos.css) solo colocan cosas y leen estos tokens con var(--nombre).
   Origen: FITA — DESIGN SYSTEM v2.15 (tokens.css), con la noche corregida a grafito (D073).
   Noche = tema por defecto. Los momentos de día (amanecer, dia, tarde) están escritos pero apagados:
   se activan poniendo data-theme en <html>, en un bloque aparte.
   Sin recursos externos: la CSP solo admite lo que está dentro de la app. */

/* ───────── fuentes propias (latin: incluye castellano y catalán) ───────── */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/fraunces-latin.woff2) format("woff2-variations"), url(fonts/fraunces-latin.woff2) format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 200 800; font-display: swap; src: url(fonts/atkinson-next-latin.woff2) format("woff2-variations"), url(fonts/atkinson-next-latin.woff2) format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/atkinson-mono-400.woff2) format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/atkinson-mono-500.woff2) format("woff2"); }

/* ───────── tokens que no cambian con el momento ───────── */
:root {
  --esp-1: 4px; --esp-2: 8px; --esp-3: 12px; --esp-4: 16px; --esp-5: 24px; --esp-6: 32px; --esp-7: 48px; --esp-8: 72px;
  --radio-s: 6px; --radio-m: 12px; --radio-l: 20px; --radio-redondo: 9999px;
  --dur-rapida: 150ms; --dur-media: 220ms; --dur-momento: 1200ms;
  --curva-salida: cubic-bezier(0.2, 0.7, 0.2, 1);
  --tactil-min: 44px;
  --ancho-lectura: 640px;
  --font-titulo: "Fraunces", "Young Serif", Georgia, serif;
  --font-texto: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Atkinson Hyperlegible Mono", ui-monospace, Menlo, monospace;
  --font-hanzi: "PingFang SC", "Noto Sans SC", sans-serif; /* Noto Sans SC no se aloja: pesa mucho y en Apple ya está PingFang. */
  --titulo-ajuste: "SOFT" 100, "WONK" 1; /* Fraunces siempre con estos ejes. */
}

/* ───────── NOCHE (por defecto): grafito cálido y neutro, botón ámbar ───────── */
:root, [data-theme="noche"] {
  --fondo: #3E3833;
  --superficie: #4A433D;
  --superficie-2: #544C45;
  --linea: #5C544C;
  --linea-fuerte: #9A8E82;
  --tinta: #F3EEE8;
  --tinta-2: #CDC3B8;
  --tinta-3: #A89D91;
  --primario: #F5B55A;
  --on-primario: #2B2622;
  --primario-suave: #5A4520;
  --acento: #A9C2D1;
  --acento-tinta: #2B2622;
  --sol: #F5B55A;
  --error: #F5B0A8;
  --error-suave: #5A2F2B;
  --aviso: #F5B55A;
  --aviso-suave: #5A4520;
  --papel: #F3E4D2;
  --pegatina: var(--area-tiria);
  --hecho: var(--tinta-2);
  --espera: var(--tinta-3);
  /* La marca: tres piedras, de abajo arriba (decisión de Laia, 6 nov 2026). Iguales en los cuatro momentos. */
  --fita-1: #F5B55A; --fita-2: #8DACBF; --fita-3: #E480BB;
  --luna: #F6EAD7;
  --foco: #F3EEE8;
  --velo: #12100EB3;
  --area-oliva: #3D6A2C;    --area-oliva-tinta: #FBEBD8;
  --area-nepal: #8DACBF;    --area-nepal-tinta: #520E0D;
  --area-fulvo: #E97E0C;    --area-fulvo-tinta: #361319;
  --area-rosa: #E480BB;     --area-rosa-tinta: #3A0E22;
  --area-tiria: #7E2550;    --area-tiria-tinta: #F5B55A;
  --area-rajah: #F5B55A;    --area-rajah-tinta: #601938;
  --sombra-papel: 0 1px 2px #00000066, 0 12px 28px -8px #000000A0;
  --sombra-pegatina: 0 0 0 3px #F6EAD7, 0 3px 10px 1px #00000080;
  --anillo-foco: 0 0 0 2px #3E3833, 0 0 0 4px #F3EEE8;
  /* Extensiones de la app (no vienen del design system; revisar al hacer la escala de carga definitiva):
     la carga del día con tres palabras en Hoy (menos carga, carga perfecta, más carga). */
  --ok: #8FD6A4;
  --carga-menos: #6A6158;
  --carga-perfecta: #B9D48A; --carga-perfecta-tinta: #26301A;
  color-scheme: dark;
}

/* ───────── DÍA (apagados hasta el bloque de momentos) ───────── */
[data-theme="dia"] {
  --fondo: #F4E9D6; --superficie: #FFF8EC; --superficie-2: #EBDCC3; --linea: #DCC9A9; --linea-fuerte: #7E6F4E;
  --tinta: #292E16; --tinta-2: #5A5338; --tinta-3: #776D52;
  --primario: #17505B; --on-primario: #FBE9D8; --primario-suave: #D3E8E8;
  --acento: #E97E0C; --acento-tinta: #292E16; --sol: #F5B55A;
  --error: #B3261E; --error-suave: #F9DCD5; --aviso: #8A5300; --aviso-suave: #F8E2BB;
  --papel: #FFFDF7; --luna: #FFF8EC; --foco: #292E16; --velo: #292E1666;
  --area-oliva: #2C5520; --area-oliva-tinta: #FAC0DA;
  --area-tiria: #601938;
  --ok: #2C5520; --carga-menos: #D8C9AA; --carga-perfecta: #B9D48A; --carga-perfecta-tinta: #26301A;
  --sombra-papel: 0 1px 2px #292E161F, 0 10px 24px -10px #292E1640;
  --sombra-pegatina: 0 0 0 3px #FFFFFF, 0 3px 8px 1px #292E1640;
  --anillo-foco: 0 0 0 2px #F4E9D6, 0 0 0 4px #292E16;
  color-scheme: light;
}
[data-theme="amanecer"] {
  --fondo: #F8E7D2; --superficie: #FFF6EC; --superficie-2: #F0DCC2; --linea: #E5CBA8; --linea-fuerte: #78684A;
  --tinta: #292E16; --tinta-2: #5A5338; --tinta-3: #746A4F;
  --primario: #17505B; --on-primario: #FBE9D8; --primario-suave: #D3E8E8;
  --acento: #F5B55A; --acento-tinta: #292E16; --sol: #F7C27A;
  --error: #A82219; --error-suave: #FADAD3; --aviso: #874F12; --aviso-suave: #F8DDC6;
  --papel: #FFFDF7; --luna: #FFF4EF; --foco: #292E16; --velo: #292E1666;
  --area-oliva: #2C5520; --area-oliva-tinta: #FAC0DA;
  --area-tiria: #601938;
  --ok: #2C5520; --carga-menos: #E0CDAE; --carga-perfecta: #B9D48A; --carga-perfecta-tinta: #26301A;
  --sombra-papel: 0 1px 2px #4A3A1A1F, 0 10px 24px -10px #4A3A1A40;
  --sombra-pegatina: 0 0 0 3px #FFFFFF, 0 3px 8px 1px #4A3A1A40;
  --anillo-foco: 0 0 0 2px #F8E7D2, 0 0 0 4px #292E16;
  color-scheme: light;
}
[data-theme="tarde"] {
  --fondo: #F7D9A6; --superficie: #FFF1D9; --superficie-2: #EFC98A; --linea: #E2BC7E; --linea-fuerte: #6E5022;
  --tinta: #292E16; --tinta-2: #5A4524; --tinta-3: #6E5226;
  --primario: #17505B; --on-primario: #FBE9D8; --primario-suave: #D3E8E8;
  --acento: #E97E0C; --acento-tinta: #292E16; --sol: #FBD38A;
  --error: #9C1F17; --error-suave: #F7D3C2; --aviso: #7A4600; --aviso-suave: #F9DFAE;
  --papel: #FFFBF2; --luna: #FFF1D9; --foco: #292E16; --velo: #292E1666;
  --area-oliva: #2C5520; --area-oliva-tinta: #FAC0DA;
  --area-tiria: #601938;
  --ok: #2C5520; --carga-menos: #DDBB84; --carga-perfecta: #B9D48A; --carga-perfecta-tinta: #26301A;
  --sombra-papel: 0 1px 2px #4A2E101F, 0 10px 24px -10px #4A2E1040;
  --sombra-pegatina: 0 0 0 3px #FFFFFF, 0 3px 8px 1px #4A2E1040;
  --anillo-foco: 0 0 0 2px #F7D9A6, 0 0 0 4px #292E16;
  color-scheme: light;
}

/* ───────── base ───────── */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  background: var(--fondo); color: var(--tinta);
  font: 400 17px/25px var(--font-texto);
}
@media (min-width: 640px) { body { font-size: 16px; line-height: 24px; } }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--primario); outline-offset: 2px; }
a { color: var(--primario); text-underline-offset: 2px; }
p, h1, h2, h3, dl, dd, ol { margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* tipografía: títulos en Fraunces, nunca en mayúsculas sostenidas */
h1, h2, h3, .titulo-xl, .titulo-l, .titulo-m { font-family: var(--font-titulo); font-variation-settings: var(--titulo-ajuste); }
h1, .titulo-xl { font-size: clamp(36px, 10.5vw, 56px); line-height: 1; font-weight: 800; letter-spacing: -0.02em; text-wrap: balance; }
.titulo-l { font-size: 36px; line-height: 1.1; font-weight: 800; }
h2, .titulo-m { font-size: 24px; line-height: 1.2; font-weight: 700; }
.titulo-bloque { font: 600 16px/22px var(--font-texto); }
.secundario-texto, .msg { font-size: 13px; line-height: 18px; color: var(--tinta-2); }
.etiqueta { font: 700 13px/16px var(--font-texto); letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-2); }
.hora { font: 500 13px/16px var(--font-mono); }
.hanzi { font: 400 40px/48px var(--font-hanzi); }
.msg.ok { color: var(--ok); }
.msg.bad { color: var(--error); }

/* ───────── componentes compartidos ───────── */
/* tarjeta: papel que se toca */
.card { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-l); padding: var(--esp-4) 18px 18px; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-4); min-width: 0; }

/* aviso */
.notice { border-radius: var(--radio-l); padding: var(--esp-3) var(--esp-4); background: var(--primario-suave); color: var(--tinta); }

/* botón: variantes por clase. Un solo .solid (principal) por pantalla. */
.btn {
  font: 700 16px/1 var(--font-texto); min-height: var(--tactil-min); padding: 0 18px;
  border-radius: var(--radio-m); border: 1.5px solid var(--linea); background: var(--superficie-2); color: var(--tinta);
  cursor: pointer; transition: opacity var(--dur-rapida) var(--curva-salida);
}
.btn.sm { min-height: 36px; padding: 0 14px; font-size: 14.5px; }
.btn.solid { background: var(--primario); color: var(--on-primario); border-color: var(--primario); }
.btn.ghost { background: transparent; }
.btn[aria-pressed="true"] { background: var(--tinta); color: var(--superficie); border-color: var(--tinta); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.block { width: 100%; }

/* campo de texto */
.field {
  width: 100%; min-height: 48px; padding: 10px 14px;
  font: 400 16px/1.4 var(--font-texto); color: var(--tinta);
  background: var(--fondo); border: 1.5px solid var(--linea-fuerte); border-radius: var(--radio-m);
}
label.etiqueta-campo { display: block; font-size: 14px; color: var(--tinta-2); margin: var(--esp-3) 0 6px; }
label.etiqueta-campo:first-child { margin-top: 0; }

/* chip: etiqueta redonda pequeña */
.chip { display: inline-block; padding: 1px 9px; border-radius: var(--radio-redondo); border: 1px solid var(--linea); background: var(--superficie-2); color: var(--tinta-2); font: 700 11px/1.5 var(--font-texto); letter-spacing: .06em; text-transform: uppercase; vertical-align: middle; }

/* etiqueta de área: bloque de color sólido con su tinta (area-X sobre area-X-tinta, nunca al revés) */
.f-p-oliva  { --f-p: var(--area-oliva);  --f-pt: var(--area-oliva-tinta); }
.f-p-nepal  { --f-p: var(--area-nepal);  --f-pt: var(--area-nepal-tinta); }
.f-p-fulvo  { --f-p: var(--area-fulvo);  --f-pt: var(--area-fulvo-tinta); }
.f-p-rosa   { --f-p: var(--area-rosa);   --f-pt: var(--area-rosa-tinta); }
.f-p-tiria  { --f-p: var(--area-tiria);  --f-pt: var(--area-tiria-tinta); }
.f-p-rajah  { --f-p: var(--area-rajah);  --f-pt: var(--area-rajah-tinta); }
.etiqueta-area { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--radio-redondo); background: var(--f-p); color: var(--f-pt); font: 700 13px/16px var(--font-texto); }

/* barra de arriba, común a todas las pantallas */
.fita-bar { position: sticky; top: 0; background: var(--fondo); border-bottom: 1px solid var(--linea); z-index: 2; }
.fita-in { max-width: 640px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 12px; }
.fita-mark { display: flex; align-items: center; gap: 10px; color: var(--tinta); text-decoration: none; font: 800 1.1rem/1 var(--font-titulo); }
.fita-mark img { width: 28px; height: 28px; border-radius: 7px; }
.fita-links { margin-left: auto; display: flex; gap: 4px; }
.fita-links a { color: var(--tinta-2); text-decoration: none; font: 700 14px/1 var(--font-texto); padding: 8px 10px; border-radius: var(--radio-m); }
.fita-links a[aria-current="page"] { color: var(--tinta); background: var(--superficie); }

/* movimiento: modo calma y reducir movimiento */
.f-calma, .f-calma * { transition-duration: 0s !important; animation-duration: 0s !important; }
@media (prefers-reduced-motion: reduce) { * { transition-duration: 0s !important; animation-duration: 0s !important; } }