/* Ayuda visual para quien usa la app por primera vez (manito + nota, recorrido y botón "? Ayuda").

   Tiene un lenguaje visual PROPIO, a propósito distinto al de cada página (que usa azul marino, dorado y crema):
   una nota adhesiva amarilla, ligeramente inclinada, con una etiqueta azul "? AYUDA", tipografía del sistema y una
   colita que apunta a lo que explica. Así se entiende al instante que es una guía puesta ENCIMA de la pantalla y no
   parte del contenido. Es el mismo en todas las pantallas: si se cambia acá, cambia en todas. */

/* ------------------------------------------------------------------ capa de la manito y la nota */
.ayuda-capa { position: fixed; inset: 0; z-index: 800; pointer-events: none; }
.ayuda-capa[hidden] { display: none; }

.ayuda-mano { position: absolute; width: 0; height: 0; transition: left .45s ease, top .45s ease; }
.ayuda-mano__anillo { position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%;
                      border: 4px solid #1F6FEB; background: rgba(31,111,235,.2); animation: ayudaAnillo 1.3s ease-out infinite; }
.ayuda-mano__icono { position: absolute; left: -25px; top: -6px; font-size: 50px; line-height: 1; transform-origin: 50% 0;
                     filter: drop-shadow(0 4px 5px rgba(0,0,0,.5)); animation: ayudaToca 1.1s ease-in-out infinite; }
.ayuda-mano--desliza .ayuda-mano__icono,
.ayuda-mano--desliza .ayuda-mano__anillo { animation: ayudaDesliza 2s ease-in-out infinite; }
@keyframes ayudaAnillo { 0% { transform: scale(.45); opacity: .95; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes ayudaToca { 0%,100% { transform: translateY(9px); } 50% { transform: translateY(-4px) scale(.94); } }
@keyframes ayudaDesliza { 0%,100% { transform: translateX(-58px) rotate(-12deg); } 50% { transform: translateX(58px) rotate(12deg); } }

.ayuda-nota { position: absolute; pointer-events: auto; box-sizing: border-box; background: #FFE867; color: #262626;
              border: 2px solid #E0B800; border-radius: 6px 14px 14px 14px; padding: 22px 12px 10px;
              font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
              font-size: 15px; line-height: 1.4; text-align: left; letter-spacing: 0; text-transform: none;
              box-shadow: 0 10px 24px rgba(0,0,0,.42), 2px 3px 0 rgba(0,0,0,.13);
              transform: rotate(-1deg); transition: left .45s ease, top .45s ease; }
.ayuda-nota__tag { position: absolute; top: -13px; left: 12px; background: #1F6FEB; color: #fff; font-weight: 900; font-size: 11.5px;
                   letter-spacing: .09em; padding: 4px 11px 4px 9px; border-radius: 20px; box-shadow: 0 3px 8px rgba(0,0,0,.4); }
.ayuda-nota__txt { margin: 0 0 8px; font-weight: 600; color: #262626; }
.ayuda-nota__pie { display: flex; align-items: center; gap: 6px; }
.ayuda-nota__pasos { margin-right: auto; font-size: 11px; font-weight: 800; color: #7a6200; letter-spacing: .04em; white-space: nowrap; }
.ayuda-nota__sig, .ayuda-nota__ok { font-family: inherit; font-size: 12.5px; font-weight: 800; border-radius: 10px; cursor: pointer;
                                    padding: 7px 10px; min-height: 34px; line-height: 1.1; white-space: nowrap; }
.ayuda-nota__sig { background: transparent; border: 2px solid #262626; color: #262626; }
.ayuda-nota__ok { background: #262626; border: 2px solid #262626; color: #fff; }
.ayuda-nota__sig[hidden] { display: none; }
.ayuda-nota__cola { position: absolute; width: 18px; height: 18px; background: #FFE867; border: 2px solid #E0B800; transform: rotate(45deg); }
.ayuda-nota--abajo .ayuda-nota__cola { top: -11px; border-right: none; border-bottom: none; }
.ayuda-nota--arriba .ayuda-nota__cola { bottom: -11px; border-left: none; border-top: none; }

/* ------------------------------------------------------------------ botón "? Ayuda" */
.ayuda-boton { position: fixed; z-index: 790; display: flex; align-items: center; gap: 4px; padding: 2px 9px 2px 2px;
               background: #1F6FEB; color: #fff; border: 1.5px solid #fff; border-radius: 999px; cursor: pointer;
               font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 11px; font-weight: 800;
               letter-spacing: .01em; line-height: 1; box-shadow: 0 3px 9px rgba(0,0,0,.42); }
/* Se ve chico, pero el área para tocarlo con el dedo sigue siendo cómoda (unos 44 px) gracias a este margen invisible. */
.ayuda-boton::after { content: ""; position: absolute; inset: -9px; }
.ayuda-boton[hidden] { display: none; }
.ayuda-boton:active { background: #1556b8; }
.ayuda-boton__q { width: 19px; height: 19px; border-radius: 50%; background: #FFE867; color: #1a1a1a; font-size: 12px; font-weight: 900;
                  display: flex; align-items: center; justify-content: center; }
.ayuda-boton--arriba-izq { top: 12px; left: 10px; }
/* La ayuda de una ventana (p. ej. el aviso de Términos, que está en la capa 3000) tiene que quedar por encima de esa ventana. */
.ayuda-boton--encima { z-index: 3090; }
.ayuda-capa--encima { z-index: 3100; }
.ayuda-boton--abajo-izq { left: 10px; bottom: 18px; }

/* ------------------------------------------------------------------ recorrido (varios pasos, con la pantalla atenuada) */
.ayuda-recorrido { position: fixed; inset: 0; z-index: 940; }
.ayuda-recorrido[hidden] { display: none; }
.ayuda-foco { position: fixed; border-radius: 16px; border: 4px solid #fff; pointer-events: none;
              box-shadow: 0 0 0 4px #1F6FEB, 0 0 0 9999px rgba(0,0,0,.76);
              transition: left .25s ease, top .25s ease, width .25s ease, height .25s ease; animation: ayudaFoco 1.5s ease-in-out infinite; }
@keyframes ayudaFoco { 0%,100% { box-shadow: 0 0 0 4px #1F6FEB, 0 0 0 9999px rgba(0,0,0,.76); }
                       50% { box-shadow: 0 0 0 8px rgba(31,111,235,.6), 0 0 0 9999px rgba(0,0,0,.76); } }
.ayuda-recorrido .ayuda-nota { position: fixed; left: 12px; right: 12px; max-width: 380px; margin: 0 auto; padding-top: 26px; }
.ayuda-recorrido__cab { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ayuda-recorrido__pablo { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid #262626; background: #fff; }
.ayuda-recorrido__saludo { flex: 1; font-size: 12.5px; font-weight: 800; color: #1F4FA8; }
.ayuda-recorrido__saludo[hidden] { display: none; }
.ayuda-recorrido__tit { margin: 0 0 4px; font-size: 20px; font-weight: 900; color: #262626; }
.ayuda-recorrido__txt { margin: 0 0 12px; font-size: 15.5px; line-height: 1.45; font-weight: 600; color: #262626; }
.ayuda-recorrido__saltar { background: none; border: none; color: #4a3f00; font-size: 14px; font-weight: 800; text-decoration: underline;
                           padding: 10px 6px; cursor: pointer; font-family: inherit; }
.ayuda-recorrido__saltar[hidden] { display: none; }
.ayuda-recorrido__sig { margin-left: auto; background: #1F6FEB; color: #fff; border: 2px solid #fff; border-radius: 12px; font-size: 16px;
                        font-weight: 900; padding: 11px 22px; min-height: 46px; cursor: pointer; font-family: inherit;
                        box-shadow: 0 4px 10px rgba(0,0,0,.35); }

@media (prefers-reduced-motion: reduce) {
  .ayuda-mano__icono, .ayuda-mano__anillo, .ayuda-mano--desliza .ayuda-mano__icono, .ayuda-mano--desliza .ayuda-mano__anillo { animation: none; }
  .ayuda-mano, .ayuda-nota { transition: none; }
  .ayuda-foco { animation: none; transition: none; }
}