/* ══════════════════════════════════════
   Layout base
══════════════════════════════════════ */
html, body { height: 100%; }

.wrapper {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

/* ══════════════════════════════════════
   Sidebar
══════════════════════════════════════ */
.sidebar {
    width: 240px;
    min-height: 100vh;
    background: #1a2637;
    flex-shrink: 0;
    overflow-y: auto;
}

.sidebar-header {
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,.08);
    padding-right: .3rem;
}
.sidebar .brand {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    padding: .85rem 1rem;
    text-decoration: none;
    min-width: 0;
}
.sidebar .brand:hover { color: #7eb8f7; }

/* Botón colapsar/expandir sidebar (dentro del header del sidebar) */
.sidebar-toggle {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.75);
    border-radius: 6px;
    cursor: pointer;
    transition: background .15s, color .15s, transform .1s, border-color .15s;
    padding: 0;
}
.sidebar-toggle:hover {
    background: rgba(255,255,255,.18);
    border-color: rgba(255,255,255,.25);
    color: #fff;
}
.sidebar-toggle:active { transform: scale(.94); }

/* ── Section label (Sistema, etc.) ─── */
.menu-section-label {
    display: block;
    font-size: .65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: rgba(255,255,255,.35);
    padding: .55rem .85rem .2rem;
}

/* ── L1: Module buttons ─────────────── */
.menu-l1 { margin-bottom: 2px; }

.menu-l1-btn {
    display: flex;
    align-items: center;
    width: 100%;
    border: none;
    border-radius: 6px;
    padding: .42rem .85rem;
    font-size: .83rem;
    font-weight: 600;
    color: #fff;
    background: #2980B9;
    text-align: left;
    cursor: pointer;
    transition: background .15s;
    margin-top: 3px;
}
.menu-l1-btn:hover    { background: #3498DB; }
.menu-l1-btn::after   { content: '▾'; margin-left: auto; transition: transform .2s; }
.menu-l1-btn.collapsed::after { transform: rotate(-90deg); }

/* ── L2: Sub-module buttons ─────────── */
.menu-l2 { margin-top: 2px; }

.menu-l2-btn {
    display: flex;
    align-items: center;
    width: 100%;
    border: none;
    border-radius: 4px;
    padding: .32rem .75rem .32rem 1.1rem;
    font-size: .78rem;
    font-weight: 500;
    color: rgba(255,255,255,.7);
    background: rgba(255,255,255,.06);
    text-align: left;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.menu-l2-btn:hover    { background: rgba(255,255,255,.12); color: #fff; }
.menu-l2-btn::after   { content: '▾'; margin-left: auto; font-size: .7rem; transition: transform .2s; }
.menu-l2-btn.collapsed::after { transform: rotate(-90deg); }

/* ── L2 hoja: ítem navegable directo (sin hijos, sin flecha de colapso) ── */
.menu-l2-btn.menu-l2-leaf { text-decoration: none; }
.menu-l2-btn.menu-l2-leaf::after { content: none; }
.menu-l2-btn.menu-l2-leaf.active { background: #2563eb; color: #fff; }

/* ── L3: Action links ───────────────── */
.menu-l3-link {
    display: block;
    color: rgba(255,255,255,.62);
    border-radius: 4px;
    padding: .28rem .75rem .28rem 1.6rem;
    font-size: .81rem;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.menu-l3-link:hover  { color: #fff; background: rgba(255,255,255,.09); }
.menu-l3-link.active { color: #fff; background: #2563eb; }

/* ── Ítem L3 con botón de favorito ──── */
.menu-l3-item {
    display: flex;
    align-items: center;
}
.menu-l3-item > .menu-l3-link {
    flex: 1;
    min-width: 0;
}
.menu-fav-btn {
    flex-shrink: 0;
    display: none;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,.3);
    cursor: pointer;
    border-radius: 3px;
    padding: 0;
    margin-right: 4px;
    transition: color .12s, background .12s;
}
.menu-l3-item:hover > .menu-fav-btn { display: inline-flex; }
.menu-fav-btn.fav-activo            { display: inline-flex !important; color: #fbbf24; }
.menu-fav-btn:hover                 { color: #fbbf24 !important; background: rgba(255,255,255,.1); }

/* Legacy nav-link kept for Login/Logout links */
.sidebar .nav-link {
    color: rgba(255,255,255,.7);
    border-radius: 6px;
    padding: .4rem .85rem;
    font-size: .875rem;
    transition: background .15s, color .15s;
}
.sidebar .nav-link:hover {
    color: #fff;
    background: rgba(255,255,255,.1);
}
.sidebar .nav-link.active {
    color: #fff;
    background: #2563eb;
}

/* ══════════════════════════════════════
   Main content area
══════════════════════════════════════ */
.main-content {
    flex: 1;
    overflow: hidden;   /* el scroll se mueve a <main> */
    min-width: 0;
    display: flex;
    flex-direction: column;
}
/* <main> es ahora el contenedor con scroll para páginas normales */
.main-content > main {
    min-height: 0;
    overflow-y: auto;
}

/* ══════════════════════════════════════
   Login page
══════════════════════════════════════ */
.login-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #1a2637 0%, #2563eb 100%);
}

.login-card {
    width: 380px;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,.25);
}

/* ══════════════════════════════════════
   Empresa selection cards
══════════════════════════════════════ */
.empresa-card {
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 10px;
    transition: border-color .2s, box-shadow .2s;
}
.empresa-card:hover {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}

/* ══════════════════════════════════════
   Utilities
══════════════════════════════════════ */
.btn:focus, .btn:active:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 .2rem rgba(37,99,235,.25);
}

/* ══════════════════════════════════════
   Sidebar mini (collapsed) — solo aplica en escritorio/tablet (≥768px).
   En el cajón móvil (ver media query más abajo) el sidebar siempre se
   muestra completo, sin importar si "mini" quedó activo desde una sesión
   de escritorio anterior (se guarda en localStorage).
══════════════════════════════════════ */
.sidebar { transition: width .25s ease; }

@media (min-width: 768px) {
    .sidebar.sidebar-mini { width: 52px; }

    .sidebar.sidebar-mini .brand-text,
    .sidebar.sidebar-mini .sidebar-user,
    .sidebar.sidebar-mini .menu-section-label,
    .sidebar.sidebar-mini .menu-l1-text,
    .sidebar.sidebar-mini .sidebar-bottom { display: none !important; }

    .sidebar.sidebar-mini .menu-l1-btn::after { display: none; }
    .sidebar.sidebar-mini .menu-l1-btn { justify-content: center; padding: .45rem .5rem; }
    .sidebar.sidebar-mini #sidebar-accordion .collapse { display: none !important; }

    /* Modo mini: oculta el brand, deja solo el botón centrado */
    .sidebar.sidebar-mini .sidebar-header { padding-right: 0; justify-content: center; }
    .sidebar.sidebar-mini .brand          { display: none; }

    .sidebar.sidebar-mini .menu-l1-icon { margin-right: 0; width: 28px; height: 28px; font-size: .82rem; }
}

.menu-l1-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255,255,255,.18);
    font-size: .7rem;
    font-weight: 700;
    flex-shrink: 0;
    margin-right: 7px;
    text-transform: uppercase;
}

/* ══════════════════════════════════════
   Modal de formularios (oz-modal)
══════════════════════════════════════ */
.oz-modal-head {
    background: linear-gradient(135deg, #1a2637 0%, #2563eb 100%);
    border-bottom: none;
    color: #fff;
}
.oz-modal-head .btn-close-white { filter: brightness(2); opacity: .9; }
.modal-body form .form-label    { font-size: .85rem; }
.modal-body form .form-control,
.modal-body form .form-select   { font-size: .88rem; }
.modal-body form .form-text     { font-size: .75rem; }

/* ══════════════════════════════════════
   Responsive — sidebar como cajón deslizable
   en pantallas angostas (celular/tablet chica)
══════════════════════════════════════ */
@media (max-width: 767.98px) {
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 1050;
        width: 240px;
        transform: translateX(-100%);
        transition: transform .25s ease;
        box-shadow: 6px 0 24px rgba(0,0,0,.3);
    }
    .sidebar.sidebar-open { transform: translateX(0); }

    /* El modo "mini" (colapsado) de escritorio no tiene reglas propias en este
       breakpoint (ver arriba, quedan dentro de @media (min-width:768px)), así
       que aunque la clase "sidebar-mini" siga puesta desde una sesión de
       escritorio anterior, en el cajón móvil el sidebar se ve y se comporta
       exactamente igual que sin ella — sin pelear con la animación de
       Bootstrap al abrir/cerrar los acordeones del menú.
    */

    .sidebar-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 1040;
        background: rgba(0,0,0,.4);
    }
    .sidebar-backdrop.show { display: block; }
}

/* ── Indicador de scroll horizontal en tablas .table-responsive (site.js activa
   estas clases) -- inset: se pinta sobre el borde del propio contenedor, no se
   mueve con el scroll del contenido. Mismo criterio que oz-grid.css. Aplica en
   cualquier ancho, no solo mobile -- el desborde depende del contenido, no del
   breakpoint. ── */
.table-responsive { transition: box-shadow .15s ease; }
.table-responsive.has-scroll-left  { box-shadow: inset 10px 0 8px -8px rgba(15,23,42,.18); }
.table-responsive.has-scroll-right { box-shadow: inset -10px 0 8px -8px rgba(15,23,42,.18); }
.table-responsive.has-scroll-left.has-scroll-right {
    box-shadow: inset 10px 0 8px -8px rgba(15,23,42,.18), inset -10px 0 8px -8px rgba(15,23,42,.18);
}