/* ============================================
   CEIM - Design System
   Basado en Manual de Normas Graficas CEIM v03 (oct 2024)
   ============================================ */

/* ===========================================
   1. TOKENS DE DISENO (Variables CSS)
   Referencia: Manual de Normas Graficas CEIM
   =========================================== */
:root {
    /* --- Paleta corporativa principal ---
       Pantone 282 U  | CMYK 79/69/36/25 | Uso: color principal del logo "CE", textos, fondos principales
       Pantone 143 C  | CMYK 1/33/85/0   | Uso: color principal del logo "IM", acentos, highlights
       Pantone Black 7| CMYK 63/57/58/64 | Uso: textos oscuros, alternativa al negro puro */
    --ceim-azul:            #454866;  /* Pantone 282 U  - R:69  G:72  B:102 */
    --ceim-amarillo:        #F3AE35;  /* Pantone 143 C  - R:243 G:174 B:53  */
    --ceim-negro:           #3D3935;  /* Pantone Black 7- R:61  G:57  B:53  */

    /* --- Paleta secundaria (solo fondos y graficas) ---
       Pantone P 101-16 U | Uso: fondos oscuros, gradientes
       Pantone P 103-16 C | Uso: fondos, barra inferior papeleria
       Pantone P 24-7 C   | Uso: acentos calidos, iconografia
       Pantone P 24-7 C   | Uso: acentos calidos intensos */
    --ceim-azul-profundo:   #1a1548;  /* Pantone P 101-16 U */
    --ceim-azul-oscuro:     #212C56;  /* Pantone P 103-16 C - R:33  G:44  B:86  */
    --ceim-naranja:         #ED8A23;  /* Pantone P 24-7 C   - R:237 G:138 B:35  */
    --ceim-naranja-oscuro:  #E85B13;  /* Pantone P 24-7 C   - R:232 G:91  B:19  */

    /* --- Grises corporativos --- */
    --ceim-gris-70:         #4D4D4D;  /* K:70 */
    --ceim-gris-30:         #B3B3B3;  /* K:30 */

    /* --- Tokens semanticos ---
       Mapean la paleta corporativa a roles funcionales */
    --ceim-primary:         var(--ceim-azul);
    --ceim-primary-dark:    var(--ceim-azul-oscuro);
    --ceim-secondary:       var(--ceim-gris-70);
    --ceim-accent:          var(--ceim-amarillo);
    --ceim-accent-hover:    var(--ceim-naranja);
    --ceim-danger:          #dc3545;
    --ceim-success:         #198754;
    --ceim-warning:         var(--ceim-naranja);
    --ceim-info:            var(--ceim-azul);

    /* --- Fondos --- */
    --ceim-bg-app:          #F1F2F7;
    --ceim-bg-card:         #ffffff;
    --ceim-bg-input:        #ffffff;
    --ceim-border:          #e0e0e0;
    --ceim-bg-highlight:    #fffbe6;
    --ceim-bg-highlight-alt:#f0e68c;
    --ceim-bg-light:        #f8f9fa;
    --ceim-bg-muted:        #f1f1f1;

    /* --- Colores de estado extendidos --- */
    --ceim-purple:          #673AB7;
    --ceim-grey:            #9E9E9E;
    --ceim-text-muted:      #6c757d;
    --ceim-silicio:         #D32F2F;

    /* --- Tipografia ---
       Web: Ubuntu (Light 300, Regular 400, Medium 500, Bold 700)
       Fallback: Segoe UI (para cuerpo de texto largo) */
    --ceim-font:            'Ubuntu', 'Segoe UI', sans-serif;
    --ceim-font-condensed:  'Ubuntu Condensed', 'Ubuntu', sans-serif;

    /* Escala tipografica */
    --ceim-fs-xs:   0.75rem;   /* 12px */
    --ceim-fs-sm:   0.8125rem; /* 13px */
    --ceim-fs-base: 0.875rem;  /* 14px */
    --ceim-fs-md:   1rem;      /* 16px */
    --ceim-fs-lg:   1.125rem;  /* 18px */
    --ceim-fs-xl:   1.25rem;   /* 20px */
    --ceim-fs-2xl:  1.5rem;    /* 24px */
    --ceim-fs-3xl:  1.875rem;  /* 30px */

    /* --- Espaciado y forma --- */
    --ceim-radius:    8px;
    --ceim-radius-sm: 4px;
    --ceim-radius-lg: 12px;

    /* --- Sombras --- */
    --ceim-shadow-sm:  0 1px 3px rgba(33, 44, 86, 0.08);
    --ceim-shadow:     0 2px 8px rgba(33, 44, 86, 0.10);
    --ceim-shadow-lg:  0 4px 16px rgba(33, 44, 86, 0.15);

    /* --- Transiciones --- */
    --ceim-transition: all 0.2s ease;
}

/* ===========================================
   2. RESET BASE
   =========================================== */
html, body {
    height: 100%;
    font-family: var(--ceim-font);
    font-size: var(--ceim-fs-base);
    color: var(--ceim-negro);
    background-color: var(--ceim-bg-app);
    overflow-x: hidden;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;
}

/* ===========================================
   3. TIPOGRAFIA
   Manual: Ubuntu para web, pesos 300/400/500/700
   =========================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--ceim-font);
    color: var(--ceim-azul-oscuro);
    font-weight: 700;
}

h1 { font-size: var(--ceim-fs-3xl); }
h2 { font-size: var(--ceim-fs-2xl); }
h3 { font-size: var(--ceim-fs-xl); }
h4 { font-size: var(--ceim-fs-lg); }
h5 { font-size: var(--ceim-fs-md); }
h6 { font-size: var(--ceim-fs-base); }

.ceim-title {
    font-weight: 700;
    color: var(--ceim-azul-oscuro);
    border-bottom: 3px solid var(--ceim-amarillo);
    display: inline-block;
    padding-bottom: 0.25rem;
    margin-bottom: 1rem;
}

.ceim-subtitle {
    font-weight: 500;
    color: var(--ceim-azul);
}

/* ===========================================
   4. LINEA MULTICOLOR CORPORATIVA
   Manual: barra decorativa horizontal 6-8px en pie
   Orden: profundo -> azul -> dorado -> naranja oscuro -> naranja
   =========================================== */
.linea-multicolor {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 6px;
    z-index: 1031;
    background: linear-gradient(to right,
        var(--ceim-azul-profundo)   0%  20%,
        var(--ceim-azul)           20%  40%,
        var(--ceim-amarillo)       40%  60%,
        var(--ceim-naranja-oscuro) 60%  80%,
        var(--ceim-naranja)        80% 100%);
}

/* ===========================================
   5. NAVBAR
   =========================================== */
.navbar-ceim {
    background-color: var(--ceim-azul-oscuro);
    padding: 0 1rem;
    min-height: 56px;
    z-index: 1030;
    position: relative;
}

.navbar-ceim .navbar-brand img {
    height: 40px;
}

.navbar-ceim .nav-link {
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--ceim-fs-base);
    font-weight: 400;
    padding: 0.75rem 0.875rem;
    transition: var(--ceim-transition);
}

.navbar-ceim .nav-link:hover,
.navbar-ceim .nav-link:focus {
    color: var(--ceim-amarillo);
}

.navbar-ceim .nav-link.active {
    color: var(--ceim-amarillo);
    font-weight: 500;
}

.navbar-ceim .dropdown-menu {
    border: none;
    border-radius: var(--ceim-radius);
    box-shadow: var(--ceim-shadow-lg);
    padding: 0.5rem 0;
    margin-top: 0.25rem;
}

.navbar-ceim .dropdown-item {
    font-size: var(--ceim-fs-sm);
    padding: 0.5rem 1.25rem;
    transition: var(--ceim-transition);
}

.navbar-ceim .dropdown-item:hover {
    background-color: var(--ceim-azul);
    color: #fff;
}

.navbar-ceim .dropdown-divider {
    margin: 0.25rem 0;
}

.navbar-ceim .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.3);
}

.navbar-ceim .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* User section en navbar */

/* ===========================================
   6. BOTONES
   Variantes: primary, secondary, accent, danger, outline, sm/lg
   =========================================== */

/* Base compartida */
.btn-ceim-primary,
.btn-ceim-secondary,
.btn-ceim-accent,
.btn-ceim-danger,
.btn-ceim-success,
.btn-ceim-outline {
    border-radius: var(--ceim-radius);
    padding: 0.5rem 1.5rem;
    font-size: var(--ceim-fs-base);
    font-weight: 500;
    transition: var(--ceim-transition);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-decoration: none;
    text-align: center;
    line-height: 1.5;
    border: none;
}

.btn-ceim-primary:focus-visible,
.btn-ceim-secondary:focus-visible,
.btn-ceim-accent:focus-visible,
.btn-ceim-danger:focus-visible,
.btn-ceim-success:focus-visible,
.btn-ceim-outline:focus-visible {
    outline: 2px solid var(--ceim-amarillo);
    outline-offset: 2px;
}

/* Primary: azul corporativo */
.btn-ceim-primary {
    background: var(--ceim-azul-oscuro);
    color: #fff;
}

.btn-ceim-primary:hover {
    background: var(--ceim-azul);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: var(--ceim-shadow);
}

/* Secondary: borde azul, fondo transparente */
.btn-ceim-secondary {
    background: transparent;
    color: var(--ceim-azul-oscuro);
    border: 1.5px solid var(--ceim-azul);
}

.btn-ceim-secondary:hover {
    background: var(--ceim-azul);
    color: #fff;
}

/* Accent: amarillo corporativo */
.btn-ceim-accent {
    background: var(--ceim-amarillo);
    color: var(--ceim-azul-oscuro);
    font-weight: 600;
}

.btn-ceim-accent:hover {
    background: var(--ceim-naranja);
    color: #fff;
    transform: translateY(-1px);
}

/* Danger */
.btn-ceim-danger {
    background: var(--ceim-danger);
    color: #fff;
}

.btn-ceim-danger:hover {
    background: #c82333;
    color: #fff;
}

/* Success: verde corporativo */
.btn-ceim-success {
    background: var(--ceim-success);
    color: #fff;
}

.btn-ceim-success:hover {
    background: #146c43;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: var(--ceim-shadow);
}

/* Outline: borde gris, fondo transparente */
.btn-ceim-outline {
    background: transparent;
    color: var(--ceim-gris-70);
    border: 1.5px solid var(--ceim-border);
}

.btn-ceim-outline:hover {
    background: var(--ceim-bg-app);
    border-color: var(--ceim-azul);
    color: var(--ceim-azul);
}

/* Tamanos */
.btn-ceim-sm {
    padding: 0.3rem 1rem;
    font-size: var(--ceim-fs-xs);
}

.btn-ceim-lg {
    padding: 0.65rem 2rem;
    font-size: var(--ceim-fs-md);
}

/* ===========================================
   7. CARDS
   =========================================== */
.card-ceim {
    background: var(--ceim-bg-card);
    border: none;
    border-radius: var(--ceim-radius);
    box-shadow: var(--ceim-shadow);
    transition: var(--ceim-transition);
}

.card-ceim:hover {
    box-shadow: var(--ceim-shadow-lg);
}

.card-ceim .card-header {
    background: var(--ceim-azul-oscuro);
    color: #fff;
    border-radius: var(--ceim-radius) var(--ceim-radius) 0 0;
    padding: 0.75rem 1.25rem;
    font-weight: 500;
    font-size: var(--ceim-fs-base);
}

.card-ceim .card-body {
    padding: 1.25rem;
}

.card-ceim .card-footer {
    background: var(--ceim-bg-app);
    border-top: 1px solid var(--ceim-border);
    padding: 0.75rem 1.25rem;
    border-radius: 0 0 var(--ceim-radius) var(--ceim-radius);
}

/* ===========================================
   8. TABLAS
   =========================================== */
.table-ceim {
    border-radius: var(--ceim-radius);
    overflow: hidden;
}

.table.table-ceim thead th {
    background: var(--ceim-azul-oscuro);
    color: #fff;
    font-weight: 500;
    font-size: var(--ceim-fs-sm);
    padding: 0.75rem;
    border: none;
    white-space: nowrap;
}

.table-ceim tbody td {
    font-size: var(--ceim-fs-sm);
    padding: 0.625rem 0.75rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--ceim-border);
}

.table-ceim tbody tr:hover {
    background-color: rgba(69, 72, 102, 0.05);
}

.table-ceim tbody tr:last-child td {
    border-bottom: none;
}

/* ===========================================
   9. FORMULARIOS
   =========================================== */
.form-control,
.form-select {
    font-size: var(--ceim-fs-base);
    border-radius: var(--ceim-radius-sm);
    border: 1px solid var(--ceim-border);
    transition: var(--ceim-transition);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--ceim-azul);
    box-shadow: 0 0 0 0.2rem rgba(69, 72, 102, 0.15);
}

.form-label {
    font-weight: 500;
    font-size: var(--ceim-fs-sm);
    color: var(--ceim-azul-oscuro);
    margin-bottom: 0.3rem;
}

input, select, textarea {
    max-width: 100%;
}

/* Validation states */
.form-control.is-invalid:focus {
    border-color: var(--ceim-danger);
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.15);
}

/* ===========================================
   10. BADGES
   =========================================== */
.badge-ceim {
    font-size: var(--ceim-fs-xs);
    font-weight: 500;
    padding: 0.3em 0.65em;
    border-radius: var(--ceim-radius-sm);
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
}

.badge-ceim-primary {
    background-color: var(--ceim-azul-oscuro);
    color: #fff;
}

.badge-ceim-accent {
    background-color: var(--ceim-amarillo);
    color: var(--ceim-azul-oscuro);
}

.badge-ceim-success {
    background-color: var(--ceim-success);
    color: #fff;
}

.badge-ceim-danger {
    background-color: var(--ceim-danger);
    color: #fff;
}

.badge-ceim-warning {
    background-color: var(--ceim-naranja);
    color: #fff;
}

.badge-ceim-muted {
    background-color: var(--ceim-gris-30);
    color: var(--ceim-gris-70);
}

/* ===========================================
   11. ALERTAS
   =========================================== */
.alert-ceim {
    border-radius: var(--ceim-radius);
    font-size: var(--ceim-fs-base);
    border: none;
    padding: 0.75rem 1.25rem;
}

.alert-ceim-info {
    background-color: rgba(69, 72, 102, 0.08);
    color: var(--ceim-azul-oscuro);
    border-left: 4px solid var(--ceim-azul);
}

.alert-ceim-success {
    background-color: rgba(25, 135, 84, 0.08);
    color: #0f5132;
    border-left: 4px solid var(--ceim-success);
}

.alert-ceim-warning {
    background-color: rgba(243, 174, 53, 0.10);
    color: #664d03;
    border-left: 4px solid var(--ceim-amarillo);
}

.alert-ceim-danger {
    background-color: rgba(220, 53, 69, 0.08);
    color: #842029;
    border-left: 4px solid var(--ceim-danger);
}

/* ===========================================
   12. MODALES
   =========================================== */
.modal-ceim .modal-header {
    background: var(--ceim-azul-oscuro);
    color: #fff;
    border-bottom: none;
    border-radius: var(--ceim-radius) var(--ceim-radius) 0 0;
    padding: 0.875rem 1.25rem;
}

.modal-ceim .modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.modal-ceim .modal-title {
    font-size: var(--ceim-fs-md);
    font-weight: 500;
}

.modal-ceim .modal-content {
    border: none;
    border-radius: var(--ceim-radius);
    box-shadow: var(--ceim-shadow-lg);
}

.modal-ceim .modal-footer {
    border-top: 1px solid var(--ceim-border);
    padding: 0.75rem 1.25rem;
}

/* ===========================================
   13. FOOTER
   Manual: franja inferior con claim + linea multicolor al pie
   =========================================== */
.footer-ceim {
    background-color: var(--ceim-azul-oscuro);
    color: rgba(255, 255, 255, 0.85);
    padding: 1.25rem 0 0;
    font-family: var(--ceim-font);
    font-size: var(--ceim-fs-sm);
}

.footer-ceim-content {
    padding: 0 1rem 1rem;
}

.footer-ceim-logo {
    max-height: 36px;
}

.footer-ceim-claim {
    font-family: var(--ceim-font);
    font-weight: 700;
    font-size: var(--ceim-fs-sm);
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.05em;
    margin-top: 0.5rem;
}

.footer-ceim-claim .claim-juntos {
    color: var(--ceim-amarillo);
}

.footer-ceim small {
    color: rgba(255, 255, 255, 0.6);
}

.footer-ceim a {
    color: var(--ceim-amarillo);
    text-decoration: none;
}

.footer-ceim a:hover {
    color: #fff;
}

/* ===========================================
   14. SPINNER OVERLAY
   =========================================== */
#spinnerOverlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(33, 44, 86, 0.5);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1rem;
}

#spinnerOverlay .spinner-border {
    width: 3rem;
    height: 3rem;
    color: var(--ceim-amarillo) !important;
}

#spinnerOverlay .spinner-text {
    color: #fff;
    font-family: var(--fuente-principal);
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: 0.5px;
}

/* ===========================================
   15. PAGINACION
   =========================================== */
.pagination-ceim .page-link {
    color: var(--ceim-azul-oscuro);
    border-color: var(--ceim-border);
    font-size: var(--ceim-fs-sm);
    transition: var(--ceim-transition);
}

.pagination-ceim .page-link:hover {
    background-color: var(--ceim-azul-oscuro);
    border-color: var(--ceim-azul-oscuro);
    color: #fff;
}

.pagination-ceim .page-item.active .page-link {
    background-color: var(--ceim-azul-oscuro);
    border-color: var(--ceim-azul-oscuro);
    color: #fff;
}

/* ===========================================
   16. UTILIDADES
   =========================================== */

/* Colores de texto */
.text-ceim-primary   { color: var(--ceim-primary); }
.text-ceim-dark      { color: var(--ceim-azul-oscuro); }
.text-ceim-accent    { color: var(--ceim-accent); }
.text-ceim-muted     { color: var(--ceim-gris-70); }
.text-ceim-danger    { color: var(--ceim-danger); }
.text-ceim-success   { color: var(--ceim-success); }

/* Fondos */
.bg-ceim-primary     { background-color: var(--ceim-primary); }
.bg-ceim-dark        { background-color: var(--ceim-azul-oscuro); }
.bg-ceim-accent      { background-color: var(--ceim-accent); }
.bg-ceim-light       { background-color: var(--ceim-bg-app); }

/* Bordes */
.border-ceim-accent  { border-color: var(--ceim-amarillo) !important; }
.border-ceim-primary { border-color: var(--ceim-azul) !important; }

/* Seccion de pagina con titulo */
.page-header-ceim {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.page-header-ceim .page-title {
    font-size: var(--ceim-fs-xl);
    font-weight: 700;
    color: var(--ceim-azul-oscuro);
    margin: 0;
}

/* Separador con acento */
.divider-ceim {
    border: none;
    height: 2px;
    background: linear-gradient(to right, var(--ceim-amarillo), transparent);
    margin: 1rem 0;
}

/* ===========================================
   17. DATATABLES - Override para estilo CEIM
   =========================================== */

/* Texto de celdas: siempre oscuro */
.table.table-ceim tbody td,
.dataTables_wrapper .table.table-ceim tbody td {
    color: var(--ceim-negro);
}

/* Info, length y filtro */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info {
    font-size: var(--ceim-fs-sm);
    color: var(--ceim-gris-70);
    margin-bottom: 0.75rem;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    border: 1px solid var(--ceim-border);
    border-radius: var(--ceim-radius-sm);
    padding: 0.3rem 0.5rem;
    font-size: var(--ceim-fs-sm);
    transition: var(--ceim-transition);
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--ceim-azul);
    box-shadow: 0 0 0 0.2rem rgba(69, 72, 102, 0.15);
    outline: none;
}

/* Paginacion DataTables -> estilo CEIM */

/* Contenedor de paginacion */
.dt-paging nav .pagination {
    gap: 0.25rem;
    justify-content: flex-end;
    margin-top: 1rem;
}

/* Botones de paginacion (Bootstrap page-link usado por DataTables) */
.dt-paging-button.page-item .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 0.625rem;
    font-size: var(--ceim-fs-sm);
    font-weight: 500;
    color: var(--ceim-azul-oscuro);
    background: var(--ceim-bg-card);
    border: 1px solid var(--ceim-border);
    border-radius: var(--ceim-radius-sm);
    cursor: pointer;
    transition: var(--ceim-transition);
    text-decoration: none;
}

/* Hover */
.dt-paging-button.page-item .page-link:hover {
    background: var(--ceim-azul-oscuro);
    border-color: var(--ceim-azul-oscuro);
    color: #fff;
}

/* Boton activo */
.dt-paging-button.page-item.active .page-link {
    background: var(--ceim-azul-oscuro);
    border-color: var(--ceim-azul-oscuro);
    color: #fff;
    font-weight: 600;
}

/* Botones deshabilitados */
.dt-paging-button.page-item.disabled .page-link {
    color: var(--ceim-gris-30);
    background: var(--ceim-bg-app);
    border-color: var(--ceim-border);
    cursor: not-allowed;
    pointer-events: none;
}

/* Fila inferior DataTables (info + paginacion) */
.dt-layout-row:last-child {
    align-items: center;
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--ceim-border);
}

/* Ordenamiento en headers */
.dataTables_wrapper .table-ceim thead th.sorting,
.dataTables_wrapper .table-ceim thead th.sorting_asc,
.dataTables_wrapper .table-ceim thead th.sorting_desc {
    cursor: pointer;
}

/* ===========================================
   18. BOTONES DE ICONO (Acciones en tablas)
   =========================================== */

/* Grupo de acciones en tabla */
.acciones-grupo {
    display: inline-flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
}

/* Base boton icono */
.btn-ceim-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--ceim-radius);
    border: none;
    font-size: 0.95rem;
    cursor: pointer;
    transition: var(--ceim-transition);
}

.btn-ceim-icon:focus-visible {
    outline: 2px solid var(--ceim-amarillo);
    outline-offset: 2px;
}

/* Variantes */
.btn-ceim-icon-primary {
    background: var(--ceim-azul-oscuro);
    color: #fff;
}

.btn-ceim-icon-primary:hover {
    background: var(--ceim-azul);
    transform: translateY(-1px);
    box-shadow: var(--ceim-shadow-sm);
}

.btn-ceim-icon-danger {
    background: var(--ceim-danger);
    color: #fff;
}

.btn-ceim-icon-danger:hover {
    background: #c82333;
    transform: translateY(-1px);
    box-shadow: var(--ceim-shadow-sm);
}

.btn-ceim-icon-outline {
    background: transparent;
    color: var(--ceim-gris-70);
    border: 1.5px solid var(--ceim-border);
}

.btn-ceim-icon-outline:hover {
    background: var(--ceim-bg-app);
    border-color: var(--ceim-azul);
    color: var(--ceim-azul);
    transform: translateY(-1px);
}

/* ===========================================
   19. LEYENDA DE ACCIONES
   =========================================== */

.leyenda-acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 0.625rem 1rem;
    background: var(--ceim-bg-app);
    border: 1px solid var(--ceim-border);
    border-radius: var(--ceim-radius);
    font-size: var(--ceim-fs-sm);
    color: var(--ceim-gris-70);
}

.leyenda-titulo {
    font-weight: 600;
    color: var(--ceim-negro);
}

.leyenda-item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.leyenda-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: var(--ceim-radius-sm);
    font-size: 0.7rem;
    color: #fff;
}

.leyenda-icono-primary {
    background: var(--ceim-azul-oscuro);
}

.leyenda-icono-danger {
    background: var(--ceim-danger);
}

.leyenda-icono-outline {
    background: transparent;
    color: var(--ceim-gris-70);
    border: 1.5px solid var(--ceim-border);
}

/* ===========================================
   20. RESPONSIVE - Tablas y acciones
   =========================================== */

@media (max-width: 767.98px) {
    /* Tabla: scroll horizontal */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Botones de icono mas compactos en movil */
    .btn-ceim-icon {
        width: 34px;
        height: 34px;
        font-size: 0.85rem;
    }

    .acciones-grupo {
        gap: 0.35rem;
    }

    /* Leyenda apilada verticalmente */
    .leyenda-acciones {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    /* Paginacion compacta */
    .dt-paging-button.page-item .page-link {
        min-width: 32px;
        height: 32px;
        padding: 0 0.4rem;
        font-size: 0.75rem;
    }
}

@media (max-width: 575.98px) {
    /* Header de pagina apilado */
    .page-header-ceim {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .page-header-ceim .btn-ceim-primary {
        width: 100%;
        text-align: center;
    }
}

/* ===========================================
   21. LEGACY COMPAT
   Clases antiguas mapeadas al nuevo sistema
   Eliminar progresivamente
   =========================================== */
.primary-ceim          { background: var(--ceim-azul-oscuro); border-color: var(--ceim-azul-oscuro); color: #fff; }
.primary-ceim:hover,
.primary-ceim:active,
.primary-ceim:focus    { background: var(--ceim-naranja); border-color: var(--ceim-naranja); }
.secondary-ceim        { color: var(--ceim-azul-oscuro); border-color: var(--ceim-azul-oscuro); }
.focus-ceim,
.focus-ceim:hover      { background: var(--ceim-naranja); border-color: var(--ceim-naranja); }
.final-state,
.final-state:hover     { background: var(--ceim-success); border-color: var(--ceim-success); }

.alert-custom          { border-radius: var(--ceim-radius); font-size: var(--ceim-fs-base); border: none; }
.body-content          { margin-top: 15px; padding: 0 15px; }
.user-info             { display: flex; align-items: center; }

/* ===========================================
   18. FULLCALENDAR OVERRIDES
   =========================================== */
.fc-daygrid-event::before { display: none; }
.fc-daygrid-event {
    padding: 0;
    display: flex;
    align-items: center;
}
.fc-event-main {
    display: flex;
    align-items: center;
    position: relative;
}
.fc-event-content {
    display: flex;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
    border-radius: var(--ceim-radius-sm);
    margin: 2px;
}
.fc-event-content i { margin-right: 5px; }

/* Tooltip nativo CSS para eventos */
.fc-event-content::after {
    content: attr(data-title);
    position: absolute;
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 5px 8px;
    border-radius: var(--ceim-radius-sm);
    white-space: pre-wrap;
    z-index: 10000;
    max-width: 300px;
    box-shadow: var(--ceim-shadow);
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    font-size: var(--ceim-fs-xs);
}
.fc-event-content:hover::after { display: block; }

/* ===========================================
   19. RESPONSIVE
   =========================================== */
@media (max-width: 991.98px) {
    .navbar-ceim .navbar-collapse {
        background: var(--ceim-azul-oscuro);
        padding: 0.75rem;
        margin: 0 -1rem;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .navbar-ceim .nav-link {
        padding: 0.5rem 0.75rem !important;
    }

    .navbar-ceim .dropdown-menu {
        background: transparent;
        box-shadow: none;
        padding-left: 1rem;
    }

    .navbar-ceim .dropdown-item {
        color: rgba(255, 255, 255, 0.75);
    }

    .navbar-ceim .dropdown-item:hover {
        background: rgba(255, 255, 255, 0.1);
    }

    .page-header-ceim {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 575.98px) {
    .btn-ceim-primary:not(.btn-ceim-icon),
    .btn-ceim-secondary:not(.btn-ceim-icon),
    .btn-ceim-accent:not(.btn-ceim-icon),
    .btn-ceim-danger:not(.btn-ceim-icon),
    .btn-ceim-success:not(.btn-ceim-icon),
    .btn-ceim-outline:not(.btn-ceim-icon) {
        width: 100%;
    }
}

/* ===========================================
   11. SWEETALERT2 - TEMA CEIM
   =========================================== */
.swal2-popup {
    font-family: 'Ubuntu', 'Segoe UI', sans-serif;
    border-radius: 10px;
    border-top: 4px solid var(--ceim-amarillo);
}

.swal2-title {
    font-family: 'Ubuntu', 'Segoe UI', sans-serif;
    font-weight: 600;
    color: var(--ceim-azul);
    font-size: var(--ceim-fs-xl);
}

.swal2-html-container {
    font-family: 'Ubuntu', 'Segoe UI', sans-serif;
    color: var(--ceim-negro);
    font-size: var(--ceim-fs-sm);
}

.swal2-confirm.swal2-styled {
    background: var(--ceim-azul);
    border-radius: 6px;
    font-weight: 500;
    font-family: 'Ubuntu', 'Segoe UI', sans-serif;
    padding: 8px 24px;
}

.swal2-confirm.swal2-styled:hover {
    background: var(--ceim-azul-oscuro);
}

.swal2-confirm.swal2-styled:focus {
    box-shadow: 0 0 0 3px rgba(69, 72, 102, 0.3);
}

.swal2-cancel.swal2-styled {
    background: transparent;
    color: var(--ceim-gris-70);
    border: 1px solid var(--ceim-border);
    border-radius: 6px;
    font-weight: 500;
    font-family: 'Ubuntu', 'Segoe UI', sans-serif;
    padding: 8px 24px;
}

.swal2-cancel.swal2-styled:hover {
    background: #f5f5f5;
    color: var(--ceim-negro);
}

.swal2-cancel.swal2-styled:focus {
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
}

.swal2-deny.swal2-styled {
    background: var(--ceim-danger);
    border-radius: 6px;
    font-weight: 500;
    font-family: 'Ubuntu', 'Segoe UI', sans-serif;
}

.swal2-icon.swal2-success .swal2-success-ring {
    border-color: var(--ceim-success);
}

.swal2-icon.swal2-success [class^='swal2-success-line'] {
    background-color: var(--ceim-success);
}

.swal2-icon.swal2-warning {
    border-color: var(--ceim-amarillo);
    color: var(--ceim-amarillo);
}

.swal2-icon.swal2-error {
    border-color: var(--ceim-danger);
}

.swal2-icon.swal2-error [class^='swal2-x-mark-line'] {
    background-color: var(--ceim-danger);
}

.swal2-icon.swal2-info {
    border-color: var(--ceim-azul);
    color: var(--ceim-azul);
}

.swal2-actions {
    gap: 8px;
}

.swal2-popup {
    max-width: 900px;
}

.swal-banner-suspendido {
    text-align: center;
    color: var(--ps-suspendido, #673AB7);
    font-weight: 700;
    font-size: var(--ceim-fs-lg);
    margin-bottom: 8px;
}

.swal2-html-container .derecha {
    text-align: right;
    font-weight: 600;
    font-size: var(--ceim-fs-sm);
}

.swal2-html-container .izquierda {
    text-align: left;
    font-size: var(--ceim-fs-sm);
}

.swal-actions-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}

.swal-actions-grid .btn {
    font-size: var(--ceim-fs-sm);
    padding: 5px 14px;
}

@media (max-width: 767.98px) {
    .swal2-popup {
        width: 95% !important;
        padding: 1rem;
    }

    .swal2-html-container .derecha {
        text-align: left;
    }

    .swal-actions-grid {
        flex-direction: column;
    }

    .swal-actions-grid .btn {
        width: 100%;
    }
}

/* ===========================================
   13. TUTORIAL / AYUDA
   =========================================== */
.tutorial-highlight {
    outline: 3px solid var(--ceim-amarillo) !important;
    outline-offset: 4px;
    border-radius: var(--ceim-radius);
    box-shadow: 0 0 16px rgba(243, 174, 53, 0.45);
    transition: outline 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    z-index: 1;
}

.tutorial-popup {
    border-radius: var(--ceim-radius) !important;
    font-size: var(--ceim-fs-sm) !important;
    max-width: 520px !important;
}

.tutorial-popup .swal2-title {
    font-size: var(--ceim-fs-lg) !important;
    color: var(--ceim-azul) !important;
}

.tutorial-popup .swal2-html-container {
    font-size: var(--ceim-fs-sm) !important;
    line-height: 1.5 !important;
}

.tutorial-popup .swal2-html-container ul,
.tutorial-popup .swal2-html-container ol {
    padding-left: 1.2rem;
    margin-bottom: 0.5rem;
}

.tutorial-popup .swal2-html-container li {
    margin-bottom: 0.25rem;
}

.tutorial-popup .swal2-actions {
    gap: 0.5rem;
}

.tutorial-popup .swal2-footer {
    border-top: 1px solid var(--ceim-border);
    padding-top: 0.5rem;
}

.btn-tutorial {
    color: var(--ceim-amarillo);
    border-color: var(--ceim-amarillo);
    background: transparent;
    transition: var(--ceim-transition);
}

.btn-tutorial:hover {
    background: var(--ceim-amarillo);
    color: #fff;
    border-color: var(--ceim-amarillo);
}