/* ============================================================
   Shell de tableros — menú lateral, tema y marco de paneles.
   Los tokens son los mismos que usan los tableros por dentro,
   así el marco y el contenido se ven como una sola pieza.
   ============================================================ */

:root{
  --bg:#f5f6f8; --card:#ffffff; --card-2:#fafbfc; --card-3:#f1f3f6;
  --ink:#12161c; --ink-2:#4e5763; --ink-3:#7e8794;
  --line:#e2e5ea; --line-2:#eef0f3;
  --blue:#2a78d6; --blue-soft:#cfe0f7;
  --orange:#eb6834; --aqua:#1baf7a;
  --shadow:0 1px 2px rgba(18,22,28,.05), 0 8px 24px -16px rgba(18,22,28,.18);
  --nav-w:252px;
  --nav-w-min:64px;
  --bar-h:52px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#101317; --card:#181c21; --card-2:#1d2126; --card-3:#232830;
    --ink:#f1f3f6; --ink-2:#a9b1bc; --ink-3:#7c8592;
    --line:#2a2f36; --line-2:#22272d;
    --blue:#3987e5; --blue-soft:#1e3a5c;
    --orange:#d95926; --aqua:#199e70;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --bg:#101317; --card:#181c21; --card-2:#1d2126; --card-3:#232830;
  --ink:#f1f3f6; --ink-2:#a9b1bc; --ink-3:#7c8592;
  --line:#2a2f36; --line-2:#22272d;
  --blue:#3987e5; --blue-soft:#1e3a5c;
  --orange:#d95926; --aqua:#199e70;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.6);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:14px; line-height:1.55; -webkit-font-smoothing:antialiased;
  overflow:hidden;
}

/* ---------- estructura ---------- */
.app{display:flex; height:100%}

/* ---------- barra superior (solo móvil) ---------- */
.bar{
  display:none;
  position:fixed; inset:0 0 auto 0; height:var(--bar-h); z-index:40;
  align-items:center; gap:10px; padding:0 12px;
  background:var(--card); border-bottom:1px solid var(--line);
}
.bar .brandmin{font-family:Archivo,sans-serif; font-weight:700; font-size:14px; letter-spacing:-.01em}
.bar .barsub{color:var(--ink-3); font-size:12px}

/* ---------- menú lateral ---------- */
.nav{
  flex:0 0 var(--nav-w); width:var(--nav-w);
  display:flex; flex-direction:column;
  background:var(--card); border-right:1px solid var(--line);
  transition:flex-basis .18s ease, width .18s ease;
  z-index:30;
}
body[data-nav="min"] .nav{flex-basis:var(--nav-w-min); width:var(--nav-w-min)}

.brand{
  display:flex; align-items:center; gap:10px;
  padding:16px 14px 14px; border-bottom:1px solid var(--line-2);
  min-height:60px;
}
.brand .mark{
  flex:0 0 30px; height:30px; border-radius:8px;
  background:var(--blue); color:#fff;
  display:grid; place-items:center;
  font-family:Archivo,sans-serif; font-weight:700; font-size:13px;
}
.brand .txt{min-width:0}
.brand .nm{
  font-family:Archivo,sans-serif; font-weight:700; font-size:14.5px;
  letter-spacing:-.01em; white-space:nowrap;
}
.brand .sb{color:var(--ink-3); font-size:11.5px; white-space:nowrap}
body[data-nav="min"] .brand .txt{display:none}

.navscroll{flex:1; overflow-y:auto; padding:10px 8px 4px}

.grp{
  padding:12px 10px 6px; color:var(--ink-3);
  font-size:10.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
}
body[data-nav="min"] .grp{
  text-align:center; letter-spacing:0; font-size:9px; padding:10px 0 4px;
}
body[data-nav="min"] .grp span{display:none}
body[data-nav="min"] .grp::after{content:"•••"; letter-spacing:.1em}

.item{
  display:flex; align-items:center; gap:10px;
  padding:9px 10px; margin-bottom:2px; border-radius:8px;
  color:var(--ink-2); text-decoration:none;
  border:1px solid transparent;
}
.item:hover{background:var(--card-3); color:var(--ink)}
.item[aria-current="page"]{
  background:var(--blue-soft); border-color:transparent; color:var(--ink);
  font-weight:600;
}
:root[data-theme="dark"] .item[aria-current="page"],
.item[aria-current="page"]{box-shadow:inset 2px 0 0 var(--blue)}
.item .ic{flex:0 0 18px; height:18px; display:grid; place-items:center; color:var(--ink-3)}
.item[aria-current="page"] .ic{color:var(--blue)}
.item .lb{min-width:0}
.item .t{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.item .d{
  color:var(--ink-3); font-size:11.5px; font-weight:400;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
body[data-nav="min"] .item{justify-content:center; padding:10px 0}
body[data-nav="min"] .item .lb{display:none}

.navfoot{
  border-top:1px solid var(--line-2); padding:8px;
  display:flex; flex-direction:column; gap:4px;
}
.btn{
  display:flex; align-items:center; gap:10px;
  width:100%; padding:8px 10px; border-radius:8px;
  background:none; border:1px solid transparent; color:var(--ink-2);
  font:inherit; font-size:13px; cursor:pointer; text-align:left;
  text-decoration:none;
}
.btn:hover{background:var(--card-3); color:var(--ink)}
.btn .ic{flex:0 0 18px; height:18px; display:grid; place-items:center}
body[data-nav="min"] .btn{justify-content:center; padding:9px 0}
body[data-nav="min"] .btn .lb{display:none}
.stamp{padding:6px 10px 4px; color:var(--ink-3); font-size:11px}
body[data-nav="min"] .stamp{display:none}

/* ---------- área de paneles ---------- */
.stage{flex:1; position:relative; min-width:0; background:var(--bg)}
.stage iframe{
  position:absolute; inset:0; width:100%; height:100%;
  border:0; display:block; background:var(--bg);
}
.stage iframe[hidden]{display:none}

.load{
  position:absolute; inset:0; display:grid; place-items:center;
  background:var(--bg); z-index:5; gap:12px;
}
.load[hidden]{display:none}
.load .inner{text-align:center; color:var(--ink-3); font-size:13px}
.spin{
  width:26px; height:26px; margin:0 auto 10px;
  border:2px solid var(--line); border-top-color:var(--blue);
  border-radius:50%; animation:sp .7s linear infinite;
}
@keyframes sp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .spin{animation-duration:2s}
  .nav{transition:none}
}

/* ---------- capa oscura del cajón en móvil ---------- */
.veil{
  display:none; position:fixed; inset:0; z-index:25;
  background:rgba(8,10,13,.45);
}

/* ---------- móvil: el menú pasa a cajón ---------- */
@media (max-width:820px){
  .bar{display:flex}
  .app{padding-top:var(--bar-h)}
  .nav{
    position:fixed; top:var(--bar-h); bottom:0; left:0;
    width:min(280px,82vw); flex-basis:auto;
    transform:translateX(-102%); transition:transform .2s ease;
    box-shadow:var(--shadow);
  }
  body[data-drawer="open"] .nav{transform:none}
  body[data-drawer="open"] .veil{display:block}
  body[data-nav="min"] .nav{width:min(280px,82vw)}
  body[data-nav="min"] .brand .txt,
  body[data-nav="min"] .item .lb,
  body[data-nav="min"] .btn .lb,
  body[data-nav="min"] .stamp{display:revert}
  body[data-nav="min"] .item,
  body[data-nav="min"] .btn{justify-content:flex-start; padding:9px 10px}
  body[data-nav="min"] .grp{text-align:left; padding:12px 10px 6px; font-size:10.5px}
  body[data-nav="min"] .grp span{display:revert}
  body[data-nav="min"] .grp::after{content:none}
  .collapse{display:none}
}

/* ---------- foco visible ---------- */
:is(a,button):focus-visible{
  outline:2px solid var(--blue); outline-offset:2px; border-radius:8px;
}