/* theme-ibn.css
 * Hoja de estilos para alinear la intranet con la identidad gráfica oficial
 * IBN. Basado en el documento "Consideraciones Gráficas IBN".
 *
 * Carga DESPUÉS de bootstrap.min.css para que las variables sobreescriban
 * los defaults de Bootstrap.
 */

/* ============================================
   1. FUENTES OFICIALES (locales en /assets/fonts)
   ============================================ */
@font-face {
  font-family: "Lulo Clean";
  src: url("/assets/fonts/LuloCleanOne.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lulo Clean";
  src: url("/assets/fonts/LuloCleanOneBold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("/assets/fonts/Montserrat-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("/assets/fonts/Montserrat-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Museo";
  src: url("/assets/fonts/Museo500-Regular.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ============================================
   2. PALETA OFICIAL IBN
   ============================================ */
:root {
  /* Principales */
  --ibn-turquesa: #009494;
  --ibn-grafito: #3B3438;
  --ibn-azul-grisaceo: #153252;
  --ibn-gris-claro: #D2D2D2;
  --ibn-blanco: #FFFFFF;
  /* Complementarios */
  --ibn-naranja: #EF7F1B;
  --ibn-rojo: #C01718;
  --ibn-magenta: #E71F85;
  --ibn-cian: #4B72B4;
  --ibn-negro: #1D1D1D;

  /* Fuentes */
  /* Variantes para usar el color de marca como TEXTO. En claro son el color
     mismo; en oscuro se aclaran (ver el bloque de tema oscuro). */
  --ibn-rojo-texto:     var(--ibn-rojo);
  --ibn-turquesa-texto: var(--ibn-turquesa);
  --ibn-naranja-texto:  var(--ibn-naranja);

  --ibn-font-display: "Lulo Clean", "Montserrat", Arial, sans-serif;
  --ibn-font-body: "Montserrat", "Museo", "Segoe UI", Helvetica, Arial, sans-serif;
}

/* ============================================
   3. OVERRIDE DE BOOTSTRAP 5
   ============================================ */
:root,
[data-bs-theme="light"] {
  --bs-primary: var(--ibn-azul-grisaceo);
  --bs-primary-rgb: 21, 50, 82;
  --bs-secondary: var(--ibn-grafito);
  --bs-secondary-rgb: 59, 52, 56;
  --bs-info: var(--ibn-turquesa);
  --bs-info-rgb: 0, 148, 148;
  --bs-body-color: var(--ibn-grafito);
  --bs-body-font-family: var(--ibn-font-body);
  --bs-link-color: var(--ibn-azul-grisaceo);
  --bs-link-hover-color: var(--ibn-turquesa-texto);
  --bs-danger: var(--ibn-rojo);
  --bs-danger-rgb: 192, 23, 24;
  --bs-warning: var(--ibn-naranja);
  --bs-warning-rgb: 239, 127, 27;
}

/* btn-danger con rojo oficial */
.btn-danger {
  --bs-btn-bg: var(--ibn-rojo);
  --bs-btn-border-color: var(--ibn-rojo);
  --bs-btn-hover-bg: #a8141a;
  --bs-btn-hover-border-color: #a8141a;
  --bs-btn-active-bg: #8c1015;
  --bs-btn-active-border-color: #8c1015;
}
/* btn-warning con naranja oficial */
.btn-warning {
  --bs-btn-color: white;
  --bs-btn-bg: var(--ibn-naranja);
  --bs-btn-border-color: var(--ibn-naranja);
  --bs-btn-hover-bg: #d56b08;
  --bs-btn-hover-border-color: #d56b08;
  --bs-btn-hover-color: white;
  --bs-btn-active-bg: #b85a05;
  --bs-btn-active-border-color: #b85a05;
}
/* Badges */
.badge.bg-danger { background-color: var(--ibn-rojo) !important; }
.badge.bg-warning { background-color: var(--ibn-naranja) !important; color: white !important; }

/* Las clases de botón usan estas variables, pero Bootstrap también pinta
 * algunos colores hardcoded. Forzamos algunos para asegurar el look. */
/* Estos usaban var(--ibn-azul-grisaceo), que es un color de MARCA y no cambia
 * con el tema: en oscuro el texto quedaba en contraste 1.39, ilegible.
 * --bs-primary sí está definido en los dos temas. */
.btn-primary {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: #1a3f63;
  --bs-btn-hover-border-color: #1a3f63;
  --bs-btn-active-bg: #0e2640;
  --bs-btn-active-border-color: #0e2640;
}
.btn-info {
  --bs-btn-color: white;
  --bs-btn-bg: var(--ibn-turquesa);
  --bs-btn-border-color: var(--ibn-turquesa);
  --bs-btn-hover-bg: #007a7a;
  --bs-btn-hover-border-color: #007a7a;
  --bs-btn-hover-color: white;
  --bs-btn-active-bg: #006666;
  --bs-btn-active-border-color: #006666;
}
.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
}

/* ============================================
   4. TIPOGRAFÍA GLOBAL
   ============================================ */
body {
  font-family: var(--ibn-font-body);
  color: var(--ibn-grafito);
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--ibn-font-display);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ibn-azul-grisaceo);
}
/* La fuente Lulo Clean es display-only (sólo mayúsculas), así que la usamos
 * para textos cortos en mayúsculas. Para títulos largos usamos Montserrat. */
.text-display { font-family: var(--ibn-font-display); text-transform: uppercase; letter-spacing: 0.18em; }
.text-museo { font-family: "Museo", var(--ibn-font-body); }

/* ============================================
   5. ELEMENTOS ESPECÍFICOS DE LA INTRANET
   ============================================ */
/* Header / Navbar: gradient oficial usando azul grisáceo + turquesa */
.navbar-ibn,
.page-header {
  background: linear-gradient(135deg, var(--ibn-azul-grisaceo) 0%, var(--ibn-turquesa) 100%) !important;
}
.navbar-ibn .brand,
.page-header h1 {
  font-family: var(--ibn-font-display);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: white;
}

/* Botones de la barra superior */
.btn-back,
.btn-logout {
  font-family: var(--ibn-font-body);
  font-weight: 500;
}

/* Tablas: encabezados en azul grisáceo */
.table thead th {
  color: var(--ibn-azul-grisaceo);
  font-family: var(--ibn-font-body);
  font-weight: 700;
}

/* Tags de Select2 con turquesa como acento */
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice {
  background-color: var(--ibn-turquesa) !important;
  color: white !important;
  border: none !important;
}
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove {
  color: rgba(255,255,255,0.85) !important;
}

/* Cards / Containers: fondo blanco con borde turquesa sutil al focus */
.card { border-color: var(--ibn-gris-claro); }
.form-control:focus,
.form-select:focus {
  border-color: var(--ibn-turquesa);
  box-shadow: 0 0 0 0.2rem rgba(0, 148, 148, 0.15);
}

/* Links del footer / nav items */
.nav-link.active,
.nav-tabs .nav-link.active {
  color: var(--ibn-turquesa-texto) !important;
  border-bottom-color: var(--ibn-turquesa-texto) !important;
}

/* Badges */
.badge.bg-info { background-color: var(--ibn-turquesa) !important; }

/* ============================================
   6. CAPA SEMÁNTICA (claro / oscuro)
   ============================================
 * La paleta de arriba son los colores de la MARCA y no cambian nunca.
 * Estos de acá son ROLES -- "fondo de página", "texto suave", "borde" -- y sí
 * cambian según el tema. Una página nueva debe usar SIEMPRE estos, nunca un
 * color escrito a mano: así entra al modo oscuro sola, sin tocarla.
 *
 * El tema se aplica poniendo data-bs-theme="dark" en <html>, que es el mismo
 * interruptor que usa Bootstrap 5.3. Lo hace tema.js.
 */
:root,
[data-bs-theme="light"] {
  --ibn-fondo:          #f0f2f5;   /* fondo de la página */
  --ibn-superficie:     #ffffff;   /* tarjetas, filas, formularios */
  --ibn-superficie-2:   #f8f9fa;   /* zonas hundidas, cabeceras de tabla */
  --ibn-superficie-3:   #f7f4f1;   /* variante cálida (módulo adoración) */
  --ibn-titulo:         #153252;   /* títulos y nombres destacados */
  --ibn-texto:          #3b3438;
  --ibn-texto-suave:    #6c757d;
  --ibn-texto-calido:   #857b70;   /* secundario del módulo adoración */
  --ibn-tinta:          #2b2119;   /* texto fuerte sobre fondo cálido */
  --ibn-borde:          #dee2e6;
  --ibn-borde-calido:   #e0d7cb;
  --ibn-sombra:         rgba(0, 0, 0, .08);
  --ibn-cabecera-a:     #4f657d;   /* gradiente de la barra superior */
  --ibn-cabecera-b:     #153252;
  --ibn-ok:             #14603c;
  --ibn-error:          #c0392b;
  /* Versiones para usar como FONDO con texto blanco encima. Los de arriba se
     aclaran en oscuro (para servir de texto) y ahí el blanco deja de leerse. */
  --ibn-ok-solido:      #14603c;
  --ibn-error-solido:   #b3261e;
  --ibn-aviso:          #8a5d00;
  --ado-naranjo:        #de8137;   /* acento del ministerio de adoración */
  --ado-naranjo-osc:    #c4661e;
  --ado-naranjo-hover:  #c06d2a;
  /* Texto SOBRE el naranjo. Oscuro en los dos temas: el blanco sobre naranjo
     queda en contraste ~2.8 y el oscuro sobre naranjo pasa de 7. */
  --ibn-texto-sobre-acento: #241704;

  /* Pastillas de estado (aprobado / pendiente / rechazado). Van en pareja:
     fondo y texto se eligen juntos, si no una queda ilegible. */
  --ibn-chip-ok-fondo:      #d8f0e2;  --ibn-chip-ok-texto:      #14603c;
  --ibn-chip-aviso-fondo:   #fbeeca;  --ibn-chip-aviso-texto:   #6b4c05;
  --ibn-chip-error-fondo:   #f7dcd9;  --ibn-chip-error-texto:   #8c2f26;
  --ibn-chip-naranjo-fondo: #fbeee0;  --ibn-chip-naranjo-texto: #a2551a;
}

/* En oscuro NO se invierte: se eligen valores que mantengan legible el
 * contraste. El azul institucional como TEXTO es ilegible sobre fondo oscuro,
 * así que ahí se aclara; como fondo de la barra superior, se oscurece. */
[data-bs-theme="dark"] {
  --ibn-fondo:          #12161b;
  --ibn-superficie:     #1a1f26;
  --ibn-superficie-2:   #222831;
  --ibn-superficie-3:   #262b31;
  --ibn-titulo:         #8fb4e0;
  --ibn-texto:          #e8eaed;
  --ibn-texto-suave:    #a3adb8;
  --ibn-texto-calido:   #b3a99d;
  --ibn-tinta:          #e8eaed;
  --ibn-borde:          #2f363e;
  --ibn-borde-calido:   #3a342d;
  --ibn-sombra:         rgba(0, 0, 0, .45);
  --ibn-cabecera-a:     #1e2b3a;
  --ibn-cabecera-b:     #0e1a2a;
  --ibn-ok:             #7fc9a2;
  --ibn-error:          #e8897b;
  --ibn-ok-solido:      #1b7a4d;
  --ibn-error-solido:   #b3382c;
  --ibn-aviso:          #d9ae5c;
  --ado-naranjo:        #d98a45;
  --ado-naranjo-osc:    #f0ac72;
  --ado-naranjo-hover:  #d98a45;

  /* Que Bootstrap acompañe: su azul institucional no se lee en oscuro. */
  --bs-primary:      #4b7fb8;
  --bs-primary-rgb:  75, 127, 184;
  --bs-body-color:   var(--ibn-texto);
  --bs-body-bg:      var(--ibn-fondo);
  --bs-link-color:   #7fb0e0;
  --bs-link-hover-color: var(--ibn-turquesa-texto);
  --bs-border-color: var(--ibn-borde);

  /* Los colores de MARCA no se tocan en oscuro: se usan como FONDO de botones
     e insignias con texto blanco encima, y aclararlos bajaba el contraste
     (btn-info pasó de 3.3 a 2.49). Para cuando el mismo color va como TEXTO
     existen las variantes -texto de abajo, que sí se aclaran. */
  --ibn-rojo-texto:     #e8897b;
  --ibn-turquesa-texto: #35b5b5;
  --ibn-naranja-texto:  #f0954a;

  --ibn-chip-ok-fondo:      #14291f;  --ibn-chip-ok-texto:      #7fc9a2;
  --ibn-chip-aviso-fondo:   #2b2317;  --ibn-chip-aviso-texto:   #d9ae5c;
  --ibn-chip-error-fondo:   #2e1a18;  --ibn-chip-error-texto:   #e8897b;
  --ibn-chip-naranjo-fondo: #2c2117;  --ibn-chip-naranjo-texto: #eb9a55;
}

body {
  background-color: var(--ibn-fondo);
  color: var(--ibn-texto);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 { color: var(--ibn-titulo); }

.table thead th { color: var(--ibn-titulo); }
.card { border-color: var(--ibn-borde); }

/* ============================================
   7. CHROME COMPARTIDO DE LA INTRANET
   ============================================
 * Estaba copiado y pegado dentro del <style> de cada página: .page-header en 8,
 * .user-menu en 10, .wrap en 7. Vive acá para que una página nueva lo herede
 * escribiendo solo el HTML, y para que el modo oscuro no haya que repetirlo.
 */
.page-header {
  position: sticky; top: 0; z-index: 1030;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: .75rem 1.5rem;
  color: #fff;
  background: linear-gradient(135deg, var(--ibn-cabecera-a) 0%, var(--ibn-cabecera-b) 100%) !important;
  box-shadow: 0 2px 4px var(--ibn-sombra);
}
.page-header h1 { margin: 0; font-size: 1.1rem; font-weight: 600; color: #fff; }
.page-header-left { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

.btn-back {
  background: rgba(255, 255, 255, .15); color: #fff;
  border: 1px solid rgba(255, 255, 255, .3);
  font-size: .85rem; padding: .4rem .85rem; text-decoration: none;
  border-radius: .35rem; cursor: pointer; line-height: 1.4;
}
.btn-back:hover { background: rgba(255, 255, 255, .25); color: #fff; }

.user-menu { display: flex; align-items: center; gap: .75rem; font-size: .85rem; }

.wrap { max-width: 900px; margin: 0 auto; padding: 1.25rem 1rem 4rem; }

.titulo-seccion {
  font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ibn-texto-suave); margin: 2rem 0 .75rem;
}
.titulo-seccion:first-of-type { margin-top: 0; }

.estado-vacio {
  text-align: center; color: var(--ibn-texto-suave); padding: 2rem 1rem;
  background: var(--ibn-superficie); border-radius: .6rem;
}

.oculto { display: none !important; }

/* Interruptor de tema, inyectado por tema.js en la barra superior. */
.btn-tema {
  background: rgba(255, 255, 255, .15); color: #fff;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: .35rem; cursor: pointer;
  font-size: .95rem; line-height: 1; padding: .35rem .5rem;
}
.btn-tema:hover { background: rgba(255, 255, 255, .25); }

/* ============================================
   8. NAVEGACIÓN LATERAL (la inyecta nav.js)
   ============================================
 * En escritorio queda fija a la izquierda y el contenido se corre con un
 * padding en el body -- así ninguna de las 12 páginas tuvo que rehacer su
 * layout. En celular se convierte en cajón: sale desde el borde y lo abre el
 * botón de la barra superior.
 */
.sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; width: 240px; z-index: 1045;
  display: flex; flex-direction: column; gap: .15rem;
  padding: 1rem .75rem 2rem;
  background: var(--ibn-superficie);
  border-right: 1px solid var(--ibn-borde);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.sidebar-marca {
  display: block; text-decoration: none; padding: .35rem .6rem 1rem;
  border-bottom: 1px solid var(--ibn-borde); margin-bottom: .75rem;
}
.sidebar-marca-texto {
  font-family: var(--ibn-font-display); font-size: .74rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ibn-titulo); line-height: 1.5;
}

.nav-grupo { margin-top: 1.1rem; }
.nav-grupo-titulo {
  font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ibn-texto-suave); padding: 0 .6rem .35rem;
}

.nav-item {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .6rem; border-radius: .4rem;
  color: var(--ibn-texto); text-decoration: none;
  font-size: .9rem; line-height: 1.3;
}
.nav-item i { font-size: 1rem; color: var(--ibn-texto-suave); flex: none; }
.nav-item:hover { background: var(--ibn-superficie-2); color: var(--ibn-texto); }
.nav-item:hover i { color: var(--ibn-texto); }
.nav-item.activo { background: var(--ibn-superficie-2); color: var(--ibn-titulo); font-weight: 600; }
.nav-item.activo i { color: var(--ado-naranjo); }
.nav-item:focus-visible { outline: 2px solid var(--ado-naranjo); outline-offset: 1px; }

.sidebar-fondo {
  position: fixed; inset: 0; z-index: 1044;
  background: rgba(0, 0, 0, .45);
  opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease;
}
.sidebar-fondo.visible { opacity: 1; visibility: visible; }

.btn-menu {
  background: rgba(255, 255, 255, .15); color: #fff;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: .35rem; cursor: pointer;
  font-size: 1.05rem; line-height: 1; padding: .3rem .55rem;
}
.btn-menu:hover { background: rgba(255, 255, 255, .25); }

/* Escritorio: el sidebar es parte del mueble y el botón sobra. */
@media (min-width: 992px) {
  body.con-sidebar { padding-left: 240px; }
  .btn-menu { display: none; }
  .sidebar-fondo { display: none; }
}

/* Celular: cajón. Sale del borde y lo tapa un fondo oscuro. */
@media (max-width: 991.98px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: 0 0 30px rgba(0, 0, 0, .3);
  }
  .sidebar.abierto { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar, .sidebar-fondo { transition: none; }
}

/* ============================================
   9. SELECT CON BUSCADOR (buscador-select.js)
   ============================================
 * El <select> real sigue en el DOM y solo se esconde: es la fuente de la
 * verdad. Se oculta con position absoluta y no con display:none para que la
 * validación nativa del formulario lo siga viendo.
 */
.buscador-select { position: relative; display: inline-block; width: 100%; max-width: inherit; }
.buscador-oculto {
  position: absolute; opacity: 0; pointer-events: none; height: 0; width: 0; padding: 0; border: 0;
}

.buscador-lista {
  display: none;
  position: absolute; top: calc(100% + 2px); left: 0; right: 0; z-index: 1050;
  max-height: 260px; overflow-y: auto; overscroll-behavior: contain;
  background: var(--ibn-superficie);
  border: 1px solid var(--ibn-borde);
  border-radius: .4rem;
  box-shadow: 0 6px 20px var(--ibn-sombra);
}
.buscador-abierto .buscador-lista { display: block; }

.buscador-item {
  padding: .45rem .7rem; font-size: .88rem; cursor: pointer;
  color: var(--ibn-texto); line-height: 1.35;
}
.buscador-item:hover,
.buscador-item.marcado { background: var(--ibn-superficie-2); }
.buscador-item.elegido { font-weight: 600; color: var(--ibn-titulo); }
.buscador-vacio { padding: .6rem .7rem; font-size: .85rem; color: var(--ibn-texto-suave); }

/* ============================================
   10. LIBRERÍAS DE TERCEROS EN MODO OSCURO
   ============================================
 * DataTables, Select2 y sus complementos traen su propia hoja con colores
 * claros y no siguen los tokens. Sin esto, en Miembros los rótulos
 * "Mostrar / registros / Buscar" quedan casi invisibles y los desplegables
 * salen blancos sobre la página oscura.
 *
 * Se cubren los nombres de clase de DataTables 1.x (dataTables_*) y 2.x (dt-*):
 * la intranet carga la 2.0.8, pero algunos complementos siguen emitiendo el
 * marcado viejo.
 *
 * Escrito SIN anidamiento CSS a propósito: el anidado nativo no aplica en
 * navegadores algo antiguos y esto fallaría en silencio, que es justo lo que
 * hay que evitar en una corrección de legibilidad.
 */
[data-bs-theme="dark"] .dataTables_wrapper,
[data-bs-theme="dark"] .dt-container,
[data-bs-theme="dark"] .dataTables_length,
[data-bs-theme="dark"] .dataTables_filter,
[data-bs-theme="dark"] .dataTables_info,
[data-bs-theme="dark"] .dataTables_paginate,
[data-bs-theme="dark"] .dt-length,
[data-bs-theme="dark"] .dt-search,
[data-bs-theme="dark"] .dt-info,
[data-bs-theme="dark"] .dt-paging,
[data-bs-theme="dark"] .dataTables_length label,
[data-bs-theme="dark"] .dataTables_filter label,
[data-bs-theme="dark"] .dt-length label,
[data-bs-theme="dark"] .dt-search label {
  color: var(--ibn-texto);
}

[data-bs-theme="dark"] .dataTables_length select,
[data-bs-theme="dark"] .dataTables_filter input,
[data-bs-theme="dark"] .dt-length select,
[data-bs-theme="dark"] .dt-search input,
[data-bs-theme="dark"] .dt-input {
  background-color: var(--ibn-superficie-2);
  color: var(--ibn-texto);
  border: 1px solid var(--ibn-borde);
  border-radius: .3rem;
  padding: .2rem .45rem;
}
[data-bs-theme="dark"] .dataTables_filter input::placeholder,
[data-bs-theme="dark"] .dt-search input::placeholder { color: var(--ibn-texto-suave); }

[data-bs-theme="dark"] .dataTables_paginate .paginate_button,
[data-bs-theme="dark"] .dt-paging .page-link {
  color: var(--ibn-texto);
  background-color: transparent;
  border-color: var(--ibn-borde);
}
[data-bs-theme="dark"] .dt-paging .page-item.active .page-link {
  background-color: var(--ado-naranjo);
  border-color: var(--ado-naranjo);
  color: var(--ibn-texto-sobre-acento);
}
[data-bs-theme="dark"] .dt-paging .page-item.disabled .page-link { color: var(--ibn-texto-suave); }

[data-bs-theme="dark"] table.dataTable thead th,
[data-bs-theme="dark"] table.dataTable thead td {
  border-bottom-color: var(--ibn-borde);
  color: var(--ibn-titulo);
}

/* Select2 dibuja su desplegable al final del <body>, fuera de la tarjeta. */
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection,
[data-bs-theme="dark"] .select2-dropdown,
[data-bs-theme="dark"] .select2-search__field {
  background-color: var(--ibn-superficie-2) !important;
  color: var(--ibn-texto) !important;
  border-color: var(--ibn-borde) !important;
}
[data-bs-theme="dark"] .select2-results__option { color: var(--ibn-texto); }
[data-bs-theme="dark"] .select2-results__option--highlighted {
  background-color: var(--ado-naranjo) !important;
  color: #fff !important;
}