/* Guía visual MDM — tokens compartidos por todas las pantallas de la app de gestión.
   Índigo tomado del isologotipo oficial (MDM2/IMG). Ver docs/GUIA_VISUAL.md.

   Puntos de quiebre (breakpoints) estándar. Las media queries no aceptan var(), por eso
   se documentan acá y se escriben literales en cada archivo. Usar SOLO estos:
     - 40rem (640 px)  celular grande / tablet chica   → min-width: 40rem | max-width: 39.99rem
     - 48rem (768 px)  tablet                          → min-width: 48rem | max-width: 47.99rem
     - 64rem (1024 px) PC (menú lateral)               → min-width: 64rem | max-width: 63.99rem
   El «.99» evita que en el ancho exacto apliquen a la vez la regla min y la max. */
:root {
    /* Marca */
    --mdm-indigo: #273583;
    --mdm-indigo-800: #212c70;
    --mdm-indigo-900: #1a2260;
    --mdm-indigo-100: #e3e6f4;

    /* Superficies y texto (modo claro) */
    --mdm-papel: #f4f5f9;
    --mdm-blanco: #ffffff;
    --mdm-tinta: #191d3a;
    --mdm-tinta-suave: #565c7e;
    --mdm-borde: #d5d8e6;

    /* Texto sobre índigo */
    --mdm-sobre-indigo: #ffffff;
    --mdm-sobre-indigo-suave: #b9bfe6;

    /* Señal: único color de acento. Solo para estados en vivo y límites. */
    --mdm-senal: #f2b705;

    /* Prioridades de tareas */
    --mdm-prioridad-urgente: #c62f24;
    --mdm-prioridad-alta: #d9661a;
    --mdm-prioridad-media: #273583;
    --mdm-prioridad-baja: #aab0c8;

    /* Tarea completada / paso hecho */
    --mdm-hecho: #2f7d4f;
    --mdm-columna: #eceef5;
    --mdm-hecho-claro: #e2f1e8;
    --mdm-hecho-texto: #24633e;   /* texto «hecho»: 7,2:1 sobre blanco y 6,1:1 sobre --mdm-hecho-claro (AA) */

    /* Etiquetas de los planes: fondo claro + texto oscuro del mismo tono (contraste AA) */
    --mdm-etq-rojo: #fbe1df;      --mdm-etq-rojo-texto: #8f2119;
    --mdm-etq-naranja: #fde7d4;   --mdm-etq-naranja-texto: #8a3e0a;
    --mdm-etq-amarillo: #fdf1c7;  --mdm-etq-amarillo-texto: #6b5200;
    --mdm-etq-verde: #dff1e3;     --mdm-etq-verde-texto: #1d6332;
    --mdm-etq-turquesa: #d6f0ef;  --mdm-etq-turquesa-texto: #135c58;
    --mdm-etq-azul: #dde6fa;      --mdm-etq-azul-texto: #1f3f8f;
    --mdm-etq-violeta: #ebe2f8;   --mdm-etq-violeta-texto: #55288f;
    --mdm-etq-rosa: #fbe0ee;      --mdm-etq-rosa-texto: #8c1e57;
    --mdm-etq-gris: #e8e9ef;      --mdm-etq-gris-texto: #3f4462;

    /* Estados */
    --mdm-error: #c62f24;
    --mdm-error-claro: #ff8a7e;

    /* Tipografía (Poppins, servida desde la app) */
    --mdm-fuente: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
    --mdm-texto-sm: 0.875rem;
    --mdm-texto: 1rem;
    --mdm-texto-lg: 1.25rem;
    --mdm-titulo: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem);
    --mdm-interlineado: 1.6;

    /* Espaciado: escala de 4 px */
    --mdm-e1: 0.25rem;
    --mdm-e2: 0.5rem;
    --mdm-e3: 0.75rem;
    --mdm-e4: 1rem;
    --mdm-e6: 1.5rem;
    --mdm-e8: 2rem;
    --mdm-e12: 3rem;

    /* Forma: radio chico en controles, nada de radios grandes decorativos */
    --mdm-radio-sm: 4px;          /* controles, botones, etiquetas cuadradas */
    --mdm-radio-md: 8px;          /* tarjetas, paneles, burbujas, ventanas */
    --mdm-radio-lg: 12px;         /* bloques grandes de inicio, vista previa */
    --mdm-radio-pildora: 999px;   /* contadores, chips y barras con puntas redondas */
    --mdm-radio: var(--mdm-radio-sm); /* obsoleto: alias para módulos viejos; usar --mdm-radio-sm */

    /* Sombras: de más suave a más marcada */
    --mdm-sombra-1: 0 1px 3px rgb(25 29 58 / 0.08);   /* superficies apoyadas (tarjetas, burbujas) */
    --mdm-sombra-2: 0 8px 24px rgb(25 29 58 / 0.18);  /* flotantes: menús, paneles, avisos, hover */
    --mdm-sombra-3: 0 20px 50px rgb(25 29 58 / 0.3);  /* ventanas modales */

    /* Foco visible: anillo índigo + halo amarillo (se ve sobre fondo claro y sobre índigo) */
    --mdm-foco-color: var(--mdm-indigo);
    --mdm-foco-ancho: 3px;
    --mdm-foco-sombra: 0 0 0 6px var(--mdm-senal);
}