/* =========================================================
   SistemaRD — Shell de navegación (sidebar + topbar)
   Inyectado por assets/sidebar.js en las 15 páginas del sistema.
   Estilo inspirado en Alegra: sidebar persistente con grupos
   colapsables + barra superior delgada con búsqueda.
   Variables con prefijo --srd-sb-/--srd-tb- para no chocar con
   las variables propias de cada página.
   ========================================================= */

:root{
  --srd-sb-w: 230px;
  --srd-sb-w-collapsed: 64px;
  --srd-tb-h: 56px;
  --srd-sb-bg: #0A2342;
  --srd-sb-text: rgba(255,255,255,.82);
  --srd-sb-text-dim: rgba(255,255,255,.48);
  --srd-sb-accent: #246BFD;
  --srd-sb-accent-glow: #19B7A5;
  --srd-sb-accent-bg: rgba(36,107,253,.22);
  --srd-sb-border: rgba(255,255,255,.09);
  --srd-tb-bg: #ffffff;
  --srd-tb-border: rgba(10,35,66,.1);
  --srd-ink: #0A2342;
  --srd-ink-soft: #607080;
}

/* ---- Reservar espacio para sidebar + topbar fijos ---- */
html{ scroll-padding-top: var(--srd-tb-h); }
body{
  padding-left: var(--srd-sb-w) !important;
  padding-top: var(--srd-tb-h) !important;
  transition: padding-left .2s ease;
  min-height: 100vh;
}
body.srd-sb-collapsed{ padding-left: var(--srd-sb-w-collapsed) !important; }

/* ---- SIDEBAR ---- */
.srd-sidebar{
  position: fixed; top:0; left:0; bottom:0; width: var(--srd-sb-w);
  background: var(--srd-sb-bg); color: var(--srd-sb-text);
  display:flex; flex-direction:column;
  z-index: 300; transition: width .2s ease, left .2s ease; overflow:hidden;
  font-family:'Inter', sans-serif;
  border-right: 1px solid var(--srd-sb-border);
}
body.srd-sb-collapsed .srd-sidebar{ width: var(--srd-sb-w-collapsed); }

.srd-sb-logo{
  height: var(--srd-tb-h); display:flex; align-items:center; gap:8px;
  padding: 0 18px; flex-shrink:0; border-bottom: 1px solid var(--srd-sb-border);
}
.srd-sb-logo-mark{ font-size:18px; flex-shrink:0; }
.srd-sb-logo-text{ font-family:'Sora', sans-serif; font-size:17px; color:#fff; white-space:nowrap; overflow:hidden; }
.srd-sb-logo-accent{ color: var(--srd-sb-accent-glow); }
body.srd-sb-collapsed .srd-sb-logo-text{ width:0; opacity:0; }

.srd-sb-nav{ flex:1; overflow-y:auto; padding:8px 0; }
.srd-sb-nav::-webkit-scrollbar{ width:4px; }
.srd-sb-nav::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.15); border-radius:4px; }

.srd-nav-link, .srd-nav-grouphead{
  display:flex; align-items:center; gap:12px; width:100%;
  padding:10px 18px; border:none; background:none; cursor:pointer;
  color: var(--srd-sb-text); text-decoration:none; font-size:13.5px; font-weight:500;
  font-family:inherit; white-space:nowrap; box-sizing:border-box;
}
.srd-nav-link:hover, .srd-nav-grouphead:hover{ background: rgba(255,255,255,.06); color:#fff; }
.srd-nav-link.srd-active{
  background: var(--srd-sb-accent-bg); color:#fff;
  box-shadow: inset 3px 0 0 var(--srd-sb-accent-glow);
}
.srd-nav-icon{ font-size:15px; width:18px; text-align:center; flex-shrink:0; }
.srd-nav-label{ flex:1; overflow:hidden; text-overflow:ellipsis; }
.srd-nav-chevron{ font-size:12px; color: rgba(255,255,255,.7); transition: transform .15s ease; flex-shrink:0; }
.srd-nav-group.srd-open .srd-nav-chevron{ transform: rotate(180deg); }

body.srd-sb-collapsed .srd-nav-label,
body.srd-sb-collapsed .srd-nav-chevron{ display:none; }
body.srd-sb-collapsed .srd-nav-link,
body.srd-sb-collapsed .srd-nav-grouphead{ justify-content:center; padding:10px 0; }
body.srd-sb-collapsed .srd-nav-children{ display:none !important; }

.srd-nav-children{ max-height:0; overflow:hidden; transition: max-height .2s ease; }
.srd-nav-group.srd-open .srd-nav-children{ max-height: 480px; }
.srd-nav-sublink{
  display:flex; align-items:center; gap:12px; padding:8px 18px 8px 36px;
  font-size:12.5px; color: var(--srd-sb-text-dim); text-decoration:none; white-space:nowrap;
}
.srd-nav-sublink:hover{ color:#fff; background: rgba(255,255,255,.05); }
.srd-nav-sublink.srd-active{
  color:#fff; font-weight:600; background: var(--srd-sb-accent-bg);
  box-shadow: inset 3px 0 0 var(--srd-sb-accent-glow);
}

.srd-sb-collapse{
  flex-shrink:0; border:none; background:none; color: var(--srd-sb-text-dim);
  padding:13px; cursor:pointer; font-size:12px; border-top:1px solid var(--srd-sb-border);
  font-family:inherit;
}
.srd-sb-collapse:hover{ color:#fff; }
body.srd-sb-collapsed .srd-sb-collapse{ transform: scaleX(-1); }

.srd-sb-overlay{ display:none; position:fixed; inset:0; background: rgba(0,0,0,.45); z-index:295; }

/* ---- TOPBAR ---- */
.srd-topbar{
  position: fixed; top:0; left: var(--srd-sb-w); right:0; height: var(--srd-tb-h);
  background: var(--srd-tb-bg); border-bottom: 1px solid var(--srd-tb-border);
  display:flex; align-items:center; gap:16px; padding: 0 20px;
  z-index: 290; transition: left .2s ease;
  font-family:'Inter', sans-serif; box-sizing:border-box;
}
body.srd-sb-collapsed .srd-topbar{ left: var(--srd-sb-w-collapsed); }

.srd-tb-burger{ display:none; border:none; background:none; font-size:19px; cursor:pointer; color: var(--srd-ink); flex-shrink:0; }
.srd-tb-title{ font-family:'Sora', sans-serif; font-size:15.5px; color: var(--srd-ink); white-space:nowrap; flex-shrink:0; }
.srd-tb-search-wrap{ flex:1; max-width:380px; position:relative; }
.srd-tb-search{
  width:100%; padding:8px 14px; border:1px solid var(--srd-tb-border); border-radius:8px;
  font-size:12.5px; font-family:inherit; background:#EEF3F8; box-sizing:border-box; color: var(--srd-ink);
}
.srd-tb-search:focus{ outline:none; border-color: var(--srd-sb-accent); background:#fff; }
.srd-tb-search-results{
  display:none; position:absolute; top: calc(100% + 6px); left:0; right:0;
  background:#fff; border:1px solid var(--srd-tb-border); border-radius:8px;
  box-shadow: 0 10px 28px rgba(10,35,66,.18); max-height:280px; overflow-y:auto; z-index:50;
}
.srd-tb-search-results.srd-show{ display:block; }
.srd-sr-item{ display:flex; align-items:center; gap:8px; padding:9px 14px; font-size:13px; color: var(--srd-ink); text-decoration:none; }
.srd-sr-item:hover, .srd-sr-item.srd-sr-active{ background:#EEF3F8; }
.srd-sr-empty{ padding:9px 14px; font-size:12.5px; color: var(--srd-ink-soft); font-style:italic; }
.srd-tb-right{ display:flex; align-items:center; gap:14px; margin-left:auto; flex-shrink:0; }
.srd-tb-empresa{ font-size:12px; font-weight:600; color: var(--srd-ink-soft); white-space:nowrap; max-width:220px; overflow:hidden; text-overflow:ellipsis; }
.srd-tb-clock{ font-size:12px; color: var(--srd-ink-soft); font-variant-numeric:tabular-nums; white-space:nowrap; }
.srd-tb-logout{
  display:flex; align-items:center; gap:5px; font-size:12.5px; font-weight:600;
  padding:6px 12px; border:1px solid var(--srd-tb-border); border-radius:8px;
  background:#fff; color: var(--srd-ink-soft); cursor:pointer; white-space:nowrap;
}
.srd-tb-logout:hover{ background:#fdeeee; border-color:#e6b8b8; color:#b42318; }
.srd-tb-logout:disabled{ opacity:.6; cursor:default; }

/* ---- RESPONSIVE: sidebar fuera de pantalla en móvil ---- */
@media (max-width: 880px){
  body, body.srd-sb-collapsed{ padding-left:0 !important; }
  .srd-sidebar{ left: calc(-1 * var(--srd-sb-w)); width: var(--srd-sb-w); }
  body.srd-sb-mobile-open .srd-sidebar{ left:0; }
  body.srd-sb-mobile-open .srd-sb-overlay{ display:block; }
  .srd-sb-collapse{ display:none; }
  .srd-topbar{ left:0 !important; }
  .srd-tb-burger{ display:block; }
  .srd-tb-title{ display:none; }
  .srd-tb-empresa{ display:none; }
  .srd-tb-search-wrap{ max-width:none; }
}