/*
 * «Competiciones» del socio (27 oct 2026, docs/competiciones.md; rediseño del 6 nov 2026): una fila por competición, en
 * frases: qué es, cómo va y lo siguiente; para apuntarse, su fila y una ventana; los días de competición, una banda. Con
 * `?c=<id>` o `?programa=<id>`, el detalle en una sola pantalla: sigue siendo compacto (Rafa, 27 oct 2026: «no quiero
 * estar bajando con el dedo una hora»), con su nombre en la banda, el marcador de su próxima partida y los partidos como
 * en un periódico deportivo.
 *
 *  1. La página y sus títulos
 *  2. El marcador: su próximo partido
 *  3. Una fila por competición
 *  4. Su puesto, en grande (dentro de la competición)
 *  5. Para apuntarse: su ventana
 *  6. Los días de competición
 *  7. Lo que se dice en líneas finas
 *  8. El detalle y el programa: la cabecera y sus partes
 *  9. Los partidos en una línea
 * 10. La clasificación, el balance y el cuadro
 * 11. Quién juega, las fotos para el museo y la ficha
 * 12. El detalle a dos columnas
 */

/* #region 1. La página y sus títulos */
#portada:not([hidden]) {
    display: grid;
    gap: clamp(40px, 4vw, 64px);
}

.competiciones-bloque {
    min-width: 0;
    margin: 0;
}

.competiciones-bloque > h2 {
    margin: 0 0 var(--espacio-4);
    font-family: var(--fuente-display);
    font-size: clamp(1.5rem, 2vw, 2.1rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.05;
}

/* Lo que está en directo: el punto verde. */
.competicion-directo {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-2);
    color: var(--rs-exito-texto);
    font-family: var(--fuente-ui);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
}

.competicion-directo::before {
    content: "";
    flex: none;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--rs-exito);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--rs-exito) 24%, transparent);
}

/* Dentro de una competición, fuera el título: queda «Volver» y la ayuda, en una línea. */
.competiciones--dentro {
    position: relative;
}

.competiciones--dentro .cabecera-pagina__textos {
    display: none;
}

.competiciones--dentro > .cabecera-pagina {
    position: absolute;
    top: var(--espacio-6);
    right: 0;
}
/* #endregion */

/* #region 2. El marcador: su próximo partido */
/* Un objeto: es igual en claro y en oscuro, como el marcador de un campo. */
.competicion-marcador {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "de de"
        "cuando contra";
    align-items: end;
    gap: var(--espacio-3) clamp(24px, 4vw, 64px);
    padding: clamp(22px, 2.6vw, 38px) clamp(22px, 3vw, 44px);
    overflow: hidden;
    border-radius: var(--radio-xl);
    background:
        radial-gradient(70rem 22rem at 0% 0%, rgb(255 200 74 / 0.1), transparent 60%),
        #0E1116;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08);
    color: #FFFFFF;
    text-decoration: none;
    transition: transform 240ms var(--curva);
}

a.competicion-marcador:hover {
    color: #FFFFFF;
    transform: translateY(-3px);
}

a.competicion-marcador:focus-visible {
    outline: 2px solid var(--marca-acento);
    outline-offset: 3px;
}

/* Su deporte, en grande y apagado, al fondo. */
.competicion-marcador__icono {
    position: absolute;
    top: 50%;
    right: clamp(12px, 3vw, 48px);
    z-index: -1;
    color: rgb(255 255 255 / 0.06);
    transform: translateY(-50%) rotate(-8deg);
}

.competicion-marcador__icono .icono {
    display: block;
    width: clamp(130px, 15vw, 230px);
    height: clamp(130px, 15vw, 230px);
    stroke-width: 1;
}

.competicion-marcador__de {
    grid-area: de;
    color: rgb(255 255 255 / 0.78);
    font-size: 15px;
    font-weight: 600;
}

.competicion-marcador__cuando {
    grid-area: cuando;
    display: grid;
    gap: 2px;
}

.competicion-marcador__cuando small {
    color: #FFFFFF;
    font-size: clamp(1rem, 1.3vw, 1.3rem);
    font-weight: 600;
}

.competicion-marcador__cuando small::first-letter {
    text-transform: uppercase;
}

.competicion-marcador__cuando strong {
    color: #FFC84A;
    font-family: var(--fuente-display);
    font-size: clamp(3.6rem, 7vw, 7rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
    line-height: 0.95;
    text-shadow: 0 0 30px rgb(255 200 74 / 0.32);
}

.competicion-marcador--hoy .competicion-marcador__cuando small {
    color: #FFC84A;
}

.competicion-marcador__contra {
    grid-area: contra;
    display: grid;
    gap: var(--espacio-1);
    min-width: 0;
    padding-bottom: 6px;
}

.competicion-marcador__contra strong {
    font-family: var(--fuente-display);
    font-size: clamp(1.35rem, 2.6vw, 2.6rem);
    font-weight: 650;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.competicion-marcador__contra small {
    color: rgb(255 255 255 / 0.78);
    font-size: 15px;
}

@media (max-width: 767px) {
    .competicion-marcador {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "de"
            "cuando"
            "contra";
    }
}
/* #endregion */

/* #region 3. Una fila por competición: qué es, cómo va y lo siguiente */
.competicion-renglones {
    display: grid;
    border-bottom: 1px solid var(--rs-borde-sutil);
}

.competicion-renglones__cabeza,
.competicion-renglon {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.25fr) 4.5rem;
    align-items: center;
    gap: var(--espacio-3) clamp(1rem, 2vw, 1.75rem);
}

.competicion-renglones__cabeza {
    padding-block: 0.625rem;
    color: var(--rs-texto-tenue);
    font-size: var(--texto-etiqueta);
    font-weight: 600;
}

.competicion-renglon {
    position: relative;
    padding-block: 1.375rem;
    border-top: 1px solid var(--rs-borde-sutil);
}

/* Toda la línea lleva a la competición; al pasar por encima, se ilumina un poco más allá de sus bordes. */
.competicion-renglon::before {
    content: "";
    position: absolute;
    inset: 0 calc(-1 * var(--espacio-3));
    z-index: -1;
    border-radius: var(--radio-md);
    background: color-mix(in srgb, var(--marca-acento) 7%, transparent);
    opacity: 0;
    transition: opacity var(--duracion-hover) var(--curva);
}

.competicion-renglon:has(h3 a:hover)::before,
.competicion-renglon:has(h3 a:focus-visible)::before {
    opacity: 1;
}

.competicion-renglon h3 a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.competicion-renglon__que {
    display: flex;
    align-items: center;
    gap: var(--espacio-4);
    min-width: 0;
}

.competicion-renglon__icono {
    display: grid;
    flex: none;
    place-items: center;
    color: var(--marca-acento);
}

.competicion-renglon__icono .icono {
    width: 2.25rem;
    height: 2.25rem;
    stroke-width: 1.5;
}

.competicion-renglon__nombre {
    min-width: 0;
}

.competicion-renglon h3 {
    margin: 0;
    font-family: var(--fuente-display);
    font-size: 1.375rem;
    font-weight: 650;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.competicion-renglon h3 a {
    color: var(--rs-texto);
    text-decoration: none;
}

.competicion-renglon__nombre small,
.competicion-renglon__dato small {
    display: block;
    margin-top: 0.125rem;
    color: var(--rs-texto-secundario);
    font-size: 0.875rem;
    line-height: 1.35;
}

.competicion-renglon__nombre .competicion-renglon__premios {
    display: flex;
    align-items: flex-start;
    gap: var(--espacio-1);
    color: var(--rs-oro-texto, var(--rs-aviso-texto));
}

.competicion-renglon__premios .icono {
    flex: none;
    width: 14px;
    height: 18px;
}

.competicion-renglon__dato {
    min-width: 0;
}

.competicion-renglon__dato b {
    display: block;
    font-size: 1.125rem;
    font-weight: 650;
    line-height: 1.25;
}

/* En el ordenador lo dice la cabecera; en el móvil, cada dato lleva su rótulo. */
.competicion-renglon__etiqueta {
    display: none;
}

.competicion-renglon__titulo--hoy,
.competicion-renglon__titulo--oro {
    color: var(--rs-oro-texto, var(--rs-aviso-texto));
}

.competicion-renglon__titulo--bien {
    color: var(--rs-exito-texto);
}

.competicion-renglon__titulo--mal {
    color: var(--rs-peligro-texto);
}

.competicion-renglon__titulo--aviso,
.competicion-renglon__dato .competicion-renglon__detalle--aviso {
    color: var(--rs-aviso-texto);
}

.competicion-renglon__fin {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--espacio-1);
    color: var(--rs-texto-tenue);
}

.competicion-renglon__fin > .icono {
    flex: none;
    transition: transform var(--duracion-hover) var(--curva), color var(--duracion-hover) var(--curva);
}

.competicion-renglon:has(h3 a:hover) .competicion-renglon__fin > .icono {
    color: var(--marca-acento);
    transform: translateX(3px);
}

/* La papelera y «Apuntarse» quedan por encima del enlace de toda la línea. */
.competicion-renglon .competicion-tarjeta__borrar,
.competicion-renglon__apuntarse {
    position: relative;
    z-index: 1;
}

.competicion-renglon__apuntarse {
    grid-column: 3 / -1;
    justify-self: start;
}

@media (max-width: 767px) {
    .competicion-renglones__cabeza {
        display: none;
    }

    .competicion-renglon {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: var(--espacio-3);
        padding-block: var(--espacio-5);
    }

    .competicion-renglon__que {
        grid-column: 1 / -1;
    }

    .competicion-renglon__dato {
        grid-column: 1;
    }

    .competicion-renglon__fin {
        grid-column: 2;
        grid-row: 2 / span 2;
    }

    .competicion-renglon__etiqueta {
        display: block;
        margin-bottom: 0.125rem;
        color: var(--rs-texto-tenue);
        font-size: var(--texto-pequeno);
        font-weight: 600;
    }

    .competicion-renglon__apuntarse {
        grid-column: 1 / -1;
        justify-self: stretch;
        justify-content: center;
    }
}
/* #endregion */

/* #region 4. Su puesto, en grande (dentro de la competición) */
/* Su puesto, lo primero que se quiere saber. */
.competicion-cartel__puesto {
    display: flex;
    align-items: baseline;
    gap: var(--espacio-2);
    margin: 0;
    color: var(--rs-texto-secundario);
    font-size: 15px;
}

.competicion-cartel__puesto b {
    color: var(--tono-cartel);
    font-family: var(--fuente-display);
    font-size: clamp(3rem, 4.4vw, 4.4rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.05em;
    line-height: 0.95;
}

/* Borrarse: la papelera; a la derecha de su cabecera y, en el cartel, arriba a la derecha. */
.competicion-tarjeta__borrar {
    position: relative;
    z-index: 1;
    flex: none;
    color: var(--rs-texto-tenue);
}

.competicion-tarjeta__borrar:hover {
    color: var(--rs-peligro);
}

/* No entró o ya terminó: más apagado. */
.competicion--rechazada {
    opacity: 0.75;
}
/* #endregion */

/* #region 5. Para apuntarse: su ventana */
/* La ventana: a quién, compañeros, la firma y una nota. */
.competicion-ventana {
    width: min(42rem, 100vw - 32px);
    max-width: none;
}

.competicion__formulario {
    gap: var(--espacio-5);
}

.competicion__formulario .dialogo__cabecera h3 {
    flex: 1;
    margin: 0;
    font-family: var(--fuente-display);
    font-size: clamp(1.4rem, 2vw, 1.8rem);
    letter-spacing: -0.03em;
    line-height: 1.15;
}

.competicion__formulario fieldset {
    display: grid;
    gap: var(--espacio-2);
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.competicion__formulario legend {
    margin: 0 0 var(--espacio-2);
    padding: 0;
    font-weight: 600;
}

/* Cada persona de la familia, una ficha que se toca con el dedo; las que no pueden, apagadas y con el porqué. */
.competicion__personas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
    gap: var(--espacio-2);
}

.competicion__persona {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    min-height: 60px;
    padding: var(--espacio-2) var(--espacio-3);
    border: 1px solid var(--rs-borde);
    border-radius: var(--radio-md);
    cursor: pointer;
    transition: border-color var(--duracion-hover) var(--curva), background-color var(--duracion-hover) var(--curva);
}

.competicion__persona > input {
    flex: none;
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--marca-boton);
}

.competicion__persona > span {
    display: grid;
    min-width: 0;
}

.competicion__persona small {
    color: var(--rs-texto-secundario);
    font-size: 13px;
}

.competicion__persona:has(input:checked) {
    border-color: var(--marca-acento);
    background: color-mix(in srgb, var(--marca-acento) 10%, transparent);
}

.competicion__persona:has(input:focus-visible) {
    box-shadow: var(--anillo-foco);
}

.competicion__persona--no {
    border-style: dashed;
    cursor: default;
    opacity: 0.6;
}

.competicion__companeros .campo {
    margin: 0;
}

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

.competicion__firma p {
    margin: 0;
}

/* El recuadro blanco para el dedo. */
.competicion__firma canvas {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 1;
    border: 2px dashed var(--rs-borde-fuerte);
    border-radius: var(--radio-md);
    background: #FFFFFF;
    touch-action: none;
}

.competicion__firma .boton-enlace {
    justify-self: start;
}

.competicion__nota > summary {
    color: var(--rs-texto-secundario);
    cursor: pointer;
}

.competicion__nota textarea {
    width: 100%;
    margin-top: var(--espacio-2);
}

.competicion__formulario .aviso {
    margin: 0;
}

.competicion__acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-2) var(--espacio-4);
}

.competicion__acciones .texto-tenue {
    flex: 1 1 14rem;
    margin: 0;
}

@media (max-width: 767px) {
                .competicion__formulario .boton[data-boton-apuntar] {
        justify-content: center;
        width: 100%;
    }
}
/* #endregion */

/* #region 6. Los días de competición */
.competiciones-programas {
    display: grid;
    gap: var(--espacio-3);
}

.competicion-programa {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--espacio-3) clamp(16px, 2.4vw, 36px);
    padding: clamp(22px, 2.4vw, 34px) clamp(22px, 3vw, 40px);
    border-radius: var(--radio-xl);
    background: var(--rs-superficie-2);
    background: linear-gradient(105deg, oklch(from var(--marca-principal) 0.3 calc(c * 0.7) h), var(--rs-superficie-1));
    color: var(--rs-texto);
    text-decoration: none;
    transition: transform 240ms var(--curva);
}

:root[data-theme="light"] .competicion-programa {
    background: linear-gradient(105deg, oklch(from var(--marca-principal) 0.9 calc(c * 0.35) h), var(--rs-superficie-1));
}

.competicion-programa:hover {
    color: var(--rs-texto);
    transform: translateY(-3px);
}

.competicion-programa:focus-visible {
    outline: 2px solid var(--marca-acento);
    outline-offset: 3px;
}

:root .competicion-programa--directo {
    background: linear-gradient(105deg, color-mix(in oklab, var(--rs-exito) 24%, var(--rs-superficie-1)), color-mix(in oklab, var(--rs-exito) 6%, var(--rs-superficie-1)));
}

.competicion-programa > .icono {
    width: 24px;
    height: 24px;
    transition: transform var(--duracion-hover) var(--curva);
}

.competicion-programa:hover > .icono {
    transform: translateX(4px);
}

.competicion-programa__textos {
    display: grid;
    justify-items: start;
    gap: var(--espacio-1);
    min-width: 0;
}

.competicion-programa__textos strong {
    font-family: var(--fuente-display);
    font-size: clamp(1.5rem, 2.6vw, 2.6rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.08;
}

.competicion-programa__textos small {
    color: var(--rs-texto-secundario);
    font-size: 15px;
}

.competicion-programa__textos small::first-letter {
    text-transform: uppercase;
}

.competicion-programa__mias {
    color: var(--marca-acento);
    font-size: 15px;
    font-weight: 650;
    white-space: nowrap;
}

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

    .competicion-programa__mias {
        grid-row: 2;
        grid-column: 1;
    }

    .competicion-programa > .icono {
        grid-row: 1 / span 2;
        grid-column: 2;
    }
}
/* #endregion */

/* #region 7. Lo que se dice en líneas finas */
.competicion-fina {
    display: flex;
    align-items: flex-start;
    gap: var(--espacio-2);
    min-width: 0;
    margin: 0;
    color: var(--rs-texto-secundario);
    font-size: 14px;
    line-height: 1.35;
}

.competicion-fina > span {
    min-width: 0;
}

.competicion-fina > .icono {
    flex: none;
    width: 15px;
    height: 15px;
    margin-top: 2px;
    color: var(--rs-texto-tenue);
}

.competicion-fina strong,
.competicion-fina b {
    color: var(--rs-texto);
    font-weight: 600;
}

.competicion-fina small {
    color: var(--rs-texto-tenue);
    font-size: 13px;
}

.competicion-fina--oro {
    color: var(--rs-oro-texto);
}

.competicion-fina--oro > .icono {
    color: var(--rs-oro);
}

.competicion-fina--aviso {
    color: var(--rs-aviso-texto);
    font-weight: 600;
}

.competicion-fina--aviso > .icono {
    color: currentColor;
}

.competicion-tarjeta {
    position: relative;
    display: grid;
    align-content: start;
    gap: 6px;
    min-width: 0;
    margin: 0;
    padding: var(--espacio-4) 0;
    border-top: 1px solid var(--rs-borde-sutil);
}

.competicion-tarjeta__cabeza {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    min-width: 0;
}

.competicion-tarjeta__icono {
    flex: none;
    color: var(--marca-acento);
}

.competicion-tarjeta__icono .icono {
    display: block;
    width: 22px;
    height: 22px;
}

.competicion-tarjeta__cabeza h3 {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-family: var(--fuente-display);
    font-size: 1.2rem;
    font-weight: 650;
    letter-spacing: -0.025em;
    line-height: 1.2;
}

.competicion-tarjeta__cabeza h3 a {
    color: inherit;
    text-decoration: none;
    transition: color var(--duracion-hover) var(--curva);
}

/* Toda la línea lleva al detalle. */
.competicion-tarjeta__cabeza h3 a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.competicion-tarjeta:hover h3 a {
    color: var(--marca-acento);
}

.competicion-tarjeta__cabeza > small {
    flex: none;
    max-width: 40%;
    overflow: hidden;
    color: var(--rs-texto-tenue);
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.competicion-tarjeta__cabeza > .etiqueta {
    flex: none;
}
/* #endregion */

/* #region 8. El detalle y el programa: la cabecera y sus partes */
.competiciones-detalle {
    display: grid;
    gap: clamp(28px, 3vw, 44px);
}

/* Nada ensancha la pantalla: lo ancho (una tabla, un cuadro) se desliza dentro de su parte. */
.competiciones-detalle > * {
    min-width: 0;
}

/* Al saltar, que el título no quede debajo de la cabecera. */
.competiciones-detalle :is(h2, section, summary)[id] {
    scroll-margin-top: calc(var(--alto-superior) + var(--espacio-3));
}

.competicion-tarjeta--cabeza {
    gap: var(--espacio-3);
    padding: 0;
    border: 0;
}

.competicion-tarjeta--cabeza .competicion-tarjeta__cabeza {
    flex-wrap: wrap;
    gap: var(--espacio-2) var(--espacio-4);
}

.competicion-tarjeta--cabeza .competicion-tarjeta__icono .icono {
    width: clamp(34px, 3.6vw, 56px);
    height: clamp(34px, 3.6vw, 56px);
    stroke-width: 1.5;
}

.competicion-tarjeta--cabeza h2 {
    margin: 0;
    font-family: var(--fuente-display);
    font-size: clamp(2.4rem, 4.4vw, 4.5rem);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1;
}

.competicion-tarjeta--cabeza > .competicion-fina {
    font-size: 16px;
}

.competicion-tarjeta--cabeza > .competicion-fina > .icono {
    display: none;
}

.competicion-seccion__nota {
    margin: 0;
    color: var(--rs-texto-secundario);
    font-size: 15px;
}

/* Tú en esta competición: tu puesto y tu próximo partido. */
#detalle-mias:not(:empty) {
    display: grid;
    gap: var(--espacio-3);
}

.competicion-tarjeta--suya {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--espacio-3) clamp(24px, 3vw, 48px);
    padding: 0;
    border: 0;
}

.competicion-tarjeta--suya > .competicion-tarjeta__cabeza {
    grid-column: 1 / -1;
}

.competicion-tarjeta--suya h3 {
    font-size: clamp(1.3rem, 1.8vw, 1.75rem);
}

.competicion-tarjeta--suya .competicion-cartel__puesto {
    display: grid;
    gap: 2px;
    max-width: 16rem;
}

.competicion-tarjeta--suya .competicion-cartel__puesto b {
    color: var(--marca-acento);
    font-size: clamp(3.6rem, 6vw, 6rem);
}

.competicion-tarjeta--suya > .competicion-fina,
.competicion-tarjeta--suya > .competicion-marcador {
    grid-column: 2;
}

/* Sin puesto, el marcador a lo ancho. */
.competicion-tarjeta--suya > .competicion-fina + .competicion-marcador,
.competicion-tarjeta--suya > .competicion-tarjeta__cabeza + .competicion-marcador {
    grid-column: 1 / -1;
}

.competicion-seccion {
    min-width: 0;
    margin: 0;
}

.competicion-seccion > h2 {
    display: flex;
    align-items: baseline;
    gap: var(--espacio-2);
    margin: 0 0 var(--espacio-3);
    font-family: var(--fuente-display);
    font-size: clamp(1.4rem, 1.9vw, 1.9rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.competicion-seccion > h2 > small {
    color: var(--rs-texto-tenue);
    font-family: var(--fuente-ui);
    font-size: 14px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}

.competicion-seccion .estado-vacio {
    margin: 0;
    padding: var(--espacio-2) 0;
    font-size: 15px;
}

/* «Ahora se juega», con el punto verde. */
.competicion-seccion--ahora > h2 > span {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-3);
}

.competicion-seccion--ahora > h2 > span::before {
    content: "";
    flex: none;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--rs-exito);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--rs-exito) 24%, transparent);
}

/* Las competiciones del programa. */
.competicion-programa__deportes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-2) var(--espacio-5);
    margin: var(--espacio-2) 0 0;
    padding: 0;
    list-style: none;
}

.competicion-programa__deportes a {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-2);
    color: inherit;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: color var(--duracion-hover) var(--curva);
}

.competicion-programa__deportes a:hover {
    color: var(--marca-acento);
}

.competicion-programa__deportes a .icono {
    width: 18px;
    height: 18px;
    color: var(--marca-acento);
}

.competicion-programa__deporte--mio {
    color: var(--marca-acento) !important;
    font-weight: 650 !important;
}

.competicion-programa__clasificacion + .competicion-programa__clasificacion {
    margin-top: var(--espacio-5);
}

.competicion-programa__clasificacion > .competicion-tanda__titulo {
    margin-bottom: var(--espacio-2);
}

/* El filtro por deporte: si no caben, bajan a otra línea. */
.competicion-filtro {
    flex-wrap: wrap;
    margin-bottom: var(--espacio-3);
}

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

#competiciones-deportes {
    width: fit-content;
    max-width: 100%;
    margin-bottom: 0;
}

.competicion-filtro button .icono {
    width: 16px;
    height: 16px;
}

@media (max-width: 767px) {
    .competicion-tarjeta--suya {
        grid-template-columns: minmax(0, 1fr);
    }

    .competicion-tarjeta--suya > .competicion-marcador {
        grid-column: 1;
    }
}
/* #endregion */

/* #region 9. Los partidos en una línea */
.competicion-tanda + .competicion-tanda,
.competicion-horario__dia + .competicion-tanda {
    margin-top: var(--espacio-4);
}

.competicion-tanda__titulo {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--espacio-2);
    margin: 0 0 var(--espacio-1);
    color: var(--rs-texto-secundario);
    font-size: 14px;
    font-weight: 600;
}

.competicion-tanda__titulo::first-letter {
    text-transform: uppercase;
}

.competicion-tanda__titulo > small {
    margin-left: auto;
    color: var(--rs-texto-tenue);
    font-size: 13px;
    font-weight: 500;
}

.competicion-tanda__titulo .icono {
    align-self: center;
    width: 16px;
    height: 16px;
    color: var(--marca-acento);
}

.competicion-tanda__titulo a {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-2);
    color: inherit;
    text-decoration: none;
}

/* Las horas del programa, en grande: se busca por la hora. */
h4.competicion-tanda__titulo {
    color: var(--rs-texto);
    font-family: var(--fuente-display);
    font-size: 1.3rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.competicion-horario__dia {
    margin: var(--espacio-5) 0 var(--espacio-2);
    font-family: var(--fuente-display);
    font-size: 1.15rem;
    letter-spacing: -0.02em;
}

.competicion-horario__dia::first-letter {
    text-transform: uppercase;
}

.competicion-filas {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Local a la izquierda, el marcador (o la hora) en medio con el sitio debajo, visitante a la derecha. */
.competicion-fila {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 5.25rem minmax(0, 1fr);
    align-items: center;
    gap: 2px var(--espacio-3);
    min-height: 48px;
    padding: 7px 0;
    border-top: 1px solid var(--rs-borde-sutil);
    font-size: 15px;
}

.competicion-fila__lado {
    overflow-wrap: anywhere;
    text-align: right;
}

.competicion-fila__lado--local {
    text-align: left;
}

/* La letra de la liguilla, delante del local. */
.competicion-fila__marca {
    margin-right: var(--espacio-2);
    color: var(--rs-texto-tenue);
    font-size: 13px;
    font-weight: 600;
}

.competicion-fila__lado--gana {
    font-weight: 650;
}

.competicion-fila__centro {
    display: grid;
    justify-items: center;
    line-height: 1.15;
    text-align: center;
}

.competicion-fila__centro strong {
    font-family: var(--fuente-display);
    font-size: 1.2rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.competicion-fila:not(.competicion-fila--jugada) .competicion-fila__centro strong {
    color: var(--rs-texto-secundario);
    font-size: 1rem;
    font-weight: 600;
}

.competicion-fila__centro small {
    max-width: 100%;
    overflow: hidden;
    color: var(--rs-texto-tenue);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.competicion-fila__extra {
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    color: var(--rs-texto-tenue);
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.competicion-fila__extra .icono {
    flex: none;
    width: 14px;
    height: 14px;
    color: var(--rs-texto-tenue);
}

/* La suya: una raya en el color de la asociación, por fuera: las demás filas siguen alineadas con ella. */
.competicion-fila--mia,
.competicion-fila--ahora {
    margin-inline: calc(-1 * var(--espacio-3));
    padding-inline: var(--espacio-3);
}

.competicion-fila--mia {
    box-shadow: inset 3px 0 0 var(--marca-acento);
    background: color-mix(in srgb, var(--marca-acento) 7%, transparent);
    font-weight: 600;
}

.competicion-fila--ahora {
    box-shadow: inset 3px 0 0 var(--rs-exito);
    background: color-mix(in srgb, var(--rs-exito) 7%, transparent);
}

/* Un equipo: el marcador en verde si ganó y en rojo si perdió. */
.competicion-fila--ganado .competicion-fila__centro :is(strong, small) {
    color: var(--rs-exito-texto);
}

.competicion-fila--perdido .competicion-fila__centro :is(strong, small) {
    color: var(--rs-peligro-texto);
}

@media (max-width: 767px) {
    .competicion-fila {
        grid-template-columns: minmax(0, 1fr) 3.75rem minmax(0, 1fr);
        gap: 2px var(--espacio-2);
        font-size: 14px;
    }

    .competicion-fila__centro strong {
        font-size: 1.05rem;
    }

    .competicion-fila:not(.competicion-fila--jugada) .competicion-fila__centro strong {
        font-size: 14px;
    }
}
/* #endregion */

/* #region 10. La clasificación, el balance y el cuadro */
.competicion-tablas {
    display: grid;
    gap: var(--espacio-5);
}

.competicion-tabla__marco {
    min-width: 0;
    overflow-x: auto;
}

.competicion-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}

.competicion-tabla :is(th, td) {
    padding: 8px 6px;
    border-top: 1px solid var(--rs-borde-sutil);
    text-align: left;
}

.competicion-tabla thead :is(th, td) {
    padding-block: 4px 8px;
    border-top: 0;
    color: var(--rs-texto-tenue);
    font-size: 13px;
    font-weight: 500;
}

.competicion-tabla thead .competicion-tabla__liguilla {
    color: var(--rs-texto-secundario);
    font-weight: 600;
}

.competicion-tabla tbody th {
    width: 100%;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.competicion-tabla :is(td, th):first-child {
    width: 2.75rem;
    padding-left: var(--espacio-2);
}

.competicion-tabla .numero {
    min-width: 2rem;
    text-align: right;
}

.competicion-tabla abbr {
    text-decoration: none;
}

.competicion-tabla strong {
    font-family: var(--fuente-display);
    font-size: 1.05rem;
    font-weight: 700;
}

/* Su fila (la de su grupo, o la de la asociación en la liga de fuera). */
.competicion-tabla__mia {
    background: color-mix(in srgb, var(--marca-acento) 10%, transparent);
    box-shadow: inset 3px 0 0 var(--marca-acento);
}

.competicion-tabla__mia :is(th, td) {
    font-weight: 650;
}

/* En el móvil, ganados, empatados y perdidos sobran. */
@media (max-width: 767px) {
    .competicion-tabla__ancha {
        display: none;
    }
}

/* De la sexta fila en adelante (menos la suya), con «Ver toda». */
.competicion-tabla__resto {
    display: none;
}

.competicion-tabla__marco--entera .competicion-tabla__resto {
    display: table-row;
}

.competicion-tabla__ver {
    min-height: 36px;
    font-size: 14px;
}

/* El puesto en su medalla: oro, plata y bronce para los tres primeros. */
.competicion-posicion {
    display: inline-grid;
    place-items: center;
    min-width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--radio-pildora);
    color: var(--rs-texto-secundario);
    font-size: 14px;
    font-weight: 700;
}

/* Las medallas son de metal: el mismo oro, plata y bronce con el tema claro y con el oscuro. */
.competicion-posicion[data-posicion="1"] {
    background: linear-gradient(135deg, #F6D88C, #D9A443);
    box-shadow: inset 0 -1px 0 rgb(0 0 0 / 0.15);
    color: #3B2A08;
}

.competicion-posicion[data-posicion="2"] {
    background: linear-gradient(135deg, #F1F4F7, #BCC5D0);
    box-shadow: inset 0 -1px 0 rgb(0 0 0 / 0.15);
    color: #2A323C;
}

.competicion-posicion[data-posicion="3"] {
    background: linear-gradient(135deg, #EDBE98, #B97A48);
    box-shadow: inset 0 -1px 0 rgb(0 0 0 / 0.15);
    color: #3A1E0A;
}

/* El campeón, en oro. */
.competicion__campeon {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    margin: 0 0 var(--espacio-3);
    color: var(--rs-oro-texto);
    font-family: var(--fuente-display);
    font-size: 1.25rem;
    letter-spacing: -0.02em;
}

.competicion__campeon .icono {
    flex: none;
    color: var(--rs-oro);
}

/* Amistosos: ganados, empatados y perdidos, en grande. */
.competicion-balance {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--espacio-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.competicion-balance li {
    display: grid;
}

.competicion-balance strong {
    font-family: var(--fuente-display);
    font-size: clamp(2.4rem, 3.6vw, 3.6rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.04em;
    line-height: 1;
}

.competicion-balance span {
    color: var(--rs-texto-secundario);
    font-size: 14px;
}

.competicion-balance--ganados strong {
    color: var(--rs-exito-texto);
}

.competicion-balance--perdidos strong {
    color: var(--rs-peligro-texto);
}

/* El cuadro de una eliminatoria: una columna por ronda que se desliza de lado en el móvil. */
.competicion-cuadro {
    display: grid;
    grid-auto-columns: minmax(12rem, 1fr);
    grid-auto-flow: column;
    gap: var(--espacio-3);
    margin-top: var(--espacio-2);
    padding-bottom: var(--espacio-1);
    overflow-x: auto;
}

.competicion-cuadro__ronda h4 {
    margin: 0 0 var(--espacio-2);
    color: var(--rs-texto-secundario);
    font-size: 14px;
    font-weight: 600;
}

.competicion-cuadro__ronda ul {
    display: grid;
    gap: var(--espacio-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.competicion-cuadro__cruce {
    display: grid;
    gap: 2px;
    padding: var(--espacio-2) var(--espacio-3);
    border-left: 2px solid var(--rs-borde);
    font-size: 14px;
}

.competicion-cuadro__cruce--mio {
    border-left-color: var(--marca-acento);
}

.competicion-cuadro__cruce small {
    color: var(--rs-texto-tenue);
    font-size: 13px;
}

.competicion-cuadro__ganador {
    font-weight: 650;
}
/* #endregion */

/* #region 11. Quién juega, las fotos para el museo y la ficha */
.competicion-participan {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-2) var(--espacio-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.competicion-participan li {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    max-width: 100%;
    font-size: 15px;
    overflow-wrap: anywhere;
}

.competicion-participan small {
    flex: none;
    color: var(--rs-texto-tenue);
    font-size: 13px;
    font-weight: 600;
}

.competicion-participan__mio {
    color: var(--marca-acento);
    font-weight: 650;
}

/* Las fotos: una fila de miniaturas; al tocar una, en grande en el visor. */
.competicion-fotos {
    display: flex;
    gap: var(--espacio-4);
    margin: 0;
    padding: 0 0 2px;
    overflow-x: auto;
    list-style: none;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}

.competicion-fotos > li {
    flex: 0 0 auto;
    max-width: 78%;
    scroll-snap-align: start;
}

.competicion-fotos__foto {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: zoom-in;
}

.competicion-fotos__foto img {
    flex: none;
    width: 64px;
    height: 64px;
    border-radius: var(--radio-md);
    background: var(--rs-superficie-2);
    object-fit: cover;
}

.competicion-fotos__foto span {
    display: grid;
    min-width: 0;
    line-height: 1.3;
}

.competicion-fotos__foto strong,
.competicion-fotos__foto small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.competicion-fotos__foto strong {
    font-size: 14px;
    font-weight: 600;
}

.competicion-fotos__foto small {
    color: var(--rs-texto-tenue);
    font-size: 13px;
}

.competicion-fotos__foto:focus-visible {
    outline: none;
    border-radius: var(--radio-md);
    box-shadow: var(--anillo-foco);
}

/* La ficha: una línea y, en «Bases y detalles», lo demás. */
.competicion-ficha {
    display: grid;
    gap: var(--espacio-2);
}

.competicion-ficha__mas {
    border-top: 1px solid var(--rs-borde-sutil);
}

.competicion-ficha__mas > summary {
    min-height: 48px;
    font-size: 15px;
}

.competicion__ficha {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: var(--espacio-3);
    margin: 0 0 var(--espacio-3);
}

.competicion__ficha dt {
    color: var(--rs-texto-secundario);
    font-size: 13px;
}

.competicion__ficha dd {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.competicion__bases {
    margin: 0 0 var(--espacio-3);
    font-size: 15px;
    line-height: 1.55;
}

.competicion-sorteo {
    display: grid;
    gap: var(--espacio-1);
    padding: var(--espacio-3) 0;
    border-top: 1px solid var(--rs-borde-sutil);
    font-size: 15px;
}

.competicion-sorteo p {
    margin: 0;
}

.competicion-sorteo p:first-child {
    display: flex;
    align-items: flex-start;
    gap: var(--espacio-2);
}

.competicion-sorteo .icono {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    color: var(--marca-acento);
}
/* #endregion */

/* #region 12. El detalle a dos columnas (la clasificación al lado de los resultados) */
/* En el móvil, una columna en este orden: clasificación, resultados, lo que falta y quién juega. */
.competicion-panel {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-8);
}

.competicion-panel__columna {
    display: contents;
}

.competicion-panel__clasificacion { order: 1; }
.competicion-panel__por-jugar { order: 2; }
.competicion-panel__resultados { order: 3; }
.competicion-panel__horario { order: 4; }
.competicion-panel__participan { order: 5; }

@media (min-width: 900px) {
    .competicion-panel {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: start;
        gap: clamp(32px, 4vw, 64px);
    }

    .competicion-panel__columna {
        display: grid;
        gap: var(--espacio-8);
        min-width: 0;
    }

    .competicion-panel__columna:empty {
        display: none;
    }

    /* Sin clasificación ni participantes aún, lo que hay ocupa todo el ancho, sin una columna vacía al lado. */
    .competicion-panel--una {
        grid-template-columns: minmax(0, 1fr);
    }

    .competicion-panel--una > .competicion-panel__columna:first-child {
        display: none;
    }
}
/* #endregion */