/* Pauta · tokens de diseño · v1.0 (diseno/pauta/pauta.css, adaptado a la app)
   Fuente: Figtree (OFL) alojada en fonts/ (dos subconjuntos del paquete @fontsource-variable/figtree).
   Cifras tabulares en toda la app. Modo claro, oscuro (data-tema="oscuro") o según el sistema (sin data-tema).
   Cada canal declara UN solo color (--ca, lo pone la app desde dashboard.channels); el resto se deriva. */

@font-face { font-family: "Figtree"; font-style: normal; font-display: swap; font-weight: 300 900; src: url("fonts/figtree-latin-ext-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Figtree"; font-style: normal; font-display: swap; font-weight: 300 900; src: url("fonts/figtree-latin-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* Neutros · modo claro */
  --bg: #f4f5f7;            /* fondo de pantalla */
  --sup: #ffffff;           /* superficie: tarjetas, hojas, barras */
  --sup2: #e8ebf0;          /* superficie hundida: segmentos, avatares, chips apagados */
  --tinta: #232a36;         /* texto principal, botones neutros, etapa actual */
  --sec: #5d6675;           /* texto secundario · 5,0:1 sobre --sup */
  --borde: #e1e4ea;         /* bordes de tarjeta */
  --borde2: #d5dae2;        /* bordes de control, etapas bloqueadas */
  --sobre-tinta: #ffffff;   /* texto sobre --tinta */

  /* Estado · FIJOS, iguales en toda la app, nunca derivados del canal */
  --ok: #1a7f4b;            /* aprobado, hecho, conectado */
  --no: #c2362b;            /* rechazado, vencido */
  --alerta: #96600a;        /* pendiente · 5,3:1 sobre blanco */
  --info: #2f62b8;          /* en revisión */
  --gris: #6b7280;          /* bloqueado */
  --sobre-no: #ffffff;      /* texto dentro de la píldora «Vencido» */
  --btn-ok: #1a7f4b;        /* botón Aprobar (mismo en claro y oscuro, texto blanco) */
  --btn-no: #c2362b;        /* botón Rechazar */
  --prueba: #f5d90a;        /* franja «Modo prueba» */
  --sobre-prueba: #1a1a1a;
  --velo: rgba(21, 24, 30, 0.45);

  /* Acento de canal · se asigna por canal (style="--ca: …" desde dashboard.channels); las variantes se derivan solas */
  --ca: var(--tinta);                                           /* valor por defecto cuando no hay canal («Todos») */
  --ca-texto: color-mix(in oklch, var(--ca) 65%, var(--tinta)); /* nombre del canal, ≥4,5:1 sobre --sup y --ca-tinte */
  --ca-tinte: color-mix(in oklch, var(--ca) 12%, var(--sup));   /* cabecera teñida, cabecera de tarjeta de idea */
  --ca-borde: color-mix(in oklch, var(--ca) 30%, var(--sup));   /* borde bajo la cabecera, borde del selector */

  /* Tipografía */
  --fuente: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-xs: 11px;  --t-sm: 13px;  --t-base: 16px;  --t-md: 17px;  --t-lg: 21px;  --t-xl: 30px;  --t-num: 40px;
  --lh-ajustado: 1.2;  --lh-texto: 1.45;
  --peso-normal: 400;  --peso-medio: 500;  --peso-semi: 600;  --peso-negrita: 700;
  --track-titulo: -0.02em;

  /* Espaciado (base 4) */
  --e-1: 4px;  --e-2: 8px;  --e-3: 12px;  --e-4: 16px;  --e-5: 20px;  --e-6: 24px;  --e-8: 32px;
  --margen-pantalla: 20px;
  --zona-segura-sup: env(safe-area-inset-top, 0px);
  --zona-segura-inf: env(safe-area-inset-bottom, 0px);

  /* Tamaños de control */
  --toque-min: 44px;  --boton-alto: 52px;  --boton-alto-sm: 36px;  --barra-pestanas: 64px;  --franja-prueba: 24px;

  /* Bordes */
  --r-sm: 8px;  --r-md: 12px;  --r-lg: 16px;  --r-xl: 18px;  --r-hoja: 24px;  --r-pildora: 999px;
  --borde-ancho: 1px;  --borde-control: 1.5px;  --borde-activo: 2px;

  /* Sombras */
  --sombra: 0 1px 2px rgba(35,42,54,.05), 0 4px 14px rgba(35,42,54,.06);
  --sombra-alta: 0 2px 6px rgba(35,42,54,.06), 0 8px 24px rgba(35,42,54,.1);
  --sombra-activa: 0 0 0 var(--borde-activo) var(--tinta), var(--sombra-alta);

  /* Placeholders de imagen */
  --raya1: #e6e9ee;  --raya2: #dde1e7;

  /* Movimiento */
  --dur-rapida: 120ms;  --dur-normal: 220ms;  --dur-hoja: 320ms;
  --curva: cubic-bezier(.2,.8,.2,1);

  color-scheme: light;
}

/* Las derivadas del acento se recalculan en CADA elemento que define su canal (data-canal o style="--ca: …"):
   una variable personalizada se resuelve donde se declara, así que las de :root (con --ca = tinta) no valen
   para un elemento que cambia --ca más abajo. Mismas fórmulas que en :root; en oscuro, las del bloque oscuro. */
[data-canal], [style*="--ca"] {
  --ca-texto: color-mix(in oklch, var(--ca) 65%, var(--tinta));
  --ca-tinte: color-mix(in oklch, var(--ca) 12%, var(--sup));
  --ca-borde: color-mix(in oklch, var(--ca) 30%, var(--sup));
}

/* Modo oscuro · azul pizarra. Mismos valores en los dos bloques: forzado (data-tema="oscuro") y según el sistema
   (prefers-color-scheme: dark sin data-tema="claro"). Si cambias uno, cambia el otro. */
[data-tema="oscuro"] {
  --bg: #15181e;  --sup: #1e232b;  --sup2: #262d37;
  --tinta: #eef0f3;  --sec: #9aa3b2;          /* 7,1:1 sobre --sup */
  --borde: #2c333e;  --borde2: #3a4250;  --sobre-tinta: #15181e;
  --ok: #4fc48c;  --no: #f0776b;  --alerta: #e0a24a;  --info: #7fa6ea;  --gris: #9aa3b2;
  --sobre-no: #15181e;
  --velo: rgba(0, 0, 0, 0.6);
  --ca-texto: color-mix(in oklch, var(--ca) 55%, var(--tinta));
  --ca-tinte: color-mix(in oklch, var(--ca) 18%, var(--sup));
  --ca-borde: color-mix(in oklch, var(--ca) 35%, var(--sup));
  --sombra: 0 8px 24px rgba(0,0,0,.3);
  --sombra-alta: 0 12px 32px rgba(0,0,0,.4);
  --raya1: #2a3038;  --raya2: #232930;
  color-scheme: dark;
}
[data-tema="oscuro"] [data-canal], [data-tema="oscuro"] [style*="--ca"] {
  --ca-texto: color-mix(in oklch, var(--ca) 55%, var(--tinta));
  --ca-tinte: color-mix(in oklch, var(--ca) 18%, var(--sup));
  --ca-borde: color-mix(in oklch, var(--ca) 35%, var(--sup));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --bg: #15181e;  --sup: #1e232b;  --sup2: #262d37;
    --tinta: #eef0f3;  --sec: #9aa3b2;
    --borde: #2c333e;  --borde2: #3a4250;  --sobre-tinta: #15181e;
    --ok: #4fc48c;  --no: #f0776b;  --alerta: #e0a24a;  --info: #7fa6ea;  --gris: #9aa3b2;
    --sobre-no: #15181e;
    --velo: rgba(0, 0, 0, 0.6);
    --ca-texto: color-mix(in oklch, var(--ca) 55%, var(--tinta));
    --ca-tinte: color-mix(in oklch, var(--ca) 18%, var(--sup));
    --ca-borde: color-mix(in oklch, var(--ca) 35%, var(--sup));
    --sombra: 0 8px 24px rgba(0,0,0,.3);
    --sombra-alta: 0 12px 32px rgba(0,0,0,.4);
    --raya1: #2a3038;  --raya2: #232930;
    color-scheme: dark;
  }
  :root:not([data-tema="claro"]) [data-canal], :root:not([data-tema="claro"]) [style*="--ca"] {
    --ca-texto: color-mix(in oklch, var(--ca) 55%, var(--tinta));
    --ca-tinte: color-mix(in oklch, var(--ca) 18%, var(--sup));
    --ca-borde: color-mix(in oklch, var(--ca) 35%, var(--sup));
  }
}

/* Canales de ejemplo del diseño · un solo valor por canal. En la app el valor real llega de dashboard.channels
   (style="--ca: #…" sobre el elemento con data-canal), así que estas líneas solo sirven de referencia. */
[data-canal="longevidad-hoy"] { --ca: #0f6e73; }   /* Longevidad Hoy · salud 60+ · círculo (canal real) */
[data-canal="vivir"] { --ca: #1e8c6e; }            /* Vivir Bien 60+ · salud · círculo (ejemplo) */
[data-canal="peso"]  { --ca: #c07a12; }            /* Peso a Peso · finanzas · cuadrado (ejemplo) */
[data-canal="mente"] { --ca: #6b4fd8; }            /* Mente Sintética · IA · cuadrado (ejemplo) */

/* Base */
html { font-family: var(--fuente); font-size: var(--t-base); line-height: var(--lh-texto); font-variant-numeric: tabular-nums; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--tinta); }
a { color: var(--tinta); } a:not([class]):hover { color: var(--info); } /* solo los enlaces de texto; botones y tarjetas no cambian de color */
@media (prefers-reduced-motion: reduce) { * { transition-duration: 0ms !important; animation-duration: 0ms !important; } }