/* Inertio, la ayuda fija de abajo a la derecha (js/inertio-ayuda.js). Usa los tokens de css/styles.css,
   así que sigue el tema oscuro y el claro (data-tema="claro"). */

/* El pie deja libre la esquina del botón para que no tape el copyright. */
.con-ayuda .site-footer { padding-bottom: 120px; }

.ayuda-btn {
  position: fixed;
  right: 16px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  width: 88px;
  height: 98px;
  padding: 0;
  border: 0;
  border-radius: 40%;
  background: none;
  cursor: pointer;
  filter: drop-shadow(0 10px 16px rgb(0 0 0 / .4));
}
.ayuda-btn img { width: 100%; height: 100%; object-fit: contain; transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.ayuda-btn:hover img { transform: translateY(-3px) rotate(-4deg); }
.ayuda-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.ayuda-globo {
  position: absolute;
  right: 78px;
  bottom: 62px;
  padding: 6px 11px;
  border-radius: var(--radio-2) var(--radio-2) var(--radio-1) var(--radio-2);
  background: var(--verde);
  color: var(--verde-tx);
  font: 700 13px/1.2 var(--font-body);
  white-space: nowrap;
  box-shadow: var(--shadow-pop);
}
.ayuda.is-vista .ayuda-globo,
.ayuda.is-abierta .ayuda-globo { display: none; }

.ayuda-panel {
  position: fixed;
  right: 16px;
  bottom: calc(118px + env(safe-area-inset-bottom, 0px));
  z-index: 61;
  display: flex;
  flex-direction: column;
  width: min(380px, calc(100vw - 32px));
  max-height: min(580px, calc(100vh - 150px));
  border: 1px solid var(--line);
  border-radius: var(--radio-3);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
}
.ayuda-panel[hidden] { display: none; }
/* Cabecera con el corte de la marca (franja diagonal) detrás de Inertio. */
.ayuda-cab {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(121deg, transparent 0 58%, color-mix(in srgb, var(--accent) 16%, transparent) 58% 70%, transparent 70% 74%, color-mix(in srgb, var(--accent) 9%, transparent) 74% 78%, transparent 78%);
}
.ayuda-cab img { width: 56px; height: auto; }
.ayuda-titulo {
  margin: 0;
  font: 800 16px/1.1 var(--font-display);
  font-stretch: 125%;
  text-transform: uppercase;
  outline: none;
}
.ayuda-sub { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.ayuda-cerrar {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--radio-2);
  background: none;
  color: var(--muted);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.ayuda-cerrar:hover { background: var(--surface-2); color: var(--text); }
.ayuda-cerrar:focus-visible { outline: 2px solid var(--accent); }

.ayuda-cuerpo { padding: 14px 16px 18px; overflow-y: auto; font-size: 14.5px; line-height: 1.5; }
.ayuda-hola { margin: 0 0 10px; color: var(--muted); }
.ayuda-opciones { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ayuda-opcion {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 10px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radio-2);
  background: var(--ink);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease;
}
.ayuda-opcion:hover { border-color: var(--accent); }
.ayuda-opcion:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ayuda-opcion-t { font-weight: 600; }
.ayuda-opcion-d { grid-column: 1; color: var(--muted); font-size: 13px; }
.ayuda-opcion-f { grid-row: 1 / 3; grid-column: 2; align-self: center; color: var(--accent); font-size: 20px; }

.ayuda-respuesta { display: grid; gap: 12px; justify-items: start; }
.ayuda-respuesta ul { display: grid; gap: 6px; margin: 0; padding-left: 18px; }
.ayuda-respuesta a:not(.btn) { color: var(--accent); }
.ayuda-respuesta li a:not(.btn) { color: var(--text); }
.ayuda-volver {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: 600 14px/1 var(--font-body);
  cursor: pointer;
}
.ayuda-volver:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.ayuda-faq { display: grid; gap: 4px; margin: 0; }
.ayuda-faq dt { font-weight: 600; }
.ayuda-faq dd { margin: 0 0 8px; color: var(--muted); }
.ayuda-copiar {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radio-2);
  background: var(--ink);
}
.ayuda-copiar code { flex: 1; min-width: 0; overflow-wrap: anywhere; user-select: all; background: none; border: 0; padding: 0; }
.ayuda-nota { margin: 0; color: var(--muted); font-size: 13px; }

/* Celular (27/10/2026): burbuja pequeña, sin el globo de texto, y nunca encima de un campo de formulario
   (js/inertio-ayuda.js la aparta con .is-apartada mientras se cruza con un campo o hay uno con el foco). */
@media (max-width: 560px) {
  .ayuda-btn {
    width: 52px;
    height: 52px;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    overflow: hidden;
    border: 2px solid var(--accent);
    border-radius: 50%;
    background: var(--surface);
    filter: drop-shadow(0 6px 10px rgb(0 0 0 / .3));
  }
  .ayuda-btn img { width: 150%; height: 150%; max-width: none; margin: 2px 0 0 -25%; object-fit: cover; object-position: 50% 0; }
  .ayuda-globo { display: none; }
  .con-ayuda .site-footer { padding-bottom: 84px; }
  .ayuda.is-apartada .ayuda-btn { opacity: 0; pointer-events: none; transform: translateX(80px); }
  .ayuda-panel { right: 10px; left: 10px; width: auto; bottom: calc(72px + env(safe-area-inset-bottom, 0px)); max-height: calc(100vh - 110px); }
}
@media (prefers-reduced-motion: no-preference) {
  .ayuda-btn { transition: opacity .2s ease, transform .2s ease; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 561px) {
  .ayuda-btn { animation: ayuda-flota 3.6s ease-in-out infinite; }
}
@media (prefers-reduced-motion: no-preference) {
  .ayuda-panel:not([hidden]) { animation: ayuda-entra .22s ease-out; }
  @keyframes ayuda-flota { 50% { transform: translateY(-6px); } }
  @keyframes ayuda-entra { from { opacity: 0; transform: translateY(10px); } }
}

/* Una sola mascota por pantalla (28/10/2026): si otra imagen de Inertio del contenido está a la vista,
   js/inertio-ayuda.js pone .is-cedida y el botón se esconde (en todos los tamaños) hasta que deje de verse. */
.ayuda.is-cedida .ayuda-btn { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(16px); }
@media (prefers-reduced-motion: no-preference) {
  .ayuda-btn { transition: opacity .2s ease, transform .2s ease, visibility .2s; }
  .ayuda.is-cedida .ayuda-btn { animation: none; }
}

/* Con el menú del celular abierto (js/menu.js), Inertio se aparta para no tapar los enlaces. */
.site-header.is-menu-abierto ~ .ayuda { display: none; }