/* ============================================================
   layout.css — App shell: sidebar + contenido, dashboard cards.
   ============================================================ */
.app{display:flex;min-height:100vh}
.sidebar{width:230px;background:var(--negro);color:#fff;flex-shrink:0;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
.sidebar .brand{padding:18px 20px;font-family:var(--font-cond);font-size:1.5rem;font-weight:700;border-bottom:1px solid rgba(255,255,255,.1)}
.sidebar .brand span{color:var(--naranja)}
.nav{display:flex;flex-direction:column;padding:8px}
.nav a{color:#cfcfcf;padding:10px 14px;border-radius:var(--radius-sm);font-size:.92rem;display:flex;gap:10px;align-items:center}
.nav a:hover{background:rgba(255,255,255,.07);color:#fff}
.nav a.active{background:var(--naranja);color:#fff}
.nav .section{color:#777;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;padding:14px 14px 4px}
.content{flex:1;padding:28px 32px;max-width:1200px;margin:0 auto;width:100%}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;gap:16px;flex-wrap:wrap}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-bottom:24px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.card .num{font-family:var(--font-cond);font-size:2rem;font-weight:700;color:var(--naranja)}
.card .lbl{color:var(--text-soft);font-size:.85rem}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);margin-bottom:20px}
@media(max-width:760px){
  .app{flex-direction:column}
  .sidebar{width:100%;height:auto;position:relative;flex-direction:row;overflow-x:auto}
  .sidebar .brand{border:none;white-space:nowrap}
  .nav{flex-direction:row;overflow-x:auto}.nav .section{display:none}
  .content{padding:18px}
}