/* =====================================================================
   BeeRIS · CAPA VISUAL
   ---------------------------------------------------------------------
   Se carga la ÚLTIMA en header.php (y en el login): lo que hay aquí gana
   a Bootstrap, a beeris-theme.css y al <style> de la cabecera sin
   necesidad de !important, salvo donde aquéllos ya lo usan.

   La paleta sale del logo y de nada más:
     azul  #0B2A4E  la abeja, el hexágono, «Bee»
     miel  #F7A81B  las franjas, «RIS»
     gris  #8C9091  los arcos del eco

   El azul es la estructura (menú, cabeceras de tabla, botón principal) y
   la miel es SÓLO el acento: lo activo, el foco, lo que se está mirando.
   Los colores de estado —verde, rojo, celeste, morado— no se tocan:
   en este sistema dicen en qué punto está un examen.
   ===================================================================== */

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../fonts/manrope/manrope-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../fonts/manrope/manrope-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------------
   LA PALETA, POR TEMA
   ---------------------------------------------------------------------
   Vivía en el <style> de header.php. Se trajo aquí para que el login
   —que no pasa por la cabecera— use exactamente los mismos valores.

   --acento es el color de «lo activo» y cambia con el tema: azul sobre
   claro, miel sobre oscuro. El azul del logo sobre el fondo de una sala
   de lectura no se ve.
   --------------------------------------------------------------------- */
:root,
[data-theme="light"] {
    --beeris-navy: #0B2A4E;
    --beeris-navy-hover: #123A69;
    --beeris-gold: #F7A81B;
    --beeris-gold-hover: #DE9410;
    --beeris-grey: #8C9091;

    --bg-principal: #F2F5F9;
    --bg-componentes: #FFFFFF;
    --text-color: #12233B;
    --text-muted: #5A6779;
    --border-color: #DCE2EA;
    --sidebar-bg: #0B2A4E;
    --sidebar-header: #0B2A4E;

    --acento: #0B2A4E;
    --acento-suave: rgba(11, 42, 78, 0.07);
    --enlace: #14508F;
    --primario: #0B2A4E;
    --primario-hover: #123A69;
    --campo-borde: #C7D0DB;
    --foco: 0 0 0 3px rgba(247, 168, 27, 0.30);
    --sombra: 0 1px 2px rgba(11, 42, 78, 0.05), 0 6px 20px rgba(11, 42, 78, 0.05);
    --flecha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.4 1.4 6 6l4.6-4.6' fill='none' stroke='%235A6779' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

[data-theme="dark"] {
    /* Azul noche, no negro neutro: es el azul del logo llevado a la sala
       de lectura. Sigue sin encandilar junto a un monitor diagnóstico. */
    --bg-principal: #0A121E;
    --bg-componentes: #121D2E;
    --text-color: #DCE3EC;
    --text-muted: #93A0B2;
    --border-color: #24324A;
    --sidebar-bg: #081120;
    --sidebar-header: #081120;

    --acento: #F7A81B;
    --acento-suave: rgba(247, 168, 27, 0.10);
    --enlace: #8FB6E8;
    --primario: #1D4F8C;
    --primario-hover: #2560A8;
    --campo-borde: #33445F;
    --sombra: 0 1px 2px rgba(0, 0, 0, 0.30), 0 6px 20px rgba(0, 0, 0, 0.25);
    --flecha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.4 1.4 6 6l4.6-4.6' fill='none' stroke='%2393A0B2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* =====================================================================
   BASE
   ===================================================================== */
body {
    font-family: 'Manrope', 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    letter-spacing: -0.01em;
}

a {
    color: var(--enlace);
}

a:hover {
    color: var(--acento);
}

/* RUT, accession, horas: columnas de cifras que se comparan de arriba
   abajo. Con cifras tabulares cada dígito ocupa lo mismo. */
.table,
.form-control,
.badge {
    font-variant-numeric: tabular-nums;
}

::selection {
    background: rgba(247, 168, 27, 0.35);
}

/* =====================================================================
   MENÚ LATERAL
   ---------------------------------------------------------------------
   Lo activo se marca con miel —una franja, como las de la abeja— en vez
   del azul de Bootstrap, que no es de la marca.
   ===================================================================== */
#sidebar .sidebar-header {
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 22px 20px 18px;
}

#sidebar .logo-sistema {
    margin-bottom: 0;
}

#sidebar ul.components {
    padding: 8px 0 20px;
}

#sidebar ul li a {
    margin: 2px 10px;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 0.92rem;
    font-weight: 500;
    color: #C5D0DE;
    transition: background-color 0.15s, color 0.15s;
}

#sidebar ul li a i,
#sidebar ul li a svg {
    width: 1.25em;
    opacity: 0.85;
}

#sidebar ul li a:hover {
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
}

#sidebar ul li.active > a {
    background: rgba(247, 168, 27, 0.14);
    color: #fff;
    font-weight: 700;
    box-shadow: inset 3px 0 0 var(--beeris-gold);
}

#sidebar ul li.active > a i,
#sidebar ul li.active > a svg {
    color: var(--beeris-gold);
    opacity: 1;
}

#sidebar ul li a:focus-visible {
    outline: 2px solid var(--beeris-gold);
    outline-offset: 1px;
}

#sidebar .rotulo-seccion {
    color: #8FA1B8;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 0 22px;
}

#sidebar .btn-colapsar:hover {
    background: rgba(255, 255, 255, 0.10);
}

#sidebar .btn-colapsar:focus-visible {
    outline-color: var(--beeris-gold);
}

body.sidebar-colapsado #sidebar ul li a {
    margin: 2px 12px;
    padding: 11px 0;
    font-size: 1.05rem;
}

body.sidebar-colapsado #sidebar .sidebar-header {
    padding: 14px 8px;
}

@media (max-width: 1200px) {
    #sidebar ul li a {
        margin: 2px 12px;
        padding: 11px 0;
        font-size: 1.05rem;
    }

    #sidebar .sidebar-header {
        padding: 14px 8px;
    }
}

/* =====================================================================
   BARRA SUPERIOR
   ===================================================================== */
.top-navbar {
    border-radius: 14px !important;
    box-shadow: var(--sombra) !important;
}

/* La inicial del usuario, en miel: es el único punto de la barra que
   habla de «usted», y así no compite con los botones azules. */
#avatarUsuario {
    background-color: var(--beeris-gold) !important;
    color: #0B2A4E !important;
    box-shadow: none !important;
}

/* La fecha y la hora del sistema: la hora arriba y en negrita, que es lo
   que se consulta; el día debajo, más chico. Cifras tabulares para que la
   barra no se mueva al cambiar el minuto. */
.bee-reloj {
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.15;
    padding-right: 12px;
    border-right: 1px solid var(--border-color);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.bee-reloj-hora {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-color);
}

.bee-reloj-fecha {
    font-size: 0.74rem;
    color: var(--text-muted);
}

#campanaAlertas:hover,
#btnCambiarTema:hover {
    border-color: var(--acento) !important;
    color: var(--acento) !important;
}

/* =====================================================================
   TARJETAS, VENTANAS Y MENÚS
   ===================================================================== */
.card {
    border-radius: 14px;
}

.card > .card-header:first-child {
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
}

.card > .card-footer:last-child {
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
}

.shadow-sm {
    box-shadow: var(--sombra) !important;
}

.modal-content {
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(4, 16, 33, 0.28);
}

.modal-header {
    border-top-left-radius: 13px;
    border-top-right-radius: 13px;
}

.modal-footer {
    border-bottom-left-radius: 13px;
    border-bottom-right-radius: 13px;
}

.modal-backdrop.show {
    background-color: #06162B;
    opacity: 0.55;
}

.dropdown-menu {
    border-radius: 10px;
    padding: 6px;
    box-shadow: 0 12px 32px rgba(4, 16, 33, 0.16);
}

.dropdown-item {
    border-radius: 6px;
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--acento-suave);
    color: var(--text-color);
}

.alert {
    border-radius: 10px;
}

.badge {
    border-radius: 6px;
}

.badge-pill,
.rounded-pill {
    border-radius: 50rem !important;
}

/* =====================================================================
   BOTONES
   ===================================================================== */
.btn {
    border-radius: 8px;
    font-weight: 600;
}

.btn-sm,
.btn-group-sm > .btn {
    border-radius: 6px;
}

.btn-lg {
    border-radius: 10px;
}

/* Los grupos pegados conservan las esquinas rectas de en medio. */
.btn-group > .btn:not(:last-child):not(.dropdown-toggle),
.input-group > .input-group-prepend > .btn,
.input-group > .btn:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.btn-group > .btn:not(:first-child),
.input-group > .input-group-append > .btn,
.input-group > .btn:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.btn:focus,
.btn.focus {
    box-shadow: var(--foco);
}

.btn-primary,
.btn-primary-custom {
    background-color: var(--primario);
    border-color: var(--primario);
    color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle,
.btn-primary-custom:hover,
.btn-primary-custom:focus {
    background-color: var(--primario-hover);
    border-color: var(--primario-hover);
    color: #fff;
}

.btn-primary.disabled,
.btn-primary:disabled {
    background-color: var(--primario);
    border-color: var(--primario);
}

.btn-outline-primary {
    color: var(--enlace);
    border-color: var(--enlace);
}

.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.show > .btn-outline-primary.dropdown-toggle {
    background-color: var(--primario);
    border-color: var(--primario);
    color: #fff;
}

.btn-warning,
.btn-warning-custom {
    background-color: var(--beeris-gold);
    border-color: var(--beeris-gold);
    color: #0B2A4E;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning-custom:hover,
.btn-warning-custom:focus {
    background-color: var(--beeris-gold-hover);
    border-color: var(--beeris-gold-hover);
    color: #0B2A4E;
}

.btn-link {
    color: var(--enlace);
}

/* =====================================================================
   BOTONES CLAROS SOBRE FONDO CLARO (09-10-2026)
   ---------------------------------------------------------------------
   Varias pantallas se escribieron pensando en el tema oscuro y usan
   botones de contorno BLANCO (`btn-outline-light`) o AMARILLO
   (`btn-outline-warning`). En tema claro, sobre una tarjeta blanca, el
   blanco no se ve (contraste 1,04) y el amarillo apenas (1,49).

   En tema claro pasan a un contorno gris con letra oscura, y a un ámbar
   oscuro. SÓLO sobre superficies claras: dentro de una cabecera o una
   barra oscura siguen blancos, que es donde sí se leen. La lista de
   abajo son esas superficies.
   ===================================================================== */
[data-theme="light"] .btn-outline-light {
    color: var(--text-color);
    border-color: var(--campo-borde);
}

[data-theme="light"] .btn-outline-light:hover,
[data-theme="light"] .btn-outline-light:focus,
[data-theme="light"] .btn-outline-light:not(:disabled):not(.disabled):active {
    background-color: var(--acento-suave);
    border-color: var(--acento);
    color: var(--text-color);
}

[data-theme="light"] .btn-light {
    border-color: var(--campo-borde);
    color: var(--text-color);
}

[data-theme="light"] .btn-outline-warning {
    color: #8A5A00;
    border-color: #D9960F;
}

[data-theme="light"] .btn-outline-warning:hover,
[data-theme="light"] .btn-outline-warning:focus,
[data-theme="light"] .btn-outline-warning:not(:disabled):not(.disabled):active,
[data-theme="light"] .show > .btn-outline-warning.dropdown-toggle {
    background-color: var(--beeris-gold);
    border-color: var(--beeris-gold);
    color: #0B2A4E;
}

/* Sobre lo oscuro, como estaban. */
[data-theme="light"] :is(.bg-dark, .bg-primary, .bg-secondary, .bg-info, .bg-success, .bg-danger,
    .table-dark, .thead-dark, .navbar-dark, #sidebar, .vista-orden-cabecera, .vista-orden-pie,
    .modal-header.text-white, .card-header.text-white, .alert-dark) .btn-outline-light {
    color: #f8f9fa;
    border-color: rgba(248, 249, 250, 0.75);
}

[data-theme="light"] :is(.bg-dark, .bg-primary, .bg-secondary, .bg-info, .bg-success, .bg-danger,
    .table-dark, .thead-dark, .navbar-dark, #sidebar, .vista-orden-cabecera, .vista-orden-pie,
    .modal-header.text-white, .card-header.text-white, .alert-dark) .btn-outline-light:hover {
    background-color: rgba(248, 249, 250, 0.15);
    color: #fff;
    border-color: #fff;
}

[data-theme="light"] :is(.bg-dark, .bg-primary, .bg-secondary, .bg-info, .bg-success, .bg-danger,
    .table-dark, .thead-dark, .navbar-dark, #sidebar, .vista-orden-cabecera, .vista-orden-pie,
    .modal-header.text-white, .card-header.text-white) .btn-outline-warning {
    color: #ffc107;
    border-color: #ffc107;
}

/* El azul de Bootstrap, allí donde se usa como «color de la casa». */
.bg-primary,
.badge-primary {
    background-color: var(--primario) !important;
}

.text-primary {
    color: var(--enlace) !important;
}

.border-primary {
    border-color: var(--primario) !important;
}

.page-link {
    color: var(--enlace);
}

.page-item.active .page-link {
    background-color: var(--primario);
    border-color: var(--primario);
}

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--primario);
    border-color: var(--primario);
}

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: var(--foco);
}

.nav-tabs .nav-link {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    color: var(--text-muted);
    font-weight: 600;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--text-color);
    background-color: var(--bg-componentes);
    border-color: var(--border-color) var(--border-color) var(--bg-componentes);
    box-shadow: inset 0 3px 0 var(--beeris-gold);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--primario);
}

.progress-bar {
    background-color: var(--primario);
}

/* =====================================================================
   CAMPOS: UN SOLO ASPECTO PARA TODOS
   ---------------------------------------------------------------------
   Había cinco: el .form-control de Bootstrap, el .custom-select, el
   .form-select (clase de Bootstrap 5 que aquí no tenía hoja y salía con
   el aspecto del navegador), la píldora de los filtros y Select2. En una
   misma barra se veían tres desplegables distintos.

   Ahora todos comparten borde, esquina, flecha y foco. Los tamaños no se
   tocan: cada pantalla ya eligió el suyo y de él depende que quepa.
   ===================================================================== */
.form-control,
.custom-select,
.form-select,
.custom-filter-select,
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: var(--bg-componentes);
    color: var(--text-color);
    border: 1px solid var(--campo-borde);
    border-radius: 8px;
    box-shadow: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.form-control-sm,
.custom-select-sm,
.form-select-sm,
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input,
.select2-container--default.bee-sm .select2-selection--single {
    border-radius: 6px;
}

.form-control-lg,
.custom-select-lg {
    border-radius: 10px;
}

/* El .form-select no tenía medidas: se le dan las del .form-control. El de
   los filtros trae las suyas (beeris-theme.css) y se le respetan. */
.form-select:not(.custom-filter-select) {
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    max-width: 100%;
}

.form-select.form-select-sm,
.form-select.form-control-sm {
    height: calc(1.5em + 0.5rem + 2px);
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    height: calc(1.5em + 0.5rem + 2px);
    padding: 0.25rem 0.6rem;
}

/* ---------- La flecha, la misma en todos los desplegables ---------- */
select.form-control:not([multiple]):not([size]),
select.custom-select:not([multiple]):not([size]),
select.form-select:not([multiple]):not([size]),
select.custom-filter-select,
.dataTables_wrapper .dataTables_length select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: var(--flecha);
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    background-size: 11px 8px;
    padding-right: 1.9rem;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    width: 1.9rem;
    background-image: var(--flecha);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 11px 8px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    display: none;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-right: 1.4rem;
}

/* ---------- El foco, en miel, igual en todos ---------- */
.form-control:focus,
.custom-select:focus,
.form-select:focus,
.custom-filter-select:hover,
.custom-filter-select:focus,
.dataTables_wrapper .dataTables_length select:focus,
.dataTables_wrapper .dataTables_filter input:focus,
.modal-content .form-control:focus,
.modal-content .form-select:focus,
.card-body .form-control:focus,
.card-body .form-select:focus,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--beeris-gold) !important;
    box-shadow: var(--foco) !important;
    outline: none;
}

.custom-filter-select:hover:not(:focus) {
    box-shadow: none !important;
}

/* ---------- Estados ---------- */
.form-control:disabled,
.form-control[readonly],
.custom-select:disabled,
.form-select:disabled {
    background-color: var(--bg-principal) !important;
    color: var(--text-muted) !important;
    opacity: 1;
}

.form-control::placeholder {
    color: var(--text-muted);
    opacity: 0.75;
}

.form-control.is-invalid,
.custom-select.is-invalid,
.was-validated .form-control:invalid {
    border-color: #dc3545 !important;
}

.form-control.is-valid,
.custom-select.is-valid {
    border-color: #28a745 !important;
}

/* ---------- Pegados a un botón o a un prefijo ---------- */
.input-group-text {
    border-radius: 8px;
    border-color: var(--campo-borde) !important;
}

.input-group-sm > .form-control,
.input-group-sm > .custom-select,
.input-group-sm > .input-group-prepend > .input-group-text,
.input-group-sm > .input-group-append > .input-group-text {
    border-radius: 6px;
}

.input-group > .form-control:not(:last-child),
.input-group > .custom-select:not(:last-child),
.input-group > .form-select:not(:last-child),
.input-group > .input-group-prepend > .input-group-text {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group > .form-control:not(:first-child),
.input-group > .custom-select:not(:first-child),
.input-group > .form-select:not(:first-child),
.input-group > .input-group-append > .input-group-text {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* ---------- La lista de Select2 ---------- */
.select2-container--default .select2-dropdown {
    border-color: var(--campo-borde);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(4, 16, 33, 0.16);
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
    background-color: var(--primario);
}

/* La píldora de los filtros conserva el hueco de su icono. */
.filter-wrapper .select2-container--default .select2-selection--single {
    border-radius: 8px;
    box-shadow: none;
}

/* =====================================================================
   TABLAS
   ===================================================================== */
.table thead.table-dark th,
.table .thead-dark th {
    background-color: var(--beeris-navy) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .table thead.table-dark th,
[data-theme="dark"] .table .thead-dark th {
    background-color: #0D1A2D !important;
}

.table thead.table-dark th:first-child,
.table .thead-dark th:first-child {
    border-top-left-radius: 8px;
}

.table thead.table-dark th:last-child,
.table .thead-dark th:last-child {
    border-top-right-radius: 8px;
}

.table-hover tbody tr:hover {
    background-color: var(--acento-suave) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--acento-suave) !important;
    border-color: var(--acento) !important;
    color: var(--acento) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--primario) !important;
    border-color: var(--primario) !important;
    color: #fff !important;
}

/* La cabecera en dos niveles (estadística consolidada): los grupos van
   separados por un filete para que se lea qué dos columnas abarca cada uno. */
.table thead.table-dark th.bee-th-grupo {
    border-left: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 0;
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
}

.table thead.table-dark th.bee-th-vacio {
    border-left: 0 !important;
    border-bottom: 0 !important;
}

/* Con dos filas de cabecera, la esquina redondeada es sólo de la primera. */
.table thead.table-dark tr + tr th:first-child,
.table thead.table-dark tr + tr th:last-child {
    border-radius: 0;
}

.table tfoot.bee-pie-total td {
    font-weight: 700;
    border-top: 2px solid var(--acento);
    background-color: var(--acento-suave);
    color: var(--text-color);
    font-variant-numeric: tabular-nums;
}

[data-theme="dark"] .page-link {
    background-color: var(--bg-componentes);
    border-color: var(--border-color);
    color: var(--enlace);
}

/* =====================================================================
   PORTADA: LOS ACCESOS, EN CELDAS DE PANAL
   ---------------------------------------------------------------------
   El icono de cada acceso va dentro de un hexágono, que es la forma del
   logo. Es el único adorno de la portada.
   ===================================================================== */
.bee-celda {
    width: 60px;
    height: 66px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--acento-suave);
    color: var(--acento);
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    font-size: 1.45rem;
    transition: background-color 0.2s, color 0.2s;
}

.bee-celda.bee-celda-sm {
    width: 38px;
    height: 42px;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.bee-acceso {
    height: 100%;
    border: 1px solid var(--border-color) !important;
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

a:hover > .bee-acceso,
a:focus-visible > .bee-acceso {
    border-color: var(--beeris-gold) !important;
    transform: translateY(-2px);
}

a:hover > .bee-acceso .bee-celda,
a:focus-visible > .bee-acceso .bee-celda {
    background: var(--beeris-gold);
    color: #0B2A4E;
}

/* El clima, a la derecha del saludo. */
.bee-clima {
    align-items: center;
    gap: 14px;
    text-align: left;
    white-space: nowrap;
}

.bee-clima[hidden] {
    display: none !important;
}

.bee-clima-icono {
    font-size: 2rem;
    color: var(--beeris-gold);
}

.bee-clima-ahora {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-color);
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.bee-clima-detalle {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.bee-saludo {
    border: 1px solid var(--border-color) !important;
    box-shadow: inset 4px 0 0 var(--beeris-gold), var(--sombra) !important;
}

/* =====================================================================
   SWEETALERT2: AVISOS, CONFIRMACIONES Y VENTANAS DE CAPTURA
   ---------------------------------------------------------------------
   La librería trae su morado y su gris. Aquí se viste con lo mismo que
   el resto: la tarjeta de las ventanas, los botones y los campos del
   sistema, y el tema claro u oscuro que esté puesto.

   Se hace con las variables que la propia librería ofrece (--swal2-*),
   no pisando sus reglas una a una: así una actualización no lo deshace.

   LO QUE NO SE TOCA: el color que cada pantalla le pasa al botón de
   confirmar (rojo para anular, naranja para lo que no se deshace, verde
   para cerrar bien). Va escrito en línea por la librería y dice qué
   clase de decisión es. Sólo el azul genérico de la librería (#3085d6)
   y el de Bootstrap se llevan al azul de la casa.
   ===================================================================== */
.swal2-container.swal2-container {
    --swal2-background: var(--bg-componentes);
    --swal2-color: var(--text-color);
    --swal2-border: 1px solid var(--border-color);
    --swal2-border-radius: 14px;
    --swal2-backdrop: rgba(6, 22, 43, 0.55);
    --swal2-padding: 0 0 1.5em;

    --swal2-confirm-button-background-color: var(--primario);
    --swal2-confirm-button-border-radius: 8px;
    --swal2-cancel-button-background-color: #6C7A8C;
    --swal2-cancel-button-border-radius: 8px;
    --swal2-deny-button-background-color: #dc3545;
    --swal2-deny-button-border-radius: 8px;
    --swal2-outline: 0 0 0 3px rgba(247, 168, 27, 0.35);

    --swal2-input-background: var(--bg-componentes);
    --swal2-input-border: 1px solid var(--campo-borde);
    --swal2-input-border-radius: 8px;
    --swal2-input-box-shadow: none;
    --swal2-input-hover-box-shadow: none;
    --swal2-input-focus-border: 1px solid var(--beeris-gold);
    --swal2-input-focus-box-shadow: 0 0 0 3px rgba(247, 168, 27, 0.30);

    --swal2-close-button-color: var(--text-muted);
    --swal2-footer-border-color: var(--border-color);
    --swal2-validation-message-background: var(--bg-principal);
    --swal2-validation-message-color: var(--text-color);
    --swal2-timer-progress-bar-background: var(--beeris-gold);
    --swal2-progress-step-background: var(--border-color);
}

.swal2-popup {
    font-family: inherit;
    box-shadow: 0 24px 60px rgba(4, 16, 33, 0.28);
}

.swal2-title {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.swal2-html-container {
    font-size: 0.98rem;
    line-height: 1.5;
}

.swal2-styled {
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.6em 1.3em;
}

/* El azul genérico, al azul de la casa. La librería deja el color que le
   pasan en el atributo style del botón —tal cual se escribió, o ya
   convertido a rgb() según la versión—, y por ahí se le reconoce. */
.swal2-styled[style*="#3085d6" i],
.swal2-styled[style*="#007bff" i],
.swal2-styled[style*="#0d6efd" i],
.swal2-styled[style*="rgb(48, 133, 214)"],
.swal2-styled[style*="rgb(0, 123, 255)"],
.swal2-styled[style*="rgb(13, 110, 253)"] {
    background-color: var(--primario) !important;
}

.swal2-cancel[style*="#3085d6" i],
.swal2-cancel[style*="rgb(48, 133, 214)"] {
    background-color: #6C7A8C !important;
}

/* El amarillo de aviso es claro: con letra blanca no se leía. */
.swal2-styled[style*="#ffc107" i],
.swal2-styled[style*="#e0a800" i],
.swal2-styled[style*="#f39c12" i],
.swal2-styled[style*="rgb(255, 193, 7)"],
.swal2-styled[style*="rgb(224, 168, 0)"],
.swal2-styled[style*="rgb(243, 156, 18)"] {
    background-color: var(--beeris-gold) !important;
    color: #0B2A4E !important;
}

/* Los iconos: aviso en miel y pregunta/información en el azul de la casa.
   El verde del «hecho» y el rojo del error se quedan como están. */
.swal2-icon.swal2-warning {
    border-color: var(--beeris-gold);
    color: var(--beeris-gold);
}

.swal2-icon.swal2-info,
.swal2-icon.swal2-question {
    border-color: var(--enlace);
    color: var(--enlace);
}

.swal2-input,
.swal2-select,
.swal2-textarea {
    color: var(--text-color);
    font-size: 1rem;
}

.swal2-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: var(--flecha);
    background-repeat: no-repeat;
    background-position: right 0.8rem center;
    background-size: 11px 8px;
    padding-right: 2rem;
    border: var(--swal2-input-border);
    border-radius: 8px;
}

/* El desplegable propio de la librería pasa por Select2 como cualquier otro
   del sistema, y Select2 no hereda los márgenes del <select> que sustituye. */
.swal2-popup > .select2-container {
    margin: 1em 2em 3px;
    width: calc(100% - 4em) !important;
    text-align: left;
}

.swal2-popup.swal2-toast {
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(4, 16, 33, 0.18);
}

.swal2-progress-steps .swal2-progress-step,
.swal2-progress-steps .swal2-progress-step-line {
    background: var(--primario);
}

/* =====================================================================
   EL BOTÓN QUE ESPERA
   ---------------------------------------------------------------------
   Las tres celdas de miel del botón «Ingresar», para cualquier botón que
   esté esperando al servidor. La clase la pone assets/js/espera_botones.js.

   El botón NO CAMBIA DE TAMAÑO NI DE CONTENIDO: su texto se vuelve
   transparente y las celdas se dibujan encima con dos seudoelementos —las
   tres apagadas debajo, y una encendida que va pasando de una a otra—.
   Así no baila la fila de botones y lo que la pantalla escriba dentro
   mientras tanto («Guardando…») sigue ahí al terminar.

   Las celdas toman el color del texto del botón, salvo en los botones
   azules, donde van en el dorado del logo, como en el login.
   ===================================================================== */
.bee-esperando {
    position: relative;
    -webkit-text-fill-color: transparent;
    pointer-events: none;
    cursor: progress;
}

.bee-esperando > * {
    visibility: hidden;
}

.bee-esperando::before,
.bee-esperando::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: min(49px, calc(100% - 10px));
    height: min(15px, calc(100% - 6px));
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 49 15'%3E%3Cpath d='M6.5 0 13 3.75v7.5L6.5 15 0 11.25v-7.5zM24.5 0 31 3.75v7.5L24.5 15 18 11.25v-7.5zM42.5 0 49 3.75v7.5L42.5 15 36 11.25v-7.5z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 49 15'%3E%3Cpath d='M6.5 0 13 3.75v7.5L6.5 15 0 11.25v-7.5zM24.5 0 31 3.75v7.5L24.5 15 18 11.25v-7.5zM42.5 0 49 3.75v7.5L42.5 15 36 11.25v-7.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.bee-esperando::before {
    background-color: var(--bee-espera-color, currentColor);
    opacity: 0.35;
}

.bee-esperando::after {
    background-image: linear-gradient(var(--bee-espera-color, currentColor), var(--bee-espera-color, currentColor));
    background-repeat: no-repeat;
    background-size: 33.4% 100%;
    animation: bee-espera 1.05s ease-in-out infinite;
}

.btn-primary.bee-esperando,
.btn-primary-custom.bee-esperando,
.btn-dark.bee-esperando,
.btn-secondary.bee-esperando {
    --bee-espera-color: var(--beeris-gold);
}

/* Un botón deshabilitado se aclara; mientras espera tiene que verse entero. */
.btn.bee-esperando:disabled,
.btn.bee-esperando.disabled {
    opacity: 1;
}

@keyframes bee-espera {
    0%     { background-position: 0 0;    opacity: 0.15; }
    14%    { background-position: 0 0;    opacity: 1; }
    33.2%  { background-position: 0 0;    opacity: 0.15; }
    33.4%  { background-position: 50% 0;  opacity: 0.15; }
    47%    { background-position: 50% 0;  opacity: 1; }
    66.5%  { background-position: 50% 0;  opacity: 0.15; }
    66.7%  { background-position: 100% 0; opacity: 0.15; }
    80%    { background-position: 100% 0; opacity: 1; }
    100%   { background-position: 100% 0; opacity: 0.15; }
}

@media (prefers-reduced-motion: reduce) {
    .bee-esperando::after { animation: none; background-size: 100% 100%; opacity: 0.6; }
}

/* =====================================================================
   LAS CELDAS, EN TODO LO QUE ESPERA
   ---------------------------------------------------------------------
   Los indicadores de carga que el sistema ya tenía —el icono giratorio de
   FontAwesome, el «spinner» de Bootstrap, el de SweetAlert— pasan a ser
   las mismas tres celdas, sin tocar el marcado de ninguna pantalla. Y las
   tablas, mientras traen datos (assets/js/espera_tablas.js).

   Un solo elemento: las tres celdas apagadas de fondo y una encendida que
   salta de una a otra, recortadas por la máscara de los hexágonos.
   ===================================================================== */
.fa-spin.fa-spinner,
.fa-spin.fa-circle-notch,
.spinner-border,
.swal2-popup .swal2-loader,
td.bee-cargando::before,
.bee-tabla-cargando::after,
div.dataTables_processing::before {
    display: inline-block;
    width: 3.27em;
    height: 1em;
    vertical-align: -0.14em;
    border: 0 !important;
    border-radius: 0 !important;
    background-color: transparent;
    background-image:
        linear-gradient(currentColor, currentColor),
        linear-gradient(rgba(127, 127, 127, 0.38), rgba(127, 127, 127, 0.38));
    background-repeat: no-repeat;
    background-size: 33.4% 100%, 100% 100%;
    background-position: 0 0, 0 0;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 49 15'%3E%3Cpath d='M6.5 0 13 3.75v7.5L6.5 15 0 11.25v-7.5zM24.5 0 31 3.75v7.5L24.5 15 18 11.25v-7.5zM42.5 0 49 3.75v7.5L42.5 15 36 11.25v-7.5z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 49 15'%3E%3Cpath d='M6.5 0 13 3.75v7.5L6.5 15 0 11.25v-7.5zM24.5 0 31 3.75v7.5L24.5 15 18 11.25v-7.5zM42.5 0 49 3.75v7.5L42.5 15 36 11.25v-7.5z'/%3E%3C/svg%3E") center / contain no-repeat;
    animation: bee-celdas-paso 0.9s steps(1, end) infinite !important;
}

.fa-spin.fa-spinner::before,
.fa-spin.fa-circle-notch::before {
    content: none;
}

.spinner-border { font-size: 1.5rem; }
.spinner-border.spinner-border-sm { font-size: 1rem; }
.swal2-popup .swal2-loader { font-size: 1.6rem; color: var(--acento, var(--beeris-gold)); }

@keyframes bee-celdas-paso {
    0%    { background-position: 0 0, 0 0; }
    33.4% { background-position: 50% 0, 0 0; }
    66.7% { background-position: 100% 0, 0 0; }
}

/* La fila única «Cargando…» de una tabla: las celdas, encima del texto. */
td.bee-cargando {
    text-align: center !important;
    padding-top: 1.6rem !important;
    padding-bottom: 1.6rem !important;
}

td.bee-cargando::before {
    content: '';
    display: block;
    margin: 0 auto 0.55rem;
    font-size: 1.25rem;
    color: var(--acento, var(--beeris-gold));
}

/* Si la fila ya traía su indicador, no se dibujan dos. */
td.bee-cargando .fa-spin,
td.bee-cargando .spinner-border {
    display: none;
}

/* La tabla que se está recargando con sus datos anteriores a la vista. */
.bee-tabla-cargando {
    position: relative;
    min-height: 11rem;
}

.bee-tabla-cargando > table,
.bee-tabla-cargando .dataTables_scroll,
.bee-tabla-cargando > .row > div > table {
    transition: opacity 0.15s;
    pointer-events: none;
}

/* Se apagan las filas, no la cabecera: las columnas siguen leyéndose. */
.bee-tabla-cargando tbody {
    opacity: 0.35;
}

.bee-tabla-cargando::after {
    content: '';
    position: absolute;
    /* Bajo la cabecera, y nunca tan abajo que quede fuera de la pantalla
       en una tabla larga. */
    top: clamp(7.5rem, 45%, 15rem);
    left: 50%;
    margin-left: -1.64em;
    z-index: 5;
    font-size: 1.5rem;
    color: var(--acento, var(--beeris-gold));
}

/* Si la propia tabla ya escribió su fila «Cargando…», esa fila lleva las
   celdas: no se dibujan otras encima ni se apaga. */
.bee-tabla-cargando:has(td.bee-cargando)::after { display: none; }
.bee-tabla-cargando:has(td.bee-cargando) tbody { opacity: 1; }

/* DataTables ya trae su «procesando»: con las celdas de arriba, sobra. */
.bee-tabla-cargando div.dataTables_processing { display: none !important; }

div.dataTables_processing > div { display: none !important; }

div.dataTables_processing::before {
    content: '';
    display: block;
    margin: 0 auto 0.4rem;
    font-size: 1.25rem;
    color: var(--acento, var(--beeris-gold));
}

@media (prefers-reduced-motion: reduce) {
    .fa-spin.fa-spinner,
    .fa-spin.fa-circle-notch,
    .spinner-border,
    .swal2-popup .swal2-loader,
    td.bee-cargando::before,
    .bee-tabla-cargando::after,
    div.dataTables_processing::before {
        animation: none !important;
        background-size: 100% 100%, 100% 100%;
    }
}

/* =====================================================================
   AVISO DE CARGA ENTRE PANTALLAS
   ---------------------------------------------------------------------
   Lo enciende el script de header.php al pulsar una entrada del menú.
   La barra avanza rápido al principio y cada vez más despacio, sin
   llegar al final: no sabe cuánto falta, sólo dice «entró el clic».

   Y al LLEGAR, la misma barra termina su recorrido y se desvanece, de
   modo que se lee como una sola carga a través de las dos páginas.
   ===================================================================== */
#bee-carga {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2000;
    height: 3px;
    width: 100%;
    background: var(--beeris-gold);
    box-shadow: 0 0 10px rgba(247, 168, 27, 0.6);
    transform-origin: left center;
    pointer-events: none;
    animation: bee-carga-llegar 0.5s ease-out both;
}

@keyframes bee-carga-llegar {
    0%   { transform: scaleX(0.82); opacity: 1; }
    70%  { transform: scaleX(1);    opacity: 1; }
    100% { transform: scaleX(1);    opacity: 0; }
}

body.bee-saliendo #bee-carga {
    animation: bee-carga-salir 9s cubic-bezier(0.05, 0.75, 0.1, 1) forwards;
}

@keyframes bee-carga-salir {
    0%   { transform: scaleX(0);    opacity: 1; }
    100% { transform: scaleX(0.82); opacity: 1; }
}

body.bee-saliendo #content {
    opacity: 0.55;
    pointer-events: none;
}

body.bee-saliendo {
    cursor: progress;
}

@media (prefers-reduced-motion: reduce) {
    .bee-acceso,
    .bee-celda {
        transition: none;
    }

    a:hover > .bee-acceso,
    a:focus-visible > .bee-acceso {
        transform: none;
    }

    /* Sin recorrido: la barra aparece entera mientras se sale y no se
       muestra al llegar. */
    #bee-carga {
        animation: none;
        opacity: 0;
    }

    body.bee-saliendo #bee-carga {
        animation: none;
        opacity: 1;
        transform: none;
    }

}