/* ═══════════════════════════════════════════════════════════════════════════
   TEMA-COMPONENTES.CSS — Componentes de interacción (claro / oscuro)
   ───────────────────────────────────────────────────────────────────────────
   Se carga DESPUÉS de tema.css. Cubre SOLO componentes de interacción:
   formularios, botones, modales, dropdowns genéricos, badges, SweetAlert2,
   Choices.js y tooltips/popovers.

   NO repite lo que ya hace tema.css (body, contenedores/.card, navbar,
   dropdowns del navbar, selector de tema, alertas, scrollbars, foco).

   Reglas de la casa:
     · Solo tokens --t-* (los colores fijos que aparecen son, o bien rgba()
       de superposición, o bien hex dentro de data-URIs SVG, donde var() no
       es utilizable: cada uno replica el token indicado en su comentario).
     · Se usa !important únicamente donde cascade.css / elegante.css imponen
       colores fijos con !important. La especificidad de algunos selectores
       está igualada a propósito (p. ej. `.btn.btn-primary`) para ganarles
       por orden de carga.
     · Minimalismo: bordes de 1px, sin gradientes, sin transform en hover.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   1. FORMULARIOS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────────
   1.1 Campos base
   cascade.css pinta estos campos con var(--white) y borde de 2px; --white NO
   está remapeado por tema.css, así que en oscuro quedarían blancos.
   ─────────────────────────────────────────────────────────────────────────── */
.form-control,
.form-select,
textarea,
textarea.form-control,
select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="time"] {
    background-color: var(--t-surface) !important;
    border: 1px solid var(--t-border) !important;
    border-radius: var(--t-radius-sm) !important;
    color: var(--t-text) !important;
    box-shadow: none !important;
    transition: var(--t-transition) !important;
}

/* El calendario/reloj nativo debe verse en oscuro */
[data-tema="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-tema="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
[data-tema="dark"] input[type="month"]::-webkit-calendar-picker-indicator,
[data-tema="dark"] input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(0.85);
    cursor: pointer;
}

/* Los ficheros usan un "botón" interno propio */
.form-control[type="file"] {
    color: var(--t-text) !important;
}
.form-control[type="file"]::file-selector-button {
    background: var(--t-surface-2);
    color: var(--t-text);
    border: 0;
    border-inline-end: 1px solid var(--t-border);
    transition: var(--t-transition);
}
.form-control[type="file"]:hover::file-selector-button {
    background: var(--t-surface-3);
    color: var(--t-text);
}

/* ───────────────────────────────────────────────────────────────────────────
   1.2 Placeholders — cascade.css los fuerza a #a0a0a0 en cursiva y los
       atenúa aún más al enfocar.
       Se usa --t-text-muted (no --t-text-faint): el placeholder es texto y
       debe pasar 4.5:1 (faint se queda en 2.65:1 sobre --t-surface claro).
       Por lo mismo no se atenúa al enfocar.
   ─────────────────────────────────────────────────────────────────────────── */
.form-control::placeholder,
.form-select::placeholder,
input::placeholder,
textarea::placeholder,
select::placeholder,
.form-control:focus::placeholder,
.form-select:focus::placeholder,
input:focus::placeholder,
textarea:focus::placeholder,
select:focus::placeholder {
    color: var(--t-text-muted) !important;
    opacity: 1 !important;
    font-style: normal;
    font-weight: 400 !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   1.3 Foco — anillo único (--t-ring); sin desplazamiento (cascade.css hace
       translateY(-1px) al enfocar)
   ─────────────────────────────────────────────────────────────────────────── */
.form-control:focus,
.form-select:focus,
textarea:focus,
select:focus,
input:focus,
.form-control-sm:focus,
.form-select-sm:focus,
.input-group .form-control:focus,
.input-group .form-select:focus {
    background-color: var(--t-surface) !important;
    border-color: var(--t-primary) !important;
    box-shadow: var(--t-ring) !important;
    color: var(--t-text) !important;
    outline: 0 !important;
    transform: none !important;
}

/* Hover sobrio: solo se refuerza el borde (cascade.css añade sombra grande) */
.form-control:hover:not(:disabled):not([readonly]),
.form-select:hover:not(:disabled) {
    border-color: var(--t-border-strong) !important;
    box-shadow: none !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   1.4 Tamaño pequeño — elegante.css fija fondo #fff y texto #333 en
       .form-select-sm
   ─────────────────────────────────────────────────────────────────────────── */
.form-control-sm,
.form-select-sm {
    background-color: var(--t-surface) !important;
    border: 1px solid var(--t-border) !important;
    border-radius: var(--t-radius-sm) !important;
    color: var(--t-text) !important;
    box-shadow: none !important;
}
.form-select-sm:focus {
    border-color: var(--t-primary) !important;
    box-shadow: var(--t-ring) !important;
    transform: none !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   1.5 form-select: flecha y opciones nativas
       Se usa `background-color` (nunca el atajo `background`) para no borrar
       la flecha. El hex del SVG replica --t-text-muted de cada tema porque
       dentro de un data-URI no se puede usar var().
   ─────────────────────────────────────────────────────────────────────────── */
.form-select,
.form-select-sm {
    /* Flecha en gris tenue = --t-text-muted claro (#66707c) */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2366707c' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 6 7 7 7-7'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 16px 12px !important;
}
[data-tema="dark"] .form-select,
[data-tema="dark"] .form-select-sm {
    /* Flecha = --t-text-muted oscuro (#9aa4b1) */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239aa4b1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 6 7 7 7-7'/%3e%3c/svg%3e") !important;
}

/* Lista desplegable nativa (cascade.css la fuerza a var(--white)) */
.form-select option,
select option {
    background-color: var(--t-surface) !important;
    color: var(--t-text) !important;
}
.form-select option:checked,
select option:checked {
    background-color: var(--t-primary) !important;
    color: var(--t-primary-contrast) !important;
}
.form-select option:disabled,
select option:disabled {
    color: var(--t-text-faint) !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   1.6 Etiquetas y textos de ayuda
   ─────────────────────────────────────────────────────────────────────────── */
.form-label,
.form-label-sm,
.col-form-label,
.form-check-label {
    color: var(--t-text) !important;
    font-weight: 500;
}
.form-text,
.form-text.text-muted {
    color: var(--t-text-muted) !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   1.7 Casillas, radios e interruptores
       Bootstrap 5.3 usa --bs-body-bg (= --t-bg, el fondo de página) como
       fondo del control: sobre una tarjeta se nota. Se fija a --t-surface.
   ─────────────────────────────────────────────────────────────────────────── */
.form-check-input {
    --bs-form-check-bg: var(--t-surface);
    background-color: var(--t-surface);
    border: 1px solid var(--t-border-strong);
    transition: var(--t-transition);
}
.form-check-input:hover:not(:disabled) {
    border-color: var(--t-primary);
}
.form-check-input:focus {
    border-color: var(--t-primary);
    box-shadow: var(--t-ring);
    outline: 0;
}
.form-check-input:checked {
    background-color: var(--t-primary);
    border-color: var(--t-primary);
}
.form-check-input:indeterminate {
    background-color: var(--t-primary);
    border-color: var(--t-primary);
}
.form-check-input:disabled,
.form-check-input[disabled] {
    background-color: var(--t-surface-3);
    border-color: var(--t-border);
    opacity: 0.55;
}
.form-check-input:disabled ~ .form-check-label,
.form-check-input[disabled] ~ .form-check-label {
    color: var(--t-text-faint) !important;
    opacity: 1;
}

/* En oscuro --t-primary aclara: la marca de verificación blanca de Bootstrap
   pierde contraste. Se sustituye por --t-primary-contrast (#0b1220). */
[data-tema="dark"] .form-check-input:checked[type="checkbox"] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230b1220' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
[data-tema="dark"] .form-check-input:checked[type="radio"] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%230b1220'/%3e%3c/svg%3e");
}
[data-tema="dark"] .form-check-input:indeterminate {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230b1220' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
}

/* Interruptor: la perilla apagada replica --t-text-faint de cada tema */
.form-switch .form-check-input {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2397a0aa'/%3e%3c/svg%3e");
    background-color: var(--t-surface-3);
    border-color: var(--t-border-strong);
}
/* Bootstrap ya trae `[data-bs-theme=dark] .form-switch .form-check-input:not(:checked):not(:focus)`
   (0-4-0). Se iguala con `:not(:checked)` para que la perilla apagada sea la
   misma esté o no enfocada. */
[data-tema="dark"] .form-switch .form-check-input:not(:checked) {
    /* --t-text-faint oscuro (#6e7887) */
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%236e7887'/%3e%3c/svg%3e");
}
.form-switch .form-check-input:checked {
    background-color: var(--t-primary);
    border-color: var(--t-primary);
    /* Perilla encendida = --t-primary-contrast claro (#ffffff) */
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
}
[data-tema="dark"] .form-switch .form-check-input:checked {
    /* --t-primary-contrast oscuro (#0b1220) */
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%230b1220'/%3e%3c/svg%3e");
}

/* ───────────────────────────────────────────────────────────────────────────
   1.8 Input group — elegante.css fija fondo #fff y texto #888
   ─────────────────────────────────────────────────────────────────────────── */
.input-group-text,
.input-group .input-group-text {
    background-color: var(--t-surface-2) !important;
    border: 1px solid var(--t-border) !important;
    color: var(--t-text-muted) !important;
}
.input-group .form-control,
.input-group .form-select {
    border-color: var(--t-border) !important;
}
/* El grupo se resalta como una sola pieza al enfocar */
.input-group .form-control:focus + .input-group-text,
.input-group-text:has(+ .form-control:focus),
.input-group-text:has(+ .form-select:focus) {
    border-color: var(--t-primary) !important;
}
/* elegante.css sube el anillo del input-group a 2px: se unifica con --t-ring */
.input-group .form-control:focus,
.input-group .form-select:focus {
    box-shadow: var(--t-ring) !important;
    z-index: 3;
}

/* ───────────────────────────────────────────────────────────────────────────
   1.9 Deshabilitado y solo lectura
       Las tres formas de .input-readonly de cascade.css llevan #f3f3f3/#444.
   ─────────────────────────────────────────────────────────────────────────── */
.form-control:disabled,
.form-select:disabled,
textarea:disabled,
select:disabled,
input:disabled,
.form-control[readonly],
.form-control[disabled] {
    background-color: var(--t-surface-3) !important;
    border-color: var(--t-border) !important;
    color: var(--t-text-muted) !important;
    opacity: 1 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

.input-readonly[readonly],
input[readonly].input-readonly,
textarea[readonly].input-readonly,
select[readonly].input-readonly {
    background-color: var(--t-surface-3) !important;
    border-color: var(--t-border) !important;
    color: var(--t-text) !important;
    opacity: 1 !important;
    cursor: not-allowed !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   1.10 Validación
   ─────────────────────────────────────────────────────────────────────────── */
.form-control.is-invalid,
.form-select.is-invalid,
.was-validated .form-control:invalid,
.was-validated .form-select:invalid {
    border-color: var(--t-danger) !important;
    background-color: var(--t-surface) !important;
}
.form-control.is-invalid:focus,
.form-select.is-invalid:focus,
.was-validated .form-control:invalid:focus {
    border-color: var(--t-danger) !important;
    box-shadow: 0 0 0 3px var(--t-danger-soft) !important;
}
.form-control.is-valid,
.form-select.is-valid,
.was-validated .form-control:valid,
.was-validated .form-select:valid {
    border-color: var(--t-success) !important;
    background-color: var(--t-surface) !important;
}
.form-control.is-valid:focus,
.form-select.is-valid:focus,
.was-validated .form-control:valid:focus {
    border-color: var(--t-success) !important;
    box-shadow: 0 0 0 3px var(--t-success-soft) !important;
}
.form-check-input.is-invalid,
.was-validated .form-check-input:invalid {
    border-color: var(--t-danger);
}
.form-check-input.is-valid,
.was-validated .form-check-input:valid {
    border-color: var(--t-success);
}
.invalid-feedback,
.form-check-input.is-invalid ~ .form-check-label,
.was-validated .form-check-input:invalid ~ .form-check-label {
    color: var(--t-danger) !important;
}
.valid-feedback {
    color: var(--t-success) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   2. BOTONES
   Se aprovechan las variables --bs-btn-* de Bootstrap 5.3: definen color,
   hover, activo, foco y deshabilitado de una sola vez y sin !important.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────────
   2.1 Base — forma y transición.
       elegante.css impone `border-radius` con !important en `.btn.btn-primary`
       y `.btn.btn-sm`: se iguala su especificidad para ganar por orden.
   ─────────────────────────────────────────────────────────────────────────── */
.btn,
.btn.btn-primary,
.btn.btn-sm,
.btn.btn-xs,
.btn-group > .btn,
.btn-group-sm > .btn {
    border-radius: var(--t-radius-sm) !important;
    --bs-btn-border-radius: var(--t-radius-sm);
    --bs-btn-border-width: 1px;
    --bs-btn-focus-box-shadow: var(--t-ring);
    --bs-btn-disabled-opacity: 0.55;
    transition: var(--t-transition) !important;
    box-shadow: none !important;
    background-image: none !important; /* fuera degradados */
}

/* Minimalismo: el hover cambia color, nunca posición.
   Se neutralizan los translateY() de elegante.css y cascade.css. */
.btn:hover,
.btn:focus,
.btn:active,
.btn.btn-primary:hover,
.btn.btn-sm:hover,
.boton-primario:hover,
.boton-exito:hover,
.boton-advertencia:hover,
.boton-error:hover,
.boton-info:hover,
.btn-aa-rojo:hover,
.btn.dropdown-toggle:hover {
    transform: none !important;
    box-shadow: none !important;
}
.btn:focus-visible,
.btn:focus:not(:focus-visible) {
    outline: 0 !important;
}
.btn:focus-visible {
    box-shadow: var(--t-ring) !important;
}

/* El grupo mantiene esquinas rectas por dentro: el radio de `.btn` es
   !important, así que hay que rehacer las cuatro esquinas en cada caso. */
.btn-group > .btn:not(:first-child):not(:last-child) {
    border-radius: 0 !important;
}
.btn-group > .btn:first-child:not(:last-child) {
    border-radius: var(--t-radius-sm) 0 0 var(--t-radius-sm) !important;
}
.btn-group > .btn:last-child:not(:first-child) {
    border-radius: 0 var(--t-radius-sm) var(--t-radius-sm) 0 !important;
}

/* .btn-xs — clase propia del sistema, sin definición previa en ningún CSS.
   Se usa junto a .btn-outline-* (y a veces .btn-sm) dentro de las tablas.
   elegante.css fija padding y font-size en `.btn.btn-sm` con !important, así
   que aquí no basta con las variables --bs-btn-*: hay que declarar las
   propiedades reales y superar esa especificidad con `.btn.btn-xs.btn-sm`. */
.btn.btn-xs,
.btn.btn-xs.btn-sm {
    --bs-btn-padding-y: 0.15rem;
    --bs-btn-padding-x: 0.45rem;
    --bs-btn-font-size: 0.72rem;
    padding: 0.15rem 0.45rem !important;
    font-size: 0.72rem !important;
    line-height: 1.4 !important;
    font-weight: 500 !important;
}

/* cascade.css pinta TODO .dropdown-toggle de blanco (pensado para el navbar);
   en un botón hay que devolverle el color de su variante. */
.btn.dropdown-toggle {
    color: var(--bs-btn-color);
}

/* ───────────────────────────────────────────────────────────────────────────
   2.2 Variantes sólidas
   ─────────────────────────────────────────────────────────────────────────── */
.btn-primary {
    --bs-btn-color: var(--t-primary-contrast);
    --bs-btn-bg: var(--t-primary);
    --bs-btn-border-color: var(--t-primary);
    --bs-btn-hover-color: var(--t-primary-contrast);
    --bs-btn-hover-bg: var(--t-primary-hover);
    --bs-btn-hover-border-color: var(--t-primary-hover);
    --bs-btn-active-color: var(--t-primary-contrast);
    --bs-btn-active-bg: var(--t-primary-hover);
    --bs-btn-active-border-color: var(--t-primary-hover);
    --bs-btn-disabled-color: var(--t-primary-contrast);
    --bs-btn-disabled-bg: var(--t-primary);
    --bs-btn-disabled-border-color: var(--t-primary);
}
/* elegante.css usa `.btn.btn-primary`: se iguala para el color de fondo */
.btn.btn-primary {
    background-color: var(--t-primary);
    border-color: var(--t-primary);
    color: var(--t-primary-contrast);
}
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active {
    background-color: var(--t-primary-hover);
    border-color: var(--t-primary-hover);
    color: var(--t-primary-contrast);
}

.btn-secondary {
    /* Neutro: es el botón de "Cancelar" de los modales */
    --bs-btn-color: var(--t-text);
    --bs-btn-bg: var(--t-surface-2);
    --bs-btn-border-color: var(--t-border-strong);
    --bs-btn-hover-color: var(--t-text);
    --bs-btn-hover-bg: var(--t-surface-3);
    --bs-btn-hover-border-color: var(--t-border-strong);
    --bs-btn-active-color: var(--t-text);
    --bs-btn-active-bg: var(--t-surface-3);
    --bs-btn-active-border-color: var(--t-border-strong);
    --bs-btn-disabled-color: var(--t-text-muted);
    --bs-btn-disabled-bg: var(--t-surface-2);
    --bs-btn-disabled-border-color: var(--t-border);
}

.btn-success {
    --bs-btn-color: var(--t-text-invert);
    --bs-btn-bg: var(--t-success);
    --bs-btn-border-color: var(--t-success);
    --bs-btn-hover-color: var(--t-text-invert);
    --bs-btn-hover-bg: var(--t-success);
    --bs-btn-hover-border-color: var(--t-success);
    --bs-btn-active-color: var(--t-text-invert);
    --bs-btn-active-bg: var(--t-success);
    --bs-btn-active-border-color: var(--t-success);
    --bs-btn-disabled-color: var(--t-text-invert);
    --bs-btn-disabled-bg: var(--t-success);
    --bs-btn-disabled-border-color: var(--t-success);
}
.btn-danger {
    --bs-btn-color: var(--t-text-invert);
    --bs-btn-bg: var(--t-danger);
    --bs-btn-border-color: var(--t-danger);
    --bs-btn-hover-color: var(--t-text-invert);
    --bs-btn-hover-bg: var(--t-danger);
    --bs-btn-hover-border-color: var(--t-danger);
    --bs-btn-active-color: var(--t-text-invert);
    --bs-btn-active-bg: var(--t-danger);
    --bs-btn-active-border-color: var(--t-danger);
    --bs-btn-disabled-color: var(--t-text-invert);
    --bs-btn-disabled-bg: var(--t-danger);
    --bs-btn-disabled-border-color: var(--t-danger);
}
.btn-warning {
    --bs-btn-color: var(--t-text-invert);
    --bs-btn-bg: var(--t-warning);
    --bs-btn-border-color: var(--t-warning);
    --bs-btn-hover-color: var(--t-text-invert);
    --bs-btn-hover-bg: var(--t-warning);
    --bs-btn-hover-border-color: var(--t-warning);
    --bs-btn-active-color: var(--t-text-invert);
    --bs-btn-active-bg: var(--t-warning);
    --bs-btn-active-border-color: var(--t-warning);
    --bs-btn-disabled-color: var(--t-text-invert);
    --bs-btn-disabled-bg: var(--t-warning);
    --bs-btn-disabled-border-color: var(--t-warning);
}
.btn-info {
    --bs-btn-color: var(--t-text-invert);
    --bs-btn-bg: var(--t-info);
    --bs-btn-border-color: var(--t-info);
    --bs-btn-hover-color: var(--t-text-invert);
    --bs-btn-hover-bg: var(--t-info);
    --bs-btn-hover-border-color: var(--t-info);
    --bs-btn-active-color: var(--t-text-invert);
    --bs-btn-active-bg: var(--t-info);
    --bs-btn-active-border-color: var(--t-info);
    --bs-btn-disabled-color: var(--t-text-invert);
    --bs-btn-disabled-bg: var(--t-info);
    --bs-btn-disabled-border-color: var(--t-info);
}

/* El hover de las variantes sólidas se apoya en una veladura, no en un tono
   nuevo: así funciona igual en claro y en oscuro sin inventar colores. */
.btn-success:hover,
.btn-danger:hover,
.btn-warning:hover,
.btn-info:hover,
.btn-success:focus-visible,
.btn-danger:focus-visible,
.btn-warning:focus-visible,
.btn-info:focus-visible {
    background-image: linear-gradient(rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.14)) !important;
}
[data-tema="dark"] .btn-success:hover,
[data-tema="dark"] .btn-danger:hover,
[data-tema="dark"] .btn-warning:hover,
[data-tema="dark"] .btn-info:hover {
    background-image: linear-gradient(rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.14)) !important;
}

.btn-light {
    --bs-btn-color: var(--t-text);
    --bs-btn-bg: var(--t-surface-2);
    --bs-btn-border-color: var(--t-border);
    --bs-btn-hover-color: var(--t-text);
    --bs-btn-hover-bg: var(--t-surface-3);
    --bs-btn-hover-border-color: var(--t-border-strong);
    --bs-btn-active-color: var(--t-text);
    --bs-btn-active-bg: var(--t-surface-3);
    --bs-btn-active-border-color: var(--t-border-strong);
    --bs-btn-disabled-color: var(--t-text-faint);
    --bs-btn-disabled-bg: var(--t-surface-2);
    --bs-btn-disabled-border-color: var(--t-border);
}
/* .btn-dark = botón de énfasis: se invierte respecto al lienzo, por lo que en
   oscuro queda claro. Legible en ambos temas y coherente con .text-bg-dark. */
.btn-dark {
    --bs-btn-color: var(--t-text-invert);
    --bs-btn-bg: var(--t-text);
    --bs-btn-border-color: var(--t-text);
    --bs-btn-hover-color: var(--t-text-invert);
    --bs-btn-hover-bg: var(--t-text-muted);
    --bs-btn-hover-border-color: var(--t-text-muted);
    --bs-btn-active-color: var(--t-text-invert);
    --bs-btn-active-bg: var(--t-text-muted);
    --bs-btn-active-border-color: var(--t-text-muted);
    --bs-btn-disabled-color: var(--t-text-invert);
    --bs-btn-disabled-bg: var(--t-text-muted);
    --bs-btn-disabled-border-color: var(--t-text-muted);
}

/* ───────────────────────────────────────────────────────────────────────────
   2.3 Variantes de contorno — fondo transparente, relleno suave al pasar
   ─────────────────────────────────────────────────────────────────────────── */
.btn-outline-primary {
    --bs-btn-color: var(--t-primary);
    --bs-btn-border-color: var(--t-primary);
    --bs-btn-bg: transparent;
    --bs-btn-hover-color: var(--t-primary);
    --bs-btn-hover-bg: var(--t-primary-soft);
    --bs-btn-hover-border-color: var(--t-primary);
    --bs-btn-active-color: var(--t-primary-contrast);
    --bs-btn-active-bg: var(--t-primary);
    --bs-btn-active-border-color: var(--t-primary);
    --bs-btn-disabled-color: var(--t-text-faint);
    --bs-btn-disabled-border-color: var(--t-border);
}
.btn-outline-secondary {
    --bs-btn-color: var(--t-text-muted);
    --bs-btn-border-color: var(--t-border-strong);
    --bs-btn-bg: transparent;
    --bs-btn-hover-color: var(--t-text);
    --bs-btn-hover-bg: var(--t-surface-3);
    --bs-btn-hover-border-color: var(--t-border-strong);
    --bs-btn-active-color: var(--t-text);
    --bs-btn-active-bg: var(--t-surface-3);
    --bs-btn-active-border-color: var(--t-border-strong);
    --bs-btn-disabled-color: var(--t-text-faint);
    --bs-btn-disabled-border-color: var(--t-border);
}
.btn-outline-success {
    --bs-btn-color: var(--t-success);
    --bs-btn-border-color: var(--t-success);
    --bs-btn-bg: transparent;
    --bs-btn-hover-color: var(--t-success);
    --bs-btn-hover-bg: var(--t-success-soft);
    --bs-btn-hover-border-color: var(--t-success);
    --bs-btn-active-color: var(--t-text-invert);
    --bs-btn-active-bg: var(--t-success);
    --bs-btn-active-border-color: var(--t-success);
    --bs-btn-disabled-color: var(--t-text-faint);
    --bs-btn-disabled-border-color: var(--t-border);
}
.btn-outline-danger {
    --bs-btn-color: var(--t-danger);
    --bs-btn-border-color: var(--t-danger);
    --bs-btn-bg: transparent;
    --bs-btn-hover-color: var(--t-danger);
    --bs-btn-hover-bg: var(--t-danger-soft);
    --bs-btn-hover-border-color: var(--t-danger);
    --bs-btn-active-color: var(--t-text-invert);
    --bs-btn-active-bg: var(--t-danger);
    --bs-btn-active-border-color: var(--t-danger);
    --bs-btn-disabled-color: var(--t-text-faint);
    --bs-btn-disabled-border-color: var(--t-border);
}
.btn-outline-warning {
    --bs-btn-color: var(--t-warning);
    --bs-btn-border-color: var(--t-warning);
    --bs-btn-bg: transparent;
    --bs-btn-hover-color: var(--t-warning);
    --bs-btn-hover-bg: var(--t-warning-soft);
    --bs-btn-hover-border-color: var(--t-warning);
    --bs-btn-active-color: var(--t-text-invert);
    --bs-btn-active-bg: var(--t-warning);
    --bs-btn-active-border-color: var(--t-warning);
    --bs-btn-disabled-color: var(--t-text-faint);
    --bs-btn-disabled-border-color: var(--t-border);
}
.btn-outline-info {
    --bs-btn-color: var(--t-info);
    --bs-btn-border-color: var(--t-info);
    --bs-btn-bg: transparent;
    --bs-btn-hover-color: var(--t-info);
    --bs-btn-hover-bg: var(--t-info-soft);
    --bs-btn-hover-border-color: var(--t-info);
    --bs-btn-active-color: var(--t-text-invert);
    --bs-btn-active-bg: var(--t-info);
    --bs-btn-active-border-color: var(--t-info);
    --bs-btn-disabled-color: var(--t-text-faint);
    --bs-btn-disabled-border-color: var(--t-border);
}
.btn-outline-dark {
    --bs-btn-color: var(--t-text);
    --bs-btn-border-color: var(--t-border-strong);
    --bs-btn-bg: transparent;
    --bs-btn-hover-color: var(--t-text-invert);
    --bs-btn-hover-bg: var(--t-text);
    --bs-btn-hover-border-color: var(--t-text);
    --bs-btn-active-color: var(--t-text-invert);
    --bs-btn-active-bg: var(--t-text);
    --bs-btn-active-border-color: var(--t-text);
    --bs-btn-disabled-color: var(--t-text-faint);
    --bs-btn-disabled-border-color: var(--t-border);
}
.btn-outline-light {
    --bs-btn-color: var(--t-text-muted);
    --bs-btn-border-color: var(--t-border);
    --bs-btn-bg: transparent;
    --bs-btn-hover-color: var(--t-text);
    --bs-btn-hover-bg: var(--t-surface-2);
    --bs-btn-hover-border-color: var(--t-border-strong);
    --bs-btn-active-color: var(--t-text);
    --bs-btn-active-bg: var(--t-surface-3);
    --bs-btn-active-border-color: var(--t-border-strong);
    --bs-btn-disabled-color: var(--t-text-faint);
    --bs-btn-disabled-border-color: var(--t-border);
}

/* ───────────────────────────────────────────────────────────────────────────
   2.4 Enlace
   ─────────────────────────────────────────────────────────────────────────── */
.btn-link {
    --bs-btn-color: var(--t-primary);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--t-primary-hover);
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--t-primary-hover);
    --bs-btn-disabled-color: var(--t-text-faint);
    text-decoration: none;
}
.btn-link:hover {
    text-decoration: underline;
}


/* ═══════════════════════════════════════════════════════════════════════════
   3. MODALES
   elegante.css fija `border:none`, sombra propia y `.modal-title` en #1a1a1a.
   ═══════════════════════════════════════════════════════════════════════════ */
.modal-content {
    background-color: var(--t-surface) !important;
    border: 1px solid var(--t-border) !important;
    border-radius: var(--t-radius-lg) !important;
    box-shadow: var(--t-shadow-lg) !important;
    color: var(--t-text) !important;
}

.modal-header {
    background-color: var(--t-surface-2) !important;
    border-bottom: 1px solid var(--t-border) !important;
    color: var(--t-text) !important;
}
.modal-title {
    color: var(--t-text) !important;
}

.modal-body {
    background-color: var(--t-surface) !important;
    color: var(--t-text) !important;
}

.modal-footer {
    background-color: var(--t-surface-2) !important;
    border-top: 1px solid var(--t-border) !important;
    color: var(--t-text) !important;
}

/* El velo pesa más en oscuro para separar el modal del fondo.
   Negro + opacidad = superposición (mecanismo propio de Bootstrap), no un
   color de la paleta. */
.modal-backdrop {
    --bs-backdrop-bg: #000;
    --bs-backdrop-opacity: 0.5;
}
[data-tema="dark"] .modal-backdrop {
    --bs-backdrop-opacity: 0.7;
}

/* Botón de cerrar: el icono de Bootstrap es un SVG negro. En oscuro se
   invierte para que sea visible sobre la cabecera. */
.btn-close {
    border-radius: var(--t-radius-sm) !important;
    box-shadow: none !important;
    opacity: 0.6;
    transition: var(--t-transition);
}
.btn-close:hover {
    opacity: 1;
    background-color: var(--t-surface-3);
}
.btn-close:focus,
.btn-close:focus-visible {
    box-shadow: var(--t-ring) !important;
    opacity: 1;
    outline: 0 !important;
}
[data-tema="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}
/* .btn-close-white ya viene invertido en el marcado: en oscuro la regla de
   arriba lo cubre, así que aquí solo se evita una doble inversión. */
[data-tema="dark"] .btn-close.btn-close-white {
    filter: invert(1) grayscale(100%) brightness(200%);
}


/* ═══════════════════════════════════════════════════════════════════════════
   4. DROPDOWNS GENÉRICOS (fuera del navbar)
   Los del navbar los cubre tema.css con `.navegador-superior .dropdown-menu`,
   de mayor especificidad: estas reglas no le pisan.
   ═══════════════════════════════════════════════════════════════════════════ */
.dropdown-menu {
    --bs-dropdown-bg: var(--t-surface);
    --bs-dropdown-color: var(--t-text);
    --bs-dropdown-border-color: var(--t-border);
    --bs-dropdown-border-radius: var(--t-radius);
    --bs-dropdown-link-color: var(--t-text);
    --bs-dropdown-link-hover-color: var(--t-primary);
    --bs-dropdown-link-hover-bg: var(--t-primary-soft);
    --bs-dropdown-link-active-color: var(--t-primary);
    --bs-dropdown-link-active-bg: var(--t-primary-soft);
    --bs-dropdown-link-disabled-color: var(--t-text-faint);
    --bs-dropdown-header-color: var(--t-text-muted);
    --bs-dropdown-divider-bg: var(--t-border);
    background-color: var(--t-surface) !important;
    border: 1px solid var(--t-border) !important;
    border-radius: var(--t-radius) !important;
    box-shadow: var(--t-shadow-lg) !important;
    color: var(--t-text) !important;
    padding: 0.3rem !important;
}

.dropdown-item {
    border-radius: var(--t-radius-sm) !important;
    color: var(--t-text) !important;
    transition: var(--t-transition) !important;
}
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--t-primary-soft) !important;
    color: var(--t-primary) !important;
    transform: none !important;
}
.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--t-primary-soft) !important;
    color: var(--t-primary) !important;
}
.dropdown-item.disabled,
.dropdown-item:disabled {
    background-color: transparent !important;
    color: var(--t-text-faint) !important;
}

.dropdown-divider {
    border-top: 1px solid var(--t-border) !important;
    opacity: 1 !important;
}
.dropdown-header {
    color: var(--t-text-muted) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   5. BADGES
   Nota: .dash-badge y sus variantes (.badge-success, .badge-danger,
   .badge-warning, .badge-info, .badge-muted, .badge-dark) pertenecen al
   dashboard (scripts/index.js + elegante.css) y NO se tocan aquí.
   ═══════════════════════════════════════════════════════════════════════════ */
.badge {
    border-radius: var(--t-radius-sm) !important;
    font-weight: 600 !important;
    border: 1px solid transparent;
}

/* Bootstrap resuelve .text-bg-* y .bg-* con las --bs-*-rgb por defecto, que
   tema.css no remapea: quedan fuera de la paleta (y .bg-warning llega a
   pintar texto blanco sobre amarillo). Se rehacen con los tokens. */
.badge.text-bg-primary,
.badge.bg-primary,
.text-bg-primary {
    background-color: var(--t-primary) !important;
    color: var(--t-primary-contrast) !important;
    border-color: var(--t-primary) !important;
}
.badge.text-bg-success,
.badge.bg-success,
.text-bg-success {
    background-color: var(--t-success) !important;
    color: var(--t-text-invert) !important;
    border-color: var(--t-success) !important;
}
.badge.text-bg-danger,
.badge.bg-danger,
.text-bg-danger {
    background-color: var(--t-danger) !important;
    color: var(--t-text-invert) !important;
    border-color: var(--t-danger) !important;
}
.badge.text-bg-warning,
.badge.bg-warning,
.text-bg-warning {
    background-color: var(--t-warning) !important;
    color: var(--t-text-invert) !important;
    border-color: var(--t-warning) !important;
}
.badge.text-bg-info,
.badge.bg-info,
.text-bg-info {
    background-color: var(--t-info) !important;
    color: var(--t-text-invert) !important;
    border-color: var(--t-info) !important;
}
/* Neutro: chip discreto, con borde para que no se funda con la superficie */
.badge.text-bg-secondary,
.badge.bg-secondary,
.text-bg-secondary {
    background-color: var(--t-surface-3) !important;
    color: var(--t-text) !important;
    border-color: var(--t-border-strong) !important;
}
.badge.text-bg-light,
.badge.bg-light,
.text-bg-light {
    background-color: var(--t-surface-2) !important;
    color: var(--t-text) !important;
    border-color: var(--t-border) !important;
}
/* Énfasis: se invierte respecto al lienzo (en oscuro, por tanto, aclara) */
.badge.text-bg-dark,
.badge.bg-dark,
.text-bg-dark {
    background-color: var(--t-text) !important;
    color: var(--t-text-invert) !important;
    border-color: var(--t-text) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   6. SWEETALERT2
   cascade.css lo deja en var(--white) con botones en degradado y elegante.css
   le añade su propia sombra: en oscuro el popup quedaba blanco.
   ═══════════════════════════════════════════════════════════════════════════ */
.swal2-popup {
    background: var(--t-surface) !important;
    border: 1px solid var(--t-border) !important;
    border-radius: var(--t-radius-lg) !important;
    box-shadow: var(--t-shadow-lg) !important;
    color: var(--t-text) !important;
}

.swal2-title {
    color: var(--t-text) !important;
}
.swal2-html-container,
.swal2-content {
    color: var(--t-text-muted) !important;
}
.swal2-footer {
    border-top: 1px solid var(--t-border) !important;
    color: var(--t-text-muted) !important;
}
.swal2-timer-progress-bar {
    background: var(--t-accent) !important;
}

/* Velo — SweetAlert2 lo pinta sobre el propio contenedor
   (`div:where(.swal2-container).swal2-backdrop-show|.swal2-noanimation`);
   cascade.css apunta a `.swal2-backdrop`, que en la v11 ya no existe. */
.swal2-container.swal2-backdrop-show,
.swal2-container.swal2-noanimation,
.swal2-backdrop {
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(2px) !important;
}
[data-tema="dark"] .swal2-container.swal2-backdrop-show,
[data-tema="dark"] .swal2-container.swal2-noanimation,
[data-tema="dark"] .swal2-backdrop {
    background: rgba(0, 0, 0, 0.7) !important;
}

/* Botones: planos, sin degradado ni desplazamiento */
.swal2-actions {
    gap: 0.5rem !important;
}
.swal2-styled {
    box-shadow: none !important;
    border-radius: var(--t-radius-sm) !important;
    transition: var(--t-transition) !important;
}
.swal2-styled:focus,
.swal2-styled:focus-visible {
    box-shadow: var(--t-ring) !important;
    outline: 0 !important;
}

.swal2-confirm {
    background: var(--t-primary) !important;
    background-image: none !important;
    border: 1px solid var(--t-primary) !important;
    border-radius: var(--t-radius-sm) !important;
    box-shadow: none !important;
    color: var(--t-primary-contrast) !important;
}
.swal2-confirm:hover {
    background: var(--t-primary-hover) !important;
    background-image: none !important;
    border-color: var(--t-primary-hover) !important;
    box-shadow: none !important;
    transform: none !important;
}

.swal2-cancel {
    background: var(--t-surface-2) !important;
    background-image: none !important;
    border: 1px solid var(--t-border-strong) !important;
    border-radius: var(--t-radius-sm) !important;
    box-shadow: none !important;
    color: var(--t-text) !important;
}
.swal2-cancel:hover {
    background: var(--t-surface-3) !important;
    background-image: none !important;
    box-shadow: none !important;
    transform: none !important;
}

/* .swal2-deny se usa como botón destructivo (confirmar eliminación) */
.swal2-deny {
    background: var(--t-danger) !important;
    background-image: none !important;
    border: 1px solid var(--t-danger) !important;
    border-radius: var(--t-radius-sm) !important;
    box-shadow: none !important;
    color: var(--t-text-invert) !important;
}
.swal2-deny:hover {
    background: var(--t-danger) !important;
    background-image: linear-gradient(rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.14)) !important;
    box-shadow: none !important;
    transform: none !important;
}
[data-tema="dark"] .swal2-deny:hover {
    background-image: linear-gradient(rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.14)) !important;
}

/* Campos dentro del popup */
.swal2-input,
.swal2-textarea,
.swal2-select,
.swal2-file {
    background: var(--t-surface) !important;
    border: 1px solid var(--t-border) !important;
    border-radius: var(--t-radius-sm) !important;
    box-shadow: none !important;
    color: var(--t-text) !important;
}
.swal2-input:focus,
.swal2-textarea:focus,
.swal2-select:focus,
.swal2-file:focus {
    border-color: var(--t-primary) !important;
    box-shadow: var(--t-ring) !important;
    outline: 0 !important;
}
.swal2-input::placeholder,
.swal2-textarea::placeholder {
    color: var(--t-text-muted) !important;
    opacity: 1 !important;
}
.swal2-input-label,
.swal2-label,
.swal2-checkbox,
.swal2-radio {
    color: var(--t-text) !important;
}
.swal2-checkbox,
.swal2-radio {
    background: transparent !important;
}
.swal2-validation-message {
    background: var(--t-danger-soft) !important;
    border-radius: var(--t-radius-sm) !important;
    color: var(--t-danger) !important;
}
.swal2-inputerror {
    border-color: var(--t-danger) !important;
}

/* Cerrar */
.swal2-close {
    border-radius: var(--t-radius-sm) !important;
    color: var(--t-text-muted) !important;
    transition: var(--t-transition) !important;
}
.swal2-close:hover {
    background: var(--t-surface-3) !important;
    color: var(--t-danger) !important;
}
.swal2-close:focus {
    box-shadow: var(--t-ring) !important;
    outline: 0 !important;
}

/* Iconos: se alinean con los tokens semánticos */
.swal2-icon.swal2-success {
    border-color: var(--t-success) !important;
    color: var(--t-success) !important;
}
.swal2-icon.swal2-success .swal2-success-ring {
    border-color: var(--t-success-soft) !important;
}
.swal2-icon.swal2-success [class^="swal2-success-line"] {
    background-color: var(--t-success) !important;
}
.swal2-icon.swal2-error {
    border-color: var(--t-danger) !important;
    color: var(--t-danger) !important;
}
.swal2-icon.swal2-error [class^="swal2-x-mark-line"] {
    background-color: var(--t-danger) !important;
}
.swal2-icon.swal2-warning {
    border-color: var(--t-warning) !important;
    color: var(--t-warning) !important;
}
.swal2-icon.swal2-info {
    border-color: var(--t-info) !important;
    color: var(--t-info) !important;
}
.swal2-icon.swal2-question {
    border-color: var(--t-accent) !important;
    color: var(--t-accent) !important;
}
/* El círculo de "éxito" tapa las líneas con el color del popup */
.swal2-icon.swal2-success .swal2-success-fix,
.swal2-icon.swal2-success [class^="swal2-success-circular-line"] {
    background-color: var(--t-surface) !important;
}

/* Toast */
.swal2-popup.swal2-toast {
    background: var(--t-surface) !important;
    border: 1px solid var(--t-border) !important;
    border-radius: var(--t-radius) !important;
    box-shadow: var(--t-shadow-md) !important;
    color: var(--t-text) !important;
}
.swal2-popup.swal2-toast .swal2-title {
    color: var(--t-text) !important;
}
.swal2-popup.swal2-toast .swal2-html-container {
    color: var(--t-text-muted) !important;
}
.swal2-popup.swal2-toast .swal2-close {
    color: var(--t-text-muted) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   7. CHOICES.JS
   choices-custom.css usa #ffffff / #212529 / #222222 / #2563EB fijos y
   elegante.css marca `.is-highlighted` con !important (especificidad 0-3-0,
   igualada más abajo).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Caja visible (equivale a un .form-control) */
.choices__inner {
    background-color: var(--t-surface) !important;
    border: 1px solid var(--t-border) !important;
    border-radius: var(--t-radius-sm) !important;
    color: var(--t-text) !important;
    transition: var(--t-transition) !important;
}
.choices:hover:not(.is-disabled) .choices__inner {
    border-color: var(--t-border-strong) !important;
}
.is-focused .choices__inner,
.is-open .choices__inner {
    background-color: var(--t-surface) !important;
    border-color: var(--t-primary) !important;
    box-shadow: var(--t-ring) !important;
    outline: 0 !important;
}
.choices.is-disabled .choices__inner,
.choices.is-disabled .choices__input {
    background-color: var(--t-surface-3) !important;
    color: var(--t-text-muted) !important;
}

/* Lista desplegable */
.choices__list--dropdown,
.choices__list[aria-expanded] {
    background-color: var(--t-surface) !important;
    border: 1px solid var(--t-border) !important;
    border-radius: var(--t-radius-sm) !important;
    box-shadow: var(--t-shadow-lg) !important;
    color: var(--t-text) !important;
}
.is-open .choices__list--dropdown,
.is-open .choices__list[aria-expanded] {
    border-color: var(--t-primary) !important;
}

/* Opciones */
.choices__list--dropdown .choices__item,
.choices__list[aria-expanded] .choices__item {
    background-color: transparent !important;
    color: var(--t-text) !important;
}
.choices__list--dropdown .choices__item--selectable:hover,
.choices__list[aria-expanded] .choices__item--selectable:hover,
.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
    background-color: var(--t-primary-soft) !important;
    color: var(--t-primary) !important;
}
.choices__list--dropdown .choices__item--disabled,
.choices__item--disabled {
    color: var(--t-text-faint) !important;
    opacity: 1 !important;
}
.choices__heading {
    border-bottom: 1px solid var(--t-border) !important;
    color: var(--t-text-muted) !important;
}

/* Selección simple y etiquetas de selección múltiple */
.choices__list--single .choices__item {
    color: var(--t-text) !important;
}
.choices__list--multiple .choices__item {
    background-color: var(--t-primary-soft) !important;
    border: 1px solid var(--t-primary) !important;
    border-radius: var(--t-radius-sm) !important;
    color: var(--t-primary) !important;
}
.choices__list--multiple .choices__item.is-highlighted {
    background-color: var(--t-primary) !important;
    border-color: var(--t-primary) !important;
    color: var(--t-primary-contrast) !important;
}

/* Campo de búsqueda interno */
.choices__input,
.choices[data-type*="select-one"] .choices__input {
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--t-text) !important;
}
.choices[data-type*="select-one"] .choices__input {
    background-color: var(--t-surface-2) !important;
    border-bottom: 1px solid var(--t-border) !important;
}
.choices__input::placeholder {
    color: var(--t-text-muted) !important;
    opacity: 1 !important;
}
/* cascade.css lo deja en #a0a0a0, cursiva y opacidad 0.6 */
.choices__placeholder {
    color: var(--t-text-muted) !important;
    font-style: normal !important;
    opacity: 1 !important;
}

/* Botón de quitar etiqueta: el aspa de Choices es un SVG oscuro */
.choices__button {
    opacity: 0.6 !important;
}
.choices__button:hover,
.choices__button:focus {
    opacity: 1 !important;
}
[data-tema="dark"] .choices__button {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Validación */
.choices.is-invalid .choices__inner,
.was-validated .choices.is-invalid .choices__inner {
    border-color: var(--t-danger) !important;
}
.choices.is-invalid.is-focused .choices__inner,
.choices.is-invalid .choices__inner:focus {
    border-color: var(--t-danger) !important;
    box-shadow: 0 0 0 3px var(--t-danger-soft) !important;
}
.choices.is-valid .choices__inner,
.was-validated .choices.is-valid .choices__inner {
    border-color: var(--t-success) !important;
}
.choices.is-valid.is-focused .choices__inner,
.choices.is-valid .choices__inner:focus {
    border-color: var(--t-success) !important;
    box-shadow: 0 0 0 3px var(--t-success-soft) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   8. TOOLTIPS Y POPOVERS (Bootstrap)
   El sistema usa Tippy.js (data-tippy-content) y no llega a instanciar los de
   Bootstrap; se dejan tematizados por si se añaden.
   ═══════════════════════════════════════════════════════════════════════════ */
.tooltip {
    --bs-tooltip-bg: var(--t-text);
    --bs-tooltip-color: var(--t-text-invert);
    --bs-tooltip-border-radius: var(--t-radius-sm);
    --bs-tooltip-opacity: 1;
}
.tooltip-inner {
    background-color: var(--t-text) !important;
    border-radius: var(--t-radius-sm) !important;
    color: var(--t-text-invert) !important;
    box-shadow: var(--t-shadow-md) !important;
}
.tooltip .tooltip-arrow::before {
    border-top-color: var(--t-text) !important;
    border-bottom-color: var(--t-text) !important;
    border-left-color: var(--t-text) !important;
    border-right-color: var(--t-text) !important;
}

.popover {
    --bs-popover-bg: var(--t-surface);
    --bs-popover-color: var(--t-text);
    --bs-popover-border-color: var(--t-border);
    --bs-popover-border-radius: var(--t-radius);
    --bs-popover-header-bg: var(--t-surface-2);
    --bs-popover-header-color: var(--t-text);
    --bs-popover-body-color: var(--t-text-muted);
    background-color: var(--t-surface) !important;
    border: 1px solid var(--t-border) !important;
    box-shadow: var(--t-shadow-lg) !important;
}
.popover-header {
    background-color: var(--t-surface-2) !important;
    border-bottom: 1px solid var(--t-border) !important;
    color: var(--t-text) !important;
}
.popover-body {
    color: var(--t-text-muted) !important;
}