/*
 * «Cargos de la fiesta» del socio (12 oct 2026, docs/festeros.md; rediseño del 6 nov 2026, Sergi: «no puede estar tan
 * feo solo texto»): las ruedas, dibujadas y, si le toca, en grande; su cargo, un nombramiento en papel con su escudo, y
 * sus cuentas con su sello; las candidaturas y las listas de espera, cada una una invitación; y quién ha sido quién,
 * cada uno en su cuadro.
 *
 *  Ruedas del socio
 *  1. Las partes de la pantalla
 *  2. Tus cargos
 *  3. Candidaturas y listas de espera
 *  4. Quién ha sido quién
 *
 * Convenciones: cada pieza lleva sus ajustes de móvil justo debajo. El papel y el oro no cambian con el tema.
 */

@font-face {
    font-family: "Cormorant Garamond";
    font-style: normal;
    font-weight: 500 700;
    font-display: swap;
    src: url("/assets/fuentes/cormorant-garamond.woff2") format("woff2");
}

/* #region Ruedas del socio: cada una, de verdad; y si le toca, en grande y aparte (rediseño del 6 nov 2026) */
.ruedas-carnet {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 30rem), 1fr));
    gap: var(--espacio-8) clamp(var(--espacio-8), 4vw, var(--espacio-12));
    margin: 0 0 clamp(var(--espacio-8), 4vw, var(--espacio-12));
    padding: 0;
    list-style: none;
}

.ruedas-carnet__rueda {
    display: grid;
    grid-template-columns: clamp(6.5rem, 10vw, 8.5rem) minmax(0, 1fr);
    align-items: center;
    gap: clamp(20px, 2.4vw, 36px);
    min-width: 0;
}

.ruedas-carnet__textos {
    min-width: 0;
}

.ruedas-carnet__textos p {
    margin: 0;
}

.ruedas-carnet__textos h3 {
    margin: 0;
    font-family: var(--fuente-display);
    font-size: clamp(1.35rem, 1.8vw, 1.7rem);
    font-weight: 650;
    letter-spacing: -0.025em;
    line-height: 1.15;
}

/* Lo que se dice de ella, con aire entre una cosa y otra. */
.ruedas-carnet__notas {
    display: grid;
    gap: var(--espacio-2);
    margin-top: var(--espacio-2);
    line-height: 1.5;
}

.ruedas-carnet__textos p .icono {
    width: 16px;
    height: 16px;
    margin-right: var(--espacio-1);
    vertical-align: -3px;
}

/* «Vas el 5º de 42», lo que se viene a mirar. */
.ruedas-carnet__sitio {
    font-family: var(--fuente-display);
    font-size: 1.3rem;
    font-weight: 650;
    letter-spacing: -0.015em;
}

.ruedas-carnet__no {
    color: var(--rs-aviso-texto);
}

.ruedas-carnet__guardado {
    color: var(--rs-exito-texto);
    font-weight: 600;
}

.ruedas-carnet__guardado--aviso {
    color: var(--rs-aviso-texto);
}

.ruedas-carnet__acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-2);
    margin-top: var(--espacio-4);
}

/* La rueda: un gajo por persona; el suyo, encendido y arriba, bajo la flecha. */
.rueda-dibujo {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1;
    color: var(--marca-acento);
}

.rueda-dibujo svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.rueda-dibujo__gajo {
    fill: color-mix(in srgb, currentColor 16%, transparent);
}

.rueda-dibujo__gajo--par {
    fill: color-mix(in srgb, currentColor 28%, transparent);
}

.rueda-dibujo__gajo--suyo {
    fill: var(--marca-detalle);
    filter: drop-shadow(0 0 3px color-mix(in srgb, var(--marca-detalle) 60%, transparent));
}

.rueda-dibujo__flecha {
    fill: var(--rs-texto);
}

.rueda-dibujo__gajos {
    transform-origin: 50% 50%;
    transform-box: view-box;
}

.rueda-dibujo__centro {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: var(--fuente-display);
    font-size: clamp(1.15rem, 1.8vw, 1.6rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--rs-texto);
}

.rueda-dibujo__centro .icono {
    width: 28%;
    height: 28%;
}

/* Sin entrar todavía: la rueda, sin encender. */
.rueda-dibujo--sin-entrar {
    color: var(--rs-texto-tenue);
}

/* Cuando te toca, da la vuelta y se para en ti. */
.rueda-dibujo--gira .rueda-dibujo__gajos {
    animation: rueda-gira 1.9s cubic-bezier(0.14, 0.72, 0.2, 1) both;
}

@keyframes rueda-gira {
    from {
        transform: rotate(-630deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .rueda-dibujo--gira .rueda-dibujo__gajos {
        animation: none;
    }
}

/* ¡Te toca!: en grande, aparte de las demás, en el color de la asociación y con confeti. */
.ruedas-carnet--toca {
    grid-template-columns: minmax(0, 1fr);
}

.ruedas-carnet__rueda--toca {
    --confeti-1: var(--marca-detalle);
    --confeti-2: #FFFFFF;
    --confeti-3: color-mix(in srgb, var(--marca-principal) 40%, #FFFFFF);
    --luz-detalle: oklch(from var(--marca-detalle) clamp(0.8, l, 0.88) min(c, 0.13) h);
    grid-template-columns: minmax(0, 1fr) clamp(11rem, 24vw, 21rem);
    padding: clamp(28px, 3.8vw, 60px);
    overflow: hidden;
    border-radius: 26px;
    background:
        radial-gradient(circle at 2.5% 34%, var(--confeti-1) 0 3px, transparent 3.5px),
        radial-gradient(circle at 37% 8%, var(--confeti-3) 0 3.5px, transparent 4px),
        radial-gradient(circle at 63% 14%, var(--confeti-2) 0 2px, transparent 2.5px),
        radial-gradient(circle at 96% 10%, var(--confeti-1) 0 3.5px, transparent 4px),
        radial-gradient(circle at 92% 92%, var(--confeti-2) 0 2.5px, transparent 3px),
        radial-gradient(120% 110% at 100% 0, oklch(from var(--marca-principal) 0.5 c h), transparent 62%),
        linear-gradient(150deg, oklch(from var(--marca-principal) 0.34 c h), oklch(from var(--marca-principal) 0.2 c h));
    box-shadow: 0 14px 28px color-mix(in srgb, var(--marca-principal) 18%, transparent);
    color: #FFFFFF;
}

.ruedas-carnet__rueda--toca .rueda-dibujo {
    grid-column: 2;
    grid-row: 1;
    color: #FFFFFF;
}

.ruedas-carnet__rueda--toca .ruedas-carnet__textos {
    grid-column: 1;
    grid-row: 1;
}

.ruedas-carnet__rueda--toca .rueda-dibujo__flecha {
    fill: var(--luz-detalle);
}

.ruedas-carnet__rueda--toca .rueda-dibujo__centro {
    color: var(--luz-detalle);
}

/* El nombre de la rueda, encima, pequeño: lo que importa es lo de debajo. */
.ruedas-carnet__rueda--toca .ruedas-carnet__textos h3 {
    color: rgb(255 255 255 / 0.84);
    font-family: var(--fuente-ui);
    font-size: 1.0625rem;
    font-weight: 500;
    letter-spacing: 0;
}

.ruedas-carnet__toca {
    margin-block: var(--espacio-3) var(--espacio-5) !important;
    font-family: var(--fuente-display);
    font-size: clamp(3rem, 7vw, 6.5rem);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1.04;
}

/* En qué turno, y debajo cuándo y en qué puesto. */
.ruedas-carnet__turno {
    font-family: var(--fuente-display);
    font-size: clamp(1.4rem, 2.3vw, 2.1rem);
    font-weight: 650;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.ruedas-carnet__cuando {
    margin-top: var(--espacio-2) !important;
    font-size: 1.0625rem;
}

/* Lo demás, separado por un hilo y en letra de leer. */
.ruedas-carnet__rueda--toca .ruedas-carnet__notas {
    gap: var(--espacio-3);
    max-width: 60ch;
    margin-top: var(--espacio-6);
    padding-top: var(--espacio-5);
    border-top: 1px solid rgb(255 255 255 / 0.22);
    color: rgb(255 255 255 / 0.9);
    font-size: var(--texto-etiqueta);
}

.ruedas-carnet__rueda--toca :is(.texto-tenue, .ruedas-carnet__guardado) {
    color: inherit;
}

.ruedas-carnet__rueda--toca .boton:not(.boton-secundario) {
    background: #FFFFFF;
    color: oklch(from var(--marca-principal) 0.28 c h);
}

.ruedas-carnet__rueda--toca .boton-secundario {
    border-color: rgb(255 255 255 / 0.6);
    background: none;
    color: #FFFFFF;
}

.ruedas-carnet__rueda--toca .boton-secundario:hover {
    background: rgb(255 255 255 / 0.14);
    color: #FFFFFF;
}

.ruedas-carnet__rueda--toca .boton-enlace {
    color: #FFFFFF;
}

@media (max-width: 767px) {
    .ruedas-carnet__rueda--toca {
        grid-template-columns: minmax(0, 1fr);
    }

    .ruedas-carnet__rueda--toca .rueda-dibujo {
        grid-column: 1;
        grid-row: 1;
        width: 9rem;
        justify-self: center;
    }

    .ruedas-carnet__rueda--toca .ruedas-carnet__textos {
        grid-row: 2;
    }
}

/* Quién ha salido: plegado; cada turno, con su nombre y su fecha, y la gente en columnas, no en una lista interminable. */
.ruedas-carnet__historial {
    margin-top: var(--espacio-4);
}

.ruedas-carnet__turnos {
    display: grid;
    gap: var(--espacio-8);
    margin: var(--espacio-3) 0 var(--espacio-4);
    padding: 0;
    list-style: none;
}

.ruedas-carnet__turno-cabeza {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--espacio-1) var(--espacio-3);
}

.ruedas-carnet__turno-cabeza strong {
    font-family: var(--fuente-display);
    font-size: var(--texto-grande);
    font-weight: 650;
    letter-spacing: -0.015em;
}

.ruedas-carnet__turno-cabeza time {
    color: var(--rs-texto-tenue);
    font-size: var(--texto-etiqueta);
}

.ruedas-carnet__turnos p {
    margin: var(--espacio-1) 0 0;
}

.ruedas-carnet__puesto {
    margin: var(--espacio-4) 0 0;
    color: var(--rs-texto-secundario);
    font-family: var(--fuente-ui);
    font-size: var(--texto-etiqueta);
    font-weight: 600;
}

.ruedas-carnet__gente {
    columns: 4 13rem;
    column-gap: var(--espacio-6);
    margin: var(--espacio-3) 0 0;
    padding: 0;
    list-style: none;
}

.ruedas-carnet__gente li {
    padding-block: 3px;
    break-inside: avoid;
}

/* Con su orden, si es la lista provisional. */
.ruedas-carnet__gente--orden {
    counter-reset: gente;
}

.ruedas-carnet__gente--orden li {
    counter-increment: gente;
}

.ruedas-carnet__gente--orden li::before {
    content: counter(gente);
    display: inline-block;
    min-width: 1.75em;
    color: var(--rs-texto-tenue);
    font-variant-numeric: tabular-nums;
}
/* #endregion */

/* #region 1. Las partes de la pantalla */
.mis-cargos {
    display: grid;
    gap: var(--espacio-3);
}

.mis-cargos[hidden] {
    display: none;
}

.mis-cargos > .lista-agrupada__titulo {
    margin: 0;
}

/* Sus cargos, a lo ancho; candidaturas y listas de espera, una al lado de otra. */
#grupo-cargos:not([hidden]) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--espacio-10) clamp(24px, 3vw, 48px);
    align-items: start;
}

#mis-cargos {
    grid-column: 1 / -1;
}

@media (max-width: 960px) {
    #grupo-cargos:not([hidden]) {
        grid-template-columns: minmax(0, 1fr);
    }
}

.mis-cargos__lista {
    display: grid;
    gap: var(--espacio-8);
    margin: 0;
    padding: 0;
    list-style: none;
}
/* #endregion */

/* #region 2. Tus cargos: el nombramiento, en papel, y sus cuentas al lado */
.mis-cargos__uno {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--espacio-6) clamp(24px, 3vw, 48px);
    align-items: start;
    scroll-margin-top: calc(var(--alto-superior, 64px) + var(--espacio-4));
}

.mis-cargos__uno:has(> :only-child) {
    grid-template-columns: minmax(0, 1fr);
    max-width: 44rem;
}

@media (max-width: 960px) {
    .mis-cargos__uno {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* El marco, con su doble línea, y el escudo arriba. */
.nombramiento {
    display: grid;
    justify-items: center;
    gap: var(--espacio-1);
    padding: clamp(24px, 3vw, 44px) clamp(20px, 3vw, 40px);
    border-radius: 6px;
    outline: 2px solid var(--marca-detalle);
    outline-offset: -10px;
    background:
        radial-gradient(90% 70% at 50% 0, color-mix(in srgb, var(--marca-detalle) 16%, transparent), transparent 70%),
        #FBF8F0;
    text-align: center;
}

.nombramiento::after {
    content: "";
    position: absolute;
    inset: 15px;
    border: 1px solid color-mix(in srgb, var(--marca-detalle) 55%, transparent);
    border-radius: 2px;
    pointer-events: none;
}

/* Arriba, el escudo de la asociación, tal cual; sin escudo, un adorno fino de su segundo color. */
.nombramiento__escudo {
    max-width: 9rem;
    max-height: clamp(5rem, 8vw, 7rem);
    margin-bottom: var(--espacio-3);
    object-fit: contain;
    filter: drop-shadow(0 6px 10px rgb(60 40 8 / 0.2));
}

.nombramiento__adorno {
    position: relative;
    width: 8rem;
    height: 1px;
    margin: var(--espacio-3) 0 var(--espacio-4);
    background: linear-gradient(90deg, transparent, var(--marca-detalle), transparent);
}

.nombramiento__adorno::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 9px;
    background: var(--marca-detalle);
    transform: translate(-50%, -50%) rotate(45deg);
}

.nombramiento__anyo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--espacio-2);
    margin: 0;
    color: #805400;
    font-weight: 700;
    letter-spacing: 0.2em;
}

.nombramiento__cargo {
    margin: 0;
    color: var(--tinta);
    font-family: "Cormorant Garamond", var(--fuente-display);
    font-size: clamp(2.8rem, 5.4vw, 5rem);
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1;
}

.nombramiento__corte {
    display: grid;
    justify-items: center;
    gap: var(--espacio-2);
    width: 100%;
    margin-top: var(--espacio-4);
    padding-top: var(--espacio-4);
    border-top: 1px solid color-mix(in srgb, var(--marca-detalle) 45%, transparent);
}

.nombramiento__corte h4,
.cuentas-cargo h4 {
    margin: 0;
    color: var(--tinta-suave);
    font-family: var(--fuente-ui);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0;
}

.nombramiento__corte ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--espacio-3) var(--espacio-8);
    margin: 0;
    padding: 0;
    list-style: none;
}

.nombramiento__corte li {
    display: grid;
    gap: 1px;
}

.nombramiento__corte span {
    color: var(--tinta-suave);
    font-size: var(--texto-etiqueta);
}

.nombramiento__corte strong {
    font-family: "Cormorant Garamond", var(--fuente-display);
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.15;
}

/* Sus cuentas: lo que aporta y lo que recibe, con su sello. */
.cuentas-cargo {
    display: grid;
    gap: var(--espacio-3);
    padding: clamp(18px, 2vw, 28px);
    border-radius: 6px;
}

.mis-cargos__cuentas {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mis-cargos__cuentas li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--espacio-1) var(--espacio-4);
    padding-block: var(--espacio-3);
}

.mis-cargos__cuentas li + li {
    border-top: 1px dashed rgb(35 32 26 / 0.22);
}

.mis-cargos__cuentas strong {
    font-family: var(--fuente-mono);
    font-size: 1.1rem;
    font-weight: 600;
    white-space: nowrap;
}

.mis-cargos__cuentas .sello {
    grid-column: 1 / -1;
    justify-self: start;
}

.cuentas-cargo__como {
    margin: 0;
    color: var(--tinta-suave);
    font-size: var(--texto-etiqueta);
    line-height: 1.45;
}
/* #endregion */

/* #region 3. Candidaturas y listas de espera: cada una, una invitación */
.invitaciones {
    display: grid;
    gap: var(--espacio-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.invitacion {
    display: grid;
    align-content: space-between;
    gap: var(--espacio-3);
    padding: clamp(18px, 2vw, 26px);
    border-radius: 6px;
    border-top: 4px solid var(--marca-detalle);
}

.invitacion__anyo {
    margin: 0;
    color: #805400;
    font-size: var(--texto-etiqueta);
    font-weight: 700;
    letter-spacing: 0.16em;
}

.mis-cargos__texto {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.mis-cargos__texto strong {
    font-family: "Cormorant Garamond", var(--fuente-display);
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.1;
}

.mis-cargos__texto p:not(.invitacion__anyo) {
    margin: 0;
    color: var(--tinta-suave);
}

.mis-cargos__plazo {
    font-size: var(--texto-etiqueta);
}

.mis-cargos__accion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-2) var(--espacio-3);
}
/* #endregion */

/* #region 4. Quién ha sido quién: cada uno en su cuadro */
/* Todavía nadie: un cuadro vacío, con el sitio de quien lo ocupará. */
#galeria-vacia::before {
    width: 5.5rem;
    height: auto;
    aspect-ratio: 4 / 5;
    border: 5px solid var(--marca-detalle);
    border-radius: 3px;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 50' fill='%23C49236' fill-opacity='.32'%3E%3Ccircle cx='20' cy='19' r='8'/%3E%3Cpath d='M5 50c0-12 7-18 15-18s15 6 15 18z'/%3E%3C/svg%3E") center bottom / 100% no-repeat,
        #FBF8F0;
    box-shadow: inset 0 0 0 1px rgb(120 84 16 / 0.35), 0 6px 14px rgb(60 40 8 / 0.22);
}

.festeros-foto {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

.festeros-foto--iniciales {
    display: grid;
    place-items: center;
    background: linear-gradient(160deg, color-mix(in srgb, var(--marca-principal) 22%, #F3EEE1), color-mix(in srgb, var(--marca-principal) 40%, #E6DFCB));
    color: oklch(from var(--marca-principal) 0.32 c h);
    font-family: "Cormorant Garamond", var(--fuente-display);
    font-size: 1.6rem;
    font-weight: 600;
}

/* El marco, con su brillo, del segundo color de la asociación; si no tiene, en oro. */
.cuadro {
    display: block;
    flex: none;
    width: 4.5rem;
    padding: 4px;
    background: linear-gradient(135deg, color-mix(in oklch, var(--marca-detalle) 45%, #FFFFFF), var(--marca-detalle) 45%, color-mix(in oklch, var(--marca-detalle) 70%, #FFFFFF) 70%, color-mix(in oklch, var(--marca-detalle) 78%, #000000));
    box-shadow: 0 8px 18px rgb(0 0 0 / 0.22), inset 0 0 0 1px rgb(255 255 255 / 0.35);
}

.cuadro > * {
    box-shadow: 0 0 0 1px rgb(90 60 10 / 0.5);
}

.galeria-filtro {
    flex-wrap: wrap;
    width: fit-content;
    max-width: 100%;
}

.galeria-filtro[hidden] {
    display: none;
}

.galeria-cargos {
    display: grid;
}

/* Una fila por año: el año, en grande, y sus cuadros, pequeños para que quepan muchos sin hacerse interminable. */
.galeria-cargos__anyo {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    align-items: start;
    gap: var(--espacio-4);
    padding-block: var(--espacio-5);
}

.galeria-cargos__anyo + .galeria-cargos__anyo {
    border-top: 1px solid var(--rs-borde-sutil);
}

.galeria-cargos__anyo h3 {
    margin: 0;
    font-family: "Cormorant Garamond", var(--fuente-display);
    font-size: clamp(2rem, 3vw, 2.75rem);
    font-weight: 600;
    line-height: 1;
}

.galeria-cargos__anyo ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
    gap: var(--espacio-4) var(--espacio-6);
    margin: 0;
    padding: 0;
    list-style: none;
}

.galeria-cargos__uno {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    min-width: 0;
}

.galeria-cargos__uno > div {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.galeria-cargos__cargo {
    color: var(--marca-acento);
    font-size: var(--texto-etiqueta);
    font-weight: 600;
}

.galeria-cargos__uno strong {
    font-family: "Cormorant Garamond", var(--fuente-display);
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.12;
    overflow-wrap: anywhere;
}

.galeria-cargos__uno small {
    color: var(--rs-texto-secundario);
    font-size: var(--texto-pequeno);
    line-height: 1.4;
}

@media (max-width: 767px) {
    .galeria-cargos__anyo {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--espacio-3);
    }

}
/* #endregion */