/* PRUEBA DE DISEÑO — diseno-ayuda.css. Usa los tokens de diseno.css.
   La pantalla ❓ Ayuda (prefijo .ay-) y el recorrido guiado (.rc-), los dos
   del 26/9/2026 (Mario: «debería ir en ayuda … una guía interactiva con
   dibujos y cosas gráficas para que la gente se ubique mejor»). */

/* ------------------------------------------------------ la pantalla -- */
/* Centrada y más angosta que las listas: es para leer, no para trabajar. */
.ay-ayuda { max-width: 960px; display: grid; gap: var(--e-4); }
.ay-ayuda .dn-cabecera { justify-content: center; text-align: center; margin-bottom: 0; }
.ay-ayuda .tarjeta > h2 { text-align: center; }
.ay-ayuda .cuerpo { display: grid; gap: var(--e-3); justify-items: center; text-align: center; padding: var(--e-4); }
.ay-ayuda .cuerpo p { margin: 0; }
.ay-ayuda .cuerpo > p:not(.nota) { max-width: 60ch; }

/* EL RECORRIDO, COMPACTO (frontend v3 · fase 6, 6/10/2026, ficha 24: «el
   recorrido ocupa una tarjeta grande»): el dibujito, el texto y el botón en un
   renglón. Medía 258 px de alto; en el teléfono se apilan, al centro. */
.ay-recorrido .cuerpo {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--e-4);
  padding: var(--e-4) var(--e-5);
}
.ay-recorrido-texto { display: grid; gap: var(--e-1); justify-items: center; min-width: 0; }
/* Sin la raya ni la barrita de las secciones de Mi cuenta (`.tarjeta .cuerpo
   h3`, estilo.css): aquí el título va solo. */
.ay-ayuda .cuerpo h3 { margin: 0; padding: 0; border-top: 0; font: 650 var(--t-titulo)/1.3 var(--fuente-titulo); }
.ay-ayuda .cuerpo h3::before { content: none; }
.ay-recorrido .cuerpo h3 { font-size: 17px; }
.ay-dibujo { color: var(--azul); line-height: 0; }
.ay-dibujo svg { width: 44px; height: 44px; }
.boton.ay-grande { font-size: 15.5px; padding: 10px var(--e-5); border-radius: var(--radio); min-height: 44px; }

/* LOS TEMAS, POR TAREA (lámina 13): un buscador arriba y cinco grupos, cada
   uno con su título y sus temas. Los grupos van en filas centradas, así el
   último no deja un hueco colgando a un lado. */
/* `max-width: none`: el tope de 360 px de las demás listas cortaba la frase. */
.ay-ayuda .buscar-en-lista { width: min(100%, 560px); max-width: none; min-height: 42px; text-align: center; }
.ay-grupos { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: var(--e-3); }
.ay-grupo {
  flex: 1 1 260px;
  max-width: 440px;
  display: grid;
  align-content: start;
  gap: var(--e-2);
  min-width: 0;
  padding: var(--e-3);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--papel-2);
}
.ay-grupo[hidden] { display: none; }
.ay-ayuda .cuerpo .ay-grupo > h3 { color: var(--azul); }
.ay-temas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-1); }
.ay-temas li { display: flex; }
.ay-temas li[hidden] { display: none; }
.ay-tema {
  flex: 1;
  display: grid;
  place-items: center;
  min-height: 40px;
  padding: var(--e-2) var(--e-3);
  border: 1px solid var(--borde-tarjeta);
  border-radius: var(--radio-control);
  background: var(--papel);
  color: var(--texto);
  text-decoration: none;
  text-align: center;
  line-height: 1.35;
  box-shadow: var(--sombra-chica);
  transition: background-color .12s ease, border-color .12s ease;
}
.ay-tema:hover { background: var(--azul-suave); border-color: var(--azul); color: var(--texto); }

.ay-dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4); align-items: stretch; }
.ay-dos > .tarjeta { display: grid; grid-template-rows: auto 1fr; }
.ay-dos .boton { min-height: 40px; }
.ay-correo { font-weight: 650; color: var(--azul); }

@media (max-width: 700px) {
  .ay-dos { grid-template-columns: 1fr; }
  .ay-recorrido .cuerpo { grid-template-columns: minmax(0, 1fr); justify-items: center; padding: var(--e-4); }
  .ay-grupo { flex-basis: 100%; max-width: none; }
}

/* ------------------------------------------------ el recorrido guiado -- */
/* Encima de la aplicación y del menú del teléfono (150); debajo de la
   pantalla de ingreso (200), los modales (300) y los avisos (400). La capa se
   traga los clics: mientras dura, lo de atrás se mira y no se toca. */
.rc-capa { position: fixed; inset: 0; z-index: 180; }

/* La ventanita clara alrededor del botón que se explica: su sombra enorme es
   la penumbra de todo lo demás. Anillo claro y anillo azul: se ve igual sobre
   el menú en tinta que sobre la barra blanca del teléfono. */
.rc-foco {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 10px;
  box-shadow: 0 0 0 2px var(--papel), 0 0 0 4px var(--azul), 0 0 0 200vmax rgba(8, 12, 18, .55);
  pointer-events: none;
  transition: transform 200ms cubic-bezier(.23, 1, .32, 1);
}
.rc-foco.rc-sin-destino { box-shadow: 0 0 0 200vmax rgba(8, 12, 18, .55); }

.rc-burbuja {
  /* A qué altura (o ancho) va la punta de la flecha; JS la pone en cada paso. */
  --flecha: 24px;
  position: absolute;
  left: 0;
  top: 0;
  width: min(340px, calc(100vw - 24px));
  box-sizing: border-box;
  padding: 16px 18px 14px;
  display: grid;
  gap: 8px;
  justify-items: center;
  text-align: center;
  background: var(--papel);
  color: var(--texto);
  border: 1px solid var(--borde-tarjeta);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra);
  /* Salida suave (ease-out) de 200 ms, SOLO transform y opacity (encargo del
     26/9). Entre pasos la misma transición mueve la burbuja a su lugar. */
  transition: transform 200ms cubic-bezier(.23, 1, .32, 1), opacity 200ms cubic-bezier(.23, 1, .32, 1);
}
/* El primer cuadro se pone sin transición: es el punto de salida. */
.rc-burbuja.rc-quieta, .rc-foco.rc-quieta { transition: none; }

.rc-dibujo { color: var(--azul); line-height: 0; }
.rc-dibujo .rc-suave, .ay-dibujo .rc-suave { fill: var(--azul-suave); }
.rc-dibujo .rc-trazo, .ay-dibujo .rc-trazo { stroke: var(--verde); }
.rc-dibujo .rc-verde { fill: var(--verde-suave); stroke: var(--verde); }
.rc-contenido { display: grid; gap: 4px; }
.rc-cuenta { margin: 0; font-size: 12px; font-weight: 650; color: var(--tenue); font-variant-numeric: tabular-nums; }
.rc-titulo { margin: 0; font-size: 17px; }
.rc-texto { margin: 0; font-size: 14px; line-height: 1.45; }
.rc-botones { width: 100%; margin-top: 4px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rc-pasar { display: flex; gap: 6px; }
.rc-botones .boton { padding: 6px 12px; }

/* La flecha: un cuadrito girado con el borde de la burbuja en los dos lados
   que dan afuera. JS pone el lado (data-lado) y la altura de la punta
   (--flecha), para que señale el centro del botón aunque la burbuja se corra.
   Los −8 px (y no −7, la mitad del cuadrito) son por el borde: lo absoluto se
   mide desde adentro del borde de 1 px, y --flecha desde afuera. */
.rc-flecha {
  position: absolute;
  width: 14px;
  height: 14px;
  box-sizing: border-box;
  background: var(--papel);
  border: 1px solid var(--borde-tarjeta);
  transform: rotate(45deg);
}
.rc-burbuja[data-lado="derecha"] .rc-flecha { left: -8px; top: calc(var(--flecha) - 8px); border-top-color: transparent; border-right-color: transparent; }
.rc-burbuja[data-lado="izquierda"] .rc-flecha { right: -8px; top: calc(var(--flecha) - 8px); border-bottom-color: transparent; border-left-color: transparent; }
.rc-burbuja[data-lado="abajo"] .rc-flecha { top: -8px; left: calc(var(--flecha) - 8px); border-bottom-color: transparent; border-right-color: transparent; }
.rc-burbuja[data-lado="arriba"] .rc-flecha { bottom: -8px; left: calc(var(--flecha) - 8px); border-top-color: transparent; border-left-color: transparent; }

/* Con «reducir movimiento», nada se desplaza: aparece con el fundido y cada
   paso salta a su lugar. */
@media (prefers-reduced-motion: reduce) {
  .rc-burbuja { transition: opacity 200ms cubic-bezier(.23, 1, .32, 1); }
  .rc-foco { transition: none; }
}

/* EN EL TELÉFONO, LOS TRES BOTONES DEL RECORRIDO MIDEN 40 PX (frontend v3 ·
   fase 6, 6/10/2026, ficha 95: «conservar anterior, siguiente y saltar»).
   Medían 30: con el dedo se apretaba el de al lado. En la compu quedan igual. */
@media (max-width: 700px) {
  .rc-botones .boton { min-height: 40px; }
}