/*
 * «Mi carnet» (/socio/mi-carnet): la pantalla principal del socio.
 *
 * Solo la carga plantillas/socio/mi-carnet.php, después de socio.css. Las
 * piezas van en el orden en que salen en pantalla:
 *
 *   1. Página: anchura, saludo y avisos
 *   2. Zona del carnet y familia
 *   3-5. La tarjeta (armazón, delante y detrás): en carnet-tarjeta.css, que
 *        comparte con el carnet impreso del panel
 *   6. Acciones bajo la tarjeta
 *   7. Avisos bajo la tarjeta (permiso del hijo) y primeros pasos
 *   8. Secciones con título («En directo», «Pagos y ahorro», «Tus eventos»)
 *   9. Hoy: los eventos del día
 *  10. La barra (ticket, justificante, bebidas y comprar más)
 *  11. Fichas de pagos y ahorro (cuota y montepío)
 *  12. Tus próximos eventos
 *  13. Tu asistencia
 *  14. Cumpleaños
 *  15. Modo puerta (el código a pantalla completa)
 *  16. Reducir movimiento
 *
 * Convenciones:
 * - La tarjeta se mide en `cqi` (porcentaje del ancho de la propia tarjeta):
 *   así se ve igual en un móvil pequeño que en el ordenador, como un carnet
 *   de verdad, y sirve de base para imprimirlo.
 * - Los colores de la tarjeta salen de su tipo de socio (--color-carnet, que
 *   pone mi-carnet.js) o, si no tiene, de la asociación (--marca-fondo). Si
 *   la asociación eligió color secundario, sus detalles (el tipo de socio,
 *   el marco de la foto y el aro del código) van en él (--carnet-acento).
 * - Cada pieza lleva sus ajustes de tema claro y de móvil justo debajo; lo
 *   de «reducir movimiento», todo junto al final (16).
 */

/* #region ¿Qué tal fue? La invitación en el carnet (6 nov 2026) */
/* El cartel del evento o su color con cinco estrellas, la pregunta en grande y una sola acción. */
.encuesta-invitacion {
    --tipo: var(--marca-principal);
    display: grid;
    grid-template-columns: clamp(9rem, 15vw, 14rem) minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--espacio-4) clamp(20px, 3vw, 40px);
    overflow: hidden;
    padding-right: clamp(20px, 3vw, 40px);
    border-radius: var(--radio-xl);
    background: color-mix(in srgb, var(--tipo) 9%, var(--rs-superficie-1));
}

.encuesta-invitacion[hidden] {
    display: none;
}

.encuesta-invitacion__cartel {
    display: grid;
    align-self: stretch;
    place-items: center;
    min-height: 9.5rem;
    background: linear-gradient(135deg, oklch(from var(--tipo) 0.46 min(c, 0.14) h), oklch(from var(--tipo) 0.3 min(c, 0.09) h));
}

.encuesta-invitacion__cartel img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.encuesta-invitacion__estrellas {
    color: #FFD45E;
    font-size: clamp(1.3rem, 1.9vw, 1.9rem);
    letter-spacing: 0.06em;
    line-height: 1;
}

.encuesta-invitacion__textos {
    display: grid;
    gap: var(--espacio-1);
    min-width: 0;
    padding-block: var(--espacio-4);
}

.app-socio .encuesta-invitacion__textos h2 {
    margin: 0;
    font-family: var(--fuente-display);
    font-size: clamp(1.4rem, 2.1vw, 2rem);
    font-weight: 650;
    letter-spacing: -0.03em;
    line-height: 1.15;
    text-wrap: balance;
}

.encuesta-invitacion__textos p {
    margin: 0;
    color: var(--rs-texto-secundario);
}

.encuesta-invitacion__acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--espacio-2) var(--espacio-5);
}

/* Tras «Ahora no»: en una línea, en el mismo sitio, para encontrarla cuando quiera. */
.encuesta-invitacion--apartada {
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: var(--espacio-3);
    padding: var(--espacio-1) var(--espacio-5);
}

.encuesta-invitacion--apartada .encuesta-invitacion__estrellas {
    color: #C98A00;
    font-size: 1.4rem;
}

.encuesta-invitacion--apartada .encuesta-invitacion__textos {
    padding-block: var(--espacio-3);
}

.app-socio .encuesta-invitacion--apartada .encuesta-invitacion__textos h2 {
    font-size: 1.0625rem;
    letter-spacing: -0.01em;
}

.encuesta-invitacion--apartada .encuesta-invitacion__textos p {
    font-size: var(--texto-etiqueta);
}

@media (max-width: 767px) {
    .encuesta-invitacion {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        padding: 0;
    }

    .encuesta-invitacion__cartel {
        min-height: 6.5rem;
        max-height: 9rem;
    }

    .encuesta-invitacion__textos {
        padding: var(--espacio-4) var(--espacio-4) var(--espacio-3);
    }

    .encuesta-invitacion__acciones {
        justify-content: flex-start;
        padding: 0 var(--espacio-4) var(--espacio-4);
    }

    .encuesta-invitacion--apartada {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 0 var(--espacio-3);
        padding: var(--espacio-1) var(--espacio-4) var(--espacio-3);
    }

    .encuesta-invitacion--apartada .encuesta-invitacion__textos {
        padding: var(--espacio-3) 0 var(--espacio-2);
    }

    .encuesta-invitacion--apartada .encuesta-invitacion__acciones {
        grid-column: 2;
        padding: 0;
    }
}
/* #endregion */

/* #region ¿Qué tal fue? Las preguntas, en su ventana: una cosa cada vez, en grande */
@media (min-width: 768px) {
    .encuesta-ventana {
        width: min(36rem, calc(100vw - 2 * var(--espacio-4)));
    }
}

.encuesta-socio {
    display: grid;
    gap: var(--espacio-5);
    padding: var(--espacio-6);
}

.encuesta-socio h2 {
    flex: 1;
    margin: 0;
    font-family: var(--fuente-display);
    font-size: clamp(1.25rem, 1.8vw, 1.5rem);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

/* La barra de progreso y «2 de 6». */
.encuesta-socio__progreso {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
}

.encuesta-socio__barra {
    flex: 1;
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--rs-borde);
}

.encuesta-socio__barra > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #f5b301;
    transition: width 0.35s var(--curva);
}

.encuesta-socio__cuenta {
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.encuesta-socio__formulario {
    display: grid;
    gap: var(--espacio-3);
}

/* Cada paso: la pregunta grande y centrada, las estrellas y la palabra de la elegida. */
.encuesta-socio__paso {
    display: grid;
    justify-items: center;
    gap: var(--espacio-2);
    margin: 0;
    padding: var(--espacio-2) 0 0;
    border: 0;
    text-align: center;
    animation: encuesta-entra 0.3s var(--curva);
}

.encuesta-socio__paso[hidden] {
    display: none;
}

.encuesta-socio__pregunta {
    display: grid;
    gap: 2px;
    margin: 0;
    font-family: var(--fuente-display);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.25;
}

.encuesta-socio__pregunta small {
    color: var(--rs-texto-secundario);
    font-family: inherit;
    font-size: var(--texto-etiqueta);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.encuesta-socio__palabra {
    min-height: 1.5em;
    margin: 0;
    color: #c98a00;
    font-weight: 700;
}

/* Abajo, lo de menos: el aviso de la asociación (es anónima y solo sirve para mejorar) y «No quiero rellenarla». */
.encuesta-socio__pie {
    display: grid;
    gap: var(--espacio-3);
    padding-top: var(--espacio-4);
    border-top: 1px solid var(--rs-borde);
}

.encuesta-socio__aviso {
    display: flex;
    align-items: flex-start;
    gap: var(--espacio-2);
    margin: 0;
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
    line-height: 1.4;
}

.encuesta-socio__aviso .icono {
    flex: none;
    width: 1.1rem;
    height: 1.1rem;
    color: var(--rs-exito-solido);
}

/* El porqué de cada cosa, tras las estrellas: a lo ancho y opcional. */
.encuesta-socio__porque {
    justify-self: stretch;
    width: 100%;
    resize: vertical;
    text-align: left;
}

.encuesta-socio__porque[hidden] {
    display: none;
}

.encuesta-socio__no-quiero {
    justify-self: start;
    font-size: var(--texto-etiqueta);
}

.encuesta-socio__listo {
    justify-self: center;
}

/* El último: el comentario a lo ancho y «Enviar» bien a la vista. */
.encuesta-socio__paso--final {
    justify-items: stretch;
    text-align: left;
}

.encuesta-socio__paso--final .encuesta-socio__pregunta {
    font-size: 1.125rem;
}

.encuesta-socio__paso--final .aviso {
    margin: 0;
}

.encuesta-socio__enviar {
    justify-self: start;
}

/* «Anterior» a la izquierda y «Saltar» o «Siguiente» a la derecha. */
.encuesta-socio__navegar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-3);
    min-height: 2.25rem;
}

.encuesta-socio__navegar [data-siguiente] {
    margin-left: auto;
}

.encuesta-socio__navegar [hidden] {
    display: none;
}

/* Cinco estrellas grandes para el dedo: van de 5 a 1 en el código y se ven de 1 a 5. */
.estrellas-elegir {
    display: inline-flex;
    flex-direction: row-reverse;
    gap: 2px;
}

.estrellas-elegir input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.estrellas-elegir label {
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: var(--radio-sm);
    color: var(--rs-borde-fuerte);
    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer;
    transition: color var(--duracion-hover) ease, transform 0.15s ease;
}

.estrellas-elegir--grandes label {
    width: 3.4rem;
    height: 3.4rem;
    font-size: 2.6rem;
}

.estrellas-elegir input:checked ~ label,
.estrellas-elegir label:hover,
.estrellas-elegir label:hover ~ label {
    color: #f5b301;
}

.estrellas-elegir input:checked + label {
    animation: estrella-salta 0.35s var(--curva);
}

.estrellas-elegir input:focus-visible + label {
    box-shadow: var(--anillo-foco);
}

.estrellas-elegir label:active {
    transform: scale(0.9);
}

/* ¡Gracias!: cinco estrellas que se encienden una tras otra. */
.encuesta-socio__gracias {
    display: grid;
    justify-items: center;
    gap: var(--espacio-1);
    padding: var(--espacio-4) 0;
    text-align: center;
}

.encuesta-socio__gracias strong {
    font-family: var(--fuente-display);
    font-size: 1.25rem;
}

.encuesta-socio__gracias p {
    margin: 0;
    color: var(--rs-texto-secundario);
}

.encuesta-socio__gracias-estrellas {
    display: flex;
    gap: 4px;
    color: #f5b301;
    font-size: 2rem;
}

.encuesta-socio__gracias-estrellas span {
    animation: estrella-salta 0.4s var(--curva) both;
}

.encuesta-socio__gracias-estrellas span:nth-child(2) { animation-delay: 0.08s; }
.encuesta-socio__gracias-estrellas span:nth-child(3) { animation-delay: 0.16s; }
.encuesta-socio__gracias-estrellas span:nth-child(4) { animation-delay: 0.24s; }
.encuesta-socio__gracias-estrellas span:nth-child(5) { animation-delay: 0.32s; }

@keyframes estrella-salta {
    0% { transform: scale(0.6); opacity: 0.4; }
    60% { transform: scale(1.25); opacity: 1; }
    100% { transform: scale(1); }
}

@keyframes encuesta-entra {
    from { opacity: 0; transform: translateX(12px); }
    to { opacity: 1; transform: none; }
}

@media (max-width: 380px) {
    .estrellas-elegir--grandes label {
        width: 2.9rem;
        height: 2.9rem;
        font-size: 2.2rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .encuesta-socio__paso,
    .estrellas-elegir input:checked + label,
    .encuesta-socio__gracias-estrellas span {
        animation: none;
    }
}
/* #endregion */

/* #region 1. Página: avisos */
/* Lo demás de cada uno, de un vistazo: en el móvil, ya está su pestaña. */
@media (max-width: 767px) {
    .carnet-lo-mio {
        display: none;
    }
}

/* Una cuenta que no es de ningún socio (la de la Junta): lo explica, sin carnet vacío. */
.carnet-sin-socio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--espacio-3);
    max-width: 34rem;
    margin: var(--espacio-6) auto;
    padding: var(--espacio-6) var(--espacio-5);
    text-align: center;
}

.carnet-sin-socio h2,
.carnet-sin-socio p {
    margin: 0;
}

.carnet-sin-socio__icono {
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: var(--rs-superficie-2);
}

.carnet-sin-socio__icono .icono {
    width: 28px;
    height: 28px;
}

/* «Tu familia»: tutor y acompañante habitual, una fila cada uno (solo informativo). */
.carnet-relaciones {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding-block: var(--espacio-2);
    list-style: none;
}

.carnet-relaciones li {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-block: var(--espacio-3);
}

.carnet-relaciones li:not([hidden]) ~ li:not([hidden]) {
    border-top: 1px solid var(--rs-borde-sutil);
}

.carnet-relaciones__papel {
    color: var(--rs-texto-tenue);
    font-size: var(--texto-etiqueta);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.carnet-relaciones strong {
    font-size: var(--texto-grande);
}

/* #endregion */

/* #region 2. Zona del carnet y familia */
:root[data-theme="light"] /* La familia en un toque: «Tú» y cada hijo,
para enseñar su carnet desde este móvil,
y sus puestos. Redondos {
    display: flex;
    gap: var(--espacio-2);
    max-width: 100%;
    padding: 4px 4px 0;
    overflow-x: auto;
    scrollbar-width: none;
}

/* «Estás enseñando el carnet de Aina»: bien visible, para no enseñar el que no es. */
.carnet-viendo {
    margin: 0;
    padding: var(--espacio-1) var(--espacio-4);
    border-radius: var(--radio-pildora);
    background: color-mix(in srgb, var(--rs-aviso) 18%, transparent);
    color: var(--rs-texto);
    font-weight: 700;
    text-align: center;
}

/* Carnet anulado o sin carnet: qué hacer, y el correo de la asociación. */
.carnet-ayuda-estado {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--espacio-3);
    max-width: 30rem;
    text-align: center;
}

.carnet-ayuda-estado p {
    margin: 0;
    color: var(--rs-texto-secundario);
}

/* #endregion */

/* #region 7. Avisos bajo la tarjeta y primeros pasos */
/* Al ver el carnet de un hijo: «Pon una foto de Aina» y «Puede entrar sin esperarte». */
.permiso-solo {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-2);
    margin-top: var(--espacio-4);
    padding: var(--espacio-4);
    border: 1px solid var(--rs-borde-sutil);
    border-radius: var(--radio-md);
    background: var(--rs-superficie-1);
}

.permiso-solo h2 {
    margin: 0;
    font-size: var(--texto-base);
}

.permiso-solo p {
    margin: 0;
    color: var(--rs-texto-secundario);
}

.permiso-solo .permiso-solo__activo {
    color: var(--rs-exito);
    font-weight: 700;
}

.permiso-solo .boton {
    align-self: flex-start;
}

/* Primeros pasos del socio nuevo: una lista corta con lo que le falta, cada paso a un toque. */
.carnet-primeros {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-2);
    padding: var(--espacio-3) var(--espacio-4);
}

.carnet-primeros h2 {
    margin: 0;
    color: var(--rs-texto-tenue);
    font-size: var(--texto-etiqueta);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.carnet-primeros__lista {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.carnet-primeros__lista li + li {
    border-top: 1px solid var(--rs-borde-sutil);
}

.carnet-primeros__paso {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    width: 100%;
    min-height: 44px;
    padding: var(--espacio-1) 0;
    border: 0;
    background: none;
    color: var(--rs-texto);
    font: inherit;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.carnet-primeros__paso:hover {
    color: var(--marca-acento);
    text-decoration: none;
}

.carnet-primeros__paso > span:nth-child(2) {
    flex: 1;
}

.carnet-primeros__icono {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--marca-acento) 14%, transparent);
    color: var(--marca-acento);
}

/* Lo ya hecho, tachado en verde: se ve lo que falta de un vistazo. */
.carnet-primeros--hecho .carnet-primeros__paso {
    color: var(--rs-texto-tenue);
    text-decoration: line-through;
    cursor: default;
}

.carnet-primeros--hecho .carnet-primeros__icono {
    background: color-mix(in srgb, var(--rs-exito) 14%, transparent);
    color: var(--rs-exito);
}

/* «Que los avisos te lleguen bien» (8 nov 2026): el texto, la dirección del remitente y sus dos botones. */
.carnet-no-deseado__texto {
    margin: 0;
    color: var(--rs-texto);
}

.carnet-no-deseado__remitente {
    margin: 0;
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
    overflow-wrap: anywhere;
}

.carnet-no-deseado__botones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-2);
}

/* «No volver a mostrar»: un botón discreto, sin subrayar (9 oct 2026: los botones no se subrayan). */
.carnet-primeros__cerrar {
    align-self: flex-start;
    margin-left: calc(-1 * var(--espacio-2));
    padding: var(--espacio-1) var(--espacio-2);
    border: 0;
    border-radius: var(--radio-sm);
    background: none;
    color: var(--rs-texto-secundario);
    font: inherit;
    font-size: var(--texto-etiqueta);
    font-weight: 600;
    cursor: pointer;
}

.carnet-primeros__cerrar:hover {
    background: var(--rs-hover);
    color: var(--rs-texto);
}

.carnet-primeros__cerrar:focus-visible {
    outline: none;
    box-shadow: var(--anillo-foco);
}
/* #endregion */

/* #region 8. Secciones con título («En directo», «Lo tuyo», «Tus eventos») */
/* Cada sección se oculta sola si no tiene nada que enseñar. */
.carnet-grupo {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-3);
}

.carnet-grupo:not(:has(> .carnet-grupo__contenido > :not([hidden]))) {
    display: none;
}

.carnet-grupo__titulo {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    margin: 0;
    font-family: var(--fuente-display);
    font-size: var(--texto-grande);
    font-weight: 600;
}

/* Lo de hoy: su tarjeta ya lo dice en su fecha; el título, para quien no la ve y cuando hay barra. */
.carnet-grupo--ahora:not(:has(#carnet-barra:not([hidden]))) > .carnet-grupo__titulo {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

/* El punto verde delante de «En directo». */
.carnet-grupo__vivo {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--rs-exito);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--rs-exito) 22%, transparent);
}

.carnet-grupo__contenido {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    align-items: stretch;
    gap: var(--espacio-4);
}

/* «En directo», a lo ancho. */
.carnet-grupo--ahora .carnet-grupo__contenido {
    grid-template-columns: minmax(0, 1fr);
}

/* El icono de una tarjeta de la barra, en un círculo. */
.carnet-barra__evento > .icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-sizing: content-box;
    width: 18px;
    height: 18px;
    padding: 8px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--marca-acento) 14%, transparent);
    color: var(--marca-acento);
}

/* Al pie de una lista: «Ver anteriores». Discreta, a lo ancho. */
.carnet-mas {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--espacio-1);
    width: 100%;
    min-height: 44px;
    padding: var(--espacio-2) var(--espacio-3);
    border: 1px dashed var(--rs-borde);
    border-radius: var(--radio-lg);
    background: none;
    color: var(--rs-texto-secundario);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.15s var(--curva), color 0.15s var(--curva);
}

.carnet-mas:hover {
    border-color: var(--rs-borde-fuerte);
    color: var(--rs-texto);
    text-decoration: none;
}

.carnet-mas:focus-visible {
    outline: 2px solid var(--rs-azul);
    outline-offset: 2px;
}

.carnet-mas .icono {
    width: 16px;
    height: 16px;
}
/* #endregion */

/* #region 9. Hoy: los eventos del día */
/* Una tarjeta por evento de hoy: el día en grande, el nombre, cuándo y dónde, y lo suyo. */
.carnet-hoy {
    display: grid;
    gap: var(--espacio-3);
}

.carnet-hoy__evento {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    padding: var(--espacio-3);
    border: 1px solid var(--rs-borde-tarjeta);
    border-radius: var(--radio-xl);
    background: var(--rs-superficie-1);
    color: var(--rs-texto);
    text-decoration: none;
    transition: background-color var(--duracion-hover) var(--curva);
}

.carnet-hoy__evento:hover {
    background: var(--rs-hover);
    color: var(--rs-texto);
    text-decoration: none;
}

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

.carnet-hoy__fecha {
    display: grid;
    flex: none;
    place-content: center;
    justify-items: center;
    width: 52px;
    height: 58px;
    border-radius: var(--radio-lg);
    background: color-mix(in srgb, var(--rs-exito) 14%, transparent);
    color: var(--rs-exito-texto);
}

.carnet-hoy__fecha b {
    font-family: var(--fuente-display);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
}

.carnet-hoy__fecha small {
    margin-top: 3px;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.carnet-hoy__textos {
    display: grid;
    flex: 1;
    gap: 3px;
    min-width: 0;
}

.carnet-hoy__nombre {
    font-family: var(--fuente-display);
    font-size: var(--texto-grande);
    font-weight: 600;
    line-height: 1.2;
}

.carnet-hoy__cuando {
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
}

/* Ya ha empezado: el punto que late, delante de la primera línea. */
.carnet-hoy__evento--en-curso .carnet-hoy__cuando::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin: 0 6px 1px 1px;
    border-radius: 50%;
    background: var(--rs-exito);
}

.carnet-hoy__tuyo {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    margin-top: 2px;
    color: var(--rs-exito-texto);
    font-size: var(--texto-etiqueta);
    font-weight: 600;
}

.carnet-hoy__tuyo .icono {
    flex: none;
    width: 14px;
    height: 14px;
    margin-top: 2px;
}

.carnet-hoy__flecha {
    flex: none;
    width: 18px;
    height: 18px;
    color: var(--rs-texto-tenue);
}

@media (min-width: 1024px) {
    .carnet-hoy__evento {
        gap: var(--espacio-4);
        padding: var(--espacio-4) var(--espacio-5);
    }

    .carnet-hoy__fecha {
        width: 62px;
        height: 68px;
    }

    .carnet-hoy__fecha b {
        font-size: 1.5rem;
    }

    .carnet-hoy__nombre {
        font-size: 1.3125rem;
    }
}
/* #endregion */

/* #region 10. La barra (ticket, justificante, bebidas y comprar más) */
/*
 * La pinta barra-carnet.js. Cada evento con barra es un bloque, y su clase
 * dice en qué estado está:
 *
 *   .carnet-barra__bloque--ticket       le quedan N consumiciones: un ticket
 *                                       con la cifra en su talón
 *   .carnet-barra__bloque--con-bebidas  además, «¿Qué vas a tomar?»
 *   .carnet-barra__bloque--canjeada     acaba de pasar el carnet: el justificante
 *   .carnet-barra__bloque--cerrada      barra parada o barra libre agotada
 *   .carnet-barra__bloque--proximo      la barra de un evento que aún no ha empezado
 *   (sin modificador)                   barra libre
 *
 * La sección es una tarjeta con marco; con .carnet-barra--sin-marco (todo lo
 * de ahora ya tiene su propia forma: ticket o justificante) el marco se quita.
 */
.carnet-barra {
    display: grid;
    gap: var(--espacio-3);
    margin-top: 0;
    border-color: color-mix(in srgb, var(--marca-acento) 35%, var(--rs-borde));
    background:
        radial-gradient(90% 70% at 0% 0%, color-mix(in srgb, var(--marca-acento) 16%, transparent), transparent 70%),
        var(--rs-superficie-1);
}

:root[data-theme="light"] .carnet-barra:not(.carnet-barra--sin-marco) {
    border-color: var(--rs-borde-tarjeta);
    background: var(--rs-superficie-1);
}

.carnet-barra.carnet-barra--sin-marco {
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}

.carnet-barra p {
    margin: 0;
}

/* El aviso de vuelta del pago («¡Pagado!», «Comprobando el pago…»). */
.carnet-barra__pago {
    margin: 0;
}

/* --- El bloque de cada evento --- */
.carnet-barra__bloque {
    display: grid;
    gap: var(--espacio-2);
}

/* Dentro del marco, los bloques se separan con una línea (los tickets ya tienen su forma). */
.carnet-barra:not(.carnet-barra--sin-marco) > .carnet-barra__bloque + .carnet-barra__bloque:not(.carnet-barra__bloque--ticket) {
    padding-top: var(--espacio-3);
    border-top: 1px solid var(--rs-borde-sutil);
}

/* «Barra · Cena de gala», con su icono en un círculo. */
.carnet-barra__evento {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    color: var(--rs-texto);
    font-size: var(--texto-grande);
    font-weight: 700;
}

/* La frase grande: «¡Consumición canjeada!», «Barra libre», «La barra está parada». */
.carnet-barra__grande {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    font-family: var(--fuente-display);
    font-size: var(--texto-grande);
    font-weight: 700;
}

.carnet-barra__grande > span {
    font-size: var(--texto-h3);
    line-height: 1.2;
}

.carnet-barra__ayuda,
.carnet-barra__ultima,
.carnet-barra__quedan-pequeno {
    color: var(--rs-texto-secundario);
    font-size: var(--texto-base);
}

/* «Pagadas: 2 Cerveza · 1 Cubata»: las compradas que aún no se ha tomado. */
.carnet-barra__pagadas {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: var(--espacio-2);
    margin: 0;
    padding: var(--espacio-2) var(--espacio-4);
    border: 1px dashed color-mix(in srgb, var(--rs-exito) 55%, transparent);
    border-radius: var(--radio-md);
    background: color-mix(in srgb, var(--rs-exito) 10%, var(--rs-superficie-1));
    color: var(--rs-texto);
    font-weight: 700;
}

/* --- Ticket: la cifra en el talón de color, troquelado; lo demás, a su derecha --- */
.carnet-barra__bloque--ticket {
    --talon: 104px;
    position: relative;
    grid-template-columns: var(--talon) minmax(0, 1fr);
    align-items: center;
    gap: var(--espacio-1) var(--espacio-5);
    padding: var(--espacio-5) var(--espacio-5) var(--espacio-5) 0;
    border-radius: var(--radio-lg);
    background: linear-gradient(90deg, var(--marca-boton) 0 var(--talon), var(--rs-superficie-1) var(--talon));
    box-shadow: inset 0 0 0 1px var(--rs-borde-tarjeta), var(--sombra-sm);
    /* Los dos mordiscos del troquel, arriba y abajo de la línea de corte. */
    -webkit-mask:
        radial-gradient(circle 11px at var(--talon) 0, transparent 97%, #000 100%) top / 100% 51% no-repeat,
        radial-gradient(circle 11px at var(--talon) 100%, transparent 97%, #000 100%) bottom / 100% 51% no-repeat;
    mask:
        radial-gradient(circle 11px at var(--talon) 0, transparent 97%, #000 100%) top / 100% 51% no-repeat,
        radial-gradient(circle 11px at var(--talon) 100%, transparent 97%, #000 100%) bottom / 100% 51% no-repeat;
}

/* La línea de puntos del troquel. */
.carnet-barra__bloque--ticket::before {
    content: "";
    position: absolute;
    top: 16px;
    bottom: 16px;
    left: calc(var(--talon) - 1px);
    border-left: 2px dashed color-mix(in srgb, var(--rs-borde) 80%, transparent);
    pointer-events: none;
}

.carnet-barra__bloque--ticket > * {
    grid-column: 2 / -1;
}

.carnet-barra__bloque--ticket > .carnet-barra__evento {
    margin-bottom: var(--espacio-3);
}

.carnet-barra__bloque--ticket > .carnet-barra__evento > .icono {
    padding: 6px;
}

/* La frase grande se deshace: su cifra va al talón y su texto, a la derecha. */
.carnet-barra__bloque--ticket > .carnet-barra__grande {
    display: contents;
}

/* La cifra, centrada en todo el alto del talón, crezca lo que crezca el ticket. */
.carnet-barra__bloque--ticket .carnet-barra__numero {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--talon);
    color: var(--marca-sobre-boton);
    font-size: 3rem;
    line-height: 1;
}

.carnet-barra__bloque--ticket .carnet-barra__grande > span {
    grid-column: 2;
    align-self: end;
    font-family: var(--fuente-display);
    font-size: var(--texto-h3);
    font-weight: 700;
    line-height: 1.2;
}

.carnet-barra__bloque--ticket > .carnet-barra__ayuda {
    align-self: start;
}

.carnet-barra__bloque--ticket > .carnet-barra__ultima {
    justify-self: start;
    margin-top: var(--espacio-3);
    padding: var(--espacio-1) var(--espacio-3);
    border-radius: var(--radio-pildora);
    background: var(--rs-superficie-2);
    font-size: var(--texto-etiqueta);
}

@media (min-width: 900px) {
    .carnet-barra__bloque--ticket {
        --talon: 128px;
    }
}

/* --- Justificante: nada más pasar el carnet, en verde, para enseñárselo al camarero --- */
.carnet-barra__bloque--canjeada {
    padding: var(--espacio-4);
    border-radius: var(--radio-lg);
    background: var(--rs-exito-solido);
    color: #fff;
}

.carnet-barra__bloque--canjeada .carnet-barra__evento,
.carnet-barra__bloque--canjeada .carnet-barra__ayuda,
.carnet-barra__bloque--canjeada .carnet-barra__quedan-pequeno {
    color: rgb(255 255 255 / 0.88);
}

/* Sobre el verde, el icono de la barra en blanco (el color de la asociación no se lee). */
.carnet-barra__bloque--canjeada .carnet-barra__evento > .icono {
    background: rgb(255 255 255 / 0.18);
    color: #fff;
}

.carnet-barra__bloque--canjeada .carnet-barra__grande .icono {
    width: 1.75rem;
    height: 1.75rem;
}

.carnet-barra__justificante {
    font-size: var(--texto-grande);
}

.carnet-barra__puesto {
    font-family: var(--fuente-display);
    font-size: 1.75rem;
    font-weight: 800;
}

/* Lo que le queda de validez al justificante: una barra blanca que se vacía. */
.carnet-barra__tiempo {
    height: 6px;
    overflow: hidden;
    border-radius: var(--radio-pildora);
    background: rgb(255 255 255 / 0.3);
}

.carnet-barra__tiempo span {
    display: block;
    height: 100%;
    background: #fff;
    transition: width 1s linear;
}

/* --- Cerrada --- */
.carnet-barra__bloque--cerrada .carnet-barra__grande {
    color: var(--rs-aviso);
}

/* --- «¿Qué vas a tomar?»: el camarero lo ve en la cola --- */
.carnet-barra__bebidas {
    display: grid;
    gap: var(--espacio-2);
    margin-top: var(--espacio-3);
    padding-top: var(--espacio-3);
    border-top: 1px solid var(--rs-borde-sutil);
}

.carnet-barra__bebidas > p:first-child {
    color: var(--rs-texto-tenue);
    font-size: var(--texto-etiqueta);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.carnet-barra__opciones {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--espacio-2);
}

.carnet-barra__opcion {
    justify-content: center;
    min-height: 42px;
    padding: var(--espacio-2);
    border: 1px solid var(--rs-borde-control);
    border-radius: var(--radio-md);
    background: var(--rs-superficie-2);
    color: var(--rs-texto);
    font: inherit;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.15s var(--curva), border-color 0.15s var(--curva);
}

.carnet-barra__opcion:hover {
    border-color: var(--rs-borde-fuerte);
}

.carnet-barra__opcion[aria-pressed="true"] {
    border-color: var(--marca-boton);
    background: var(--marca-boton);
    color: var(--marca-sobre-boton);
}

/* --- «¿Quieres más?»: comprar más bebidas con la carta, como en una app de bar --- */
.carnet-barra__compra {
    margin-top: var(--espacio-2);
    padding: var(--espacio-4);
    border: 1px solid var(--rs-borde-tarjeta);
    border-radius: var(--radio-lg);
    background: var(--rs-superficie-2);
}

.carnet-barra--sin-marco > .carnet-barra__compra {
    margin-top: 0;
}

.carnet-barra__compra summary {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    font-family: var(--fuente-display);
    font-size: var(--texto-grande);
    font-weight: 700;
    list-style: none;
    cursor: pointer;
}

.carnet-barra__compra summary::-webkit-details-marker {
    display: none;
}

.carnet-barra__compra summary > .icono {
    box-sizing: content-box;
    padding: 6px;
    border-radius: 50%;
    background: var(--marca-boton);
    color: var(--marca-sobre-boton);
}

.carnet-barra__compra[open] summary {
    margin-bottom: var(--espacio-3);
}

.carnet-barra__compra > :not(summary) + :not(summary) {
    margin-top: var(--espacio-3);
}

.carnet-barra__precio {
    color: var(--rs-texto-secundario);
}

.carnet-barra__carta {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 8rem), 1fr));
    gap: var(--espacio-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Cada bebida de la carta: nombre y precio arriba, «− 0 +» abajo. */
.carnet-barra__linea {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    gap: var(--espacio-3);
    padding: var(--espacio-3);
    border: 1px solid var(--rs-borde-tarjeta);
    border-radius: var(--radio-lg);
    background: var(--rs-superficie-1);
    transition: border-color 0.15s var(--curva), box-shadow 0.15s var(--curva);
}

.carnet-barra__linea--elegida {
    border-color: var(--marca-acento);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--marca-acento) 25%, transparent);
}

.carnet-barra__bebida {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.carnet-barra__bebida strong {
    font-size: var(--texto-grande);
}

.carnet-barra__bebida small {
    color: var(--marca-acento);
    font-size: var(--texto-base);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.carnet-barra__cantidad {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-2);
    padding: 3px;
    border-radius: var(--radio-pildora);
    background: var(--rs-superficie-2);
}

.carnet-barra__cantidad output {
    min-width: 2ch;
    font-family: var(--fuente-display);
    font-size: var(--texto-grande);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.carnet-barra__paso {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: var(--rs-superficie-1);
    color: var(--rs-texto);
    font-size: 1.15rem;
    line-height: 1;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.12);
    cursor: pointer;
}

.carnet-barra__paso[data-paso="1"]:not(:disabled) {
    background: var(--marca-boton);
    color: var(--marca-sobre-boton);
}

.carnet-barra__paso:disabled {
    opacity: 0.4;
    box-shadow: none;
    cursor: default;
}

.carnet-barra__compra [data-comprar-barra] {
    min-height: 52px;
    box-shadow: 0 10px 24px -10px rgb(0 0 0 / 0.45);
}

@media (max-width: 767px) {
    .carnet-barra__compra {
        padding: var(--espacio-3);
    }

    .carnet-barra__carta {
        gap: var(--espacio-2);
    }

    .carnet-barra__linea {
        gap: var(--espacio-2);
        padding: var(--espacio-3) var(--espacio-2) var(--espacio-2);
    }

    .carnet-barra__paso {
        width: 34px;
        height: 34px;
    }
}
/* #endregion */

/* #region 13. Tu asistencia */
/* Una columna por tipo de convocatoria: cuántos este año, en grande, y su línea de tiempo. */
.historial-grupos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: var(--espacio-4) var(--espacio-8);
}

.historial-grupo__cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--espacio-2);
    margin: 0 0 var(--espacio-3);
    padding-bottom: var(--espacio-3);
    border-bottom: 1px solid var(--rs-borde-sutil);
    color: var(--rs-texto);
    font-size: var(--texto-grande);
    letter-spacing: 0;
    text-transform: none;
}

.historial-grupo__cabecera strong {
    color: var(--marca-acento);
    font-family: var(--fuente-display);
    font-size: 2.25rem;
    line-height: 1;
}

.historial-grupo__cabecera small {
    color: var(--rs-texto-tenue);
    font-size: var(--texto-etiqueta);
    font-weight: 500;
}

.carnet-historial {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.carnet-historial li {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    min-height: 52px;
    padding: var(--espacio-2) 0;
}

/* La línea que une un punto con el siguiente. */
.carnet-historial li:not(:last-child)::before {
    content: "";
    position: absolute;
    top: calc(50% + 14px);
    bottom: calc(-50% + 14px);
    left: 11px;
    width: 2px;
    border-radius: 2px;
    background: var(--rs-borde);
}

.carnet-historial__punto {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--rs-exito);
    color: #fff;
}

.carnet-historial__punto .icono {
    width: 14px;
    height: 14px;
}

.carnet-historial__texto {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.carnet-historial__nombre {
    font-weight: 600;
}

.carnet-historial time {
    color: var(--rs-texto-tenue);
    font-size: var(--texto-etiqueta);
}

/* «Con entradas compradas fuera de plazo» (migración 0228): que se vea, en ámbar. */
.carnet-historial__fuera-plazo {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-1);
    margin-top: var(--espacio-1);
    color: var(--rs-aviso-texto);
    font-size: var(--texto-etiqueta);
    font-weight: 600;
}

.carnet-historial__fuera-plazo .icono {
    width: 14px;
    height: 14px;
}

.historial-grupo > .carnet-mas {
    margin-top: var(--espacio-3);
}
/* #endregion */

/* #region 14. Cumpleaños */
/* La asociación le felicita: tarta con velas y confeti cayendo (se puede apagar en el panel). */
.carnet-cumple {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--espacio-4);
    padding: var(--espacio-4) var(--espacio-5);
    overflow: hidden;
    border-radius: var(--radio-xl);
    background:
        radial-gradient(circle at 15% 50%, color-mix(in srgb, var(--rs-aviso) 30%, transparent), transparent 55%),
        linear-gradient(120deg, color-mix(in srgb, var(--marca-fondo) 85%, #000), color-mix(in srgb, var(--marca-fondo) 55%, #2b1a3d));
    color: #fff;
}

.carnet-cumple__texto {
    position: relative;
    z-index: 1;
}

.carnet-cumple__texto h2 {
    margin: 0 0 var(--espacio-1);
    color: #fff;
    font-size: 1.5rem;
}

.carnet-cumple__texto p {
    margin: 0;
    opacity: 0.9;
}

.carnet-cumple__tarta {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: 104px;
    height: 104px;
}

.tarta__sombra {
    fill: rgb(0 0 0 / 0.25);
}

.tarta__piso--abajo {
    fill: #f472b6;
}

.tarta__piso--arriba {
    fill: #fb7185;
}

.tarta__nata {
    fill: #fff7ed;
}

.tarta__cereza {
    fill: #dc2626;
}

.tarta__vela {
    fill: #93c5fd;
}

.tarta__vela--centro {
    fill: #fde68a;
}

.tarta__llama {
    fill: #fbbf24;
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: tarta-llama 0.9s ease-in-out infinite alternate;
}

.tarta__llama--centro {
    fill: #f97316;
    animation-delay: 0.3s;
}

@keyframes tarta-llama {
    from {
        transform: scale(1, 1) rotate(-4deg);
    }

    to {
        transform: scale(0.85, 1.15) rotate(4deg);
    }
}

/* El confeti: 18 papelitos en 4 colores, cada uno con su sitio y su retraso. */
.carnet-cumple__confeti {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.75;
    pointer-events: none;
}

.carnet-cumple__confeti span {
    position: absolute;
    top: -12px;
    width: 8px;
    height: 12px;
    border-radius: 2px;
    opacity: 0.9;
    animation: confeti-cae 4.5s linear infinite;
}

.carnet-cumple__confeti span:nth-child(4n + 1) { background: #fbbf24; }
.carnet-cumple__confeti span:nth-child(4n + 2) { background: #60a5fa; }
.carnet-cumple__confeti span:nth-child(4n + 3) { background: #34d399; }
.carnet-cumple__confeti span:nth-child(4n + 4) { background: #f472b6; }

.carnet-cumple__confeti span:nth-child(1) { left: 5%; animation-delay: -0.2s; }
.carnet-cumple__confeti span:nth-child(2) { left: 11%; animation-delay: -2.1s; }
.carnet-cumple__confeti span:nth-child(3) { left: 17%; animation-delay: -1.3s; }
.carnet-cumple__confeti span:nth-child(4) { left: 23%; animation-delay: -3.4s; }
.carnet-cumple__confeti span:nth-child(5) { left: 29%; animation-delay: -0.8s; }
.carnet-cumple__confeti span:nth-child(6) { left: 35%; animation-delay: -2.7s; }
.carnet-cumple__confeti span:nth-child(7) { left: 41%; animation-delay: -1.9s; }
.carnet-cumple__confeti span:nth-child(8) { left: 47%; animation-delay: -4s; }
.carnet-cumple__confeti span:nth-child(9) { left: 53%; animation-delay: -0.5s; }
.carnet-cumple__confeti span:nth-child(10) { left: 59%; animation-delay: -3s; }
.carnet-cumple__confeti span:nth-child(11) { left: 65%; animation-delay: -1.6s; }
.carnet-cumple__confeti span:nth-child(12) { left: 71%; animation-delay: -2.4s; }
.carnet-cumple__confeti span:nth-child(13) { left: 77%; animation-delay: -0.1s; }
.carnet-cumple__confeti span:nth-child(14) { left: 83%; animation-delay: -3.7s; }
.carnet-cumple__confeti span:nth-child(15) { left: 89%; animation-delay: -1.1s; }
.carnet-cumple__confeti span:nth-child(16) { left: 94%; animation-delay: -2.9s; }
.carnet-cumple__confeti span:nth-child(17) { left: 62%; animation-delay: -4.3s; }
.carnet-cumple__confeti span:nth-child(18) { left: 33%; animation-delay: -3.9s; }

@keyframes confeti-cae {
    from {
        transform: translateY(0) rotate(0);
    }

    to {
        transform: translateY(190px) rotate(540deg);
    }
}

@media (max-width: 480px) {
    .carnet-cumple {
        gap: var(--espacio-3);
        padding: var(--espacio-4);
    }

    .carnet-cumple__tarta {
        width: 80px;
        height: 80px;
    }

    .carnet-cumple__texto h2 {
        font-size: 1.2rem;
    }
}
/* #endregion */

/* #region 15. Modo puerta (el código a pantalla completa) */
/*
 * Pensado para quien controla la puerta, que mira medio segundo: arriba la
 * franja con el color del carnet y el escudo; la cara, el nombre, el tipo y
 * el estado bien grandes; y el código sobre blanco, que se lee mejor al sol.
 */
.modo-puerta {
    --carnet-fondo: var(--color-carnet, var(--marca-fondo));
    --carnet-tinta: var(--color-carnet-texto, var(--marca-sobre));
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 0 var(--espacio-4) var(--espacio-5);
    border: 0;
    background: #fff;
    color: #111827;
}

.modo-puerta[open] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--espacio-4);
    overflow-y: auto;
    text-align: center;
}

.modo-puerta::backdrop {
    background: #fff;
}

.modo-puerta__banda {
    display: flex;
    align-items: center;
    align-self: stretch;
    justify-content: center;
    gap: var(--espacio-3);
    margin: 0 calc(-1 * var(--espacio-4));
    padding: max(var(--espacio-4), env(safe-area-inset-top)) var(--espacio-4) var(--espacio-4);
    background: linear-gradient(135deg, var(--carnet-fondo), color-mix(in srgb, var(--carnet-fondo) 55%, #000));
    color: var(--carnet-tinta);
}

.modo-puerta__logo {
    display: inline-flex;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    padding: 4px;
    overflow: hidden;
    border-radius: var(--radio-sm);
    background: #fff;
}

.modo-puerta__logo:empty {
    display: none;
}

.modo-puerta__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.modo-puerta__organizacion {
    margin: 0;
    font-size: var(--texto-base);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.modo-puerta__persona {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--espacio-1);
}

.modo-puerta__foto,
.modo-puerta__iniciales {
    width: 96px;
    height: 120px;
    margin-bottom: var(--espacio-2);
    border-radius: var(--radio-lg);
    object-fit: cover;
    box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--carnet-fondo);
}

.modo-puerta__iniciales {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--carnet-fondo);
    color: var(--carnet-tinta);
    font-family: var(--fuente-display);
    font-size: 2.25rem;
    font-weight: 700;
}

.modo-puerta__nombre {
    margin: 0;
    font-family: var(--fuente-display);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.15;
}

/* «Llanero adulto · Socio nº 12»: el punto solo si hay número. */
.modo-puerta__detalle {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 var(--espacio-2);
    margin: 0;
    color: #4b5563;
    font-weight: 600;
}

.modo-puerta__detalle span:empty {
    display: none;
}

.modo-puerta__detalle span + span:not(:empty)::before {
    content: "·";
    margin-right: var(--espacio-2);
}

/* «Carnet activo», con su punto verde; vacío (revocado...) no sale. */
.modo-puerta__estado {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-2);
    margin: var(--espacio-2) 0 0;
    padding: var(--espacio-1) var(--espacio-4);
    border-radius: 999px;
    background: #dcfce7;
    color: #166534;
    font-size: var(--texto-grande);
    font-weight: 800;
}

.modo-puerta__estado::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #16a34a;
}

.modo-puerta__estado:empty {
    display: none;
}

/* «Hoy: Cena de gala · Mesa 12»: lo que pregunta quien controla la puerta. */
.modo-puerta__hoy {
    margin: 0;
    padding: var(--espacio-2) var(--espacio-4);
    border-radius: var(--radio-md);
    background: #f3f4f6;
    color: #111827;
    font-size: var(--texto-grande);
    font-weight: 700;
}

.modo-puerta__qr {
    width: min(320px, 78vw);
}

.modo-puerta__qr svg,
.modo-puerta__qr img,
.modo-puerta__qr canvas {
    display: block;
    width: 100%;
    height: auto;
}

.modo-puerta__corto {
    margin: 0;
    color: #374151;
    font-size: 0.95rem;
}

.modo-puerta__corto strong {
    font-size: 1.25rem;
    letter-spacing: 0.1em;
    color: #111827;
}

.modo-puerta__corto[hidden] {
    display: none;
}

.modo-puerta__cambia {
    margin: 0;
    color: #374151;
    font-variant-numeric: tabular-nums;
}

/* La primera vez: «Sube el brillo». */
.modo-puerta__brillo {
    margin: 0;
    padding: var(--espacio-2) var(--espacio-4);
    border-radius: var(--radio-md);
    background: #fef3c7;
    color: #78350f;
    font-weight: 600;
}

.modo-puerta form {
    margin: 0;
}

.modo-puerta__cerrar {
    min-width: 200px;
}
/* #endregion */

/* #region 16. Reducir movimiento */
/*
 * base.css ya acorta todas las animaciones y transiciones a casi nada para
 * quien lo pide en su móvil u ordenador. Aquí solo se quitan los adornos que,
 * quietos, no tienen sentido: el brillo que cruza la tarjeta y el confeti.
 */
@media (prefers-reduced-motion: reduce) {
    .carnet-tarjeta__frente::after,
    .carnet-cumple__confeti {
        display: none;
    }
}
/* #endregion */

/* #region Avisos importantes con «Enterado» (migración 0260): discreto, arriba del carnet */
.carnet-importante {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--espacio-2);
    margin-bottom: var(--espacio-3);
}

.carnet-importante[hidden] {
    display: none;
}

.carnet-importante__aviso {
    border-block: 1px solid var(--rs-borde-sutil);
}

.carnet-importante__aviso summary {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    cursor: pointer;
    list-style: none;
    padding-block: var(--espacio-3);
}

.carnet-importante__aviso summary::-webkit-details-marker {
    display: none;
}

.carnet-importante__etiqueta {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-1);
    flex: none;
    color: var(--rs-aviso-texto);
    font-weight: 600;
}

.carnet-importante__etiqueta .icono {
    width: 14px;
    height: 14px;
}

.carnet-importante__titulo {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.carnet-importante__aviso[open] .carnet-importante__titulo {
    white-space: normal;
}

.carnet-importante__leer {
    flex: none;
    color: var(--marca-acento);
    font-weight: 600;
}

.carnet-importante__aviso[open] .carnet-importante__leer {
    display: none;
}

.carnet-importante__cuerpo {
    margin: 0;
    padding: 0 var(--espacio-3);
    white-space: pre-line;
}

.carnet-importante__acciones {
    display: flex;
    justify-content: flex-end;
    padding: var(--espacio-2) var(--espacio-3) var(--espacio-3);
}

.carnet-importante__gracias {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    margin: 0;
    color: var(--rs-exito-texto);
}
/* #endregion */

/* #region Insignias (28 oct 2026, migración 0261): se ganan solas. En el móvil, baldosas; donde caben, en una fila */
.carnet-insignias__lista {
    display: grid;
    grid-auto-columns: minmax(6.5rem, 1fr);
    grid-auto-flow: column;
    gap: var(--espacio-2);
    margin: 0;
    padding: 0;
    overflow-x: auto;
    list-style: none;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}

.carnet-insignia {
    --color-insignia: var(--tono-1);
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 6px;
    padding: var(--espacio-3) var(--espacio-2);
    border: 1px solid var(--rs-borde-tarjeta);
    border-radius: var(--radio-lg);
    background: var(--rs-superficie-1);
    text-align: center;
    scroll-snap-align: start;
}

.carnet-insignia--antiguedad,
.carnet-insignia--campeon {
    --color-insignia: var(--rs-oro);
}

.carnet-insignia--podio {
    --color-insignia: var(--rs-plata);
}

.carnet-insignia--festero {
    --color-insignia: var(--tono-3);
}

.carnet-insignia__medalla {
    display: grid;
    flex: none;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--color-insignia) 70%, #FFFFFF), var(--color-insignia));
    color: #1A1F26;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--color-insignia) 35%, transparent);
}

.carnet-insignia__medalla .icono {
    width: 19px;
    height: 19px;
}

.carnet-insignia__texto {
    display: grid;
    gap: 1px;
    font-size: var(--texto-pequeno);
    font-weight: 600;
    line-height: 1.25;
}

.carnet-insignia__texto small {
    color: var(--rs-texto-secundario);
    font-size: inherit;
    font-weight: 500;
}

@media (min-width: 768px) {
    .carnet-insignias__lista {
        display: flex;
        flex-wrap: wrap;
        overflow: visible;
    }

    .carnet-insignia {
        display: flex;
        align-items: center;
        padding: 6px var(--espacio-3) 6px 6px;
        border-radius: var(--radio-pildora);
        text-align: left;
    }

    .carnet-insignia__medalla {
        width: 30px;
        height: 30px;
    }

    .carnet-insignia__medalla .icono {
        width: 16px;
        height: 16px;
    }

    .carnet-insignia__texto {
        font-size: var(--texto-etiqueta);
    }
}
/* #endregion */