/* ============================================
   DIBO suite-sidebar-shared — componentes compartidos del sidebar
   ============================================
   Usado por: index-registro.html, informe-sibo.html.
   Cubre la hamburguesa móvil, el overlay móvil, el disclaimer del fondo
   del sidebar, y el patrón canónico de bloques colapsables
   (<details>/<summary> nativo HTML5).

   Requisitos en cada HTML que enlace este archivo:
   - css/tokens.css debe estar cargado (define --accent, --ink-strong, --mark,
     --border, --text, --text2, --bg-white, --bg-card).

   Theming (jun 2026): el sidebar va siempre en BLANCO en los 3 temas.
   El color del tema solo aparece en (a) labels (--ink-strong),
   (b) hover de items (fondo --mark), (c) item activo: texto + icono en
   --ink-strong + barra fina a la izquierda en --accent. Sin pastilla.
   El sidebar se separa del contenido con un border-right fino que cada
   HTML define en su .dibo-left / .sidebar local.

   Prefijo canónico: .sb-* (decisión A.20.4, Sprint A, 24 mayo 2026).
   ============================================ */


/* ── Patrón canónico de bloque colapsable: <details>/<summary> nativo ── */
.sb-title {
  font-size: 9px;
  font-weight: 700;
  color: var(--ink-strong);
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: .25rem .35rem;
  margin-bottom: .15rem;
}
.sb-section-hdr {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer;
  padding: .5rem .35rem;
  border-radius: 5px;
  transition: background .1s;
  user-select: none;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.sb-section-hdr::-webkit-details-marker { display: none; }
.sb-section-hdr:hover { background: var(--mark); }
.sb-section-hdr > .sb-title { margin: 0; padding: 0; }
.sb-section-hdr::after {
  content: '▼';
  font-size: 9px;
  color: var(--ink-strong);
  transition: transform .2s;
  flex-shrink: 0;
}
details.sb-section[open] > .sb-section-hdr::after { transform: rotate(180deg); }


/* ── Item del sidebar (botón / li clicable) ──
   Inactivo: texto en --text (cuerpo, no de marca). Icono atenuado.
   Hover: fondo --mark (pista "esto se pulsa").
   Activo: barra a la izquierda en --accent + texto/icono en --ink-strong + bold.
   Sin relleno. El activo NO reacciona al hover (su barra ya lo distingue). */
.sb-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .55rem;
  width: 100%;
  padding: .55rem .65rem;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 0;
  border-left: 3px solid transparent;
  text-align: left;
  transition: background .15s, color .15s;
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
}
.sb-item svg { flex-shrink: 0; opacity: .55; color: var(--text2); stroke: currentColor; }

.sb-item:not(.active):not([aria-current="page"]):hover {
  background: var(--mark);
  color: var(--ink-strong);
}
.sb-item:not(.active):not([aria-current="page"]):hover svg {
  opacity: .85; color: var(--ink-strong);
}

.sb-item.active, .sb-item[aria-current="page"] {
  background: transparent;
  color: var(--ink-strong);
  font-weight: 700;
  border-left-color: var(--accent);
}
.sb-item.active svg, .sb-item[aria-current="page"] svg {
  opacity: 1; color: var(--ink-strong); stroke: var(--ink-strong);
}

.sb-item.external { color: var(--text3); }
.sb-item.external:hover { color: var(--ink-strong); }


/* ── Hamburguesa móvil (oculta en desktop, visible en <768px) ── */
.sb-hamburger {
  display: none;
  position: fixed; top: 42px; left: .6rem;
  z-index: 450;
  width: 32px; height: 32px;
  border-radius: 7px;
  background: var(--ink-strong);
  border: none;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

/* ── Overlay móvil para clic-fuera ── */
.sb-mobile-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 399;
}
.sb-mobile-overlay.visible { display: block; }

@media (max-width: 767px) {
  .sb-hamburger { display: flex; }
}


/* ── Disclaimer del fondo del sidebar (pastilla "DIBO no es un dispositivo médico") ──
   Ahora sobre fondo blanco del sidebar — usamos --bg-card (gris cálido neutro)
   en lugar del rgba blanco translúcido que vivía sobre verde palo. */
.sb-disclaimer-compact {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  padding: .7rem .85rem;
  margin: auto .5rem 1rem;          /* auto arriba = empuja al fondo; lateral + separación inferior */
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-card);
}
.sb-disclaimer-label {
  color: var(--text2);
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.45;
  flex: 1;
  min-width: 0;
}
.sb-disclaimer-label strong { font-weight: 700; color: var(--ink-strong); }
.sb-disclaimer-info {
  background: none; border: none; cursor: pointer;
  color: var(--ink-strong);
  font-size: 16px;
  padding: 0;
  line-height: 1.2;
  flex-shrink: 0;
  opacity: .85;
  -webkit-tap-highlight-color: transparent;
}
.sb-disclaimer-info:hover { opacity: 1; }