/* ═══════════════════════════════════════════════════════════════════════════
   LA BURBUJA DE AYUDA (T33) · studio/app/soporte-burbuja.js
   ───────────────────────────────────────────────────────────────────────────
   Un botón es la palabra: la burbuja se abre con la palabra «Ayuda», sin caja, y el panel es un
   panel (como las fichas de /ayuda/), no un botón. Todo con los colores del sitio (--g0, --g1,
   --g6, --tinta, --tinta-dim, --rosa) y con respaldo si la página no los define. Sin cursivas.
   ═══════════════════════════════════════════════════════════════════════════ */
.sb-abrir, .sb-boton {
  background: none; border: 0; border-radius: 0; box-shadow: none;
  color: var(--tinta, #ECE3D3); font: inherit; font-size: 14px; font-style: normal; letter-spacing: .02em;
  cursor: pointer; min-height: 44px; padding: 12px 6px;
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px;
  transition: text-decoration-color .15s linear, color .15s linear;
}
.sb-abrir:hover, .sb-boton:hover { text-decoration-color: currentColor; }
.sb-abrir:focus-visible, .sb-boton:focus-visible { outline: none; box-shadow: 0 2px 0 0 currentColor; }
.sb-boton[disabled] { opacity: .5; cursor: default; }

/* La palabra va con las demás de la barra de arriba (soporte-burbuja.js), y con el botón de menú, adentro del menú: toma la
   tinta de la barra y no queda encima de ningún control. En la portada y en /nosotros/ no está (soporte-ia.js, INTOCABLES).
   En una página sin barra queda al final, sobre su propio papel. */
.sb-abrir { flex: none; min-width: 44px; color: inherit; }
body > .sb-abrir { display: block; margin: 8px auto; }
/* En /montar/ va adentro de la barra de arriba (montar.js): ahí es una palabra más de la barra, con la tinta de la página. */
:root .montar-barra .sb-abrir { color: var(--tinta, #ECE3D3); }
/* Mientras el panel está abierto la palabra no se ve, pero guarda su lugar: las otras de la barra no se corren. */
.barra .sb-abrir[hidden], .montar-barra .sb-abrir[hidden] { display: inline-block; visibility: hidden; }
.sb-abrir[hidden], .sb-panel[hidden] { display: none; }

.sb-panel {
  position: fixed; right: 12px; bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); z-index: 58;
  width: min(380px, calc(100vw - 24px)); max-height: min(560px, calc(100vh - 88px));
  display: flex; flex-direction: column;
  background: var(--g1, #141110); color: var(--tinta, #ECE3D3);
  border: 1px solid var(--g6, rgba(236, 227, 211, .2)); border-radius: 14px;
  font-size: 14px; font-style: normal; line-height: 1.5;
}
.sb-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 8px 0 16px; }
.sb-cabeza h2 { margin: 0; font-size: 16px; font-weight: 600; }
.sb-aviso { margin: 0; padding: 0 16px 8px; font-size: 12px; color: var(--tinta-dim, #BDB3A6); }
.sb-mensajes { flex: 1 1 auto; overflow-y: auto; padding: 8px 16px; display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--g6, rgba(236, 227, 211, .2)); min-height: 96px; }
.sb-msg { margin: 0; max-width: 100%; overflow-wrap: anywhere; }
.sb-msg-yo { align-self: flex-end; text-align: right; color: var(--tinta-dim, #BDB3A6); }
.sb-msg-ayuda { align-self: flex-start; }
.sb-pasos { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.sb-pasos a { color: var(--rosa, var(--tinta, #ECE3D3)); text-decoration: underline; text-underline-offset: 4px; display: inline-block; padding: 4px 0; }
.sb-pasos-rotulo { display: block; margin-top: 8px; font-size: 12px; color: var(--tinta-dim, #BDB3A6); }
.sb-form { display: grid; gap: 4px; padding: 8px 16px 4px; border-top: 1px solid var(--g6, rgba(236, 227, 211, .2)); }
.sb-form textarea, .sb-form input {
  width: 100%; box-sizing: border-box; padding: 8px 10px; font: inherit; font-size: 14px; font-style: normal; resize: none;
  color: var(--tinta, #ECE3D3); background: var(--g0, #0E0C0B); border: 1px solid var(--g6, rgba(236, 227, 211, .2)); border-radius: 8px;
}
.sb-form textarea { min-height: 56px; }
.sb-fila { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.sb-estado { margin: 0; padding: 0 16px 8px; min-height: 1.2em; font-size: 12px; color: var(--tinta-dim, #BDB3A6); }
.sb-correo { display: grid; gap: 6px; padding: 8px 16px; border-top: 1px solid var(--g6, rgba(236, 227, 211, .2)); }
.sb-correo[hidden] { display: none; }
@media (max-width: 640px) {
  .sb-panel { right: 8px; left: 8px; width: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 8px); max-height: calc(100vh - 72px); }
}
@media (prefers-reduced-motion: reduce) { .sb-abrir, .sb-boton { transition: none; } }