/* ============================================================
   CAE - Tema premium (vidrio oscuro azul pizarra)
   Compartido por todas las páginas (su/, admin/, personal/, logins):
   tarjetas .dash-card, cuadros .cae-credenciales-cuadros y modales Bootstrap
   ============================================================ */

:root {
    --dash-ink: #f8fafc;          /* texto principal sobre tarjeta oscura */
    --dash-ink-2: #cbd5e1;        /* texto secundario                     */
    --dash-muted: #94a3b8;        /* etiquetas / subtítulos               */
    --dash-line: rgba(255, 255, 255, 0.10);
    --dash-s1: #5598e7;           /* acento azul                          */
    --dash-s2: #1baf7a;           /* verde-teal                           */
    --dash-s3: #eda100;           /* ámbar                                */
}

/* ---- Tarjeta premium: vidrio oscuro azul pizarra ----
   .dash-card  -> tarjetas del dashboard
   .cae-credenciales-cuadros -> cuadros de selección de plantel del resto
   (border con !important para ganar a la utilidad .border de Bootstrap) */
.dash-card,
.cae-credenciales-cuadros {
    background: linear-gradient(160deg, rgba(30, 41, 59, 0.96) 0%, rgba(15, 23, 42, 0.97) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.35),
                inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(8px);
    color: var(--dash-ink-2);
}

.dash-card {
    padding: 18px 20px;
    height: 100%;
}

.cae-credenciales-cuadros {
    padding-top: 14px;
}

/* Encabezado "Seleccione un plantel" del cuadro */
.cae-credenciales-cuadros > span {
    color: #e2e8f0;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Etiquetas dentro de tarjetas oscuras */
.dash-card .form-label,
.dash-card .form-label strong,
.dash-card label,
.cae-credenciales-cuadros label,
.cae-credenciales-cuadros label strong {
    color: #e2e8f0;
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* Controles (selects, inputs, fechas) dentro de tarjetas oscuras */
.dash-card .form-select,
.dash-card .form-control,
.cae-credenciales-cuadros .form-select,
.cae-credenciales-cuadros .form-control {
    background-color: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #f1f5f9;
    border-radius: 10px;
    color-scheme: dark; /* iconos nativos (calendario/reloj/flecha) en claro */
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.dash-card .form-select:focus,
.dash-card .form-control:focus,
.cae-credenciales-cuadros .form-select:focus,
.cae-credenciales-cuadros .form-control:focus {
    background-color: rgba(15, 23, 42, 0.7);
    border-color: #5598e7;
    color: #fff;
    box-shadow: 0 0 0 0.2rem rgba(85, 152, 231, 0.22);
}

.dash-card .form-select option,
.cae-credenciales-cuadros .form-select option {
    background-color: #1e293b;
    color: #f1f5f9;
}

/* Hover del propio control: mismo tono pero más difuso, sin perder las letras */
.dash-card .form-select:hover,
.dash-card .form-control:hover,
.cae-credenciales-cuadros .form-select:hover,
.cae-credenciales-cuadros .form-control:hover {
    background-color: rgba(51, 65, 85, 0.65);
    border-color: rgba(85, 152, 231, 0.45);
    color: #fff;
}

/* Hover/selección de las opciones del desplegable: azul pizarra suave.
   El box-shadow interior es el truco cross-browser, porque varios navegadores
   ignoran background-color en option:hover y usan el resaltado blanco del sistema. */
.dash-card .form-select option:hover,
.dash-card .form-select option:focus,
.dash-card .form-select option:checked,
.cae-credenciales-cuadros .form-select option:hover,
.cae-credenciales-cuadros .form-select option:focus,
.cae-credenciales-cuadros .form-select option:checked {
    background-color: #334155 !important;
    color: #fff !important;
    box-shadow: 0 0 10px 100px #334155 inset !important;
}

/* ---- Botón principal premium (gradiente azul) ---- */
.dash-btn,
#dash_actualizar {
    background: linear-gradient(135deg, #3987e5 0%, #1c5cab 100%);
    border: none;
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: 10px;
    box-shadow: 0 6px 16px rgba(41, 121, 214, 0.35);
    transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}

.dash-btn:hover,
#dash_actualizar:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    color: #fff;
    box-shadow: 0 8px 20px rgba(41, 121, 214, 0.45);
}

/* ---- Títulos de sección: oscuros fuera de tarjeta, claros dentro ---- */
.dash-section-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 2px;
}

.dash-section-sub {
    font-size: 0.78rem;
    color: #475569;
}

.dash-card .dash-section-title {
    color: var(--dash-ink);
}

.dash-card .dash-section-sub {
    color: var(--dash-muted);
}

/* ---- Toggle de periodo (Día/Semana/Mes/Año) ---- */
.dash-toggle .btn {
    font-size: 0.78rem;
    padding: 4px 14px;
    color: var(--dash-ink-2);
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: transparent;
    transition: all 0.15s ease;
}

.dash-toggle .btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.28);
}

.dash-toggle .btn.active {
    background: linear-gradient(135deg, #3987e5 0%, #1c5cab 100%);
    border-color: transparent;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(41, 121, 214, 0.35);
}

/* ---- Tarjeta clickeable ---- */
.dash-clickable {
    cursor: pointer;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.dash-clickable:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.45);
}

/* ---- Tablas y controles DataTables dentro de tarjeta oscura ---- */
.dash-card hr {
    border-color: rgba(255, 255, 255, 0.12);
    opacity: 1;
}

.dash-card h2 {
    color: var(--dash-ink);
}

.dash-card .table {
    color: var(--dash-ink-2);
    border-color: var(--dash-line);
    margin-bottom: 0.5rem;
}

.dash-card .table thead th {
    color: var(--dash-ink);
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
    background: transparent;
}

.dash-card .table td {
    border-color: var(--dash-line);
}

.dash-card .table-striped > tbody > tr:nth-of-type(odd) > * {
    background: rgba(255, 255, 255, 0.035);
    color: var(--dash-ink-2);
    box-shadow: none;
}

.dash-card .table-striped > tbody > tr:nth-of-type(even) > * {
    background: transparent;
    color: var(--dash-ink-2);
}

.dash-card .table-striped > tbody > tr:hover > * {
    background: rgba(85, 152, 231, 0.10);
    color: #fff;
}

.dash-card .dataTables_wrapper label,
.dash-card .dataTables_wrapper .dataTables_info {
    color: var(--dash-muted) !important;
}

.dash-card .dataTables_wrapper .dataTables_filter input,
.dash-card .dataTables_wrapper .dataTables_length select {
    background-color: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #f1f5f9;
    border-radius: 8px;
    padding: 3px 8px;
    color-scheme: dark;
}

.dash-card .dataTables_wrapper .dataTables_filter input:hover,
.dash-card .dataTables_wrapper .dataTables_length select:hover {
    background-color: rgba(51, 65, 85, 0.65);
    border-color: rgba(85, 152, 231, 0.45);
    color: #fff;
}

.dash-card .dataTables_wrapper .dataTables_length select option {
    background-color: #1e293b;
    color: #f1f5f9;
}

.dash-card .dataTables_wrapper .dataTables_length select option:hover,
.dash-card .dataTables_wrapper .dataTables_length select option:checked {
    background-color: #334155 !important;
    color: #fff !important;
    box-shadow: 0 0 10px 100px #334155 inset !important;
}

.dash-card .dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--dash-ink-2) !important;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
}

.dash-card .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
}

.dash-card .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dash-card .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: linear-gradient(135deg, #3987e5 0%, #1c5cab 100%) !important;
    border-color: transparent !important;
    color: #fff !important;
}

.dash-card .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dash-card .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    color: rgba(148, 163, 184, 0.45) !important;
    background: transparent !important;
    border-color: transparent !important;
}

/* ============================================================
   Modales premium (Bootstrap): mismo vidrio oscuro azul pizarra
   que .dash-card, aplicado a header, body y footer
   ============================================================ */
.modal-content {
    background: linear-gradient(160deg, rgba(30, 41, 59, 0.98) 0%, rgba(15, 23, 42, 0.99) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    box-shadow: 0 18px 44px rgba(2, 6, 23, 0.55),
                inset 0 1px 0 rgba(255, 255, 255, 0.06);
    color: var(--dash-ink-2);
}

.modal-header {
    border-bottom: 1px solid var(--dash-line);
}

.modal-footer {
    border-top: 1px solid var(--dash-line);
}

.modal-title {
    color: var(--dash-ink);
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* Botón de cerrar (X): el SVG negro de Bootstrap se invierte a claro */
.modal .btn-close {
    filter: invert(1) grayscale(100%) brightness(180%);
}

/* ---- Tipografía dentro del modal ---- */
.modal h1,
.modal h2,
.modal h3,
.modal h4,
.modal h5,
.modal h6 {
    color: var(--dash-ink);
}

.modal label,
.modal .form-label,
.modal .form-check-label,
.modal legend {
    color: #e2e8f0;
}

.modal a:not(.btn) {
    color: var(--dash-s1);
}

.modal .text-muted,
.modal .ca-dato-label {
    color: var(--dash-muted) !important;
}

.modal .ca-dato-valor {
    color: var(--dash-ink);
}

.modal hr {
    border-color: rgba(255, 255, 255, 0.12);
    opacity: 1;
}

/* ---- Cajas y contenedores claros dentro del modal ---- */
.modal .bg-light {
    background-color: rgba(15, 23, 42, 0.55) !important;
}

.modal .border {
    border-color: rgba(255, 255, 255, 0.14) !important;
}

.modal .card {
    background: rgba(15, 23, 42, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: var(--dash-ink-2);
}

.modal .list-group-item {
    background: transparent;
    color: var(--dash-ink-2);
    border-color: var(--dash-line);
}

.modal .selected-count {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--dash-ink);
}

.modal .custom-select-container {
    background-color: rgba(15, 23, 42, 0.55);
    border-color: rgba(255, 255, 255, 0.14);
}

.modal .option-item:hover {
    background-color: rgba(85, 152, 231, 0.12);
}

/* ---- Controles de formulario (mismos acabados que .dash-card) ---- */
.modal .form-control,
.modal .form-select {
    background-color: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #f1f5f9;
    border-radius: 10px;
    color-scheme: dark;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.modal .form-control::placeholder {
    color: var(--dash-muted);
}

.modal .form-control:focus,
.modal .form-select:focus {
    background-color: rgba(15, 23, 42, 0.7);
    border-color: #5598e7;
    color: #fff;
    box-shadow: 0 0 0 0.2rem rgba(85, 152, 231, 0.22);
}

.modal .form-control:hover,
.modal .form-select:hover {
    background-color: rgba(51, 65, 85, 0.65);
    border-color: rgba(85, 152, 231, 0.45);
    color: #fff;
}

.modal .form-select option {
    background-color: #1e293b;
    color: #f1f5f9;
}

.modal .form-select option:hover,
.modal .form-select option:focus,
.modal .form-select option:checked {
    background-color: #334155 !important;
    color: #fff !important;
    box-shadow: 0 0 10px 100px #334155 inset !important;
}

.modal .form-control[type="file"]::file-selector-button {
    background: rgba(255, 255, 255, 0.10);
    color: #e2e8f0;
    border: none;
    border-radius: 6px;
    transition: background 0.15s ease;
}

.modal .form-control[type="file"]:hover::file-selector-button {
    background: rgba(85, 152, 231, 0.35);
}

.modal .input-group-text {
    background-color: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #e2e8f0;
}

.modal .form-floating > label {
    color: var(--dash-muted);
}

/* ---- Tablas dentro de modales ---- */
.modal .table {
    color: var(--dash-ink-2);
    border-color: var(--dash-line);
}

.modal .table thead th {
    color: var(--dash-ink);
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
    background: transparent;
}

.modal .table td {
    border-color: var(--dash-line);
}

.modal .table-bordered > :not(caption) > * > * {
    border-color: var(--dash-line);
}

.modal .table-striped > tbody > tr:nth-of-type(odd) > * {
    background: rgba(255, 255, 255, 0.035);
    color: var(--dash-ink-2);
    box-shadow: none;
}

.modal .table-striped > tbody > tr:nth-of-type(even) > * {
    background: transparent;
    color: var(--dash-ink-2);
}

.modal .table-striped > tbody > tr:hover > *,
.modal .table-hover > tbody > tr:hover > * {
    background: rgba(85, 152, 231, 0.10);
    color: #fff;
}

/* ---- DataTables dentro de modales ---- */
.modal .dataTables_wrapper label,
.modal .dataTables_wrapper .dataTables_info {
    color: var(--dash-muted) !important;
}

.modal .dataTables_wrapper .dataTables_filter input,
.modal .dataTables_wrapper .dataTables_length select {
    background-color: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #f1f5f9;
    border-radius: 8px;
    padding: 3px 8px;
    color-scheme: dark;
}

.modal .dataTables_wrapper .dataTables_filter input:hover,
.modal .dataTables_wrapper .dataTables_length select:hover {
    background-color: rgba(51, 65, 85, 0.65);
    border-color: rgba(85, 152, 231, 0.45);
    color: #fff;
}

.modal .dataTables_wrapper .dataTables_length select option {
    background-color: #1e293b;
    color: #f1f5f9;
}

.modal .dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--dash-ink-2) !important;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
}

.modal .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
}

.modal .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.modal .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: linear-gradient(135deg, #3987e5 0%, #1c5cab 100%) !important;
    border-color: transparent !important;
    color: #fff !important;
}

.modal .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.modal .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    color: rgba(148, 163, 184, 0.45) !important;
    background: transparent !important;
    border-color: transparent !important;
}

/* ============================================================
   Etiquetas flotantes (form-floating) — usadas por el envoltorio
   automático de utiles.js en toda la app
   ============================================================ */
/* Neutraliza estilos de página tipo label { margin/width: ... } que
   descolocarían la etiqueta absoluta de Bootstrap */
.form-floating > label {
    margin: 0;
    width: auto;
    text-align: left;
}

/* Color de la etiqueta flotante sobre fondos oscuros premium */
.dash-card .form-floating > label,
.cae-credenciales-cuadros .form-floating > label {
    color: var(--dash-muted);
}