/*
 * «Mi lotería» (/socio/mi-loteria; rediseño del 6 nov 2026, «elementos propios de la lotería y de la Navidad»): cada
 * sorteo es una escena con su bombo, los números que juega la asociación en bolas de madera y lo que se puede hacer; y
 * sus décimos, de papel. Se llega desde «Lotería» en la tienda.
 *
 * Solo la carga plantillas/socio/mi-loteria.php, después de socio.css (de
 * ahí sale el «− +», .selector-cantidad).
 *
 *  1. La escena de cada sorteo: Navidad, El Niño y los demás
 *  2. El bombo y sus bolas
 *  3. Mis talonarios de rifa (al final del fichero)
 *  4. Lo que queda debajo: las reservas y sus décimos
 *  5. Cada décimo, de papel de verdad
 *  6. Fuera de temporada
 *
 * Convenciones: la escena y el papel son objetos: sus colores no cambian con el tema (el oro y la crema, en sus
 * variables). Cada tipo de sorteo dice sus colores y nada más; los que no son de Navidad ni del Niño salen de los dos
 * colores de la asociación. Lo que se mueve (nieve, luces, bombo, bolas), solo sin «reducir movimiento».
 */

/* #region 1. La escena de cada sorteo: Navidad, El Niño y los demás */
@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");
}

#lista-loteria {
    gap: clamp(2.5rem, 5vw, 4rem);
}

.sorteo {
    --oro: #E9C468;
    --oro-claro: #FFF1C4;
    --crema: #FFF6E3;
    --crema-suave: rgb(255 246 227 / 0.78);
    --letra-sorteo: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --papel: #F8F0DC;
    --papel-tinta: #3A2A10;
    --papel-color: #5D4718;
    display: grid;
    gap: var(--espacio-6);
}

.sorteo--navidad {
    --escena-arriba: #8E1426;
    --escena-abajo: #36050E;
    --escena-halo: rgb(255 190 110 / 0.26);
    --papel-color: #8E1426;
}

.sorteo--nino {
    --escena-arriba: #24397F;
    --escena-abajo: #090F30;
    --escena-halo: rgb(160 190 255 / 0.28);
    --papel-color: #1F3278;
}

/*
 * Cualquier otro sorteo: de cualquier color de asociación sale un fondo oscuro, y la crema se lee siempre; su segundo
 * color (si no tiene, oro) hace de oro, con la luz justa para leerse sobre ese fondo.
 */
.sorteo--otro {
    --escena-arriba: oklch(from var(--marca-principal) 0.36 min(c, 0.14) h);
    --escena-abajo: oklch(from var(--marca-principal) 0.17 min(c, 0.07) h);
    --escena-halo: color-mix(in srgb, var(--marca-detalle) 22%, transparent);
    --oro: oklch(from var(--marca-detalle) clamp(0.8, l, 0.88) min(c, 0.13) h);
    --oro-claro: oklch(from var(--marca-detalle) 0.93 min(c, 0.07) h);
    --papel-color: oklch(from var(--marca-principal) 0.36 min(c, 0.14) h);
}

.sorteo__escena {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(12rem, 21vw, 19rem);
    grid-template-areas:
        "cabecera bombo"
        "numeros bombo"
        "venta venta";
    gap: var(--espacio-6) var(--espacio-8);
    overflow: hidden;
    padding: clamp(3rem, 4.5vw, 4rem) clamp(1.25rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 2.25rem);
    border-radius: 24px;
    background:
        radial-gradient(70% 110% at 82% 28%, var(--escena-halo), transparent 70%),
        linear-gradient(165deg, var(--escena-arriba), var(--escena-abajo));
    color: var(--crema);
}

/* El cielo: la nieve de Navidad y las estrellas del Niño, con mucho azar para que no se note que se repiten. */
.sorteo__cielo {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.sorteo--navidad .sorteo__cielo {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640' fill='%23fff'%3E%3Ccircle cx='331' cy='154' r='1.5' opacity='0.38'/%3E%3Ccircle cx='548' cy='96' r='1.5' opacity='0.38'/%3E%3Ccircle cx='519' cy='219' r='0.9' opacity='0.61'/%3E%3Ccircle cx='71' cy='246' r='1.0' opacity='0.60'/%3E%3Ccircle cx='579' cy='126' r='2.5' opacity='0.73'/%3E%3Ccircle cx='596' cy='63' r='1.8' opacity='0.59'/%3E%3Ccircle cx='226' cy='47' r='1.8' opacity='0.43'/%3E%3Ccircle cx='429' cy='147' r='1.8' opacity='0.69'/%3E%3Ccircle cx='573' cy='185' r='1.0' opacity='0.69'/%3E%3Ccircle cx='192' cy='381' r='1.0' opacity='0.78'/%3E%3Ccircle cx='577' cy='61' r='1.9' opacity='0.65'/%3E%3Ccircle cx='544' cy='437' r='2.2' opacity='0.63'/%3E%3Ccircle cx='464' cy='370' r='1.3' opacity='0.83'/%3E%3Ccircle cx='249' cy='83' r='1.8' opacity='0.67'/%3E%3Ccircle cx='351' cy='459' r='1.3' opacity='0.94'/%3E%3Ccircle cx='120' cy='524' r='1.6' opacity='0.80'/%3E%3Ccircle cx='155' cy='500' r='1.6' opacity='0.93'/%3E%3Ccircle cx='79' cy='571' r='1.8' opacity='0.88'/%3E%3Ccircle cx='321' cy='348' r='2.1' opacity='0.71'/%3E%3Ccircle cx='593' cy='467' r='0.9' opacity='0.41'/%3E%3Ccircle cx='276' cy='485' r='2.1' opacity='0.39'/%3E%3Ccircle cx='317' cy='591' r='2.6' opacity='0.84'/%3E%3Ccircle cx='291' cy='395' r='2.4' opacity='0.56'/%3E%3Ccircle cx='472' cy='363' r='1.1' opacity='0.42'/%3E%3Ccircle cx='60' cy='223' r='2.2' opacity='0.43'/%3E%3Ccircle cx='253' cy='407' r='1.5' opacity='0.87'/%3E%3Ccircle cx='82' cy='170' r='1.6' opacity='0.68'/%3E%3Ccircle cx='140' cy='440' r='2.4' opacity='0.52'/%3E%3Ccircle cx='425' cy='367' r='2.0' opacity='0.58'/%3E%3Ccircle cx='236' cy='154' r='0.9' opacity='0.44'/%3E%3Ccircle cx='238' cy='12' r='1.7' opacity='0.70'/%3E%3Ccircle cx='269' cy='288' r='0.8' opacity='0.60'/%3E%3Ccircle cx='378' cy='624' r='1.8' opacity='0.92'/%3E%3Ccircle cx='527' cy='632' r='2.0' opacity='0.79'/%3E%3Ccircle cx='467' cy='572' r='1.5' opacity='0.59'/%3E%3Ccircle cx='106' cy='493' r='1.9' opacity='0.39'/%3E%3Ccircle cx='68' cy='213' r='1.6' opacity='0.42'/%3E%3Ccircle cx='615' cy='53' r='1.0' opacity='0.69'/%3E%3Ccircle cx='549' cy='103' r='2.5' opacity='0.72'/%3E%3Ccircle cx='72' cy='212' r='1.9' opacity='0.44'/%3E%3Ccircle cx='258' cy='355' r='1.9' opacity='0.63'/%3E%3Ccircle cx='118' cy='499' r='2.6' opacity='0.63'/%3E%3Ccircle cx='495' cy='319' r='1.0' opacity='0.41'/%3E%3Ccircle cx='350' cy='271' r='1.7' opacity='0.77'/%3E%3Ccircle cx='528' cy='23' r='1.2' opacity='0.92'/%3E%3Ccircle cx='370' cy='150' r='2.0' opacity='0.90'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900' fill='%23fff'%3E%3Ccircle cx='463' cy='886' r='2.4' opacity='0.90'/%3E%3Ccircle cx='476' cy='462' r='2.3' opacity='0.70'/%3E%3Ccircle cx='189' cy='823' r='2.3' opacity='0.73'/%3E%3Ccircle cx='812' cy='190' r='1.4' opacity='0.53'/%3E%3Ccircle cx='92' cy='551' r='3.0' opacity='0.77'/%3E%3Ccircle cx='42' cy='609' r='3.4' opacity='0.93'/%3E%3Ccircle cx='669' cy='756' r='2.6' opacity='0.44'/%3E%3Ccircle cx='15' cy='851' r='2.4' opacity='0.39'/%3E%3Ccircle cx='194' cy='900' r='1.7' opacity='0.37'/%3E%3Ccircle cx='475' cy='334' r='2.2' opacity='0.86'/%3E%3Ccircle cx='531' cy='239' r='2.6' opacity='0.65'/%3E%3Ccircle cx='678' cy='87' r='2.2' opacity='0.52'/%3E%3Ccircle cx='564' cy='860' r='1.4' opacity='0.50'/%3E%3Ccircle cx='776' cy='235' r='2.3' opacity='0.37'/%3E%3Ccircle cx='576' cy='784' r='1.4' opacity='0.41'/%3E%3Ccircle cx='297' cy='395' r='1.3' opacity='0.36'/%3E%3Ccircle cx='701' cy='0' r='1.7' opacity='0.91'/%3E%3Ccircle cx='53' cy='481' r='2.0' opacity='0.78'/%3E%3Ccircle cx='429' cy='74' r='2.4' opacity='0.47'/%3E%3Ccircle cx='691' cy='276' r='1.9' opacity='0.54'/%3E%3Ccircle cx='15' cy='419' r='2.9' opacity='0.42'/%3E%3Ccircle cx='252' cy='723' r='1.4' opacity='0.39'/%3E%3Ccircle cx='816' cy='498' r='1.6' opacity='0.69'/%3E%3Ccircle cx='458' cy='521' r='1.6' opacity='0.79'/%3E%3Ccircle cx='134' cy='429' r='2.6' opacity='0.42'/%3E%3Ccircle cx='430' cy='217' r='1.2' opacity='0.87'/%3E%3Ccircle cx='822' cy='606' r='1.9' opacity='0.88'/%3E%3Ccircle cx='215' cy='191' r='2.1' opacity='0.86'/%3E%3Ccircle cx='657' cy='590' r='1.4' opacity='0.94'/%3E%3Ccircle cx='218' cy='452' r='1.8' opacity='0.81'/%3E%3Ccircle cx='336' cy='850' r='1.9' opacity='0.39'/%3E%3Ccircle cx='92' cy='213' r='2.5' opacity='0.50'/%3E%3Ccircle cx='615' cy='377' r='2.0' opacity='0.62'/%3E%3Ccircle cx='601' cy='495' r='3.0' opacity='0.43'/%3E%3Ccircle cx='395' cy='187' r='2.6' opacity='0.54'/%3E%3Ccircle cx='233' cy='837' r='2.5' opacity='0.79'/%3E%3Ccircle cx='162' cy='757' r='2.6' opacity='0.68'/%3E%3Ccircle cx='703' cy='397' r='3.1' opacity='0.71'/%3E%3Ccircle cx='431' cy='48' r='1.4' opacity='0.37'/%3E%3Ccircle cx='261' cy='244' r='2.8' opacity='0.58'/%3E%3C/svg%3E");
}

.sorteo--nino .sorteo__cielo {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600' fill='%23fff'%3E%3Ccircle cx='243' cy='557' r='0.6' opacity='0.90'/%3E%3Ccircle cx='485' cy='594' r='0.6' opacity='0.36'/%3E%3Ccircle cx='480' cy='265' r='1.1' opacity='0.47'/%3E%3Ccircle cx='481' cy='553' r='1.3' opacity='0.64'/%3E%3Ccircle cx='154' cy='237' r='1.1' opacity='0.87'/%3E%3Ccircle cx='535' cy='399' r='1.2' opacity='0.75'/%3E%3Ccircle cx='65' cy='163' r='1.3' opacity='0.70'/%3E%3Ccircle cx='308' cy='31' r='1.3' opacity='0.51'/%3E%3Ccircle cx='396' cy='437' r='0.9' opacity='0.83'/%3E%3Ccircle cx='455' cy='137' r='1.4' opacity='0.41'/%3E%3Ccircle cx='139' cy='506' r='0.7' opacity='0.93'/%3E%3Ccircle cx='446' cy='308' r='0.9' opacity='0.85'/%3E%3Ccircle cx='587' cy='359' r='1.0' opacity='0.59'/%3E%3Ccircle cx='237' cy='344' r='1.2' opacity='0.91'/%3E%3Ccircle cx='286' cy='167' r='1.2' opacity='0.55'/%3E%3Ccircle cx='554' cy='585' r='1.1' opacity='0.78'/%3E%3Ccircle cx='216' cy='587' r='0.8' opacity='0.42'/%3E%3Ccircle cx='493' cy='495' r='0.6' opacity='0.83'/%3E%3Ccircle cx='420' cy='154' r='0.5' opacity='0.61'/%3E%3Ccircle cx='425' cy='121' r='0.5' opacity='0.72'/%3E%3Ccircle cx='46' cy='386' r='1.2' opacity='0.55'/%3E%3Ccircle cx='285' cy='517' r='0.7' opacity='0.37'/%3E%3Ccircle cx='7' cy='78' r='0.6' opacity='0.67'/%3E%3Ccircle cx='202' cy='417' r='0.8' opacity='0.51'/%3E%3Ccircle cx='43' cy='347' r='0.8' opacity='0.93'/%3E%3Ccircle cx='386' cy='385' r='1.0' opacity='0.66'/%3E%3Ccircle cx='572' cy='105' r='1.1' opacity='0.91'/%3E%3Ccircle cx='519' cy='277' r='0.9' opacity='0.78'/%3E%3Ccircle cx='243' cy='308' r='0.9' opacity='0.50'/%3E%3Ccircle cx='310' cy='561' r='0.8' opacity='0.82'/%3E%3Ccircle cx='593' cy='322' r='0.5' opacity='0.72'/%3E%3Ccircle cx='136' cy='61' r='1.1' opacity='0.55'/%3E%3Ccircle cx='361' cy='361' r='1.1' opacity='0.52'/%3E%3Ccircle cx='501' cy='22' r='1.1' opacity='0.92'/%3E%3Ccircle cx='21' cy='378' r='0.8' opacity='0.62'/%3E%3Ccircle cx='327' cy='181' r='0.9' opacity='0.54'/%3E%3Ccircle cx='378' cy='270' r='0.8' opacity='0.58'/%3E%3Ccircle cx='27' cy='582' r='1.2' opacity='0.43'/%3E%3Ccircle cx='512' cy='227' r='1.2' opacity='0.51'/%3E%3Ccircle cx='335' cy='191' r='1.2' opacity='0.74'/%3E%3Ccircle cx='99' cy='104' r='1.1' opacity='0.92'/%3E%3Ccircle cx='229' cy='448' r='1.3' opacity='0.93'/%3E%3Ccircle cx='81' cy='344' r='1.2' opacity='0.48'/%3E%3Ccircle cx='582' cy='461' r='0.8' opacity='0.82'/%3E%3Ccircle cx='34' cy='542' r='1.5' opacity='0.54'/%3E%3Ccircle cx='588' cy='187' r='1.4' opacity='0.55'/%3E%3Ccircle cx='87' cy='353' r='1.1' opacity='0.60'/%3E%3Ccircle cx='530' cy='277' r='1.0' opacity='0.73'/%3E%3Ccircle cx='297' cy='429' r='1.1' opacity='0.37'/%3E%3Ccircle cx='423' cy='159' r='0.7' opacity='0.64'/%3E%3Ccircle cx='522' cy='444' r='1.1' opacity='0.94'/%3E%3Ccircle cx='227' cy='33' r='1.2' opacity='0.85'/%3E%3Ccircle cx='531' cy='295' r='1.0' opacity='0.88'/%3E%3Ccircle cx='69' cy='293' r='0.6' opacity='0.50'/%3E%3Ccircle cx='35' cy='524' r='1.4' opacity='0.89'/%3E%3Ccircle cx='440' cy='590' r='0.5' opacity='0.64'/%3E%3Ccircle cx='123' cy='175' r='1.0' opacity='0.49'/%3E%3Ccircle cx='20' cy='537' r='1.0' opacity='0.38'/%3E%3Ccircle cx='116' cy='349' r='0.6' opacity='0.93'/%3E%3Ccircle cx='553' cy='488' r='1.3' opacity='0.39'/%3E%3Ccircle cx='226' cy='202' r='0.6' opacity='0.88'/%3E%3Ccircle cx='122' cy='175' r='0.7' opacity='0.51'/%3E%3Ccircle cx='131' cy='7' r='1.0' opacity='0.69'/%3E%3Ccircle cx='409' cy='51' r='1.3' opacity='0.50'/%3E%3Ccircle cx='539' cy='532' r='0.9' opacity='0.63'/%3E%3Ccircle cx='1' cy='56' r='1.3' opacity='0.38'/%3E%3Ccircle cx='51' cy='70' r='1.0' opacity='0.37'/%3E%3Ccircle cx='88' cy='527' r='1.0' opacity='0.54'/%3E%3Ccircle cx='322' cy='73' r='0.9' opacity='0.74'/%3E%3Ccircle cx='600' cy='311' r='0.9' opacity='0.46'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='840' height='840' fill='%23FFF1C4'%3E%3Ccircle cx='637' cy='261' r='1.7' opacity='0.83'/%3E%3Ccircle cx='757' cy='667' r='1.8' opacity='0.37'/%3E%3Ccircle cx='476' cy='794' r='1.8' opacity='0.74'/%3E%3Ccircle cx='160' cy='115' r='1.3' opacity='0.87'/%3E%3Ccircle cx='389' cy='556' r='1.1' opacity='0.50'/%3E%3Ccircle cx='748' cy='221' r='1.4' opacity='0.46'/%3E%3Ccircle cx='784' cy='398' r='1.1' opacity='0.83'/%3E%3Ccircle cx='142' cy='632' r='1.6' opacity='0.43'/%3E%3Ccircle cx='1' cy='5' r='1.2' opacity='0.48'/%3E%3Ccircle cx='169' cy='170' r='1.3' opacity='0.93'/%3E%3Ccircle cx='552' cy='694' r='1.6' opacity='0.46'/%3E%3Ccircle cx='707' cy='201' r='1.9' opacity='0.89'/%3E%3Ccircle cx='305' cy='22' r='1.3' opacity='0.45'/%3E%3Ccircle cx='149' cy='270' r='1.1' opacity='0.53'/%3E%3Ccircle cx='617' cy='600' r='1.0' opacity='0.76'/%3E%3Ccircle cx='346' cy='67' r='1.3' opacity='0.84'/%3E%3Ccircle cx='492' cy='713' r='1.3' opacity='0.64'/%3E%3Ccircle cx='721' cy='180' r='1.1' opacity='0.94'/%3E%3Ccircle cx='23' cy='767' r='1.3' opacity='0.59'/%3E%3Ccircle cx='562' cy='806' r='1.4' opacity='0.58'/%3E%3Ccircle cx='9' cy='463' r='1.0' opacity='0.46'/%3E%3Ccircle cx='201' cy='121' r='1.7' opacity='0.91'/%3E%3C/svg%3E");
}

/* La estrella de los Reyes, sobre el bombo. */
.sorteo--nino .sorteo__cielo::after {
    content: "";
    position: absolute;
    top: clamp(1.25rem, 3vw, 2.5rem);
    right: clamp(11rem, 21vw, 19rem);
    width: clamp(3rem, 5vw, 4.75rem);
    aspect-ratio: 1;
    background: linear-gradient(135deg, #FFF8DC, var(--oro));
    clip-path: polygon(50% 0, 55.5% 44.5%, 100% 50%, 55.5% 55.5%, 50% 100%, 44.5% 55.5%, 0 50%, 44.5% 44.5%);
}

/* El sorteo general, sin temporada: las líneas entrelazadas de los billetes y, detrás del bombo, su roseta. */
.sorteo--otro .sorteo__cielo::before {
    content: "";
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--marca-detalle) 16%, transparent);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='96' fill='none' stroke='%23000' stroke-width='.8'%3E%3Cpath d='M0 48c24-48 72-48 96 0s72 48 96 0'/%3E%3Cpath d='M0 48c24 48 72 48 96 0s72-48 96 0'/%3E%3Cpath d='M0 24c24-24 72-24 96 0s72 24 96 0'/%3E%3Cpath d='M0 72c24 24 72 24 96 0s72-24 96 0'/%3E%3C/svg%3E");
}

.sorteo--otro .sorteo__cielo::after {
    content: "";
    position: absolute;
    top: 50%;
    right: clamp(-5rem, -3vw, -1rem);
    width: clamp(20rem, 38vw, 34rem);
    aspect-ratio: 1;
    border-radius: 50%;
    background: repeating-conic-gradient(color-mix(in srgb, var(--marca-detalle) 18%, transparent) 0 2deg, transparent 2deg 7deg);
    mask: radial-gradient(circle, transparent 26%, #000 27%, #000 68%, transparent 70%);
    transform: translateY(-50%);
}

/* Ya celebrado, sin bombo: sin su roseta, que se quedaría sola. */
.sorteo--celebrado .sorteo__cielo::after {
    display: none;
}

/* La guirnalda de Navidad, arriba: un cable con sus bombillas; las de en medio parpadean. */
.sorteo__luces {
    position: absolute;
    inset: 0 0 auto;
    z-index: -1;
    height: 40px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40'%3E%3Cpath d='M0 6Q60 30 120 6' fill='none' stroke='%23000' stroke-opacity='.5' stroke-width='1.4'/%3E%3Ccircle cx='20' cy='19' r='9' fill='%23FFD27A' opacity='.24'/%3E%3Cellipse cx='20' cy='19' rx='3.1' ry='4.4' fill='%23FFE8B0'/%3E%3Ccircle cx='100' cy='19' r='9' fill='%23FFD27A' opacity='.24'/%3E%3Cellipse cx='100' cy='19' rx='3.1' ry='4.4' fill='%23FFE8B0'/%3E%3C/svg%3E") repeat-x;
    pointer-events: none;
}

.sorteo__luces::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40'%3E%3Ccircle cx='60' cy='24' r='10' fill='%23FFD27A' opacity='.3'/%3E%3Cellipse cx='60' cy='24' rx='3.1' ry='4.4' fill='%23FFF2CC'/%3E%3C/svg%3E") repeat-x;
}

.sorteo__cabecera {
    grid-area: cabecera;
    min-width: 0;
}

.sorteo__rotulo {
    margin: 0 0 var(--espacio-2);
    color: var(--oro);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.sorteo__cabecera h2 {
    margin: 0;
    padding-bottom: 0.08em;
    background: linear-gradient(180deg, #FFF8E2 25%, var(--oro) 95%);
    background-clip: text;
    color: transparent;
    font-family: var(--letra-sorteo);
    font-size: clamp(3.25rem, 6.4vw, 6.25rem);
    font-weight: 600;
    font-feature-settings: "lnum";
    line-height: 0.98;
    letter-spacing: -0.01em;
}

.sorteo__fecha {
    margin: var(--espacio-2) 0 0;
    color: var(--crema-suave);
    font-size: 1.0625rem;
}

/* Un nombre largo: más pequeño, y aunque sea una sola palabra no se sale. */
.sorteo__cabecera--larga h2 {
    font-size: clamp(2.5rem, 4.2vw, 4rem);
    line-height: 1.04;
    overflow-wrap: anywhere;
}

/* Cuánto falta, en grande. */
.sorteo__cuenta {
    display: flex;
    align-items: baseline;
    gap: var(--espacio-2);
    margin: var(--espacio-3) 0 0;
    color: var(--crema);
    font-size: 1.0625rem;
}

.sorteo__cuenta strong {
    color: var(--oro-claro);
    font-family: var(--letra-sorteo);
    font-size: 3.25rem;
    font-weight: 600;
    font-feature-settings: "lnum";
    line-height: 1;
}

.sorteo__cuenta--ya {
    color: var(--oro-claro);
    font-family: var(--letra-sorteo);
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.1;
}

/* Abajo, separado por un hilo: el precio, lo que dice el sorteo y comprar. */
.sorteo__venta {
    grid-area: venta;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--espacio-4) var(--espacio-8);
    margin-top: var(--espacio-2);
    padding-top: var(--espacio-5);
    border-top: 1px solid rgb(255 246 227 / 0.2);
}

.sorteo__precio {
    display: grid;
    margin: 0;
    line-height: 1.2;
}

.sorteo__precio strong {
    color: var(--crema);
    font-family: var(--fuente-display);
    font-size: clamp(1.625rem, 2.2vw, 2.125rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

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

.sorteo__condiciones {
    display: grid;
    gap: var(--espacio-1);
    min-width: 0;
    font-size: var(--texto-base);
    line-height: 1.45;
}

.sorteo__condiciones p {
    margin: 0;
}

.sorteo__fase {
    color: var(--crema);
    font-weight: 600;
}

.sorteo__fase--sobran {
    color: var(--oro-claro);
}

/* Las normas del sorteo (migración 0230): el máximo por persona y el aviso de la Junta, a la vista. */
.sorteo__normas {
    display: grid;
    gap: var(--espacio-1);
    color: var(--crema-suave);
}

/* Aún no se vende, ya acabó o ya tiene los suyos. */
.sorteo__estado {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    margin: 0;
    color: var(--oro-claro);
    font-weight: 600;
}

.sorteo__estado .icono {
    flex: none;
    width: 20px;
    height: 20px;
}

/* Cuántos, con − y +, y el botón con el total, en oro; debajo, hasta cuántos y dónde se paga. */
.sorteo__comprar {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    justify-content: end;
    gap: var(--espacio-2) var(--espacio-3);
}

.sorteo__comprar .selector-cantidad {
    border-color: rgb(255 246 227 / 0.35);
    background: rgb(0 0 0 / 0.22);
    color: var(--crema);
}

.sorteo__comprar .selector-cantidad__boton {
    color: var(--crema);
}

.sorteo__comprar .selector-cantidad__boton:disabled {
    color: rgb(255 246 227 / 0.35);
}

.sorteo__comprar .boton,
.sorteo__comprar .boton:hover {
    min-height: 46px;
    border: 0;
    background: linear-gradient(180deg, #FBE7AC, #E2B84F);
    box-shadow: 0 10px 26px rgb(0 0 0 / 0.32);
    color: #2B1C05;
    font-weight: 700;
}

.sorteo__comprar .boton:hover {
    filter: brightness(1.06);
}

.sorteo__comprar .ayuda-campo {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--crema-suave);
    text-align: right;
}

/* ¿Qué número? (migración 0358): cada uno con lo que queda, sobre la escena; el elegido, en oro. */
.sorteo__elegir {
    grid-column: 1 / -1;
    margin: 0;
    padding: 0;
    border: 0;
}

.sorteo__elegir legend {
    margin-bottom: var(--espacio-1);
    color: var(--crema-suave);
    font-size: var(--texto-etiqueta);
    text-align: right;
}

.sorteo__numeros-elegir {
    flex-wrap: wrap;
    justify-content: flex-end;
    border-color: rgb(255 246 227 / 0.35);
    background: rgb(0 0 0 / 0.22);
}

.sorteo__numeros-elegir button {
    display: grid;
    gap: 0;
    color: var(--crema);
    line-height: 1.2;
}

.sorteo__numeros-elegir button strong {
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.06em;
}

.sorteo__numeros-elegir button small {
    color: var(--crema-suave);
    font-size: var(--texto-etiqueta);
}

.sorteo__numeros-elegir button[aria-pressed="true"] {
    background: linear-gradient(180deg, #FBE7AC, #E2B84F);
    color: #2B1C05;
}

.sorteo__numeros-elegir button[aria-pressed="true"] small {
    color: #4A3410;
}

.sorteo__numeros-elegir button:disabled {
    opacity: 0.55;
}

/* El tiempo para terminar la compra, sobre la escena. */
.sorteo__comprar .plazo-compra {
    grid-column: 1 / -1;
    margin: 0;
    border-color: rgb(255 246 227 / 0.28);
    background: rgb(0 0 0 / 0.28);
    color: var(--crema);
}

.sorteo__comprar .plazo-compra > .icono {
    color: var(--oro);
}

/* Ya celebrado: la escena se recoge, sin bombo; lo que importa son sus décimos. */
.sorteo--celebrado .sorteo__escena {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "cabecera"
        "numeros";
    padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 4vw, 3.5rem);
    background: linear-gradient(165deg, color-mix(in srgb, var(--escena-arriba) 72%, #24242C), color-mix(in srgb, var(--escena-abajo) 72%, #101014));
}

.sorteo--celebrado .sorteo__cabecera h2 {
    font-size: clamp(2.25rem, 3.6vw, 3.25rem);
}

.sorteo--celebrado .sorteo__luces {
    display: none;
}

@media (max-width: 1023px) {
    .sorteo__venta {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .sorteo__comprar {
        grid-column: 1 / -1;
        justify-content: stretch;
    }

    .sorteo__comprar .boton {
        justify-content: center;
    }

    .sorteo__comprar .ayuda-campo {
        text-align: left;
    }
}

@media (max-width: 767px) {
    .sorteo__escena {
        grid-template-columns: minmax(0, 1fr) clamp(5.5rem, 28vw, 8rem);
        grid-template-areas:
            "cabecera bombo"
            "numeros numeros"
            "venta venta";
        gap: var(--espacio-5) var(--espacio-3);
        border-radius: 20px;
    }

    .sorteo__rotulo {
        font-size: 0.6875rem;
        letter-spacing: 0.12em;
    }

    .sorteo__cabecera h2 {
        font-size: clamp(2.75rem, 13vw, 3.75rem);
    }

    .sorteo__fecha,
    .sorteo__cuenta {
        font-size: var(--texto-base);
    }

    .sorteo__cuenta strong {
        font-size: 2.5rem;
    }

    .sorteo__venta {
        grid-template-columns: minmax(0, 1fr);
    }

    .sorteo__comprar {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .sorteo--nino .sorteo__cielo::after {
        right: 1.25rem;
        top: 0.5rem;
        width: 2.5rem;
    }
}
/* #endregion */

/* #region 2. El bombo y sus bolas */
.sorteo__escena > .bombo {
    grid-area: bombo;
    align-self: center;
    justify-self: center;
    width: 100%;
    filter: drop-shadow(0 18px 30px rgb(0 0 0 / 0.45));
}

/* Los meridianos de la jaula: quietos, ya parecen una esfera; al moverse, gira. */
.bombo__meridiano {
    transform: scaleX(calc(1 - var(--orden) * 0.33));
    transform-box: fill-box;
    transform-origin: center;
}

.bombo__bolas {
    transform-box: view-box;
    transform-origin: 150px 130px;
}

/* Los números que juega la asociación: cada cifra, en su bola de madera. */
.sorteo__numeros {
    --bola: clamp(2.5rem, 3.3vw, 3.25rem);
    grid-area: numeros;
    min-width: 0;
}

/* Cuantos más números juega la asociación, más pequeñas sus bolas (mi-loteria.js). */
.sorteo__numeros--varios {
    --bola: clamp(2.125rem, 2.5vw, 2.5rem);
}

.sorteo__numeros--muchos {
    --bola: clamp(1.625rem, 1.9vw, 1.875rem);
}

.sorteo__numeros h3 {
    margin: 0 0 var(--espacio-3);
    color: var(--crema-suave);
    font-family: var(--fuente-ui);
    font-size: var(--texto-etiqueta);
    font-weight: 600;
}

.sorteo__numeros ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-4) var(--espacio-6);
    margin: 0;
    padding: 0;
    list-style: none;
}

.sorteo__numeros li {
    display: flex;
    gap: 0.3125rem;
}

.bola {
    display: grid;
    place-items: center;
    width: var(--bola);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 28%, #FFF9EA 0, #F3DFB3 26%, #DDB877 62%, #9B7238 100%);
    box-shadow: inset -3px -4px 8px rgb(70 40 8 / 0.35), inset 2px 2px 4px rgb(255 255 255 / 0.5), 0 6px 14px rgb(0 0 0 / 0.42);
    color: #3B2508;
    font-family: var(--fuente-display);
    font-size: calc(var(--bola) * 0.46);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 0 rgb(255 255 255 / 0.45);
}

@media (prefers-reduced-motion: no-preference) {
    .sorteo--navidad .sorteo__cielo {
        animation: nieve 60s linear infinite;
    }

    .sorteo--nino .sorteo__cielo {
        animation: estrellas 5s ease-in-out infinite alternate;
    }

    .sorteo__luces::after {
        animation: luces 2.6s ease-in-out infinite alternate;
    }

    .bombo__meridiano {
        animation: bombo-gira 9s ease-in-out infinite;
        animation-delay: calc(var(--orden) * -1.5s);
    }

    .bombo__bolas {
        animation: bombo-rueda 4.5s ease-in-out infinite alternate;
    }

    .bombo__bolas--detras {
        animation-duration: 3.4s;
        animation-direction: alternate-reverse;
    }

    /* Las bolas caen, una detrás de otra, como las del bombo. */
    .bola {
        animation: bola-cae 0.65s cubic-bezier(0.3, 1.5, 0.5, 1) both;
        animation-delay: calc(var(--orden) * 40ms);
    }
}

@keyframes nieve {
    to {
        background-position: 40px 640px, -60px 900px;
    }
}

@keyframes estrellas {
    from {
        opacity: 0.65;
    }

    to {
        opacity: 1;
    }
}

@keyframes luces {
    from {
        opacity: 0.25;
    }

    to {
        opacity: 1;
    }
}

@keyframes bombo-gira {
    0%,
    100% {
        transform: scaleX(1);
    }

    50% {
        transform: scaleX(-1);
    }
}

@keyframes bombo-rueda {
    from {
        transform: rotate(-9deg);
    }

    to {
        transform: rotate(11deg);
    }
}

@keyframes bola-cae {
    from {
        opacity: 0;
        transform: translateY(-2.5rem) rotate(-120deg);
    }

    to {
        opacity: 1;
        transform: none;
    }
}
/* #endregion */

/* #region 4. Lo que queda debajo: las reservas y sus décimos */
.sorteo__decimos h3 {
    margin: 0 0 var(--espacio-3);
    font-family: var(--fuente-display);
    font-size: 1.25rem;
    font-weight: 650;
    letter-spacing: -0.02em;
}

/* Cada reserva sin pagar, en una línea: cuántos y cuánto, pagarla y quitarla. */
.sorteo__reservas {
    display: grid;
    gap: var(--espacio-2);
    margin: var(--espacio-3) 0 0;
    padding: 0;
    list-style: none;
}

.sorteo__reserva {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-2) var(--espacio-4);
    padding-block: var(--espacio-3);
    border-top: 1px solid var(--rs-borde-sutil);
}

.sorteo__reserva p {
    flex: 1 1 14rem;
    margin: 0;
    font-weight: 600;
}

/* El número que se dice en la sede, en grande (revisión de huecos del 31 oct 2026). */
.sorteo__reserva p.sorteo__reserva-numero {
    flex: 0 0 auto;
    color: var(--rs-texto-secundario);
    font-weight: 400;
}

.sorteo__reserva-numero strong {
    color: var(--rs-texto);
    font-size: var(--texto-grande);
    font-variant-numeric: tabular-nums;
}

.sorteo__quitar {
    color: var(--rs-texto-secundario);
}
/* #endregion */

/* #region 5. Cada décimo, de papel de verdad */
.decimos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
    gap: var(--espacio-5);
    margin: var(--espacio-4) 0 0;
    padding: 0;
    list-style: none;
}

/* La sombra sigue la forma del papel, con sus muescas. */
.decimo {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-2);
    filter: drop-shadow(0 10px 20px rgb(20 12 4 / 0.2));
}

/*
 * El billete: papel crema, sea cual sea el tema, con su fondo de líneas entrelazadas (la «guilloche» de los billetes de
 * verdad), un sello de agua y, a la derecha, el troquel con sus dos muescas.
 */
.decimo__billete {
    --ancho-resguardo: 6.5rem;
    position: relative;
    display: grid;
    flex: 1;
    grid-template-columns: minmax(0, 1fr) var(--ancho-resguardo);
    min-height: 11.5rem;
    border-radius: 14px;
    background-color: var(--papel);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='48' fill='none' stroke='%23A8894F' stroke-opacity='.3' stroke-width='.7'%3E%3Cpath d='M0 24c12-24 36-24 48 0s36 24 48 0'/%3E%3Cpath d='M0 24c12 24 36 24 48 0s36-24 48 0'/%3E%3Cpath d='M0 12c12-12 36-12 48 0s36 12 48 0'/%3E%3Cpath d='M0 36c12 12 36 12 48 0s36-12 48 0'/%3E%3C/svg%3E");
    color: var(--papel-tinta);
    mask:
        radial-gradient(circle 9px at calc(100% - var(--ancho-resguardo)) 0, transparent 98%, #000 100%) top / 100% 51% no-repeat,
        radial-gradient(circle 9px at calc(100% - var(--ancho-resguardo)) 100%, transparent 98%, #000 100%) bottom / 100% 51% no-repeat;
}

.decimo__cuerpo {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--espacio-2);
    min-width: 0;
    padding: var(--espacio-4);
}

/* El sello de agua, detrás del número. */
.decimo__cuerpo::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 0.5rem;
    width: 8rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: repeating-conic-gradient(rgb(168 137 79 / 0.2) 0 3deg, transparent 3deg 9deg);
    mask: radial-gradient(circle, transparent 28%, #000 29%);
    transform: translateY(-50%);
    pointer-events: none;
}

.decimo__sorteo {
    position: relative;
    display: grid;
    margin: 0;
    line-height: 1.2;
}

.decimo__sorteo strong {
    color: var(--papel-color);
    font-family: var(--letra-sorteo);
    font-size: 1.375rem;
    font-weight: 700;
    font-feature-settings: "lnum";
}

.decimo__sorteo span {
    color: #6B5426;
    font-size: var(--texto-pequeno);
}

.decimo__numero {
    position: relative;
    margin-block: auto;
    color: var(--papel-color);
    font-family: var(--fuente-display);
    font-size: clamp(2.25rem, 3vw, 2.75rem);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.1em;
    line-height: 1.1;
}

/* Hasta que se recoge: cinco huecos para las cinco cifras. */
.decimo__numero--pendiente {
    display: grid;
    gap: var(--espacio-1);
    letter-spacing: normal;
}

.decimo__huecos {
    display: flex;
    gap: 0.3125rem;
}

.decimo__huecos i {
    width: 1.875rem;
    aspect-ratio: 1;
    border: 1.5px dashed rgb(58 42 16 / 0.4);
    border-radius: 50%;
}

.decimo__numero--pendiente small {
    color: #6B5426;
    font-family: var(--fuente-ui);
    font-size: var(--texto-pequeno);
    font-weight: 600;
}

/* Cómo está: un sello de tinta, un poco torcido. */
.decimo__estado {
    position: relative;
    margin-top: auto;
    padding: 2px var(--espacio-2);
    border: 1.5px solid currentColor;
    border-radius: 5px;
    background: rgb(248 240 220 / 0.7);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transform: rotate(-2deg);
    transform-origin: left center;
}

.decimo__estado--pagar {
    color: #A3261B;
}

.decimo__estado--recoger {
    color: #805400;
}

.decimo__estado--recogido {
    color: #136C40;
}

/* El resguardo, tras el troquel: serie, fracción y precio. */
.decimo__resguardo {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-2);
    padding: var(--espacio-4) var(--espacio-3);
    border-left: 2px dashed rgb(58 42 16 / 0.32);
    background: rgb(168 137 79 / 0.08);
}

.decimo__dato {
    display: grid;
    line-height: 1.15;
}

.decimo__dato small {
    color: #6B5426;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.decimo__dato b {
    font-family: var(--fuente-display);
    font-size: 1.125rem;
    font-variant-numeric: tabular-nums;
}

.decimo__precio {
    margin-top: auto;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

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

/* Premiado: en oro, bien a la vista. */
.decimo--premiado {
    filter: drop-shadow(0 0 1px #C9971A) drop-shadow(0 0 14px rgb(212 160 23 / 0.75));
}

.decimo--premiado .decimo__billete {
    background-color: #FBE7AC;
}

.decimo__resultado--premio {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    color: var(--rs-exito-texto);
    font-size: var(--texto-base);
    font-weight: 800;
}

.decimo__resultado--premio .icono {
    flex: none;
    width: 18px;
    height: 18px;
}
/* #endregion */

/* #region 6. Fuera de temporada */
.loteria-cerrada {
    display: grid;
    justify-items: center;
    gap: var(--espacio-2);
    padding-block: clamp(2rem, 6vw, 4rem);
    text-align: center;
}

.loteria-cerrada .bombo {
    width: 10rem;
    margin-bottom: var(--espacio-3);
    filter: drop-shadow(0 12px 22px rgb(20 12 4 / 0.25));
}

.loteria-cerrada strong {
    font-family: var(--fuente-display);
    font-size: 1.5rem;
    font-weight: 650;
    letter-spacing: -0.02em;
}

.loteria-cerrada span {
    color: var(--rs-texto-secundario);
}
/* #endregion */

/* #region 3. Mis talonarios de rifa */
/* Los que vende el socio (migración 0177): sus números en grande, lo entregado con su barra y la rifa. */
.mis-talonarios {
    display: grid;
    gap: var(--espacio-3);
    margin-top: var(--espacio-10);
}

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

.mis-talonarios > h2 {
    margin: 0;
    font-size: clamp(1.25rem, 1.6vw, 1.6rem);
    font-weight: 650;
    letter-spacing: -0.025em;
}

.talonario {
    display: grid;
    gap: var(--espacio-3);
    padding-top: var(--espacio-4);
    border-top: 1px solid var(--rs-borde-sutil);
}

.talonario__cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-3);
}

.talonario__titulos {
    display: grid;
    flex: 1 1 14rem;
    min-width: 0;
}

.talonario__titulos h3 {
    margin: 0;
    font-size: var(--texto-grande);
    font-weight: 600;
}

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

/* Del 51 al 75: en grande, como el número de un décimo. */
.talonario__numeros {
    flex: none;
    font-family: var(--fuente-display);
    font-size: clamp(1.35rem, 1.9vw, 2rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.talonario__cuenta {
    display: grid;
    gap: var(--espacio-2);
}

.talonario__cuenta p {
    margin: 0;
}

.talonario__cuenta--al-dia p {
    color: var(--rs-exito-texto);
}

.talonario__barra {
    display: block;
    height: 8px;
    border-radius: var(--radio-pildora);
    background: var(--rs-superficie-3);
    overflow: hidden;
}

.talonario__barra > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--marca-acento);
}

.talonario__datos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-1) var(--espacio-5);
    margin: 0;
    padding: 0;
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
    list-style: none;
}
/* #endregion */