/* =====================================================================
   PÁGINAS DE RRPP — rrpp/{código} y su fiesta (includes/rrpp.php),
   y Mi página de RRPP (mi-rrpp.php). Las tarjetas de fiesta y la página
   de la fiesta usan agenda.css.
   ===================================================================== */

/* ----- Cabecera de la página del RRPP ----- */
.rrpp-cabecera {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 12px;
}
.rrpp-cabecera h1 { margin-bottom: 6px; font-size: clamp(1.9rem, 6vw, 3rem); }
.rrpp-cabecera__texto { min-width: 0; }
.rrpp-cabecera__bio { max-width: 52ch; margin: 0; color: var(--texto-suave); }

.rrpp-avatar {
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    flex: none;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--acento) 32%, var(--superficie)), var(--superficie) 70%);
    border: 1px solid var(--borde-fuerte);
    color: var(--texto);
    font-size: 2.1rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}
.rrpp-avatar--mini { width: 26px; height: 26px; font-size: .8rem; }
@media (max-width: 519px) {
    .rrpp-cabecera { align-items: flex-start; }
    .rrpp-avatar:not(.rrpp-avatar--mini) { width: 60px; height: 60px; font-size: 1.5rem; }
}

/* Filtro por sala: enlaces en fila, el elegido marcado. */
.rrpp-salas { margin: 4px 0 20px; }
.rrpp-salas .chips li { padding: 0; transition: border-color var(--transicion); }
.rrpp-salas .chips a { display: block; padding: 6px 12px; }
.rrpp-salas .chips li:hover { border-color: var(--texto-tenue); }
.rrpp-salas .chips li:has(a[aria-current]) { border-color: var(--acento); color: var(--texto); }
/* En el móvil, una sola fila que se desliza: con muchas salas, las fiestas
   quedarían varias pantallas más abajo. */
@media (max-width: 719px) {
    .rrpp-salas { margin-inline: calc(-1 * var(--margen)); }
    .rrpp-salas .chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: 0 var(--margen) 4px;
        scrollbar-width: none;
        -webkit-mask-image: linear-gradient(to right, #000 85%, transparent);
        mask-image: linear-gradient(to right, #000 85%, transparent);
    }
    .rrpp-salas .chips::-webkit-scrollbar { display: none; }
    .rrpp-salas .chips li { flex: none; white-space: nowrap; }
}

/* Entradas de la fiesta (bloqueEntradasRrpp()): las tarifas salen de la API y
   cada una disponible es un enlace a la compra con el enlace del RRPP. */
.tarifa--enlace { color: inherit; text-decoration: none; transition: border-color var(--transicion), background-color var(--transicion); }
.tarifa--enlace:hover, .tarifa--enlace:focus-visible { border-color: var(--acento); background: color-mix(in srgb, var(--acento) 8%, var(--fondo-elevado)); }
.tarifa--enlace .tarifa__precio::after { content: "→"; display: block; margin-top: 2px; color: var(--acento); font-size: .875rem; }
.tarifa--agotada { opacity: .55; }
.rrpp-comprar { margin-top: 4px; }
@media (min-width: 720px) {
    .rrpp-comprar { width: auto; min-width: 280px; }
}

.rrpp-con { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; color: var(--texto-suave); font-size: .9rem; }
.rrpp-con a { color: var(--texto); }
.rrpp-nota { max-width: 62ch; margin-top: 32px; font-size: .875rem; }

/* ----- Mi página de RRPP ----- */
.mi-rrpp { max-width: 760px; margin-inline: auto; }
.mi-rrpp .antetitulo a { color: inherit; text-decoration: none; }
.mi-rrpp > .tarjeta + .tarjeta { margin-top: 16px; }
.mi-rrpp__formulario { max-width: 520px; }
.mi-rrpp__nota { font-size: .875rem; }
.campo__ayuda { margin: 6px 0 0; color: var(--texto-tenue); font-size: .8rem; }
.campo__ayuda code { font-size: inherit; }

.mi-rrpp__url { overflow-wrap: anywhere; font-weight: 600; }
.mi-rrpp__url a { color: var(--texto); }
.mi-rrpp__qr .qr { display: block; width: min(200px, 60vw); height: auto; margin: 20px 0 10px; border-radius: var(--radio-pequeno); }

.mi-rrpp__cifras { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.mi-rrpp__cifras p { margin: 0; color: var(--texto-suave); }
.mi-rrpp__cifras .cifra { display: block; margin-bottom: 4px; color: var(--texto); }

.mi-rrpp__salas legend { margin-bottom: 8px; color: var(--texto-suave); font-size: .875rem; }
.mi-rrpp__lista-salas {
    display: grid;
    gap: 2px 16px;
    max-height: 320px;
    overflow-y: auto;
    padding: 12px 14px;
    border: 1px solid var(--borde);
    border-radius: var(--radio-pequeno);
}
@media (min-width: 560px) {
    .mi-rrpp__lista-salas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Con "Todas las salas" marcada, la lista no cuenta: se atenúa. */
.mi-rrpp__salas:has(input[value="todas"]:checked) .mi-rrpp__lista-salas { opacity: .45; }

.mi-rrpp__borrar { margin-top: 32px; }

/* Estado de la solicitud: pendiente de revisión (aún no está en el equipo) o falta el email. */
.mi-rrpp__estado .etiqueta { margin: 0 0 10px; }
.etiqueta--revision {
    color: var(--atencion);
    border-color: color-mix(in srgb, var(--atencion) 40%, transparent);
    background: color-mix(in srgb, var(--atencion) 10%, transparent);
}
.mi-rrpp__lista { margin: 0 0 16px; padding-left: 1.2em; color: var(--texto-suave); }
.mi-rrpp__lista li + li { margin-top: 6px; }
.mi-rrpp__subtitulo { margin-top: 20px; font-size: 1rem; }

/* Pedir la página: la explicación va plegada tras un «?» en la esquina de la tarjeta. */
.mi-rrpp__alta { position: relative; }
.mi-rrpp__alta > h2 { padding-right: 40px; }
.mi-rrpp__ayuda > summary {
    position: absolute;
    top: 14px;
    right: 14px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--borde-fuerte);
    border-radius: 50%;
    color: var(--texto-suave);
    font-weight: 600;
    list-style: none;
    cursor: pointer;
    transition: color var(--transicion), border-color var(--transicion);
}
.mi-rrpp__ayuda > summary::-webkit-details-marker { display: none; }
.mi-rrpp__ayuda > summary:hover,
.mi-rrpp__ayuda[open] > summary { border-color: var(--acento); color: var(--acento); }
.mi-rrpp__ayuda > summary:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.mi-rrpp__ayuda-texto {
    margin: 0 0 20px;
    padding: 16px;
    border: 1px solid var(--borde);
    border-radius: var(--radio-pequeno);
    background: var(--superficie);
}
.mi-rrpp__ayuda-texto .mi-rrpp__subtitulo { margin-top: 16px; }
.mi-rrpp__ayuda-texto .pasos-rrpp { margin-bottom: 0; }
.mi-rrpp__ayuda[open] + .mi-rrpp__intro { display: none; }
.mi-rrpp__intro { color: var(--texto-suave); }

/* «¿No tienes?» junto a «Tu enlace de RRPP» y «Email de tu cuenta de Fourvenues»: lleva a unirse al equipo. */
.mi-rrpp__etiqueta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 6px; }
.mi-rrpp__etiqueta label { margin-bottom: 0; }
.mi-rrpp__sin-cuenta { color: var(--acento); font-size: .875rem; font-weight: 600; }
.mi-rrpp__sin-cuenta:hover { text-decoration: underline; }

/* Pasos para tener la página (Mi página de RRPP y Trabaja con nosotros). */
.pasos-rrpp { display: grid; gap: 12px; margin: 0 0 20px; padding: 0; list-style: none; counter-reset: paso; }
.pasos-rrpp li { position: relative; padding-left: 40px; color: var(--texto-suave); counter-increment: paso; }
.pasos-rrpp li::before {
    content: counter(paso);
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 1px solid var(--borde-fuerte);
    border-radius: 50%;
    color: var(--acento);
    font-size: .8rem;
    font-weight: 600;
}
.pasos-rrpp strong { color: var(--texto); }