/* ====================================================================
 * Sistema de diseño de Tribusfera — única fuente de verdad
 * ====================================================================
 *
 * Lo cargan el dashboard del kiosk (/kiosk/) y el panel de familia
 * (/admin/). Antes cada uno tenía su propia copia de la paleta y las dos
 * derivaron respecto a la web pública; de ahí que ahora esté aquí y solo
 * aquí.
 *
 * DESDE LA N3 (2026-10-18) los colores son los del KIT DE MARCA de Julio
 * (`comun/marca/`): azul petróleo #0B3D52, teal #0D5367, coral #F06D55,
 * mostaza #F4BC4F, verde suave #78BFA8 y crema #FFFDF8. Los nombres de los
 * tokens no cambian (azulejo, arcilla, ocre, salvia), así que nada fuera de
 * este fichero sabe que la paleta ha cambiado: VOLVER A LA ANTERIOR ES
 * VOLVER ATRÁS ESTE ÚNICO FICHERO (git, commit de la N3).
 *
 *   azulejo  = azul petróleo   arcilla = coral
 *   ocre     = mostaza         salvia  = verde suave
 *
 * ------------------------------------------------------------------
 * SOBRE LOS CONTRASTES
 * ------------------------------------------------------------------
 * Los colores del kit se usan TAL CUAL como relleno (fondos, avatares,
 * adornos). Como TEXTO, tres no llegan a 4.5:1 sobre el crema, y su variante
 * `-texto` es la mezcla MÍNIMA hacia oscuro que pasa (en pasos de 1 %, mismo
 * tono): coral +29 %, verde +43 %, mostaza +49 %. El petróleo vale tal cual.
 *
 * Dos usos quedan por debajo y es a propósito:
 *   blanco sobre coral  2.99:1 — la inicial de un avatar coral la pone
 *                       tinta.js en tinta oscura (4.64:1), por luminancia.
 *   coral sobre crema   2.94:1 — solo adorno (bordes de aviso junto a un
 *                       texto que ya lo dice); nunca texto ni control.
 *
 * La noche se deriva del petróleo (fondo #0c2531) y los colores del kit
 * valen casi todos tal cual sobre él; el teal se aclara hasta pasar. Todos
 * los pares, con números, al final de este fichero.
 * ==================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* --------------------------------------------------- superficies */
  --bg: #fffdf8;              /* crema del kit */
  --bg-panel: #f7f3ec;        /* tarjetas y bloques: el crema, un punto más hondo */
  --bg-card: #ffffff;

  /* -------------------------------------------------------- tinta */
  --ink: #10303d;             /* el petróleo, apenas agrisado */
  --ink-soft: #766e66;        /* gris cálido, la mezcla mínima que pasa AA */

  /* ------------------------------------------------------- líneas */
  --line: #e9e2d6;
  --line-input: #d8cfc1;

  /* ---------------------------------------------- paleta del kit */
  /* Estos son para RELLENOS: fondos de botón, avatares, badges, bordes. */
  --azulejo: #0b3d52;         /* azul petróleo */
  --azulejo-deep: #072a39;    /* hover del botón primario */
  --arcilla: #f06d55;         /* coral */
  --salvia: #78bfa8;          /* verde suave */
  --ocre: #f4bc4f;            /* mostaza */

  /* Y estos para TEXTO sobre fondo claro. */
  --azulejo-texto: #0b3d52;   /* 10.53:1 sobre panel — vale tal cual */
  --arcilla-texto: #ae5546;   /* coral +29 % oscuro, 4.53:1 */
  --salvia-texto: #49786e;    /* verde +43 % oscuro, 4.53:1 */
  --ocre-texto: #826d38;      /* mostaza +49 % oscuro, 4.53:1 */

  /* Texto que va encima de un relleno de la paleta. */
  --sobre-azulejo: #ffffff;   /* 11.64:1 */
  /* El badge del buzón y la alerta usan `--arcilla-texto` como FONDO y esto
   * como tinta encima: blanco de día, tinta de noche. */
  --sobre-arcilla: #ffffff;   /* 5.01:1 sobre --arcilla-texto */

  /* ---------------------------------------------------- tipografía */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
}

/* ==================================================================
 * NOCHE
 * ==================================================================
 * El fondo es el azul petróleo del kit, más hondo. Sobre él el petróleo de
 * día sería invisible, así que el "azulejo" de noche es el teal aclarado;
 * coral, verde y mostaza valen tal cual (el coral, un 4 % más claro).
 */
[data-theme="noche"] {
  --bg: #0c2531;              /* el petróleo, más hondo */
  --bg-panel: #173441;
  --bg-card: #173441;

  --ink: #f4f0e8;             /* 13.95:1 sobre el fondo */
  --ink-soft: #8e9ca2;        /* 5.61:1 sobre el fondo, 4.63:1 sobre panel */

  --line: rgba(244, 240, 232, 0.14);
  --line-input: rgba(244, 240, 232, 0.22);

  --azulejo: #779faa;         /* el teal del kit, aclarado hasta pasar */
  --azulejo-deep: #678d98;
  --arcilla: #f1735c;         /* coral, +4 % claro */
  --salvia: #78bfa8;          /* verde del kit tal cual */
  --ocre: #f4bc4f;            /* mostaza del kit tal cual */

  /* De noche los rellenos ya son claros, así que sirven como texto. */
  --azulejo-texto: #779faa;   /* 4.57:1 sobre panel */
  --arcilla-texto: #f1735c;   /* 4.58:1 sobre panel */
  --salvia-texto: #78bfa8;    /* 6.12:1 sobre panel */
  --ocre-texto: #f4bc4f;      /* 7.58:1 sobre panel */

  /* Sobre un relleno claro, el fondo oscuro. Blanco encima no llega. */
  --sobre-azulejo: #0c2531;   /* 5.53:1 */
  --sobre-arcilla: #0c2531;   /* 5.55:1 */
}

/* ==================================================================
 * PAGINAS SIN SELECTOR DE TEMA
 * ==================================================================
 * El kiosk y el panel fijan `data-theme` siempre, asi que esto no les
 * afecta. Es para las paginas que se abren desde un email —el magic link y
 * la invitacion—, que no tienen boton de tema ni sesion donde guardarlo:
 * ahi se respeta lo que prefiera el sistema, de modo que abrir la
 * invitacion de noche en el movil salga en oscuro.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #0c2531;
    --bg-panel: #173441;
    --bg-card: #173441;
    --ink: #f4f0e8;
    --ink-soft: #8e9ca2;
    --line: rgba(244, 240, 232, 0.14);
    --line-input: rgba(244, 240, 232, 0.22);
    --azulejo: #779faa;
    --azulejo-deep: #678d98;
    --arcilla: #f1735c;
    --salvia: #78bfa8;
    --ocre: #f4bc4f;
    --azulejo-texto: #779faa;
    --arcilla-texto: #f1735c;
    --salvia-texto: #78bfa8;
    --ocre-texto: #f4bc4f;
    --sobre-azulejo: #0c2531;
    --sobre-arcilla: #0c2531;
  }
}

/* ==================================================================
 * LUZ AMBIENTE
 * ==================================================================
 * Mismos valores que el `hero-luz` de la landing, para que la app y la web
 * se sientan el mismo producto. Los tres degradados se mezclan con los
 * colores de la paleta, así que cambian solos con el tema.
 */
.ambiente {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 45% at 18% 22%,
      color-mix(in oklab, var(--azulejo) 14%, transparent), transparent 70%),
    radial-gradient(ellipse 50% 50% at 85% 30%,
      color-mix(in oklab, var(--arcilla) 10%, transparent), transparent 70%),
    radial-gradient(ellipse 55% 40% at 55% 88%,
      color-mix(in oklab, var(--ocre) 10%, transparent), transparent 70%);
  animation: respirar 16s ease-in-out infinite;
  transition: background 1s ease;
}

@keyframes respirar {
  0%, 100% { opacity: 0.45; transform: scale(1) translateY(0); }
  50%      { opacity: 0.7;  transform: scale(1.04) translateY(-1%); }
}

/* Sin esto, cualquier regla con `display` gana al [hidden] del navegador y
 * el elemento sigue viéndose. Pasó con el panel de acceso, que es flex. */
[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .ambiente { animation: none; }
}

/* ====================================================================
 * CONTRASTES COMPROBADOS (WCAG 2.1 AA: 4.5 texto normal, 3.0 interfaz)
 * Paleta del kit, N3 (2026-10-18). Calculados con la fórmula de WCAG.
 * ====================================================================
 * DÍA
 *   ink sobre bg .................... 13.66:1
 *   ink sobre panel ................. 12.56:1
 *   ink-soft sobre bg ................ 4.93:1
 *   ink-soft sobre panel ............. 4.53:1
 *   sobre-azulejo sobre azulejo ..... 11.64:1  (botón primario)
 *   azulejo-texto sobre bg .......... 11.45:1
 *   azulejo-texto sobre panel ....... 10.53:1
 *   arcilla-texto sobre panel ........ 4.53:1
 *   salvia-texto sobre panel ......... 4.53:1
 *   ocre-texto sobre panel ........... 4.53:1
 *   sobre-arcilla sobre arcilla-texto  5.01:1  (badge del buzón, alerta)
 *   tinta sobre coral ................ 4.64:1  (avatar; blanco daría 2.99)
 *   tinta sobre mostaza .............. 8.04:1  (avatar)
 *   tinta sobre verde ................ 6.49:1  (avatar)
 *   coral sobre crema ................ 2.94:1  (SOLO adorno, nunca texto)
 *
 * NOCHE
 *   ink sobre bg .................... 13.95:1
 *   ink sobre panel ................. 11.52:1
 *   ink-soft sobre bg ................ 5.61:1
 *   ink-soft sobre panel ............. 4.63:1
 *   sobre-azulejo sobre azulejo ...... 5.53:1
 *   azulejo-texto sobre bg ........... 5.53:1
 *   azulejo-texto sobre panel ........ 4.57:1
 *   arcilla-texto sobre panel ........ 4.58:1
 *   salvia-texto sobre panel ......... 6.12:1
 *   ocre-texto sobre panel ........... 7.58:1
 *   sobre-arcilla sobre arcilla-texto  5.55:1  (badge del buzón, alerta)
 * ==================================================================== */