/* ══════════════════════════════════════════════
   GALILEA — LAYOUT
   Sidebar fijo en desktop, colapsable en móvil
   ══════════════════════════════════════════════ */

/* ── APP SHELL ── */
.app   { display:flex; min-height:100vh; }
.main  { margin-left:232px; flex:1; display:flex; flex-direction:column; min-width:0; }
.content { padding:20px 24px; flex:1; }

/* ── SIDEBAR ── */
.sidebar {
  width:232px;
  background:var(--surface);
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column;
  position:fixed;
  top:0; left:0; bottom:0;
  z-index:20;
  transition:transform .25s ease;
}

.sidebar-brand {
  padding:18px 16px 14px;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  gap:10px;
}
.brand-logo  { width:40px; height:40px; object-fit:contain; flex-shrink:0; }
.brand-name  { font-family:'Lora',serif; font-size:18px; color:var(--gold); font-weight:600; line-height:1; }
.brand-sub   { font-size:10px; color:var(--text-3); margin-top:2px; }

.nav { padding:8px 0; flex:1; overflow-y:auto; }
.nav-section {
  font-size:10px; font-weight:600; color:var(--text-3);
  letter-spacing:.8px; text-transform:uppercase;
  padding:12px 16px 4px;
}
.nav-item {
  display:flex; align-items:center; gap:9px;
  padding:8px 16px;
  font-size:13px; color:var(--text-2);
  cursor:pointer; transition:all .12s;
  border-left:2px solid transparent;
  text-decoration:none;
}
.nav-item:hover  { background:var(--bg); color:var(--text); }
.nav-item.active {
  background:var(--gold-light); color:var(--gold);
  border-left-color:var(--gold); font-weight:500;
}
.nav-item svg { width:15px; height:15px; flex-shrink:0; }

.sidebar-footer {
  padding:12px 16px;
  border-top:1px solid var(--border);
  display:flex; align-items:center; gap:9px;
}
.s-avatar {
  width:28px; height:28px; border-radius:50%;
  background:var(--gold-light); color:var(--gold);
  display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:600; flex-shrink:0;
}
.s-name { font-size:12px; font-weight:500; }
.s-role { font-size:10px; color:var(--text-3); }

/* ── TOPBAR ── */
.topbar {
  background:var(--surface);
  border-bottom:1px solid var(--border);
  padding:12px 24px;
  display:flex; align-items:center;
  justify-content:space-between;
  flex-shrink:0; gap:12px;
}
.topbar h1 { font-family:'Lora',serif; font-size:17px; font-weight:600; }
.topbar p  { font-size:12px; color:var(--text-3); margin-top:1px; }
.topbar-actions { display:flex; gap:8px; align-items:center; flex-shrink:0; }

/* ── HAMBURGER — oculto en desktop ── */
.hamburger {
  display:none;
  width:34px; height:34px;
  border:1px solid var(--border-mid);
  border-radius:var(--r-sm);
  background:var(--surface);
  cursor:pointer;
  align-items:center; justify-content:center;
  flex-shrink:0;
}
.hamburger svg { width:18px; height:18px; color:var(--text-2); }

/* ── SIDEBAR OVERLAY — solo móvil ── */
.sidebar-overlay {
  display:none;
  position:fixed; inset:0;
  background:rgba(0,0,0,.45);
  z-index:19;
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}
.sidebar-overlay.open { display:block; }

/* ══════════════════════════════════════════════
   RESPONSIVE — ≤ 768px (tablets y móviles)
   ══════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* El sidebar se mueve fuera de pantalla por defecto */
  .sidebar {
    transform: translateX(-100%);
    box-shadow: none;
  }
  /* Al abrir, entra con slide */
  .sidebar.open {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0,0,0,.15);
  }

  /* El main ya no tiene margen izquierdo */
  .main { margin-left: 0; }

  /* Mostrar hamburger */
  .hamburger { display:flex; }

  /* Topbar más compacto */
  .topbar { padding:10px 16px; }
  .topbar h1 { font-size:15px; }

  /* Content padding reducido */
  .content { padding:14px 16px; }

  /* Ocultar columnas de tabla en móvil */
  .hide-mobile { display:none; }

  /* Stats grid — 3 columnas en tablets, 2 en móvil pequeño */
  .stats-row { grid-template-columns:repeat(3,1fr); }
}

/* ── Móvil muy pequeño ≤ 480px ── */
@media (max-width: 480px) {
  .stats-row { grid-template-columns:repeat(2,1fr); }
  /* Ocultar 5ta stat si no cabe */
  .stats-row .stat:nth-child(5) { display:none; }
  .topbar-actions .btn span.hide-xs { display:none; }
  .content { padding:12px; }
  /* Stepper: permitir wrap y ocultar descripciones secundarias */
  .flow-lbl  { white-space:normal; }
  .flow-desc { display:none; }
}