/* =============================================================================
 * ayuda.css — callouts tipados de la pantalla de Ayuda (Estándar D7.2).
 * Set canónico del despacho (clon de actividades_personal/public/css/ayuda.css):
 *   .ayuda-tip-card     CONSEJO      bi-lightbulb
 *   .ayuda-note-card    NOTA         bi-info-circle
 *   .ayuda-warning-card IMPORTANTE   bi-exclamation-triangle
 *   .ayuda-req-card     PRECAUCIÓN   bi-shield-lock
 * Todo callout lleva su icono `.tip-icon`. Colores por tokens Bootstrap.
 * ============================================================================= */

.ayuda-tip-card {
  border-left: 4px solid var(--bs-info);
  background-color: var(--bs-info-bg-subtle);
  border-radius: 0.375rem;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  font-size: 0.875rem;
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
}
.ayuda-tip-card .tip-icon {
  color: var(--bs-info-text-emphasis);
  font-size: 1rem;
  margin-top: 1px;
  flex-shrink: 0;
}

.ayuda-warning-card {
  border-left: 4px solid var(--bs-warning);
  background-color: var(--bs-warning-bg-subtle);
  border-radius: 0.375rem;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  font-size: 0.875rem;
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
}
.ayuda-warning-card .tip-icon {
  color: var(--bs-warning-text-emphasis);
  font-size: 1rem;
  margin-top: 1px;
  flex-shrink: 0;
}

.ayuda-req-card {
  border-left: 4px solid var(--bs-danger);
  background-color: var(--bs-danger-bg-subtle);
  border-radius: 0.375rem;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  font-size: 0.875rem;
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
}
.ayuda-req-card .tip-icon {
  color: var(--bs-danger-text-emphasis);
  font-size: 1rem;
  margin-top: 1px;
  flex-shrink: 0;
}

/* NOTA — aclaratoria, sutil */
.ayuda-note-card {
  border-left: 4px solid var(--bs-secondary-border-subtle);
  background-color: var(--bs-tertiary-bg);
  border-radius: 0.375rem;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  font-size: 0.875rem;
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
}
.ayuda-note-card .tip-icon {
  color: var(--bs-secondary-color);
  font-size: 1rem;
  margin-top: 1px;
  flex-shrink: 0;
}

/* Metadata editorial visible (D7.8) */
.ayuda-meta {
  color: var(--bs-secondary-color);
  font-size: 0.8rem;
  margin-bottom: 1.25rem;
}

/* [D7.3] Anclas de Ayuda contextual (/ayuda#seccion): compensar el navbar
   sticky para que el título de la sección no quede tapado al saltar.

   La banda de base atrasada (12a ola) también es fija y también vive arriba, así
   que cuenta igual. `--banda-height` SÓLO existe bajo `.con-banda`, o sea que
   sin banda el respaldo `0px` deja este cálculo exactamente como estaba. */
.ayuda h3[id] {
  scroll-margin-top: calc(var(--navbar-height, 56px) + var(--banda-height, 0px) + 1rem);
}

/* [13ª ola] Preguntas frecuentes del manual. Cada pregunta abre su bloque y la
   respuesta va debajo, no al lado: son frases completas y en dos columnas la
   respuesta quedaría en una tira estrecha. El realce de la pregunta es el peso
   de la letra, no un color propio: la lista vive dentro de la sección de su
   pantalla y no debe competir con los recuadros de nota y de aviso. */
.ayuda .ayuda-faq-manual { margin: 0 0 1.5rem; }
.ayuda .ayuda-faq-manual dt { font-weight: 600; margin-top: 1rem; }
.ayuda .ayuda-faq-manual dt:first-child { margin-top: 0; }
.ayuda .ayuda-faq-manual dd { margin: 0.25rem 0 0; color: var(--bs-secondary-color); }