/* tokens.css — paleta --domia-* para las paginas que NO cargan main.css
   =====================================================================
   UX0-01: el portal del vecino, las paginas publicas (aviso por QR,
   encuesta, baja de emails, demo caducada) y el cartel imprimible tienen su
   propio CSS y no cargan main.css. Antes definian los tokens en un :root
   propio cada una; ahora salen todos de aqui.
   (Octubre 2026: faltaban el cierre de este comentario y la apertura de
   :root, y el navegador descartaba TODAS las variables: las paginas
   publicas y el portal salian sin colores.) */
:root {
    /* Interfaz v2 (docs/ux/interfaz-v2/ENCARGO.md §6): mismos nombres, valores
       afinados. «Corporativo por sustraccion»: fondo calido muy claro,
       superficies blancas, filetes de 1 px y color solo para el estado. */
    --domia-primary: #3D6B5A;
    --domia-primary-soft: #EAF1ED;
    --domia-primary-hover: #2F5547;
    --domia-primary-border: #C9DCD2; /* filete de lo seleccionado (chip activo) */
    --domia-dark: #1A2332;
    --domia-green: #2F7A55;
    --domia-green-soft: #E6F2EC;
    --domia-green-hover: #25613F;
    --domia-orange: #C97A1A;      /* aviso: el PUNTO y el borde; el texto va en -soft-fg */
    --domia-orange-soft: #FBF0E2;
    /* CON-V-02: color del TEXTO sobre los fondos -soft. Medido sobre su
       fondo: verde 5,56:1 · rojo 5,03:1 · naranja 5,21:1 · beige 4,60:1. */
    --domia-green-soft-fg: #266B4A;
    --domia-red-soft-fg: #A8302A;
    --domia-orange-soft-fg: #9A520B;
    --domia-beige-soft-fg: #726450;
    --domia-orange-hover: #A85A0C;
    --domia-red: #B8352B;
    --domia-red-soft: #FBEAE8;
    --domia-purple: #6A4FC4;      /* «en marcha»; lo que propone la IA lleva icono de destello, no color */
    --domia-purple-soft: #EFEBFA;
    --domia-beige: #9A9389;       /* = gray-400: el beige se retira al neutro decorativo (los mocks no lo usan) */
    --domia-beige-light: #EDE5DA;
    --domia-gray-50: #FBFAF8;     /* cabecera de tabla, paneles suaves */
    --domia-gray-100: #EFEBE5;    /* filete suave: filas, hover */
    --domia-gray-200: #E7E2DA;    /* filete de superficies */
    --domia-gray-500: #5C564E;    /* texto secundario: 6,6:1 sobre el fondo */
    --domia-gray-400: #9A9389;    /* decorativo: bordes e iconos, nunca texto (3:1) */
    --domia-gray-300: #CFC7BB;    /* bordes marcados, hover de control, guiones de "sin dato" */
    --domia-gray-600: #4A453F;    /* texto secundario con enfasis */
    --domia-gray-700: #3F3A34;
    --domia-gray-800: #1E2226;    /* texto de trabajo: 14,7:1 */
    --domia-bg: #F7F5F1;          /* fondo de pagina (el de body) */
    --domia-bg-soft: #FBFAF8;     /* fondo suave de paneles (= gray-50) */
    --domia-card-bg: #FFFFFF;     /* superficie */
    --domia-navy: #1A2332;        /* alias historico de --domia-dark */
    --domia-border-control: #E1DBD2; /* borde de inputs, selects y botones secundarios */
    /* Barra lateral marino (decision de German, ENCARGO §2) */
    --domia-marino-hover: #243042;
    --domia-marino-activo: #2B3A4D;
    --domia-marino-texto: #C9D1DA;   /* 10,2:1 sobre marino */
    --domia-marino-etiqueta: #8FA0B3; /* 5,9:1 sobre marino */
    /* Geometria */
    --domia-radius-sm: 0.375rem;  /* 6 px: controles */
    --domia-radius: 0.625rem;     /* 10 px: superficies */
    --domia-radius-pill: 999px;   /* chips y contadores */
    --domia-shadow-float: 0 8px 24px rgba(30, 34, 38, 0.10); /* solo lo que flota */
    /* Espacio: 4 / 8 / 12 / 16 / 24 / 32 */
    --domia-space-1: 0.25rem;
    --domia-space-2: 0.5rem;
    --domia-space-3: 0.75rem;
    --domia-space-4: 1rem;
    --domia-space-5: 1.5rem;
    --domia-space-6: 2rem;
    /* Tipografia: seis tamanos (ENCARGO §2) */
    --domia-fs-xs: 0.75rem;       /* 12 · antetitulo */
    --domia-fs-sm: 0.8125rem;     /* 13 · etiquetas, botones, metadatos */
    --domia-fs-base: 0.875rem;    /* 14 · texto de trabajo */
    --domia-fs-md: 0.9375rem;     /* 15 · titulo de seccion */
    --domia-fs-lg: 1.125rem;      /* 18 · cifra destacada */
    --domia-fs-xl: 1.5rem;        /* 24 · titulo de pagina */
}


/* UX3-01 — los cinco tonos del badge de estado (macro badge_estado).
   Copia literal del bloque de main.css: el portal del vecino pinta los mismos
   estados que la app (una incidencia «resuelta» es verde en los dos lados) y
   antes tenia su propio diccionario con hex a mano en la plantilla.
   tests/test_tono_estado.py comprueba que los cinco tonos existen aqui. */
.ui-badge { font-weight: 600; }
.ui-badge-exito   { background: var(--domia-green-soft);   color: var(--domia-green-soft-fg); }
.ui-badge-aviso   { background: var(--domia-orange-soft);  color: var(--domia-orange-soft-fg); }
.ui-badge-peligro { background: var(--domia-red-soft);     color: var(--domia-red-soft-fg); }
.ui-badge-info    { background: var(--domia-purple-soft);  color: var(--domia-purple); }
.ui-badge-neutro  { background: var(--domia-gray-100);     color: var(--domia-gray-600); }