/* ==========================================================================
   Tema CAAP: Bootstrap 5.3 + AdminLTE 4 con estilo tipo shadcn/ui
   --------------------------------------------------------------------------
   Se carga AL FINAL de librerias.php (y en login.php). Sobrescribe AdminLTE,
   Bootstrap, plugins y los estilos heredados de style.css.

   Paleta (del logo):
     steel  -> acero del contenedor  (#52718E = 500, #466C89 = 600)
     cyan   -> letras "CAAP"         (#61CBF3 = 400)  ¡no usar con texto blanco!

   Índice
     1. Tokens
     2. Base
     3. Botones
     4. Formularios
     5. Cards, alerts, badges, dropdowns, tooltips
     6. Modales
     7. Tablas y DataTables
     8. Pestañas
     9. Cascarón: barra superior, mega‑menú, menú móvil, buscador Ctrl+K
    10. Páginas: encabezado de módulo, Regresar, Inicio, cards
    11. Componentes reutilizables (buscador, card de tabla, estado vacío)
    12. Permisos (Control de usuarios)
    13. Loader
    14. Animaciones
    15. Compatibilidad Bootstrap 4 y utilidades
   ========================================================================== */


/* ==========================================================================
   1. Tokens
   ========================================================================== */
:root {
    /* Escalas de marca */
    --caap-steel-50: #f3f6f9;
    --caap-steel-100: #e4eaf0;
    --caap-steel-200: #c9d5e0;
    --caap-steel-300: #a2b5c7;
    --caap-steel-400: #7792ab;
    --caap-steel-500: #52718e;
    --caap-steel-600: #466c89;
    --caap-steel-700: #375670;
    --caap-steel-800: #2a4257;
    --caap-steel-900: #1d2e3e;
    --caap-steel-950: #121d28;
    --caap-navy: #0f1b26;

    --caap-cyan-50: #eefafe;
    --caap-cyan-100: #d6f2fc;
    --caap-cyan-300: #85d8f6;
    --caap-cyan-400: #61cbf3;
    --caap-cyan-500: #2fb5e8;

    /* Semánticos */
    --caap-bg: #f4f6f8;
    --caap-surface: #ffffff;
    --caap-subtle: #f8fafb;
    --caap-fg: #0e1a24;
    --caap-muted: #4f5f6f;
    --caap-faint: #8696a6;
    --caap-border: #dfe5eb;
    --caap-input: #cdd6df;
    --caap-primary: var(--caap-steel-600);
    --caap-primary-hover: var(--caap-steel-700);
    --caap-primary-active: var(--caap-steel-800);
    --caap-ring: rgb(82 113 142 / 0.28);
    --caap-success: #15803d;
    --caap-danger: #dc2626;
    --caap-warning: #f59e0b;

    --caap-radius-sm: 0.375rem;
    --caap-radius: 0.5rem;
    --caap-radius-lg: 0.75rem;
    --caap-shadow-xs: 0 1px 2px rgb(16 24 40 / 0.05);
    --caap-shadow-sm: 0 1px 3px rgb(16 24 40 / 0.07), 0 1px 2px rgb(16 24 40 / 0.04);
    --caap-shadow-md: 0 6px 16px -4px rgb(16 24 40 / 0.1), 0 2px 4px -2px rgb(16 24 40 / 0.05);
    --caap-shadow-lg: 0 16px 40px -8px rgb(16 24 40 / 0.18);

    --caap-ease: cubic-bezier(0.2, 0, 0, 1);

    /* Bootstrap 5.3 */
    --bs-font-sans-serif: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: 0.9375rem;
    --bs-body-line-height: 1.5;
    --bs-body-color: var(--caap-fg);
    --bs-body-color-rgb: 14, 26, 36;
    --bs-body-bg: var(--caap-bg);
    --bs-emphasis-color: var(--caap-fg);
    --bs-heading-color: var(--caap-fg);
    --bs-secondary-color: var(--caap-muted);
    --bs-tertiary-bg: var(--caap-subtle);
    --bs-border-color: var(--caap-border);
    --bs-border-color-translucent: rgb(16 24 40 / 0.1);
    --bs-border-radius: var(--caap-radius);
    --bs-border-radius-sm: var(--caap-radius-sm);
    --bs-border-radius-lg: var(--caap-radius-lg);
    --bs-primary: #466c89;
    --bs-primary-rgb: 70, 108, 137;
    --bs-primary-text-emphasis: var(--caap-steel-800);
    --bs-primary-bg-subtle: var(--caap-steel-50);
    --bs-primary-border-subtle: var(--caap-steel-200);
    --bs-info: #61cbf3;
    --bs-info-rgb: 97, 203, 243;
    --bs-success: #15803d;
    --bs-success-rgb: 21, 128, 61;
    --bs-danger: #dc2626;
    --bs-danger-rgb: 220, 38, 38;
    --bs-link-color: var(--caap-steel-600);
    --bs-link-color-rgb: 70, 108, 137;
    --bs-link-hover-color: var(--caap-steel-800);
    --bs-link-hover-color-rgb: 42, 66, 87;
    --bs-focus-ring-color: var(--caap-ring);

    /* AdminLTE 4 */
    --lte-sidebar-width: 264px;
}


/* ==========================================================================
   2. Base
   ========================================================================== */
body {
    background: var(--caap-bg) !important; /* style.css usa !important */
    font-family: var(--bs-body-font-family);
    font-size: var(--bs-body-font-size);
    color: var(--caap-fg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--caap-fg) !important;
    letter-spacing: -0.015em;
}

a {
    color: var(--bs-link-color);
    text-decoration: none;
}

a:hover {
    color: var(--bs-link-hover-color);
}

hr {
    border: 0 !important;
    border-top: 1px solid var(--caap-border) !important;
    background: none !important;
    box-shadow: none !important;
    opacity: 1;
}

::selection {
    color: var(--caap-steel-950);
    background: var(--caap-cyan-100);
}

:focus-visible {
    outline: 2px solid var(--caap-steel-500);
    outline-offset: 2px;
}

.text-muted,
.text-body-secondary {
    color: var(--caap-muted) !important;
}

.bg-success {
    background-color: var(--caap-success) !important; /* style.css lo dejaba en verde neón */
}


/* ==========================================================================
   3. Botones (variantes estilo shadcn sobre las clases de Bootstrap)
   ========================================================================== */
.btn {
    --bs-btn-padding-x: 0.9375rem;
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-font-size: 0.9375rem;
    --bs-btn-font-weight: 700; /* Lato no tiene 500/600 */
    --bs-btn-line-height: 1.25rem;
    --bs-btn-border-radius: var(--caap-radius-sm);
    --bs-btn-focus-box-shadow: 0 0 0 3px var(--caap-ring);
    --bs-btn-disabled-opacity: 0.5;
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x); /* style.css fija 5px 10px */
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease,
                box-shadow 0.15s ease, transform 0.1s var(--caap-ease);
}

.btn:active:not(:disabled):not(.disabled) {
    transform: scale(0.97);
}

.btn-sm {
    --bs-btn-padding-x: 0.6875rem;
    --bs-btn-padding-y: 0.3125rem;
    --bs-btn-font-size: 0.875rem;
    --bs-btn-line-height: 1.25rem;
}

.btn-lg {
    --bs-btn-padding-x: 1.25rem;
    --bs-btn-padding-y: 0.625rem;
    --bs-btn-font-size: 1rem;
    --bs-btn-border-radius: var(--caap-radius);
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--caap-primary);
    --bs-btn-border-color: var(--caap-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--caap-primary-hover);
    --bs-btn-hover-border-color: var(--caap-primary-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--caap-primary-active);
    --bs-btn-active-border-color: var(--caap-primary-active);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--caap-primary);
    --bs-btn-disabled-border-color: var(--caap-primary);
    box-shadow: var(--caap-shadow-xs), inset 0 1px 0 rgb(255 255 255 / 0.12);
}

.btn-secondary {
    --bs-btn-color: var(--caap-steel-900);
    --bs-btn-bg: var(--caap-steel-100);
    --bs-btn-border-color: var(--caap-steel-100);
    --bs-btn-hover-color: var(--caap-steel-950);
    --bs-btn-hover-bg: var(--caap-steel-200);
    --bs-btn-hover-border-color: var(--caap-steel-200);
    --bs-btn-active-color: var(--caap-steel-950);
    --bs-btn-active-bg: var(--caap-steel-200);
    --bs-btn-active-border-color: var(--caap-steel-300);
    --bs-btn-disabled-color: var(--caap-steel-700);
    --bs-btn-disabled-bg: var(--caap-steel-100);
    --bs-btn-disabled-border-color: var(--caap-steel-100);
}

.btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--caap-success);
    --bs-btn-border-color: var(--caap-success);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #166534;
    --bs-btn-hover-border-color: #166534;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #14532d;
    --bs-btn-active-border-color: #14532d;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--caap-success);
    --bs-btn-disabled-border-color: var(--caap-success);
    box-shadow: var(--caap-shadow-xs), inset 0 1px 0 rgb(255 255 255 / 0.12);
}

.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--caap-danger);
    --bs-btn-border-color: var(--caap-danger);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #b91c1c;
    --bs-btn-hover-border-color: #b91c1c;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #991b1b;
    --bs-btn-active-border-color: #991b1b;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--caap-danger);
    --bs-btn-disabled-border-color: var(--caap-danger);
    box-shadow: var(--caap-shadow-xs), inset 0 1px 0 rgb(255 255 255 / 0.12);
}

.btn-warning {
    --bs-btn-color: #3b2604;
    --bs-btn-bg: #fbbf24;
    --bs-btn-border-color: #fbbf24;
    --bs-btn-hover-color: #3b2604;
    --bs-btn-hover-bg: var(--caap-warning);
    --bs-btn-hover-border-color: var(--caap-warning);
    --bs-btn-active-color: #3b2604;
    --bs-btn-active-bg: #d97706;
    --bs-btn-active-border-color: #d97706;
    --bs-btn-disabled-color: #3b2604;
    --bs-btn-disabled-bg: #fbbf24;
    --bs-btn-disabled-border-color: #fbbf24;
}

.btn-info {
    --bs-btn-color: var(--caap-steel-950);
    --bs-btn-bg: var(--caap-cyan-400);
    --bs-btn-border-color: var(--caap-cyan-400);
    --bs-btn-hover-color: var(--caap-steel-950);
    --bs-btn-hover-bg: var(--caap-cyan-300);
    --bs-btn-hover-border-color: var(--caap-cyan-300);
    --bs-btn-active-color: var(--caap-steel-950);
    --bs-btn-active-bg: var(--caap-cyan-500);
    --bs-btn-active-border-color: var(--caap-cyan-500);
    --bs-btn-disabled-color: var(--caap-steel-950);
    --bs-btn-disabled-bg: var(--caap-cyan-400);
    --bs-btn-disabled-border-color: var(--caap-cyan-400);
}

.btn-light,
.btn-default {
    --bs-btn-color: var(--caap-fg);
    --bs-btn-bg: var(--caap-surface);
    --bs-btn-border-color: var(--caap-input);
    --bs-btn-hover-color: var(--caap-fg);
    --bs-btn-hover-bg: var(--caap-steel-50);
    --bs-btn-hover-border-color: var(--caap-steel-300);
    --bs-btn-active-color: var(--caap-fg);
    --bs-btn-active-bg: var(--caap-steel-100);
    --bs-btn-active-border-color: var(--caap-steel-300);
    box-shadow: var(--caap-shadow-xs);
}

.btn-dark {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--caap-steel-900);
    --bs-btn-border-color: var(--caap-steel-900);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--caap-steel-950);
    --bs-btn-hover-border-color: var(--caap-steel-950);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--caap-steel-950);
    --bs-btn-active-border-color: var(--caap-steel-950);
}

/* "Outline" de shadcn: fondo blanco, borde gris, texto del color */
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-dark {
    --bs-btn-bg: var(--caap-surface);
    --bs-btn-border-color: var(--caap-input);
    --bs-btn-hover-bg: var(--caap-steel-50);
    --bs-btn-hover-border-color: var(--caap-steel-300);
    --bs-btn-active-bg: var(--caap-steel-100);
    --bs-btn-active-border-color: var(--caap-steel-300);
    --bs-btn-disabled-bg: var(--caap-surface);
    --bs-btn-disabled-border-color: var(--caap-input);
    box-shadow: var(--caap-shadow-xs);
}

.btn-outline-primary {
    --bs-btn-color: var(--caap-steel-700);
    --bs-btn-hover-color: var(--caap-steel-800);
    --bs-btn-active-color: var(--caap-steel-900);
    --bs-btn-disabled-color: var(--caap-steel-700);
}

.btn-outline-secondary,
.btn-outline-dark {
    --bs-btn-color: var(--caap-fg);
    --bs-btn-hover-color: var(--caap-fg);
    --bs-btn-active-color: var(--caap-fg);
    --bs-btn-disabled-color: var(--caap-muted);
}

.btn-outline-danger {
    --bs-btn-color: #b91c1c;
    --bs-btn-bg: var(--caap-surface);
    --bs-btn-border-color: #fecaca;
    --bs-btn-hover-color: #991b1b;
    --bs-btn-hover-bg: #fef2f2;
    --bs-btn-hover-border-color: #fca5a5;
    --bs-btn-active-color: #991b1b;
    --bs-btn-active-bg: #fee2e2;
    --bs-btn-active-border-color: #fca5a5;
    box-shadow: var(--caap-shadow-xs);
}

.btn-outline-success {
    --bs-btn-color: #166534;
    --bs-btn-bg: var(--caap-surface);
    --bs-btn-border-color: #bbf7d0;
    --bs-btn-hover-color: #14532d;
    --bs-btn-hover-bg: #f0fdf4;
    --bs-btn-hover-border-color: #86efac;
    --bs-btn-active-color: #14532d;
    --bs-btn-active-bg: #dcfce7;
    --bs-btn-active-border-color: #86efac;
}

/* Botón de solo ícono, sin fondo (lo usa el header) */
.btn-ghost {
    --bs-btn-color: var(--caap-muted);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--caap-fg);
    --bs-btn-hover-bg: var(--caap-steel-50);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--caap-fg);
    --bs-btn-active-bg: var(--caap-steel-100);
    --bs-btn-active-border-color: transparent;
}

.btn-icon {
    --bs-btn-padding-x: 0;
    --bs-btn-padding-y: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    font-size: 1.125rem;
}

.btn.disabled,
.btn:disabled {
    opacity: var(--bs-btn-disabled-opacity);
}

/* .close de Bootstrap 4 ya no existe en la 5: se mantiene por compatibilidad */
button.close {
    margin-left: auto;
    padding: 0.25rem 0.5rem;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--caap-muted);
    background: transparent;
    border: 0;
    border-radius: var(--caap-radius-sm);
    opacity: 1;
}

button.close:hover {
    color: var(--caap-fg);
    background: var(--caap-steel-50);
}

/* Cerrar / Cancelar un modal o formulario no es destructivo, pero ~70 venían en rojo
   (btn-danger con data-bs-dismiss o CierraModal). Se ven como secundario claro;
   el rojo queda solo para eliminar, rechazar o cancelar un registro. */
.btn-danger[data-bs-dismiss="modal"],
.btn-danger[onclick*="CierraModal"],
.btn-danger[onclick^="Cancelar("] {
    --bs-btn-color: var(--caap-fg);
    --bs-btn-bg: var(--caap-surface);
    --bs-btn-border-color: var(--caap-input);
    --bs-btn-hover-color: var(--caap-fg);
    --bs-btn-hover-bg: var(--caap-steel-50);
    --bs-btn-hover-border-color: var(--caap-steel-300);
    --bs-btn-active-color: var(--caap-fg);
    --bs-btn-active-bg: var(--caap-steel-100);
    --bs-btn-active-border-color: var(--caap-steel-300);
    box-shadow: var(--caap-shadow-xs);
}


/* ==========================================================================
   4. Formularios
   ========================================================================== */
label,
.form-label {
    margin-bottom: 0.375rem; /* Bootstrap 4 daba margen a todos los label */
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--caap-fg) !important;
}

.form-group {
    margin-bottom: 1rem;
}

.form-control,
.form-select {
    min-height: 2.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.9375rem;
    line-height: 1.375rem;
    color: var(--caap-fg);
    background-color: var(--caap-surface);
    border: 1px solid var(--caap-input);
    border-radius: var(--caap-radius-sm);
    box-shadow: var(--caap-shadow-xs);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input.form-control,
select.form-control,
.form-select {
    height: 2.5rem;
}

textarea.form-control {
    height: auto;
}

.form-control-sm,
.form-select-sm {
    min-height: 2rem;
    height: 2rem;
    padding: 0.25rem 0.625rem;
    font-size: 0.875rem;
}

.form-control::placeholder {
    color: var(--caap-faint);
}

.form-control:hover:not(:focus):not(:disabled):not([readonly]),
.form-select:hover:not(:focus):not(:disabled) {
    border-color: var(--caap-steel-300);
}

.form-control:focus,
.form-select:focus {
    color: var(--caap-fg);
    background-color: var(--caap-surface) !important;
    border-color: var(--caap-steel-400);
    box-shadow: 0 0 0 3px var(--caap-ring);
    outline: 0;
}

.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
    color: var(--caap-muted);
    background-color: var(--caap-subtle);
    border-color: var(--caap-border);
    box-shadow: none;
    opacity: 1;
}

.form-control.is-invalid,
.form-select.is-invalid {
    border-color: #f87171;
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    box-shadow: 0 0 0 3px rgb(220 38 38 / 0.18);
}

/* En Bootstrap 5 un <select class="form-control"> pierde la flecha: se recupera */
select.form-control:not([multiple]):not([size]) {
    padding-right: 2.25rem;
    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='%234f5f6f' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m4 6 4 4 4-4'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.625rem center;
    background-size: 14px 14px;
    appearance: none;
}

.form-check-input {
    border-color: var(--caap-input);
}

.form-check-input:checked {
    background-color: var(--caap-primary);
    border-color: var(--caap-primary);
}

.form-check-input:focus {
    border-color: var(--caap-steel-400);
    box-shadow: 0 0 0 3px var(--caap-ring);
}

.input-group-text,
.input-group-addon {
    display: flex;
    align-items: center;
    height: 2.5rem;
    padding: 0 0.75rem;
    font-size: 0.9375rem;
    color: var(--caap-muted);
    background: var(--caap-subtle);
    border: 1px solid var(--caap-input);
    border-radius: var(--caap-radius-sm);
}

.Requerido {
    color: var(--caap-danger);
}

/* Agrupadores de formulario usados en varios módulos: card con título, sin pastilla */
.Fieldset2 {
    padding: 1rem 1.25rem 1.25rem;
    background: var(--caap-surface);
    border: 1px solid var(--caap-border);
    border-radius: var(--caap-radius-lg);
    box-shadow: var(--caap-shadow-sm);
}

.Legend2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    float: left; /* con float (como Bootstrap 5) la leyenda queda dentro de la card, no sobre el borde */
    width: 100%;
    margin: 0 0 0.875rem;
    padding: 0;
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--caap-fg);
    background: none;
    border: 0;
    border-radius: 0;
}

.Legend2 .fa,
.Legend2 .fas,
.Legend2 .bi {
    color: var(--caap-steel-600);
}

/* Panel de filtros (caap-ui.js le pone .caap-filtros y arma el pie con los botones) */
.caap-filtros {
    margin-bottom: 1.25rem;
}

.caap-filtros label {
    margin-bottom: 0.375rem;
    font-size: 0.875rem;
}

.caap-filtros .row {
    --bs-gutter-x: 1rem;
    row-gap: 0.875rem;
    margin-bottom: 0.875rem;
}

.caap-filtros form > .row:last-child {
    margin-bottom: 0;
}

/* Etiqueta + gif de carga que algunos módulos ponen con floats */
.caap-filtros [class*="col-"] > div:has(> div[style*="float"]) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 1.5rem;
    margin-bottom: 0.375rem;
}

.caap-filtros [class*="col-"] > div > div[style*="float"] {
    float: none !important;
}

.caap-filtros [class*="col-"] > div > div[style*="float"] label {
    margin: 0;
}

/* Campos sueltos que copiaron el border-radius:0 de los buscadores */
.caap-filtros [class*="col-"] > .form-control[style*="radius"] {
    border-radius: var(--caap-radius-sm) !important;
}

.caap-filtros-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
    margin: 1.125rem -1.25rem -1.25rem;
    padding: 0.875rem 1.25rem;
    background: var(--caap-subtle);
    border-top: 1px solid var(--caap-border);
    border-radius: 0 0 var(--caap-radius-lg) var(--caap-radius-lg);
}

.caap-filtros-foot .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 2.375rem;
    padding: 0 1rem;
    font-weight: 700;
}

/* Limpiar venía en amarillo (btn-warning): es secundario */
.caap-filtros-foot .caap-filtros-secundario {
    --bs-btn-color: var(--caap-fg);
    --bs-btn-bg: var(--caap-surface);
    --bs-btn-border-color: var(--caap-input);
    --bs-btn-hover-color: var(--caap-fg);
    --bs-btn-hover-bg: var(--caap-steel-50);
    --bs-btn-hover-border-color: var(--caap-steel-300);
    --bs-btn-active-color: var(--caap-fg);
    --bs-btn-active-bg: var(--caap-steel-100);
    --bs-btn-active-border-color: var(--caap-steel-300);
}

.caap-filtros-foot .caap-filtros-aplicar {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--caap-primary);
    --bs-btn-border-color: var(--caap-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--caap-primary-hover);
    --bs-btn-hover-border-color: var(--caap-primary-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--caap-primary-active);
    --bs-btn-active-border-color: var(--caap-primary-active);
}

/* En tablet las columnas de Bootstrap (25%) dejaban los selects apretados:
   cada campo toma al menos 15rem y se acomodan solos */
@media (max-width: 991.98px) {
    .caap-filtros .row > [class*="col-"] {
        flex: 1 1 15rem;
        width: auto;
        max-width: 100%;
    }
}

/* Chosen (selects con buscador): mismo alto, borde y foco que un .form-control */
.chosen-container {
    width: 100% !important;
    font-size: 0.9375rem;
}

.chosen-container-single .chosen-single {
    height: 2.5rem;
    padding: 0 0 0 0.75rem;
    line-height: 2.375rem;
    color: var(--caap-fg);
    background: var(--caap-surface);
    border: 1px solid var(--caap-input);
    border-radius: var(--caap-radius-sm);
    box-shadow: var(--caap-shadow-xs);
}

.chosen-container-single .chosen-single span {
    margin-right: 2rem;
}

.chosen-container-single .chosen-default {
    color: var(--caap-faint);
}

.chosen-container-single .chosen-single div {
    width: 2rem;
}

.chosen-container-single .chosen-single div b,
.chosen-container-active.chosen-with-drop .chosen-single div b {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23466c89' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat center !important;
    background-size: 14px 14px !important;
}

.chosen-container-active .chosen-single,
.chosen-container-active.chosen-with-drop .chosen-single,
.chosen-container-active .chosen-choices {
    border-color: var(--caap-steel-400);
    box-shadow: 0 0 0 3px var(--caap-ring);
}

.chosen-container-active.chosen-with-drop .chosen-single {
    background: var(--caap-surface);
    border-radius: var(--caap-radius-sm) var(--caap-radius-sm) 0 0;
}

.chosen-container .chosen-drop {
    border-color: var(--caap-steel-400);
    border-radius: 0 0 var(--caap-radius-sm) var(--caap-radius-sm);
    box-shadow: var(--caap-shadow-md);
}

.chosen-container .chosen-search input[type="text"] {
    height: 2.25rem;
    padding: 0 0.625rem;
    border: 1px solid var(--caap-input);
    border-radius: var(--caap-radius-sm);
}

.chosen-container .chosen-results li {
    padding: 0.4375rem 0.625rem;
    line-height: 1.35;
}

.chosen-container .chosen-results li.highlighted {
    color: #fff;
    background: var(--caap-steel-600);
}

.chosen-container-multi .chosen-choices {
    min-height: 2.5rem;
    padding: 0.25rem 0.5rem;
    background: var(--caap-surface);
    border: 1px solid var(--caap-input);
    border-radius: var(--caap-radius-sm);
    box-shadow: var(--caap-shadow-xs);
}


/* ==========================================================================
   5. Cards, alerts, badges, dropdowns, tooltips
   ========================================================================== */
.card {
    --bs-card-border-color: var(--caap-border);
    --bs-card-border-radius: var(--caap-radius-lg);
    --bs-card-inner-border-radius: calc(var(--caap-radius-lg) - 1px);
    --bs-card-cap-bg: transparent;
    --bs-card-bg: var(--caap-surface);
    box-shadow: var(--caap-shadow-sm);
}

.card-header {
    font-weight: 700;
}

.accordion > .card > .card-header {
    background-color: var(--caap-steel-700);
}

.alert {
    --bs-alert-border-radius: var(--caap-radius);
    font-size: 0.9375rem;
}

.badge {
    --bs-badge-font-weight: 700;
    --bs-badge-border-radius: var(--caap-radius-sm);
    --bs-badge-padding-x: 0.5em;
    --bs-badge-padding-y: 0.3em;
}

.dropdown-menu {
    --bs-dropdown-font-size: 0.9375rem;
    --bs-dropdown-color: var(--caap-fg);
    --bs-dropdown-border-color: var(--caap-border);
    --bs-dropdown-border-radius: var(--caap-radius);
    --bs-dropdown-padding-x: 0.25rem;
    --bs-dropdown-padding-y: 0.25rem;
    --bs-dropdown-item-padding-x: 0.625rem;
    --bs-dropdown-item-padding-y: 0.5rem;
    --bs-dropdown-item-border-radius: var(--caap-radius-sm);
    --bs-dropdown-link-hover-bg: var(--caap-steel-50);
    --bs-dropdown-link-active-bg: var(--caap-steel-100);
    --bs-dropdown-link-active-color: var(--caap-fg);
    --bs-dropdown-header-color: var(--caap-muted);
    --bs-dropdown-divider-bg: var(--caap-border);
    box-shadow: var(--caap-shadow-md);
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dropdown-header {
    font-size: 0.75rem;
    font-weight: 700;
}

/* style.css pintaba el contenedor del tooltip: se limpia para Bootstrap 5 */
.tooltip {
    --bs-tooltip-bg: var(--caap-steel-950);
    --bs-tooltip-font-size: 0.8125rem;
    --bs-tooltip-border-radius: var(--caap-radius-sm);
    --bs-tooltip-padding-x: 0.625rem;
    --bs-tooltip-padding-y: 0.375rem;
    padding: var(--bs-tooltip-arrow-height);
    font-weight: 400;
    background-color: transparent;
    border: 0;
}


/* ==========================================================================
   6. Modales
   ========================================================================== */
.modal {
    --bs-modal-border-color: var(--caap-border);
    --bs-modal-border-radius: var(--caap-radius-lg);
    --bs-modal-inner-border-radius: calc(var(--caap-radius-lg) - 1px);
    --bs-modal-box-shadow: var(--caap-shadow-lg);
    --bs-modal-header-padding: 1rem 1.25rem;
    --bs-modal-padding: 1.25rem;
    --bs-modal-footer-gap: 0.5rem;
}

.modal-content {
    border: 1px solid var(--caap-border);
    box-shadow: var(--caap-shadow-lg);
    overflow: hidden;
}

.modal-header {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--caap-fg) !important;
    background: var(--caap-surface) !important;
    border-bottom: 1px solid var(--caap-border);
}

.modal-header .fa,
.modal-header .fas,
.modal-header .bi {
    color: var(--caap-steel-500);
}

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

.modal-footer {
    background: var(--caap-subtle) !important;
    border-top: 1px solid var(--caap-border) !important;
}

/* Modales con width en línea (style="width:1024px", de BS3/4). En BS5 el max-width de 500px
   los dejaba angostos: se respeta el ancho que piden sin pasar de la pantalla. */
.modal-dialog[style*="width"] {
    max-width: calc(100vw - 2rem);
}

@media (max-width: 575.98px) {
    .modal-dialog[style*="width"] {
        width: auto !important;
        margin: 0.5rem;
    }
}

/* Modales con contenido de ancho fijo (diagramas de daños): se desplazan por dentro */
.caap-modal-ancho .modal-body {
    overflow-x: auto;
}

.modal-backdrop {
    --bs-backdrop-bg: var(--caap-steel-950);
}

.modal-backdrop.show {
    opacity: 0.45;
}


/* ==========================================================================
   7. Tablas y DataTables
   ========================================================================== */
.table {
    --bs-table-bg: transparent; /* las celdas heredaban el gris de la página */
    --bs-table-color: var(--caap-fg);
    --bs-table-border-color: var(--caap-border);
    --bs-table-hover-bg: var(--caap-steel-50);
    --bs-table-striped-bg: var(--caap-subtle);
    font-size: 0.875rem;
}

.table td,
.table th {
    padding: 0.6875rem 0.75rem;
    vertical-align: middle;
    border-top: 0;
}

/* Encabezado con banda de color para separarlo del cuerpo */
.table > thead th,
.table-striped > thead,
table.dataTable > thead > tr > th,
table.dataTable > thead > tr > td {
    color: var(--caap-steel-900) !important;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: var(--caap-steel-100) !important;
    border-bottom: 1px solid var(--caap-steel-200) !important;
}

table.dataTable > thead > tr > th:first-child {
    border-top-left-radius: var(--caap-radius-sm);
}

table.dataTable > thead > tr > th:last-child {
    border-top-right-radius: var(--caap-radius-sm);
}

/* DataTables y Bootstrap rayan las filas con sombras internas en cada celda;
   se quitan para que el color de la fila (incluidos los de estatus) sea uniforme */
table.dataTable > tbody > tr > *,
table.dataTable.table-striped > tbody > tr > * {
    box-shadow: none !important;
}

table.dataTable > tbody > tr > td {
    border-top: 1px solid var(--caap-border) !important;
}

table.dataTable > tbody > tr:first-child > td {
    border-top: 0 !important;
}

/* División entre columnas (encabezado y filas) */
table.dataTable > thead > tr > th + th,
table.dataTable > thead > tr > td + td {
    border-left: 1px solid var(--caap-steel-200) !important;
}

table.dataTable > tbody > tr > td + td {
    border-left: 1px solid var(--caap-border) !important;
}

table.dataTable.no-footer,
.dataTables_scrollBody,
.dataTables_wrapper.no-footer .dataTables_scrollBody {
    border-bottom: 1px solid var(--caap-border) !important;
}

/* Filas: blanco y hover suave en vez de amarillo.
   Se excluyen las filas con color de estatus para no taparlo. */
table.dataTable tbody tr.odd:not([class*="Solicitud_"]):not(.rechazadoExistencia):not(.Resaltado),
table.dataTable tbody tr.even:not([class*="Solicitud_"]):not(.rechazadoExistencia):not(.Resaltado) {
    background-color: var(--caap-surface) !important;
}

table.dataTable tbody tr.odd:not([class*="Solicitud_"]):not(.rechazadoExistencia):not(.Resaltado):hover,
table.dataTable tbody tr.even:not([class*="Solicitud_"]):not(.rechazadoExistencia):not(.Resaltado):hover {
    background-color: var(--caap-steel-50) !important;
}

.odd:hover,
.even:hover {
    color: inherit !important;
}

.sorting_1 {
    font-weight: inherit;
    background-color: transparent !important;
}

/* Estatus: los controladores ponen font-size:20px en línea; se vuelven etiquetas */
table.dataTable .badge,
.table .badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3em 0.75em 0.3em 0.6em !important;
    font-size: 0.75rem !important;
    font-weight: 700;
    letter-spacing: 0.03em;
    border: 0;
    border-radius: 999px;
}

/* Estatus legibles: punto de color + fondo suave + texto oscuro del mismo tono (AA).
   Sirve para las clases de Bootstrap 5 (text-bg-*), las de Bootstrap 4 (badge-*) que vienen
   de la BD y los controladores, y las de estatus propias (badge-rechazada). */
table.dataTable .badge::before,
.table .badge::before {
    content: "";
    flex: none;
    width: 0.4375rem;
    height: 0.4375rem;
    background: currentColor;
    border-radius: 999px;
}

table.dataTable .badge.text-bg-success, table.dataTable .badge.badge-success,
.table .badge.text-bg-success, .table .badge.badge-success {
    color: #166534 !important;
    background: #e6f4ec !important;
}

table.dataTable .badge.text-bg-danger, table.dataTable .badge.badge-danger, table.dataTable .badge.badge-rechazada,
.table .badge.text-bg-danger, .table .badge.badge-danger, .table .badge.badge-rechazada {
    color: #b42318 !important;
    background: #fdecea !important;
}

table.dataTable .badge.text-bg-warning, table.dataTable .badge.badge-warning,
.table .badge.text-bg-warning, .table .badge.badge-warning {
    color: #8a5300 !important;
    background: #fff3dc !important;
}

table.dataTable .badge.text-bg-primary, table.dataTable .badge.badge-primary,
table.dataTable .badge.text-bg-info, table.dataTable .badge.badge-info,
.table .badge.text-bg-primary, .table .badge.badge-primary,
.table .badge.text-bg-info, .table .badge.badge-info {
    color: var(--caap-steel-800) !important;
    background: var(--caap-steel-100) !important;
}

table.dataTable .badge.text-bg-secondary, table.dataTable .badge.badge-secondary,
table.dataTable .badge.text-bg-light, table.dataTable .badge.text-bg-dark,
.table .badge.text-bg-secondary, .table .badge.badge-secondary,
.table .badge.text-bg-light, .table .badge.text-bg-dark {
    color: #3d4a57 !important;
    background: #eceff3 !important;
}

/* Un badge sin color de Bootstrap (p. ej. "CAPTURADA") queda neutro y legible */
table.dataTable .badge:not([class*="text-bg-"]):not([class*="badge-"]):not([style*="background"]),
.table .badge:not([class*="text-bg-"]):not([class*="badge-"]):not([style*="background"]) {
    color: #3d4a57 !important;
    background: #eceff3 !important;
}

/* En la tabla el color ya marca el estatus; el parpadeo distrae al leer las demás filas */
table.dataTable .badge.Parpadea,
.table .badge.Parpadea {
    animation: none;
}

/* Acciones por fila: todas en azul suave; rojo solo para lo destructivo (btn-danger).
   Al pasar el mouse dicen qué hacen (tooltip rápido en assets/js/caap-ui.js). */
table.dataTable tbody .btn {
    --bs-btn-padding-x: 0.5rem;
    --bs-btn-padding-y: 0;
    --bs-btn-font-size: 0.875rem;
    --bs-btn-color: var(--caap-steel-700);
    --bs-btn-bg: var(--caap-steel-50);
    --bs-btn-border-color: var(--caap-steel-100);
    --bs-btn-hover-color: var(--caap-steel-800);
    --bs-btn-hover-bg: var(--caap-steel-100);
    --bs-btn-hover-border-color: var(--caap-steel-200);
    --bs-btn-active-color: var(--caap-steel-900);
    --bs-btn-active-bg: var(--caap-steel-200);
    --bs-btn-active-border-color: var(--caap-steel-300);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.125rem;
    height: 2.125rem;
    margin: 0 0.125rem;
    box-shadow: none;
}

table.dataTable tbody .btn-danger {
    --bs-btn-color: var(--caap-danger);
    --bs-btn-bg: #fef2f2;
    --bs-btn-border-color: #fbd5d5;
    --bs-btn-hover-color: #b91c1c;
    --bs-btn-hover-bg: #fde2e2;
    --bs-btn-hover-border-color: #f5b3b3;
    --bs-btn-active-color: #991b1b;
    --bs-btn-active-bg: #fbd0d0;
    --bs-btn-active-border-color: #f19a9a;
}

/* Tooltip rápido (assets/js/caap-ui.js) */
.caap-tip {
    position: fixed;
    z-index: 2000;
    padding: 0.3125rem 0.5625rem;
    font-size: 0.78125rem;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
    white-space: nowrap;
    pointer-events: none;
    background: var(--caap-navy);
    border-radius: var(--caap-radius-sm);
    animation: caap-drop 0.1s ease-out;
}

.caap-tip[hidden] {
    display: none;
}

/* Barra de la tabla (dom en setting_datatable.php):
   arriba, buscador a la izquierda y herramientas a la derecha;
   abajo a la derecha: total · paginación · registros por página */
.dataTables_wrapper {
    font-size: 0.875rem;
    color: var(--caap-muted);
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    float: none !important;
    padding-top: 0 !important;
    text-align: left;
}

.dataTables_wrapper .dt-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.875rem;
}

.dataTables_wrapper .dt-top:not(:has(.dataTables_filter)):not(:has(.dt-tools > *)) {
    display: none; /* sin buscador ni herramientas no deja hueco */
}

/* Buscador: sin la etiqueta "Buscar:", con lupa y placeholder (caap-ui.js) */
.dataTables_wrapper .dt-search .dataTables_filter label {
    font-size: 0;
}

.dataTables_wrapper .dt-search .dataTables_filter input {
    min-width: min(20rem, 100%);
    font-size: 0.875rem;
}

.dataTables_wrapper .dt-tools {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.caap-dt-actions,
.caap-dt-primary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
}

/* Las acciones propias de la tabla (crear) a la derecha */
.caap-dt-primary {
    margin-left: auto;
}

/* Filtrar / Refrescar / Exportar: botones claros de solo ícono junto al buscador */
.caap-dt-actions .btn {
    --bs-btn-color: var(--caap-fg);
    --bs-btn-bg: var(--caap-surface);
    --bs-btn-border-color: var(--caap-input);
    --bs-btn-hover-color: var(--caap-fg);
    --bs-btn-hover-bg: var(--caap-steel-50);
    --bs-btn-hover-border-color: var(--caap-steel-300);
    --bs-btn-active-color: var(--caap-fg);
    --bs-btn-active-bg: var(--caap-steel-100);
    --bs-btn-active-border-color: var(--caap-steel-300);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 0.625rem;
    box-shadow: var(--caap-shadow-xs);
}

.caap-dt-primary .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 2.25rem;
    padding: 0 0.875rem;
    font-weight: 700;
}

.caap-dt-proxy[hidden] {
    display: none !important;
}

/* El botón original del encabezado queda oculto; el de la barra le pasa el clic */
.caap-promoted {
    display: none !important;
}

/* Mientras DataTables arranca (varios grids esperan 500 ms y además baja el idioma), la fila
   flotante de Filtrar/Refrescar y la tabla sin tema no se ven. Al envolver la tabla deja de
   aplicar. Si una tabla nunca se inicia, aparece igual a los 3 s. */
.row[style*="absolute"]:has(+ table),
.row[style*="absolute"] + table {
    visibility: hidden;
    animation: caap-dt-espera 0s 3s forwards;
}

@keyframes caap-dt-espera {
    to { visibility: visible; }
}

/* Selects dentro de una fila (p. ej. "Activo" Sí/No de vigente.php): con la columna angosta
   la flecha se comía el texto. Ancho mínimo para leer la opción y alto de los botones de fila */
.dataTables_wrapper tbody select.form-control,
.dataTables_wrapper tbody .form-select {
    display: inline-block;
    width: auto;
    min-width: 5.5rem;
    height: 2.125rem;
    min-height: 2.125rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    padding-left: 0.625rem;
    font-size: 0.875rem;
}

.caap-th-actions::after {
    content: "Acciones";
}

.dataTables_wrapper .dt-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem 1rem;
    margin-top: 0.875rem;
}

.dataTables_wrapper .dt-bottom .dataTables_length {
    padding-left: 1rem;
    border-left: 1px solid var(--caap-border);
}

/* Columna de acciones fija al desplazarse en horizontal.
   - Normal: es la primera columna y se fija a la izquierda.
   - caap-acciones-fin (caap-ui.js la mueve al final): se fija a la derecha. */
.dataTables_wrapper:not(.caap-acciones-fin) table.dataTable > thead > tr > :first-child,
.dataTables_wrapper:not(.caap-acciones-fin) table.dataTable > tbody > tr > td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
}

.dataTables_wrapper:not(.caap-acciones-fin) table.dataTable > tbody > tr > td:first-child {
    background-color: inherit;
    white-space: nowrap; /* los botones en una fila; en celular la tabla se desplaza de lado */
}

.dataTables_wrapper:not(.caap-acciones-fin) .dataTables_scroll table.dataTable > thead > tr > :first-child,
.dataTables_wrapper:not(.caap-acciones-fin) .dataTables_scroll table.dataTable > tbody > tr > td:first-child {
    box-shadow: inset -1px 0 0 var(--caap-border) !important;
}

table.dataTable > thead > tr > th.caap-col-acciones,
table.dataTable > tbody > tr > td.caap-col-acciones,
table.dataTable > tfoot > tr > th.caap-col-acciones {
    position: sticky !important; /* DataTables pone position:relative a las columnas ordenables */
    right: 0;
    z-index: 2;
    white-space: nowrap; /* los botones en una fila; en celular la tabla se desplaza de lado */
    box-shadow: inset 1px 0 0 var(--caap-steel-200) !important;
}

/* Fondo propio para que no se vea el texto que pasa por debajo al desplazarse */
table.dataTable > tbody > tr > td.caap-col-acciones {
    background-color: var(--caap-surface);
    box-shadow: inset 1px 0 0 var(--caap-border) !important;
}

table.dataTable > tbody > tr:hover > td.caap-col-acciones {
    background-color: var(--caap-steel-50);
}

/* Filas con color de estatus: la celda fija toma el color de la fila */
table.dataTable > tbody > tr[class*="Solicitud_"] > td.caap-col-acciones,
table.dataTable > tbody > tr.rechazadoExistencia > td.caap-col-acciones,
table.dataTable > tbody > tr.Resaltado > td.caap-col-acciones,
table.dataTable > tbody > tr.Bloqueado > td.caap-col-acciones,
table.dataTable > tbody > tr.CasetaCancelada > td.caap-col-acciones,
table.dataTable > tbody > tr.CasetaRechazada > td.caap-col-acciones {
    background-color: inherit;
}

/* La columna fija ya dibuja su línea; sin el borde de división no queda doble */
table.dataTable > thead > tr > .caap-col-acciones,
table.dataTable > tbody > tr > td.caap-col-acciones {
    border-left: 0 !important;
}

.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0;
    font-weight: 400;
    color: var(--caap-muted) !important;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    height: 2.25rem;
    padding: 0.25rem 0.625rem;
    margin: 0;
    color: var(--caap-fg);
    background-color: var(--caap-surface);
    border: 1px solid var(--caap-input);
    border-radius: var(--caap-radius-sm);
    box-shadow: var(--caap-shadow-xs);
}

.dataTables_wrapper .dataTables_filter input {
    min-width: 15rem;
    padding-left: 2rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%238696a6' d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: 0.625rem center;
    background-size: 14px 14px;
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--caap-steel-400);
    box-shadow: 0 0 0 3px var(--caap-ring);
    outline: 0;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    min-width: 2.125rem;
    padding: 0.3125rem 0.625rem !important;
    margin-left: 0.25rem;
    color: var(--caap-fg) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: var(--caap-radius-sm);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--caap-steel-50) !important;
    border-color: var(--caap-border) !important;
}

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

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    color: #a7b3bf !important;
    background: transparent !important;
    border-color: transparent !important;
}

/* "Procesando…" de DataTables con server-side */
.dataTables_wrapper .dataTables_processing {
    color: var(--caap-fg);
    background: var(--caap-surface);
    border: 1px solid var(--caap-border);
    border-radius: var(--caap-radius);
    box-shadow: var(--caap-shadow-md);
}

/* Tablas dentro de una card (si el módulo no las metió ya en una) */
#Contenedor .dataTables_wrapper:not(.card .dataTables_wrapper):not(.modal .dataTables_wrapper) {
    padding: 1.125rem 1.25rem 1rem;
    background: var(--caap-surface);
    border: 1px solid var(--caap-border);
    border-radius: var(--caap-radius-lg);
    box-shadow: var(--caap-shadow-sm);
}


/* ==========================================================================
   8. Pestañas: estilo subrayado
   ========================================================================== */
.nav-tabs {
    --bs-nav-tabs-border-color: var(--caap-border);
    gap: 0.25rem;
}

.nav-tabs .nav-link {
    margin-bottom: -1px;
    padding: 0.625rem 0.875rem;
    font-weight: 700;
    color: var(--caap-muted);
    background: transparent !important;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.nav-tabs .nav-link:hover {
    color: var(--caap-fg);
    border-bottom-color: var(--caap-steel-200);
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    color: var(--caap-fg);
    background: transparent !important;
    border-bottom-color: var(--caap-primary);
}

.tab-content {
    padding: 1.25rem 0 0;
    border: 0;
}


/* ==========================================================================
   9. Cascarón: barra superior (sin sidebar), mega‑menú, menú móvil, buscador
   --------------------------------------------------------------------------
   Layout/adminlte.php + Layout/categorias.php. Paleta del login: azul marino,
   cian de las letras del logo y grises azulados.
   ========================================================================== */
:root {
    --caap-bar-h: 3.75rem;
    --caap-navy-2: #1a2b3b;          /* hover sobre azul marino */
    --caap-card-media: #e4eaf0;      /* bloque del ícono en cards y encabezados */
    --caap-on-dark-muted: rgb(255 255 255 / 0.72);
}

/* AdminLTE arma una cuadrícula para el sidebar; sin sidebar es un bloque normal */
.app-wrapper.caap-shell {
    display: block;
    min-height: 100vh;
}

.caap-main {
    display: block;
}

.caap-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: var(--caap-bar-h);
    padding: 0 1.25rem;
    color: #fff;
    background: var(--caap-navy);
}

.caap-topbar-logo {
    display: flex;
    flex: none;
    margin-right: 0.75rem;
    border-radius: var(--caap-radius-sm);
}

.caap-topbar-logo img {
    display: block;
    width: auto;
    height: 2.625rem;
}

.caap-mainnav {
    display: flex;
    align-self: stretch;
    gap: 2px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none; /* con muchas categorías se desplaza en horizontal */
}

.caap-mainnav::-webkit-scrollbar {
    display: none;
}

.caap-navlink {
    position: relative;
    display: flex;
    flex: none;
    align-items: center;
    gap: 0.375rem;
    padding: 0 0.75rem;
    font-size: 0.90625rem;
    font-weight: 700;
    white-space: nowrap;
    color: var(--caap-on-dark-muted);
    background: transparent;
    border: 0;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.caap-navlink .bi {
    font-size: 0.6875rem;
    transition: transform 0.15s var(--caap-ease);
}

.caap-navlink:hover,
.caap-navlink[aria-expanded="true"],
.caap-navlink.is-active {
    color: #fff;
}

.caap-navlink[aria-expanded="true"] {
    background: var(--caap-navy-2);
}

.caap-navlink[aria-expanded="true"] .bi {
    transform: rotate(180deg);
}

/* Categoría actual: barra cian abajo */
.caap-navlink.is-active::after {
    content: "";
    position: absolute;
    right: 0.75rem;
    bottom: 0;
    left: 0.75rem;
    height: 3px;
    background: var(--caap-cyan-400);
    border-radius: 3px 3px 0 0;
}

.caap-topbar-end {
    display: flex;
    flex: none;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.caap-search-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    width: 15rem;
    height: 2.25rem;
    padding: 0 0.5rem 0 0.75rem;
    font-size: 0.875rem;
    color: var(--caap-on-dark-muted);
    background: rgb(255 255 255 / 0.07);
    border: 1px solid rgb(255 255 255 / 0.14);
    border-radius: var(--caap-radius);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.caap-search-trigger:hover {
    color: #fff;
    background: rgb(255 255 255 / 0.11);
}

.caap-search-trigger kbd,
.caap-palette kbd {
    padding: 0.0625rem 0.375rem;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.6875rem;
    color: inherit;
    background: transparent;
    border: 1px solid currentColor;
    border-radius: 0.25rem;
    opacity: 0.75;
}

.caap-search-trigger kbd {
    margin-left: auto;
}

.caap-topbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 0.625rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--caap-on-dark-muted);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--caap-radius);
}

.caap-topbar-btn:hover {
    color: #fff;
    background: var(--caap-navy-2);
}

.caap-topbar-btn .bi-list {
    font-size: 1.375rem;
}

.caap-menu-toggle {
    display: none;
}

/* Botones de empresa y usuario sobre fondo oscuro */
.caap-topbar .caap-trigger {
    color: #fff;
    background: transparent;
    border-color: rgb(255 255 255 / 0.14);
    box-shadow: none;
}

.caap-topbar .caap-trigger:hover,
.caap-topbar .caap-trigger[aria-expanded="true"] {
    background: var(--caap-navy-2);
    border-color: rgb(255 255 255 / 0.22);
}

.caap-topbar .caap-trigger-sub,
.caap-topbar .caap-trigger .bi-chevron-expand,
.caap-topbar .caap-trigger .bi-chevron-down {
    color: rgb(255 255 255 / 0.65);
}

.caap-topbar .caap-trigger-icon {
    color: var(--caap-cyan-400);
    background: rgb(255 255 255 / 0.08);
    border-color: transparent;
}

.caap-topbar .caap-trigger-user {
    border-color: transparent;
}

.caap-topbar .caap-avatar {
    width: 2rem;
    height: 2rem;
    font-size: 0.75rem;
    font-weight: 900;
    color: var(--caap-navy);
    background: var(--caap-cyan-400);
}

/* Mega‑menú */
.caap-mega {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    color: var(--caap-fg);
    background: var(--caap-surface);
    border-bottom: 1px solid var(--caap-border);
    box-shadow: var(--caap-shadow-lg);
    animation: caap-drop 0.16s var(--caap-ease);
}

.caap-mega[hidden] {
    display: none;
}

.caap-mega-inner {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: 2rem;
    max-width: 1280px;
    max-height: calc(100vh - var(--caap-bar-h) - 1rem);
    margin: 0 auto;
    padding: 1.5rem 1.25rem 1.75rem;
    overflow-y: auto;
}

.caap-mega-intro h2 {
    margin: 0.75rem 0 0.75rem;
    font-size: 1.125rem;
    font-weight: 700 !important;
}

.caap-mega-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    font-size: 1.25rem;
    color: var(--caap-steel-600);
    background: var(--caap-card-media);
    border-radius: var(--caap-radius-lg);
}

.caap-link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--caap-steel-600);
    background: none;
    border: 0;
}

.caap-link-arrow:hover {
    color: var(--caap-steel-800);
}

.caap-link-arrow .bi {
    transition: transform 0.15s var(--caap-ease);
}

.caap-link-arrow:hover .bi {
    transform: translateX(3px);
}

.caap-mega-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.25rem 0.75rem;
    align-content: start;
}

.caap-mega-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    width: 100%;
    padding: 0.625rem;
    text-align: left;
    color: var(--caap-fg);
    background: transparent;
    border: 0;
    border-radius: var(--caap-radius);
}

.caap-mega-item:hover {
    background: var(--caap-steel-50);
}

.caap-mega-tile {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.375rem;
    height: 2.375rem;
    font-size: 1rem;
    color: var(--caap-steel-600);
    background: var(--caap-card-media);
    border-radius: var(--caap-radius);
}

.caap-mega-tile img {
    width: 1.375rem;
    height: 1.375rem;
    object-fit: contain;
}

.caap-mega-text {
    min-width: 0;
}

.caap-mega-text b {
    display: block;
    font-size: 0.90625rem;
    line-height: 1.3;
}

.caap-mega-text small {
    display: -webkit-box;
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--caap-muted);
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Menú móvil */
.caap-scrim {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgb(15 27 38 / 0.45);
}

.caap-drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1045;
    width: min(20rem, 88vw);
    padding: 0.75rem;
    overflow-y: auto;
    color: var(--caap-fg);
    background: var(--caap-surface);
    box-shadow: var(--caap-shadow-lg);
    animation: caap-slide-left 0.2s var(--caap-ease);
}

.caap-scrim[hidden],
.caap-drawer[hidden] {
    display: none;
}

.caap-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.25rem 0.25rem 0.75rem;
}

.caap-drawer-head img {
    height: 2.5rem;
    border-radius: var(--caap-radius-sm);
}

.caap-drawer details {
    border-top: 1px solid var(--caap-border);
}

.caap-drawer summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0.375rem;
    font-weight: 700;
    list-style: none;
    cursor: pointer;
}

.caap-drawer summary::-webkit-details-marker {
    display: none;
}

.caap-drawer details[open] summary .bi {
    transform: rotate(180deg);
}

/* Buscador Ctrl + K */
.caap-palette {
    width: min(38rem, calc(100vw - 2rem));
    margin-top: 12vh;
    padding: 0;
    color: var(--caap-fg);
    background: var(--caap-surface);
    border: 0;
    border-radius: 0.875rem;
    box-shadow: var(--caap-shadow-lg);
}

.caap-palette[open] {
    animation: caap-enter 0.18s var(--caap-ease);
}

.caap-palette::backdrop {
    background: rgb(15 27 38 / 0.5);
}

.caap-palette-input {
    position: relative;
    border-bottom: 1px solid var(--caap-border);
}

.caap-palette-input .bi {
    position: absolute;
    top: 50%;
    left: 1.125rem;
    color: var(--caap-steel-500);
    transform: translateY(-50%);
}

.caap-palette-input input {
    width: 100%;
    height: 3.5rem;
    padding: 0 1rem 0 3rem;
    font-size: 1rem;
    background: transparent;
    border: 0;
    outline: 0;
}

.caap-palette-list {
    max-height: min(26rem, 55vh);
    padding: 0.375rem;
    overflow-y: auto;
}

.caap-palette-group {
    padding: 0.5rem 0.625rem 0.25rem;
    font-size: 0.71875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--caap-muted);
}

.caap-palette-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.5rem 0.625rem;
    text-align: left;
    color: var(--caap-fg);
    background: none;
    border: 0;
    border-radius: var(--caap-radius);
}

.caap-palette-item > .bi {
    margin-left: auto;
    color: var(--caap-muted);
    opacity: 0;
}

.caap-palette-item[aria-selected="true"],
.caap-palette-item:hover {
    background: var(--caap-steel-50);
}

.caap-palette-item[aria-selected="true"] > .bi {
    opacity: 1;
}

.caap-palette-empty {
    padding: 1.75rem 1rem;
    text-align: center;
    color: var(--caap-muted);
}

.caap-palette-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 0.875rem;
    padding: 0.625rem 1rem;
    font-size: 0.78125rem;
    color: var(--caap-muted);
    border-top: 1px solid var(--caap-border);
}

@keyframes caap-drop {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

@keyframes caap-slide-left {
    from { opacity: 0; transform: translateX(-24px); }
    to { opacity: 1; transform: none; }
}

@media (max-width: 1399.98px) {
    .caap-search-trigger {
        justify-content: center;
        width: 2.25rem;
        padding: 0;
    }

    .caap-search-trigger span,
    .caap-search-trigger kbd {
        display: none;
    }
}

@media (max-width: 991.98px) {
    .caap-topbar {
        padding: 0 0.75rem;
    }

    .caap-mainnav,
    .caap-mega {
        display: none !important;
    }

    .caap-menu-toggle {
        display: inline-flex;
    }

    .caap-topbar-logo img {
        height: 2.25rem;
    }
}

/* Botones de empresa y usuario (también en el menú desplegable) */
.caap-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 100%;
    height: 2.625rem;
    padding: 0 0.625rem 0 0.375rem;
    font-size: 0.875rem;
    color: var(--caap-fg);
    text-align: left;
    background: var(--caap-surface);
    border: 1px solid var(--caap-border);
    border-radius: var(--caap-radius);
    box-shadow: var(--caap-shadow-xs);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.caap-trigger:hover,
.caap-trigger[aria-expanded="true"] {
    background: var(--caap-steel-50);
    border-color: var(--caap-steel-200);
}

.caap-trigger::after {
    display: none; /* oculta el caret de .dropdown-toggle */
}

.caap-trigger .bi-chevron-expand,
.caap-trigger .bi-chevron-down {
    font-size: 0.75rem;
    color: var(--caap-muted);
    transition: transform 0.2s var(--caap-ease);
}

.caap-trigger[aria-expanded="true"] .bi-chevron-down {
    transform: rotate(180deg);
}

.caap-trigger-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 1.875rem;
    height: 1.875rem;
    font-size: 0.875rem;
    color: var(--caap-steel-700);
    background: var(--caap-steel-50);
    border: 1px solid var(--caap-steel-100);
    border-radius: var(--caap-radius-sm);
}

.caap-trigger-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.15;
}

.caap-trigger-title {
    overflow: hidden;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.caap-trigger-sub {
    overflow: hidden;
    font-size: 0.75rem;
    color: var(--caap-muted);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.caap-avatar {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 1.875rem;
    height: 1.875rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #fff;
    background: var(--caap-steel-600);
    border-radius: 999px;
}

.caap-company-menu {
    width: min(22rem, calc(100vw - 2rem));
    max-height: min(26rem, 70vh);
    overflow-y: auto;
}

.caap-company-item {
    align-items: flex-start;
    white-space: normal;
}

.caap-company-item .caap-company-meta {
    display: block;
    font-size: 0.8125rem;
    color: var(--caap-muted);
}

.caap-company-item.is-current {
    background: var(--caap-steel-50);
}

.caap-company-item .bi-check2 {
    margin-left: auto;
    font-size: 1rem;
    color: var(--caap-primary);
}

.caap-user-menu {
    min-width: 15rem;
}

.caap-user-menu .dropdown-item i {
    width: 1rem;
    color: var(--caap-muted);
}

.caap-user-menu .dropdown-item.text-danger i {
    color: inherit;
}

/* Área de contenido: centrada ahora que no hay sidebar */
.caap-content {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 1.5rem;
}

@media (max-width: 767.98px) {
    .caap-content {
        padding: 1rem;
    }

    #Contenedor > .row:has(> [class*="col-"] > button[title="Regresar"]) {
        top: 1rem;
        left: 1rem;
    }
}

#Contenedor {
    position: relative;
}


/* ==========================================================================
   10. Páginas: encabezado de módulo, Regresar, Inicio, cards
   ========================================================================== */

/* Ícono del encabezado: el mismo bloque gris azulado de las cards, ícono en acero */
.caap-page-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    margin: 0;
    font-size: 1.375rem;
    color: var(--caap-steel-600);
    background: var(--caap-card-media);
    border: 0;
    border-radius: var(--caap-radius-lg);
}

.caap-page-icon img {
    width: 1.75rem;
    height: 1.75rem;
    object-fit: contain;
}

/* Encabezado (Layout/titulos_*.php y módulos con markup propio) */
.TituloModulo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    height: auto;
    margin-bottom: 1.5rem;
    padding: 0 0 1.25rem;
    border-bottom: 1px solid var(--caap-border);
}

/* Markup viejo (floats) */
.TituloModulo > div {
    float: none !important;
    padding-top: 0 !important;
}

.TituloModulo h1 {
    display: flex;
    align-items: center;
    margin: 0;
    font-size: 1.625rem;
    font-weight: 700 !important;
    line-height: 1.2;
}

.TituloModulo > div:last-child:not(.caap-page-heading):not(.caap-page-actions) {
    font-size: 0.875rem;
    color: var(--caap-muted);
}

.TituloModulo + hr,
.TituloModulo + script + hr {
    display: none; /* duplicaba la línea del encabezado */
}

.IconTitle {
    height: 2.25rem;
}

/* Markup nuevo: ícono · ruta + título + descripción · acciones a la derecha */
.caap-page-header {
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 1rem;
}

.caap-page-heading {
    flex: 1;
    min-width: 0;
}

.caap-page-actions {
    display: flex;
    flex: none;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-left: auto;
}

.caap-page-actions:empty {
    display: none;
}

/* Ruta: Inicio › Categoría (› Módulo) */
.caap-breadcrumb,
.caap-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: var(--caap-muted);
}

.caap-breadcrumb {
    min-height: 1.125rem;
    margin-bottom: 0.25rem;
}

.caap-crumbs {
    margin-bottom: 0.875rem;
}

.caap-breadcrumb-base {
    display: contents;
}

.caap-breadcrumb a,
.caap-crumbs a {
    color: inherit;
    text-decoration: none;
}

.caap-breadcrumb a:hover,
.caap-crumbs a:hover {
    color: var(--caap-steel-800);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.caap-breadcrumb .bi,
.caap-crumbs .bi {
    font-size: 0.625rem;
    opacity: 0.7;
}

.caap-crumbs [aria-current] {
    font-weight: 700;
    color: var(--caap-fg);
}

.caap-page-desc {
    margin: 0.25rem 0 0;
    font-size: 0.9375rem;
    color: var(--caap-muted);
}

@media (max-width: 767.98px) {
    .caap-page-header {
        flex-wrap: wrap;
    }

    .caap-page-actions {
        justify-content: flex-start;
        width: 100%;
    }
}

/* "Regresar": el renglón suelto de arriba (44 vistas) se convierte en un botón
   con flecha a la izquierda del título, en la misma línea */
#Contenedor > .row:has(> [class*="col-"] > button[title="Regresar"]) {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    z-index: 3;
    margin: 0;
    text-align: left !important;
}

#Contenedor:has(> .row > [class*="col-"] > button[title="Regresar"]) .TituloModulo {
    min-height: 3rem;
    padding-left: 3.5rem;
}

#Contenedor > .row:has(> [class*="col-"] > button[title="Regresar"]) > [class*="col-"] {
    text-align: left !important;
}

#Contenedor button.btn[title="Regresar"] {
    --bs-btn-padding-x: 0;
    --bs-btn-padding-y: 0;
    --bs-btn-color: var(--caap-fg);
    --bs-btn-bg: var(--caap-surface);
    --bs-btn-border-color: var(--caap-input);
    --bs-btn-hover-color: var(--caap-fg);
    --bs-btn-hover-bg: var(--caap-steel-50);
    --bs-btn-hover-border-color: var(--caap-steel-300);
    --bs-btn-active-color: var(--caap-fg);
    --bs-btn-active-bg: var(--caap-steel-100);
    --bs-btn-active-border-color: var(--caap-steel-300);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-top: 0.375rem;
    font-size: 0; /* oculta el texto; el title sigue diciendo "Regresar" */
    box-shadow: var(--caap-shadow-xs);
}

#Contenedor button.btn[title="Regresar"] .fa {
    display: none; /* el ícono "responder" se cambia por una flecha */
}

#Contenedor button.btn[title="Regresar"]::before {
    content: "\F12F"; /* bi-arrow-left */
    font-family: "bootstrap-icons";
    font-size: 1rem;
    line-height: 1;
    transition: transform 0.2s var(--caap-ease);
}

#Contenedor button.btn[title="Regresar"]:hover::before {
    transform: translateX(-3px);
}

/* Inicio (lo pinta CargaInicio en Layout/categorias.php) */
.caap-home-section + .caap-home-section {
    margin-top: 2rem;
}

.caap-home-title {
    margin: 0 0 0.875rem;
    font-size: 1.125rem;
    font-weight: 700 !important;
}

/* Grupos de secciones (Secciones.php): título grande (más que el nombre de las cards) y cards sin contenedor */
.caap-card-group {
    margin-top: 2.5rem;
}

.caap-card-group-title {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0 0 1rem;
    font-size: 1.375rem;
    font-weight: 700 !important;
}

.caap-card-group-title .fa {
    font-size: 1.125rem;
    color: var(--caap-steel-600);
}

/* Módulo cuyas secciones están todas en grupos: la rejilla de arriba queda vacía */
.caap-card-grid:not(:has(> *)) {
    display: none;
}

.caap-card-grid:not(:has(> *)) + .caap-card-group {
    margin-top: 0;
}

.caap-recent-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.caap-recent {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    padding: 0.75rem 0.875rem;
    text-align: left;
    color: var(--caap-fg);
    background: var(--caap-surface);
    border: 1px solid var(--caap-border);
    border-radius: var(--caap-radius-lg);
    box-shadow: var(--caap-shadow-xs);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.caap-recent:hover {
    border-color: var(--caap-steel-300);
    box-shadow: var(--caap-shadow-sm);
}

.caap-recent-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1rem;
    color: var(--caap-steel-600);
    background: var(--caap-card-media);
    border-radius: var(--caap-radius);
}

.caap-recent-icon img {
    width: 1.375rem;
    height: 1.375rem;
    object-fit: contain;
}

.caap-recent-text {
    min-width: 0;
}

.caap-recent-text b,
.caap-recent-text small {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.caap-recent-text small {
    font-size: 0.8125rem;
    color: var(--caap-muted);
}

@media (max-width: 991.98px) {
    .caap-recent-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Card de categoría, de módulo y de sección (un solo diseño):
   bloque gris azulado con el ícono grande en acero, separado del título y la descripción */
.module-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    background: var(--caap-surface);
    border: 1px solid var(--caap-border);
    border-radius: var(--caap-radius-lg);
    box-shadow: var(--caap-shadow-xs);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s var(--caap-ease);
    animation: caap-enter 0.35s var(--caap-ease) both;
}

.module-card::before,
.module-card::after {
    display: none;
}

/* Hover: solo crece el ícono. style.css levantaba la card y giraba el ícono 5°; se anula */
.module-card:hover {
    border-color: var(--caap-steel-300);
    box-shadow: var(--caap-shadow-xs);
    transform: none;
}

.module-card .module-icon,
.module-card:hover .module-icon {
    transform: none;
}

.module-card:focus-visible {
    outline: 2px solid var(--caap-steel-500);
    outline-offset: 2px;
}

.module-card .module-icon {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 7rem;
    margin: 0;
    color: var(--caap-steel-600);
    background: var(--caap-card-media);
    border: 0;
    border-bottom: 1px solid var(--caap-border);
    border-radius: 0;
    box-shadow: none;
}

.module-card .module-icon .IconoModulo,
.module-card .module-icon .fa {
    font-size: 2.5rem !important; /* style.css lo dejaba en 95px */
    color: var(--caap-steel-600);
    transition: transform 0.2s var(--caap-ease);
}

.module-card .module-icon img {
    width: 3rem;
    height: 3rem;
    object-fit: contain;
    transition: transform 0.2s var(--caap-ease);
}

.module-card:hover .module-icon .IconoModulo,
.module-card:hover .module-icon .fa,
.module-card:hover .module-icon img {
    transform: scale(1.15);
}

.module-card .module-text,
.module-card > .module-title {
    padding: 1.125rem 1.25rem 1.375rem;
}

.module-text {
    min-width: 0;
}

.module-title {
    margin: 0;
    font-size: 1.09375rem;
    font-weight: 700 !important;
    line-height: 1.3;
    color: var(--caap-fg);
    text-align: left;
}

.module-desc {
    display: -webkit-box;
    margin: 0.375rem 0 0;
    overflow: hidden;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--caap-muted);
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

@media (max-width: 575.98px) {
    .module-card .module-icon {
        height: 5.25rem;
    }

    .module-card .module-icon .IconoModulo,
    .module-card .module-icon .fa {
        font-size: 2rem !important;
    }

    .module-card .module-text,
    .module-card > .module-title {
        padding: 0.75rem 0.875rem 1rem;
    }

    .module-title {
        font-size: 0.96875rem;
    }

    .module-desc {
        font-size: 0.8125rem;
        -webkit-line-clamp: 3;
    }
}

/* Las tarjetas aparecen escalonadas */
.caap-card-grid > [class*="col-"]:nth-child(2) > .module-card { animation-delay: 0.03s; }
.caap-card-grid > [class*="col-"]:nth-child(3) > .module-card { animation-delay: 0.06s; }
.caap-card-grid > [class*="col-"]:nth-child(4) > .module-card { animation-delay: 0.09s; }
.caap-card-grid > [class*="col-"]:nth-child(5) > .module-card { animation-delay: 0.12s; }
.caap-card-grid > [class*="col-"]:nth-child(n+6) > .module-card { animation-delay: 0.15s; }

/* Botón "volver arriba" */
.back-to-top.caap-back-to-top {
    right: 1.25rem;
    bottom: 1.25rem;
    left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    color: var(--caap-fg);
    visibility: hidden;
    background: var(--caap-surface);
    border: 1px solid var(--caap-border);
    border-radius: 999px;
    box-shadow: var(--caap-shadow-md);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s var(--caap-ease);
}

.back-to-top.caap-back-to-top.is-visible {
    visibility: visible;
    opacity: 1;
    transform: none;
}

.back-to-top.caap-back-to-top:hover {
    color: var(--caap-steel-800);
    background: var(--caap-steel-50);
}


/* ==========================================================================
   11. Componentes reutilizables
   ========================================================================== */

/* Buscador protagonista (Caseta: escanear / escribir folio) */
.caap-scan {
    max-width: 40rem;
    margin: 0 auto 1.5rem;
    padding: 1.25rem 1.5rem;
    background: var(--caap-surface);
    border: 1px solid var(--caap-border);
    border-radius: var(--caap-radius-lg);
    box-shadow: var(--caap-shadow-sm);
}

.caap-scan-label {
    margin-bottom: 0.5rem;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--caap-muted) !important;
}

.caap-scan-row {
    display: flex;
    gap: 0.625rem;
}

.caap-scan-field {
    position: relative;
    flex: 1;
}

.caap-scan-field > .bi {
    position: absolute;
    top: 0;
    left: 0.875rem;
    display: flex;
    align-items: center;
    height: 3rem;
    font-size: 1.125rem;
    color: var(--caap-faint);
    pointer-events: none;
}

.caap-scan-field .form-control {
    height: 3rem;
    padding-left: 2.75rem;
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.caap-scan-row > .btn {
    height: 3rem;
    padding-inline: 1.25rem;
}

.caap-scan-help {
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    color: var(--caap-muted);
}

.caap-scan-help kbd {
    padding: 0.0625rem 0.375rem;
    font-size: 0.75rem;
    color: var(--caap-fg);
    background: var(--caap-subtle);
    border: 1px solid var(--caap-border);
    border-radius: 4px;
    box-shadow: 0 1px 0 var(--caap-border);
}

/* Buscador de folio en el encabezado (Caseta): compacto, a la derecha del título */
.caap-page-actions .caap-scan {
    width: min(26rem, 100%);
    max-width: none;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}

.caap-page-actions .caap-scan-label,
.caap-page-actions .caap-scan-help {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap; /* se ocultan a la vista; el lector de pantalla los sigue leyendo */
}

.caap-page-actions .caap-scan-field > .bi {
    height: 2.75rem;
}

.caap-page-actions .caap-scan-field .form-control,
.caap-page-actions .caap-scan-row > .btn {
    height: 2.75rem;
}

/* Año del módulo (Vacíos, Pases, Inventario, Liberación EIR, Disponibilidad) */
.caap-year {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem;
}

.caap-page-actions .caap-year {
    margin: 0;
}

.caap-year label {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--caap-muted);
}

.caap-year .form-control {
    width: 6rem;
    height: 2.5rem;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    background-color: var(--caap-surface);
}

@media (max-width: 767.98px) {
    .caap-page-actions .caap-scan {
        width: 100%;
    }
}

/* Buscadores "campo + botón" de los filtros: los módulos les ponen width:80% / 20% en línea.
   Se acomodan como un input-group normal (campo flexible y botón de su tamaño). */
.input-group:has(> .form-outline) {
    flex-wrap: nowrap; /* el botón de la lupa se iba a la línea de abajo */
}

.input-group > .form-outline {
    flex: 1 1 0%;
    width: auto !important;
    min-width: 0;
}

.input-group > .form-outline + .btn {
    flex: none;
    width: auto !important;
    min-width: 2.5rem;
    height: 2.5rem;
}

.input-group > .form-outline > .form-control {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.input-group > .form-outline + .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* Card de tabla con encabezado (título + acciones) */
.caap-table-card > .card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--caap-border);
}

.caap-table-card > .card-header::after {
    display: none; /* AdminLTE agrega un ::after que en flex se vuelve un hueco */
}

.caap-table-title {
    font-size: 1.0625rem;
    font-weight: 700;
}

.caap-table-sub {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--caap-muted);
}

.caap-table-card > .card-body {
    padding: 1rem 1.25rem;
}

/* Estado vacío */
.caap-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 3rem 1rem;
    text-align: center;
    background: var(--caap-surface);
    border: 1px dashed var(--caap-input);
    border-radius: var(--caap-radius-lg);
}

.caap-empty > i {
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
    color: #a7b3bf;
}


/* ==========================================================================
   12. Permisos (Modulos/ControlUsuarios/Modulos_Secciones_Botones.php)
   ========================================================================== */
.perm-list {
    overflow: hidden;
    margin-top: 1.25rem;
    background: var(--caap-surface);
    border: 1px solid var(--caap-border);
    border-radius: var(--caap-radius-lg);
    box-shadow: var(--caap-shadow-sm);
}

.perm-module + .perm-module {
    border-top: 1px solid var(--caap-border);
}

.perm-module-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1.25rem 0.75rem 0.75rem;
    transition: background-color 0.15s ease;
}

.perm-module-head:hover {
    background: var(--caap-subtle);
}

.perm-toggle {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    padding: 0.25rem 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--caap-fg);
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: var(--caap-radius-sm);
}

.perm-toggle.is-static {
    cursor: default;
}

.perm-chevron {
    flex: none;
    width: 1rem;
    font-size: 0.875rem;
    color: var(--caap-muted);
    transition: transform 0.2s var(--caap-ease);
}

.perm-toggle:not(.collapsed):not(.is-static) .perm-chevron {
    transform: rotate(90deg);
}

.perm-toggle.is-static .perm-chevron {
    visibility: hidden;
}

.perm-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    font-size: 1rem;
    color: var(--caap-steel-700);
    background: linear-gradient(180deg, #fff, var(--caap-steel-50));
    border: 1px solid var(--caap-steel-200);
    border-radius: var(--caap-radius);
}

.perm-icon img {
    width: 1.25rem;
    height: 1.25rem;
    object-fit: contain;
}

.perm-icon-sm {
    width: 2rem;
    height: 2rem;
    font-size: 0.875rem;
}

.perm-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.perm-tag {
    padding: 0.125rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--caap-steel-700);
    text-transform: uppercase;
    background: var(--caap-steel-100);
    border-radius: 999px;
}

.perm-controls {
    display: flex;
    flex: none;
    align-items: center;
    gap: 0.875rem;
    margin-left: auto;
}

.perm-order {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--caap-muted) !important;
}

.perm-order .OrdenModulo {
    width: 4rem;
    height: 2.125rem;
    min-height: 0;
    padding: 0.25rem 0.375rem;
    font-weight: 700;
    color: var(--caap-fg);
    text-align: center;
}

.perm-module-body {
    padding: 0.25rem 1.25rem 1.25rem 3.75rem;
    background: var(--caap-subtle);
    border-top: 1px solid var(--caap-border);
}

.perm-sections {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
    gap: 0.875rem;
    padding-top: 1rem;
}

.perm-section {
    background: var(--caap-surface);
    border: 1px solid var(--caap-border);
    border-radius: var(--caap-radius);
    box-shadow: var(--caap-shadow-xs);
}

.perm-section-head {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0.875rem;
    font-weight: 700;
    border-bottom: 1px solid var(--caap-border);
}

.perm-actions {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 0.5rem;
    padding: 0.75rem 0.875rem 0.875rem;
}

.perm-module-body > .perm-actions {
    padding: 1rem 0 0;
}

.perm-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.375rem 0.375rem 0.375rem 0.625rem;
    background: var(--caap-surface);
    border: 1px solid var(--caap-border);
    border-radius: var(--caap-radius-sm);
}

.perm-action-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    overflow: hidden;
    font-size: 0.875rem;
    color: var(--caap-fg);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.perm-action-label .fa {
    width: 1rem;
    color: var(--caap-steel-500);
    text-align: center;
}

.perm-savebar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: rgb(255 255 255 / 0.92);
    backdrop-filter: blur(6px);
    border: 1px solid var(--caap-border);
    border-radius: var(--caap-radius-lg);
    box-shadow: var(--caap-shadow-md);
}

/* Switches de EasyUI con los colores del tema */
.switchbutton {
    border-color: var(--caap-input) !important;
    border-radius: 999px !important;
}

.switchbutton-on {
    color: #fff !important;
    background: var(--caap-success) !important;
}

.switchbutton-off {
    color: var(--caap-muted) !important;
    background: var(--caap-steel-100) !important;
}

.switchbutton-handle {
    background: #fff !important;
    border-color: var(--caap-input) !important;
    border-radius: 999px !important;
    box-shadow: var(--caap-shadow-xs);
}

@media (max-width: 767.98px) {
    .perm-module-head {
        flex-wrap: wrap;
    }

    .perm-module-body {
        padding-left: 1.25rem;
    }

    .perm-sections {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================================
   13. Loader (assets/js/plugins/preload/preload.js -> CAAPLoader)
   Tres contenedores que se apilan, en los colores del logo.
   ========================================================================== */
.caap-loader-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(244 246 248 / 0.7);
    backdrop-filter: blur(3px);
    animation: caap-fade 0.2s ease both;
}

.caap-loader-inline {
    display: flex;
    justify-content: center;
    padding: 4rem 1rem;
}

.caap-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.875rem;
}

.caap-loader-overlay .caap-loader {
    padding: 1.5rem 2rem;
    background: var(--caap-surface);
    border: 1px solid var(--caap-border);
    border-radius: var(--caap-radius-lg);
    box-shadow: var(--caap-shadow-lg);
}

.caap-loader-stack {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-start;
    align-items: center;
    gap: 3px;
    height: 4.125rem;
}

/* Cada contenedor: lámina corrugada con remates en los extremos */
.caap-loader-stack span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 1.25rem;
    border-radius: 2px;
    background:
        linear-gradient(90deg, rgb(0 0 0 / 0.25) 0 3px, transparent 3px calc(100% - 3px), rgb(0 0 0 / 0.25) calc(100% - 3px)),
        repeating-linear-gradient(90deg, var(--caap-steel-500) 0 3px, var(--caap-steel-600) 3px 5px);
    box-shadow: 0 2px 4px rgb(16 24 40 / 0.15);
    opacity: 0;
    animation: caap-stack 1.8s var(--caap-ease) infinite;
}

.caap-loader-stack span:nth-child(2) {
    width: 4.5rem;
    animation-delay: 0.2s;
}

/* El de arriba es el contenedor del logo: "CAAP" en cian */
.caap-loader-stack .caap-loader-brand {
    width: 5.5rem;
    height: 1.375rem;
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.18em;
    line-height: 1;
    color: var(--caap-cyan-300);
    text-indent: 0.18em; /* compensa el letter-spacing para centrar */
    background:
        linear-gradient(90deg, rgb(0 0 0 / 0.3) 0 3px, transparent 3px calc(100% - 3px), rgb(0 0 0 / 0.3) calc(100% - 3px)),
        repeating-linear-gradient(90deg, var(--caap-steel-700) 0 3px, var(--caap-steel-800) 3px 5px);
    animation-delay: 0.4s;
}

.caap-loader-text {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--caap-muted);
}

/* Bajan como si los acomodara una grúa, se quedan y se retiran juntos */
@keyframes caap-stack {
    0% { opacity: 0; translate: 0 -14px; }
    18% { opacity: 1; translate: none; }
    78% { opacity: 1; translate: none; }
    100% { opacity: 0; translate: none; }
}


/* ==========================================================================
   14. Animaciones (CSS puro, sutiles)
   ========================================================================== */
/* Se anima "translate" (no "transform") para no pisar el transform de hover
   ni el que usa Popper para posicionar los dropdowns */
@keyframes caap-enter {
    from { opacity: 0; translate: 0 6px; }
    to { opacity: 1; translate: none; }
}

@keyframes caap-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes caap-pop {
    from { opacity: 0; translate: 0 -4px; }
    to { opacity: 1; translate: none; }
}

@keyframes caap-spin {
    to { transform: rotate(360deg); }
}

/* Cada pantalla que se carga en el contenedor entra suave */
#Contenedor > * {
    animation: caap-enter 0.3s var(--caap-ease) both;
}

/* Menús desplegables */
.dropdown-menu.show {
    animation: caap-pop 0.16s var(--caap-ease) both;
}

/* Modales: entran un poco desde abajo */
.modal.fade .modal-dialog {
    transform: translateY(12px) scale(0.98);
    transition: transform 0.25s var(--caap-ease), opacity 0.2s ease;
}

.modal.show .modal-dialog {
    transform: none;
}

/* Filas de tabla al dibujarse */
table.dataTable tbody tr {
    animation: caap-fade 0.25s ease both;
}

/* Ícono de "Refrescar" (assets/js/caap-ui.js) */
.caap-spin {
    animation: caap-spin 0.7s var(--caap-ease);
}

/* Quien prefiera menos movimiento no ve animaciones */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .caap-loader-stack span {
        opacity: 1;
        animation: none !important;
    }
}


/* ==========================================================================
   15. Compatibilidad Bootstrap 4 y utilidades
   ========================================================================== */

/* Badges de Bootstrap 4 armados en controladores, JS o guardados en la base
   (C_Estatus_Pase_Visita.clase) */
.badge-primary { color: #fff; background-color: var(--caap-primary); }
.badge-secondary { color: var(--caap-steel-900); background-color: var(--caap-steel-100); }
.badge-success { color: #fff; background-color: var(--caap-success); }
.badge-danger { color: #fff; background-color: var(--caap-danger); }
.badge-warning { color: #3b2604; background-color: #fbbf24; }
.badge-info { color: var(--caap-steel-950); background-color: var(--caap-cyan-400); }

/* Notificaciones (iao-alert) y SweetAlert */
.swal2-popup {
    font-family: var(--bs-body-font-family) !important;
    border-radius: var(--caap-radius-lg) !important;
}

.swal2-container.swal2-shown {
    background-color: rgb(18 29 40 / 0.45) !important;
}

/* Confirmaciones y mensajes (Confirmacion / Mensaje en funciones.js): compactos, como un modal del sistema */
.swal2-popup.caap-swal {
    width: min(28rem, calc(100vw - 2rem)) !important;
    padding: 1.5rem 1.5rem 1.25rem !important;
    border: 1px solid var(--caap-border);
    box-shadow: var(--caap-shadow-lg);
}

/* SweetAlert dibuja el ícono a 80px con piezas internas en px: se escala completo */
.caap-swal .swal2-icon {
    zoom: 0.7;
    margin: 0.25rem auto 1.25rem !important;
}

.caap-swal .swal2-icon.swal2-warning {
    color: #b7791f !important;
    border-color: #f5d48a !important;
}

.caap-swal .swal2-icon.swal2-question,
.caap-swal .swal2-icon.swal2-info {
    color: var(--caap-steel-600) !important;
    border-color: var(--caap-steel-200) !important;
}

.caap-swal .swal2-icon.swal2-error {
    border-color: #f5b3b3 !important;
}

.caap-swal .swal2-icon.swal2-error [class^="swal2-x-mark-line"] {
    background-color: var(--caap-danger) !important;
}

.caap-swal .swal2-icon.swal2-success [class^="swal2-success-line"] {
    background-color: var(--caap-success) !important;
}

.caap-swal .swal2-icon.swal2-success .swal2-success-ring {
    border-color: #b7e4c7 !important;
}

.caap-swal .swal2-title {
    margin: 0 0 0.375rem !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: var(--caap-fg) !important;
}

.caap-swal .swal2-content {
    font-size: 0.9375rem !important;
    line-height: 1.5;
    color: var(--caap-muted) !important;
}

.caap-swal .swal2-actions {
    gap: 0.5rem;
    margin-top: 1.375rem !important;
}

.caap-swal .swal2-actions .btn {
    min-width: 7.5rem;
    height: 2.5rem;
    margin: 0 !important;
    padding: 0 1rem;
    font-weight: 700;
}

.min-w-0 {
    min-width: 0;
}