/*
 * La pantalla de Ayuda, la del socio (/socio/ayuda) y la del panel
 * (/gestion/ayuda): arriba, Rasi con el buscador y «Lo más buscado»; debajo,
 * las guías por grupos, una debajo de otra. Rediseño del socio del 10 oct
 * 2026; desde el 19 oct 2026 la misma para el panel (antes socio-ayuda.css).
 *
 * La cargan las dos plantillas después de base.css, que tiene las piezas
 * que salen también fuera de aquí (bocadillo, pasos numerados, truco,
 * icono de la guía: la guía rápida del socio las usa).
 *
 *  1. Rasi y el buscador
 *  2. Buscando
 *  3. Los grupos y sus guías
 *  4. Una guía abierta
 */

/* #region 1. Rasi y el buscador */
/* Rasi saluda a la izquierda; a su lado, lo que dice y el buscador. */
.ayuda-hola {
    display: flex;
    align-items: center;
    gap: var(--espacio-5);
    padding: var(--espacio-5) var(--espacio-6);
    overflow: hidden;
    border: 1px solid var(--rs-borde-tarjeta);
    border-radius: var(--radio-lg);
    background:
        radial-gradient(22rem 14rem at 12% 60%, color-mix(in srgb, var(--rs-azul) 16%, transparent), transparent 70%),
        var(--rs-superficie-1);
}

.ayuda-hola__mascota {
    flex-shrink: 0;
    width: 150px;
    height: auto;
    filter: drop-shadow(0 12px 24px rgb(0 0 0 / 0.35));
    animation: saludar 1.2s var(--curva) both;
}

@keyframes saludar {
    from {
        opacity: 0;
        transform: translateY(12px) rotate(-3deg);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.ayuda-hola__contenido {
    display: grid;
    flex: 1;
    gap: var(--espacio-3);
    min-width: 0;
}

.ayuda-buscar input {
    min-height: 52px;
    font-size: var(--texto-grande);
}

/*
 * Lo más buscado: búsquedas típicas que se tocan sin escribir. El título
 * encima y los atajos en una sola fila: si no caben (el móvil), se deslizan
 * de lado, nunca uno suelto en otra línea.
 */
.ayuda-atajos {
    display: grid;
    gap: var(--espacio-2);
    min-width: 0;
}

.ayuda-atajos[hidden],
.ayuda-atajo[hidden] {
    display: none;
}

.ayuda-atajos__titulo {
    margin: 0;
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
}

.ayuda-atajos__lista {
    display: flex;
    gap: var(--espacio-2);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.ayuda-atajos__lista::-webkit-scrollbar {
    display: none;
}

.ayuda-atajo {
    flex: none;
    padding: 6px var(--espacio-3);
    border: 1px solid var(--rs-borde);
    border-radius: var(--radio-pildora);
    background: var(--rs-superficie-1);
    color: var(--rs-texto);
    font: inherit;
    font-size: var(--texto-etiqueta);
    cursor: pointer;
}

.ayuda-atajo:hover {
    background: var(--rs-hover);
}

.ayuda-atajo:focus-visible {
    outline: none;
    box-shadow: inset var(--anillo-foco);
}

@media (max-width: 767px) {
    .ayuda-hola {
        flex-direction: column;
        align-items: stretch;
        gap: var(--espacio-3);
        padding: var(--espacio-4);
    }

    .ayuda-hola__mascota {
        align-self: center;
        width: 110px;
    }

    .ayuda-hola .ayuda-bocadillo::before {
        top: -8px;
        left: calc(50% - 7px);
        border: 0;
        border-top: 1px solid var(--rs-borde);
        border-left: 1px solid var(--rs-borde);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ayuda-hola__mascota {
        animation: none;
    }
}
/* #endregion */

/* #region 2. Buscando */
/* «3 guías para «cuota»» y borrar; debajo, los resultados en una sola lista. */
.ayuda-resumen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-2);
    margin-top: var(--espacio-5);
}

.ayuda-resumen[hidden],
.ayuda-resultados[hidden] {
    display: none;
}

.ayuda-resumen p {
    margin: 0;
    font-weight: 600;
}

.ayuda-resumen .boton-enlace {
    color: var(--rs-texto-secundario);
}

.ayuda-resultados {
    display: grid;
    gap: var(--espacio-3);
    margin-top: var(--espacio-3);
}

/* El paso que responde a lo buscado, marcado en la guía que más encaja. */
.ayuda-pasos li.ayuda-paso--buscado {
    margin-left: calc(-1 * var(--espacio-3));
    padding: var(--espacio-3) var(--espacio-3) var(--espacio-3) calc(52px + var(--espacio-3));
    border-radius: var(--radio-md);
    background: var(--rs-azul-suave);
    box-shadow: inset 3px 0 0 var(--rs-azul);
}

.ayuda-pasos li.ayuda-paso--buscado::before {
    top: var(--espacio-3);
    left: var(--espacio-3);
}

.ayuda-paso__marca {
    display: block;
    margin-bottom: 2px;
    color: var(--rs-azul-texto);
    font-size: var(--texto-pequeno);
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* Nada encaja con lo buscado: se dice, y si hay Rasi, se le pregunta con esas palabras. */
.ayuda-sin-resultados {
    display: grid;
    margin-top: var(--espacio-5);
    justify-items: center;
    gap: var(--espacio-3);
    padding: var(--espacio-6) var(--espacio-5);
    border: 1px dashed var(--rs-borde);
    border-radius: var(--radio-lg);
    text-align: center;
}

.ayuda-sin-resultados[hidden],
.ayuda-sin-resultados [hidden] {
    display: none;
}

.ayuda-sin-resultados p {
    margin: 0;
    color: var(--rs-texto-secundario);
    font-size: var(--texto-grande);
}

.ayuda-sin-resultados img {
    width: 28px;
    height: 28px;
}
/* #endregion */

/* #region 3. Los grupos y sus guías */
.ayuda-grupo[hidden] {
    display: none;
}

.ayuda-grupo + .ayuda-grupo,
.ayuda-hola + .ayuda-grupo,
.ayuda-sin-resultados + .ayuda-grupo {
    margin-top: var(--espacio-6);
}

.ayuda-grupo__titulo {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    margin: 0 0 var(--espacio-3);
    font-size: var(--texto-grande);
}

/* El icono del tema en el tono de su sección (data-area); sus guías llevan el mismo tono. */
.ayuda-grupo__icono {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 11px;
    background: var(--tono-seccion, var(--marca-acento));
    box-shadow: 0 6px 14px color-mix(in srgb, var(--tono-seccion, var(--marca-acento)) 28%, transparent);
    color: #FFFFFF;
}

.ayuda-grupo__icono .icono {
    width: 18px;
    height: 18px;
}

.ayuda-grupo .ayuda-guia__icono {
    background: color-mix(in srgb, var(--tono-seccion, var(--marca-acento)) 13%, transparent);
}

.ayuda-grupo .ayuda-guia__icono .icono {
    color: var(--tono-seccion, var(--marca-acento));
}

/* En el índice, cada tema con su punto de color. */
.ayuda-indice a > span {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-2);
}

.ayuda-indice a > span > i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tono-seccion, var(--marca-acento));
}

/* Las guías del grupo, una debajo de otra (10 oct 2026: se leen mejor que de dos en dos). */
.ayuda-grupo__guias {
    display: grid;
    gap: var(--espacio-3);
}

/* Cada guía: su icono, el nombre y para qué sirve; la flecha gira al abrirla. */
.ayuda-guia {
    margin: 0;
    padding: 0;
    border: 1px solid var(--rs-borde-tarjeta);
    border-radius: var(--radio-lg);
    background: var(--rs-superficie-1);
    scroll-margin-top: calc(var(--alto-superior) + var(--espacio-4));
    transition: border-color 0.15s var(--curva);
}

.ayuda-guia[hidden] {
    display: none;
}

.ayuda-guia:hover {
    border-color: var(--rs-borde-fuerte);
}

.ayuda-guia__cabecera {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    padding: var(--espacio-4);
    border-radius: inherit;
    list-style: none;
    cursor: pointer;
}

.ayuda-guia__cabecera::-webkit-details-marker {
    display: none;
}

.ayuda-guia__cabecera:focus-visible {
    outline: none;
    box-shadow: var(--anillo-foco);
}

.ayuda-guia__cabecera > .icono:last-child {
    flex: none;
    width: 20px;
    height: 20px;
    color: var(--rs-texto-tenue);
    transition: transform var(--duracion-menu) var(--curva);
}

.ayuda-guia[open] .ayuda-guia__cabecera > .icono:last-child {
    transform: rotate(180deg);
}

.ayuda-guia__textos {
    display: grid;
    flex: 1;
    gap: 2px;
    min-width: 0;
}

.ayuda-guia__textos h3 {
    margin: 0;
    font-size: var(--texto-base);
    line-height: 1.3;
}

/* Para qué sirve, en dos líneas como mucho mientras está cerrada. */
.ayuda-guia__para {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

@media (prefers-reduced-motion: reduce) {
    .ayuda-guia {
        transition: none;
    }
}
/* #endregion */

/* #region 3b. En el panel: el índice al lado y las guías de dos en dos (3 nov 2026) */
.contenido-gestion .ayuda-cuerpo {
    display: grid;
    grid-template-columns: 14rem minmax(0, 1fr);
    align-items: start;
    gap: var(--espacio-6);
    margin-top: var(--espacio-6);
}

.ayuda-indice {
    position: sticky;
    top: calc(var(--alto-superior) + var(--espacio-4));
    max-height: calc(100dvh - var(--alto-superior) - var(--espacio-8));
    overflow-y: auto;
    scrollbar-width: thin;
}

.ayuda-indice__titulo {
    margin: 0 0 var(--espacio-2);
    padding: 0 var(--espacio-3);
    color: var(--rs-texto-tenue);
    font-size: var(--texto-pequeno);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ayuda-indice ul {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ayuda-indice a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-2);
    padding: 6px var(--espacio-3);
    border-radius: var(--radio-md);
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
    text-decoration: none;
}

.ayuda-indice a:hover {
    background: var(--rs-hover);
    color: var(--rs-texto);
}

.ayuda-indice small {
    color: var(--rs-texto-tenue);
    font-variant-numeric: tabular-nums;
}

.contenido-gestion .ayuda-cuerpo .ayuda-grupo {
    scroll-margin-top: calc(var(--alto-superior) + var(--espacio-4));
}

.contenido-gestion .ayuda-cuerpo .ayuda-grupo:first-child {
    margin-top: 0;
}

.contenido-gestion .ayuda-cuerpo .ayuda-grupo__guias {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Abierta, a lo ancho: se lee entera sin dejar un hueco al lado. */
.contenido-gestion .ayuda-cuerpo .ayuda-guia[open] {
    grid-column: 1 / -1;
}

@media (max-width: 1200px) {
    .contenido-gestion .ayuda-cuerpo {
        grid-template-columns: minmax(0, 1fr);
    }

    .ayuda-indice {
        display: none;
    }
}

@media (max-width: 900px) {
    .contenido-gestion .ayuda-cuerpo .ayuda-grupo__guias {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* #endregion */

/* #region 4. Una guía abierta */
/* Abierta, se lee entera, con sus pasos grandes. */
.ayuda-guia[open] {
    display: grid;
    padding-bottom: var(--espacio-5);
    border-color: color-mix(in srgb, var(--marca-acento) 45%, var(--rs-borde-tarjeta));
}

.ayuda-guia[open] .ayuda-guia__para {
    display: block;
    font-size: var(--texto-base);
}

.ayuda-guia[open] > :not(summary) {
    margin-right: var(--espacio-5);
    margin-left: var(--espacio-5);
}

.ayuda-guia .ayuda-pasos {
    margin-top: var(--espacio-2);
}

/* «Ir a la pantalla»: al final de la guía, lleva a su pantalla. */
.ayuda-guia__ir {
    justify-self: start;
    width: fit-content;
    margin-top: var(--espacio-4);
}

@media (max-width: 767px) {
    .ayuda-guia[open] > :not(summary) {
        margin-right: var(--espacio-4);
        margin-left: var(--espacio-4);
    }

    .ayuda-guia__ir {
        width: auto;
        justify-content: center;
    }
}
/* #endregion */

/* #region 5. En el socio: sin cajas, con sus líneas finas (5 nov 2026, «demasiado IA»); Rasi y su bocadillo se quedan */
.app-socio .ayuda-hola {
    padding: 0;
    overflow: visible;
    border: 0;
    background: none;
}

.app-socio .ayuda-atajos__lista {
    gap: var(--espacio-4);
}

.app-socio .ayuda-atajo {
    padding: 0;
    border: 0;
    background: none;
    color: var(--marca-acento);
    font-weight: 600;
}

.app-socio .ayuda-atajo:hover {
    background: none;
    color: var(--rs-texto);
}

.app-socio .ayuda-grupo + .ayuda-grupo,
.app-socio .ayuda-hola + .ayuda-grupo,
.app-socio .ayuda-sin-resultados + .ayuda-grupo {
    margin-top: var(--espacio-8);
}

.app-socio .ayuda-grupo__titulo {
    font-size: clamp(1.25rem, 1.6vw, 1.6rem);
    font-weight: 650;
    letter-spacing: -0.025em;
}

.app-socio .ayuda-grupo__guias,
.app-socio .ayuda-resultados {
    gap: 0;
    border-bottom: 1px solid var(--rs-borde-sutil);
}

.app-socio .ayuda-guia,
.app-socio .ayuda-guia:hover,
.app-socio .ayuda-guia[open] {
    border: 0;
    border-top: 1px solid var(--rs-borde-sutil);
    border-radius: 0;
    background: none;
}

.app-socio .ayuda-guia__cabecera {
    padding: var(--espacio-3) 0;
}

.app-socio .ayuda-guia__cabecera:hover h3 {
    color: var(--marca-acento);
}

.app-socio .ayuda-grupo .ayuda-guia__icono,
.app-socio .ayuda-resultados .ayuda-guia__icono {
    width: 28px;
    height: auto;
    background: none;
}

.app-socio .ayuda-guia[open] > :not(summary) {
    margin-right: 0;
    margin-left: 0;
}

.app-socio .ayuda-sin-resultados {
    justify-items: start;
    padding: 0;
    border: 0;
    text-align: left;
}
/* #endregion */