/* Ayuda (guía completa + ventana del botón "?"). Se usa en la app, en la página
   pública ayuda.html y en el panel web: los colores caen a valores fijos si la
   página no define los tokens --mc-* de la app. */
.ay-guia,
.ay-dialogo {
    --ay-sup: var(--mc-surface, #fff);
    --ay-fondo: var(--mc-bg, #fbf8f4);
    --ay-texto: var(--mc-text, #1a1411);
    --ay-tenue: var(--mc-muted, #5a4d44);
    --ay-borde: var(--mc-border, #cbbfb3);
    --ay-prim: var(--mc-primary, #7a2e12);
    --ay-oro: var(--mc-accent, #b7791f);
}

.ay-barra {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    align-items: center;
    margin-bottom: .8rem;
}

.ay-buscar {
    position: relative;
    flex: 1 1 260px;
}

.ay-buscar .bi {
    position: absolute;
    left: .9rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ay-tenue);
}

.ay-buscar input {
    width: 100%;
    min-height: 46px;
    padding: 0 1rem 0 2.4rem;
    border: 1px solid var(--ay-borde);
    border-radius: 999px;
    background: var(--ay-sup);
    color: var(--ay-texto);
}

.ay-botones {
    display: flex;
    gap: .4rem;
}

.ay-botones button {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 40px;
    padding: 0 .8rem;
    border: 1px solid var(--ay-borde);
    border-radius: 999px;
    background: var(--ay-sup);
    color: var(--ay-texto);
    font-size: .85rem;
    font-weight: 600;
}

.ay-indice {
    display: flex;
    gap: .4rem;
    overflow-x: auto;
    padding-bottom: .4rem;
    margin-bottom: .6rem;
    scrollbar-width: thin;
}

.ay-indice a {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .75rem;
    border: 1px solid var(--ay-borde);
    border-radius: 999px;
    background: var(--ay-sup);
    color: var(--ay-texto);
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.ay-grupo {
    margin-top: 1.2rem;
}

.ay-grupo h2 {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--mc-serif, Georgia, serif);
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0 0 .2rem;
    color: var(--ay-texto);
}

.ay-grupo h2 .bi {
    color: var(--ay-oro);
}

.ay-grupo-desc {
    color: var(--ay-tenue);
    margin-bottom: .6rem;
}

.ay-modulo {
    background: var(--ay-sup);
    border: 1px solid var(--ay-borde);
    border-radius: 1rem;
    margin-bottom: .7rem;
    scroll-margin-top: 80px;
    transition: box-shadow .3s;
}

.ay-modulo.ay-resalta {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ay-oro) 55%, transparent);
}

.ay-modulo > summary,
.ay-dialogo-cabeza {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .9rem 1rem;
    list-style: none;
    cursor: pointer;
    color: var(--ay-texto);
}

.ay-modulo > summary::-webkit-details-marker {
    display: none;
}

.ay-icono {
    flex: 0 0 42px;
    height: 42px;
    border-radius: .8rem;
    display: grid;
    place-items: center;
    background: var(--ay-color, #7a2e12);
    color: #fff;
    font-size: 1.2rem;
}

.ay-titulo {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ay-titulo strong {
    font-size: 1.05rem;
}

.ay-titulo small {
    color: var(--ay-tenue);
}

.ay-donde {
    display: block;
    margin-top: .15rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.ay-donde .bi {
    margin-right: .35rem;
}

.ay-para {
    flex: 0 0 auto;
    align-self: center;
    padding: .15rem .6rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ay-oro) 18%, transparent);
    color: var(--ay-texto);
    font-size: .72rem;
    font-weight: 700;
}

.ay-flecha {
    align-self: center;
    color: var(--ay-tenue);
    transition: transform .2s;
}

.ay-modulo[open] .ay-flecha {
    transform: rotate(180deg);
}

.ay-cuerpo {
    padding: 0 1rem 1rem;
    color: var(--ay-texto);
    overflow-wrap: anywhere;
}

.ay-modulo .ay-cuerpo {
    border-top: 1px solid var(--ay-borde);
}

.ay-sec {
    padding-top: .8rem;
}

.ay-sec h4 {
    font-size: .98rem;
    font-weight: 800;
    margin: 0 0 .3rem;
}

.ay-sec p {
    margin: 0 0 .45rem;
}

.ay-pasos,
.ay-puntos {
    margin: 0 0 .45rem;
    padding-left: 1.3rem;
}

.ay-pasos li,
.ay-puntos li {
    margin-bottom: .25rem;
}

.ay-pasos li::marker {
    font-weight: 800;
    color: var(--ay-prim);
}

.ay-consejo {
    display: flex;
    gap: .6rem;
    padding: .6rem .75rem;
    border-radius: .8rem;
    background: color-mix(in srgb, var(--ay-oro) 12%, var(--ay-sup));
    border-left: 4px solid var(--ay-oro);
}

.ay-consejo .bi {
    color: var(--ay-oro);
    font-size: 1.1rem;
}

.ay-consejo p {
    margin: 0 0 .25rem;
}

.ay-consejo p:last-child {
    margin: 0;
}

.ay-faq details {
    border-top: 1px solid var(--ay-borde);
    padding: .45rem 0;
}

.ay-faq summary {
    font-weight: 700;
    cursor: pointer;
}

.ay-faq details p {
    margin: .35rem 0 0;
    color: var(--ay-tenue);
}

.ay-sin,
.ay-pie {
    color: var(--ay-tenue);
    text-align: center;
    padding: 1rem 0;
}

/* ---- Ventana del botón "?" ------------------------------------------------ */
.ay-dialogo {
    width: min(560px, calc(100vw - 24px));
    max-height: calc(100dvh - 32px);
    padding: 0;
    border: 0;
    border-radius: 1.2rem;
    background: var(--ay-sup);
    color: var(--ay-texto);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}

.ay-dialogo::backdrop {
    background: rgba(20, 10, 5, .5);
}

.ay-dialogo-caja {
    display: flex;
    flex-direction: column;
    max-height: calc(100dvh - 32px);
}

.ay-dialogo-cabeza {
    cursor: default;
    border-bottom: 1px solid var(--ay-borde);
}

.ay-cerrar {
    flex: 0 0 auto;
    border: 0;
    background: none;
    color: var(--ay-tenue);
    font-size: 1.1rem;
    padding: .2rem;
}

.ay-dialogo-cuerpo {
    overflow-y: auto;
}

.ay-dialogo-pie {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    padding: .75rem 1rem;
    border-top: 1px solid var(--ay-borde);
}

/* En teléfono la ventana sale desde abajo. */
@media (max-width: 575.98px) {
    .ay-dialogo {
        margin: auto 0 0;
        width: 100vw;
        max-width: 100vw;
        border-radius: 1.2rem 1.2rem 0 0;
    }
}

/* Las **negritas** del resumen y de "Dónde está" no heredan el tamaño del título. */
.ay-titulo small strong {
    font-size: inherit;
}