/* ============================================================
   Shell de aplicación estilo BiG Formación LAB (CFA).
   Aporta SOLO el marco: sidebar lateral + topbar + área de contenido.
   Reutilizado de APPS/big-acf/css/app.css (clases del shell, sin las
   genéricas .card/.btn/.kpi para no chocar con el CSS de los paneles AFD).
   Se carga DESPUÉS de tokens/layout/components para que el shell mande
   en el layout; los paneles internos conservan su estilo actual.
   ============================================================ */

:root{
  --sb-blue:#017BC4; --sb-mid:#1B5FA4; --sb-deep:#0A5688;
  --sb-gold:#F5C842; --sb-navy:#002B4A; --sb-bluegray:#96BAD0;
  --sb-off:#EEF4FA; --sb-off2:#F6F9FC; --sb-line:#D7E3EE; --sb-gray:#5C6670;
  --sb-fh:'Barlow Condensed',sans-serif; --sb-fb:'Nunito',sans-serif;
  --sidebar-w:264px;
}

/* Layout raíz */
.app{display:flex;min-height:100vh}

/* ── Sidebar ── */
.sidebar{width:var(--sidebar-w);background:linear-gradient(165deg,#0A5688 0%,var(--sb-blue) 46%,var(--sb-mid) 100%);color:#fff;position:fixed;top:0;left:0;bottom:0;display:flex;flex-direction:column;z-index:40;box-shadow:2px 0 24px rgba(10,86,136,.2)}
.sb-brand{padding:20px 22px 16px;display:flex;align-items:center;gap:0;border-bottom:1px solid rgba(255,255,255,.12)}
.sb-brand img{height:34px;width:auto;display:block}
.sb-lab{font-family:var(--sb-fh);font-style:italic;font-weight:800;font-size:23px;color:var(--sb-gold);margin-left:9px;padding-left:11px;border-left:2px solid rgba(255,255,255,.32);line-height:1}
.sb-sub{padding:14px 22px 8px;font-family:var(--sb-fh);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--sb-bluegray)}
.sb-nav{flex:1;overflow-y:auto;padding:4px 12px 12px}
.sb-nav::-webkit-scrollbar{width:6px}
.sb-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:3px}
.nav-item{display:flex;align-items:center;gap:12px;width:100%;padding:11px 14px;border-radius:11px;color:rgba(255,255,255,.82);font-weight:700;font-size:14px;text-align:left;transition:.16s;margin-bottom:3px;position:relative;cursor:pointer;border:none;background:none;font-family:var(--sb-fb)}
.nav-item:hover{background:rgba(255,255,255,.1);color:#fff}
.nav-item.active{background:rgba(255,255,255,.16);color:#fff}
.nav-item.active::before{content:"";position:absolute;left:-12px;top:50%;transform:translateY(-50%);width:4px;height:22px;background:var(--sb-gold);border-radius:0 4px 4px 0}
.nav-item .nav-ic{width:22px;text-align:center;flex:none;font-size:16px}
.nav-phase{font-family:var(--sb-fh);font-weight:700;font-size:11px;letter-spacing:.12em;color:var(--sb-bluegray);padding:14px 14px 5px;text-transform:uppercase}
.sb-foot{padding:14px 22px 18px;border-top:1px solid rgba(255,255,255,.12);font-size:11.5px;color:var(--sb-bluegray);line-height:1.6}
.sb-foot b{color:#fff;font-weight:800}

/* ── Main (topbar + contenido) ── */
/* Anula explícitamente las reglas .main de layout.css (max-width/margin auto/padding)
   que centraban y limitaban el ancho — incompatibles con el layout de sidebar. */
.app .main{flex:1;margin:0 0 0 var(--sidebar-w);max-width:none;padding:0;display:flex;flex-direction:column;min-width:0}
.topbar{min-height:64px;background:#fff;border-bottom:1px solid var(--sb-line);display:flex;align-items:center;gap:18px;padding:10px 28px;position:sticky;top:0;z-index:30;flex-wrap:wrap}
.tb-title{font-family:var(--sb-fh);font-weight:800;font-size:22px;color:var(--sb-navy);letter-spacing:.01em}
.tb-ctx{margin-left:auto;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ctx-pill{display:flex;align-items:center;gap:9px;background:var(--sb-off);border:1px solid var(--sb-line);border-radius:11px;padding:5px 12px;font-size:13px;font-weight:700}
.ctx-pill .lbl{color:var(--sb-gray);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.05em}
.ctx-pill select{border:none;background:none;font-weight:800;color:var(--sb-navy);max-width:200px;outline:none;cursor:pointer;font-family:var(--sb-fb)}
.content{padding:24px 28px;flex:1}

/* Botón de menú (móvil) */
.sb-menu-btn{display:none;background:none;border:none;font-size:22px;cursor:pointer;color:var(--sb-navy);padding:4px 8px}

/* ── Controles de la topbar sobre fondo BLANCO ──────────────────────
   Los .hbtn, el toggle de idioma, save-status y el chip de usuario estaban
   estilados para la cabecera AZUL antigua (texto/borde blancos translúcidos),
   por lo que en la topbar blanca quedaban invisibles. Se re-estilan aquí. */
.topbar .hbtn{
  background:var(--sb-off2); color:var(--sb-navy);
  border:1px solid var(--sb-line); border-radius:9px; padding:7px 12px;
}
.topbar .hbtn:hover{ background:#fff; border-color:var(--sb-blue); box-shadow:0 2px 8px rgba(1,123,196,.14); }
.topbar select.hbtn{ color:var(--sb-navy); }
.topbar .hbtn.gold{ background:var(--sb-gold); color:var(--sb-navy); border-color:var(--sb-gold); }

/* Indicador de guardado: colores para fondo claro */
.topbar .save-status{ font-size:.72rem; font-weight:700; padding:3px 9px; border-radius:20px; }
.topbar .save-status.pendiente{ color:var(--sb-gray); background:var(--sb-off); }
.topbar .save-status.guardando{ color:var(--sb-blue); background:#E6F2FB; }
.topbar .save-status.guardado { color:#1E7A55; background:#E4F5EC; }
.topbar .save-status.error    { color:#B42318; background:#FBE6E6; }

/* Chip de usuario (auth.js ya lo genera con estilo claro): hover sutil. */
.topbar #authUserChip:hover{ border-color:var(--sb-blue); box-shadow:0 3px 12px rgba(1,123,196,.14); }

/* Oculta la cabecera y las pestañas horizontales antiguas del AFD: el shell las
   sustituye por el sidebar + topbar. (No se borran del HTML para no romper JS
   que pueda referenciarlas; solo se ocultan.) */
#legacyTabs { display:none !important; }

/* Responsive: en pantallas estrechas el sidebar se oculta y se abre con .open */
@media(max-width:880px){
  .sidebar{transform:translateX(-100%);transition:.2s}
  .sidebar.open{transform:none}
  .app .main{margin-left:0}
  .sb-menu-btn{display:block}
}