/* porsitoca — capa de escritorio. Se carga DESPUÉS de tokens.css y solo añade layout.
   Sin framework: CSS Grid puro. Todo el color y la tipografía siguen viniendo de tokens.css. */

:root{
  --nav-w: 244px;
  --nav-w-mini: 68px;
  --rail-w: 300px;
  --page-max: 1320px;
  --gut: 24px;
}

/* ---------- Armazón ---------- */
.shell{ display:grid; grid-template-columns: var(--nav-w) minmax(0,1fr); min-height:100vh; }
.shell.mini{ --nav-w: var(--nav-w-mini); }

.nav{ border-right:1px solid var(--border); padding:18px 12px; position:sticky; top:0; height:100vh; overflow:auto; display:flex; flex-direction:column; gap:4px; }
.nav .brand{ display:flex; align-items:center; gap:10px; padding:4px 10px 18px; text-decoration:none; color:inherit; font-weight:800; font-size:18px; white-space:nowrap; }
.nav a.item{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:10px; text-decoration:none; color:var(--muted); font-weight:700; font-size:15px; white-space:nowrap; }
.nav a.item i{ font-size:21px; flex:none; }
.nav a.item:hover{ background:var(--surface); color:var(--text); }
.nav a.item[aria-current="page"]{ background:var(--tint); color:var(--on-tint); }
.nav .sep{ margin:14px 12px 6px; font-size:12px; font-weight:700; color:var(--muted); letter-spacing:.3px; }
.nav .foot{ margin-top:auto; padding-top:14px; border-top:1px solid var(--border); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.shell.mini .nav{ padding:18px 8px; align-items:center; }
.shell.mini .nav .label, .shell.mini .nav .sep, .shell.mini .nav .brand span{ display:none; }
.shell.mini .nav a.item{ justify-content:center; padding:11px 0; }

.main{ min-width:0; display:flex; flex-direction:column; }
.topbar{ position:sticky; top:0; z-index:5; background:var(--bg); border-bottom:1px solid var(--border); padding:14px var(--gut); display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.topbar h1{ font-size:22px; margin:0; }
.topbar .sub{ font-size:14px; color:var(--muted); }
.topbar .right{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.page{ padding:22px var(--gut) 56px; max-width:var(--page-max); width:100%; }

/* ---------- Submenú de pestañas ---------- */
.tabs{ display:flex; gap:4px; padding:0 var(--gut); border-bottom:1px solid var(--border); overflow:auto; }
.tabs a{ padding:12px 14px; text-decoration:none; color:var(--muted); font-weight:700; font-size:15px; white-space:nowrap; border-bottom:2px solid transparent; margin-bottom:-1px; }
.tabs a:hover{ color:var(--text); }
.tabs a[aria-current="page"]{ color:var(--accent); border-bottom-color:var(--accent); }
.tabs .count{ display:inline-block; margin-left:6px; background:var(--warn-bg); color:var(--warn-ink); border-radius:var(--pill); font-size:12px; padding:1px 7px; }

/* ---------- Rejillas ---------- */
.g{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:20px; align-items:start; }
.c3{grid-column:span 3} .c4{grid-column:span 4} .c5{grid-column:span 5}
.c6{grid-column:span 6} .c7{grid-column:span 7} .c8{grid-column:span 8}
.c9{grid-column:span 9} .c12{grid-column:span 12}

/* auto: deja que la rejilla decida cuántas columnas caben */
.auto{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(var(--min,230px),1fr)); }
.auto.sm{ --min:170px } .auto.lg{ --min:320px }

/* ---------- Contenido + raíl ---------- */
.withrail{ display:grid; grid-template-columns:minmax(0,1fr) var(--rail-w); gap:24px; align-items:start; }
.rail{ position:sticky; top:82px; display:flex; flex-direction:column; gap:14px; }

/* ---------- Panel ---------- */
.panel{ border:1px solid var(--border); border-radius:14px; overflow:hidden; background:var(--bg); }
.panel > header{ padding:14px 18px; border-bottom:1px solid var(--border); display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.panel > header h2{ font-size:17px; margin:0; }
.panel > header .meta{ font-size:13px; color:var(--muted); }
.panel .body{ padding:14px 18px 18px; }
.panel .body.flush{ padding:0 18px 6px; }

/* ---------- Adaptación ---------- */
@media (max-width:1400px){ :root{ --rail-w:272px } }
@media (max-width:1180px){
  .c3{grid-column:span 6} .c4{grid-column:span 6} .c5{grid-column:span 6}
  .c7,.c8,.c9{grid-column:span 12}
  .withrail{ grid-template-columns:minmax(0,1fr); }
  .rail{ position:static; flex-direction:row; flex-wrap:wrap; }
  .rail > *{ flex:1 1 240px; }
}
@media (max-width:1000px){ .shell{ --nav-w:var(--nav-w-mini) } .shell .nav .label, .shell .nav .sep, .shell .nav .brand span{ display:none } .shell .nav{ padding:18px 8px; align-items:center } .shell .nav a.item{ justify-content:center; padding:11px 0 } }
@media (max-width:820px){
  .shell{ grid-template-columns:minmax(0,1fr); }
  .nav{ display:none; }
  .c3,.c4,.c5,.c6{ grid-column:span 12; }
  .g{ gap:14px }
  :root{ --gut:16px }
  body{ padding-bottom:80px; }
}