/* ============================================================
   SHELL — sidebar izquierdo con secciones + contenido a la derecha.
   Se aplica a todo el sitio público (no al portal, que tiene su propio nav).
   ============================================================ */
:root{
  --shell-w: 264px;
}
body.shellListo{ margin:0; }
body.shellListo .topbar{ display:none !important; } /* el topbar viejo de cada página se oculta, el shell trae el suyo — sin ">" porque shellJs mueve el topbar dentro de .shellContenido, ya no es hijo directo de body */

.shellRoot{ display:flex; min-height:100vh; }

.shellSidebar{
  width:var(--shell-w); flex-shrink:0; background:var(--navy-dark); color:#fff;
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow-y:auto;
}
.shellBrand{ display:flex; align-items:center; gap:10px; padding:18px 18px 14px; font-family:'Poppins',sans-serif; font-weight:700; font-size:16px; color:#fff; border-bottom:1px solid rgba(255,255,255,0.1); }
.shellBrand .dot{ width:9px; height:9px; border-radius:50%; background:var(--teal-light,#9FE1CB); flex-shrink:0; }

.shellNavTop{ padding:12px 10px; border-bottom:1px solid rgba(255,255,255,0.08); }
.shellNavTop a{ display:block; padding:8px 10px; border-radius:7px; font-size:13px; color:#cfe0e6; font-weight:500; }
.shellNavTop a:hover, .shellNavTop a.activa{ background:rgba(255,255,255,0.1); color:#fff; }

.shellSecciones{ flex-grow:1; padding:10px 10px 8px; overflow-y:auto; }
.shellSeccion{ margin-bottom:4px; }
.shellSeccionBtn{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px; background:transparent; border:none; color:#e4edea; font-family:inherit; font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; padding:10px 10px; cursor:pointer; border-radius:7px; }
.shellSeccionBtn:hover{ background:rgba(255,255,255,0.06); }
.shellSeccionBtn .chev{ transition:transform .15s; font-size:10px; opacity:.7; }
.shellSeccion.abierta .shellSeccionBtn .chev{ transform:rotate(90deg); }
.shellSeccionLista{ display:none; padding:2px 0 8px 8px; }
.shellSeccion.abierta .shellSeccionLista{ display:block; }
.shellSeccionLista a{ display:block; padding:7px 10px; border-radius:6px; font-size:13px; color:#b9cdd2; line-height:1.35; }
.shellSeccionLista a:hover{ background:rgba(255,255,255,0.08); color:#fff; }
.shellSeccionLista a.activa{ background:var(--teal,#0F6E56); color:#fff; font-weight:600; }

.shellCuenta{ border-top:1px solid rgba(255,255,255,0.1); padding:14px 16px; font-size:12.5px; }
.shellCuenta .correo{ color:#fff; font-weight:600; font-size:12.5px; margin-bottom:6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.shellCuenta a, .shellCuenta button{ display:inline-block; color:#9fc9d4; font-size:12px; background:none; border:none; padding:0; cursor:pointer; font-family:inherit; }
.shellCuenta a + a, .shellCuenta a + button{ margin-left:12px; }
.shellCuenta .btnEntrar{ display:block; background:var(--teal,#0F6E56); color:#fff; text-align:center; padding:9px; border-radius:8px; font-weight:600; font-size:13px; }
.shellCuenta .shellLinkPortal{ display:block; text-align:center; margin:10px 0 0; font-size:11px; color:#7f9aa1; }
.shellCuenta .shellLinkPortal:hover{ color:#cfe0e6; }

.shellToggleMovil{ display:none; }
@media (max-width:860px){
  .shellRoot{ display:block; }
  .shellSidebar{ position:fixed; left:0; top:0; height:100vh; z-index:200; transform:translateX(-100%); transition:transform .2s; width:82vw; max-width:300px; }
  .shellSidebar.abiertaMovil{ transform:translateX(0); box-shadow:4px 0 24px rgba(0,0,0,0.3); }
  .shellToggleMovil{ display:flex; align-items:center; gap:10px; position:sticky; top:0; z-index:150; background:var(--card,#fff); border-bottom:1px solid var(--border,#E3E6E8); padding:12px 16px; }
  .shellToggleMovil button{ background:none; border:1px solid var(--border,#E3E6E8); border-radius:7px; width:36px; height:36px; font-size:17px; cursor:pointer; }
  .shellOverlayMovil{ display:none; position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:190; }
  .shellOverlayMovil.activo{ display:block; }
}

.shellContenido{ flex-grow:1; min-width:0; }

/* ---- Candado / paywall para páginas de herramientas ---- */
.shellCandado{ position:fixed; inset:0; background:rgba(20,30,34,0.72); z-index:500; display:flex; align-items:center; justify-content:center; padding:20px; }
.shellCandado .caja{ background:#fff; border-radius:14px; padding:32px 28px; max-width:400px; width:100%; text-align:center; }
.shellCandado h2{ font-size:19px; margin:14px 0 8px; }
.shellCandado p{ font-size:13.5px; color:var(--text-muted,#6B7280); line-height:1.55; margin:0 0 20px; }
.shellCandado .icono{ width:52px; height:52px; border-radius:50%; background:#EEF6F1; display:flex; align-items:center; justify-content:center; margin:0 auto; color:var(--teal,#0F6E56); }
.shellCandado .btn{ width:100%; }
.shellUsosBadge{ position:fixed; bottom:16px; right:16px; background:#fff; border:1px solid var(--border,#E3E6E8); border-radius:30px; padding:8px 14px; font-size:12px; color:var(--text-muted,#6B7280); box-shadow:0 2px 10px rgba(0,0,0,0.08); z-index:50; }