/* ==========================================================================
   MyBuddy · tokens de diseño · Tinta azul de SimpleApps

   Desde el 31-10-2026 MyBuddy sigue el aspecto de la web de SimpleApps
   (Nacho: «vamos a cambiar el diseño y seguir el mismo diseño de web
   (colores, iconos, etc) que tengo en simpleapps»). La fuente es la hoja
   común de las herramientas de SimpleApps:
     ~/simpleapps/agente-disenador/identidad/herramienta.css   (tokens Tinta azul)
     ~/simpleapps/agente-disenador/GUIA.md                      (medidas y reglas)
     ~/simpleapps/agente-orquestador/panel/web/                 (el Admin, el modelo)
   Las letras (Bricolage Grotesque y Schibsted Grotesk, SIL OFL 1.1) van
   copiadas en agentes/plataforma/web/fuentes/.

   Primero van los tokens de Tinta azul con sus nombres (--bg, --surface,
   --primary...). Debajo, los nombres de siempre de MyBuddy (--fondo,
   --texto, --acento...) apuntan a ellos, así estilos.css no cambia de
   vocabulario. Ningún color se escribe fuera de este fichero.

   Cómo se usa:
     <html data-theme="light">   o "dark"; sin atributo, sigue al sistema.
     data-modo="pablo"           cara del alumno (por defecto): algo más grande.
     data-modo="padres"          cara de los padres: más densa, como el Admin.

   Reglas que no se ven en los nombres:
     1. Bien, aviso y mal van en trío (fuerte, suave y texto) y siempre con
        palabra o glifo: el color solo no dice nada.
     2. El azul tiene dos papeles: --acento rellena (#0071e3) y
        --acento-tinta escribe (#0062c4 en claro, #6cb0ff en oscuro), que es
        el que llega a AA.
     3. Sin sombras: se separa con filetes. Radios cortos: 3, 6 y 10 px.
     4. Nada tocable mide menos de --objetivo (44 px) en pantalla táctil ni
        se escribe por debajo de --t-min (11 px).
   ========================================================================== */

@font-face {
  font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("/fuentes/bricolage-grotesque-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url("/fuentes/schibsted-grotesk-latin.woff2") format("woff2");
}

:root {
  color-scheme: light;

  /* --- Tinta azul (identidad/herramienta.css, claro) ------------------- */
  --bg: #f1f5fb;
  --surface: #fcfdff;
  --surface-sunk: #ecf1f9;
  --on: #121c30;
  --on-variant: #34415a;
  --muted: #54627c;
  --outline: #808fa8;              /* 3,3:1 sobre la superficie: bordes que hay que ver */
  --line: #c8d4e6;
  --line-soft: #dee6f2;
  --ink-200: #dee6f2;
  --primary: #0071e3;
  --primary-hover: #0062c4;
  --primary-text: #0062c4;
  --on-primary: #ffffff;
  --primary-soft: #dfeafa;
  --on-primary-soft: #004f9e;
  --success: #2b7050;
  --success-soft: #e1efe6;
  --on-success-soft: #1b4d36;
  --warning: #965a00;
  --warning-soft: #f9ecd5;
  --on-warning-soft: #653c00;
  --danger: #b3261e;
  --danger-soft: #fae6e2;
  --on-danger-soft: #861a13;
  --on-estado: #ffffff;            /* lo que va encima de bien, aviso y mal fuertes */

  /* Colores de categoría propios de MyBuddy (no los hay en Tinta azul):
     refuerzo, excursión y las barras de Salud. */
  --violeta: #6a4bc4;
  --violeta-tinta: #573aa6;
  --turquesa: #0a7a8a;
  --noche: #1f3a66;
  --arena: #c98a1c;
  --salmon: #d9604f;

  /* --- Radios, letra y movimiento (GUIA.md § 3 y 4) -------------------- */
  --r-sm: 3px;
  --r: 6px;
  --r-lg: 10px;
  --r-pill: 999px;
  --font-display: "Bricolage Grotesque", ui-serif, Georgia, serif;
  --font-sans: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* ====================================================================
     Nombres de MyBuddy sobre Tinta azul
     ==================================================================== */

  /* Superficies y líneas */
  --fondo: var(--bg);
  --superficie: var(--surface);
  --superficie-2: var(--surface-sunk);
  --campo: var(--surface);
  --linea: var(--line-soft);
  --linea-borde: var(--line);
  --linea-control: var(--outline);

  /* Texto */
  --texto: var(--on);
  --texto-variante: var(--on-variant);
  --texto-2: var(--muted);
  --texto-hecho: var(--muted);

  /* Acento */
  --acento: var(--primary);
  --acento-hover: var(--primary-hover);
  --acento-tinta: var(--primary-text);
  --acento-suave: var(--primary-soft);
  --sobre-acento: var(--on-primary);
  --sobre-acento-suave: var(--on-primary-soft);
  /* Una tarea de «Hoy» hecha: azul oscuro (Nacho, 02/11: «cada vez que la completan se marcan de color azul oscuro») */
  --tarea-hecha: #0b3a78;
  --sobre-tarea-hecha: #ffffff;

  /* Estados */
  --bien: var(--success);
  --bien-tinta: var(--success);
  --bien-suave: var(--success-soft);
  --sobre-bien-suave: var(--on-success-soft);
  --aviso: var(--warning);
  --aviso-tinta: var(--warning);
  --aviso-suave: var(--warning-soft);
  --sobre-aviso-suave: var(--on-warning-soft);
  --mal: var(--danger);
  --mal-tinta: var(--danger);
  --mal-suave: var(--danger-soft);
  --sobre-mal-suave: var(--on-danger-soft);
  --sobre-semaforo: var(--on-estado);

  /* Urgencia de un examen: verde lejos, ámbar a una semana, rojo el mismo
     día. Todos llevan --sobre-semaforo encima (4,5:1 o más). */
  --urgencia-14: #2b7050;
  --urgencia-10: #4f6a2c;
  --urgencia-7: #965a00;
  --urgencia-5: #a24a10;
  --urgencia-3: #ab3a17;
  --urgencia-2: #af311a;
  --urgencia-1: #b12b1c;
  --urgencia-0: #b3261e;

  /* Bloques del plan */
  --bloque-deberes: var(--warning);
  --sobre-bloque-deberes: var(--on-estado);
  --bloque-estudio: var(--primary);
  --sobre-bloque-estudio: var(--on-primary);
  --bloque-repaso: var(--success);
  --sobre-bloque-repaso: var(--on-estado);
  --bloque-refuerzo: var(--violeta);
  --bloque-refuerzo-tinta: var(--violeta-tinta);

  /* Calendario */
  --finde: var(--surface-sunk);
  --finde-tinta: var(--on-variant);
  --festivo: var(--success-soft);
  --festivo-tinta: var(--on-success-soft);

  /* Estrellas de dificultad */
  --estrella: var(--warning);
  --estrella-apagada: var(--outline);

  /* Cabecera: plana, como el Admin. Sin degradado ni cristal. */
  --cabecera: var(--surface);
  --sobre-cabecera: var(--on);
  --sobre-cabecera-2: var(--muted);
  --cristal: var(--surface-sunk);
  --cristal-borde: var(--line-soft);
  --cristal-arena: var(--warning-soft);
  --cristal-arena-borde: var(--line);
  --desenfoque: none;
  --barra-estado: var(--surface);   /* theme-color de la app y del navegador */

  /* Puntos de estado: siempre con el texto al lado */
  --punto-bien: var(--success);
  --punto-aviso: var(--warning);
  --punto-mal: var(--danger);

  /* Para ti: el oscuro de Kilovatio (igual en los dos temas) */
  --feed-fondo: #0A0E14;
  --feed-superficie: #121823;
  --feed-superficie-2: #1A2332;
  --feed-linea: #25303F;
  --feed-borde-control: #64758C;
  --feed-texto: #E8EEF6;
  --feed-texto-2: #8B9BB0;
  --feed-acento: #6cb0ff;
  --sobre-feed-acento: #06101f;
  --feed-velo: rgba(8, 11, 17, .86);
  --feed-boton: rgba(255, 255, 255, .10);
  --feed-boton-borde: rgba(255, 255, 255, .22);
  --feed-resplandor: none;

  /* Velo de las hojas */
  --velo: rgb(0 0 0 / .25);

  /* Foco: el anillo azul del Admin, sólido de 2 px */
  --foco: var(--primary);
  --foco-sobre-color: var(--primary);
  --anillo-foco: 2px;
  --separacion-foco: 2px;

  /* Sombras: ninguna. Se separa con filetes (GUIA.md § 3). */
  --sombra: none;
  --sombra-sm: none;
  --sombra-fina: none;

  /* Tipografía */
  --fuente: var(--font-sans);
  --fuente-titulo: var(--font-display);
  --peso-negra: 700;
  --peso-fuerte: 600;
  --peso-medio: 500;
  --peso-normal: 400;
  --tracking-titulo: -0.025em;
  --tracking-marca: -0.02em;
  --tracking-mayus: .05em;
  --interlineado: 1.35;
  --interlineado-texto: 1.5;

  /* Radios: 3 chips, 6 controles y filas, 10 tarjetas y hojas */
  --radio-chip: var(--r-sm);
  --radio-dia: var(--r);
  --radio-control: var(--r);
  --radio-campo: var(--r);
  --radio-pildora: var(--r);
  --radio-mes: var(--r-lg);
  --radio-hoja: var(--r-lg);
  --radio-pastilla: var(--r);

  /* Movimiento */
  --dur-pulsar: .1s;
  --dur-marcar: .12s;
  --dur-entrar: .2s;
  --dur-hoja: .2s;
  --dur-anillo: .5s;
  --curva-hoja: cubic-bezier(0.22, 1, 0.36, 1);
  --apretar: .98;
  --apretar-fuerte: .94;
  --crecer-elegido: 1.06;

  --objetivo: 44px;
  --t-min: 11px;
}

/* ==========================================================================
   Tema oscuro (Tinta azul, oscuro). Va dos veces: por preferencia del
   sistema y por elección en la app.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --tarea-hecha: #1d5bb0;
    --bg: #0f1420;
    --surface: #151b29;
    --surface-sunk: #1b2232;
    --on: #eaf0fa;
    --on-variant: #c4cfe2;
    --muted: #9aa6bc;
    --outline: #727e94;
    --line: #323c50;
    --line-soft: #262e3f;
    --ink-200: #252d3e;
    --primary: #0071e3;
    --primary-hover: #0062c4;
    --primary-text: #6cb0ff;
    --on-primary: #ffffff;
    --primary-soft: #0f2440;
    --on-primary-soft: #cfe3ff;
    --success: #6cc79b;
    --success-soft: #17352a;
    --on-success-soft: #bde8d2;
    --warning: #eab35a;
    --warning-soft: #3c2f15;
    --on-warning-soft: #f7da9f;
    --danger: #ff8a80;
    --danger-soft: #4a1c19;
    --on-danger-soft: #ffcbc5;
    --on-estado: #0f1420;
    --violeta: #b49cf5;
    --violeta-tinta: #c9b8ff;
    --turquesa: #4fc3cf;
    --noche: #5b86d6;
    --arena: #eab35a;
    --salmon: #ff8a80;
    --urgencia-14: #6cc79b;
    --urgencia-10: #a9c27a;
    --urgencia-7: #eab35a;
    --urgencia-5: #f2a066;
    --urgencia-3: #f7956f;
    --urgencia-2: #fb8f76;
    --urgencia-1: #fd8c7b;
    --urgencia-0: #ff8a80;
    --velo: rgb(0 0 0 / .55);
    --foco: #6cb0ff;
    --foco-sobre-color: #6cb0ff;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --tarea-hecha: #1d5bb0;
  --bg: #0f1420;
  --surface: #151b29;
  --surface-sunk: #1b2232;
  --on: #eaf0fa;
  --on-variant: #c4cfe2;
  --muted: #9aa6bc;
  --outline: #727e94;
  --line: #323c50;
  --line-soft: #262e3f;
  --ink-200: #252d3e;
  --primary: #0071e3;
  --primary-hover: #0062c4;
  --primary-text: #6cb0ff;
  --on-primary: #ffffff;
  --primary-soft: #0f2440;
  --on-primary-soft: #cfe3ff;
  --success: #6cc79b;
  --success-soft: #17352a;
  --on-success-soft: #bde8d2;
  --warning: #eab35a;
  --warning-soft: #3c2f15;
  --on-warning-soft: #f7da9f;
  --danger: #ff8a80;
  --danger-soft: #4a1c19;
  --on-danger-soft: #ffcbc5;
  --on-estado: #0f1420;
  --violeta: #b49cf5;
  --violeta-tinta: #c9b8ff;
  --turquesa: #4fc3cf;
  --noche: #5b86d6;
  --arena: #eab35a;
  --salmon: #ff8a80;
  --urgencia-14: #6cc79b;
  --urgencia-10: #a9c27a;
  --urgencia-7: #eab35a;
  --urgencia-5: #f2a066;
  --urgencia-3: #f7956f;
  --urgencia-2: #fb8f76;
  --urgencia-1: #fd8c7b;
  --urgencia-0: #ff8a80;
  --velo: rgb(0 0 0 / .55);
  --foco: #6cb0ff;
  --foco-sobre-color: #6cb0ff;
}

/* ==========================================================================
   Paleta clara: colores más suaves, siempre en claro, para quien la tenga en
   familia.persona.config["paleta"] (la pone GET /api/yo). Los rellenos pasan a
   pastel y llevan texto oscuro encima; lo que escribe (--*-tinta) sigue oscuro
   para llegar a AA. Solo cambia la cara de esa persona.
   ========================================================================== */
:root[data-paleta="clara"] {
  --bg: #f7fafe;
  --surface: #ffffff;
  --surface-sunk: #eef4fb;
  --on: #1f2c42;
  --on-variant: #3f4d66;
  --muted: #5a6880;
  --outline: #8493ab;
  --line: #d6e0ee;
  --line-soft: #e7edf6;
  --ink-200: #e7edf6;
  --primary: #a9d3f7;
  --primary-hover: #93c5f2;
  --primary-text: #1565b3;
  --on-primary: #0d2c4d;
  --primary-soft: #e4f1fd;
  --on-primary-soft: #0f4f8c;
  --success: #a8dcc0;
  --success-soft: #e6f5ec;
  --on-success-soft: #1b4d36;
  --warning: #f5d08a;
  --warning-soft: #fcf2dd;
  --on-warning-soft: #653c00;
  --danger: #f6b3ab;
  --danger-soft: #fcebe8;
  --on-danger-soft: #861a13;
  --on-estado: #16283a;
  --violeta: #c9b8f2;
  --violeta-tinta: #573aa6;
  --turquesa: #8fd3dc;
  --noche: #9db8e3;
  --arena: #b97f18;
  --salmon: #f2a99e;
  --tarea-hecha: #bcdcf8;
  --sobre-tarea-hecha: #0d2c4d;
  --bien-tinta: #24694a;
  --aviso-tinta: #8a5200;
  --mal-tinta: #b3261e;
  --estrella: #d99a1c;
  --urgencia-14: #a8dcc0;
  --urgencia-10: #c6dca0;
  --urgencia-7: #f5d08a;
  --urgencia-5: #f6c08f;
  --urgencia-3: #f6b59f;
  --urgencia-2: #f6b3ab;
  --urgencia-1: #f5ada4;
  --urgencia-0: #f4a79e;
  --foco: #1565b3;
  --foco-sobre-color: #1565b3;
}

/* ==========================================================================
   Cara del alumno (por defecto): la misma familia, algo más grande y con
   más aire que la de los padres.
   ========================================================================== */
:root,
[data-modo="pablo"] {
  --t-titulo: 25px;               /* h1 del Admin en el móvil */
  --t-titulo-2: 20px;
  --t-titulo-3: 17px;             /* .h2 del Admin */
  --t-cifra: 22px;                /* .sk-num del Admin */
  --t-cuerpo: 15px;
  --t-cuerpo-2: 15px;
  --t-sm: 14px;
  --t-xs: 12.5px;

  --margen: 16px;
  --hueco: 8px;
  --hueco-seccion: 20px;
  --pad-fila: 12px;
  --pad-tarjeta: 16px;
  --pad-tarjeta-grande: 16px;

  --radio-fila: var(--r);
  --radio-tarjeta: var(--r-lg);

  --barra: 3px;                   /* el filete de color de .sk-cifra y .tarea */
  --caja-icono: 32px;
  --radio-caja-icono: var(--r);
  --icono: 17px;
  --check: 22px;
  --anillo: 72px;
  --grosor-anillo: 6px;

  --sombra-tarjeta: none;
  --sombra-fila: none;
  --borde-tarjeta: 1px solid var(--linea);

  --cabecera-fondo: var(--cabecera);
  --cabecera-texto: var(--sobre-cabecera);
  --cabecera-radio: 0px;
  --emoji-vacio: 32px;
}

/* ==========================================================================
   Cara de los padres: la densidad del Admin (texto de 14,5, filas apretadas).
   ========================================================================== */
[data-modo="padres"] {
  --t-titulo: 22px;
  --t-titulo-2: 18px;
  --t-titulo-3: 16px;
  --t-cifra: 20px;
  --t-cuerpo: 14.5px;
  --t-cuerpo-2: 14px;
  --t-sm: 13.5px;
  --t-xs: 12px;

  --margen: 14px;
  --hueco: 6px;
  --hueco-seccion: 16px;
  --pad-fila: 10px;
  --pad-tarjeta: 12px;
  --pad-tarjeta-grande: 14px;

  --radio-fila: var(--r);
  --radio-tarjeta: var(--r-lg);

  --barra: 3px;
  --caja-icono: 28px;
  --radio-caja-icono: var(--r);
  --icono: 16px;
  --check: 20px;
  --anillo: 56px;
  --grosor-anillo: 5px;

  --sombra-tarjeta: none;
  --sombra-fila: none;
  --borde-tarjeta: 1px solid var(--linea);

  --cabecera-fondo: var(--superficie);
  --cabecera-texto: var(--texto);
  --cabecera-radio: 0px;
  --emoji-vacio: 28px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-pulsar: 0s;
    --dur-marcar: 0s;
    --dur-entrar: 0s;
    --dur-hoja: 0s;
    --dur-anillo: 0s;
    --apretar: 1;
    --apretar-fuerte: 1;
    --crecer-elegido: 1;
  }
}