/* ============================================================
   [D7 v2] AYUDA CONTEXTUAL: drawer no-modal + callouts.
   Superficie NUEVA (el Centro de Ayuda /ayuda mantiene su propio
   public/css/ayuda.css). Todo por tokens --ln-* del tema activo;
   sin color hardcodeado (V9.1). Los callouts se remapean a los
   tokens de estado que ESTA app define (positive/negative/warning);
   "nota"/"fiscal" usan el acento (no hay --ln-info en la app).
   ============================================================ */

/* ── Drawer (Offcanvas, NO-MODAL) ─────────────────────────── */
.ayuda-drawer {
  width: min(440px, 92vw);
  background: var(--ln-surface, #fff);
  color: var(--ln-fg, #1e293b);
}
.ayuda-drawer .offcanvas-header {
  border-bottom: 1px solid var(--ln-border, #e2e8f0);
  padding: 1rem 1.25rem;
}
.ayuda-drawer .offcanvas-title:focus-visible {
  outline: 2px solid var(--ln-accent, #4f46e5);
  outline-offset: 2px;
  border-radius: 4px;
}
.ayuda-drawer .offcanvas-body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.ayuda-drawer-resumen {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ln-fg, #1e293b);
  margin: 0;
}
.ayuda-drawer [data-ayuda-slot="callouts"] {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

/* Lista de atajos (dt/dd en línea) */
.ayuda-drawer .ayuda-atajos {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.75rem;
  row-gap: 0.5rem;
  margin: 0;
  font-size: 0.875rem;
}
.ayuda-drawer .ayuda-atajos dt { font-weight: 600; }
.ayuda-drawer .ayuda-atajos dd { margin: 0; color: var(--ln-fg-muted, #64748b); }
.ayuda-drawer .ayuda-atajos kbd { font-size: 0.8em; padding: 0.15rem 0.4rem; border-radius: 4px; }

/* [13ª ola] Preguntas frecuentes. A diferencia de los atajos, aquí la pregunta
   y su respuesta van en RENGLONES distintos: son frases completas, no una tecla
   y una acción corta, y en dos columnas la respuesta quedaría en una tira de
   texto de tres palabras de ancho. */
.ayuda-drawer .ayuda-faq { margin: 0 0 1rem; font-size: 0.875rem; }
.ayuda-drawer .ayuda-faq:empty { display: none; }
.ayuda-drawer .ayuda-faq dt { font-weight: 600; margin-top: 0.75rem; }
.ayuda-drawer .ayuda-faq dt:first-child { margin-top: 0; }
.ayuda-drawer .ayuda-faq dd { margin: 0.15rem 0 0; color: var(--ln-fg-muted, #64748b); }

.ayuda-drawer-footer {
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--ln-border, #e2e8f0);
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.ayuda-drawer-vermas {
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  color: var(--ln-accent, #4f46e5);
}
.ayuda-drawer-vermas:hover { text-decoration: underline; }
.ayuda-drawer-vermas::after {
  content: "\2197"; /* abre en pestaña nueva */
  margin-left: 0.3rem;
  font-size: 0.85em;
}
.ayuda-drawer-rev { margin: 0; font-size: 0.78rem; color: var(--ln-fg-muted, #64748b); }

/* Pasos numerados dentro del drawer */
.ayuda-steps-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: steps-counter;
}
.ayuda-steps-list > li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin-bottom: 0.75rem;
  counter-increment: steps-counter;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ln-fg, #1e293b);
}
.ayuda-steps-list > li::before {
  content: counter(steps-counter);
  min-width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--ln-accent, #4f46e5);
  color: var(--ln-accent-fg, #fff);
  font-size: 0.72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

/* El "?" del page-header es un <button>: neutraliza el chrome nativo.
   El resto del estilo lo aporta .page-header-help en shell.css (tokens). */
button.page-header-help {
  padding: 0;
  cursor: pointer;
  font: inherit;
}

/* ── Callouts tipados (tip · nota · importante · precaucion · fiscal)
   Íconos por Bootstrap Icons; color por token de estado real de la app. ── */
.ayuda-callout {
  display: flex;
  gap: 0.625rem;
  padding: 0.75rem 0.875rem;
  border-radius: var(--ln-radius, 8px);
  border: 1px solid var(--ln-border, #e2e8f0);
  border-left-width: 4px;
  background: var(--ln-surface-2, #f8fafc);
  color: var(--ln-fg, #1e293b);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.ayuda-callout::before {
  font-family: "bootstrap-icons";
  font-size: 1.05rem;
  line-height: 1.4;
  flex: 0 0 auto;
}
.ayuda-callout--tip { border-left-color: var(--ln-positive, #16a34a); }
.ayuda-callout--tip::before { content: "\F46B"; color: var(--ln-positive, #16a34a); } /* lightbulb */
.ayuda-callout--nota { border-left-color: var(--ln-accent, #4f46e5); }
.ayuda-callout--nota::before { content: "\F431"; color: var(--ln-accent, #4f46e5); } /* info-circle */
.ayuda-callout--importante { border-left-color: var(--ln-warning, #d97706); }
.ayuda-callout--importante::before { content: "\F33B"; color: var(--ln-warning, #d97706); } /* exclamation-triangle */
.ayuda-callout--precaucion { border-left-color: var(--ln-negative, #dc2626); }
.ayuda-callout--precaucion::before { content: "\F337"; color: var(--ln-negative, #dc2626); } /* exclamation-octagon */
.ayuda-callout--fiscal { border-left-color: var(--ln-accent, #2E5575); }
.ayuda-callout--fiscal::before { content: "\00A7"; color: var(--ln-accent, #2E5575); font-family: inherit; font-weight: 700; } /* § */

/* [15ª ola] Título e icono propios del callout. El icono es hermano del texto
   (columna propia dentro de la fila flex de .ayuda-callout, igual que
   .ayuda-tip-card en /ayuda); el título va EN LÍNEA al inicio del texto
   (<strong>, sin margen propio: es la primera frase del párrafo, no un
   renglón aparte). Sin color hardcodeado: hereda el del borde que le pone su
   tipo (V9.1). El `margin-right` que separaba el icono del título se quitó:
   ahora el icono es hijo flex directo de .ayuda-callout y el `gap: 0.625rem`
   de esa regla ya lo separa del texto; duplicarlo sólo abría un hueco de más. */
.ayuda-callout__titulo { font-weight: 600; }
/* Con icono propio se apaga el glifo del tipo: los dos juntos dejarían dos
   iconos en el mismo renglón. DOS clases en el selector (no una) para que la
   regla gane por ESPECIFICIDAD, no por su lugar en el archivo: contra
   `.ayuda-callout--tip::before` y compañía (también una clase + pseudo-
   elemento) el empate se rompería por orden de aparición, y reordenar este
   bloque apagaría el glifo equivocado en silencio. */
.ayuda-callout.ayuda-callout--con-icono::before { content: none; }

@media (max-width: 768px) {
  .ayuda-drawer { width: 100vw; }
}