/* super-shell.css — shell SaaS del portal Súper.
 * ---------------------------------------------------------------------------
 * Sidebar de aplicaciones compartido por TODAS las páginas de /tools/: las
 * apps quedan accesibles desde cualquier parte (patrón SaaS), sin volver al
 * portal para cambiar de herramienta. Lo inyecta /tools/super-shell.js.
 *
 * Archivo NUEVO y exclusivo de /tools/ — no toca /css/styles.css (zona de
 * choque entre sesiones, ver CLAUDE.md). Usa las variables del tema activo
 * (--bg, --card, --border, --text, --muted, --accent) para verse bien en
 * Oscuro / Claro / Ónix sin trabajo extra.
 *
 * Desktop ancho (≥1180px): sidebar fija a la izquierda, el contenido se corre.
 * Menos que eso: la sidebar vive oculta y se abre como drawer con el botón ☰
 * que el shell agrega al header (overlay con fondo oscurecido).
 */

/* ── Botón hamburguesa (siempre visible; en desktop colapsa/expande) ─────── */
.sshell-burger {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  height: 34px; padding: 0 10px; flex: 0 0 auto;
  background: none; border: 1px solid var(--border); border-radius: 8px;
  color: var(--muted); font-size: 16px; cursor: pointer;
  transition: color .15s, border-color .15s;
}
.sshell-burger:hover { color: var(--accent); border-color: var(--accent); }
/* R17: en el celular el ☰ pelado no se entendía — ahora dice "Apps" al lado. */
.sshell-burger .sshell-burger-lbl { font-size: 12px; font-weight: 700; letter-spacing: .3px; }

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.sshell-side {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 300;
  width: 228px; box-sizing: border-box;
  background: var(--card);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  transform: translateX(-100%);
  transition: transform .22s ease;
  overflow-y: auto;
  padding: 14px 12px 18px;
}
.sshell-open .sshell-side { transform: translateX(0); }

/* Scrollbar del tema oscuro, no la nativa del navegador (feedback 18-jul). */
.sshell-side {
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.sshell-side::-webkit-scrollbar { width: 6px; }
.sshell-side::-webkit-scrollbar-track { background: transparent; }
.sshell-side::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.sshell-side::-webkit-scrollbar-thumb:hover { background: var(--muted); }

.sshell-head {
  display: flex; align-items: center; gap: 8px;
  padding: 2px 6px 12px; border-bottom: 1px solid var(--border); margin-bottom: 10px;
}
.sshell-head a { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--text); font-weight: 800; font-size: 14.5px; }
.sshell-head .sshell-logo { font-size: 18px; }
.sshell-head .sshell-close {
  margin-left: auto; background: none; border: none; color: var(--muted);
  font-size: 17px; cursor: pointer; padding: 2px 6px; border-radius: 6px;
}
.sshell-head .sshell-close:hover { color: var(--text); }

.sshell-group { margin: 10px 0 2px; }
.sshell-group-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: .8px;
  color: var(--muted); padding: 4px 8px; opacity: .85;
}
.sshell-side nav a {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 8px; margin: 1px 0; border-radius: 8px;
  color: var(--text); text-decoration: none; font-size: 13px; font-weight: 500;
  border: 1px solid transparent;
  transition: background .12s, border-color .12s;
}
.sshell-side nav a:hover { background: var(--bg); border-color: var(--border); }
.sshell-side nav a.active {
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--accent); font-weight: 700;
}
.sshell-side nav a .sshell-ic { width: 20px; text-align: center; font-size: 15px; flex: 0 0 auto; }

.sshell-foot {
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border);
  font-size: 12px;
}
.sshell-foot a { color: var(--muted); text-decoration: none; display: block; padding: 5px 8px; border-radius: 8px; }
.sshell-foot a:hover { color: var(--accent); background: var(--bg); }

/* ── Overlay (solo modo drawer) ──────────────────────────────────────────── */
.sshell-overlay {
  position: fixed; inset: 0; z-index: 290;
  background: rgba(0,0,0,.45);
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.sshell-open .sshell-overlay { opacity: 1; pointer-events: auto; }

/* ── Desktop ancho: sidebar acoplada, sin overlay ────────────────────────── */
@media (min-width: 1180px) {
  /* "docked" = preferencia del usuario (persistida). Por defecto acoplada. */
  body.sshell-docked { padding-left: 228px; }
  body.sshell-docked .sshell-side { transform: translateX(0); }
  body.sshell-docked .sshell-overlay { display: none; }
  body.sshell-docked .sshell-close { display: none; }
}