/* =========================
   🖼️ Logo según el tema
   Se renderizan las dos versiones y el CSS muestra una sola.
   El tema lo aplica temas.js en el navegador, así que no puede
   resolverse en el servidor; hacerlo por CSS además cambia el
   logo al instante cuando el usuario cambia de tema.
========================= */
.logo-tema {
    display: none;
}

/* Temas claros: Claro, Océano y Selva */
.logo-tema--claro {
    display: inline-block;
}

/* Temas oscuros: Oscuro y Noche */
[data-bs-theme="dark"] .logo-tema--claro,
[data-bs-theme="noche"] .logo-tema--claro,
[data-bs-theme="oceano"] .logo-tema--claro,
[data-bs-theme="selva"] .logo-tema--claro {
    display: none;
}

[data-bs-theme="dark"] .logo-tema--oscuro,
[data-bs-theme="noche"] .logo-tema--oscuro,
[data-bs-theme="oceano"] .logo-tema--oscuro,
[data-bs-theme="selva"] .logo-tema--oscuro {
    display: inline-block;
}

/* Automático: sigue la preferencia del sistema operativo */
@media (prefers-color-scheme: dark) {
    [data-bs-theme="auto"] .logo-tema--claro {
        display: none;
    }

    [data-bs-theme="auto"] .logo-tema--oscuro {
        display: inline-block;
    }
}

/* Tamaños por ubicación */
.sidebar-brand .logo-tema {
    max-height: 38px;
    width: auto;
}

.login-logo {
    width: 100%;
    max-width: 270px;
    height: auto;
}

.logo-pie {
    height: 26px;
    width: auto;
    opacity: .9;
}

/* =========================
   🔤 Tipografía del sistema
   Hanken Grotesk. La variable de Bootstrap cubre casi todo;
   los controles de formulario se listan aparte porque el
   navegador les impone la fuente del sistema si nadie se lo dice.
========================= */
:root,
[data-bs-theme] {
    --bs-body-font-family: "Hanken Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
}

body,
button,
input,
select,
textarea,
optgroup,
.btn,
.form-control,
.form-select,
.dropdown-menu,
.modal,
.table,
.dataTables_wrapper,
.swal2-popup,
.app-sidebar,
.app-header {
    font-family: var(--bs-body-font-family);
}

/* Los dígitos alineados evitan que las columnas numéricas
   bailen al ordenar o paginar una grilla. */
.table,
.campo-numerico,
.codigo-verificacion {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* =========================
   🔘 Botones estilo píldora
========================= */
.btn {
    border-radius: 50rem !important;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.btn-sm {
    padding-left: 1rem;
    padding-right: 1rem;
}

.btn-group > .btn,
.input-group > .btn {
    border-radius: 50rem !important;
}

/* =========================
   🪟 Modales redondeados (Bootstrap)
========================= */
.modal-content {
    border-radius: 1.25rem;
    overflow: hidden;
    border: none;
}

.modal-header {
    border-bottom: none;
    padding: 1.5rem 1.5rem 0.5rem;
}

.modal-footer {
    border-top: none;
    padding: 0.5rem 1.5rem 1.5rem;
}

.modal-body {
    padding: 1rem 1.5rem;
}

/* =========================
   📦 Cards redondeadas por default
========================= */
.card {
    border-radius: 1rem;
}

/* El redondeo de los input-group se resuelve más abajo,
   en la sección "Grupos de campos". */

/* =========================
   🪟 Glassmorphism - Login
========================= */
.login-page .login-box .card {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.login-page .login-box .card-body {
    color: inherit;
}

.login-page .login-box-msg {
    color: rgba(255, 255, 255, 0.85) !important;
}

.login-page .login-logo {
    color: #fff !important;
}

/* Los campos del login siguen el tema activo, igual que el resto */
.login-page .form-control,
.login-page .input-group-text {
    border: none !important;
}

[data-bs-theme="light"] .login-page .form-control,
[data-bs-theme="light"] .login-page .input-group-text {
    background: rgba(255, 255, 255, .85) !important;
}

[data-bs-theme="dark"] .login-page .form-control,
[data-bs-theme="dark"] .login-page .input-group-text,
[data-bs-theme="oceano"] .login-page .form-control,
[data-bs-theme="oceano"] .login-page .input-group-text,
[data-bs-theme="selva"] .login-page .form-control,
[data-bs-theme="selva"] .login-page .input-group-text {
    background: rgba(255, 255, 255, .12) !important;
    color: inherit;
}

/* =========================
   🍬 SweetAlert2 — glassmorphism + píldora + tema claro/oscuro
========================= */
.swal2-popup {
    border-radius: 1.5rem !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25) !important;
}

[data-bs-theme="light"] .swal2-popup {
    background: rgba(255, 255, 255, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #212529 !important;
}

[data-bs-theme="dark"] .swal2-popup {
    background: rgba(30, 30, 45, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff !important;
}

.swal2-actions {
    gap: 1rem !important;
}

.swal2-popup .swal-button-glow {
    border-radius: 50rem !important;
    padding: 0.6rem 1.75rem !important;
    border: none !important;
    font-weight: 600;
    transition: filter 0.15s ease-in-out, transform 0.1s ease-in-out, box-shadow 0.15s ease-in-out;
}

    .swal2-popup .swal-button-glow:hover,
    .swal2-popup .swal-button-glow:focus,
    .btn.swal-button-glow:hover,
    .btn.swal-button-glow:focus {
        filter: brightness(1.1);
        transform: translateY(-1px);
        box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb !important;
    }

.swal2-popup .swal-confirm-torch {
    background: #0d6efd !important;
    color: #fff !important;
}

.swal2-popup .swal-cancel-torch {
    background: #6c757d !important;
    color: #fff !important;
}

.btn-accion {
    white-space: nowrap;
}

td:has(.btn-accion) {
    white-space: nowrap;
}

/* ====================================================
   🔎 Buscador estilo YouTube
==================================================== */

/* Chrome/Safari dibujan su propia "x" en los input type="search".
   La ocultamos porque ya tenemos el botón #clearBuscador. */
.buscador-yt-input::-webkit-search-cancel-button,
.buscador-yt-input::-webkit-search-decoration,
.buscador-yt-input::-webkit-search-results-button,
.buscador-yt-input::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
}

/* Edge/IE hacen lo mismo con su propia pseudo-clase */
.buscador-yt-input::-ms-clear {
    display: none;
    width: 0;
    height: 0;
}

/* Área de click cómoda sin que los íconos se toquen */
.buscador-youtube .btn.position-absolute {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

    .buscador-youtube .btn.position-absolute:hover i {
        color: var(--bs-primary) !important;
    }

/* ====================================================
   🔎 Sugerencias flotantes
   Para los buscadores que no usan el formulario genérico:
   CIE-10 en la consulta y paciente en la agenda.
==================================================== */

.sugerencias-flotantes {
    position: absolute;
    top: calc(100% + 6px);
    /* Anclada a la derecha: la lista es más ancha que el campo y
       alinearla a la izquierda la haría salir fuera del modal. */
    right: 0;
    left: auto;
    display: none;
    z-index: 2000;
    width: 360px;
    max-width: min(90vw, 460px);
    max-height: 260px;
    overflow-y: auto;
    font-size: .85rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    overflow-x: hidden;
    background-color: var(--bs-body-bg);
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .16);
}

    .sugerencias-flotantes .list-group-item {
        border-left: none;
        border-right: none;
        border-radius: 0;
        padding: .5rem .85rem;
        background-color: transparent;
        transition: background-color .12s;
    }

        .sugerencias-flotantes .list-group-item:first-child {
            border-top: none;
        }

        .sugerencias-flotantes .list-group-item:last-child {
            border-bottom: none;
        }

        .sugerencias-flotantes .list-group-item:hover,
        .sugerencias-flotantes .list-group-item:focus {
            background-color: var(--bs-primary-bg-subtle);
            color: var(--bs-emphasis-color);
        }

        /* El código del CIE-10 se destaca sobre la descripción */
        .sugerencias-flotantes .list-group-item strong {
            color: var(--bs-primary);
        }

    /* Variante que sigue el ancho del campo (buscador de paciente) */
    .sugerencias-flotantes.sugerencias-ancho-campo {
        width: auto;
        left: 0;
        right: 0;
        max-width: none;
    }

/* En pantallas chicas ocupa todo el ancho disponible */
@media (max-width: 576px) {
    .sugerencias-flotantes {
        width: auto;
        left: 0;
        right: 0;
        max-width: none;
    }
}

/* 🎤 Micrófono grabando */
#voiceBuscador.grabando i,
#ev_cie10Voice.grabando i,
#tr_pacienteVoice.grabando i {
    color: #ff0000 !important;
    animation: pulso-mic 1s ease-in-out infinite;
}

@keyframes pulso-mic {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.35;
    }
}

#isActiveContainer {
    display: none !important;
}

/* ====================================================
   🖼️ Fondo del área de contenido

   El fondo NO va en el body: ahí se centra respecto de la
   ventana completa y el sidebar lo desplaza al expandirse.
   Aplicado al contenedor del contenido, se centra en el
   espacio realmente visible.
==================================================== */

.app-main {
    /* El velo va como una capa del propio background, no como un ::before.
       Un pseudo-elemento superpuesto obliga a subir el z-index del contenido,
       y eso deja los modales atrapados detrás del backdrop de Bootstrap. */
    background-image: linear-gradient(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.35)), url('/img/fondo.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: scroll;
}

    /* Tarjetas y modales opacos: sobre la imagen el texto no se lee.
   Se excluye el login, que usa vidrio esmerilado a propósito. */
    .app-main .card,
    .modal-content {
        background-color: rgba(255, 255, 255, 0.97);
    }

[data-bs-theme="dark"] .app-main {
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('/img/fondo.jpg');
}

    [data-bs-theme="dark"] .app-main .card,
    [data-bs-theme="dark"] .modal-content {
        background-color: rgba(33, 37, 41, 0.97);
    }

/* ====================================================
   📅 Agenda del día
==================================================== */

.agenda-scroll {
    max-height: calc(100vh - 260px);
    overflow: auto;
}

.agenda-grid {
    display: grid;
    grid-template-columns: 60px 1fr;
    grid-template-rows: auto 1fr;
    min-width: 100%;
}

/* Encabezados fijos al hacer scroll vertical */
.agenda-esquina,
.agenda-encabezados {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--bs-body-bg);
    border-bottom: 2px solid var(--bs-border-color);
}

.agenda-encabezados {
    display: grid;
    grid-template-columns: repeat(var(--columnas), minmax(180px, 1fr));
}

.agenda-encabezado {
    padding: 8px 10px;
    border-left: 1px solid var(--bs-border-color);
    overflow: hidden;
}

/* Regla horaria fija al hacer scroll horizontal */
.agenda-reglas {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--bs-body-bg);
    border-right: 1px solid var(--bs-border-color);
}

.agenda-hora {
    position: absolute;
    right: 6px;
    transform: translateY(-50%);
    font-size: 11px;
    color: var(--bs-secondary-color);
    white-space: nowrap;
}

.agenda-cuerpo {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--columnas), minmax(180px, 1fr));
}

.agenda-columna {
    position: relative;
    border-left: 1px solid var(--bs-border-color);
    cursor: crosshair;
}

/* Líneas de hora y media hora, dibujadas sobre toda la fila */
.agenda-linea {
    position: absolute;
    left: 60px;
    right: 0;
    border-top: 1px solid var(--bs-border-color);
    pointer-events: none;
}

.agenda-linea-media {
    border-top-style: dotted;
    opacity: .6;
}

/* Los turnos se posicionan por hora de inicio y duración */
.agenda-turno {
    position: absolute;
    left: 3px;
    right: 3px;
    border-radius: 4px;
    padding: 2px 6px;
    color: #fff;
    font-size: 11.5px;
    line-height: 1.25;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    transition: filter .12s;
}

    .agenda-turno:hover {
        filter: brightness(1.12);
        z-index: 2;
    }

.agenda-turno-hora {
    font-weight: 700;
}

.agenda-turno-paciente {
    font-weight: 600;
}

.agenda-turno-motivo {
    opacity: .85;
    font-size: 10.5px;
}

/* El estado "warning" tiene fondo claro: el texto blanco no se lee */
.agenda-turno.bg-warning {
    color: #000;
}

/* Día pasado: solo lectura, no se agenda */
.agenda-grid.agenda-pasada .agenda-columna {
    cursor: not-allowed;
    background: repeating-linear-gradient( 45deg, transparent, transparent 10px, rgba(108, 117, 125, .06) 10px, rgba(108, 117, 125, .06) 20px );
}

/* Franja del día que ya transcurrió: no se puede agendar ahí */
.agenda-transcurrido {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(108, 117, 125, .10);
    pointer-events: none;
    z-index: 1;
}

/* Hora actual */
.agenda-ahora {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 2px solid #dc3545;
    z-index: 4;
    pointer-events: none;
}

    .agenda-ahora::before {
        content: '';
        position: absolute;
        left: -5px;
        top: -6px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #dc3545;
    }

/* ====================================================
   🎨 TEMAS

   Bootstrap solo trae variables para "light" y "dark".
   Para Océano y Selva hay que redefinirlas: sin esto,
   los componentes quedarían sin colores de tema.
==================================================== */

/* ── 🌊 OCÉANO — azules profundos y turquesa ───────── */
[data-bs-theme="oceano"] {
    color-scheme: dark;
    --bs-primary: #22d3ee;
    --bs-primary-rgb: 34, 211, 238;
    --bs-primary-text-emphasis: #67e8f9;
    --bs-primary-bg-subtle: #164e63;
    --bs-primary-border-subtle: #0e7490;
    --bs-secondary: #64748b;
    --bs-secondary-rgb: 100, 116, 139;
    --bs-body-bg: #1b5079;
    --bs-body-bg-rgb: 27, 80, 121;
    --bs-body-color: #dbeafe;
    --bs-body-color-rgb: 219, 234, 254;
    --bs-body-secondary-color: rgba(219, 234, 254, .72);
    --bs-secondary-bg: #24699e;
    --bs-tertiary-bg: #1f5c8a;
    --bs-secondary-bg-rgb: 36, 105, 158;
    --bs-tertiary-bg-rgb: 31, 92, 138;
    --bs-emphasis-color: #ffffff;
    --bs-border-color: #3f86c4;
    --bs-border-color-translucent: rgba(255, 255, 255, .12);
    --bs-link-color: #38bdf8;
    --bs-link-hover-color: #7dd3fc;
    --bs-link-color-rgb: 56, 189, 248;
    --bs-heading-color: #e0f2fe;
    --bs-code-color: #67e8f9;
    --bs-highlight-bg: #164e63;
    --bs-form-control-bg: #1f5c8a;
    --bs-form-control-color: #dbeafe;
    /* Sidebar de AdminLTE */
    --lte-sidebar-bg: #164367;
    --lte-sidebar-color: #cbe4ff;
    --lte-sidebar-hover-bg: #2a7ab8;
}

/* ── 🌿 SELVA — verdes y tierra ────────────────────── */
[data-bs-theme="selva"] {
    color-scheme: dark;
    --bs-primary: #4ade80;
    --bs-primary-rgb: 74, 222, 128;
    --bs-primary-text-emphasis: #86efac;
    --bs-primary-bg-subtle: #14532d;
    --bs-primary-border-subtle: #166534;
    --bs-secondary: #78716c;
    --bs-secondary-rgb: 120, 113, 108;
    --bs-body-bg: #27603f;
    --bs-body-bg-rgb: 39, 96, 63;
    --bs-body-color: #dcfce7;
    --bs-body-color-rgb: 220, 252, 231;
    --bs-body-secondary-color: rgba(220, 252, 231, .72);
    --bs-secondary-bg: #33794f;
    --bs-tertiary-bg: #2c6b46;
    --bs-secondary-bg-rgb: 51, 121, 79;
    --bs-tertiary-bg-rgb: 44, 107, 70;
    --bs-emphasis-color: #ffffff;
    --bs-border-color: #4a9566;
    --bs-border-color-translucent: rgba(255, 255, 255, .12);
    --bs-link-color: #6ee7b7;
    --bs-link-hover-color: #a7f3d0;
    --bs-link-color-rgb: 110, 231, 183;
    --bs-heading-color: #dcfce7;
    --bs-code-color: #86efac;
    --bs-highlight-bg: #14532d;
    --bs-form-control-bg: #2c6b46;
    --bs-form-control-color: #dcfce7;
    --lte-sidebar-bg: #1f5334;
    --lte-sidebar-color: #c9f2d8;
    --lte-sidebar-hover-bg: #368a56;
}


/* Variables del efecto linterna por tema */
[data-bs-theme="light"] {
    --glow-fondo: #1f2430;
    --glow-borde: #39405280;
    --glow-acento: #ffcc00;
    --glow-acento-suave: rgba(255, 204, 0, .2);
}

[data-bs-theme="dark"] {
    --glow-fondo: #11131a;
    --glow-borde: #2d3242;
    --glow-acento: #ffcc00;
    --glow-acento-suave: rgba(255, 204, 0, .2);
}

[data-bs-theme="oceano"] {
    --glow-fondo: #164367;
    --glow-borde: #3f86c4;
    --glow-acento: #22d3ee;
    --glow-acento-suave: rgba(34, 211, 238, .22);
}

[data-bs-theme="selva"] {
    --glow-fondo: #1f5334;
    --glow-borde: #4a9566;
    --glow-acento: #4ade80;
    --glow-acento-suave: rgba(74, 222, 128, .22);
}


/* ── 🌙 NOCHE — el estilo de la pantalla de acceso ──
   Fondo casi negro con acento ámbar, vidrio muy sutil. */
[data-bs-theme="noche"] {
    color-scheme: dark;
    --bs-primary: #ffcc00;
    --bs-primary-rgb: 255, 204, 0;
    --bs-primary-text-emphasis: #ffe066;
    --bs-primary-bg-subtle: #3d3000;
    --bs-primary-border-subtle: #7a6000;
    --bs-secondary: #64748b;
    --bs-secondary-rgb: 100, 116, 139;
    --bs-body-bg: #0b0d13;
    --bs-body-bg-rgb: 11, 13, 19;
    --bs-body-color: #e2e8f0;
    --bs-body-color-rgb: 226, 232, 240;
    --bs-body-secondary-color: #cbd5e1;
    --bs-secondary-bg: #11131a;
    --bs-tertiary-bg: #161923;
    --bs-secondary-bg-rgb: 17, 19, 26;
    --bs-tertiary-bg-rgb: 22, 25, 35;
    --bs-emphasis-color: #ffffff;
    --bs-border-color: #2d3242;
    --bs-border-color-translucent: rgba(255, 255, 255, .08);
    --bs-link-color: #ffcc00;
    --bs-link-hover-color: #ffe066;
    --bs-link-color-rgb: 255, 204, 0;
    --bs-heading-color: #f8fafc;
    --bs-code-color: #ffe066;
    --bs-highlight-bg: #3d3000;
    --bs-form-control-bg: rgba(255, 255, 255, .08);
    --bs-form-control-color: #ffffff;
    --lte-sidebar-bg: #080a0f;
    --lte-sidebar-color: #cbd5e1;
    --lte-sidebar-hover-bg: #1b1f2b;
    --glow-fondo: #11131a;
    --glow-borde: #2d3242;
    --glow-acento: #ffcc00;
    --glow-acento-suave: rgba(255, 204, 0, .2);
}

    [data-bs-theme="noche"] body {
        background-color: var(--bs-body-bg);
        color: var(--bs-body-color);
    }

    [data-bs-theme="noche"] .app-main {
        background-image: linear-gradient(rgba(0, 0, 0, .70), rgba(0, 0, 0, .70)), url('/img/fondo.jpg');
    }

    [data-bs-theme="noche"] .app-sidebar {
        background-color: var(--lte-sidebar-bg) !important;
    }

    [data-bs-theme="noche"] .app-header {
        background-color: var(--bs-secondary-bg) !important;
        border-bottom: 1px solid var(--bs-border-color);
    }

    [data-bs-theme="noche"] .app-main .card,
    [data-bs-theme="noche"] .modal-content,
    [data-bs-theme="noche"] .swal2-popup,
    [data-bs-theme="noche"] .login-page .login-box .card {
        background-color: rgba(17, 19, 26, .82) !important;
        border: 1px solid rgba(255, 255, 255, .08) !important;
        color: #e2e8f0;
        box-shadow: 0 20px 40px rgba(0, 0, 0, .4);
    }

    [data-bs-theme="noche"] .table {
        --bs-table-bg: transparent;
        --bs-table-color: var(--bs-body-color);
        --bs-table-striped-color: var(--bs-body-color);
        --bs-table-striped-bg: rgba(255, 255, 255, .03);
        --bs-table-border-color: var(--bs-border-color);
    }

    [data-bs-theme="noche"] .form-control,
    [data-bs-theme="noche"] .form-select {
        background-color: rgba(255, 255, 255, .08);
        border: 1px solid rgba(255, 255, 255, .15);
        color: #ffffff;
    }

        [data-bs-theme="noche"] .form-control::placeholder {
            color: #94a3b8;
            opacity: 1;
        }

        [data-bs-theme="noche"] .form-control:focus,
        [data-bs-theme="noche"] .form-select:focus {
            background-color: rgba(255, 255, 255, .12);
            border-color: var(--bs-primary);
            box-shadow: 0 0 0 .25rem rgba(255, 204, 0, .2);
        }

    [data-bs-theme="noche"] .modal-content .form-label,
    [data-bs-theme="noche"] .modal-content .modal-title,
    [data-bs-theme="noche"] .swal2-title,
    [data-bs-theme="noche"] .swal2-html-container {
        color: inherit !important;
    }

    [data-bs-theme="noche"] .modal-content .text-secondary,
    [data-bs-theme="noche"] .modal-content .form-text {
        color: #cbd5e1 !important;
    }

    /* Los campos con ícono a los costados necesitan aire */
    [data-bs-theme="noche"] .form-control.ps-5 {
        padding-left: 2.7rem;
    }

    [data-bs-theme="noche"] .form-control.pe-5 {
        padding-right: 2.7rem;
    }

/* ── Ajustes comunes a los temas propios ───────────── */
[data-bs-theme="oceano"] body,
[data-bs-theme="selva"] body {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

[data-bs-theme="oceano"] .app-main {
    background-image: linear-gradient(rgba(27, 80, 121, .72), rgba(27, 80, 121, .72)), url('/img/fondo.jpg');
}

[data-bs-theme="selva"] .app-main {
    background-image: linear-gradient(rgba(39, 96, 63, .72), rgba(39, 96, 63, .72)), url('/img/fondo.jpg');
}

    [data-bs-theme="oceano"] .app-main .card,
    [data-bs-theme="oceano"] .modal-content,
    [data-bs-theme="selva"] .app-main .card,
    [data-bs-theme="selva"] .modal-content {
        background-color: var(--bs-secondary-bg);
        border-color: var(--bs-border-color);
    }

[data-bs-theme="oceano"] .app-sidebar,
[data-bs-theme="selva"] .app-sidebar {
    background-color: var(--lte-sidebar-bg) !important;
}

[data-bs-theme="oceano"] .app-header,
[data-bs-theme="selva"] .app-header {
    background-color: var(--bs-secondary-bg) !important;
    border-bottom: 1px solid var(--bs-border-color);
}

[data-bs-theme="oceano"] .table,
[data-bs-theme="selva"] .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--bs-body-color);
    --bs-table-striped-color: var(--bs-body-color);
    --bs-table-striped-bg: rgba(255, 255, 255, .04);
    --bs-table-border-color: var(--bs-border-color);
}

[data-bs-theme="oceano"] .form-control,
[data-bs-theme="oceano"] .form-select,
[data-bs-theme="selva"] .form-control,
[data-bs-theme="selva"] .form-select {
    background-color: var(--bs-form-control-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-form-control-color);
}

    [data-bs-theme="oceano"] .form-control::placeholder,
    [data-bs-theme="selva"] .form-control::placeholder {
        color: rgba(255, 255, 255, .45);
    }

[data-bs-theme="oceano"] .swal2-popup,
[data-bs-theme="selva"] .swal2-popup,
[data-bs-theme="noche"] .swal2-popup {
    background: var(--bs-secondary-bg) !important;
    border: 1px solid var(--bs-border-color);
    color: var(--bs-body-color) !important;
}


/* ====================================================
   💊 Estilo píldora en formularios

   Los botones ya eran píldora; se extiende a inputs,
   selects y textareas para que el conjunto sea coherente.
==================================================== */

.form-control,
.form-select {
    border-radius: 50rem;
    padding-left: 1rem;
    padding-right: 1rem;
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}

/* Los textarea mantienen esquinas suaves: una píldora
   con varias líneas de texto se ve deformada. */
textarea.form-control {
    border-radius: 1rem;
    padding-left: 1rem;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .2);
}

/* Los input-group ya tienen su propio redondeo definido más arriba */

.form-control-sm,
.form-select-sm {
    border-radius: 50rem;
    padding-left: .85rem;
    padding-right: .85rem;
}

/* Los de fecha y hora traen el ícono del navegador pegado al borde */
input[type="date"].form-control,
input[type="time"].form-control,
input[type="datetime-local"].form-control {
    padding-right: .75rem;
}

/* Interruptores más grandes y suaves */
.form-check-input {
    cursor: pointer;
}

.form-switch .form-check-input {
    width: 2.6em;
    height: 1.4em;
    margin-top: .1em;
}

.form-check-input:focus {
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .2);
}

/* Botones: sombra sutil y leve elevación al pasar el mouse */
.btn {
    transition: transform .12s, box-shadow .15s, filter .15s;
}

    .btn:not(.btn-link):hover {
        transform: translateY(-1px);
        box-shadow: 0 .25rem .6rem rgba(0, 0, 0, .16);
    }

    .btn:not(.btn-link):active {
        transform: translateY(0);
    }

/* Badges y paginación acompañan el redondeo */
.badge {
    border-radius: 50rem;
    padding: .38em .7em;
}

.page-link {
    border-radius: 50rem !important;
    margin: 0 .12rem;
}

.nav-tabs .nav-link {
    border-radius: 50rem 50rem 0 0;
}

.alert {
    border-radius: 1rem;
}

.list-group {
    border-radius: 1rem;
}

/* ====================================================
   🪟 Redondeo global de superficies
==================================================== */

.modal-content,
.swal2-popup,
.swal-rounded-custom {
    border-radius: 1.5rem !important;
    overflow: hidden;
}

/* El scroll interno necesita respetar la curva del contenedor */
.modal-dialog-scrollable .modal-content {
    overflow: hidden;
}

.modal-dialog-scrollable .modal-body {
    border-radius: 0;
}

/* Diálogos de confirmación: mismo aire que los modales */
.swal2-popup {
    padding: 1.5rem;
}

.swal2-title {
    font-size: 1.3rem;
}

.swal2-html-container {
    font-size: .95rem;
}

/* Los inputs de SweetAlert2 acompañan el estilo píldora */
.swal2-input,
.swal2-select {
    border-radius: 50rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

.swal2-textarea {
    border-radius: 1rem !important;
}

/* Dropdowns, popovers y tooltips */
.dropdown-menu {
    border-radius: 1rem;
    padding: .4rem;
}

.dropdown-item {
    border-radius: .65rem;
}

.popover,
.toast {
    border-radius: 1rem;
}

/* Encabezado y pie de las tarjetas dentro del radio de la tarjeta */
.card-header:first-child {
    border-radius: 1rem 1rem 0 0;
}

.card-footer:last-child {
    border-radius: 0 0 1rem 1rem;
}

.table-responsive {
    border-radius: .85rem;
}

/* ====================================================
   🔦 Botones con efecto linterna

   Base oscura con borde sutil; al pasar el cursor
   aparece un brillo radial en su posición, usando las
   variables --x e --y que fija el JS. El color del
   acento lo aporta cada tema.
==================================================== */

.swal-button-glow,
.nav-button-glow,
.btn-glow {
    position: relative;
    overflow: hidden;
    background: var(--glow-fondo, #11131a);
    border: 1px solid var(--glow-borde, #2d3242) !important;
    border-radius: 30px !important;
    padding: 10px 28px !important;
    min-width: 140px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: .95rem;
    font-weight: 500;
    box-shadow: 0 4px 15px rgba(0, 0, 0, .2);
    transition: background .3s ease, transform .1s ease, border-color .15s ease;
}

    /* Los íconos y textos internos no deben interceptar el mousemove:
   romperían el cálculo de la posición del brillo. */
    .swal-button-glow i,
    .swal-button-glow span,
    .nav-button-glow i,
    .nav-button-glow span,
    .btn-glow i,
    .btn-glow span {
        pointer-events: none;
    }

    .swal-button-glow:active,
    .nav-button-glow:active,
    .btn-glow:active {
        transform: scale(.97);
    }

/* ── Confirmar: toma el acento del tema ────────────── */
.swal-confirm-torch,
.nav-confirm-torch,
.btn-glow-confirm {
    color: var(--glow-acento, #ffcc00) !important;
}

    .swal-confirm-torch i,
    .nav-confirm-torch i,
    .btn-glow-confirm i {
        color: var(--glow-acento, #ffcc00);
        font-size: 1.1rem;
    }

    .swal-confirm-torch:hover,
    .nav-confirm-torch:hover,
    .btn-glow-confirm:hover {
        border-color: var(--glow-acento, #ffcc00) !important;
        background: radial-gradient( circle 75px at var(--x, 0px) var(--y, 0px), var(--glow-acento-suave, rgba(255, 204, 0, .2)) 0%, var(--glow-fondo, #11131a) 100% );
    }

/* ── Cancelar: neutro ──────────────────────────────── */
.swal-cancel-torch,
.nav-cancel-torch,
.btn-glow-cancel {
    color: #ffffff !important;
}

    .swal-cancel-torch i,
    .nav-cancel-torch i,
    .btn-glow-cancel i {
        color: #ffffff;
        font-size: 1.1rem;
    }

    .swal-cancel-torch:hover,
    .nav-cancel-torch:hover,
    .btn-glow-cancel:hover {
        border-color: #ffffff !important;
        background: radial-gradient( circle 75px at var(--x, 0px) var(--y, 0px), rgba(255, 255, 255, .15) 0%, var(--glow-fondo, #11131a) 100% );
    }

/* Zona de botones al pie de los diálogos */
.swal2-actions,
.contenedor-botones-modal {
    gap: 16px !important;
    padding: 5px;
    border-radius: 25px;
}

/* ── Diálogos de SweetAlert2 ─────────────────────── */

.swal2-actions {
    gap: .75rem !important;
}

.swal2-popup .swal2-input,
.swal2-popup .swal2-textarea,
.swal2-popup .swal2-select,
.swal2-popup .swal2-file {
    background: var(--bs-form-control-bg, var(--bs-body-bg));
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
    box-shadow: none;
}

    .swal2-popup .swal2-input:focus,
    .swal2-popup .swal2-textarea:focus,
    .swal2-popup .swal2-select:focus {
        border-color: var(--bs-primary);
        box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .2);
    }

.swal2-popup .swal2-input-label,
.swal2-popup .swal2-validation-message {
    color: var(--bs-body-secondary-color);
    background: transparent;
}

/* ====================================================
   🪟 VIDRIO ESMERILADO

   Modales, diálogos y tarjetas de login comparten el
   mismo tratamiento en los cuatro temas: fondo
   semitransparente con desenfoque detrás.
==================================================== */

.modal-content,
.swal2-popup,
.login-page .login-box .card,
.register-page .register-box .card {
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-radius: 1.5rem !important;
}

/* El velo del modal acompaña al vidrio */
.modal-backdrop.show {
    opacity: .55;
    backdrop-filter: blur(2px);
}

/* ── Claro ─────────────────────────────────────────── */
[data-bs-theme="light"] .modal-content,
[data-bs-theme="light"] .swal2-popup,
[data-bs-theme="light"] .login-page .login-box .card {
    background-color: rgba(255, 255, 255, .82) !important;
    border: 1px solid rgba(255, 255, 255, .6) !important;
    color: #212529;
}

/* ── Oscuro ────────────────────────────────────────── */
[data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .swal2-popup,
[data-bs-theme="dark"] .login-page .login-box .card {
    background-color: rgba(30, 30, 45, .78) !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    color: #f8f9fa;
}

/* ── Océano ────────────────────────────────────────── */
[data-bs-theme="oceano"] .modal-content,
[data-bs-theme="oceano"] .swal2-popup,
[data-bs-theme="oceano"] .login-page .login-box .card {
    background-color: rgba(36, 105, 158, .80) !important;
    border: 1px solid rgba(103, 232, 249, .22) !important;
    color: #e0f2fe;
}

/* ── Selva ─────────────────────────────────────────── */
[data-bs-theme="selva"] .modal-content,
[data-bs-theme="selva"] .swal2-popup,
[data-bs-theme="selva"] .login-page .login-box .card {
    background-color: rgba(51, 121, 79, .80) !important;
    border: 1px solid rgba(134, 239, 172, .22) !important;
    color: #dcfce7;
}

/* En los temas oscuros todo el texto del modal va claro:
   etiquetas, títulos, ayudas y listas de definición. */
[data-bs-theme="dark"] .modal-content,
[data-bs-theme="oceano"] .modal-content,
[data-bs-theme="selva"] .modal-content {
    --bs-body-color: currentColor;
}

    [data-bs-theme="dark"] .modal-content .form-label,
    [data-bs-theme="dark"] .modal-content .modal-title,
    [data-bs-theme="dark"] .modal-content dt,
    [data-bs-theme="oceano"] .modal-content .form-label,
    [data-bs-theme="oceano"] .modal-content .modal-title,
    [data-bs-theme="oceano"] .modal-content dt,
    [data-bs-theme="selva"] .modal-content .form-label,
    [data-bs-theme="selva"] .modal-content .modal-title,
    [data-bs-theme="selva"] .modal-content dt {
        color: inherit;
    }

    [data-bs-theme="dark"] .modal-content .text-secondary,
    [data-bs-theme="dark"] .modal-content .form-text,
    [data-bs-theme="oceano"] .modal-content .text-secondary,
    [data-bs-theme="oceano"] .modal-content .form-text,
    [data-bs-theme="selva"] .modal-content .text-secondary,
    [data-bs-theme="selva"] .modal-content .form-text {
        color: rgba(255, 255, 255, .68) !important;
    }

[data-bs-theme="oceano"] .swal2-title,
[data-bs-theme="oceano"] .swal2-html-container,
[data-bs-theme="selva"] .swal2-title,
[data-bs-theme="selva"] .swal2-html-container,
[data-bs-theme="dark"] .swal2-title,
[data-bs-theme="dark"] .swal2-html-container {
    color: inherit !important;
}

/* Campos dentro de un modal vidriado: translúcidos también */
[data-bs-theme="dark"] .modal-content .form-control,
[data-bs-theme="dark"] .modal-content .form-select,
[data-bs-theme="oceano"] .modal-content .form-control,
[data-bs-theme="oceano"] .modal-content .form-select,
[data-bs-theme="selva"] .modal-content .form-control,
[data-bs-theme="selva"] .modal-content .form-select {
    background-color: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .18);
    color: inherit;
}

    [data-bs-theme="dark"] .modal-content .form-control::placeholder,
    [data-bs-theme="oceano"] .modal-content .form-control::placeholder,
    [data-bs-theme="selva"] .modal-content .form-control::placeholder {
        color: rgba(255, 255, 255, .42);
    }


/* ====================================================
   🔧 Grupos de campos

   El redondeo global de .form-control rompía los
   input-group: acá se reconstruye la curva solo en
   los extremos del grupo.
==================================================== */

.input-group > .form-control,
.input-group > .form-select,
.input-group > .input-group-text,
.input-group > .btn {
    border-radius: 0 !important;
}

.input-group > :first-child {
    border-top-left-radius: 50rem !important;
    border-bottom-left-radius: 50rem !important;
    padding-left: 1.1rem;
}

.input-group > :last-child {
    border-top-right-radius: 50rem !important;
    border-bottom-right-radius: 50rem !important;
    padding-right: 1.1rem;
}

/* Un textarea dentro de un grupo no lleva píldora */
.input-group > textarea.form-control {
    border-radius: 1rem !important;
}


/* ====================================================
   📋 Formularios: superficies redondeadas
==================================================== */

fieldset,
.form-section,
.border.rounded,
.border.rounded-3 {
    border-radius: 1rem !important;
}

.form-floating > .form-control,
.form-floating > .form-select {
    border-radius: 50rem;
}

.card,
.accordion-item,
.list-group-item:first-child {
    border-radius: 1rem;
}

.accordion-button {
    border-radius: 1rem !important;
}

/* ====================================================
   🧭 Sidebar y barra superior por tema

   AdminLTE no usa variables propias para estos colores,
   así que hay que apuntarle a sus clases directamente.
==================================================== */

[data-bs-theme="oceano"] .app-sidebar,
[data-bs-theme="selva"] .app-sidebar,
[data-bs-theme="noche"] .app-sidebar,
[data-bs-theme="dark"] .app-sidebar {
    background-color: var(--lte-sidebar-bg, #11131a) !important;
    border-right: 1px solid var(--bs-border-color);
}

    [data-bs-theme="oceano"] .app-sidebar .nav-link,
    [data-bs-theme="oceano"] .app-sidebar .nav-header,
    [data-bs-theme="oceano"] .sidebar-brand,
    [data-bs-theme="oceano"] .brand-text,
    [data-bs-theme="selva"] .app-sidebar .nav-link,
    [data-bs-theme="selva"] .app-sidebar .nav-header,
    [data-bs-theme="selva"] .sidebar-brand,
    [data-bs-theme="selva"] .brand-text,
    [data-bs-theme="noche"] .app-sidebar .nav-link,
    [data-bs-theme="noche"] .app-sidebar .nav-header,
    [data-bs-theme="noche"] .sidebar-brand,
    [data-bs-theme="noche"] .brand-text {
        color: var(--lte-sidebar-color, #cbd5e1) !important;
    }

        [data-bs-theme="oceano"] .app-sidebar .nav-link:hover,
        [data-bs-theme="selva"] .app-sidebar .nav-link:hover,
        [data-bs-theme="noche"] .app-sidebar .nav-link:hover {
            background-color: var(--lte-sidebar-hover-bg, rgba(255, 255, 255, .06)) !important;
            color: #fff !important;
        }

        /* El ítem activo se marca con el acento del tema */
        [data-bs-theme="oceano"] .app-sidebar .nav-link.active,
        [data-bs-theme="selva"] .app-sidebar .nav-link.active,
        [data-bs-theme="noche"] .app-sidebar .nav-link.active {
            background-color: rgba(var(--bs-primary-rgb), .18) !important;
            color: var(--bs-primary) !important;
            box-shadow: inset 3px 0 0 var(--bs-primary);
        }

[data-bs-theme="oceano"] .sidebar-brand,
[data-bs-theme="selva"] .sidebar-brand,
[data-bs-theme="noche"] .sidebar-brand {
    background-color: transparent;
    border-bottom: 1px solid var(--bs-border-color);
}

/* ── Barra superior ────────────────────────────────── */
[data-bs-theme="oceano"] .app-header,
[data-bs-theme="selva"] .app-header,
[data-bs-theme="noche"] .app-header {
    background-color: var(--bs-secondary-bg) !important;
    border-bottom: 1px solid var(--bs-border-color);
}

    [data-bs-theme="oceano"] .app-header .nav-link,
    [data-bs-theme="oceano"] .app-header .navbar-nav .nav-link span,
    [data-bs-theme="selva"] .app-header .nav-link,
    [data-bs-theme="selva"] .app-header .navbar-nav .nav-link span,
    [data-bs-theme="noche"] .app-header .nav-link,
    [data-bs-theme="noche"] .app-header .navbar-nav .nav-link span {
        color: var(--bs-body-color) !important;
    }

        [data-bs-theme="oceano"] .app-header .nav-link:hover,
        [data-bs-theme="selva"] .app-header .nav-link:hover,
        [data-bs-theme="noche"] .app-header .nav-link:hover {
            color: var(--bs-primary) !important;
        }

/* Migas de pan y títulos de página */
[data-bs-theme="oceano"] .breadcrumb-item,
[data-bs-theme="oceano"] .breadcrumb-item a,
[data-bs-theme="selva"] .breadcrumb-item,
[data-bs-theme="selva"] .breadcrumb-item a,
[data-bs-theme="noche"] .breadcrumb-item,
[data-bs-theme="noche"] .breadcrumb-item a {
    color: var(--bs-body-color);
}

[data-bs-theme="oceano"] .content-header h3,
[data-bs-theme="oceano"] .app-content-header h3,
[data-bs-theme="selva"] .content-header h3,
[data-bs-theme="selva"] .app-content-header h3,
[data-bs-theme="noche"] .content-header h3,
[data-bs-theme="noche"] .app-content-header h3 {
    color: var(--bs-heading-color);
}

/* El footer acompaña */
[data-bs-theme="oceano"] .app-footer,
[data-bs-theme="selva"] .app-footer,
[data-bs-theme="noche"] .app-footer {
    background-color: var(--bs-secondary-bg) !important;
    color: var(--bs-body-secondary-color);
    border-top: 1px solid var(--bs-border-color);
}

/* ====================================================
   🔆 Legibilidad en los temas oscuros

   El texto de menús, tablas y ayudas heredaba grises
   pensados para fondo blanco. Acá se sube el contraste.
==================================================== */

[data-bs-theme="dark"],
[data-bs-theme="oceano"],
[data-bs-theme="selva"],
[data-bs-theme="noche"] {
    --bs-secondary-color: rgba(255, 255, 255, .78);
    --bs-tertiary-color: rgba(255, 255, 255, .62);
    --bs-emphasis-color: #ffffff;
}

    /* Menú lateral: los ítems inactivos también deben leerse */
    [data-bs-theme="dark"] .app-sidebar .nav-link,
    [data-bs-theme="oceano"] .app-sidebar .nav-link,
    [data-bs-theme="selva"] .app-sidebar .nav-link,
    [data-bs-theme="noche"] .app-sidebar .nav-link {
        color: rgba(255, 255, 255, .82) !important;
    }

    [data-bs-theme="dark"] .app-sidebar .nav-header,
    [data-bs-theme="oceano"] .app-sidebar .nav-header,
    [data-bs-theme="selva"] .app-sidebar .nav-header,
    [data-bs-theme="noche"] .app-sidebar .nav-header {
        color: rgba(255, 255, 255, .55) !important;
        letter-spacing: .06em;
    }

    /* Utilidades de color de Bootstrap pensadas para fondo claro */
    [data-bs-theme="dark"] .text-secondary,
    [data-bs-theme="oceano"] .text-secondary,
    [data-bs-theme="selva"] .text-secondary,
    [data-bs-theme="noche"] .text-secondary {
        color: rgba(255, 255, 255, .78) !important;
    }

    [data-bs-theme="dark"] .text-muted,
    [data-bs-theme="oceano"] .text-muted,
    [data-bs-theme="selva"] .text-muted,
    [data-bs-theme="noche"] .text-muted {
        color: rgba(255, 255, 255, .62) !important;
    }

    [data-bs-theme="dark"] .text-dark,
    [data-bs-theme="oceano"] .text-dark,
    [data-bs-theme="selva"] .text-dark,
    [data-bs-theme="noche"] .text-dark {
        color: rgba(255, 255, 255, .9) !important;
    }

    /* Tablas: encabezados y celdas */
    [data-bs-theme="dark"] .table,
    [data-bs-theme="oceano"] .table,
    [data-bs-theme="selva"] .table,
    [data-bs-theme="noche"] .table {
        --bs-table-color: rgba(255, 255, 255, .92);
        --bs-table-striped-color: rgba(255, 255, 255, .92);
        --bs-table-hover-color: #ffffff;
    }

        [data-bs-theme="dark"] .table > thead th,
        [data-bs-theme="oceano"] .table > thead th,
        [data-bs-theme="selva"] .table > thead th,
        [data-bs-theme="noche"] .table > thead th {
            color: #ffffff;
        }

    /* Controles de DataTables: "Mostrar 25", paginación, contador */
    [data-bs-theme="dark"] .dataTables_wrapper,
    [data-bs-theme="dark"] .dataTables_info,
    [data-bs-theme="dark"] .dataTables_length,
    [data-bs-theme="oceano"] .dataTables_wrapper,
    [data-bs-theme="oceano"] .dataTables_info,
    [data-bs-theme="oceano"] .dataTables_length,
    [data-bs-theme="selva"] .dataTables_wrapper,
    [data-bs-theme="selva"] .dataTables_info,
    [data-bs-theme="selva"] .dataTables_length,
    [data-bs-theme="noche"] .dataTables_wrapper,
    [data-bs-theme="noche"] .dataTables_info,
    [data-bs-theme="noche"] .dataTables_length {
        color: rgba(255, 255, 255, .85);
    }

    [data-bs-theme="dark"] .page-link,
    [data-bs-theme="oceano"] .page-link,
    [data-bs-theme="selva"] .page-link,
    [data-bs-theme="noche"] .page-link {
        background-color: transparent;
        border-color: var(--bs-border-color);
        color: rgba(255, 255, 255, .85);
    }

    [data-bs-theme="dark"] .page-item.disabled .page-link,
    [data-bs-theme="oceano"] .page-item.disabled .page-link,
    [data-bs-theme="selva"] .page-item.disabled .page-link,
    [data-bs-theme="noche"] .page-item.disabled .page-link {
        color: rgba(255, 255, 255, .38);
    }

    /* Etiquetas, ayudas y textos de formulario */
    [data-bs-theme="dark"] .form-label,
    [data-bs-theme="dark"] .form-text,
    [data-bs-theme="dark"] dt,
    [data-bs-theme="oceano"] .form-label,
    [data-bs-theme="oceano"] .form-text,
    [data-bs-theme="oceano"] dt,
    [data-bs-theme="selva"] .form-label,
    [data-bs-theme="selva"] .form-text,
    [data-bs-theme="selva"] dt,
    [data-bs-theme="noche"] .form-label,
    [data-bs-theme="noche"] .form-text,
    [data-bs-theme="noche"] dt {
        color: rgba(255, 255, 255, .88);
    }

    /* Migas de pan y títulos de sección */
    [data-bs-theme="dark"] .breadcrumb-item.active,
    [data-bs-theme="oceano"] .breadcrumb-item.active,
    [data-bs-theme="selva"] .breadcrumb-item.active,
    [data-bs-theme="noche"] .breadcrumb-item.active {
        color: rgba(255, 255, 255, .75);
    }

    /* Listas de sugerencias sobre fondo oscuro */
    [data-bs-theme="dark"] .sugerencias-flotantes,
    [data-bs-theme="oceano"] .sugerencias-flotantes,
    [data-bs-theme="selva"] .sugerencias-flotantes,
    [data-bs-theme="noche"] .sugerencias-flotantes {
        background-color: var(--bs-secondary-bg);
        color: rgba(255, 255, 255, .9);
    }

    /* Menús desplegables */
    [data-bs-theme="dark"] .dropdown-menu,
    [data-bs-theme="oceano"] .dropdown-menu,
    [data-bs-theme="selva"] .dropdown-menu,
    [data-bs-theme="noche"] .dropdown-menu {
        background-color: var(--bs-secondary-bg);
        border-color: var(--bs-border-color);
    }

    [data-bs-theme="dark"] .dropdown-item,
    [data-bs-theme="oceano"] .dropdown-item,
    [data-bs-theme="selva"] .dropdown-item,
    [data-bs-theme="noche"] .dropdown-item {
        color: rgba(255, 255, 255, .88);
    }

        [data-bs-theme="dark"] .dropdown-item:hover,
        [data-bs-theme="oceano"] .dropdown-item:hover,
        [data-bs-theme="selva"] .dropdown-item:hover,
        [data-bs-theme="noche"] .dropdown-item:hover {
            background-color: rgba(var(--bs-primary-rgb), .18);
            color: #ffffff;
        }

    /* ====================================================
   🎯 Sidebar, barra superior y pie: un solo color

   Antes el menú lateral usaba un tono más oscuro que la
   barra superior. Los tres comparten la misma superficie
   para que el marco de la aplicación se lea como una pieza.
==================================================== */

    [data-bs-theme="dark"] .app-sidebar,
    [data-bs-theme="dark"] .app-header,
    [data-bs-theme="dark"] .app-footer,
    [data-bs-theme="oceano"] .app-sidebar,
    [data-bs-theme="oceano"] .app-header,
    [data-bs-theme="oceano"] .app-footer,
    [data-bs-theme="selva"] .app-sidebar,
    [data-bs-theme="selva"] .app-header,
    [data-bs-theme="selva"] .app-footer,
    [data-bs-theme="noche"] .app-sidebar,
    [data-bs-theme="noche"] .app-header,
    [data-bs-theme="noche"] .app-footer {
        background-color: var(--lte-sidebar-bg) !important;
        color: var(--bs-body-color);
    }

    /* Separadores sutiles entre las tres zonas */
    [data-bs-theme="dark"] .app-sidebar,
    [data-bs-theme="oceano"] .app-sidebar,
    [data-bs-theme="selva"] .app-sidebar,
    [data-bs-theme="noche"] .app-sidebar {
        border-right: 1px solid var(--bs-border-color);
    }

    [data-bs-theme="dark"] .app-header,
    [data-bs-theme="oceano"] .app-header,
    [data-bs-theme="selva"] .app-header,
    [data-bs-theme="noche"] .app-header {
        border-bottom: 1px solid var(--bs-border-color);
    }

    [data-bs-theme="dark"] .app-footer,
    [data-bs-theme="oceano"] .app-footer,
    [data-bs-theme="selva"] .app-footer,
    [data-bs-theme="noche"] .app-footer {
        border-top: 1px solid var(--bs-border-color);
    }

    /* La marca no lleva fondo propio: se funde con el sidebar */
    [data-bs-theme="dark"] .sidebar-brand,
    [data-bs-theme="oceano"] .sidebar-brand,
    [data-bs-theme="selva"] .sidebar-brand,
    [data-bs-theme="noche"] .sidebar-brand {
        background-color: transparent !important;
        border-bottom: 1px solid var(--bs-border-color);
    }

/* El tema oscuro necesita su propia variable de superficie */
[data-bs-theme="dark"] {
    --lte-sidebar-bg: #16181d;
    --lte-sidebar-color: #e2e8f0;
    --lte-sidebar-hover-bg: #23262e;
}

/* ====================================================
   🔧 Campos dentro de los diálogos

   Sin márgenes laterales, el select y los inputs de
   SweetAlert2 quedan pegados al borde del diálogo.
==================================================== */

.swal2-popup .swal2-html-container {
    margin: .5rem 1.2rem 0;
    padding: 0;
}

.swal2-popup .swal2-input,
.swal2-popup .swal2-textarea,
.swal2-popup .swal2-select,
.swal2-popup .swal2-file {
    width: calc(100% - 2.4rem);
    margin: .75rem 1.2rem;
    box-sizing: border-box;
    background-color: var(--bs-form-control-bg, var(--bs-body-bg));
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
}

.swal2-popup .swal2-select {
    height: 46px;
    padding: 0 1rem;
}

/* ====================================================
   🎨 Desplegables nativos en temas oscuros

   Las opciones de un <select> las dibuja el sistema
   operativo: hay que darles color explícitamente.
==================================================== */

[data-bs-theme="dark"] select option,
[data-bs-theme="oceano"] select option,
[data-bs-theme="selva"] select option,
[data-bs-theme="noche"] select option,
[data-bs-theme="dark"] .swal2-select option,
[data-bs-theme="oceano"] .swal2-select option,
[data-bs-theme="selva"] .swal2-select option,
[data-bs-theme="noche"] .swal2-select option {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}

    [data-bs-theme="dark"] select option:checked,
    [data-bs-theme="oceano"] select option:checked,
    [data-bs-theme="selva"] select option:checked,
    [data-bs-theme="noche"] select option:checked {
        background-color: rgba(var(--bs-primary-rgb), .3);
    }

/* ====================================================
   🔎 Detalle en los modales de acción
==================================================== */

.detalle-registro {
    text-align: left;
    font-size: .88rem;
    line-height: 1.75;
}

/* ── Íconos dentro de las sugerencias ─────────────── */
.sugerencias-flotantes .list-group-item i {
    width: 1.2rem;
    text-align: center;
}

/* 🎤 Micrófono grabando en cualquier buscador */
.grabando i {
    color: #dc3545 !important;
    animation: pulso-mic 1s ease-in-out infinite;
}

/* ── La lista de sugerencias no debe recortarse ─────
   Un modal con overflow oculto corta el desplegable
   cuando aparece cerca del borde inferior. */
#modalAccionTurno .modal-content,
#modalAccionTurno .modal-body {
    overflow: visible;
}

#modalAccionTurno .modal-body {
    min-height: 320px;
}

/* ====================================================
   🩺 Antecedentes del paciente
==================================================== */

.grupo-antecedentes {
    margin-bottom: 1.1rem;
}

    .grupo-antecedentes:last-child {
        margin-bottom: 0;
    }

.grupo-titulo {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bs-secondary-color);
    padding-bottom: .35rem;
    margin-bottom: .5rem;
    border-bottom: 1px solid var(--bs-border-color);
}

    .grupo-titulo i {
        color: var(--bs-primary);
    }

.antecedente-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    padding: .6rem .8rem;
    border-radius: .75rem;
    transition: background-color .12s;
}

    .antecedente-item:hover {
        background-color: rgba(var(--bs-primary-rgb), .08);
    }

    .antecedente-item + .antecedente-item {
        border-top: 1px solid var(--bs-border-color-translucent);
    }

    /* Un antecedente resuelto sigue visible, pero atenuado */
    .antecedente-item.resuelto {
        opacity: .6;
    }

        .antecedente-item.resuelto strong {
            text-decoration: line-through;
        }

/* ── Filtro de secciones ──────────────────────────── */
.atajo-panel {
    border-radius: 50rem !important;
    font-size: .82rem;
    padding: .25rem .85rem !important;
    min-width: auto;
}

    .atajo-panel.active {
        background-color: var(--bs-primary);
        border-color: var(--bs-primary);
        color: #fff;
    }

/* Las secciones aparecen y desaparecen con una transición suave */
.panel-hc {
    transition: opacity .18s ease;
}

    .panel-hc.d-none {
        display: none !important;
    }

/* ── Selección múltiple con casillas ──────────────── */
.grupo-casillas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: .5rem;
    padding: 1rem 1.25rem;
    background-color: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;
}

.casilla-lista {
    padding: .5rem .75rem;
    border-radius: .75rem;
    transition: background-color .12s;
}

    .casilla-lista:hover {
        background-color: rgba(var(--bs-primary-rgb), .1);
    }

    .casilla-lista .form-check-label {
        font-weight: 500;
        cursor: pointer;
    }

    .casilla-lista .small {
        margin-left: -1.5em;
        padding-left: 1.5em;
    }


/* ====================================================
   🔘 Botones con el estilo del acceso

   Todos los botones del sistema comparten el mismo
   tratamiento: fondo translúcido, borde sutil y brillo
   radial que sigue al cursor. El color lo aporta el tema.
==================================================== */

.btn:not(.btn-close):not(.btn-link):not(.page-link):not(.atajo-panel):not(.accordion-button) {
    position: relative;
    overflow: hidden;
    border-radius: 50rem;
    border: 1px solid var(--glow-borde, rgba(255, 255, 255, .15));
    background-color: var(--glow-fondo, rgba(17, 19, 26, .85));
    color: var(--bs-body-color);
    font-weight: 500;
    transition: border-color .18s, background .25s, transform .1s, box-shadow .18s;
}

.btn:not(.btn-close):not(.btn-link):not(.page-link):not(.atajo-panel):hover {
    border-color: var(--glow-acento, var(--bs-primary));
    background: radial-gradient( circle 80px at var(--x, 50%) var(--y, 50%), var(--glow-acento-suave, rgba(255, 255, 255, .18)) 0%, var(--glow-fondo, rgba(17, 19, 26, .9)) 100% );
    box-shadow: 0 .4rem 1rem rgba(0, 0, 0, .22);
}

.btn:not(.btn-close):not(.btn-link):active {
    transform: scale(.97);
}

/* Los íconos internos no interceptan el mouse: romperían
   el cálculo de la posición del brillo. */
.btn i,
.btn span {
    pointer-events: none;
}

/* ── El color del texto identifica la acción ───────── */
.btn-primary,
.btn-success,
.btn-outline-primary {
    color: var(--glow-acento, var(--bs-primary)) !important;
}

.btn-danger,
.btn-outline-danger {
    color: #ff6b6b !important;
}

    .btn-danger:hover,
    .btn-outline-danger:hover {
        border-color: #ff6b6b !important;
        background: radial-gradient( circle 80px at var(--x, 50%) var(--y, 50%), rgba(255, 107, 107, .22) 0%, var(--glow-fondo, rgba(17, 19, 26, .9)) 100% );
    }

.btn-warning,
.btn-outline-warning {
    color: #ffc107 !important;
}

.btn-secondary,
.btn-outline-secondary,
.btn-light,
.btn-dark {
    color: rgba(255, 255, 255, .88) !important;
}

/* En el tema claro el fondo oscuro necesita texto claro.
   Se excluyen los atajos del filtro, que llevan fondo propio. */
[data-bs-theme="light"] .btn:not(.btn-close):not(.btn-link):not(.page-link):not(.atajo-panel):not(.accordion-button) {
    color: rgba(255, 255, 255, .9);
}

/* ── Atajos del filtro de secciones ────────────────── */
.atajo-panel {
    background-color: transparent !important;
    border: 1px solid var(--bs-border-color) !important;
    color: var(--bs-body-color) !important;
}

    .atajo-panel:hover {
        background-color: rgba(var(--bs-primary-rgb), .14) !important;
        border-color: var(--bs-primary) !important;
        color: var(--bs-body-color) !important;
    }

    .atajo-panel.active {
        background-color: var(--bs-primary) !important;
        border-color: var(--bs-primary) !important;
        color: #fff !important;
    }

/* En Océano, Selva y Noche el acento es claro: texto oscuro */
[data-bs-theme="oceano"] .atajo-panel.active,
[data-bs-theme="selva"] .atajo-panel.active,
[data-bs-theme="noche"] .atajo-panel.active {
    color: #10151c !important;
}

[data-bs-theme="light"] .btn-primary,
[data-bs-theme="light"] .btn-outline-primary,
[data-bs-theme="light"] .btn-success {
    color: var(--glow-acento) !important;
}

/* Los botones chicos de las grillas mantienen su tamaño */
.btn-sm {
    padding: .3rem .75rem !important;
    font-size: .85rem;
}

/* El botón de cerrar de los modales queda como está */
.btn-close {
    background-color: transparent !important;
    border: none !important;
}

.sidebar-brand .brand-link img.brand-image {
    max-height: 35px;
    width: auto;
    object-fit: contain;
}

/* El validation summary del login va sobre tarjeta oscura:
   el rojo de Bootstrap queda ilegible sobre ese fondo. */
.login-card .alert-danger,
.login-card .validation-summary-errors {
    color: #FCA5A5;
    background-color: rgba(220, 38, 38, .14);
    border-color: rgba(220, 38, 38, .35);
}

.login-card .alert-danger ul,
.login-card .validation-summary-errors ul {
    margin-bottom: 0;
    padding-left: 1.1rem;
}

/* El resumen de validación emite un <ul>: se le saca el formato de lista
   para que se lea como un mensaje suelto dentro del cartel. */
.resumen-validacion ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* El horario elegido tiene que distinguirse en los cinco temas, así que
   no se apoya en las clases de color de Bootstrap. */
.btn-horario.horario-elegido {
    outline: 3px solid #0EA5A4;
    outline-offset: 2px;
    font-weight: 700;
    transform: scale(1.06);
}