/* ============================================================
   COLOR — el color lo ponen las fotos, nunca la interfaz.
   Cuatro valores hacen toda la web: negro, gris, blanco y hueso.
   ============================================================ */
:root {
  /* --- Base --- */
  --negro: #1c1c1c;
  --grafito: #3d3d3d;
  --gris: #6e6e6e; /* texto secundario */
  --gris-claro: #9b9b9b;
  --blanco: #ffffff;
  --hueso: #f4f2f0; /* bandas alternas */
  --hueso-hondo: #e9e6e2;
  --linea: rgba(28, 28, 28, 0.13);
  --velo: rgba(20, 18, 16, 0.42); /* sobre fotos */

  /* --- Color de marca ---
     El oro del isotipo. Vive en el logotipo y en nada más: no se usa
     como color de interfaz, ni en botones, ni en enlaces, ni en fondos. */
  --oro-marca: #cf9633;

  /* --- Alias semánticos (interfaz clara) --- */
  --texto-titular: var(--negro);
  --texto-cuerpo: var(--gris);
  --texto-fuerte: var(--grafito);
  --texto-apagado: var(--gris-claro);
  --superficie: var(--blanco);
  --superficie-alterna: var(--hueso);
  --superficie-hundida: var(--hueso-hondo);
  --superficie-inversa: var(--negro);
  --borde: var(--linea);
  --borde-fuerte: var(--negro);

  /* --- Alias semánticos (sobre negro o sobre foto) ---
     El blanco nunca va a pelo sobre negro salvo en titulares. */
  --sobre-negro-titular: var(--blanco);
  --sobre-negro-intro: rgba(255, 255, 255, 0.86); /* #ffffffdb */
  --sobre-negro-cuerpo: rgba(255, 255, 255, 0.72); /* #ffffffb8 */
  --sobre-negro-apagado: rgba(255, 255, 255, 0.42); /* #ffffff6b */
  --sobre-negro-linea: rgba(255, 255, 255, 0.14); /* #ffffff24 */
  --sobre-negro-linea-fuerte: rgba(255, 255, 255, 0.18); /* #ffffff2e */
  --sobre-negro-borde-boton: rgba(255, 255, 255, 0.55); /* #ffffff8c */
  --sobre-negro-subrayado: rgba(255, 255, 255, 0.35); /* #ffffff59 */

  /* --- Estados (EXTENSIÓN) ---
     La web pública no tiene colores de estado: es monocroma a propósito.
     Para formularios largos y para una intranet hace falta poder decir
     "esto está mal" sin depender solo del texto. Estos tres son lo más
     apagado que se puede usar sin salirse de la paleta cálida de la marca,
     y valen SOLO para texto de validación, líneas de 2px y tintes de fondo.
     Nunca para botones, ni para rellenos grandes, ni como color de acento. */
  --error: #8f2c1f;
  --error-tinte: #f7efed;
  --ok: #2f6b45;
  --ok-tinte: #edf3ef;
  --alerta: #8a6a1c; /* emparentado con el oro del isotipo */
  --alerta-tinte: #f7f2e6;
}