/* =====================================================================
   Bootstrap 5 — Override de variables CSS
   Hace que btn-primary, badge, text-primary etc. usen paleta Limaro
   ===================================================================== */
:root {
    /* Primario → Azul marino Limaro */
    --bs-primary:             #1B3A6B;
    --bs-primary-rgb:         27, 58, 107;
    --bs-primary-bg-subtle:   #E0F3F9;
    --bs-primary-border-subtle: #B0D4E8;
    --bs-primary-text-emphasis: #122550;
    --bs-link-color:          #1B3A6B;
    --bs-link-color-rgb:      27, 58, 107;
    --bs-link-hover-color:    #122550;

    /* Info → Cian Limaro */
    --bs-info:                #00B5D8;
    --bs-info-rgb:            0, 181, 216;
    --bs-info-bg-subtle:      #E0F7FC;
    --bs-info-border-subtle:  #80D9EC;
    --bs-info-text-emphasis:  #0097B8;

    /* Success */
    --bs-success:             #059669;
    --bs-success-rgb:         5, 150, 105;

    /* Danger */
    --bs-danger:              #DC2626;
    --bs-danger-rgb:          220, 38, 38;

    /* Warning */
    --bs-warning:             #F59E0B;
    --bs-warning-rgb:         245, 158, 11;

    /* Bordes y fondos globales */
    --bs-border-color:        #E2EAF0;
    --bs-border-radius:       0.5rem;
    --bs-border-radius-sm:    0.375rem;
    --bs-border-radius-lg:    0.75rem;
    --bs-border-radius-xl:    1rem;

    /* Body */
    --bs-body-font-family:    'Inter', Arial, 'Helvetica Neue', sans-serif;
    --bs-body-font-size:      14px;
    --bs-body-color:          #0F172A;
    --bs-body-bg:             #F0F7FB;

    /* Cards */
    --bs-card-border-radius:  1rem;
    --bs-card-border-width:   0;
    --bs-card-cap-bg:         #fff;

    /* Sombras en capas — estilo B (Soft UI): dos sombras superpuestas y
       sutiles en vez de una sombra única y fuerte. Reutilizadas en cards,
       kpi-cards y botones para dar sensación de "flotar" en vez de solo
       tener un borde oscuro debajo. */
    --lim-shadow-sm: 0 1px 2px rgba(15,23,42,.04), 0 2px 8px -2px rgba(15,23,42,.06);
    --lim-shadow-md: 0 1px 2px rgba(15,23,42,.05), 0 8px 24px -6px rgba(15,23,42,.10);
    --lim-shadow-lg: 0 4px 8px rgba(15,23,42,.06), 0 16px 40px -8px rgba(15,23,42,.16);
}

/* Botones Bootstrap override */
.btn-primary {
    --bs-btn-bg:               #1B3A6B;
    --bs-btn-border-color:     #1B3A6B;
    --bs-btn-hover-bg:         #122550;
    --bs-btn-hover-border-color: #122550;
    --bs-btn-active-bg:        #0A1628;
    --bs-btn-active-border-color: #0A1628;
    --bs-btn-focus-shadow-rgb: 27, 58, 107;
    font-weight: 600;
}
.btn-info {
    --bs-btn-bg:               #00B5D8;
    --bs-btn-border-color:     #00B5D8;
    --bs-btn-hover-bg:         #0097B8;
    --bs-btn-hover-border-color: #0097B8;
    --bs-btn-color:            #fff;
    --bs-btn-hover-color:      #fff;
    --bs-btn-active-color:     #fff;
    font-weight: 600;
}
.btn-outline-primary {
    --bs-btn-color:            #1B3A6B;
    --bs-btn-border-color:     #1B3A6B;
    --bs-btn-hover-bg:         #1B3A6B;
    --bs-btn-hover-color:      #fff;
    --bs-btn-hover-border-color: #1B3A6B;
    --bs-btn-active-bg:        #122550;
}
.btn-outline-info {
    --bs-btn-color:            #00B5D8;
    --bs-btn-border-color:     #00B5D8;
    --bs-btn-hover-bg:         #00B5D8;
    --bs-btn-hover-color:      #fff;
}

/* Badges Bootstrap override */
.badge.bg-primary, .badge.text-bg-primary { background-color: #1B3A6B !important; }
.badge.bg-info,    .badge.text-bg-info    { background-color: #00B5D8 !important; color: #fff !important; }

/* Forms Bootstrap override */
.form-control:focus, .form-select:focus {
    border-color: #00B5D8 !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 181, 216, 0.2) !important;
}
.form-check-input:checked {
    background-color: #1B3A6B;
    border-color: #1B3A6B;
}

/* Progress bars */
.progress-bar { background-color: #1B3A6B; }

/* Nav tabs */
.nav-tabs .nav-link.active {
    color: #1B3A6B;
    border-bottom-color: #00B5D8;
    border-bottom-width: 2px;
    font-weight: 600;
}
.nav-tabs .nav-link:hover { color: #1B3A6B; }

/* Breadcrumb */
.breadcrumb-item.active { color: #64748B; }
.breadcrumb-item + .breadcrumb-item::before { color: #94A3B8; }

/* Input group */
.input-group-text {
    background-color: #F0F7FB;
    border-color: #E2EAF0;
    color: #64748B;
}

/* Dropdown */
.dropdown-item:hover, .dropdown-item:focus {
    background-color: #E0F3F9;
    color: #1B3A6B;
}
.dropdown-item.active { background-color: #1B3A6B; }

/* Tables */
.table > :not(caption) > * > * { padding: 0.65rem 0.75rem; }
/* .table-hover: ver regla unificada en la sección "Tablas" más abajo
   (table tbody tr:hover td) — se retiró esta duplicada para no tener
   dos reglas de hover compitiendo por especificidad. */

/* Pagination */
.page-item.active .page-link { background-color: #1B3A6B; border-color: #1B3A6B; }
.page-link { color: #1B3A6B; }
.page-link:hover { color: #122550; }

/* Accordion */
.accordion-button:not(.collapsed) {
    color: #1B3A6B;
    background-color: #E0F3F9;
    box-shadow: inset 0 -1px 0 rgba(27,58,107,.15);
}
.accordion-button:focus { box-shadow: 0 0 0 0.2rem rgba(0, 181, 216, 0.2); }

/* Spinner */
.spinner-border.text-primary { color: #1B3A6B !important; }

/* =====================================================================
   Limaro SGC — Estilos v3
   Paleta: Azul Marino #1B3A6B / Cian #00B5D8 / Limaro Software
   ===================================================================== */
:root {
    --lim-blue:        #1B3A6B;
    --lim-blue-dark:   #122550;
    --lim-blue-light:  #E0F3F9;
    --lim-cyan:        #00B5D8;
    --lim-cyan-dark:   #0097B8;
    --lim-cyan-light:  #E0F7FC;
    --lim-orange:      #F97316;
    --lim-orange-dark: #EA580C;
    --lim-amber:       #F59E0B;
    --lim-sidebar-bg:  #143E7E;
    --lim-sidebar-grad-from: #0E2F63;
    --lim-sidebar-grad-to:   #1856A0;
    --lim-sidebar-w:   292px;
    --lim-topbar-h:    60px;
    --lim-text:        #000000;
    --lim-muted:       #64748B;
    --lim-border:      #E2EAF0;
    --lim-card-bg:     #FFFFFF;
    --lim-body-bg:     #F0F7FB;
}

/* ── Reset / Base ───────────────────────────────────────────────────── */
body {
    font-family: 'Inter', Arial, 'Helvetica Neue', sans-serif;
    background: linear-gradient(160deg, #EAF3FF 0%, #F5FAFF 55%, #EAFBFF 100%);
    color: var(--lim-text);
    font-size: 14px;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    position: relative;
}
/* Manchas de color fijas detrás de todo el contenido — el degradado
   plano de antes no le daba al glassmorphism (backdrop-filter: blur en
   .card) nada real que difuminar, así que el efecto vidrio casi no se
   notaba. Estas manchas quedan FIJAS en el viewport (position:fixed, no
   se mueven con el scroll de la página) para que las tarjetas siempre
   tengan algo de color de fondo pasando "detrás" del blur. Opacidad muy
   baja y desenfoque grande para que sea un color ambiental, nunca
   distraiga del contenido ni afecte la legibilidad del texto. */
body::before {
    content: '';
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(circle at 12% 8%,  rgba(0,181,216,.16) 0%, transparent 38%),
        radial-gradient(circle at 88% 18%, rgba(27,58,107,.13) 0%, transparent 42%),
        radial-gradient(circle at 25% 92%, rgba(37,99,235,.10) 0%, transparent 40%),
        radial-gradient(circle at 92% 88%, rgba(0,181,216,.12) 0%, transparent 38%);
}
a { color: var(--lim-blue); text-decoration: none; }
a:hover { color: var(--lim-blue-dark); }

/* ── Botones ────────────────────────────────────────────────────────── */
.btn { border-radius: .6rem; }
.btn-lim-primary {
    background: linear-gradient(135deg, var(--lim-blue), #2563EB);
    border: none; color: #fff;
    font-weight: 600; letter-spacing: .2px;
    border-radius: .65rem;
    box-shadow: 0 1px 2px rgba(27,58,107,.15), 0 4px 12px -2px rgba(27,58,107,.28);
    transition: all .2s cubic-bezier(.2,.8,.2,1);
}
.btn-lim-primary:hover, .btn-lim-primary:focus {
    background: linear-gradient(135deg, var(--lim-blue-dark), var(--lim-blue));
    color: #fff; transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(27,58,107,.2), 0 10px 24px -4px rgba(27,58,107,.4);
}
.btn-lim-orange {
    background: linear-gradient(135deg, var(--lim-cyan), var(--lim-blue));
    border: none; color: #fff; font-weight: 600; border-radius: .65rem;
    box-shadow: 0 1px 2px rgba(0,151,184,.15), 0 4px 12px -2px rgba(0,151,184,.28);
    transition: all .2s cubic-bezier(.2,.8,.2,1);
}
.btn-lim-orange:hover {
    background: linear-gradient(135deg, var(--lim-cyan-dark), var(--lim-blue));
    color: #fff; transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(0,151,184,.2), 0 10px 24px -4px rgba(0,151,184,.4);
}
.btn-lim-cyan {
    background: linear-gradient(135deg, var(--lim-cyan), #29D2EE);
    border: none; color: #fff; font-weight: 600; border-radius: .65rem;
    box-shadow: 0 1px 2px rgba(0,181,216,.15), 0 4px 12px -2px rgba(0,181,216,.28);
    transition: all .2s cubic-bezier(.2,.8,.2,1);
}
.btn-lim-cyan:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(0,181,216,.2), 0 10px 24px -4px rgba(0,181,216,.4); }

/* ── Layout ─────────────────────────────────────────────────────────── */
.wrapper { display: flex; min-height: 100vh; }

/* ── Sidebar ────────────────────────────────────────────────────────── */
#sidebar {
    width: var(--lim-sidebar-w); min-width: var(--lim-sidebar-w);
    background: linear-gradient(160deg, var(--lim-sidebar-grad-from) 0%, var(--lim-sidebar-bg) 50%, var(--lim-sidebar-grad-to) 100%);
    color: rgba(255,255,255,0.95);
    display: flex; flex-direction: column;
    position: fixed; top: 0; left: 0; bottom: 0;
    z-index: 1000;
    transition: width .25s ease, transform .25s ease;
    overflow-y: auto; overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.1) transparent;
}
#sidebar.collapsed { width: 60px; min-width: 60px; }
#sidebar.collapsed .sidebar-label,
#sidebar.collapsed .sidebar-arrow,
#sidebar.collapsed .sidebar-brand-text { display: none !important; }
#sidebar.collapsed .sidebar-brand { justify-content: center; padding: 0 10px; }

/* Brand */
.sidebar-brand {
    display: flex; align-items: center; gap: 10px;
    padding: 16px 16px 14px;
    border-bottom: 1px solid rgba(0,181,216,.15);
    text-decoration: none; color: #fff;
    background: linear-gradient(180deg, rgba(0,181,216,.12) 0%, transparent 100%);
}
.sidebar-logo {
    width: 38px; height: 38px; border-radius: 10px;
    object-fit: cover; flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.sidebar-brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.sidebar-brand-text strong { font-size: 13.5px; font-weight: 700; color: #fff; }
.sidebar-brand-text small { font-size: 10px; color: var(--lim-cyan); font-weight: 400; letter-spacing: .4px; }

/* Nav */
.sidebar-nav { padding: 8px 0; flex: 1; }
.sidebar-section {
    padding: 18px 14px 4px;
    font-size: 9px; font-weight: 700;
    letter-spacing: 1.2px; text-transform: uppercase;
    color: var(--lim-cyan); opacity: .65;
}
.sidebar-item { list-style: none; margin: 0; }
.sidebar-link {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 14px; color: rgba(255,255,255,0.85);
    font-size: 13px; font-weight: 500;
    border-radius: .6rem; margin: 2px 8px;
    transition: all .2s cubic-bezier(.2,.8,.2,1);
    cursor: pointer; white-space: nowrap; text-decoration: none;
}
.sidebar-link:hover {
    background: rgba(255,255,255,.08); color: #fff; text-decoration: none;
    transform: translateX(2px);
}
.sidebar-link.active,
.sidebar-link[aria-expanded="true"] {
    background: linear-gradient(135deg, rgba(0,181,216,.28), rgba(0,181,216,.14));
    color: #fff; font-weight: 600;
    box-shadow: inset 0 0 0 1px rgba(0,181,216,.3);
}
.sidebar-link .bi { font-size: 15px; flex-shrink: 0; width: 18px; text-align: center; }
/* Etiquetas largas (ej. "Evaluación de Desempeño") en un menú angosto no
   deben empujar la flecha fuera de vista — se trunca el texto en vez de
   desbordar, y la flecha nunca se encoge. */
.sidebar-link span.sidebar-label { overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1 1 auto; }
.sidebar-arrow { margin-left: auto; font-size: 10px; flex-shrink: 0; transition: transform .2s cubic-bezier(.2,.8,.2,1); }
.sidebar-link[aria-expanded="true"] .sidebar-arrow { transform: rotate(90deg); }
.sidebar-submenu { background: rgba(0,0,0,.15); overflow: hidden; border-radius: .6rem; margin: 0 8px; }
.sidebar-submenu .sidebar-link {
    padding-left: 40px; font-size: 12.5px; font-weight: 400;
    border-radius: .5rem; margin: 2px 4px;
}
.sidebar-submenu .sidebar-link.active {
    background: rgba(0,181,216,.2); color: #E0F7FC;
    box-shadow: inset 0 0 0 1px rgba(0,181,216,.25);
}
.sidebar-subsubmenu { background: rgba(0,0,0,.08); }
.sidebar-subsubmenu .sidebar-link { padding-left: 58px; font-size: 12px; }

/* ── Sidebar footer / Limaro logo ──────────────────────────────────── */
.sidebar-footer {
    padding: 12px 16px;
    border-top: 1px solid rgba(0,181,216,.12);
    text-align: center;
}
.sidebar-footer img {
    max-width: 120px; height: auto;
    /*filter: brightness(0) invert(1);*/
    /*opacity: .45;*/
    border-radius: 14px; 
    transition: opacity .2s;
}
.sidebar-footer img:hover { opacity: .75; }
.sidebar-footer-text {
    font-size: 9px; color: rgba(255,255,255,.3);
    margin-top: 4px; letter-spacing: .5px;
}
#sidebar.collapsed .sidebar-footer { display: none; }

/* ── Topbar ─────────────────────────────────────────────────────────── */
#topbar {
    height: var(--lim-topbar-h);
    background: rgba(255,255,255,.85);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--lim-border);
    display: flex; align-items: center;
    padding: 0 20px; gap: 12px;
    position: fixed; top: 0; right: 0;
    left: var(--lim-sidebar-w); z-index: 900;
    transition: left .25s;
    box-shadow: var(--lim-shadow-sm);
}
body.sidebar-collapsed #topbar { left: 60px; }
.topbar-toggle {
    background: none; border: none;
    font-size: 20px; color: var(--lim-blue);
    cursor: pointer; padding: 6px; border-radius: 8px;
    line-height: 1; transition: background .15s;
}
.topbar-toggle:hover { background: var(--lim-blue-light); }
.topbar-breadcrumb { flex: 1; font-size: 13px; color: var(--lim-muted); }
.topbar-breadcrumb strong { color: var(--lim-text); }
.topbar-user { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.topbar-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 2px solid var(--lim-cyan-light); }

/* ── Contenido principal ────────────────────────────────────────────── */
#main-content {
    margin-left: var(--lim-sidebar-w);
    margin-top: var(--lim-topbar-h);
    padding: 24px 24px 80px; /* 80px para el footer */
    flex: 1;
    /* BUG corregido: un hijo flex sin min-width:0 nunca se encoge por
       debajo del ancho intrínseco de su contenido — una sola tabla ancha
       en cualquier página (incluso dentro de .table-responsive, que
       depende de que su contenedor SÍ pueda encogerse) empujaba todo
       #main-content, #topbar y #app-footer más allá del viewport en
       móvil, produciendo scroll horizontal de la página completa en vez
       de que el scroll quedara contenido dentro de la tabla. Afectaba
       cualquier listado con tabla ancha, no solo los tocados en esta
       sesión — es la causa raíz, no un parche por página.
    */
    min-width: 0;
    transition: margin-left .25s;
    min-height: calc(100vh - var(--lim-topbar-h));
    display: flex; flex-direction: column;
}
body.sidebar-collapsed #main-content { margin-left: 60px; }

/* ── Footer ─────────────────────────────────────────────────────────── */
#app-footer {
    position: fixed; bottom: 0; right: 0;
    left: var(--lim-sidebar-w);
    background: linear-gradient(90deg, var(--lim-blue-dark), var(--lim-blue));
    color: rgba(255,255,255,.7);
    font-size: 11px;
    padding: 7px 20px;
    display: flex; align-items: center; justify-content: center; gap: 16px;
    z-index: 800;
    transition: left .25s;
    letter-spacing: .3px;
}
body.sidebar-collapsed #app-footer { left: 60px; }
#app-footer a { color: var(--lim-cyan); text-decoration: none; font-weight: 600; }
#app-footer a:hover { color: #fff; }
#app-footer .footer-sep { opacity: .3; }

/* ── Cards ──────────────────────────────────────────────────────────── */
.card {
    border: 1px solid rgba(255,255,255,.6);
    border-radius: 1rem;
    background: rgba(255,255,255,.85);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    /* El borde translúcido se REPITE como anillo interno (box-shadow
       inset) además del border real de arriba — muchas vistas (Home,
       entre otras) combinan class="card border-0" para quitar el borde
       clásico, pero Bootstrap define .border-0 con !important, que
       también anula ESTE border y dejaba esas tarjetas sin el efecto de
       vidrio. El inset no es afectado por .border-0 (que solo toca la
       propiedad border), así que el efecto se conserva en ambos casos. */
    box-shadow: var(--lim-shadow-sm), inset 0 0 0 1px rgba(255,255,255,.5);
    transition: box-shadow .25s cubic-bezier(.2,.8,.2,1), transform .25s cubic-bezier(.2,.8,.2,1);
    animation: limFadeInUp .45s cubic-bezier(.2,.8,.2,1) both;
}
.card:hover { box-shadow: var(--lim-shadow-md), inset 0 0 0 1px rgba(255,255,255,.5); }
.card-header {
    background: rgba(255,255,255,.4); border-bottom: 1px solid var(--lim-border);
    border-radius: 1rem 1rem 0 0 !important;
    font-weight: 600; font-size: 14px;
    color: var(--lim-blue-dark); padding: 14px 18px;
}

/* Animación de entrada suave — cards y kpi-cards aparecen con un ligero
   fade + deslizamiento en vez de aparecer de golpe. Respeta
   prefers-reduced-motion (ver regla al final del archivo). */
@keyframes limFadeInUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── KPI Cards ──────────────────────────────────────────────────────── */
.kpi-card {
    border-radius: 0.8rem; padding: 12px 14px; color: #fff;
    position: relative; overflow: hidden; border: none;
    box-shadow: var(--lim-shadow-md);
    transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s cubic-bezier(.2,.8,.2,1);
    animation: limFadeInUp .5s cubic-bezier(.2,.8,.2,1) both;
}
.kpi-card:hover { transform: translateY(-3px); box-shadow: var(--lim-shadow-lg); }
/* Mancha de luz translúcida en la esquina — detalle del estilo Soft UI/Glass */
.kpi-card::before {
    content: ''; position: absolute; top: -30%; right: -20%;
    width: 120px; height: 120px; border-radius: 50%;
    background: rgba(255,255,255,.12); pointer-events: none;
}
.kpi-card .kpi-num { font-size: 26px; font-weight: 800; line-height: 1; letter-spacing: -.5px; }
.kpi-card .kpi-label { font-size: 11.5px; opacity: .9; margin-top: 3px; font-weight: 600; }
.kpi-card .kpi-icon { position: absolute; right: 12px; bottom: 8px; font-size: 30px; opacity: .18; }
.kpi-blue   { background: linear-gradient(150deg, #1B3A6B, #2563EB); }
.kpi-orange { background: linear-gradient(150deg, #F97316, #FB923C); }
.kpi-green  { background: linear-gradient(150deg, #059669, #4ADE80); }
.kpi-teal   { background: linear-gradient(150deg, var(--lim-cyan-dark), var(--lim-cyan)); }
.kpi-amber  { background: linear-gradient(150deg, #D97706, #FBBF24); }
.kpi-rose   { background: linear-gradient(150deg, #E11D48, #FB7185); }
.kpi-red    { background: linear-gradient(150deg, #DC2626, #F87171); }

/* ── Tablas ─────────────────────────────────────────────────────────── */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--lim-border); border-radius: 8px; padding: 4px 10px; font-size: 13px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--lim-blue) !important; border-color: var(--lim-blue) !important;
    color: #fff !important; border-radius: 8px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--lim-blue-light) !important; border-color: var(--lim-blue-light) !important;
    color: var(--lim-blue) !important; border-radius: 8px !important;
}

/* Encabezado más discreto (texto en mayúsculas pequeñas, fondo suave) en
   vez del degradado azul fuerte de antes — estilo más contemporáneo,
   menos "banner". Consolidado en UNA regla: antes había 3 reglas
   distintas (fondo degradado + color:#000 + color:#fff parche final)
   compitiendo por el color del texto del encabezado. */
table thead tr th, table.dataTable thead tr th,
.dataTables_scrollHead table thead tr th, table > thead > tr > th {
    background: #F8FAFC !important;
    color: var(--lim-blue-dark) !important; font-weight: 700 !important;
    font-size: 11px !important; text-transform: uppercase; letter-spacing: .5px;
    border: none !important; border-bottom: 2px solid var(--lim-border) !important;
    white-space: nowrap; padding: 12px !important;
}

/* ── Tipografía y bordes globales de tablas ── */
table, table.dataTable {
    font-family: 'Inter', Arial, 'Helvetica Neue', sans-serif !important;
    font-size: 13.5px !important;
    border-collapse: collapse !important;
    border: none !important;
    width: 100% !important;
}
table th, table.dataTable th {
    font-family: 'Inter', Arial, 'Helvetica Neue', sans-serif !important;
}
table td, table.dataTable td {
    font-family: 'Inter', Arial, 'Helvetica Neue', sans-serif !important;
    font-size: 13.5px !important;
    color: #1E293B !important;
    border: none !important;
    padding: 12px !important;
}
/* Separador entre filas sutil (línea fina) en vez de bordes de celda
   pesados tipo hoja de cálculo — más limpio, más "producto" que "Excel". */
table tbody tr {
    border-bottom: 1px solid #F1F5F9 !important;
}
table tbody tr:hover td { background: rgba(0,181,216,.05) !important; }
/* RowGroup headers — sin borde extra */
tr.group td {
    border-top: 2px solid var(--lim-border) !important;
    border-bottom: 1px solid var(--lim-border) !important;
    background: #FAFBFC !important;
}

/* ── Scroll de tablas: horizontal más prolijo + encabezado fijo ──────
   1) .table-responsive (Bootstrap, ya usada en ~24 vistas) ya trae
      scroll horizontal automático — solo se le da una scrollbar fina y
      con el color de marca en vez de la barra gris genérica del
      navegador.
   2) Encabezado fijo (sticky) al hacer scroll VERTICAL en tablas largas:
      se le da una altura máxima al contenedor (con scroll propio) y el
      thead queda pegado arriba mientras las filas se deslizan debajo —
      técnica CSS pura (position:sticky), sin JavaScript. Se activa con
      la clase .table-scroll-y agregada al .table-responsive donde se
      quiera (no es automático en todas las tablas, para no forzar
      altura fija en listados cortos donde no hace falta). */
.table-responsive {
    scrollbar-width: thin;
    scrollbar-color: var(--lim-cyan) transparent;
}
.table-responsive::-webkit-scrollbar { height: 8px; width: 8px; }
.table-responsive::-webkit-scrollbar-track { background: transparent; }
.table-responsive::-webkit-scrollbar-thumb {
    background: var(--lim-cyan); border-radius: 20px;
    border: 2px solid transparent; background-clip: padding-box;
}
.table-responsive::-webkit-scrollbar-thumb:hover { background: var(--lim-cyan-dark); background-clip: padding-box; }

.table-scroll-y {
    max-height: 70vh;
    overflow-y: auto;
}
.table-scroll-y thead th {
    position: sticky; top: 0; z-index: 10;
    /* El fondo debe ser sólido (no transparente) para que las filas de
       abajo no se transparenten al pasar debajo del encabezado fijo. */
    background: #F8FAFC !important;
    box-shadow: 0 1px 0 var(--lim-border);
}

/* ── Alineación global de tablas ── */
/* Centrado vertical en TODAS las celdas */
table td, table th,
table.dataTable td, table.dataTable th,
table > tbody > tr > td,
table > thead > tr > th {
    vertical-align: middle !important;
}
/* Texto alineado a la izquierda + ajuste de palabras largas.
   El 'justify' anterior repartía las palabras y en columnas angostas
   producía el efecto "remontado"/ragged. Izquierda + wrap lo corrige. */
table td, table.dataTable td {
    text-align: left !important;
    overflow-wrap: anywhere;
    word-break: break-word;
}
/* Encabezados alineados a la izquierda */
table th, table.dataTable th {
    text-align: left !important;
}
/* Excepciones: columnas con centrado explícito (badges, versiones, acciones) */
table td.text-center, table th.text-center,
table td.text-right, table th.text-right {
    text-align: center !important;
    text-justify: none !important;
}
/* Badges y códigos dentro de celdas: centrar inline */
table td .badge, table td code,
table td .btn, table td .btn-group {
    text-align: center !important;
}
table.dataTable tbody tr:hover { background-color: var(--lim-blue-light) !important; }
table.dataTable thead tr:nth-child(2) { background: #EAF3F8; }
table.dataTable thead tr:nth-child(2) th { padding: 5px 8px !important; border-top: 2px solid var(--lim-border) !important; vertical-align: middle; font-weight: normal; }
table.dataTable thead tr:nth-child(2) input.col-filter {
    display: block; width: 100%; font-size: 11px; padding: 3px 7px; height: 28px;
    border: 1px solid #B0D4E8; border-radius: 5px; background: #fff; color: var(--lim-text);
    box-sizing: border-box; transition: border-color .15s, box-shadow .15s;
}
table.dataTable thead tr:nth-child(2) input.col-filter:focus {
    border-color: var(--lim-cyan); outline: 0; box-shadow: 0 0 0 3px rgba(0,181,216,.15);
}
table.dataTable thead tr:nth-child(2) input.col-filter::placeholder { color: #adb5bd; font-size: 10.5px; }

/* ── Formularios ────────────────────────────────────────────────────── */
.form-label { font-weight: 600; font-size: 13px; color: #374151; letter-spacing: .1px; }
.form-control, .form-select {
    border-color: var(--lim-border); border-radius: .6rem;
    font-size: 13px; background: #fff;
    transition: border-color .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s cubic-bezier(.2,.8,.2,1);
}
.form-control:focus, .form-select:focus {
    border-color: var(--lim-cyan);
    box-shadow: 0 1px 2px rgba(0,181,216,.1), 0 0 0 3px rgba(0,181,216,.16);
}

/* ── Alerts ─────────────────────────────────────────────────────────── */
.alert { border-radius: 10px; font-size: 13px; border: none; }
.alert-success { background: #ECFDF5; color: #065F46; border-left: 4px solid #059669; }
.alert-danger  { background: #FFF1F2; color: #9F1239; border-left: 4px solid #F43F5E; }
.alert-warning { background: #FFFBEB; color: #92400E; border-left: 4px solid #F59E0B; }
.alert-info    { background: #E0F7FC; color: #0C4A6E; border-left: 4px solid var(--lim-cyan); }

/* ── Page header ────────────────────────────────────────────────────── */
.page-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 26px; flex-wrap: wrap; gap: 10px;
}
.page-header h2 {
    font-size: 21px; font-weight: 800; letter-spacing: -.4px; margin: 0;
    color: var(--lim-blue-dark);
}
.page-header .breadcrumb { margin: 0; font-size: 12px; }

/* ── Badges ─────────────────────────────────────────────────────────── */
.badge { font-size: 11px; font-weight: 700; letter-spacing: .3px; border-radius: 20px; padding: 5px 10px; }

/* ── Timeline ───────────────────────────────────────────────────────── */
.timeline { position: relative; padding-left: 32px; }
.timeline::before { content:''; position:absolute; left:10px; top:0; bottom:0; width:2px; background:var(--lim-border); }
.timeline-item { position: relative; padding: 12px 0 12px 24px; }
.timeline-item::before { content:''; position:absolute; left:-28px; top:18px; width:14px; height:14px; border-radius:50%; background:var(--lim-blue); border:3px solid #fff; box-shadow:0 0 0 2px var(--lim-blue); }
.timeline-item.vigente::before { background:#059669; box-shadow:0 0 0 2px #059669; }
.timeline-item.obsoleto::before { background:#F43F5E; box-shadow:0 0 0 2px #F43F5E; }

/* ── Login — fondo Limaro completo ──────────────────────────────────── */
.login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: stretch;
    background: linear-gradient(145deg, #0f1e38 0%, #1B3A6B 50%, #0097B8 100%);
}

/* Panel izquierdo decorativo */
.login-panel-left {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 50px;
    position: relative;
    overflow: hidden;
}
.login-panel-left::before {
    content: '';
    position: absolute;
    width: 500px; height: 500px;
    border-radius: 50%;
    background: rgba(0,181,216,.08);
    top: -100px; right: -150px;
}
.login-panel-left::after {
    content: '';
    position: absolute;
    width: 300px; height: 300px;
    border-radius: 50%;
    background: rgba(255,255,255,.04);
    bottom: -80px; left: -80px;
}
.login-panel-content {
    position: relative; z-index: 1;
    max-width: 420px; color: #fff;
}
.login-limaro-logo {
    width: 160px; margin-bottom: 32px; display: block;
    background: rgba(255,255,255,.15);
    border-radius: 60px; padding: 12px 16px;
    backdrop-filter: blur(4px);
}
.login-panel-content h2 { font-size: 26px; font-weight: 700; margin-bottom: 10px; line-height: 1.3; }
.login-panel-content p  { font-size: 14px; opacity: .75; margin-bottom: 36px; }
.login-features { display: flex; flex-direction: column; gap: 18px; }
.login-feature  { display: flex; align-items: flex-start; gap: 14px; font-size: 13px; opacity: .85; }
.login-feature i { font-size: 20px; color: var(--lim-cyan); flex-shrink: 0; margin-top: 1px; }

/* Panel derecho — glassmorphism sobre el fondo Limaro */
.login-card {
    width: 100%;
    max-width: 440px;
    padding: 48px 40px;
    background: rgba(255,255,255,.10);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-left: 1px solid rgba(255,255,255,.15);
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
}
.login-card .form-label  { color: rgba(255,255,255,.9); font-weight: 600; }
.login-card .form-control {
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.25);
    color: #fff;
    border-radius: 10px;
}
.login-card .form-control::placeholder { color: rgba(255,255,255,.45); }
.login-card .form-control:focus {
    background: rgba(255,255,255,.18);
    border-color: var(--lim-cyan);
    box-shadow: 0 0 0 3px rgba(0,181,216,.25);
    color: #fff;
}
.login-card .btn-outline-secondary {
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.25);
    color: rgba(255,255,255,.8);
    border-radius: 0 10px 10px 0;
}
.login-card .btn-outline-secondary:hover { background: rgba(255,255,255,.2); color: #fff; }
.login-card .btn-lim-primary {
    background: var(--lim-cyan);
    border-color: var(--lim-cyan);
    color: #fff;
    font-size: 15px;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0,181,216,.4);
}
.login-card .btn-lim-primary:hover {
    background: var(--lim-cyan-dark);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0,181,216,.5);
}
.login-card hr { border-color: rgba(255,255,255,.15); }
.login-card a  { color: var(--lim-cyan) !important; }

.login-logo h1 { color: #fff; font-size: 18px; font-weight: 700; margin: 10px 0 4px; }
.login-logo p  { color: rgba(255,255,255,.65); font-size: 11.5px; margin: 0; }
.login-logo    { text-align: center; margin-bottom: 28px; }

/* Responsive — misma estética en móvil, solo desaparece el panel izq */
@media (max-width: 991px) {
    .login-wrapper { justify-content: center; align-items: center; padding: 20px; }
    .login-card {
        border-radius: 24px;
        border: 1px solid rgba(255,255,255,.15);
        box-shadow: 0 20px 60px rgba(0,0,0,.35);
        max-width: 400px;
        padding: 36px 28px;
    }
}




/* =====================================================================
   RESPONSIVE — Limaro SGC v4
   Estrategia: sobreescribir --lim-sidebar-w a 0 en móvil.
   Esto mueve topbar y main-content sin !important extra.
   ===================================================================== */

/* ── Utilidades ────────────────────────────────────────────────────── */
.skip-link {
    position: absolute; top: -40px; left: 16px;
    background: var(--lim-blue); color: #fff;
    padding: 8px 16px; border-radius: 0 0 8px 8px;
    font-size: 13px; font-weight: 600;
    transition: top .15s; z-index: 9999; text-decoration: none;
}
.skip-link:focus { top: 0; }

#sidebar-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.5); z-index: 1049;
}
#sidebar-overlay.active { display: block; }

.table-responsive-auto { overflow-x: auto; -webkit-overflow-scrolling: touch; }

*:focus-visible { outline: 3px solid var(--lim-cyan) !important; outline-offset: 2px !important; border-radius: 4px; }
*:focus:not(:focus-visible) { outline: none; }
.text-muted { color: #546478 !important; }
.form-label { color: #1E293B !important; }

/* ── MÓVIL ≤991px ──────────────────────────────────────────────────── */
@media (max-width: 991px) {

    /* La variable a 0 mueve topbar y main-content sin ningún !important */
    :root { --lim-sidebar-w: 0px; }

    /* Sidebar: drawer fuera de pantalla */
    #sidebar {
        transform: translateX(-100%);
        z-index: 1050;
        width: 292px !important;
        min-width: 292px !important;
        /* Anular el transition de width para que solo use transform */
        transition: transform .28s ease !important;
    }

    /* Abierto */
    #sidebar.show { transform: translateX(0) !important; }

    /* Colapsar en móvil = cerrar = fuera de pantalla */
    #sidebar.collapsed { transform: translateX(-100%) !important; width: 292px !important; }

    /* En móvil el drawer nunca es icon-only: textos y flechas siempre visibles,
       aunque quede pegada la clase .collapsed heredada del estado desktop. */
    #sidebar .sidebar-label,
    #sidebar.collapsed .sidebar-label,
    #sidebar.collapsed .sidebar-brand-text { display: inline !important; }
    #sidebar.collapsed .sidebar-brand-text { display: flex !important; }

    /* topbar y main-content usan la variable → automáticamente left:0 y margin-left:0 */
    #topbar { left: 0; right: 0; width: 100%; }
    #main-content { margin-left: 0; padding: 18px 14px 72px; }
    #app-footer { left: 0; right: 0; width: 100%; }

    /* Sidebar collapsed no afecta topbar/content en móvil */
    body.sidebar-collapsed #topbar    { left: 0; }
    body.sidebar-collapsed #main-content { margin-left: 0; }
    body.sidebar-collapsed #app-footer   { left: 0; }

    .page-header { flex-direction: column; align-items: flex-start; margin-bottom: 16px; gap: 8px; }
    .page-header h2 { font-size: 17px; }
    .topbar-breadcrumb { display: none; }
    .card:hover { box-shadow: 0 2px 8px rgba(27,58,107,.08); }
}

/* ── SM ≤767px ─────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .card-body { padding: 12px !important; }
    .btn-sm { min-height: 34px; }
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter { float: none !important; text-align: left !important; margin-bottom: 8px; }
    .dataTables_wrapper .dataTables_filter input { width: 100% !important; }
}

/* ── XS ≤575px ─────────────────────────────────────────────────────── */
@media (max-width: 575px) {
    :root { --lim-topbar-h: 54px; }
    #topbar { padding: 0 10px; gap: 8px; }
    #main-content { padding: 12px 10px 68px; }
    .page-header h2 { font-size: 15px; }
    .card { border-radius: 10px; }
    .card-header { padding: 10px 14px; border-radius: 10px 10px 0 0 !important; }
    .table { font-size: 12px; }
    .table td, .table th { padding: 8px 6px !important; }
    .modal-dialog { margin: 8px; }
    .modal-content { border-radius: 14px; }
    #app-footer { font-size: 10px; justify-content: center; flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
    #sidebar { transition: none !important; }
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media print {
    #sidebar, #topbar, #app-footer, .btn,
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_paginate,
    .no-print { display: none !important; }
    #main-content { margin: 0 !important; padding: 0 !important; }
    .card { box-shadow: none !important; border: 1px solid #ddd !important; }
    body { font-size: 12px; color: #000; background: #fff; }
    table thead tr th { background: #f0f0f0 !important; color: #000 !important; }
}

/* ── Filtro Avanzado ──────────────────────────────────────────────────── */
.filtro-avanzado .fa-toggle { background: var(--lim-blue); border-color: var(--lim-blue); color: #fff; }
.filtro-avanzado .fa-toggle:hover { filter: brightness(1.1); }
.filtro-avanzado .fa-panel { border: 1px solid var(--lim-border); box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.filtro-avanzado .fa-sel-col  { border-color: #dc3545; min-width: 160px; }
.filtro-avanzado .fa-sel-crit { border-color: #198754; }
.filtro-avanzado .fa-inp-val,
.filtro-avanzado .fa-sel-val  { border-color: #0d6efd; }
.filtro-avanzado .fa-sel-col:focus,
.filtro-avanzado .fa-sel-crit:focus,
.filtro-avanzado .fa-inp-val:focus,
.filtro-avanzado .fa-sel-val:focus  { box-shadow: 0 0 0 3px rgba(0,181,216,.15); }
.filtro-avanzado .fa-crit-wrap { min-width: 160px; }
.filtro-avanzado .fa-val-wrap  { min-width: 160px; }