/*
 * Eventos y actos, rediseño del 16 oct 2026: la lista (/gestion/eventos)
 * y, de la ficha de un evento (/gestion/eventos-formulario), su cabecera,
 * Precios y plazas, las mesas y Datos del evento. La cargan sus dos
 * plantillas, después de panel.css y gestion.css (de ahí salen la tarjeta,
 * la tabla, la selección de varias filas, el conmutador, las pastillas y la
 * cabecera de una ficha); detrás van calendario-mes.css en la lista y, en la
 * ficha, quien-viene.css (Asistentes) y eventos-ficha.css (lo demás de sus
 * pestañas, el plano de la sala incluido).
 *
 *   1. La tarjeta de la lista: próximos o todos, el tipo y cuántos hay
 *   2. Cada evento: su fecha, su nombre, cuántos van y lo que pide atención
 *   3. Móvil: cada evento en una ficha corta
 *   4. La ficha de un evento: su fecha grande arriba
 *   5. Precios y plazas: una tabla por tipo de persona, las formas de pago y las devoluciones
 *   6. Mesas: el reparto, las mesas y quién se sienta en cada una
 *   7. Datos del evento: sus tarjetas, el cartel a la derecha y un solo «Guardar»
 *
 * Convenciones:
 * - Cada evento, en el color de su tipo (--tono-evento, que pone eventos.js):
 *   el de su fecha. Lo demás, en el color de la asociación y sin subrayados.
 * - Colores, radios y espacios, de tokens de base.css.
 */

/* #region 1. La tarjeta de la lista: próximos o todos, el tipo y cuántos hay */
.eventos-lista {
    display: grid;
    gap: var(--espacio-4);
}

.eventos-lista__filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-3);
    padding-bottom: var(--espacio-4);
    border-bottom: 1px solid var(--rs-borde-sutil);
}

.eventos-lista__filtros .campo {
    margin: 0;
}

.eventos-lista__filtros select {
    width: auto;
    min-width: 11rem;
}

.eventos-lista__filtros .campo-checkbox {
    margin: 0;
}

.eventos-lista__total {
    margin-left: auto;
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
/* #endregion */

/* #region 2. Cada evento: su fecha, su nombre, cuántos van y lo que pide atención */
#tabla-eventos td {
    vertical-align: middle;
}

/* La fecha, como la hoja de un calendario en el color de su tipo. */
.evento-fila__fecha {
    width: 1%;
    padding-right: 0 !important;
}

.evento-fecha {
    display: grid;
    place-items: center;
    width: 52px;
    height: 54px;
    border: 1px solid color-mix(in srgb, var(--tono-evento) 30%, var(--rs-borde));
    border-radius: var(--radio-md);
    background: color-mix(in srgb, var(--tono-evento) 10%, var(--rs-superficie-1));
    color: var(--rs-texto);
    line-height: 1;
    text-decoration: none;
}

.evento-fecha strong {
    font-family: var(--fuente-display);
    font-size: 1.375rem;
    font-variant-numeric: tabular-nums;
}

.evento-fecha span {
    color: color-mix(in srgb, var(--tono-evento) 55%, var(--rs-texto));
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* El nombre y, debajo, su tipo (con el punto de su color), el día y la hora, y el sitio. */
.evento-fila__evento {
    min-width: 14rem;
}

.evento-fila__nombre {
    display: block;
    color: var(--rs-texto);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    transition: color var(--duracion-hover) var(--curva);
}

.evento-fila__nombre:hover {
    color: var(--marca-acento);
}

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

.evento-fila__detalles {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 6px;
    margin-top: 3px;
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
}

.evento-fila__tipo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.evento-fila__tipo::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tono-evento);
}

.evento-fila__punto {
    color: var(--rs-texto-tenue);
}

/* Cuántos van: el número grande, «de 150» al lado y la barra del aforo debajo. */
.evento-fila__apuntados {
    width: 10rem;
}

.evento-apuntados {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    white-space: nowrap;
}

.evento-apuntados strong {
    font-size: 0.9375rem;
    font-variant-numeric: tabular-nums;
}

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

/* «apuntados» junto al número solo en el móvil (en el ordenador ya lo dice la columna «Van»). */
.evento-apuntados__movil {
    display: none;
}

@media (max-width: 767px) {
    .evento-apuntados__movil {
        display: inline;
    }
}

.evento-apuntados--libre {
    color: var(--rs-texto-tenue);
    font-size: var(--texto-etiqueta);
}

.evento-apuntados__barra {
    display: block;
    width: 100%;
    max-width: 8rem;
    height: 4px;
    margin-top: 6px;
    overflow: hidden;
    border-radius: var(--radio-pildora);
    background: var(--rs-superficie-4);
}

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

.evento-apuntados__barra--lleno > span {
    background: var(--rs-exito);
}

/* Lo que pide atención, en pastillas; lo normal, en gris. */
.evento-fila__estado {
    width: 1%;
    white-space: nowrap;
}

.evento-fila__estado .etiqueta + .etiqueta {
    margin-left: var(--espacio-1);
}

.evento-estado--normal {
    color: var(--rs-texto-tenue);
    font-size: var(--texto-etiqueta);
}

/* Cancelado: la fila más apagada (sigue a mano para descancelarlo). */
.evento-fila--cancelado .evento-fecha,
.evento-fila--cancelado .evento-fila__nombre,
.evento-fila--cancelado .evento-fila__detalles,
.evento-fila--cancelado .evento-fila__apuntados {
    opacity: 0.55;
}

/* Duplicar, cancelar y abrir: los dos primeros discretos; abrir, la flecha que se enciende en toda la fila. */
.evento-fila__acciones {
    width: 1%;
    padding-inline: 0 var(--espacio-1) !important;
    white-space: nowrap;
    text-align: right;
}

.evento-fila__acciones > * {
    vertical-align: middle;
}

.evento-fila__abrir {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin-left: var(--espacio-1);
    border-radius: 50%;
    color: var(--rs-texto-tenue);
    transition: background-color var(--duracion-hover) var(--curva), color var(--duracion-hover) var(--curva);
}

.evento-fila:hover .evento-fila__abrir,
.evento-fila__abrir:focus-visible {
    background: color-mix(in srgb, var(--marca-acento) 12%, transparent);
    color: var(--marca-acento);
}

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

/* #region 3. Móvil: cada evento en una ficha corta */
/*
 * La fecha a la izquierda; a su lado el nombre, el tipo, el día y el sitio,
 * y debajo cuántos van y lo que pide atención. Duplicar y cancelar, arriba a
 * la derecha; la casilla, a la izquierda de todo.
 */
@media (max-width: 767px) {
    .eventos-lista__filtros .conmutador {
        width: 100%;
    }

    .eventos-lista__filtros .campo {
        flex: 1;
    }

    .eventos-lista__filtros select {
        width: 100%;
        min-width: 0;
    }

    .eventos-lista__total {
        flex-basis: 100%;
        margin-left: 0;
    }

    #tabla-eventos thead {
        display: none;
    }

    #tabla-eventos tr.evento-fila {
        display: grid !important;
        grid-template-columns: 24px 52px minmax(0, 1fr) auto;
        grid-template-areas:
            "casilla fecha evento acciones"
            ". fecha apuntados apuntados"
            ". . estado estado";
        align-items: start;
        gap: var(--espacio-1) var(--espacio-3);
        padding: var(--espacio-4) 0;
    }

    #tabla-eventos tr.evento-fila > td {
        display: block !important;
        width: auto;
        padding: 0 !important;
        background: transparent !important;
    }

    #tabla-eventos tr.evento-fila > td::before {
        content: none !important;
    }

    #tabla-eventos .columna-casilla {
        grid-area: casilla;
        padding-top: var(--espacio-1) !important;
    }

    .evento-fila__fecha {
        grid-area: fecha;
    }

    .evento-fila__evento {
        grid-area: evento;
        min-width: 0;
    }

    .evento-fila__apuntados {
        grid-area: apuntados;
    }

    .evento-fila__estado {
        grid-area: estado;
        white-space: normal;
    }

    #tabla-eventos .evento-fila__estado:has(.evento-estado--normal) {
        display: none !important;
    }

    .evento-fila__acciones {
        grid-area: acciones;
    }

    .evento-fila__abrir {
        display: none;
    }

    /* Duplicar y cancelar, arriba a la derecha y fáciles de tocar; la ficha se abre por el nombre o la fecha. */
    .evento-fila__acciones .boton-icono-fila {
        width: 32px;
        height: 32px;
    }
}
/* #endregion */

/* #region 4. La ficha de un evento: su fecha grande arriba */
/* La misma hoja de calendario de la lista, del alto de lo que tiene al lado (como la foto del socio). */
.evento-fecha--grande {
    flex: none;
    align-self: stretch;
    width: auto;
    height: auto;
    aspect-ratio: 1;
    min-height: 96px;
    border-radius: var(--radio-lg);
    box-shadow: var(--sombra-md);
}

.evento-fecha--grande strong {
    font-size: 2.25rem;
}

.evento-fecha--grande span {
    font-size: 0.875rem;
}

/* Cuántos van: una pastilla sin color de estado (ni bien ni mal, es un dato). */
.ficha-cabecera .ficha-cabecera__estado .registro-casilla--neutro {
    --tono-estado: var(--marca-acento);
}

@media (max-width: 767px) {
    .evento-fecha--grande {
        align-self: flex-start;
        width: 84px;
        min-height: 0;
    }

    /*
     * La fecha, el nombre y su estado, con «¿Cómo funciona?» arriba a la
     * derecha (como en la ficha del socio); debajo, «Publicar» a lo ancho y
     * «Cifras y descargas».
     */
    .app-panel .ficha-evento .cabecera-pagina {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        gap: var(--espacio-3);
    }

    .ficha-evento .ficha-cabecera {
        grid-row: 1;
        grid-column: 1;
    }

    .ficha-evento .cabecera-pagina > .enlace-ayuda {
        grid-row: 1;
        grid-column: 2;
    }

    .ficha-evento .cabecera-pagina__acciones {
        grid-column: 1 / -1;
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .ficha-evento #enlace-estadisticas-evento {
        align-self: flex-start;
    }
}
/* #endregion */

/* #region 5. Precios y plazas: una tabla por tipo de persona, las formas de pago y las devoluciones */
/*
 * No más ancha de lo que piden sus tablas: con cuatro columnas, a lo ancho de
 * una pantalla grande los números quedarían lejos de su tipo.
 */
.entradas-evento:not([hidden]) {
    display: grid;
    gap: var(--espacio-4);
    max-width: 64rem;
}

.entradas-evento > .tarjeta {
    margin: 0;
}

.entradas-evento h2 {
    margin: 0 0 var(--espacio-1);
    font-size: 1.0625rem;
}

/* La tarjeta: título y ayuda, la tabla, «¿Cómo cuenta…?», las formas de pago y «Guardar», con aire entre todo. */
.tarifas-evento {
    display: grid;
    gap: var(--espacio-4);
}

.tarifas-evento__cabeza .ayuda-campo {
    margin: 0;
    max-width: 62ch;
}

/* El aviso de «Activar» solo ocupa sitio cuando se ve. */
.tarifas-evento__venta:not(:has(> :not([hidden]))) {
    display: none;
}

.entradas-evento__activar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-3);
    margin: 0;
}

.entradas-evento__activar p {
    margin: 0;
    max-width: 60ch;
}

/* La tabla: el tipo a la izquierda y cada número en su columna, alineado a la derecha. */
.tarifas {
    width: 100%;
    border-collapse: collapse;
}

.tarifas th,
.tarifas td {
    padding: var(--espacio-2) var(--espacio-3);
    border-bottom: 1px solid var(--rs-borde-sutil);
    text-align: left;
    vertical-align: middle;
}

.tarifas thead th {
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
    font-weight: 600;
    white-space: nowrap;
}

.tarifas tbody tr:last-child > * {
    border-bottom: 0;
}

.tarifas tbody th {
    font-weight: 600;
}

.tarifas tbody th small {
    display: block;
    max-width: 34ch;
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
    font-weight: 400;
}

/* «Todos» manda sobre el resto: fondo suave para separarlo de los tipos. */
.tarifas__todos > * {
    background: var(--rs-superficie-2);
}

.tarifas:not(.tarifas--con-precio) .tarifas__precio {
    display: none;
}

/* Tipos de entrada y precio anticipado (28 oct 2026, migraciones 0272-0273): dos bloques en fila, compactos. */
.tarifas-evento__extras:not([hidden]) {
    display: grid;
    gap: var(--espacio-3);
}

.tipos-entrada,
.anticipado-evento {
    display: grid;
    gap: var(--espacio-2);
    margin: 0;
    padding: var(--espacio-3);
    border: 1px solid var(--rs-borde-sutil);
    border-radius: var(--radio-md);
}

.tipos-entrada legend {
    padding: 0 var(--espacio-1);
    font-weight: 600;
}

.tipos-entrada .ayuda-campo,
.anticipado-evento .ayuda-campo {
    margin: 0;
}

.tipos-entrada > .boton {
    justify-self: start;
}

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

.tipos-entrada__fila {
    display: grid;
    grid-template-columns: minmax(9rem, 2fr) minmax(6rem, 1fr) auto auto auto auto;
    align-items: end;
    gap: var(--espacio-2) var(--espacio-3);
    padding-bottom: var(--espacio-2);
    border-bottom: 1px solid var(--rs-borde-sutil);
}

.tipos-entrada__fila:last-child {
    border-bottom: 0;
}

.tipos-entrada__fila .campo {
    margin: 0;
}

.tipos-entrada__fila .campo-checkbox {
    padding-bottom: var(--espacio-2);
    white-space: nowrap;
}

.tipos-entrada__vendidas {
    padding-bottom: var(--espacio-2);
    font-size: var(--texto-etiqueta);
}

.anticipado-evento {
    grid-template-columns: auto minmax(12rem, 16rem) minmax(0, 1fr);
    align-items: center;
    gap: var(--espacio-2) var(--espacio-4);
}

.anticipado-evento__fecha {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    margin: 0;
}

.anticipado-evento__fecha label {
    margin: 0;
    white-space: nowrap;
}

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

/* El plazo para socios: lo de después de la fecha, en una fila debajo. */
.plazo-socios__mas:not([hidden]) {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--espacio-2) var(--espacio-4);
}

.plazo-socios__mas .campo {
    margin: 0;
}

.plazo-socios__fase {
    flex-basis: 100%;
    margin: 0;
}

/* La anticipada, un punto más clara: es la de «antes». */
.tarifas td.tarifas__anticipado input {
    background: var(--rs-superficie-2);
}

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

    .tipos-entrada__fila .boton--icono {
        justify-self: end;
    }
}

/* «¿Cómo cuenta el máximo?», plegado: la explicación larga no estorba. */
.tarifas-evento__como summary {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-2);
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
    font-weight: 600;
    cursor: pointer;
}

.tarifas-evento__como summary:hover {
    color: var(--marca-acento);
}

.tarifas-evento__como summary .icono {
    width: 16px;
    height: 16px;
}

.tarifas-evento__como p {
    margin: var(--espacio-2) 0 0;
    max-width: 72ch;
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
}

/* Las formas de pago: una línea de pastillas que se marcan. */
.tarifas-evento__pago {
    display: grid;
    gap: var(--espacio-2);
    margin: 0;
    padding: var(--espacio-4) 0 0;
    border: 0;
    border-top: 1px solid var(--rs-borde-sutil);
    border-radius: 0;
}

.tarifas-evento__pago legend {
    float: left;
    margin: 0 0 var(--espacio-2);
    padding: 0;
    font-size: var(--texto-base);
}

.tarifas-evento__pago legend + * {
    clear: left;
}

.tarifas-evento .formulario-acciones {
    margin: 0;
}

/* En el móvil, cada tipo en su ficha: el nombre arriba y los números en fila, con su título encima. */
@media (max-width: 767px) {
    .tarifas thead {
        display: none;
    }

    .tarifas,
    .tarifas tbody {
        display: block;
    }

    .tarifas tr {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
        align-items: end;
        gap: var(--espacio-2) var(--espacio-3);
        padding: var(--espacio-3) 0;
        border-bottom: 1px solid var(--rs-borde-sutil);
    }

    .tarifas tbody tr:last-child {
        border-bottom: 0;
    }

    .tarifas__todos {
        margin: 0 calc(var(--espacio-3) * -1);
        padding-inline: var(--espacio-3) !important;
        border-radius: var(--radio-md);
        background: var(--rs-superficie-2);
    }

    .tarifas th,
    .tarifas td,
    .tarifas__todos > * {
        padding: 0;
        border: 0;
        background: none;
    }

    .tarifas tbody th {
        grid-column: 1 / -1;
    }

    .tarifas td {
        display: grid;
        gap: var(--espacio-1);
    }

    .tarifas td::before {
        content: attr(data-titulo);
        color: var(--rs-texto-secundario);
        font-size: var(--texto-etiqueta);
    }

    .tarifas .campo-unidad {
        display: flex;
    }

    .tarifas .campo-unidad input {
        width: 100%;
        min-width: 0;
    }
}
/* #endregion */

/* #region 6. Mesas: el reparto, las mesas y quién se sienta en cada una */
.mesas-evento:not([hidden]) {
    display: grid;
    gap: var(--espacio-4);
}

.mesas-evento > .tarjeta {
    margin: 0;
}

.mesas-evento h2 {
    margin: 0;
    font-size: 1.0625rem;
}

/* El reparto: su estado (ámbar mientras es provisional, verde al cerrarlo), la ocupación y las dos acciones. */
.mesas-reparto {
    --tono-reparto: var(--rs-aviso);
    display: grid;
    gap: var(--espacio-3);
    border-left: 3px solid var(--tono-reparto);
}

.mesas-reparto--definitivo {
    --tono-reparto: var(--rs-exito);
}

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

.mesas-reparto__icono {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radio-md);
    background: color-mix(in srgb, var(--tono-reparto) 14%, transparent);
    color: var(--tono-reparto);
}

.mesas-reparto__textos {
    flex: 1 1 16rem;
    min-width: 0;
}

.mesas-reparto__estado {
    margin: 2px 0 0;
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
}

.mesas-reparto__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-2);
}

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

.mesas-reparto__barra {
    height: 8px;
    overflow: hidden;
    border-radius: var(--radio-pildora);
    background: var(--rs-superficie-4);
}

.mesas-reparto__barra > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--marca-acento);
    transition: width 400ms var(--curva);
}

.mesas-reparto__cifras {
    margin: 0;
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
    font-variant-numeric: tabular-nums;
}

.mesas-reparto__cifras strong {
    color: var(--rs-texto);
}

.mesas-reparto__ayuda,
.mesas-reparto .aviso {
    margin: 0;
}

/* Repartir solas al cerrarse el plazo (migración 0240): una línea con su interruptor, separada de lo de arriba. */
.mesas-reparto__solo {
    border-top: 1px solid var(--rs-borde-sutil);
    padding-top: var(--espacio-3);
}

/* La cabecera de una tarjeta: el título (con cuántas hay) y, a la derecha, lo que se puede hacer. */
.mesas-lista,
.mesas-comensales {
    display: grid;
    gap: var(--espacio-3);
}

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

.mesas-lista__cabeza h2 {
    flex: 1 1 auto;
}

.mesas-lista__cuenta {
    margin-left: var(--espacio-1);
    color: var(--rs-texto-tenue);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.mesas-comensales > .ayuda-campo {
    margin: 0;
}

/* Añadir o editar una mesa: un panel dentro de la tarjeta, con el borde de la asociación. */
.mesa-formulario {
    display: grid;
    gap: var(--espacio-4);
    padding: var(--espacio-4);
    border: 1px solid color-mix(in srgb, var(--marca-acento) 35%, var(--rs-borde-sutil));
    border-radius: var(--radio-lg);
    background: var(--rs-superficie-2);
}

.mesa-formulario__cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mesa-formulario__cabecera h3 {
    margin: 0;
}

.mesa-formulario__campos {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--espacio-3) var(--espacio-4);
}

.mesa-formulario__campos .campo {
    margin: 0;
}

.mesa-formulario .formulario-acciones {
    margin: 0;
}

/* Cada mesa: el dibujo de su forma, su nombre (que la abre), su forma y plazas debajo. */
.mesa-fila td {
    vertical-align: middle;
}

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

.mesa-fila__textos {
    display: grid;
    min-width: 0;
}

.mesa-fila__nombre {
    justify-self: start;
    padding: 0;
    border: 0;
    background: none;
    color: var(--rs-texto);
    font: inherit;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: color var(--duracion-hover) var(--curva);
}

.mesa-fila__nombre:hover {
    color: var(--marca-acento);
}

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

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

.mesa-fila--desactivada .mesa-forma,
.mesa-fila--desactivada .mesa-fila__textos,
.mesa-fila--desactivada .mesa-fila__ocupacion,
.mesa-fila--desactivada .mesa-fila__para {
    opacity: 0.55;
}

/* El dibujo de la forma: un círculo, un rectángulo largo, un cuadrado… en pequeño, centrado en el mismo hueco
   para que todos los nombres empiecen a la misma altura. */
.mesa-fila__forma {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 36px;
    height: 28px;
}

.mesa-forma {
    width: 28px;
    height: 28px;
    border: 2px solid color-mix(in srgb, var(--marca-acento) 55%, var(--rs-borde));
    border-radius: 50%;
    background: color-mix(in srgb, var(--marca-acento) 10%, transparent);
}

.mesa-forma--alargada {
    width: 36px;
    height: 16px;
    border-radius: 4px;
}

.mesa-forma--cuadrada {
    width: 24px;
    height: 24px;
    border-radius: 4px;
}

.mesa-forma--barra {
    width: 36px;
    height: 10px;
    border-radius: 3px;
}

.mesa-forma--otra {
    border-radius: 8px 50% 8px 50%;
}

/* Cuántas plazas están ocupadas, con su barra (verde, llena). */
.mesa-fila__ocupacion {
    width: 11rem;
}

.mesa-ocupacion {
    display: grid;
    gap: 6px;
}

.mesa-ocupacion__cifra {
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.mesa-ocupacion__cifra strong {
    color: var(--rs-texto);
    font-size: 0.9375rem;
}

.mesa-ocupacion__barra {
    display: block;
    width: 100%;
    max-width: 8rem;
    height: 4px;
    overflow: hidden;
    border-radius: var(--radio-pildora);
    background: var(--rs-superficie-4);
}

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

.mesa-ocupacion--llena .mesa-ocupacion__barra > span {
    background: var(--rs-exito);
}

/* Para quién es: el tipo (o «Cualquiera») y, si lo está, reservada o automática. */
.mesa-fila__para .etiqueta {
    margin: 2px 0 0 var(--espacio-1);
}

.mesa-fila__categoria {
    font-weight: 500;
}

.mesa-fila__acciones {
    width: 1%;
    padding-inline: 0 var(--espacio-1) !important;
    white-space: nowrap;
    text-align: right;
}

/* Quién se sienta en cada mesa: una tarjeta por mesa, en rejilla. */
.mesas-comensales__mesas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
    gap: var(--espacio-3);
}

.mesas-comensales__mesas:empty {
    display: none;
}

.mesas-comensales__vacio {
    grid-column: 1 / -1;
    margin: 0;
}

.mesa-comensales {
    padding: var(--espacio-3) var(--espacio-4);
    border: 1px solid var(--rs-borde-sutil);
    border-radius: var(--radio-md);
    background: var(--rs-superficie-2);
}

.mesa-comensales h3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 var(--espacio-2);
    font-size: var(--texto-base);
}

.mesa-comensales h3 span {
    min-width: 24px;
    padding: 0 var(--espacio-2);
    border-radius: var(--radio-pildora);
    background: var(--rs-cian-suave);
    color: var(--rs-cian-texto);
    font-size: var(--texto-pequeno);
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.mesa-comensales ul {
    display: grid;
    gap: var(--espacio-1);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--texto-etiqueta);
}

.mesa-comensales li {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
}

.mesa-comensales li > span:first-child {
    flex: 1;
    min-width: 0;
}

.mesa-comensales__mano {
    display: inline-grid;
    color: var(--rs-texto-tenue);
}

.mesa-comensales__mano .icono {
    width: 14px;
    height: 14px;
}

@media (max-width: 767px) {
    /* Cada mesa, una ficha corta: arriba su dibujo y su nombre con sus botones; debajo, la ocupación; y luego, para quién. */
    #tabla-mesas thead {
        display: none;
    }

    #tabla-mesas tr.mesa-fila {
        display: grid !important;
        grid-template-columns: 24px minmax(0, 1fr) auto;
        grid-template-areas:
            "casilla mesa acciones"
            ". ocupacion ocupacion"
            ". para para";
        align-items: center;
        gap: var(--espacio-2) var(--espacio-3);
        padding: var(--espacio-4) 0;
    }

    #tabla-mesas tr.mesa-fila > td {
        display: block !important;
        width: auto;
        min-width: 0;
        padding: 0 !important;
        background: transparent !important;
    }

    #tabla-mesas tr.mesa-fila > td::before {
        content: none !important;
    }

    .mesa-fila > .columna-casilla { grid-area: casilla; }
    .mesa-fila > .mesa-fila__celda-mesa { grid-area: mesa; }
    .mesa-fila > .mesa-fila__acciones { grid-area: acciones; }
    .mesa-fila > .mesa-fila__ocupacion { grid-area: ocupacion; width: auto; }
    .mesa-fila > .mesa-fila__para { grid-area: para; }

    .mesas-reparto__acciones {
        width: 100%;
    }

    .mesas-reparto__acciones .boton {
        flex: 1 1 auto;
        justify-content: center;
    }

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

    .mesa-formulario__nombre {
        grid-column: 1 / -1;
    }
}
/* #endregion */

/* #region 7. Datos del evento: sus tarjetas, el cartel a la derecha y un solo «Guardar» */
/* En pantallas anchas, los datos a la izquierda y el cartel, la autorización y la publicación a la derecha. */
.datos-evento {
    display: grid;
    gap: var(--espacio-4);
    align-items: start;
}

@media (min-width: 1200px) {
    .datos-evento {
        grid-template-columns: minmax(0, 1fr) 22rem;
    }

    .datos-evento__lateral {
        position: sticky;
        top: calc(var(--alto-superior) + var(--espacio-4));
        /* Si no cabe en la pantalla, baja por dentro: nunca queda cortada abajo (3 nov 2026). */
        max-height: calc(100dvh - var(--alto-superior) - var(--espacio-4) * 2);
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
    }
}

.datos-evento__principal,
.datos-evento__formulario,
.datos-evento__lateral {
    display: grid;
    gap: var(--espacio-4);
    min-width: 0;
}

.datos-evento__lateral:not(:has(> :not([hidden]))) {
    display: none;
}

.datos-evento__tarjeta {
    display: grid;
    gap: var(--espacio-4);
    margin: 0;
}

.datos-evento__tarjeta > h2 {
    margin: 0;
    font-size: 1.0625rem;
}

.datos-evento__tarjeta > h3 {
    margin: var(--espacio-2) 0 calc(-1 * var(--espacio-2));
    font-size: var(--texto-base);
}

.datos-evento__tarjeta > .ayuda-campo,
.datos-evento__tarjeta .campo {
    margin: 0;
}

.datos-evento__tarjeta > h2 + .ayuda-campo {
    margin-top: calc(-1 * var(--espacio-3));
}

/* Dónde: el lugar y la dirección en una fila y, debajo, la explicación a lo ancho. */
.datos-evento__a-lo-ancho {
    grid-column: 1 / -1;
    margin: calc(-1 * var(--espacio-2)) 0 0 !important;
}

/* Dónde se hace (migración 0401): tres tarjetas en fila (en el móvil, una debajo de otra). */
.datos-evento__donde {
    margin: 0;
    padding: 0;
    border: 0;
    display: grid;
    gap: var(--espacio-2);
}

.datos-evento__donde > legend {
    padding: 0;
    margin-bottom: var(--espacio-2);
    font-weight: 600;
}

.datos-evento__donde-opciones {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: var(--espacio-2);
}

.datos-evento__sede {
    color: var(--rs-texto-secundario);
}

/* Lo de «Cómo funciona» que un tipo «sencillo» no necesita (al crear, se esconde). */
.datos-evento__avanzados {
    display: grid;
    gap: var(--espacio-4);
}

/* Las tres horas en una fila, cada una con su explicación debajo. */
.datos-evento__horas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
    gap: var(--espacio-3) var(--espacio-4);
}

.datos-evento__horas .ayuda-campo {
    margin-top: var(--espacio-1);
}

/* La hora límite para confirmar, bajo su interruptor (solo si está encendido). */
.datos-evento__limite {
    max-width: 22rem;
    padding: 0 0 var(--espacio-3);
}

.datos-evento__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-2);
    margin-top: var(--espacio-2);
}

.datos-evento__horas-tipo {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
    gap: var(--espacio-3) var(--espacio-4);
    margin-top: var(--espacio-3);
}

/* Más opciones: una tarjeta plegada; su título y lo que trae, y la flecha que gira al abrirla. */
.datos-evento__mas {
    gap: 0;
}

.datos-evento__mas > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-3);
    list-style: none;
    cursor: pointer;
}

.datos-evento__mas > summary::-webkit-details-marker {
    display: none;
}

.datos-evento__mas > summary > span {
    display: grid;
    gap: 2px;
}

.datos-evento__mas > summary strong {
    font-size: 1.0625rem;
}

.datos-evento__mas > summary small {
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
}

.datos-evento__mas > summary .icono {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--rs-texto-secundario);
    transition: transform var(--duracion-hover) var(--curva);
}

.datos-evento__mas[open] > summary .icono {
    transform: rotate(180deg);
}

.datos-evento__mas > summary:hover strong {
    color: var(--marca-acento);
}

.datos-evento__mas > summary:focus-visible {
    outline: none;
    border-radius: var(--radio-sm);
    box-shadow: var(--anillo-foco);
}

.datos-evento__mas-contenido {
    display: grid;
    gap: var(--espacio-5);
    margin-top: var(--espacio-4);
    padding-top: var(--espacio-4);
    border-top: 1px solid var(--rs-borde-sutil);
}

.datos-evento__mas-contenido h3 {
    margin: 0 0 var(--espacio-1);
    font-size: var(--texto-base);
}

.datos-evento__temporada input {
    max-width: 8rem;
}

/* Otros idiomas: cómo va cada uno y «Traducir», que abre su ventana. */
.datos-evento__idiomas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-3);
}

.datos-evento__idiomas h2 {
    margin: 0 0 var(--espacio-2);
    font-size: 1.0625rem;
}

.datos-evento__idiomas .chips {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Dentro de su ventana, las traducciones sin su tarjeta ni su título (ya los pone la ventana). */
#ventana-traducciones .tarjeta {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}

#ventana-traducciones .tarjeta > h2 {
    display: none;
}

/* Al crear: una tarjeta por tipo, con su color, en vez de un desplegable. */
.datos-evento__tipo {
    margin: 0;
    padding: 0;
    border: 0;
}

.datos-evento__tipo legend {
    margin-bottom: 6px;
    padding: 0;
    font-size: var(--texto-etiqueta);
    font-weight: 500;
}

.tipo-evento-opciones {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
    gap: var(--espacio-2);
}

.tipo-evento-opcion {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 2px var(--espacio-2);
    padding: var(--espacio-3) var(--espacio-4);
    border: 1px solid var(--rs-borde);
    border-radius: var(--radio-lg);
    background: var(--rs-superficie-1);
    color: var(--rs-texto);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--duracion-hover) var(--curva), box-shadow var(--duracion-hover) var(--curva);
}

.tipo-evento-opcion:hover {
    border-color: color-mix(in srgb, var(--tono-evento) 55%, var(--rs-borde));
}

.tipo-evento-opcion[aria-pressed="true"] {
    border-color: var(--tono-evento);
    background: color-mix(in srgb, var(--tono-evento) 8%, var(--rs-superficie-1));
    box-shadow: 0 0 0 1px var(--tono-evento);
}

.tipo-evento-opcion:focus-visible {
    outline: none;
    box-shadow: var(--anillo-foco);
}

.tipo-evento-opcion__punto {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--tono-evento);
}

.tipo-evento-opcion small {
    grid-column: 2;
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
}

/* El cartel: la zona apaisada y, con foto, «Cambiar» y «Quitar» debajo. */
.datos-evento__botones-archivo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-3);
}

.datos-evento__botones-archivo:not(:has(> :not([hidden]))) {
    display: none;
}

.seccion-definitivo .boton {
    justify-self: start;
}

/* Los avisos que han salido solos de este evento (migración 0208). */
.avisos-evento {
    display: grid;
    gap: var(--espacio-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.avisos-evento__fila {
    display: grid;
    gap: 2px;
}

.avisos-evento__fila span {
    color: var(--rs-texto-secundario);
    font-size: var(--texto-pequeno);
}

/* El «Guardar» de todo: al final, y pegado abajo mientras haya cambios. */
.datos-evento__acciones {
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
}

.datos-evento__acciones .aviso {
    flex-basis: 100%;
    margin: 0;
}
/* #endregion */

/* #region Turnos del día en la lista de eventos (28 oct 2026, migración 0275) */
.evento-fila__turnos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-1) var(--espacio-2);
    margin-top: var(--espacio-1);
}

.evento-fila__turno {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-1);
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--tono-evento, var(--marca-acento)) 12%, transparent);
    color: inherit;
    font-size: 0.82rem;
    text-decoration: none;
}

.evento-fila__turno:hover {
    background: color-mix(in srgb, var(--tono-evento, var(--marca-acento)) 22%, transparent);
}

.evento-fila__turno small {
    font-weight: 700;
}

.evento-fila__turno--cancelado {
    text-decoration: line-through;
    opacity: 0.6;
}
/* #endregion */

/* #region Mesa de menores por edad y cómo se sienta la gente (31 oct 2026, migración 0317) */
.mesa-edades {
    border: 0;
    padding: 0;
    margin: 0;
}
.mesa-edades__fila {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-2);
}
.mesa-edades__fila input {
    width: 5rem;
}
.mesas-como {
    margin-block: var(--espacio-3);
}
/* #endregion */