/* ==========================================================================
   layout.css — armazón de 2 columnas: sidebar y cabecera fijos, navegación
   lateral por módulos, submenú acordeón "Ajustes", indicador de auto-refresh,
   badge de versión y los breakpoints responsive del layout.
   ========================================================================== */

/* --- layout de 2 columnas: sidebar y cabecera fijos, sólo scrollea el contenido --- */
#app-layout { display:flex; height:100vh; }
.sidebar {
  width:260px; flex-shrink:0;
  position:sticky; top:0; height:100vh; overflow-y:auto;
  display:flex; flex-direction:column; gap:6px; padding:20px 16px;
  background:rgba(15,23,42,.85);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-right:1px solid rgba(255,255,255,.1);
}
.main-content {
  flex:1; min-width:0; height:100vh; overflow-y:auto; padding:0 30px 64px;
  background:linear-gradient(135deg,#0f172a 0%,#1e1b4b 100%);
}

.sidebar-brand { display:flex; align-items:center; gap:12px; padding:8px 10px 16px; }
.sidebar-brand svg { width:26px; height:26px; color:var(--accent); flex-shrink:0; }
.sidebar-brand strong { display:block; font-size:.95rem; }
.sidebar-brand span { font-size:.7rem; color:var(--muted); letter-spacing:.05em; }

.sidebar-nav { display:flex; flex-direction:column; gap:4px; }
.nav-item {
  display:flex; align-items:center; gap:12px; width:100%;
  padding:11px 12px; border-radius:12px; text-align:left; font-weight:500;
  background:transparent; border:1px solid transparent; color:#cbd5e1;
}
.nav-item svg { width:19px; height:19px; flex-shrink:0; opacity:.85; }
.nav-item .nav-label { flex:1; }
.nav-item:hover { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.06); color:#fff; }
.nav-item.active {
  background:linear-gradient(90deg, rgba(56,189,248,.22), rgba(56,189,248,.05));
  border-color:rgba(56,189,248,.35); color:#fff;
  box-shadow:0 0 18px rgba(56,189,248,.25), inset 0 0 0 1px rgba(56,189,248,.12);
}
.nav-item.active svg { color:var(--accent); opacity:1; }
.nav-badge {
  font-size:.6rem; font-weight:700; letter-spacing:.03em;
  padding:2px 7px; border-radius:999px; white-space:nowrap;
  color:#fde68a; background:rgba(251,191,36,.12); border:1px solid rgba(251,191,36,.3);
}

/* --- submenú acordeón "Ajustes" --- */
.nav-group { display:flex; flex-direction:column; }
.nav-group-toggle {
  display:flex; align-items:center; gap:12px; width:100%; font:inherit; cursor:pointer;
  padding:11px 12px; border-radius:12px; text-align:left; font-weight:500;
  background:transparent; border:1px solid transparent; color:#cbd5e1;
}
.nav-group-toggle > svg:first-child { width:19px; height:19px; flex-shrink:0; opacity:.85; }
.nav-group-toggle .nav-label { flex:1; }
.nav-group-toggle:hover { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.06); color:#fff; }
.nav-group.has-active-child > .nav-group-toggle { color:#fff; }
.nav-caret { width:15px; height:15px; opacity:.65; transition:transform .2s; }
.nav-group.open .nav-caret { transform:rotate(180deg); }
.nav-submenu {
  display:flex; flex-direction:column; gap:3px;
  margin:3px 0 4px 13px; padding-left:11px;
  border-left:1px solid rgba(255,255,255,.12);
}
.nav-submenu .nav-item { padding:9px 10px; font-size:.9rem; }

.sidebar-footer {
  margin-top:auto;
  display:flex; flex-direction:column; gap:12px;
  padding:16px; border-top:1px solid rgba(255,255,255,.08);
}
.sidebar-footer #whoami { font-size:.82rem; }
.sidebar-footer a.link { font-size:.8rem; }
.sidebar-footer button { width:100%; }
.btn-logout { display:flex; align-items:center; justify-content:center; gap:8px; }

.content-header {
  position:sticky; top:0; z-index:1200;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  margin:0 -30px 18px; padding:14px 30px;
  background:rgba(15,23,42,.9);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:0 10px 24px -18px rgba(0,0,0,.9);
}
.content-header h1 { font-size:1.3rem; margin:0; font-weight:700; }

/* --- indicador de auto-refresh --- */
.auto-refresh { margin-left:auto; display:inline-flex; align-items:center; gap:7px;
  font-size:.74rem; color:var(--muted); white-space:nowrap; transition:color .3s; }
.auto-refresh i { width:7px; height:7px; border-radius:50%; background:#475569;
  transition:background .3s, box-shadow .3s; flex-shrink:0; }
.auto-refresh.synced { color:#86efac; }
.auto-refresh.synced i { background:#22c55e; box-shadow:0 0 9px rgba(34,197,94,.9); animation:ar-pulse .9s ease-out; }
@keyframes ar-pulse { 0% { transform:scale(1); } 35% { transform:scale(1.9); } 100% { transform:scale(1); } }
@media (max-width:640px) { .auto-refresh { font-size:.68rem; } }

/* --- badge de versión: fluye dentro de .sidebar-footer (sin position:absolute) --- */
.sidebar-version-badge {
  text-align:center; font-size:.75rem; opacity:.7;
  padding:4px 8px; background:rgba(255,255,255,.03); border-radius:8px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

@media (max-width:900px) {
  #app-layout { flex-direction:column; height:auto; }
  .sidebar { position:static; width:100%; height:auto; border-right:none; border-bottom:1px solid rgba(255,255,255,.1); }
  .sidebar-nav { flex-direction:row; flex-wrap:wrap; align-items:flex-start; }
  .nav-item { width:auto; }
  .nav-group { width:100%; }
  .nav-group-toggle { width:auto; }
  .sidebar-footer { margin-top:0; }
  .main-content { height:auto; padding:0 16px 48px; }
  .content-header { margin:0 -16px 16px; padding:12px 16px; }
}