/* ============================================================
   shared.css — chrome compartido en TODAS las páginas logueadas:
   topbar (navbar.php) + menú lateral (navlateral.php).
   Extraído de <style> inline el 2026-08-22.
============================================================ */

/* ── navbar.php ── */
:root {
    --blue:#D9232D; --blue-lt:#FFF1F2; --blue-mid:#F6D3D6;
    --teal:#0D9488; --teal-lt:#F0FDFA;
    --violet:#7C3AED; --violet-lt:#F5F3FF;
    --amber:#D97706; --amber-lt:#FFFBEB;
    --coral:#DC2626; --coral-lt:#FEF2F2;
    --gray:#6B7280; --gray-lt:#F9FAFB;
    --surface:#FFFFFF; --border:#E9EAEE;
    --text:#17181C; --muted:#676970;
    --sb-width:272px;
    --tb-height:58px;
    --trans:.28s cubic-bezier(.22,1,.36,1);
}

/* ══ LAYOUT — el truco sin overlay ══
   body.padding-left se expande/contrae con la misma
   transicion que el sidebar. El contenido se desliza
   igual que los chats en Claude.ai. Sin capa oscura.
*/
html, body { height:100%; margin:0; }
body {
    font-family:'Montserrat',sans-serif;
    background:#F6F7F9;
    padding-top: var(--tb-height);
    padding-left: 0;
    transition: padding-left var(--trans);
}
body.sb-open { padding-left: var(--sb-width); }

/* Sidebar fixed — sale/entra por la izquierda */
#navLateral {
    position: fixed !important;
    left: 0 !important;
    top: var(--tb-height) !important;
    height: calc(100vh - var(--tb-height)) !important;
    width: var(--sb-width) !important;
    margin: 0 !important;
    transform: translateX(calc(-1 * var(--sb-width)));
    transition: transform var(--trans) !important;
    z-index: 900;
    will-change: transform;
}
body.sb-open #navLateral { transform: translateX(0); }

/* Limpiar margin-left de los wrappers de contenido */
.db, .db-wrap, .schedule-container, .rx-wrap,
.dashboard-content, .dn-container,
[class$="-wrap"], [class$="-container"] {
    margin-left: 0 !important;
    padding-top: 1.5rem !important;
}

/* ══ TOPBAR ══ */
.topbar {
    position:fixed; top:0; left:0; right:0;
    height:var(--tb-height);
    background:var(--surface); border-bottom:1px solid var(--border);
    box-shadow:0 1px 6px rgba(0,0,0,.05);
    display:flex; align-items:center; justify-content:space-between;
    padding:0 1.2rem; z-index:950;
    font-family:'Montserrat',sans-serif;
}
.topbar-left  { display:flex; align-items:center; gap:.8rem; }
.topbar-right { display:flex; align-items:center; gap:.55rem; position:relative; }

.topbar-toggle {
    width:34px; height:34px; background:var(--gray-lt);
    border:1px solid var(--border); border-radius:9px;
    display:flex; flex-direction:column; align-items:center;
    justify-content:center; gap:4px; cursor:pointer; padding:0;
    transition:background var(--trans),border-color var(--trans); flex-shrink:0;
}
.topbar-toggle:hover,
body.sb-open .topbar-toggle { background:var(--blue-lt); border-color:var(--blue-mid); }
.ham-line {
    display:block; width:15px; height:2px; background:var(--muted);
    border-radius:2px; transition:all .25s ease; transform-origin:center;
}
.topbar-toggle:hover .ham-line { background:var(--blue); }
body.sb-open .ham-line:nth-child(1){ transform:translateY(6px) rotate(45deg); background:var(--blue); }
body.sb-open .ham-line:nth-child(2){ opacity:0; transform:scaleX(0); }
body.sb-open .ham-line:nth-child(3){ transform:translateY(-6px) rotate(-45deg); background:var(--blue); }

.topbar-breadcrumb { display:flex; align-items:center; gap:.5rem; }
.topbar-page-icon {
    width:26px; height:26px; background:var(--blue-lt); border-radius:7px;
    display:flex; align-items:center; justify-content:center;
    color:var(--blue); font-size:.75rem;
}
.topbar-page-name { font-size:.86rem; font-weight:700; color:var(--text); }

.topbar-clock {
    display:flex; align-items:center; gap:.38rem;
    background:var(--gray-lt); border:1px solid var(--border);
    border-radius:8px; padding:.32rem .65rem;
    font-size:.76rem; font-weight:700; color:var(--text);
}
.topbar-clock i { color:var(--blue); font-size:.72rem; }

.topbar-sucursal-pill {
    display:flex; align-items:center; gap:.38rem;
    background:var(--blue-lt); border:1px solid var(--blue-mid);
    border-radius:8px; padding:.32rem .65rem;
    font-size:.76rem; font-weight:700; color:var(--blue);
    max-width:180px;
}
.topbar-sucursal-pill i { font-size:.72rem; flex-shrink:0; }
.topbar-sucursal-pill select {
    border:none; background:transparent; color:inherit; font:inherit;
    font-weight:700; cursor:pointer; max-width:150px; padding:0;
}
.topbar-sucursal-pill select:focus { outline:none; }
.topbar-sucursal-pill-static { cursor:default; }
.topbar-sucursal-pill-static span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:768px) { .topbar-sucursal-pill { display:none; } }

.topbar-icon-btn {
    width:34px; height:34px; background:var(--gray-lt);
    border:1px solid var(--border); border-radius:9px;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; color:var(--muted); font-size:.85rem; position:relative;
    transition:background var(--trans),color var(--trans);
}
.topbar-icon-btn:hover,.topbar-icon-btn.active { background:var(--blue-lt); color:var(--blue); border-color:var(--blue-mid); }
.topbar-notif-dot {
    position:absolute; top:6px; right:6px; width:8px; height:8px;
    background:var(--coral); border-radius:50%; border:1.5px solid var(--surface);
    box-shadow:0 0 0 2px rgba(255,82,82,.25);
    animation:notifPulse 1.8s ease-in-out infinite;
}
@keyframes notifPulse {
    0%,100% { transform:scale(1); }
    50%     { transform:scale(1.25); }
}

/* ── Panel de notificaciones (estilo Facebook) ── */
.topbar-notif-wrap { position:relative; }
.topbar-notif-panel {
    position:absolute; top:calc(100% + 10px); right:0; width:340px; max-width:88vw;
    background:var(--surface); border:1px solid var(--border); border-radius:12px;
    box-shadow:0 8px 28px rgba(0,0,0,.14); z-index:1100; overflow:hidden;
    opacity:0; transform:translateY(-8px) scale(.97); pointer-events:none;
    transition:opacity .18s ease,transform .18s ease;
}
.topbar-notif-panel.open { opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.topbar-notif-panel-head {
    display:flex; align-items:center; justify-content:space-between;
    padding:.85rem 1rem; background:var(--gray-lt); border-bottom:1px solid var(--border);
    font-size:.85rem; font-weight:700; color:var(--text);
    font-family:'Montserrat',sans-serif;
}
.topbar-notif-panel-head i { color:var(--blue); margin-right:.4rem; }
.topbar-notif-count {
    background:var(--coral); color:#fff; font-size:.68rem; font-weight:700;
    border-radius:20px; padding:.1rem .5rem; display:inline-flex; align-items:center;
}
.topbar-notif-list { max-height:360px; overflow-y:auto; }
.topbar-notif-item {
    display:flex; align-items:flex-start; gap:.7rem;
    padding:.75rem 1rem; text-decoration:none;
    border-bottom:1px solid var(--border);
    transition:background var(--trans);
}
.topbar-notif-item:last-child { border-bottom:none; }
.topbar-notif-item:hover { background:var(--blue-lt); }
.tn-ico {
    width:34px; height:34px; border-radius:50%; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; font-size:.85rem;
}
.tn-violet { background:var(--violet-lt); color:var(--violet); }
.tn-coral  { background:var(--coral-lt);  color:var(--coral); }
.tn-blue   { background:var(--blue-lt);   color:var(--blue); }
.tn-title { font-size:.8rem; font-weight:700; color:var(--text); line-height:1.3; }
.tn-sub   { font-size:.72rem; color:var(--muted); margin-top:.15rem; }
.topbar-notif-empty {
    padding:2.2rem 1rem; text-align:center; color:var(--muted);
}
.topbar-notif-empty i { font-size:1.8rem; display:block; margin-bottom:.6rem; color:var(--teal); }
.topbar-notif-empty p { font-size:.8rem; margin:0; }
@media (max-width:480px) {
    .topbar-notif-panel { position:fixed; top:60px; right:.6rem; left:.6rem; width:auto; }
}

.topbar-profile {
    display:flex; align-items:center; gap:.5rem;
    padding:.3rem .65rem .3rem .32rem;
    background:var(--gray-lt); border:1px solid var(--border);
    border-radius:10px; cursor:pointer;
    transition:background var(--trans),border-color var(--trans); user-select:none;
}
.topbar-profile:hover,.topbar-profile.active { background:var(--blue-lt); border-color:var(--blue-mid); }
.topbar-avatar { width:28px; height:28px; border-radius:50%; overflow:hidden; border:1.5px solid var(--blue-mid); flex-shrink:0; }
.topbar-avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.topbar-profile-info { display:flex; flex-direction:column; gap:1px; }
.topbar-profile-name { font-size:.76rem; font-weight:700; color:var(--text); white-space:nowrap; max-width:120px; overflow:hidden; text-overflow:ellipsis; }
.topbar-role-pill { display:inline-flex; align-items:center; gap:.22rem; font-size:.6rem; font-weight:700; padding:.1rem .42rem; border-radius:20px; }
.role-amber  { background:var(--amber-lt);  color:var(--amber); }
.role-blue   { background:var(--blue-lt);   color:var(--blue); }
.role-teal   { background:var(--teal-lt);   color:var(--teal); }
.role-violet { background:var(--violet-lt); color:var(--violet); }
.role-coral  { background:var(--coral-lt);  color:var(--coral); }
.role-gray   { background:var(--gray-lt);   color:var(--gray); }
.topbar-profile-arrow { font-size:.58rem; color:var(--muted); flex-shrink:0; transition:transform .2s ease; }
.topbar-profile.active .topbar-profile-arrow { transform:rotate(180deg); }

.topbar-dropdown {
    position:absolute; top:calc(100% + 10px); right:0; width:215px;
    background:var(--surface); border:1px solid var(--border); border-radius:12px;
    box-shadow:0 8px 28px rgba(0,0,0,.12); z-index:1100; overflow:hidden;
    opacity:0; transform:translateY(-8px) scale(.97); pointer-events:none;
    transition:opacity .18s ease,transform .18s ease;
}
.topbar-dropdown.open { opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.topbar-dd-header { display:flex; align-items:center; gap:.65rem; padding:.9rem 1rem; background:var(--gray-lt); }
.topbar-dd-avatar { width:36px; height:36px; border-radius:50%; overflow:hidden; border:2px solid var(--blue-mid); flex-shrink:0; }
.topbar-dd-avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.topbar-dd-name { font-size:.8rem; font-weight:700; color:var(--text); }
.topbar-dd-role { font-size:.68rem; color:var(--muted); }
.topbar-dd-divider { height:1px; background:var(--border); }
.topbar-dd-item {
    display:flex; align-items:center; gap:.55rem;
    padding:.58rem 1rem; font-size:.8rem; font-weight:500;
    color:var(--muted); text-decoration:none;
    transition:background var(--trans),color var(--trans);
    font-family:'Montserrat',sans-serif;
}
.topbar-dd-item i { width:14px; text-align:center; font-size:.8rem; }
.topbar-dd-item:hover { background:var(--blue-lt); color:var(--blue); }
.topbar-dd-logout { color:var(--coral); }
.topbar-dd-logout:hover { background:var(--coral-lt); color:var(--coral); }

@media (max-width:1024px) {
    body.sb-open { padding-left:0 !important; }
    .topbar-clock { display:none; }
    .topbar-profile-info { display:none; }
    .topbar-profile { padding:.3rem; }
}
@media (max-width:480px) {
    .topbar-page-name { font-size:.76rem; max-width:100px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}

/* ============================================================
   navlateral.php
============================================================ */
:root {
    --sb-blue:      #D9232D; --sb-blue-lt:   #FFF1F2; --sb-blue-mid:  #F6D3D6;
    --sb-teal:      #0D9488; --sb-teal-lt:   #F0FDFA;
    --sb-violet:    #7C3AED; --sb-violet-lt: #F5F3FF;
    --sb-amber:     #D97706; --sb-amber-lt:  #FFFBEB;
    --sb-coral:     #DC2626; --sb-coral-lt:  #FEF2F2;
    --sb-green:     #16A34A; --sb-green-lt:  #F0FDF4;
    --sb-cyan:      #0891B2; --sb-cyan-lt:   #ECFEFF;
    --sb-gray:      #6B7280; --sb-gray-lt:   #F9FAFB;
    --sb-bg:        #F6F7F9; --sb-surface:   #FFFFFF;
    --sb-border:    #E9EAEE; --sb-text:      #17181C;
    --sb-muted:     #676970; --sb-width:     272px;
    --sb-radius:    12px;
    --sb-trans:     .2s cubic-bezier(.22,1,.36,1);
    --sb-shadow:    0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.04);
    --sb-shadow-md: 0 4px 6px rgba(0,0,0,.06), 0 10px 30px rgba(0,0,0,.08);
}
.sb { width:var(--sb-width); height:100vh; background:var(--sb-surface); border-right:1px solid var(--sb-border); box-shadow:2px 0 16px rgba(0,0,0,.06); position:fixed; left:0; top:0; overflow-y:auto; overflow-x:hidden; transition:transform var(--sb-trans); z-index:1000; font-family:'Montserrat',sans-serif; }
.sb::-webkit-scrollbar { width:3px; }
.sb::-webkit-scrollbar-thumb { background:var(--sb-border); border-radius:4px; }
.sb::-webkit-scrollbar-thumb:hover { background:var(--sb-muted); }
.sb-inner { display:flex; flex-direction:column; padding:1rem .85rem 1.2rem; min-height:100%; gap:.1rem; }

/* ── LOGO con degradado (estilo dashboard) ── */
.sb-logo { display:flex; align-items:center; gap:.7rem; padding:.5rem .4rem .9rem; border-bottom:1px solid var(--sb-border); margin-bottom:.6rem; }
.sb-logo-icon {
    width:40px; height:40px;
    background:linear-gradient(135deg,#d9232d,#a3161f);
    border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    color:white; font-size:1.05rem; flex-shrink:0;
    box-shadow:0 6px 16px rgba(217,35,45,.32);
}
.sb-logo-name { display:block; font-size:.92rem; font-weight:800; color:var(--sb-text); line-height:1.2; }
.sb-logo-sub  { display:block; font-size:.68rem; color:var(--sb-muted); }

/* ── PERFIL con banner degradado y sombra (estilo dashboard) ── */
.sb-profile {
    background:var(--sb-surface);
    border:1px solid var(--sb-border);
    border-radius:14px;
    overflow:hidden;
    margin-bottom:.9rem;
    box-shadow:var(--sb-shadow);
}
.sb-profile-banner { height:46px; background:linear-gradient(135deg,#bf1b27 0%,#e5343e 100%); }
.sb-profile-body { padding:0 .9rem .95rem; margin-top:-22px; }
.sb-avatar {
    width:44px; height:44px;
    border-radius:50%; overflow:hidden;
    border:3px solid white;
    margin-bottom:.5rem;
    background:var(--sb-blue-lt);
    box-shadow:var(--sb-shadow);
}
.sb-avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.sb-profile-name { font-size:.83rem; font-weight:700; color:var(--sb-text); line-height:1.3; }
.sb-profile-user { font-size:.7rem; color:var(--sb-muted); margin-bottom:.4rem; }
.sb-role-badge { display:inline-flex; align-items:center; gap:.32rem; padding:.22rem .7rem; border-radius:20px; font-size:.67rem; font-weight:700; }
.role-amber  { background:var(--sb-amber-lt);  color:var(--sb-amber); }
.role-blue   { background:var(--sb-blue-lt);   color:var(--sb-blue); }
.role-teal   { background:var(--sb-teal-lt);   color:var(--sb-teal); }
.role-violet { background:var(--sb-violet-lt); color:var(--sb-violet); }
.role-coral  { background:var(--sb-coral-lt);  color:var(--sb-coral); }
.role-cyan   { background:var(--sb-cyan-lt);   color:var(--sb-cyan); }
.role-gray   { background:var(--sb-gray-lt);   color:var(--sb-gray); }

.sb-nav { flex:1; }
.sb-section-label { display:block; font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.09em; color:var(--sb-muted); padding:.78rem .5rem .25rem; }

/* ── LINKS con iconos en degradado al activar/hover (estilo dashboard) ── */
.sb-link { display:flex; align-items:center; gap:.65rem; padding:.58rem .8rem; border-radius:var(--sb-radius); color:var(--sb-muted); font-size:.83rem; font-weight:500; text-decoration:none; cursor:pointer; user-select:none; margin-bottom:2px; transition:background var(--sb-trans),color var(--sb-trans),transform var(--sb-trans); position:relative; }
.sb-link-ico {
    width:29px; height:29px;
    border-radius:9px;
    display:flex; align-items:center; justify-content:center;
    font-size:.82rem; flex-shrink:0;
    background:var(--sb-bg); color:var(--sb-muted);
    transition:background var(--sb-trans),color var(--sb-trans), box-shadow var(--sb-trans);
}
.sb-link:hover { background:var(--sb-blue-lt); color:var(--sb-blue); transform:translateX(2px); }
.sb-link:hover .sb-link-ico { background:linear-gradient(135deg,#e5343e,#d9232d); color:white; box-shadow:0 4px 10px rgba(217,35,45,.28); }
.sb-link.active {
    background:linear-gradient(135deg,#d9232d,#bf1b27);
    color:white;
    box-shadow:0 4px 14px rgba(217,35,45,.32);
}
.sb-link.active .sb-link-ico { background:rgba(255,255,255,.22); color:white; box-shadow:none; }
.sb-arrow { margin-left:auto; font-size:.65rem; transition:transform .25s ease; flex-shrink:0; color:var(--sb-muted); }
.sb-link.active .sb-arrow { color:rgba(255,255,255,.75); }
.sb-accordion.open > .sb-acc-trigger > .sb-arrow { transform:rotate(180deg); }
.sb-acc-body { max-height:0; overflow:hidden; transition:max-height .3s ease; background:var(--sb-bg); border-radius:var(--sb-radius); margin:2px 0 3px; }
.sb-accordion.open > .sb-acc-body { max-height:1200px; padding:.35rem 0; }
.sb-divider { height:1px; background:var(--sb-border); margin:.3rem .7rem; }
.sb-sub-link { display:flex; align-items:center; gap:.55rem; padding:.52rem .85rem .52rem 2.1rem; font-size:.8rem; color:var(--sb-muted); border-left:3px solid transparent; text-decoration:none; cursor:pointer; user-select:none; transition:color var(--sb-trans),background var(--sb-trans),border-color var(--sb-trans); }
.sb-sub-link i { font-size:.8rem; width:15px; text-align:center; flex-shrink:0; }
.sb-sub-link:hover { color:var(--sb-blue); background:var(--sb-blue-lt); border-left-color:var(--sb-blue); }
.sb-sub-link.active { color:var(--sb-blue); background:var(--sb-blue-lt); border-left-color:var(--sb-blue); font-weight:600; }
.sb-arrow2 { margin-left:auto; font-size:.62rem; transition:transform .22s ease; flex-shrink:0; }
.sb-accordion2.open2 > .sb-acc2-trigger > .sb-arrow2 { transform:rotate(180deg); }
.sb-acc2-body { max-height:0; overflow:hidden; transition:max-height .25s ease; background:var(--sb-surface); border-radius:0 0 8px 8px; margin:0 .6rem .15rem 1.1rem; }
.sb-accordion2.open2 > .sb-acc2-body { max-height:300px; padding:.2rem 0; }
.sb-sub2-link { display:flex; align-items:center; gap:.5rem; padding:.46rem .7rem .46rem 1.5rem; font-size:.76rem; color:var(--sb-muted); border-left:2px solid transparent; text-decoration:none; transition:color var(--sb-trans),background var(--sb-trans),border-color var(--sb-trans); }
.sb-sub2-link i { font-size:.74rem; width:13px; text-align:center; flex-shrink:0; }
.sb-sub2-link:hover { color:var(--sb-blue); background:var(--sb-blue-lt); border-left-color:var(--sb-blue); }
.sb-sub2-link.active { color:var(--sb-blue); background:var(--sb-blue-lt); border-left-color:var(--sb-blue); font-weight:600; }
.sb-footer { padding-top:.9rem; margin-top:auto; }
.sb-logout {
    display:flex; align-items:center; gap:.7rem;
    padding:.65rem .9rem;
    background:linear-gradient(135deg,#fecaca,#fca5a5);
    color:#991b1b;
    border-radius:var(--sb-radius);
    font-size:.82rem; font-weight:700;
    text-decoration:none;
    transition:background var(--sb-trans),transform var(--sb-trans),box-shadow var(--sb-trans);
}
.sb-logout:hover { background:linear-gradient(135deg,#f87171,#ef4444); color:white; transform:translateY(-1px); box-shadow:0 6px 16px rgba(220,38,38,.28); }

/* Mobile overlay */
.mobile-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 899;
    transition: opacity 0.3s ease;
}

@media(max-width:1024px) { 
    .sb { 
        transform: translateX(calc(-1 * var(--sb-width))) !important;
        z-index: 901 !important;
    }
    
    body.sb-open .sb { 
        transform: translateX(0) !important; 
        box-shadow: 4px 0 24px rgba(0,0,0,.15) !important;
    }
    
    body.sb-open #navLateral {
        z-index: 901 !important;
    }
    
    body.sb-open .mobile-sidebar-overlay {
        display: block;
        opacity: 1;
    }
}