/* ---------- Colores del sistema ---------- */
/* Todos los colores están aquí como variables. estilos.css, accesibilidad.css y los gráficos solo usan las variables. */
/* Hay 3 juegos: claro (por defecto), oscuro y alto contraste. El panel de accesibilidad elige cuál se usa. */

/* ---------- Claro ---------- */
:root {
    /* Fondos */
    --color-fondo-pagina: #f4f6f9;
    --color-superficie: #fff;
    --color-superficie-alterna: #f7f9fc;
    --color-superficie-tenue: #eef1f5;
    --color-fondo-aviso: #eef3fa;
    --color-fondo-aviso-hover: #e1e9f4;
    --color-fondo-bloqueado: #f1f4f8;

    /* Textos */
    --color-texto: #16202c;
    --color-texto-suave: #5f6b78;
    --color-texto-tenue: #8a95a3;
    --color-titulo: #1f3a5f;
    --color-enlace: #1f3a5f;

    /* Bordes */
    --grosor-borde: 1px;
    --color-borde: #e3e8ef;
    --color-borde-marco: #c9d3e0;
    --color-borde-hover: #9fb0c6;

    /* Azul institucional: botones, encabezado de tablas, casillas marcadas */
    --color-marca: #1f3a5f;
    --color-marca-hover: #183050;
    --color-marca-activo: #132741;
    --color-sobre-marca: #fff;
    --color-sobre-marca-hover: #fff;
    --color-marca-rgb: 31, 58, 95;

    /* Botones de borde rojo y verde (Anular, Reactivar) */
    --color-peligro: #b02a37;
    --color-exito: #157347;

    /* Opción elegida en el panel de accesibilidad */
    --color-elegido-fondo: #1f3a5f;
    --color-elegido-texto: #fff;

    /* Foco del teclado y de los campos */
    --color-foco: #1f3a5f;
    --color-foco-sombra: rgba(31, 58, 95, 0.18);
    --color-foco-fuerte: #f5b400;
    --grosor-foco: 3px;

    /* Menú de arriba */
    --color-menu-fondo: #1f3a5f;
    --color-menu-texto: rgba(255, 255, 255, 0.8);
    --color-menu-texto-fuerte: #fff;
    --color-menu-nombre: rgba(255, 255, 255, 0.85);
    --color-menu-hover: rgba(255, 255, 255, 0.12);
    --color-menu-borde: rgba(255, 255, 255, 0.5);
    --color-menu-activo-fondo: #fff;
    --color-menu-activo-texto: #1f3a5f;

    /* Sombras */
    --sombra-tarjeta: 0 1px 3px rgba(0, 0, 0, 0.08);
    --sombra-tarjeta-suave: 0 1px 2px rgba(16, 24, 40, 0.04);
    --sombra-flotante: 0 4px 12px rgba(16, 24, 40, 0.25);
    --sombra-panel: 0 8px 24px rgba(16, 24, 40, 0.2);

    /* Semáforo (las luces del estado) */
    --semaforo-fondo: #343a40;
    --semaforo-verde: #198754;
    --semaforo-amarillo: #ffc107;
    --semaforo-rojo: #dc3545;
    --semaforo-anillo: #fff;

    /* Flecha de las listas desplegables del registro */
    --flecha-select: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");

    /* Gráficos (los lee static/js/colores-graficos.js) */
    --grafico-texto: #6b7785;
    --grafico-texto-fuerte: #16202c;
    --grafico-rejilla: rgba(0, 0, 0, 0.06);
    --grafico-tooltip: #1f3a5f;
    --grafico-tooltip-borde: #1f3a5f;
    --grafico-barra: #6c8ebf;
    --grafico-meta: #adb5bd;
    --grafico-meta-mes: #8a95a3;
    --grafico-esperado: #6c757d;
    --grafico-real: #0d6efd;
    --grafico-real-relleno: rgba(13, 110, 253, 0.10);
    --grafico-fin-de-semana: #ced4da;
    --grafico-fondo-fin-de-semana: rgba(108, 117, 125, 0.10);
    --grafico-tendencia: #1f3a5f;
    --grafico-separador: #fff;

    /* Niveles del semáforo en los gráficos */
    --nivel-meta-lograda: #0d6efd;
    --nivel-normal: #198754;
    --nivel-preventiva: #ffc107;
    --nivel-riesgo: #dc3545;
    --nivel-incumplimiento: #212529;
}

/* ---------- Oscuro ---------- */
/* Bootstrap ya cambia sus propios colores con data-bs-theme="dark"; aquí van los nuestros */
[data-bs-theme="dark"] {
    --color-fondo-pagina: #15191e;
    --color-superficie: #212529;
    --color-superficie-alterna: #262b31;
    --color-superficie-tenue: #2b3035;
    --color-fondo-aviso: #1b2a3d;
    --color-fondo-aviso-hover: #22344b;
    --color-fondo-bloqueado: #2b3035;

    --color-texto: #e6eaef;
    --color-texto-suave: #aab4c0;
    --color-texto-tenue: #8d98a5;
    --color-titulo: #a9c8f0;
    --color-enlace: #9cc3f5;

    --color-borde: #343a40;
    --color-borde-marco: #495057;
    --color-borde-hover: #6c7a8a;

    --color-marca: #2f5d94;
    --color-marca-hover: #3a6aa3;
    --color-marca-activo: #24507f;
    --color-marca-rgb: 47, 93, 148;

    --color-peligro: #ea868f;
    --color-exito: #75b798;

    --color-elegido-fondo: #2f5d94;

    --color-foco: #9cc3f5;
    --color-foco-sombra: rgba(156, 195, 245, 0.3);

    --color-menu-fondo: #182a42;
    --color-menu-activo-fondo: #a9c8f0;
    --color-menu-activo-texto: #12233a;

    --sombra-tarjeta: 0 1px 3px rgba(0, 0, 0, 0.4);
    --sombra-tarjeta-suave: 0 1px 2px rgba(0, 0, 0, 0.3);
    --sombra-flotante: 0 4px 12px rgba(0, 0, 0, 0.5);
    --sombra-panel: 0 8px 24px rgba(0, 0, 0, 0.5);

    --flecha-select: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");

    --grafico-texto: #aab4c0;
    --grafico-texto-fuerte: #e6eaef;
    --grafico-rejilla: rgba(255, 255, 255, 0.08);
    --grafico-tooltip: #0f1b2b;
    --grafico-tooltip-borde: #495057;
    --grafico-barra: #7ea3d6;
    --grafico-meta: #8d98a5;
    --grafico-meta-mes: #aab4c0;
    --grafico-esperado: #aab4c0;
    --grafico-real: #6ea8fe;
    --grafico-real-relleno: rgba(110, 168, 254, 0.15);
    --grafico-fin-de-semana: #495057;
    --grafico-fondo-fin-de-semana: rgba(255, 255, 255, 0.05);
    --grafico-tendencia: #e6eaef;
    --grafico-separador: #212529;

    --nivel-meta-lograda: #6ea8fe;
    --nivel-normal: #3fb27f;
    --nivel-preventiva: #ffcd39;
    --nivel-riesgo: #ea6370;
    --nivel-incumplimiento: #dee2e6;
}

/* ---------- Alto contraste ---------- */
/* Fondo negro, texto blanco, enlaces amarillos, bordes de 2 px y foco grueso. Contraste de 7:1 o más. */
[data-contraste="alto"] {
    --color-fondo-pagina: #000;
    --color-superficie: #000;
    --color-superficie-alterna: #000;
    --color-superficie-tenue: #000;
    --color-fondo-aviso: #000;
    --color-fondo-aviso-hover: #1a1a1a;
    --color-fondo-bloqueado: #1a1a1a;

    --color-texto: #fff;
    --color-texto-suave: #fff;
    --color-texto-tenue: #d9d9d9;
    --color-titulo: #fff;
    --color-enlace: #ff0;

    --grosor-borde: 2px;
    --color-borde: #fff;
    --color-borde-marco: #fff;
    --color-borde-hover: #ff0;

    --color-marca: #000;
    --color-marca-hover: #ff0;
    --color-marca-activo: #ff0;
    --color-sobre-marca: #fff;
    --color-sobre-marca-hover: #000;
    --color-marca-rgb: 255, 255, 0;

    --color-peligro: #ff8a8a;
    --color-exito: #75e0a7;

    --color-elegido-fondo: #ff0;
    --color-elegido-texto: #000;

    --color-foco: #ff0;
    --color-foco-sombra: #ff0;
    --color-foco-fuerte: #ff0;
    --grosor-foco: 4px;

    --color-menu-fondo: #000;
    --color-menu-texto: #fff;
    --color-menu-texto-fuerte: #fff;
    --color-menu-nombre: #fff;
    --color-menu-hover: #333;
    --color-menu-borde: #fff;
    --color-menu-activo-fondo: #ff0;
    --color-menu-activo-texto: #000;

    --sombra-tarjeta: none;
    --sombra-tarjeta-suave: none;
    --sombra-flotante: none;
    --sombra-panel: none;

    --semaforo-fondo: #000;

    --flecha-select: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");

    --grafico-texto: #fff;
    --grafico-texto-fuerte: #fff;
    --grafico-rejilla: rgba(255, 255, 255, 0.35);
    --grafico-tooltip: #000;
    --grafico-tooltip-borde: #fff;
    --grafico-barra: #fff;
    --grafico-meta: #ff0;
    --grafico-meta-mes: #ff0;
    --grafico-esperado: #fff;
    --grafico-real: #0ff;
    --grafico-real-relleno: rgba(0, 255, 255, 0.15);
    --grafico-fin-de-semana: #808080;
    --grafico-fondo-fin-de-semana: rgba(255, 255, 255, 0.12);
    --grafico-tendencia: #ff0;
    --grafico-separador: #000;

    --nivel-meta-lograda: #4da3ff;
    --nivel-normal: #3ddc84;
    --nivel-preventiva: #ffd60a;
    --nivel-riesgo: #ff6b6b;
    --nivel-incumplimiento: #fff;

    /* Colores propios de Bootstrap */
    --bs-body-bg: #000;
    --bs-body-color: #fff;
    --bs-emphasis-color: #fff;
    --bs-heading-color: #fff;
    --bs-secondary-color: #fff;
    --bs-tertiary-color: #fff;
    --bs-secondary-bg: #000;
    --bs-tertiary-bg: #000;
    --bs-border-color: #fff;
    --bs-border-width: 2px;
    --bs-link-color: #ff0;
    --bs-link-color-rgb: 255, 255, 0;
    --bs-link-hover-color: #ff0;
    --bs-link-hover-color-rgb: 255, 255, 0;
    --bs-secondary-text-emphasis: #fff;
    --bs-secondary-bg-subtle: #000;
    --bs-primary-text-emphasis: #8cc4ff;
    --bs-primary-bg-subtle: #000;
    --bs-primary-border-subtle: #8cc4ff;
    --bs-info-text-emphasis: #6edff6;
    --bs-info-bg-subtle: #000;
    --bs-info-border-subtle: #6edff6;
    --bs-success-text-emphasis: #75e0a7;
    --bs-success-bg-subtle: #000;
    --bs-success-border-subtle: #75e0a7;
    --bs-warning-text-emphasis: #ffd60a;
    --bs-warning-bg-subtle: #000;
    --bs-warning-border-subtle: #ffd60a;
    --bs-danger-text-emphasis: #ff8a8a;
    --bs-danger-bg-subtle: #000;
    --bs-danger-border-subtle: #ff8a8a;
    --bs-form-invalid-color: #ff8a8a;
    --bs-form-invalid-border-color: #ff8a8a;
}