/* Seccion Ayuda: la busqueda y la lista de guias (una tarjeta por guia), una guia
   paso a paso y la ayuda sin sesion. Solo usa tokens y los componentes del kit. */

/* Busqueda: el ancho del diseño (360 px), y se achica en una pantalla angosta. */
.help-search {
  width: 360px;
  max-width: 100%;
}

/* Lista de guias: se acomoda sola al ancho que haya, de una a varias columnas. */
.help-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
}

/* Toda la tarjeta es el enlace. El alto minimo garantiza el objetivo tactil de
   44 px aunque el titulo y el resumen fueran de una linea. El foco lo dibuja el
   anillo global de base.css (:focus-visible). */
.help-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  min-height: 44px;
  padding: calc(var(--space-5) - var(--border-width-default));
  border: var(--border-width-default) solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-bg-surface);
  color: inherit;
  text-decoration: none;
}

.help-card:hover {
  border-color: var(--color-border-strong);
  background: linear-gradient(var(--color-bg-hover), var(--color-bg-hover)), var(--color-bg-surface);
}

.help-card:active {
  background: linear-gradient(var(--color-bg-pressed), var(--color-bg-pressed)), var(--color-bg-surface);
}

.help-card__title {
  margin: 0;
  color: var(--color-text-primary);
  font: var(--typography-title-sm);
  overflow-wrap: anywhere;
}

.help-card__summary {
  margin: 0;
  color: var(--color-text-secondary);
  font: var(--typography-body-md);
  overflow-wrap: anywhere;
}

/* La marca "Solo plataforma" queda abajo aunque el resumen sea corto. */
.help-card__mark {
  margin-block-start: auto;
  padding-block-start: var(--space-2);
}

/* Etiqueta neutra: un recuadro chico con el fondo elevado. */
.help-tag {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-2);
  border: var(--border-width-default) solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: var(--color-bg-raised);
  color: var(--color-text-secondary);
  font: var(--typography-body-sm);
  white-space: nowrap;
}

/* Una guia: cada paso dice que hacer, muestra su captura y, al final, en un
   recuadro, que tiene que verse al terminar. El texto se limita a una medida de
   lectura comoda; las capturas usan todo el ancho de la pagina, que es lo que
   las hace legibles. */
.guide-layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
}

.guide-intro,
.guide-step-text,
.guide-expected {
  max-width: 880px;
}

.guide-intro {
  margin: 0;
  color: var(--color-text-secondary);
  font: var(--typography-body-md);
  overflow-wrap: anywhere;
}

.guide-steps {
  margin: 0;
  padding-inline-start: var(--space-6);
}

.guide-step {
  min-width: 0;
}

.guide-step + .guide-step {
  margin-block-start: var(--space-6);
}

.guide-step::marker {
  color: var(--color-brand-ink);
  font: var(--typography-label-md);
}

.guide-step-title {
  margin: 0 0 var(--space-2);
  color: var(--color-text-primary);
  font: var(--typography-label-md);
}

.guide-step-text {
  margin: 0 0 var(--space-3);
  color: var(--color-text-secondary);
  font: var(--typography-body-md);
  overflow-wrap: anywhere;
}

/* Captura de un paso, con su descripcion debajo. Al ancho de la pagina, con el
   borde de .image__img que la separa del fondo (las capturas son claras y el
   tema puede ser oscuro). Con dos capturas, la segunda va debajo de la primera. */
.guide-step .image + .image {
  margin-block-start: var(--space-3);
}

.guide-caption {
  margin-block-start: var(--space-2);
  color: var(--color-text-tertiary);
  font: var(--typography-body-sm);
  overflow-wrap: anywhere;
}

.guide-expected {
  padding: var(--space-3) var(--space-4);
  border: var(--border-width-default) solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
}

/* Despues de una captura, el recuadro se separa de su descripcion. */
.guide-step .image + .guide-expected {
  margin-block-start: var(--space-3);
}

.guide-expected-label {
  margin: 0 0 var(--space-1);
  color: var(--color-text-primary);
  font: var(--typography-label-sm);
}

.guide-expected-text {
  margin: 0;
  color: var(--color-text-secondary);
  font: var(--typography-body-sm);
  overflow-wrap: anywhere;
}

/* El codigo dentro del texto de una guia (rutas, claves, valores): como en el
   resto de la consola va en Jost con cifras tabulares (la marca no tiene
   monoespaciada), asi que lo que lo distingue de la prosa es el fondo y el peso.
   Hereda el tamano del texto que lo rodea, que en el recuadro es mas chico. */
.guide-layout code,
.help-card code {
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm);
  background: var(--color-bg-raised);
  color: var(--color-text-primary);
  font-weight: var(--typography-fontweight-medium);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* Ayuda sin sesion: marca y "Iniciar sesion" arriba, el mismo contenido debajo. */
.help-public {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--color-bg-page);
}

.help-public__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  border-bottom: var(--border-width-default) solid var(--color-border-subtle);
  background: var(--color-bg-surface);
}

.help-public__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text-primary);
}

.help-public__icon {
  color: var(--color-icon-brand);
}

.help-public__name {
  font: var(--typography-title-md);
}

.help-public__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-width: 0;
  padding: var(--space-6);
}