/* ==========================================================================================
   marca.css — LA IMAGEN DE facto.uno (spec 13). Único archivo con colores, tipografía,
   radios y sombras. Páginas, panel y correos leen de aquí; ningún otro archivo los escribe.

   Reglas del formato (las lee también marca.py para los correos y el ícono):
   · Un token por línea: `--nombre: valor;`. Valores literales: nada de var() aquí.
   · Primer bloque `:root` = modo claro. El `:root` dentro de `prefers-color-scheme: dark` =
     modo oscuro y redefine TODOS los tokens de color (los demás se heredan).
   · Colores en #rrggbb o rgba(); las pruebas revisan el contraste AA de los pares de texto.
   ========================================================================================== */

:root {
  color-scheme: light dark;

  /* — Superficies — */
  --color-fondo: #f6f7f9;              /* fondo de la página */
  --color-superficie: #ffffff;         /* tarjetas, campos, ventanas, cabecera y panel */
  --color-borde: #e2e5ea;              /* separadores y contorno de tarjetas */
  --color-borde-campo: #d9dde3;        /* contorno de campos de captura */

  /* — Texto — */
  --color-texto: #16191d;              /* texto principal y títulos */
  --color-texto-suave: #5f6672;        /* ayudas, notas, metadatos */

  /* — Acento (marca) — */
  --color-acento: #127a3a;             /* botón principal, enlaces, foco, selección */
  --color-acento-texto: #ffffff;       /* texto sobre el acento */
  --color-acento-suave: #e6f3eb;       /* fondo de lo seleccionado, éxitos, compromisos */

  /* — Estados — */
  --color-error: #b42318;
  --color-error-suave: #fdecea;
  --color-aviso: #8a6800;              /* pendientes, borradores, «sin verificar» */
  --color-aviso-suave: #fdf3d8;
  --color-progreso-medio: #d08700;     /* barra de requisitos a medio camino */
  --color-progreso-espera: #e0b000;    /* barra de «escríbela otra vez» mientras va bien */

  /* — Capas — */
  --color-velo: rgba(0, 0, 0, 0.45);   /* fondo detrás de ventanas modales */
  --color-imagen-fondo: #000000;       /* detrás de una foto que no llena su caja */
  --color-codigo-fondo: rgba(128, 128, 128, 0.08);
  --sombra-tarjeta: 0 1px 2px rgba(0, 0, 0, 0.06);
  --sombra-flotante: 0 10px 40px rgba(0, 0, 0, 0.25);   /* menús y ventanas */

  /* — Paleta categórica: un color por campo del ticket en la sesión remota (recuadros sobre la foto
     y chips). La lee el JavaScript del envoltorio; separada por comas, se usa en orden y se repite. — */
  --paleta-campos: #e6194b, #3cb44b, #ffe119, #4363d8, #f58231, #911eb4, #46f0f0, #f032e6, #bcf60c, #fabebe,
                   #008080, #e6beff, #9a6324, #fffac8, #800000, #aaffc3;

  /* — Tipografía — */
  --fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fuente-mono: ui-monospace, Menlo, Consolas, monospace;
  --peso-titulo: 800;
  --interletra-titulo: -0.5px;

  /* — Marca (logotipo de texto «facto.uno»: páginas, panel y correos) — */
  --marca-peso: 800;
  --marca-interletra: -0.5px;
  --marca-color: #16191d;

  /* — Formas — */
  --radio-chico: 8px;                  /* botones compactos, imágenes */
  --radio: 10px;                       /* campos, avisos, elementos de menú */
  --radio-medio: 12px;                 /* botones principales y desplegables */
  --radio-grande: 14px;                /* tarjetas y ventanas */
  --radio-pastilla: 999px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-fondo: #0f1114;
    --color-superficie: #1a1d21;
    --color-borde: #2a2f35;
    --color-borde-campo: #2f343a;
    --color-texto: #eaecef;
    --color-texto-suave: #8b939c;
    --color-acento: #3fb36b;
    --color-acento-texto: #0f1114;
    --color-acento-suave: #16291e;
    --color-error: #f97066;
    --color-error-suave: #3a1d1a;
    --color-aviso: #e0c060;
    --color-aviso-suave: #3d3520;
    --color-progreso-medio: #d08700;
    --color-progreso-espera: #e0c060;
    --color-velo: rgba(0, 0, 0, 0.6);
    --color-imagen-fondo: #000000;
    --color-codigo-fondo: rgba(255, 255, 255, 0.06);
    --sombra-tarjeta: none;
    --sombra-flotante: 0 10px 40px rgba(0, 0, 0, 0.5);
    --marca-color: #eaecef;
  }
}