/*
 * El mostrador del puesto (docs/puestos.md; rediseño del 6 nov 2026). Es una herramienta para quien va deprisa, de pie y
 * con una mano: a la izquierda, un panel del color de la asociación con quién está de servicio, el puesto y un botón
 * enorme, como un terminal; a la derecha, cómo va el día, lo que acaba de pasar, en grande, y la lista. En el móvil, el
 * panel arriba (y recogido en las demás partes) y las partes en la barra de abajo. Sin cajas: el aire y unas líneas
 * finas ordenan.
 */

/* #region La página: el panel y el trabajo */
.contenido-socio--puesto {
    width: auto;
    gap: 0;
    padding: 0;
}

/* El panel llega hasta el borde: la cabecera, alineada con él. */
@media (min-width: 1024px) {
    .app-socio:has(.contenido-socio--puesto) .cabecera-socio {
        padding-inline: var(--espacio-6);
    }
}

/* Sin el puesto o sin datos: por qué y la vuelta a su carnet. */
.contenido-socio--puesto > .carnet-sin-socio {
    width: var(--ancho-pagina);
    margin: var(--espacio-8) auto;
}

.puesto-pagina {
    display: grid;
    grid-template-columns: minmax(19rem, 25rem) minmax(0, 1fr);
    align-items: start;
}

.puesto-pagina[hidden] {
    display: none;
}
/* #endregion */

/* #region El mostrador: el panel de color */
.puesto-mostrador {
    position: sticky;
    top: var(--alto-superior);
    display: flex;
    flex-direction: column;
    gap: var(--espacio-4);
    height: calc(100dvh - var(--alto-superior));
    padding: var(--espacio-6);
    overflow-y: auto;
    background: linear-gradient(165deg, var(--marca-fondo), color-mix(in srgb, var(--marca-fondo) 52%, #08080C));
    color: #FFFFFF;
}

/* Quién está de servicio: se ve que esto no es su carnet. */
.puesto-servicio {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
}

.puesto-servicio p {
    display: grid;
    min-width: 0;
    margin: 0;
    font-size: var(--texto-etiqueta);
    font-weight: 600;
    line-height: 1.3;
}

.puesto-servicio small {
    font-size: var(--texto-pequeno);
    font-weight: 500;
    opacity: 0.82;
}

.puesto-servicio__cara {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    overflow: hidden;
    border-radius: 50%;
    background: rgb(255 255 255 / 0.18);
    font-size: var(--texto-pequeno);
    font-weight: 700;
}

.puesto-servicio__cara img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.puesto-mostrador h1 {
    margin: 0;
    color: inherit;
    font-family: var(--fuente-display);
    font-size: clamp(2.25rem, 3.4vw, 3.25rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
}

/* Lo que se hace aquí: ocupa lo que quede del panel. */
.puesto-acciones {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--espacio-3);
    min-height: 0;
}

.puesto-acciones[hidden] {
    display: none;
}

.puesto-accion {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: #FFFFFF;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: opacity var(--duracion-hover) var(--curva), transform var(--duracion-hover) var(--curva), background-color var(--duracion-hover) var(--curva);
}

.puesto-accion:hover {
    opacity: 0.85;
}

.puesto-accion:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 3px;
    border-radius: var(--radio-sm);
}

.puesto-accion .icono {
    flex: none;
    width: 19px;
    height: 19px;
}

/* Lo principal, enorme y blanco: se ve de lejos y se pulsa sin mirar. */
.puesto-accion--principal {
    position: relative;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: center;
    gap: var(--espacio-4);
    min-height: 11rem;
    max-height: 22rem;
    padding: var(--espacio-6);
    border-radius: 20px;
    background: #FFFFFF;
    box-shadow: 0 18px 44px rgb(0 0 0 / 0.28);
    color: #14141A;
    font-family: var(--fuente-display);
    font-size: clamp(1.375rem, 1.8vw, 1.625rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    text-align: center;
}

.puesto-accion--principal:hover {
    opacity: 1;
    transform: translateY(-2px);
}

.puesto-accion--principal .icono {
    width: clamp(3.5rem, 5vw, 4.5rem);
    height: clamp(3.5rem, 5vw, 4.5rem);
    stroke-width: 1.5;
}

/* Lo principal que no es pasar un carnet (nueva partida, apuntar a mano…): grande, pero sin ocupar todo el panel. */
.puesto-accion--principal:not(.puesto-accion--lector) {
    flex: none;
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--espacio-3);
    min-height: 5.5rem;
    padding: var(--espacio-4) var(--espacio-5);
    border-radius: 16px;
    font-size: 1.25rem;
    text-align: left;
}

.puesto-accion--principal:not(.puesto-accion--lector) .icono {
    width: 2rem;
    height: 2rem;
    stroke-width: 1.75;
}

/* Pasar un carnet: con las cuatro esquinas de un lector. */
.puesto-accion--lector.puesto-accion--principal::before {
    content: "";
    position: absolute;
    inset: var(--espacio-3);
    border: 3px solid var(--marca-fondo);
    border-radius: 10px;
    mask:
        linear-gradient(#000 0 0) 0 0 / 28px 28px no-repeat,
        linear-gradient(#000 0 0) 100% 0 / 28px 28px no-repeat,
        linear-gradient(#000 0 0) 0 100% / 28px 28px no-repeat,
        linear-gradient(#000 0 0) 100% 100% / 28px 28px no-repeat;
}

/* Buscar por el nombre: como un buscador. */
.puesto-accion--buscar:not(.puesto-accion--principal) {
    min-height: 52px;
    padding-inline: var(--espacio-4);
    border-radius: 14px;
    background: rgb(255 255 255 / 0.16);
    font-weight: 500;
}

.puesto-accion--buscar:not(.puesto-accion--principal):hover {
    background: rgb(255 255 255 / 0.24);
    opacity: 1;
}

/* «Volver a Mi carnet» y sus otros puestos, abajo del todo. */
.puesto-familia {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-1) var(--espacio-2);
    margin-top: auto;
    padding-top: var(--espacio-3);
    border-top: 1px solid rgb(255 255 255 / 0.2);
}

.puesto-familia__uno {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-2);
    min-height: 40px;
    padding: 2px var(--espacio-3) 2px 2px;
    border-radius: var(--radio-pildora);
    color: rgb(255 255 255 / 0.86);
    font-size: var(--texto-etiqueta);
    font-weight: 600;
    text-decoration: none;
}

.puesto-familia__uno:hover,
.puesto-familia__uno:focus-visible {
    background: rgb(255 255 255 / 0.12);
    color: #FFFFFF;
}

.puesto-familia__uno[aria-current="page"] {
    background: rgb(255 255 255 / 0.2);
    color: #FFFFFF;
}

.puesto-familia__cara {
    position: relative;
    display: grid;
    flex: none;
    place-items: center;
    width: 32px;
    height: 32px;
    overflow: hidden;
    border-radius: 50%;
    background: rgb(255 255 255 / 0.18);
    font-size: 11px;
    font-weight: 700;
}

/* Volver a su carnet: en su propia fila y más grande, para que se vea que es la salida (8 nov 2026). */
.puesto-familia__uno--volver {
    flex-basis: 100%;
    min-height: 48px;
    background: rgb(255 255 255 / 0.12);
    color: #FFFFFF;
    font-size: var(--texto-base);
}

.puesto-familia__uno--volver .puesto-familia__cara {
    width: 40px;
    height: 40px;
    font-size: 13px;
}

.puesto-familia__cara img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.puesto-familia__cara .icono {
    width: 16px;
    height: 16px;
}
/* #endregion */

/* #region El trabajo: el título y lo de cada parte */
.puesto-trabajo {
    display: grid;
    gap: clamp(20px, 2.4vw, 32px);
    min-width: 0;
    max-width: 90rem;
    padding: clamp(24px, 2.6vw, 40px) clamp(20px, 3vw, 48px) var(--espacio-16);
}

.puesto-trabajo__cabecera h2 {
    margin: 0;
    font-family: var(--fuente-display);
    font-size: clamp(1.6rem, 2.4vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.05;
}

.puesto-parte {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(24px, 2.6vw, 40px);
}

/* Un grupo con su título: un turno, una talla, un día. */
.puesto-turno {
    display: grid;
    gap: var(--espacio-2);
    min-width: 0;
}

.puesto-turno h3 {
    margin: 0;
    font-family: var(--fuente-display);
    font-size: clamp(1.2rem, 1.7vw, 1.6rem);
    font-weight: 650;
    letter-spacing: -0.025em;
    line-height: 1.15;
}

.puesto-parte .ayuda-campo {
    margin: 0;
    font-size: 15px;
}

/* Un botón suelto en la página, de su tamaño: a lo ancho parecía una caja vacía. */
.puesto-parte > .boton,
.puesto-turno > .boton {
    justify-self: start;
}

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

    .puesto-mostrador {
        position: static;
        height: auto;
        overflow: visible;
    }

    .puesto-acciones {
        flex: none;
    }

    .puesto-accion--principal {
        flex: none;
        min-height: 10rem;
    }

    /* Los puestos de esta persona, en una fila que se desliza: en varias, empujaban el trabajo fuera de la pantalla. */
    .puesto-familia {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .puesto-familia__uno {
        flex: none;
        white-space: nowrap;
    }

    .puesto-familia__uno--volver {
        flex-basis: auto;
    }
}

@media (max-width: 767px) {
    .puesto-mostrador {
        gap: var(--espacio-3);
        padding: var(--espacio-4);
    }

    .puesto-trabajo {
        padding-bottom: calc(160px + env(safe-area-inset-bottom));
    }

    /* En las demás partes, el panel se recoge: el trabajo, a la vista, y lo principal flota al alcance del pulgar. */
    .puesto-pagina--trabajo .puesto-servicio,
    .puesto-pagina--trabajo .puesto-familia {
        display: none;
    }

    .puesto-pagina--trabajo .puesto-mostrador h1 {
        font-size: 1.375rem;
    }

    .puesto-pagina--trabajo .puesto-accion--principal,
    .puesto-pagina--trabajo .puesto-accion--principal:not(.puesto-accion--lector) {
        position: fixed;
        right: 16px;
        bottom: calc(76px + env(safe-area-inset-bottom));
        z-index: 15;
        flex-direction: row;
        gap: var(--espacio-2);
        min-height: 52px;
        max-height: none;
        padding: 0 26px;
        border-radius: var(--radio-pildora);
        background: var(--marca-boton);
        box-shadow: 0 10px 28px rgb(0 0 0 / 0.35);
        color: var(--marca-sobre-boton);
        font-family: inherit;
        font-size: 16px;
        font-weight: 600;
        letter-spacing: 0;
    }

    .puesto-pagina--trabajo .puesto-accion--principal .icono,
    .puesto-pagina--trabajo .puesto-accion--principal:not(.puesto-accion--lector) .icono {
        width: 19px;
        height: 19px;
        stroke-width: inherit;
    }

    .puesto-pagina--trabajo .puesto-accion--lector.puesto-accion--principal::before {
        display: none;
    }

    .puesto-pagina--trabajo .puesto-acciones:has(> :only-child) {
        display: contents;
    }
}
/* #endregion */

/* #region «Lo de hoy»: las cifras, sin cajas (la ficha de la Junta sigue con sus casillas, lo-tuyo.css) */
.puesto-parte .lo-tuyo {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: var(--espacio-5) clamp(24px, 3vw, 48px);
}

.puesto-parte .lo-tuyo__casilla {
    --casilla-color: var(--marca-acento);
    gap: var(--espacio-1);
    padding: var(--espacio-3) 0 0;
    border: 0;
    border-top: 1px solid var(--rs-borde-sutil);
    border-radius: 0;
    background: none;
}

.puesto-parte .lo-tuyo__casilla--exito {
    --casilla-color: var(--rs-exito);
}

.puesto-parte .lo-tuyo__casilla--aviso,
.puesto-parte .lo-tuyo__casilla--urgente {
    --casilla-color: var(--rs-aviso);
}

.puesto-parte .lo-tuyo__casilla--peligro {
    --casilla-color: var(--rs-peligro);
}

.puesto-parte .lo-tuyo__titulo {
    color: var(--rs-texto-secundario);
    font-size: 14px;
    font-weight: 500;
}

.puesto-parte .lo-tuyo__titulo > span:last-child {
    white-space: normal;
}

.puesto-parte .lo-tuyo__valor {
    font-family: var(--fuente-display);
    font-size: clamp(1.5rem, 2.2vw, 2.25rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.08;
}

.puesto-parte .lo-tuyo__casilla--exito .lo-tuyo__valor {
    color: var(--rs-exito-texto);
}

.puesto-parte :is(.lo-tuyo__casilla--aviso, .lo-tuyo__casilla--urgente) .lo-tuyo__valor {
    color: var(--rs-aviso-texto);
}

.puesto-parte .lo-tuyo__casilla--peligro .lo-tuyo__valor {
    color: var(--rs-peligro-texto);
}

.puesto-parte .lo-tuyo__detalle {
    display: block;
    font-size: 14px;
}

@media (max-width: 599px) {
    .puesto-parte .lo-tuyo {
        gap: var(--espacio-4) var(--espacio-4);
    }
}
/* #endregion */

/* #region Conexión y lo que hay por subir */
.contenido-socio--puesto .puesto-conexion {
    position: sticky;
    top: var(--alto-superior);
    z-index: 12;
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    margin: 0;
    padding: var(--espacio-2) calc((100% - var(--ancho-pagina)) / 2);
    background: var(--rs-superficie-2);
    color: var(--rs-texto);
    font-weight: 600;
}

.contenido-socio--puesto .puesto-conexion--sin {
    background: var(--rs-aviso);
    color: #17120A;
}

.contenido-socio--puesto .puesto-conexion[hidden] {
    display: none;
}
/* #endregion */

/* #region Lo que acaba de pasar, en grande: de un color que se ve de lejos, también al sol */
.puesto-resultado {
    position: sticky;
    top: calc(var(--alto-superior) + var(--espacio-2));
    z-index: 11;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--espacio-3) var(--espacio-4);
    margin: 0;
    padding: clamp(14px, 1.6vw, 22px) clamp(16px, 2vw, 28px);
    border-radius: var(--radio-xl);
    box-shadow: 0 14px 34px rgb(0 0 0 / 0.28);
    color: #FFFFFF;
}

.puesto-resultado[hidden] {
    display: none;
}

.puesto-resultado--exito {
    background: #12703F;
}

.puesto-resultado--aviso {
    background: #E5A92E;
    color: #1E1604;
}

.puesto-resultado--error {
    background: #B3261E;
}

.puesto-resultado__icono {
    display: block;
}

.puesto-resultado__icono .icono {
    display: block;
    width: clamp(30px, 3vw, 44px);
    height: clamp(30px, 3vw, 44px);
}

.puesto-resultado__textos {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.puesto-resultado__titulo {
    margin: 0;
    font-family: var(--fuente-display);
    font-size: clamp(1.4rem, 2.2vw, 2.2rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.puesto-resultado__detalle {
    margin: 0;
    font-size: clamp(1rem, 1.2vw, 1.15rem);
}

.puesto-resultado__acciones {
    margin-top: var(--espacio-2);
}

.puesto-resultado__accion {
    background: #FFFFFF;
    color: #17120A;
}

.puesto-resultado .boton--fantasma {
    color: inherit;
}

.puesto-resultado__cerrar {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: inherit;
    cursor: pointer;
}

.puesto-resultado__cerrar:hover {
    background: rgb(255 255 255 / 0.16);
}

.puesto-resultado__cerrar:focus-visible {
    outline: 2px solid currentColor;
}

/* Dentro del lector, en su sitio: la ventana ya está a la vista. */
#puesto-lector-resultado:empty {
    display: none;
}

#puesto-lector-resultado .puesto-resultado {
    position: static;
    box-shadow: none;
}
/* #endregion */

/* #region Las partes del puesto: listas de personas y de actos */
.puesto-lista {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr));
    gap: 0 clamp(24px, 3vw, 56px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.puesto-fila {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    min-height: 64px;
    padding: var(--espacio-2) 0;
    border-top: 1px solid var(--rs-borde-sutil);
}

.puesto-fila--hecha {
    opacity: 0.62;
}

.puesto-fila__textos {
    display: grid;
    flex: 1;
    gap: 2px;
    min-width: 0;
}

.puesto-fila__textos strong {
    font-size: 16px;
    font-weight: 600;
}

.puesto-fila__textos small {
    color: var(--rs-texto-secundario);
    font-size: 14px;
}

/* El botón de cada fila, en su línea y sin gritar: repetido veinte veces, relleno sería un muro de color. */
.puesto-fila .boton:not(.boton--fantasma, .boton--icono) {
    flex: none;
    border: 1px solid color-mix(in srgb, var(--marca-acento) 45%, transparent);
    background: none;
    box-shadow: none;
    color: var(--marca-acento);
    transition: background-color var(--duracion-hover) var(--curva), color var(--duracion-hover) var(--curva);
}

.puesto-fila .boton:not(.boton--fantasma, .boton--icono):hover {
    background: var(--marca-boton);
    color: var(--marca-sobre-boton);
}

/* Lo de la derecha de una fila cuando son dos cosas (el importe y su botón). */
.puesto-fila__derecha {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: var(--espacio-2);
}

.puesto-elegir {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-2);
}

/* Elegir uno (qué acto, qué sorteo, cuáles se ven): pestañas de texto, el elegido subrayado. */
.puesto-elegir[role="group"] {
    align-items: center;
    gap: var(--espacio-1) clamp(16px, 2vw, 28px);
    border-bottom: 1px solid var(--rs-borde-sutil);
}

.puesto-elegir[role="group"] .boton {
    min-height: 44px;
    margin-bottom: -1px;
    padding: 0;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--rs-texto-secundario);
    font-size: 15px;
    font-weight: 500;
}

.puesto-elegir[role="group"] .boton:hover {
    background: none;
    color: var(--rs-texto);
}

.puesto-elegir[role="group"] .boton[aria-pressed="true"] {
    border-bottom-color: var(--marca-acento);
    color: var(--rs-texto);
    font-weight: 600;
}

.puesto-elegir[role="group"] .boton:focus-visible {
    box-shadow: var(--anillo-foco);
}

.buscador-resultados__opcion {
    display: grid;
    gap: 2px;
    width: 100%;
    min-height: 44px;
    padding: var(--espacio-2) var(--espacio-3);
    border: 0;
    border-radius: var(--radio-sm);
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.buscador-resultados__opcion small {
    color: var(--rs-texto-secundario);
}

.buscador-resultados__opcion:hover,
.buscador-resultados__opcion:focus-visible {
    background: var(--rs-hover);
}

.puesto-lector__camara video {
    width: 100%;
    max-height: 50vh;
    border-radius: var(--radio-lg);
    background: #000;
    object-fit: cover;
}
/* #endregion */

/* #region Entregar el dinero del montepío: la misma ventana que en el panel, con la firma del «recibí» */
.puesto-entregar__importe {
    display: grid;
    justify-items: center;
    gap: 2px;
    margin: 0;
    padding: var(--espacio-4);
    border-radius: var(--radio-lg);
    background: var(--rs-superficie-1);
    text-align: center;
}

.puesto-entregar__importe span {
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
}

.puesto-entregar__importe strong {
    font-family: var(--fuente-display);
    font-size: 2rem;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.puesto-entregar__lienzo {
    width: 100%;
    height: auto;
    aspect-ratio: 5 / 2;
    border: 1px dashed var(--rs-borde-fuerte);
    border-radius: var(--radio-md);
    background: #FFFFFF;
    touch-action: none;
}
/* #endregion */

/* #region Cuántos se venden (lotería): − y + grandes, y el total debajo */
.puesto-cantidad {
    align-items: center;
    justify-content: center;
    gap: var(--espacio-4);
}

.puesto-cantidad strong {
    min-width: 3ch;
    font-size: 2rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* Los metros de la tela (27 oct 2026): se escriben, en la misma línea que − y +. */
.puesto-cantidad--campo {
    flex-wrap: nowrap;
}

.puesto-cantidad .puesto-cantidad__campo {
    width: 7rem;
    flex: none;
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.puesto-cantidad__total {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    text-align: center;
}
/* #endregion */

/* #region Gastos: la foto del ticket en la lista y en la ventana */
.gasto-fila {
    align-items: center;
    gap: var(--espacio-3);
}

.gasto-miniatura {
    display: grid;
    flex: none;
    place-items: center;
    width: 44px;
    height: 58px;
    object-fit: cover;
    border: 1px solid var(--rs-borde-tarjeta);
    border-radius: var(--radio-sm);
}

.gasto-miniatura--sin {
    border-style: dashed;
}

.gasto-fotos {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--espacio-2);
}

.gasto-fotos__foto {
    position: relative;
}

.gasto-fotos__imagen {
    display: grid;
    place-items: center;
    width: 72px;
    height: 96px;
    object-fit: cover;
    border: 1px solid var(--rs-borde-tarjeta);
    border-radius: var(--radio-md);
}

.gasto-fotos__quitar {
    position: absolute;
    top: -0.5rem;
    right: -0.5rem;
}
/* #endregion */

/* #region Jefe de sala: cada mesa se abre para ver a su gente */
.sala-mesa {
    flex-direction: column;
    align-items: stretch;
}

.sala-mesa__cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-3);
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.sala-mesa__gente {
    margin-top: var(--espacio-3);
}
/* #endregion */

/* #region Competiciones (Deportes y Campeonatos): decidir, etiquetas, fichas y resultados */
.competicion-etiquetas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-1);
    margin-top: var(--espacio-1);
}

.competicion-icono {
    display: grid;
    flex: none;
    place-items: center;
    width: 32px;
    height: 32px;
    color: var(--marca-acento);
}

.competicion-bases summary {
    cursor: pointer;
    font-weight: 600;
}

.competicion-bases p {
    margin: var(--espacio-2) 0 0;
    white-space: pre-wrap;
}

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

/* Un partido sin resultado que ya se jugó: se nota sin gritar. */
.competicion-partido--tarde .competicion-fila__cuando strong {
    color: var(--rs-aviso-texto);
}

/* El resultado de un partido jugado: se toca para cambiarlo. */
.competicion-resultado {
    min-width: 4.5rem;
    min-height: 40px;
    padding: var(--espacio-1) var(--espacio-3);
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-family: var(--fuente-display);
    font-size: 1.25rem;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

button.competicion-resultado {
    cursor: pointer;
}

.competicion-resultado--ganado {
    color: var(--rs-exito-texto);
}

.competicion-resultado--perdido {
    color: var(--rs-peligro-texto);
}
/* #endregion */

/* #region Competiciones: el marcador, verde césped y a pleno sol */
.competicion-marcador {
    --marcador-cesped: #1d5a32;
    --marcador-cesped-claro: #236b3b;
    --marcador-tiza: #ffffff;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: start;
    gap: var(--espacio-2);
    padding: var(--espacio-4) var(--espacio-3);
    border-radius: var(--radio-lg);
    /* Las franjas del césped recién cortado. */
    background: repeating-linear-gradient(90deg, var(--marcador-cesped) 0 2.5rem, var(--marcador-cesped-claro) 2.5rem 5rem);
    color: var(--marcador-tiza);
    box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.35);
}

.competicion-marcador__lado {
    display: grid;
    justify-items: center;
    gap: var(--espacio-2);
    min-width: 0;
}

.competicion-marcador__nombre {
    min-height: 2.6em;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    overflow-wrap: anywhere;
}

.competicion-marcador__numero {
    font-family: var(--fuente-display);
    font-size: clamp(3.25rem, 16vw, 4.5rem);
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 2px 0 rgb(0 0 0 / 0.25);
}

.competicion-marcador__guion {
    align-self: center;
    font-size: 2.5rem;
    font-weight: 700;
    opacity: 0.8;
}

.competicion-marcador__botones {
    display: flex;
    gap: var(--espacio-2);
}

.competicion-marcador__boton {
    display: grid;
    place-items: center;
    min-width: 52px;
    min-height: 52px;
    padding: 0;
    border: 2px solid rgb(255 255 255 / 0.7);
    border-radius: 50%;
    background: rgb(255 255 255 / 0.14);
    color: var(--marcador-tiza);
    cursor: pointer;
}

.competicion-marcador__boton--mas {
    border-color: var(--marcador-tiza);
    background: var(--marcador-tiza);
    color: var(--marcador-cesped);
}

.competicion-marcador__boton .icono {
    width: 26px;
    height: 26px;
    stroke-width: 2.6;
}

.competicion-marcador__boton:disabled {
    opacity: 0.35;
    cursor: default;
}

.competicion-marcador__boton:focus-visible {
    outline: 3px solid #ffd54a;
    outline-offset: 2px;
}

.competicion-goleadores {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-2);
}

.competicion-goleador {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
/* #endregion */

/* #region Competiciones: clasificaciones, cuadro, sorteo y la liga copiada */
.competicion-campeon {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
}

.competicion-campeon > .icono {
    width: 44px;
    height: 44px;
    color: var(--rs-oro);
}

.competicion-campeon span {
    display: grid;
}

.competicion-campeon strong {
    color: var(--rs-oro-texto);
    font-family: var(--fuente-display);
    font-size: clamp(1.4rem, 2vw, 2rem);
    letter-spacing: -0.03em;
}

/* La tabla, ancha en el móvil sin romper la página: se desliza dentro de su marco. */
.competicion-tabla__marco {
    overflow-x: auto;
}

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

.competicion-tabla th,
.competicion-tabla td {
    /* La clasificación densa: en el móvil, solo puesto, nombre, J y Pts. */
    padding: var(--espacio-2);
    border-top: 1px solid var(--rs-borde-sutil);
    text-align: right;
}

.competicion-tabla thead th {
    border-top: 0;
    color: var(--rs-texto-tenue);
    font-size: 13px;
    font-weight: 500;
}

.competicion-tabla :is(th, td):first-child {
    width: 2.5rem;
    color: var(--rs-texto-secundario);
    font-weight: 600;
    text-align: left;
}

.competicion-tabla :is(thead, tbody) th:nth-child(2) {
    width: 100%;
    max-width: 12rem;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.competicion-tabla tbody th {
    font-weight: 600;
}

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

.competicion-cuadro__ronda h4 {
    margin: var(--espacio-3) 0 var(--espacio-2);
}

.competicion-cuadro__cruce {
    gap: 0;
}

.competicion-grupos__numero {
    display: grid;
    flex: none;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--rs-superficie-1);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.competicion-puesto {
    width: 5rem;
    font-size: 1.25rem;
    font-weight: 700;
    text-align: center;
}

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

/* Cada fila en dos líneas (cabe a 360 px): el equipo y sus botones; debajo, partidos jugados y puntos. */
.competicion-copiada__fila {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) minmax(0, 1fr) auto;
    grid-template-areas:
        "posicion equipo equipo botones"
        "posicion jugados puntos botones";
    align-items: center;
    gap: var(--espacio-1) var(--espacio-2);
    padding: var(--espacio-2) 0;
    border-top: 1px solid var(--rs-borde-sutil);
}

.competicion-copiada__equipo {
    grid-area: equipo;
}

.competicion-copiada__dato {
    display: flex;
    align-items: center;
    gap: var(--espacio-1);
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
}

.competicion-copiada__dato--jugados {
    grid-area: jugados;
}

.competicion-copiada__dato--puntos {
    grid-area: puntos;
}

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

.competicion-copiada__fila--nuestro {
    box-shadow: inset 3px 0 0 var(--marca-acento);
    padding-left: var(--espacio-3);
    background: color-mix(in srgb, var(--marca-acento) 8%, transparent);
}

.competicion-copiada__fila input:not([type="radio"]) {
    width: 100%;
    min-width: 0;
    min-height: 40px;
}

.competicion-copiada__posicion {
    grid-area: posicion;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* La estrella y subir arriba, quitar debajo: dos líneas, como la fila. */
.competicion-copiada__botones {
    grid-area: botones;
    display: grid;
    grid-template-columns: repeat(2, 40px);
    place-items: center;
}

/* «Es el nuestro»: una estrella que se marca (el radio va dentro, invisible pero accesible). */
.competicion-copiada__nuestro {
    position: relative;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    color: var(--rs-texto-secundario);
    cursor: pointer;
}

.competicion-copiada__nuestro input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.competicion-copiada__nuestro:has(input:checked) {
    color: var(--marca-acento);
}

.competicion-copiada__nuestro:has(input:checked) .icono {
    fill: currentColor;
}

.competicion-copiada__nuestro:has(input:focus-visible) {
    border-radius: var(--radio-sm);
    box-shadow: var(--anillo-foco);
}
/* #endregion */

/* #region Competiciones: el cuadrante y el programa («24 horas deportivas») */

/* El día y la hora de cada jornada o ronda, bajo su título. */
.competicion-horario__hora {
    display: flex;
    align-items: center;
    gap: var(--espacio-1);
    margin: var(--espacio-3) 0 var(--espacio-2);
    color: inherit;
    font-size: 1rem;
    font-weight: 600;
}

.competicion-horario__hora .icono {
    width: 18px;
    height: 18px;
}

/* Lo que se juega ahora se ve de lejos; lo jugado, más apagado. */
.competicion-horario__fila--ahora {
    box-shadow: inset 3px 0 0 var(--rs-exito);
    padding-left: var(--espacio-3);
    background: color-mix(in srgb, var(--rs-exito) 9%, transparent);
}

.competicion-horario__fila--jugada .puesto-fila__textos {
    opacity: 0.75;
}

/* La ayuda de una casilla de la ficha, en su propia línea debajo del texto. */
.dialogo__formulario .campo-checkbox > span > small.ayuda-campo {
    display: block;
    margin-top: 2px;
}

.competicion-programa__descripcion {
    margin: 0;
    white-space: pre-wrap;
}

.competicion-programa__competicion {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    margin: 0 0 var(--espacio-2);
    font-family: var(--fuente-display);
    font-size: 1.15rem;
    font-weight: 650;
    letter-spacing: -0.02em;
}

.competicion-programa__competicion .icono {
    width: 20px;
    height: 20px;
    color: var(--marca-acento);
}

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

/* #region Competiciones: la pantalla de cada equipo o campeonato, todo a la vista */
/* Qué equipo o campeonato: pestañas de texto que se deslizan con el dedo; el elegido, subrayado. */
.competicion-cual {
    display: flex;
    gap: clamp(16px, 2vw, 28px);
    overflow-x: auto;
    border-bottom: 1px solid var(--rs-borde-sutil);
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}

.competicion-cual::-webkit-scrollbar {
    display: none;
}

.competicion-cual__boton {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: var(--espacio-2);
    min-height: 44px;
    padding: 0;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--rs-texto-secundario);
    font: inherit;
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
    scroll-snap-align: start;
    cursor: pointer;
}

.competicion-cual__boton:hover {
    color: var(--rs-texto);
}

.competicion-cual__boton .icono {
    width: 18px;
    height: 18px;
}

.competicion-cual__boton[aria-pressed="true"] {
    border-bottom-color: var(--marca-acento);
    color: var(--rs-texto);
    font-weight: 600;
}

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

.competicion-cual__cuenta {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--rs-aviso);
    color: #1a1204;
    font-size: 0.75rem;
    font-weight: 700;
}

/* La cabecera: el dibujo del deporte, el nombre y cómo va (quién va primero, el puesto, el balance). */
.competicion-cabeza {
    display: flex;
    align-items: flex-start;
    gap: var(--espacio-4);
}

.competicion-icono--grande {
    width: auto;
    height: auto;
    background: none;
    color: var(--marca-acento);
}

.competicion-icono--grande .icono {
    width: clamp(36px, 3.6vw, 52px);
    height: clamp(36px, 3.6vw, 52px);
    stroke-width: 1.5;
}

.competicion-cabeza__textos {
    display: grid;
    flex: 1;
    gap: 4px;
    min-width: 0;
}

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

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

.competicion-cabeza__va {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    margin: var(--espacio-1) 0 0;
    font-size: 15px;
    font-weight: 650;
}

.competicion-cabeza__va .icono,
.competicion-tarjeta__va .icono {
    flex: none;
    width: 18px;
    height: 18px;
}

.competicion-cabeza__va span,
.competicion-tarjeta__va {
    white-space: pre-line;
}

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

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

/* Los saltos: un toque y baja a cada parte de la pantalla. */
.competicion-saltos {
    display: flex;
    gap: var(--espacio-4);
    overflow-x: auto;
    scrollbar-width: none;
}

.competicion-saltos::-webkit-scrollbar {
    display: none;
}

.competicion-salto {
    flex: none;
    min-height: 36px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--rs-texto-secundario);
    font: inherit;
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
}

.competicion-salto span {
    color: var(--rs-texto-tenue);
    font-variant-numeric: tabular-nums;
}

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

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

/* Cada parte de la pantalla: su título con la cuenta y, a la derecha, su botón. */
.competicion-seccion {
    display: grid;
    gap: var(--espacio-2);
    scroll-margin-top: 80px;
}

.competicion-seccion:focus {
    outline: none;
}

/* El título de cada parte, grande; dentro, el de una liguilla, pequeño. */
.competicion-seccion h3,
.puesto-turno .competicion-programa__clasificacion h3 {
    margin: var(--espacio-2) 0 0;
    color: var(--rs-texto-secundario);
    font-family: var(--fuente-ui);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
}

.competicion-seccion > h3,
.competicion-seccion__cabecera h3 {
    margin: 0;
    color: var(--rs-texto);
    font-family: var(--fuente-display);
    font-size: clamp(1.2rem, 1.7vw, 1.6rem);
    font-weight: 650;
    letter-spacing: -0.025em;
}

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

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

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

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

.competicion-ver-todo {
    justify-self: start;
}

/* Lo que falta: un aviso por línea, con su color y su botón a la derecha. */
.competicion-avisos {
    margin: 0;
    padding: 0;
    list-style: none;
}

.competicion-aviso {
    --aviso-color: var(--marca-acento);
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    min-height: 56px;
    padding: var(--espacio-1) 0;
    border-top: 1px solid var(--rs-borde-sutil);
}

.competicion-aviso--aviso {
    --aviso-color: var(--rs-aviso);
}

.competicion-aviso--urgente {
    --aviso-color: var(--rs-peligro);
}

.competicion-aviso__icono {
    display: grid;
    flex: none;
    place-items: center;
    color: var(--aviso-color);
}

.competicion-aviso__icono .icono {
    width: 20px;
    height: 20px;
}

.competicion-aviso__texto {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    font-weight: 600;
}

.competicion-aviso .boton {
    flex: none;
    border: 1px solid color-mix(in srgb, var(--marca-acento) 45%, transparent);
    background: none;
    color: var(--marca-acento);
}

.competicion-aviso .boton:hover {
    background: var(--marca-boton);
    color: var(--marca-sobre-boton);
}

.competicion-al-dia {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    margin: 0;
    color: var(--rs-exito-texto);
    font-weight: 600;
}

/* «Lo de hoy»: una tarjeta por equipo o campeonato, que se toca entera. */
.competicion-tarjeta {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    width: 100%;
    padding: var(--espacio-3) 0;
    border: 0;
    border-top: 1px solid var(--rs-borde-sutil);
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.competicion-tarjeta:hover .puesto-fila__textos strong {
    color: var(--marca-acento);
}

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

.competicion-tarjeta .puesto-fila__textos small {
    display: flex;
    align-items: center;
    gap: var(--espacio-1);
}

.competicion-tarjeta .puesto-fila__textos small .icono {
    flex: none;
    width: 14px;
    height: 14px;
}

.competicion-tarjeta > .icono:last-child {
    flex: none;
    color: var(--rs-texto-secundario);
}

/* El balance de los amistosos: tres cifras grandes. */
.competicion-balance {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--espacio-3);
}

.competicion-balance__cifra {
    display: grid;
    color: var(--rs-texto-secundario);
    font-size: 14px;
}

.competicion-balance__cifra strong {
    color: var(--rs-texto);
    font-family: var(--fuente-display);
    font-size: clamp(2.2rem, 3.4vw, 3.4rem);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.04em;
    line-height: 1;
}

.competicion-balance__cifra--ganado strong {
    color: var(--rs-exito-texto);
}

.competicion-balance__cifra--perdido strong {
    color: var(--rs-peligro-texto);
}

/* Nuestro equipo en la tabla de la liga, y el primero de los puestos. */
.competicion-tabla__nuestro > * {
    background: color-mix(in srgb, var(--marca-acento) 12%, transparent);
    font-weight: 700;
}

.competicion-tabla__nuestro .icono {
    width: 14px;
    height: 14px;
    margin-right: 4px;
    color: var(--rs-oro);
    vertical-align: -2px;
}

.competicion-fila--primera strong {
    color: var(--rs-oro-texto);
}

.competicion-acta {
    display: grid;
    gap: var(--espacio-1);
}

.competicion-acta p {
    margin: 0;
}

.competicion-acta__corto {
    font-family: ui-monospace, monospace;
    letter-spacing: 0.04em;
}

.competicion-descargas {
    display: grid;
    gap: var(--espacio-1);
}

.competicion-descargas__fila {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-1) var(--espacio-2);
    color: var(--rs-texto-secundario);
    font-size: 0.875rem;
}

.competicion-descargas__fila .puesto-elegir {
    gap: var(--espacio-1);
}

/* Las filas finas (Rafa, 28 oct 2026: «no quiero estar bajando con el dedo una hora»): cada cosa en una línea con su botón pequeño a la derecha. */
.competicion-fila {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    min-height: 56px;
    padding: var(--espacio-1) 0;
    border-top: 1px solid var(--rs-borde-sutil);
}

.competicion-fila__textos {
    display: grid;
    flex: 1;
    min-width: 0;
    line-height: 1.25;
}

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

.competicion-fila__textos strong {
    font-size: 15px;
    font-weight: 600;
}

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

.competicion-fila__cuando {
    display: grid;
    flex: none;
    width: 3rem;
    color: var(--rs-texto-secundario);
    font-size: 0.75rem;
    line-height: 1.2;
    text-align: center;
}

.competicion-fila__cuando strong {
    color: var(--rs-texto);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
}

.competicion-fila__botones {
    display: flex;
    flex: none;
    align-items: center;
    gap: 4px;
}

.competicion-fila .competicion-resultado {
    min-width: 3.5rem;
    min-height: 36px;
    padding: 2px var(--espacio-2);
    font-size: 1rem;
}

.competicion-fila__grupo {
    gap: 4px;
    padding-inline: var(--espacio-2);
    font-variant-numeric: tabular-nums;
}

/* Lo de una persona o un partido, seguido en su línea con un color fino (en vez de etiquetas que ocupan otra línea). */
.competicion-tono {
    font-weight: 600;
}

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

.competicion-tono--aviso {
    color: var(--rs-aviso-texto);
}

.competicion-tono--proceso {
    color: var(--rs-texto-secundario);
}

@media (max-width: 599px) {
    .competicion-tabla__ancha {
        display: none;
    }
}
/* #endregion */

/* #region Competiciones: la ficha en su ventana y el botón para abrirla */
.competicion-pie {
    display: flex;
    justify-content: center;
}

.competicion-ficha {
    display: grid;
    gap: var(--espacio-2);
}
/* #endregion */

/* #region Competiciones: las fotos para el museo, en una sola fila */
.competicion-fotos {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    overflow-x: auto;
    scrollbar-width: none;
}

.competicion-fotos::-webkit-scrollbar {
    display: none;
}

.competicion-fotos__titulo {
    display: flex;
    flex: none;
    align-items: center;
    gap: var(--espacio-1);
    max-width: 7.5rem;
    color: var(--rs-texto-secundario);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
}

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

.competicion-fotos__hueco {
    position: relative;
    display: grid;
    flex: none;
    place-items: center;
    align-content: center;
    gap: 2px;
    width: 72px;
    height: 56px;
    overflow: hidden;
    padding: 0;
    border: 1px dashed var(--rs-borde-fuerte);
    border-radius: var(--radio-md);
    background: var(--rs-superficie-1);
    color: var(--rs-texto-secundario);
    font: inherit;
    font-size: 0.6875rem;
    font-weight: 600;
    cursor: pointer;
}

.competicion-fotos__hueco .icono {
    width: 18px;
    height: 18px;
}

.competicion-fotos__hueco--falta {
    border-color: var(--marca-acento);
    color: var(--marca-acento);
}

.competicion-fotos__hueco--con {
    border-style: solid;
}

.competicion-fotos__hueco--con img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.competicion-fotos__hueco--con span {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1px 4px;
    background: rgb(0 0 0 / 0.55);
    color: #fff;
    text-align: center;
}

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

.competicion-foto__grande {
    display: block;
    width: 100%;
    max-height: 60vh;
    border-radius: var(--radio-md);
    background: var(--rs-superficie-1);
    object-fit: contain;
}
/* #endregion */

/* #region Competiciones: la pantalla de una competición ocupa todo el ancho (en el ordenador la parte va en dos columnas) */
.competicion-pantalla {
    display: grid;
    grid-column: 1 / -1;
    gap: var(--espacio-3);
    min-width: 0;
    max-width: none;
}
/* #endregion */

/* #region Encargado de evento: el cartel del menú (12 nov 2026, migración 0366) */
.encargado-menu__cartel {
    display: block;
    width: 100%;
    max-width: 420px;
    padding: 0;
    border: 1px solid var(--rs-borde-sutil);
    border-radius: var(--radio-md);
    background: none;
    overflow: hidden;
    cursor: zoom-in;
}

.encargado-menu__cartel img {
    display: block;
    width: 100%;
    max-height: 50vh;
    object-fit: contain;
}

/* Lo de la cocina en el puesto del encargado (12 nov 2026): las frases y, en la lista, las alergias de cada uno. */
.encargado-cocina {
    margin: 0 0 var(--espacio-3);
    padding: var(--espacio-2) var(--espacio-3);
    list-style: none;
    border-radius: var(--radio-md);
    background: var(--rs-superficie-2);
    display: flex;
    flex-direction: column;
    gap: var(--espacio-1);
}

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

.encargado-fila__alergia .icono {
    width: 15px;
    height: 15px;
}
/* #endregion */