/* Los colores están en colores.css como variables; aquí solo se usan. */

.contenedor-grafico { position: relative; height: 280px; }
.indicador { font-size: 1.8rem; font-weight: 700; }

/* Fondo de página */
body { background: var(--color-fondo-pagina); }

/* Barra de menú azul oscuro */
.navbar { background: var(--color-menu-fondo) !important; }
.navbar-brand { color: var(--color-menu-texto-fuerte); font-weight: 600; }
.navbar-brand:hover { color: var(--color-menu-texto-fuerte); }
.navbar .nav-link { color: var(--color-menu-texto); border-radius: 0.5rem; padding: 0.5rem 1rem; }
.navbar .nav-link:hover { color: var(--color-menu-texto-fuerte); background: var(--color-menu-hover); }
.navbar .nav-link.active { color: var(--color-menu-activo-texto); background: var(--color-menu-activo-fondo); font-weight: 600; }
.navbar-toggler { border-color: var(--color-menu-borde); }
.navbar-toggler-icon { filter: invert(1); }

/* Títulos */
main h1 { color: var(--color-titulo); font-weight: 600; }

/* Tarjetas */
.card { border: 0; box-shadow: var(--sombra-tarjeta); }
.card-header { background: var(--color-superficie); font-weight: 600; }
.card.text-center { border-left: 4px solid var(--color-marca); }

/* Tablas */
.table thead th { background: var(--color-superficie-tenue); font-weight: 600; }

/* Semáforo */
.semaforo { display: inline-flex; gap: 6px; padding: 6px 10px; background: var(--semaforo-fondo); border-radius: 999px; }
.luz { width: 18px; height: 18px; border-radius: 50%; opacity: 0.25; }
.luz-verde { background: var(--semaforo-verde); }
.luz-amarilla { background: var(--semaforo-amarillo); }
.luz-roja { background: var(--semaforo-rojo); }
.luz.activa { opacity: 1; box-shadow: 0 0 0 2px var(--semaforo-anillo); }

.cuadro { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 4px; }
.tabla-scroll { max-height: 360px; overflow: auto; }
.tabla-scroll thead th { position: sticky; top: 0; z-index: 1; }

/* Plantilla base (Django) */
.navbar .navbar-text { color: var(--color-menu-nombre); }

/* Login: Django genera los campos con form.as_p, sin clases de Bootstrap */
.login-card label { display: block; margin-bottom: 0.25rem; font-weight: 500; }
.login-card input:not([type="hidden"]) {
    display: block; width: 100%; padding: 0.375rem 0.75rem;
    border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius);
}
.login-card input:not([type="hidden"]):focus {
    border-color: var(--color-foco); outline: 0; box-shadow: 0 0 0 0.25rem var(--color-foco-sombra);
}
.login-card .errorlist {
    list-style: none; padding: 0.5rem 0.75rem; margin-bottom: 1rem;
    color: var(--bs-danger-text-emphasis); background: var(--bs-danger-bg-subtle);
    border-radius: var(--bs-border-radius);
}


/* =========================================================
   Dashboards (comunal y por centro)
   Todo queda bajo .dashboard para no afectar otras páginas.
   ========================================================= */
.dashboard {
    --dash-borde: var(--color-borde);
    --dash-texto-suave: var(--color-texto-suave);
    --dash-texto-fuerte: var(--color-texto);
}
.dashboard-subtitulo { color: var(--dash-texto-suave); font-size: 0.9rem; }

/* Tarjetas: borde fino en vez de sombra marcada, encabezado sin raya */
.dashboard .card {
    border: var(--grosor-borde) solid var(--dash-borde);
    border-radius: 0.75rem;
    box-shadow: var(--sombra-tarjeta-suave);
}
.dashboard .card-header { background: transparent; border-bottom: 0; padding: 1rem 1.25rem 0; }
.dashboard .card-header h2 { color: var(--dash-texto-fuerte); font-weight: 600; }
.dashboard .card-ayuda { margin: 0.2rem 0 0; font-size: 0.8rem; color: var(--dash-texto-suave); }
.dashboard .card-body { padding: 1rem 1.25rem; }
.dashboard .card-footer { background: transparent; border-top: var(--grosor-borde) solid var(--dash-borde); }

/* Indicadores: etiqueta pequeña arriba y número grande con dígitos de ancho fijo */
.dashboard .kpi { border-top: 3px solid var(--color-titulo); }
.dashboard .kpi-etiqueta {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--dash-texto-suave);
}
.dashboard .kpi-valor {
    margin-top: 0.35rem;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--dash-texto-fuerte);
    font-variant-numeric: tabular-nums;
}
.dashboard .kpi-detalle { margin-top: 0.25rem; font-size: 0.8rem; color: var(--dash-texto-suave); }

/* Estado general: semáforo e insignia en una cápsula */
.dashboard .estado-general {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.8rem;
    background: var(--color-superficie);
    border: var(--grosor-borde) solid var(--dash-borde);
    border-radius: 999px;
}

/* Gráficos */
.dashboard .contenedor-dona { height: 220px; }

/* Tablas: encabezados en letra pequeña gris y cifras alineadas */
.dashboard .table thead th {
    background: transparent;
    color: var(--dash-texto-suave);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    border-bottom: var(--grosor-borde) solid var(--dash-borde);
}
.dashboard .table td { font-variant-numeric: tabular-nums; border-color: var(--dash-borde); }
.dashboard .table th:first-child, .dashboard .table td:first-child { padding-left: 1.25rem; }
.dashboard .table th:last-child, .dashboard .table td:last-child { padding-right: 1.25rem; }
.dashboard .barra-cumplimiento { width: 4.5rem; height: 0.4rem; background: var(--color-superficie-tenue); }
/* El ancho de la barra llega en --ancho desde la plantilla; así VS Code no marca error por las llaves de Django */
.dashboard .barra-cumplimiento { --ancho: 0%; }
.dashboard .barra-cumplimiento .progress-bar { width: var(--ancho); }
.dashboard .lista-estados .list-group-item { padding: 0.45rem 1.25rem; border-color: var(--dash-borde); }



/* Pantalla de carga de Excel: Django genera el campo de archivo y los errores sin clases de Bootstrap */
.pantalla-carga label { display: block; margin-bottom: 0.35rem; font-weight: 500; }
.pantalla-carga input[type="file"] {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}
.pantalla-carga input[type="file"]::file-selector-button {
    margin: -0.375rem 0.75rem -0.375rem -0.75rem;
    padding: 0.375rem 0.75rem;
    color: var(--bs-body-color);
    background-color: var(--bs-tertiary-bg);
    border: 0;
    border-right: 1px solid var(--bs-border-color);
}
.pantalla-carga .errorlist {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0.5rem 0.75rem;
    color: var(--bs-danger-text-emphasis);
    background: var(--bs-danger-bg-subtle);
    border-radius: var(--bs-border-radius);
}
/* Encabezado fijo de las tablas con scroll: con fondo para que las filas no se vean a través */
.dashboard .tabla-scroll thead th { background: var(--color-superficie); }


/* Tablas enmarcadas dentro de las tarjetas: borde, encabezado azul institucional y filas alternadas */
.dashboard .card > .table-responsive {
    margin: 0 1.25rem 1.25rem;
    border: var(--grosor-borde) solid var(--color-borde-marco);
    border-radius: 0.6rem;
}
.dashboard .card > .table-responsive thead th {
    background: var(--color-marca);
    color: var(--color-sobre-marca);
    border-bottom: 0;
}
.dashboard .card > .table-responsive tbody tr:nth-child(odd) > td { background-color: var(--color-superficie-alterna); }
.dashboard .card > .table-responsive tbody tr:last-child > td { border-bottom: 0; }
.dashboard .card > .table-responsive .table th:first-child,
.dashboard .card > .table-responsive .table td:first-child { padding-left: 0.75rem; }
.dashboard .card > .table-responsive .table th:last-child,
.dashboard .card > .table-responsive .table td:last-child { padding-right: 0.75rem; }

/* Enlaces de las tablas: azul oscuro sin subrayar; la flechita indica que se puede hacer clic */
.dashboard .table a { color: var(--color-enlace); font-weight: 600; text-decoration: none; white-space: nowrap; }
.dashboard .table a::after {
    content: "›";
    content: "›" / "";
    margin-left: 0.4rem;
    color: var(--color-texto-tenue);
    transition: margin-left 0.15s ease;
}
.dashboard .table a:hover,
.dashboard .table a:focus-visible { text-decoration: underline; }
.dashboard .table a:hover::after,
.dashboard .table a:focus-visible::after { margin-left: 0.6rem; color: var(--color-enlace); }


/* =========================================================
   Registro individual y anulación de inscripciones
   Django genera los campos sin clases de Bootstrap: aquí reciben el mismo aspecto que .form-control y .form-select
   ========================================================= */
.pantalla-formulario { max-width: 60rem; margin-inline: auto; }
.pantalla-formulario.pantalla-angosta { max-width: 45rem; }

/* Secciones del formulario: título pequeño en azul institucional con una línea debajo */
.pantalla-formulario .seccion-formulario + .seccion-formulario { margin-top: 1.75rem; }
.pantalla-formulario .seccion-formulario legend {
    float: none;
    margin-bottom: 0.9rem;
    padding-bottom: 0.45rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-titulo);
    border-bottom: var(--grosor-borde) solid var(--dash-borde);
}

.pantalla-formulario .form-label { margin-bottom: 0.35rem; font-weight: 500; }
.pantalla-formulario .campo-opcional { font-weight: 400; color: var(--dash-texto-suave); }

/* :where() deja esta regla con poco peso, para que las de foco y error puedan cambiar el borde */
.pantalla-formulario :where(select, textarea, input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"])) {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
/* Flecha de las listas desplegables, igual a la de Bootstrap */
.pantalla-formulario select:not([multiple]) {
    appearance: none;
    padding-right: 2.25rem;
    background-image: var(--flecha-select);
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
}
.pantalla-formulario textarea { resize: vertical; }
.pantalla-formulario :is(input, select, textarea):focus {
    border-color: var(--color-foco);
    outline: 0;
    box-shadow: 0 0 0 0.25rem var(--color-foco-sombra);
}
.pantalla-formulario :is(input, select, textarea):is([readonly], :disabled) { background-color: var(--bs-secondary-bg); }

/* Campo con error: borde y mensaje en rojo */
.pantalla-formulario .campo-con-error :is(input, select, textarea) { border-color: var(--bs-form-invalid-border-color); }
.pantalla-formulario .campo-con-error :is(input, select, textarea):focus { box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25); }
.pantalla-formulario .campo-error-texto { margin-top: 0.25rem; font-size: 0.875em; color: var(--bs-form-invalid-color); }

.pantalla-formulario .card-footer { padding: 1rem 1.25rem; }

/* Anulación: datos de la inscripción en cuadrícula y tarjeta con borde rojo arriba */
.pantalla-formulario .card-anulacion { border-top: 3px solid var(--bs-danger); }
.dashboard .datos-inscripcion {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 1rem 1.5rem;
}
.dashboard .datos-inscripcion dt {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--dash-texto-suave);
}
.dashboard .datos-inscripcion dd { margin: 0.2rem 0 0; font-weight: 600; color: var(--dash-texto-fuerte); }

/* Listado: buscador y paginación en azul institucional */
.dashboard .filtros .form-label { margin-bottom: 0.35rem; font-weight: 500; }
/* En celular, nombre y centro no se aprietan: la tabla se desplaza hacia el lado dentro de su tarjeta */
.dashboard .celda-ancha { min-width: 12rem; }
.dashboard .pagination {
    --bs-pagination-color: var(--color-enlace);
    --bs-pagination-hover-color: var(--color-enlace);
    --bs-pagination-focus-color: var(--color-enlace);
    --bs-pagination-active-color: var(--color-elegido-texto);
    --bs-pagination-active-bg: var(--color-elegido-fondo);
    --bs-pagination-active-border-color: var(--color-elegido-fondo);
}

/* Listado: estado en cápsula gris; las anuladas en rojo */
.dashboard .estado-inscripcion {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--bs-secondary-text-emphasis);
    background: var(--bs-secondary-bg-subtle);
    border-radius: 999px;
}
.dashboard .estado-inscripcion[data-estado*="anul" i] { color: var(--bs-danger-text-emphasis); background: var(--bs-danger-bg-subtle); }

/* Los botones dentro de tablas (Editar, Anular) conservan su aspecto de botón, sin la flechita de los enlaces */
.dashboard .table a.btn { color: var(--bs-btn-color); font-weight: var(--bs-btn-font-weight); }
.dashboard .table a.btn::after { content: none; }
.dashboard .table a.btn:hover,
.dashboard .table a.btn:focus-visible { color: var(--bs-btn-hover-color); text-decoration: none; }


/* =========================================================
   Año de inscripción (1 de octubre al 30 de septiembre)
   Aviso de meses restantes, filtro activo y títulos de sección
   ========================================================= */
.dashboard .aviso-anual {
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    color: var(--dash-texto-fuerte);
    background: var(--color-fondo-aviso);
    border: var(--grosor-borde) solid var(--color-borde-marco);
    border-left: 4px solid var(--color-titulo);
    border-radius: 0.6rem;
}
.dashboard .aviso-anual.aviso-bajo-meta {
    background: var(--bs-warning-bg-subtle);
    border-color: var(--bs-warning-border-subtle);
    border-left-color: var(--bs-warning);
}
.dashboard .filtro-activo {
    margin-bottom: 1rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.875rem;
    color: var(--dash-texto-suave);
    background: var(--color-superficie);
    border: var(--grosor-borde) dashed var(--color-borde-marco);
    border-radius: 0.5rem;
}
/* Títulos que separan el año del mes */
.dashboard h2.h5 { color: var(--color-titulo); font-weight: 600; }


/* ---------- Metas anuales, inicio y marca CM ---------- */

/* Metas: la página usa todo el ancho porque la tabla tiene los 12 meses */
.pantalla-formulario.pantalla-ancha { max-width: none; }

/* En metas el nombre del centro va en un th, así que también le damos el fondo de fila alternada */
.dashboard .card > .table-responsive tbody tr:nth-child(odd) > th { background-color: var(--color-superficie-alterna); }
.dashboard .card > .table-responsive tbody th { font-weight: 600; color: var(--dash-texto-fuerte); border-color: var(--dash-borde); }

/* Inicio: tarjetas con la línea azul arriba */
.dashboard .tarjeta-acceso { border-top: 3px solid var(--color-titulo); }
.dashboard .tarjeta-acceso p { color: var(--dash-texto-suave); }

/* Marca CM del listado (inscripción cargada desde Excel) */
.dashboard .marca-carga {
    display: inline-block;
    margin-right: 0.4rem;
    padding: 0.05rem 0.4rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    vertical-align: middle;
    color: var(--color-titulo);
    background: var(--color-fondo-aviso);
    border: var(--grosor-borde) solid var(--color-borde-marco);
    border-radius: 999px;
}


/* ---------- Campos de formulario ---------- */
/* Todo va dentro de main, así no se cambia el menú ni el admin de Django */

/* Colores de los campos, se usan más abajo */
:root {
    --campo-borde: var(--color-borde-marco);
    --campo-borde-hover: var(--color-borde-hover);
    --campo-foco: var(--color-foco);
    --campo-sombra-foco: 0 0 0 0.2rem var(--color-foco-sombra);
    --campo-fondo-bloqueado: var(--color-fondo-bloqueado);
}

/* Campos normales: borde gris azulado y esquinas redondeadas */
main .form-control,
main .form-select,
main .pantalla-formulario :where(select, textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"])) {
    color: var(--color-texto);
    background-color: var(--color-superficie);
    border: var(--grosor-borde) solid var(--campo-borde);
    border-radius: 0.5rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
main .form-control-sm,
main .form-select-sm { border-radius: 0.4rem; }

/* Campos sin clase (por ejemplo el login). Con :where() esta regla pesa poco y no pisa a las demás */
main form :where(textarea, input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="date"], input[type="search"], input[type="tel"]) {
    padding: 0.375rem 0.75rem;
    color: var(--color-texto);
    background-color: var(--color-superficie);
    border: var(--grosor-borde) solid var(--campo-borde);
    border-radius: 0.5rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
main form :where(select) {
    color: var(--color-texto);
    border: var(--grosor-borde) solid var(--campo-borde);
    border-radius: 0.5rem;
}

/* Mouse encima: el borde se oscurece un poco */
main .form-control:hover,
main .form-select:hover,
main .pantalla-formulario :where(select, textarea, input):hover,
main form :where(select, textarea, input):hover { border-color: var(--campo-borde-hover); }

/* Al escribir: borde y sombra azul */
main .form-control:focus,
main .form-select:focus,
main .pantalla-formulario :where(select, textarea, input):focus,
main form :where(select, textarea, input):focus {
    border-color: var(--campo-foco);
    outline: 0;
    box-shadow: var(--campo-sombra-foco);
}

/* Campos bloqueados o de solo lectura: fondo gris */
main .form-control:disabled,
main .form-select:disabled,
main .form-control[readonly],
main .pantalla-formulario :where(select, textarea, input):is([readonly], :disabled) { background-color: var(--campo-fondo-bloqueado); }

/* Texto de ejemplo dentro del campo */
main :where(input, textarea)::placeholder { color: var(--color-texto-tenue); opacity: 1; }

/* Campos con error: siempre rojos, aunque tengan el mouse encima o se esté escribiendo */
main .pantalla-formulario .campo-con-error :is(input, select, textarea),
main .pantalla-formulario .campo-con-error :is(input, select, textarea):hover { border-color: var(--bs-form-invalid-border-color); }
main .pantalla-formulario .campo-con-error :is(input, select, textarea):focus {
    border-color: var(--bs-form-invalid-border-color);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-danger-rgb), 0.18);
}

/* Selector de archivo de la carga de Excel */
main .pantalla-carga input[type="file"],
main input[type="file"].form-control {
    border-color: var(--campo-borde);
    border-radius: 0.5rem;
}
main .pantalla-carga input[type="file"]::file-selector-button,
main input[type="file"].form-control::file-selector-button {
    font-weight: 600;
    color: var(--color-titulo);
    background-color: var(--color-fondo-aviso);
    border-right-color: var(--campo-borde);
}
main .pantalla-carga input[type="file"]:hover::file-selector-button,
main input[type="file"].form-control:hover::file-selector-button { background-color: var(--color-fondo-aviso-hover); }

/* Casillas marcadas en azul */
main .form-check-input { border-color: var(--campo-borde); }
main .form-check-input:checked { background-color: var(--color-marca); border-color: var(--color-marca); }
main .form-check-input:focus { border-color: var(--campo-foco); box-shadow: var(--campo-sombra-foco); }

main .form-label { font-weight: 500; }


/* ---------- Botones azules ---------- */
/* Cambia el azul de Bootstrap por el azul del menú. El botón de cerrar sesión no cambia porque está fuera de main */
main .btn-primary {
    --bs-btn-color: var(--color-sobre-marca);
    --bs-btn-bg: var(--color-marca);
    --bs-btn-border-color: var(--color-marca);
    --bs-btn-hover-color: var(--color-sobre-marca-hover);
    --bs-btn-hover-bg: var(--color-marca-hover);
    --bs-btn-hover-border-color: var(--color-marca-hover);
    --bs-btn-focus-shadow-rgb: var(--color-marca-rgb);
    --bs-btn-active-color: var(--color-sobre-marca-hover);
    --bs-btn-active-bg: var(--color-marca-activo);
    --bs-btn-active-border-color: var(--color-marca-activo);
    --bs-btn-disabled-color: var(--color-sobre-marca);
    --bs-btn-disabled-bg: var(--color-marca);
    --bs-btn-disabled-border-color: var(--color-marca);
}

/* Botones con borde azul (por ejemplo Editar) */
main .btn-outline-primary {
    --bs-btn-color: var(--color-enlace);
    --bs-btn-border-color: var(--color-enlace);
    --bs-btn-hover-color: var(--color-sobre-marca-hover);
    --bs-btn-hover-bg: var(--color-marca);
    --bs-btn-hover-border-color: var(--color-marca);
    --bs-btn-focus-shadow-rgb: var(--color-marca-rgb);
    --bs-btn-active-color: var(--color-sobre-marca-hover);
    --bs-btn-active-bg: var(--color-marca-activo);
    --bs-btn-active-border-color: var(--color-marca-activo);
    --bs-btn-disabled-color: var(--color-enlace);
    --bs-btn-disabled-border-color: var(--color-enlace);
}


/* Botones de borde gris, rojo y verde (Cancelar, Limpiar, Anular, Reactivar...) con tonos que se leen bien en claro y en oscuro */
main .btn-outline-secondary,
main .btn-outline-danger,
main .btn-outline-success {
    --bs-btn-color: var(--color-boton-borde);
    --bs-btn-border-color: var(--color-boton-borde);
    --bs-btn-hover-color: var(--color-superficie);
    --bs-btn-hover-bg: var(--color-boton-borde);
    --bs-btn-hover-border-color: var(--color-boton-borde);
    --bs-btn-active-color: var(--color-superficie);
    --bs-btn-active-bg: var(--color-boton-borde);
    --bs-btn-active-border-color: var(--color-boton-borde);
    --bs-btn-disabled-color: var(--color-boton-borde);
    --bs-btn-disabled-border-color: var(--color-boton-borde);
}
main .btn-outline-secondary { --color-boton-borde: var(--color-texto-suave); }
main .btn-outline-danger { --color-boton-borde: var(--color-peligro); }
main .btn-outline-success { --color-boton-borde: var(--color-exito); }


/* ---------- Letra grande ---------- */
/* Con letra al 130 o 150 %, los enlaces y botones del menú no se parten: si no caben, bajan a otra fila */
.navbar .nav-link,
.navbar .btn { white-space: nowrap; }
.navbar-nav { flex-wrap: wrap; }
/* El nombre del sistema puede bajar a 2 líneas en el celular, en vez de salirse de la pantalla */
.navbar-brand { white-space: normal; min-width: 0; }


/* ---------- Oscuro ---------- */
/* La insignia "Incumplimiento" es negra y no se vería sobre fondo oscuro: se invierte */
[data-bs-theme="dark"] .text-bg-dark {
    color: var(--color-fondo-pagina) !important;
    background-color: var(--nivel-incumplimiento) !important;
}
/* Textos de color (por ejemplo la brecha): versiones claras que se leen sobre fondo oscuro y negro */
[data-bs-theme="dark"] .text-danger { color: var(--bs-danger-text-emphasis) !important; }
[data-bs-theme="dark"] .text-success { color: var(--bs-success-text-emphasis) !important; }
[data-bs-theme="dark"] .text-primary { color: var(--bs-primary-text-emphasis) !important; }


/* ---------- Alto contraste ---------- */
/* Enlaces amarillos y subrayados (los botones no) */
[data-contraste="alto"] a:not(.btn) { color: var(--color-enlace); text-decoration: underline; }
[data-contraste="alto"] .navbar .nav-link.active { color: var(--color-menu-activo-texto); }
[data-contraste="alto"] .navbar { border-bottom: var(--grosor-borde) solid var(--color-borde) !important; }

/* Bordes de 2 px en tarjetas y tablas */
[data-contraste="alto"] .card { border: var(--grosor-borde) solid var(--color-borde); }
[data-contraste="alto"] .table > :not(caption) > * > * { border-color: var(--color-borde); }
[data-contraste="alto"] .dashboard .card > .table-responsive thead th { border-bottom: var(--grosor-borde) solid var(--color-borde); }

/* Foco grueso y amarillo en todo lo que se usa con teclado */
[data-contraste="alto"] :focus-visible {
    outline: var(--grosor-foco) solid var(--color-foco) !important;
    outline-offset: 2px;
}

/* Botones negros con borde blanco; con el mouse encima o al presionarlos, amarillos con letra negra */
[data-contraste="alto"] .btn {
    --bs-btn-color: var(--color-sobre-marca);
    --bs-btn-bg: var(--color-marca);
    --bs-btn-border-color: var(--color-borde);
    --bs-btn-hover-color: var(--color-sobre-marca-hover);
    --bs-btn-hover-bg: var(--color-marca-hover);
    --bs-btn-hover-border-color: var(--color-marca-hover);
    --bs-btn-active-color: var(--color-sobre-marca-hover);
    --bs-btn-active-bg: var(--color-marca-activo);
    --bs-btn-active-border-color: var(--color-marca-activo);
    --bs-btn-disabled-color: var(--color-texto-tenue);
    --bs-btn-disabled-bg: var(--color-marca);
    --bs-btn-disabled-border-color: var(--color-texto-tenue);
    border-width: var(--grosor-borde);
}

/* Insignias del estado: fondo negro, texto blanco y borde del color del nivel */
[data-contraste="alto"] .badge {
    color: var(--color-texto) !important;
    background-color: var(--color-superficie) !important;
    border: var(--grosor-borde) solid var(--color-borde);
}
[data-contraste="alto"] .badge.text-bg-primary { border-color: var(--nivel-meta-lograda); }
[data-contraste="alto"] .badge.text-bg-success { border-color: var(--nivel-normal); }
[data-contraste="alto"] .badge.text-bg-warning { border-color: var(--nivel-preventiva); }
[data-contraste="alto"] .badge.text-bg-danger { border-color: var(--nivel-riesgo); }
[data-contraste="alto"] .badge.text-bg-dark { border-color: var(--nivel-incumplimiento); }

/* Las luces apagadas del semáforo se ven un poco más */
[data-contraste="alto"] .luz:not(.activa) { opacity: 0.45; }

/* Página actual de la paginación: letra negra sobre amarillo */
[data-contraste="alto"] .active > .page-link { color: var(--color-elegido-texto); }