/*
 * La ficha de un evento (/gestion/eventos-formulario): lo de sus pestañas que
 * no está en eventos.css ni en quien-viene.css.
 *
 * Solo la carga plantillas/gestion/eventos-formulario.php, la última, después
 * de panel.css, gestion.css (de ahí salen la tarjeta, las pestañas, los
 * chips, el conmutador, la ventana con un formulario y la pestaña Barra),
 * eventos.css (la cabecera de la ficha, Precios y plazas, las mesas, el dibujo
 * de cada forma de mesa y Datos del evento) y quien-viene.css (la lista de
 * Asistentes). Las piezas van en el orden de las pestañas:
 *
 *   1. Asistentes: los botones para añadir gente
 *   2. La ventana «Añadir entradas»: cómo, para quién y cuántas
 *   3. Vender una entrada: socio o no, e invitados de una vez
 *   4. Apuntar un asistente a mano
 *   5. La ventana «¿Viene o no viene?»
 *   6. Por revisar: lo que pasó por la puerta sin conexión
 *   7. Precios y plazas: las formas de pago, pastillas que se marcan
 *   8. Mesas, el plano de la sala: la cabecera y lo que se pone en él
 *   9. Mesas, el plano de la sala: el plano, el zoom y el panel del local
 *  10. Mesas, el plano de la sala: abajo, «Guardar» y las plantillas
 *  11. Mesas, el plano de la sala a pantalla completa
 *  12. Menú: la carta, qué se elige y lo que necesita el restaurante
 *  13. Subir un archivo: la carta del Menú, y el cartel y la autorización de Datos del evento
 *  14. Opinión: la encuesta y qué se pregunta
 *  15. Opinión: lo que opinan
 *  16. La cabecera: lo que se usa de vez en cuando, en «Más»
 *  17. Pantallas anchas: Precios, Menú y Opinión en dos columnas
 *
 * Convenciones:
 * - Lo elegido y lo que se puede pulsar, en el color de la asociación; lo
 *   que pide atención, en ámbar.
 * - Colores, radios y espacios, de tokens de base.css.
 */

/* #region 1. Asistentes: los botones para añadir gente */
.ficha-evento__altas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-2);
}
/* #endregion */

/* #region 2. La ventana «Añadir entradas»: cómo, para quién y cuántas */
/* Cómo (dos opciones grandes), para quién (cada uno en su tarjeta) y el botón con cuántas. */
.dar-entradas {
    display: grid;
    gap: var(--espacio-5);
}

/* Lo que aún no tiene nada (los socios elegidos, sus platos, los de fuera) no deja huecos. */
.dar-entradas :is(.ventana-paso, .dar-entradas) > :empty,
.dar-entradas > :empty {
    display: none;
}

.dar-entradas__explica {
    margin: 0;
}

/* «De pago» sin venta: por qué y dónde se arregla. */
.dar-entradas__sin-venta {
    display: grid;
    justify-items: start;
    gap: var(--espacio-1);
    margin: 0;
}

.dar-entradas__sin-venta p {
    margin: 0;
}

.dar-entradas__sin-venta .enlace-flecha {
    min-height: 32px;
}

/* Cada socio elegido: su cara, su nombre y su número, su entrada, sus invitados y quitarlo. */
.dar-entradas__elegidos {
    display: grid;
    gap: var(--espacio-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.dar-entradas__elegido {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: var(--espacio-2) var(--espacio-3);
    padding: var(--espacio-2) var(--espacio-2) var(--espacio-2) var(--espacio-3);
    border: 1px solid var(--rs-borde);
    border-radius: var(--radio-lg);
    background: var(--rs-superficie-1);
}

.dar-entradas__quien {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.dar-entradas__quien small {
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
}

.dar-entradas__suya,
.dar-entradas__papel {
    margin: 0;
    font-size: var(--texto-etiqueta);
}

.dar-entradas__invitados {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-1);
    font-size: var(--texto-etiqueta);
}

.dar-entradas__invitados input {
    width: 4rem;
    padding-block: 2px;
}

.dar-entradas__papel {
    grid-column: 2 / -1;
}

/* Quitarlo, siempre arriba a la derecha. */
.dar-entradas__elegido > [data-quitar-socio] {
    grid-row: 1;
    grid-column: -2;
}

/* En el móvil, su entrada y sus invitados bajan a otra línea, bajo su nombre. */
@media (max-width: 767px) {
    .dar-entradas__elegido {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .dar-entradas__elegido :is(.dar-entradas__suya, .dar-entradas__invitados) {
        grid-column: 2 / -1;
    }
}

/* Cada persona de fuera, en su tarjeta: su título y la ✕ arriba, y sus datos con aire entre cada fila. */
.dar-entradas__fuera {
    position: relative;
    display: grid;
    gap: var(--espacio-3);
    min-width: 0;
    margin: 0;
    padding: var(--espacio-3) var(--espacio-4) var(--espacio-4);
    border: 1px solid var(--rs-borde);
    border-radius: var(--radio-lg);
    background: var(--rs-superficie-1);
}

.dar-entradas__fuera .fila-campos,
.dar-entradas__fuera .campo {
    margin: 0;
}

.dar-entradas__fuera-cabeza span {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-2);
    font-weight: 600;
}

.dar-entradas__fuera-cabeza .icono {
    width: 16px;
    height: 16px;
    color: var(--marca-acento);
}

.dar-entradas__fuera-quitar {
    position: absolute;
    top: var(--espacio-2);
    right: var(--espacio-2);
}

/* «Es menor» y, si lo es, su fecha de nacimiento (y la firma de sus padres), uno debajo de otro. */
.dar-entradas__menor {
    display: grid;
    gap: var(--espacio-3);
    padding-top: var(--espacio-3);
    border-top: 1px solid var(--rs-borde-sutil);
}

.dar-entradas__menor .campo {
    max-width: 16rem;
}

/* El plato y las alergias de cada socio o invitado, una tarjeta por persona. */
.dar-entradas__comensal + .dar-entradas__comensal {
    margin-top: var(--espacio-2);
}

.dar-entradas__anadir-fuera {
    justify-self: start;
}
/* #endregion */

/* #region 3. Vender una entrada: socio o no, e invitados de una vez */
/*
 * «Es socio / No es socio»: dos pestañas; la elegida, del color de los
 * botones de la asociación (con conmutador.js, en la pastilla).
 */
.venta-tipo {
    --conmutador-pastilla: var(--marca-boton);
    --conmutador-radio: var(--radio-pildora);
    display: inline-flex;
    align-self: flex-start;
    gap: 2px;
    margin-bottom: var(--espacio-3);
    padding: 3px;
    border: 1px solid var(--rs-borde);
    border-radius: var(--radio-pildora);
    background: var(--rs-superficie-2);
}

.venta-tipo button {
    min-height: 36px;
    padding: 0 var(--espacio-4);
    border: 0;
    border-radius: var(--radio-pildora);
    background: transparent;
    color: var(--rs-texto-secundario);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.venta-tipo button[aria-pressed="true"] {
    color: var(--marca-sobre-boton);
}

.venta-tipo:not(.conmutador--animado) button[aria-pressed="true"] {
    background: var(--marca-boton);
}

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

.venta-bloque {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-3);
}

/* Los invitados: cuántos y, si hacen falta, sus nombres. */
.venta-invitados {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-2);
    padding: var(--espacio-3) var(--espacio-4);
    border: 1px solid var(--rs-borde-sutil);
    border-radius: var(--radio-md);
}

.venta-invitados > label {
    font-weight: 600;
}

.venta-contador {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-2);
}

.venta-contador input {
    width: 5rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.venta-invitados__detalle {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-2);
}

.venta-nombres {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-1);
    max-height: 22rem;
    overflow-y: auto;
}
/* #endregion */

/* #region 4. Apuntar un asistente a mano */
#asistente-formulario {
    margin: var(--espacio-3) 0 var(--espacio-4);
}
/* #endregion */

/* #region 5. La ventana «¿Viene o no viene?» */
/* Si dice que no viene: el aviso y, si trae acompañantes, cuáles. */
.ventana-viene__no-asistir p {
    margin: 0 0 var(--espacio-2);
}
/* #endregion */

/* #region 6. Por revisar: lo que pasó por la puerta sin conexión */
.por-revisar {
    border-left: 4px solid var(--rs-aviso);
    margin-bottom: var(--espacio-4);
}

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

.por-revisar__fila {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-2) var(--espacio-3);
    padding: var(--espacio-2) 0;
    border-top: 1px solid var(--rs-borde);
}

.por-revisar__texto {
    flex: 1 1 18rem;
    min-width: 0;
}

.por-revisar__texto p {
    margin: var(--espacio-1) 0;
}

/* Cómo va el cobro de una entrada fuera de plazo (migración 0229). */
.fuera-plazo__cobro {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-2);
    font-weight: 600;
}

.fuera-plazo__cobro .icono {
    width: 16px;
    height: 16px;
}

.fuera-plazo__cobro--por_pagar { color: var(--rs-aviso-texto); }
.fuera-plazo__cobro--pagada { color: var(--rs-exito-texto); }
.fuera-plazo__cobro--anulada { color: var(--rs-peligro-texto); }
/* #endregion */

/* #region 7. Precios y plazas: las formas de pago, pastillas que se marcan */
/* Una casilla con forma de chip: la casilla no se ve; marcada, el chip se rellena y sale su ✓. */
.chip--casilla {
    position: relative;
}

.chip--casilla input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.chip--casilla .icono {
    display: none;
    width: 14px;
    height: 14px;
}

.chip--casilla:has(input:checked) {
    border-color: color-mix(in srgb, var(--marca-acento) 55%, var(--rs-borde));
    background: color-mix(in srgb, var(--marca-acento) 10%, transparent);
    color: var(--rs-texto);
}

.chip--casilla:has(input:checked) .icono {
    display: inline;
    color: var(--marca-acento);
}

.chip--casilla:has(input:focus-visible) {
    box-shadow: var(--anillo-foco);
}
/* #endregion */

/* #region 8. Mesas, el plano de la sala: la cabecera y lo que se pone en él */
/* El editor (plano-sala-editor.js), en su tarjeta de la pestaña Mesas. */
.plano-editor {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-4);
}

.plano-editor h2 {
    margin: 0;
    font-size: 1.0625rem;
}

.plano-editor__cabeza {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--espacio-3);
}

.plano-editor__cabeza .ayuda-campo {
    margin: 0;
}

.plano-editor__titulos {
    flex: 1 1 24rem;
}

.plano-editor__acciones-cabeza {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-2);
}

/* Ver en 3D (26 oct 2026): la sala como la verán los socios y, al lado, quién se sienta en la mesa tocada. */
.plano3d-ventana {
    width: min(78rem, calc(100vw - 2rem));
    max-height: calc(100dvh - 2rem);
    padding: var(--espacio-4);
    border: 1px solid var(--rs-borde);
    border-radius: var(--radio-lg);
    background: var(--rs-superficie-1);
    color: var(--rs-texto);
}

.plano3d-ventana::backdrop {
    background: rgb(0 0 0 / .65);
}

.plano3d-ventana__cabeza {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--espacio-3);
}

.plano3d-ventana__cabeza h2 {
    margin: 0;
    font-size: var(--texto-h3);
}

.plano3d-ventana__cabeza form {
    margin: 0;
}

.plano3d-ventana__cuerpo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(14rem, 18rem);
    gap: var(--espacio-4);
    align-items: start;
}

.plano3d-ventana__mesa {
    display: grid;
    gap: var(--espacio-2);
    padding: var(--espacio-4);
    border: 1px solid var(--rs-borde);
    border-radius: var(--radio-md);
    background: var(--rs-superficie-2);
    max-height: 70dvh;
    overflow-y: auto;
}

.plano3d-ventana__mesa h3 {
    margin: 0;
    font-family: var(--fuente-display);
    font-size: var(--texto-h2);
}

.plano3d-ventana__mesa .ayuda-campo {
    margin: 0;
}

.plano3d-ventana__pista {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    margin: 0;
    color: var(--rs-texto-secundario);
}

/* Quién se sienta, en grande (Rafa: «que se vean en grande»). */
.plano3d-ventana__nombres {
    display: grid;
    gap: var(--espacio-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.plano3d-ventana__nombres li {
    padding: var(--espacio-2) var(--espacio-3);
    border-radius: var(--radio-sm);
    background: var(--rs-superficie-3);
    font-family: var(--fuente-display);
    font-size: var(--texto-grande);
    font-weight: 600;
}

@media (max-width: 760px) {
    .plano3d-ventana__cuerpo {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Lo recuperado sin guardar: el aviso y sus dos botones en una línea. */
.plano-editor__borrador {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-2) var(--espacio-3);
    margin: 0;
}

.plano-editor__borrador-texto {
    flex: 1 1 20rem;
}

/* Lo que se pone en el plano: las mesas que faltan y las demás cosas, cada grupo en su fila de chips. */
.plano-editor__barra {
    display: grid;
    gap: var(--espacio-3);
    padding: var(--espacio-3) var(--espacio-4);
    border: 1px solid var(--rs-borde-sutil);
    border-radius: var(--radio-md);
    background: var(--rs-superficie-2);
}

.plano-editor__grupo-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-2);
}

.plano-editor__grupo-barra + .plano-editor__grupo-barra {
    padding-top: var(--espacio-3);
    border-top: 1px solid var(--rs-borde-sutil);
}

.plano-editor__barra-etiqueta {
    min-width: 4.5rem;
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
    font-weight: 600;
}

.plano-editor__chips {
    display: contents;
}

/* Una mesa por colocar: el dibujo de su forma, en pequeño (.mesa-forma, en eventos.css). */
.plano-editor__forma {
    display: grid;
    place-items: center;
    width: 22px;
    height: 16px;
}

.plano-editor__forma .mesa-forma {
    width: 16px;
    height: 16px;
    border-width: 1.5px;
}

.plano-editor__forma .mesa-forma--alargada {
    width: 22px;
    height: 10px;
}

.plano-editor__forma .mesa-forma--cuadrada {
    width: 14px;
    height: 14px;
}

.plano-editor__forma .mesa-forma--barra {
    width: 22px;
    height: 6px;
}

/* Cuando ya están todas colocadas. */
.plano-editor__todas {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--rs-exito-texto);
    font-size: var(--texto-etiqueta);
    font-weight: 500;
}

.plano-editor__todas .icono {
    width: 15px;
    height: 15px;
}

/* «Colocarlas todas»: en el color de la asociación, para distinguirlo de las mesas. */
.plano-editor__barra .chip--accion {
    border-color: color-mix(in srgb, var(--marca-acento) 40%, var(--rs-borde));
    color: var(--marca-acento);
    font-weight: 600;
}

.plano-editor__elemento .icono {
    width: 15px;
    height: 15px;
    color: var(--rs-texto-secundario);
}

.plano-editor__elemento:hover .icono {
    color: var(--marca-acento);
}
/* #endregion */

/* #region 9. Mesas, el plano de la sala: el plano, el zoom y el panel del local */
.plano-editor__cuerpo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 19rem);
    gap: var(--espacio-4);
    align-items: start;
}

/* El plano se queda a la vista mientras se baja por el panel del local (que puede ser largo). */
.plano-editor__lienzo {
    position: sticky;
    top: calc(var(--alto-superior) + var(--espacio-4));
}

/* Sin sitio para los dos lado a lado, el panel va debajo del plano. */
@media (max-width: 1023px) {
    .plano-editor__cuerpo {
        grid-template-columns: minmax(0, 1fr);
    }

    .plano-editor__lienzo {
        position: static;
    }
}

/* Con zoom, el fondo se agarra para moverse por la sala. */
.plano--con-zoom {
    cursor: grab;
}

.plano--moviendo {
    cursor: grabbing;
}

/* Debajo del plano: la ayuda a un lado y el zoom al otro (encima del plano tapaba las mesas de la esquina). */
.plano-editor__bajo {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--espacio-2) var(--espacio-4);
    margin-top: var(--espacio-2);
}

.plano-editor__teclado {
    display: flex;
    align-items: flex-start;
    gap: var(--espacio-2);
}

.plano-editor__teclado .icono {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    margin-top: 2px;
}

.plano-editor__bajo .plano-editor__teclado {
    flex: 1 1 22rem;
    margin: 0;
}

.plano-editor__zoom {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--rs-borde);
    border-radius: var(--radio-md);
    background: var(--rs-superficie-1);
}

.plano-editor__zoom-valor {
    min-width: 3.25rem;
    color: var(--rs-texto-secundario);
    font-size: var(--texto-pequeno);
    font-weight: 600;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* Al lado: el local y lo que se ha elegido en el plano. */
.plano-editor__lateral {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-3);
    padding: var(--espacio-4);
    border: 1px solid var(--rs-borde-sutil);
    border-radius: var(--radio-md);
    background: var(--rs-superficie-2);
}

.plano-editor__lateral :is(h3, h4) {
    margin: 0;
    font-size: var(--texto-base);
}

.plano-editor__propiedades {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-2);
}

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

.plano-editor__grupo legend {
    float: left;
    width: 100%;
    margin: 0 0 var(--espacio-1);
    padding: 0;
    font-size: var(--texto-etiqueta);
    font-weight: 600;
    color: var(--rs-texto-secundario);
}

.plano-editor__botones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-2);
}

.plano-editor__sala {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
}

.plano-editor__sala input {
    flex: 1;
    min-width: 0;
}

.plano-editor__quitar {
    align-self: flex-start;
}
/* #endregion */

/* #region 10. Mesas, el plano de la sala: abajo, «Guardar» y las plantillas */
/* Si los socios ven el plano (interruptor) y «Guardar el plano». */
.plano-editor__pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-3) var(--espacio-5);
    padding-top: var(--espacio-4);
    border-top: 1px solid var(--rs-borde-sutil);
}

.plano-editor__visible {
    flex: 1 1 18rem;
}

/* Las plantillas: plegadas, se usan poco. */
.plano-editor__plantillas {
    padding-top: var(--espacio-3);
    border-top: 1px solid var(--rs-borde-sutil);
}

.plano-editor__plantillas > summary {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-2);
    color: var(--rs-texto-secundario);
    font-weight: 600;
    cursor: pointer;
}

.plano-editor__plantillas > summary .icono {
    width: 16px;
    height: 16px;
}

.plano-editor__plantillas > summary:hover {
    color: var(--marca-acento);
}

.plano-editor__plantillas[open] > summary {
    margin-bottom: var(--espacio-3);
}

.plano-editor__plantilla {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--espacio-3);
    margin-bottom: var(--espacio-3);
}

.plano-editor__plantilla .campo {
    flex: 1 1 16rem;
    max-width: 24rem;
    margin: 0;
}
/* #endregion */

/* #region 11. Mesas, el plano de la sala a pantalla completa */
/*
 * Todo cabe sin desplazar. Arriba el título y la barra; en medio el plano,
 * tan grande como quepa (sin deformarse), con el panel al lado; abajo,
 * «Guardar». Sin las plantillas ni la explicación del título.
 */
.plano-editor--pantalla {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-3);
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    padding: var(--espacio-4) var(--espacio-6);
    border-radius: 0;
    background: var(--rs-fondo);
}

/* Si el navegador no deja ponerlo a pantalla completa, ocupa toda la ventana. */
.plano-editor--pantalla:not(:fullscreen) {
    position: fixed;
    inset: 0;
    z-index: 60;
}

/* Y la página de debajo no se desplaza. */
html.con-plano-ampliado {
    overflow: hidden;
}

.plano-editor--pantalla > * {
    flex: none;
}

.plano-editor--pantalla .plano-editor__titulos .ayuda-campo {
    display: none;
}

.plano-editor--pantalla .plano-editor__cuerpo {
    flex: 1 1 auto;
    min-height: 0;
    align-items: stretch;
}

@media (min-width: 1024px) {
    .plano-editor--pantalla .plano-editor__cuerpo {
        grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
    }
}

.plano-editor--pantalla .plano-editor__lienzo {
    position: static;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.plano-editor--pantalla .plano {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
}

.plano-editor--pantalla .plano-editor__lateral {
    min-height: 0;
    overflow-y: auto;
}

.plano-editor--pantalla .plano-editor__pie {
    padding-top: var(--espacio-3);
}

.plano-editor--pantalla .plano-editor__plantillas {
    display: none;
}
/* #endregion */

/* #region 12. Menú: la carta, qué se elige y lo que necesita el restaurante */
/*
 * Una columna, como Precios y plazas y Opinión: la carta, qué se elige y lo
 * del restaurante. Lado a lado, la tarjeta más corta dejaba un hueco debajo
 * (o dentro, si se estiraba).
 */
.menu-evento:not([hidden]) {
    display: grid;
    gap: var(--espacio-4);
    max-width: 64rem;
}

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

.menu-evento .ayuda-campo {
    margin: 0;
}

.menu-evento__fichero,
.menu-evento__elecciones,
.menu-evento__restaurante {
    display: grid;
    gap: var(--espacio-3);
    margin: 0;
}

.menu-evento__fichero,
.menu-evento__elecciones {
    align-content: start;
}

/* La carta: su imagen (o el PDF, con .archivo-subido) y «Quitar». */
.menu-evento__imagen {
    display: block;
    overflow: hidden;
    border: 1px solid var(--rs-borde);
    border-radius: var(--radio-md);
}

.menu-evento__imagen img {
    display: block;
    width: 100%;
    max-height: 22rem;
    object-fit: contain;
    background: var(--rs-superficie-2);
}

#menu-vista:empty {
    display: none;
}

.menu-evento__quitar,
.menu-evento__anadir {
    justify-self: start;
}

/* Qué se elige: cada elección, con sus opciones debajo. */
.menu-evento__lista-elecciones {
    display: grid;
    gap: var(--espacio-3);
}

.menu-evento__eleccion {
    display: grid;
    gap: var(--espacio-2);
    margin: 0;
    padding: var(--espacio-3);
    border: 1px solid var(--rs-borde);
    border-radius: var(--radio-md);
}

.menu-evento__eleccion .campo {
    margin: 0;
}

.menu-evento__fila {
    display: flex;
    gap: var(--espacio-2);
    align-items: center;
}

.menu-evento__fila input {
    flex: 1;
    min-width: 0;
}

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

.menu-evento__cerrado {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
}

/* «Guardar el menú» y, un momento, «Guardado» a su lado (.guardado-flash). */
.menu-evento__guardar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-3);
}

/* Lo que necesita el restaurante: los comensales, cada elección con su tabla y las alergias, con aire entre todo. */
.menu-evento__bloque {
    display: grid;
    gap: var(--espacio-3);
}

.menu-evento__bloque:empty {
    display: none;
}

.menu-evento__bloque h3 {
    margin: var(--espacio-3) 0 0;
    font-size: var(--texto-base);
}

.menu-evento__bloque > :is(.chips, .estado-vacio, .menu-evento__alergias, .aviso) {
    margin: 0;
}

/* Cuántos comensales: la cifra grande. */
.menu-evento__comensales {
    display: flex;
    align-items: baseline;
    gap: var(--espacio-2);
    margin: 0;
}

.menu-evento__comensales strong {
    font-family: var(--fuente-display);
    font-size: 1.75rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.menu-evento__comensales span {
    color: var(--rs-texto-secundario);
}

/* Las alergias: quién, en qué mesa y qué, una por línea. */
.menu-evento__alergias {
    display: grid;
    gap: var(--espacio-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu-evento__alergias li {
    display: flex;
    gap: var(--espacio-3);
    align-items: flex-start;
    padding: var(--espacio-2) 0;
    border-bottom: 1px solid var(--rs-borde-sutil);
}

.menu-evento__alergias li > span:last-child {
    display: grid;
}

.menu-evento__alergias small {
    color: var(--rs-aviso);
    font-weight: 600;
}

.menu-evento__mesa {
    min-width: 4.5rem;
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
}
/* #endregion */

/* #region 13. Subir un archivo: la carta del Menú, y el cartel y la autorización de Datos del evento (la zona, en gestion.css) */
.zona-archivo--imagen .imagen-evento-vista {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Un archivo ya subido: su nombre, que lo abre en otra pestaña. */
.archivo-subido {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    padding: var(--espacio-3);
    border: 1px solid var(--rs-borde);
    border-radius: var(--radio-md);
    color: var(--rs-texto);
    font-weight: 500;
    text-decoration: none;
}

.archivo-subido span {
    flex: 1;
}

.archivo-subido .icono:first-child {
    color: var(--rs-peligro);
}

.archivo-subido .icono:last-child {
    width: 15px;
    height: 15px;
    color: var(--rs-texto-tenue);
}

.archivo-subido:hover {
    border-color: var(--marca-acento);
    color: var(--marca-acento);
}
/* #endregion */

/* #region 14. Opinión: la encuesta y qué se pregunta */
/* Una columna: la encuesta y lo que opinan; cuando ya ha opinado alguien, eso va arriba. */
.encuesta-junta {
    display: grid;
    gap: var(--espacio-4);
    max-width: 64rem;
}

.encuesta-junta > .tarjeta {
    display: grid;
    gap: var(--espacio-4);
    align-content: start;
    margin: 0;
}

.encuesta-junta--con-opiniones .encuesta-junta__resultados {
    order: -1;
}

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

.encuesta-junta h3 {
    margin: 0 0 var(--espacio-1);
    font-size: var(--texto-base);
}

.encuesta-junta .ayuda-campo {
    margin: 0;
    max-width: 66ch;
}

/* La cabecera: el título y su explicación, y el interruptor a la derecha. */
.encuesta-junta__cabeza {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--espacio-4);
}

/* En qué está (apagada, se abrirá, abierta, cerrada), con su punto de color, y los días que está abierta. */
.encuesta-junta__estado {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-2) var(--espacio-4);
    padding: var(--espacio-3) var(--espacio-4);
    border-radius: var(--radio-md);
    background: var(--rs-superficie-2);
}

.encuesta-junta__estado p {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    margin: 0;
    font-weight: 600;
}

.encuesta-junta__estado p::before {
    content: "";
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--rs-texto-tenue);
}

.encuesta-junta__estado p[data-estado="abierta"]::before { background: var(--rs-exito); }
.encuesta-junta__estado p[data-estado="antes"]::before { background: var(--rs-azul); }
.encuesta-junta__estado p[data-estado="cerrada"]::before { background: var(--rs-aviso); }

.encuesta-junta__dias {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-2);
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
}

.encuesta-junta__dias input {
    width: 4.5rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Qué se pregunta: los platos, vuestras preguntas y el comentario, numerados seguidos. */
.encuesta-junta__que {
    display: grid;
    gap: var(--espacio-3);
    padding-top: var(--espacio-4);
    border-top: 1px solid var(--rs-borde-sutil);
}

.encuesta-junta__que .formulario-acciones {
    margin: 0;
}

.encuesta-que {
    display: grid;
    gap: var(--espacio-2);
    counter-reset: pregunta;
}

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

.encuesta-que__lista:empty {
    display: none;
}

/* Cada pregunta: su número, su texto, las estrellas de muestra y sus botones. */
.encuesta-que__fila {
    display: grid;
    grid-template-columns: 1.75rem minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--espacio-2) var(--espacio-3);
    counter-increment: pregunta;
}

.encuesta-que__fila::before {
    content: counter(pregunta);
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--rs-superficie-2);
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Un plato: su nombre (no se toca aquí), «Del menú» y sus estrellas, en la misma línea que las preguntas. */
.encuesta-que__fila--plato {
    min-height: 2.75rem;
    padding: 0 var(--espacio-3) 0 0;
}

.encuesta-que__texto {
    font-weight: 600;
}

.encuesta-que__estrellas {
    color: color-mix(in srgb, #f5b301 45%, var(--rs-borde));
    letter-spacing: 2px;
    white-space: nowrap;
}

.encuesta-que__botones {
    display: inline-flex;
    gap: var(--espacio-1);
}

/* Cómo se dice en los otros idiomas: debajo de su pregunta, a lo ancho (el bloque ya trae su marco). */
.encuesta-que__traducciones {
    grid-column: 2 / -1;
}

.encuesta-junta__anadir {
    justify-self: start;
    margin-left: calc(1.75rem + var(--espacio-3));
}

/* Una pregunta guardada lleva su casilla «se pregunta en este evento» (27 oct 2026). */
.encuesta-que__fila:has(.encuesta-que__en-evento) {
    grid-template-columns: 1.75rem minmax(0, 1fr) auto auto auto;
}

.encuesta-que__en-evento {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.encuesta-que__en-evento input {
    width: 1.15rem;
    height: 1.15rem;
    accent-color: var(--rs-azul);
}

/* Las preguntas que este evento no hace, y los platos si no se valoran: a la vista, pero apagados. */
.encuesta-que__fila:has([data-en-evento]:not(:checked)) input[type="text"],
.encuesta-que__fila:has([data-en-evento]:not(:checked)) .encuesta-que__estrellas,
.encuesta-que__lista--apagada .encuesta-que__fila {
    opacity: 0.45;
}

/* Cómo es la encuesta en este evento: platos, porqué y para quién es el informe. */
.encuesta-junta__opciones {
    display: grid;
    gap: var(--espacio-3);
    margin-top: var(--espacio-3);
}

.encuesta-junta__opciones[hidden] {
    display: none;
}

.encuesta-junta__opciones .campo-checkbox span {
    display: grid;
}

.encuesta-junta__opciones .campo {
    max-width: 28rem;
}

/* La forma de puntuar es de la asociación: una línea que lleva a Configuración. */
.encuesta-junta__configurar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-2);
    margin: var(--espacio-5) 0 0;
    padding-top: var(--espacio-4);
    border-top: 1px solid var(--rs-borde-sutil);
    color: var(--rs-texto-secundario);
    font-size: var(--texto-pequeno);
}

.encuesta-junta__configurar a {
    font-weight: 600;
}

/* En el móvil, las estrellas de muestra no caben al lado: se quedan las del plato, debajo de su nombre. */
@media (max-width: 767px) {
    .encuesta-que__fila {
        grid-template-columns: 1.75rem minmax(0, 1fr) auto;
    }

    .encuesta-que__fila:has(.encuesta-que__en-evento) {
        grid-template-columns: 1.75rem minmax(0, 1fr) auto auto;
    }

    .encuesta-que__fila .encuesta-que__estrellas {
        display: none;
    }

    .encuesta-que__traducciones {
        grid-column: 1 / -1;
    }

    .encuesta-junta__anadir {
        margin-left: 0;
    }
}

/* El comentario del final, fijo: en gris y con su icono. */
.encuesta-que__comentario {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    margin: var(--espacio-1) 0 0;
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
}

.encuesta-que__comentario .icono {
    width: 1.75rem;
    height: 16px;
}
/* #endregion */

/* #region 15. Opinión: lo que opinan */
/* Sin opiniones: una línea que dice cuándo llegarán. */
.encuesta-junta__vacio {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    margin: 0;
    color: var(--rs-texto-secundario);
}

.encuesta-junta__vacio .icono {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--rs-aviso);
}

.encuesta-junta__vacio strong {
    color: var(--rs-texto);
}

/* Las cifras: una franja fina con divisiones. */
.encuesta-cifras {
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    border: 1px solid var(--rs-borde);
    border-radius: var(--radio-lg);
}

.encuesta-cifra {
    display: grid;
    flex: 1 1 9rem;
    gap: 2px;
    margin: 0;
    padding: var(--espacio-3) var(--espacio-4);
    border-left: 1px solid var(--rs-borde-sutil);
}

.encuesta-cifra:first-child {
    border-left: 0;
}

.encuesta-cifra strong {
    font-family: var(--fuente-display);
    font-size: 1.375rem;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

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

.encuesta-filas,
.encuesta-comentarios {
    margin: 0;
    padding: 0;
    list-style: none;
}

.encuesta-filas:empty {
    display: none;
}

/* Cada pregunta: qué, su nota media y cuántos dieron cada número de estrellas. */
.encuesta-fila {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--espacio-4);
    padding: var(--espacio-3) 0;
    border-top: 1px solid var(--rs-borde-sutil);
}

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

.encuesta-fila:first-child {
    border-top: 0;
}

.encuesta-fila__que {
    display: grid;
    min-width: 0;
}

.encuesta-fila__que .texto-tenue {
    font-size: var(--texto-etiqueta);
}

.encuesta-fila__nota {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-2);
}

.encuesta-fila__media {
    font-size: var(--texto-h3);
    font-weight: 700;
}

.encuesta-fila__reparto {
    display: flex;
    align-items: flex-end;
    gap: var(--espacio-1);
    height: 2.4rem;
}

.encuesta-fila__barra {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    width: 14px;
    height: 100%;
}

.encuesta-fila__barra > span {
    display: block;
    width: 100%;
    min-height: 2px;
    border-radius: 3px 3px 0 0;
    background: #f5b301;
}

.encuesta-fila__barra small {
    font-size: 0.65rem;
    color: var(--rs-texto-tenue);
}

/* La conclusión de cada cosa (27 oct 2026): la enhorabuena o qué mejorar y por qué, con su color. */
.encuesta-fila__conclusion,
.encuesta-fila__dicen {
    grid-column: 1 / -1;
    margin: 0;
}

.encuesta-fila__conclusion {
    padding: var(--espacio-2) var(--espacio-3);
    border-left: 4px solid var(--rs-azul);
    border-radius: 0 8px 8px 0;
    background: var(--rs-superficie-2);
}

.encuesta-fila__conclusion--enhorabuena { border-left-color: var(--rs-exito); }
.encuesta-fila__conclusion--mejorable { border-left-color: var(--rs-aviso); }
.encuesta-fila__conclusion--mejorar { border-left-color: var(--rs-peligro); }

.encuesta-fila__dicen summary {
    cursor: pointer;
    color: var(--rs-azul);
    font-weight: 600;
    font-size: var(--texto-etiqueta);
}

.encuesta-fila__dicen ul {
    margin: var(--espacio-2) 0 0;
    padding: 0;
    list-style: none;
}

.encuesta-fila__dicen li {
    padding: var(--espacio-1) 0;
    white-space: pre-line;
}

.encuesta-fila__cita-estrellas {
    color: #f5b301;
    letter-spacing: 1px;
}

/* Los comentarios, uno debajo de otro y con sus saltos de línea. */
.encuesta-comentarios li {
    padding: var(--espacio-2) 0;
    border-top: 1px solid var(--rs-borde-sutil);
}

.encuesta-comentarios p {
    margin: 0 0 var(--espacio-1);
    white-space: pre-line;
}
/* #endregion */

/* #region 16. Todo el evento junto: «En directo», voluntarios y descargas (24 oct 2026, docs/orden-paneles.md) */
.ficha-directo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-3) var(--espacio-4);
    margin-top: var(--espacio-3);
    padding: var(--espacio-4) var(--espacio-5);
    border: 1px solid color-mix(in srgb, var(--rs-azul) 35%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--rs-azul) 7%, transparent);
}

.ficha-directo[hidden] {
    display: none;
}

.ficha-directo__icono {
    display: inline-flex;
    color: var(--rs-azul);
}

.ficha-directo__textos {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--espacio-1);
    min-width: 14rem;
}

.ficha-directo__aviso {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-2);
    font-weight: 600;
    color: var(--rs-texto);
}

.ficha-directo__aviso .icono {
    color: var(--rs-aviso);
}

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

.ficha-voluntarios__tarea {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-1);
    padding: var(--espacio-3) var(--espacio-4);
    border: 1px solid var(--rs-borde-sutil);
    border-radius: 12px;
    color: var(--rs-texto);
    text-decoration: none;
}

.ficha-voluntarios__tarea:hover {
    background: var(--rs-hover);
}

.ficha-voluntarios__tarea .texto-tenue,
.ficha-voluntarios__pie {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-2);
}

.ficha-descargas {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ficha-descargas li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-2);
    padding: var(--espacio-2) 0;
    border-bottom: 1px solid var(--rs-borde-sutil);
}

.ficha-descargas li:last-child {
    border-bottom: 0;
}

.ficha-descargas li > span {
    flex: 1;
    min-width: 12rem;
}

/* Todo junto (el dosier, 25 oct 2026): destacado arriba, con su explicación debajo del nombre. */
.ficha-descargas__todo {
    padding: var(--espacio-3) var(--espacio-3) !important;
    margin-bottom: var(--espacio-2);
    border: 1px solid var(--rs-borde) !important;
    border-radius: var(--radio-md);
    background: color-mix(in srgb, var(--marca-acento) 6%, transparent);
}

.ficha-descargas__todo > span {
    display: grid;
    gap: var(--espacio-1);
}

.ficha-descargas__todo small {
    color: var(--rs-texto-tenue);
}

.ficha-descargas__separador {
    margin-top: var(--espacio-2);
    color: var(--rs-texto-tenue);
    font-size: var(--texto-etiqueta);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

@media (max-width: 640px) {
    .ficha-directo {
        padding: var(--espacio-3) var(--espacio-4);
    }

    .ficha-directo .boton {
        width: 100%;
    }
}
/* #endregion */

/* #region ¿Dónde se sienta? y Peñas (26 oct 2026) */
.mesas-buscar {
    display: grid;
    gap: var(--espacio-3);
}

.mesas-buscar h2 {
    margin: 0;
}

.mesas-buscar__campo {
    margin: 0;
}

.mesas-buscar__campo input {
    font-size: var(--texto-grande);
}

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

.mesas-buscar__persona {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-2) var(--espacio-3);
    padding: var(--espacio-3);
    border: 1px solid var(--rs-borde);
    border-radius: var(--radio-md);
    background: var(--rs-superficie-2);
}

.mesas-buscar__persona strong {
    font-family: var(--fuente-display);
    font-size: var(--texto-grande);
}

.mesas-buscar__persona .etiqueta .icono {
    width: 1em;
    height: 1em;
}

.mesas-penas__cabeza {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--espacio-3);
    margin-bottom: var(--espacio-3);
}

.mesas-penas__cabeza h2,
.mesas-penas__cabeza .ayuda-campo {
    margin: 0;
}

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

.mesas-penas__pena {
    border: 1px solid var(--rs-borde);
    border-radius: var(--radio-md);
    background: var(--rs-superficie-2);
}

.mesas-penas__pena summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-1) var(--espacio-3);
    padding: var(--espacio-3);
    cursor: pointer;
    list-style: none;
}

.mesas-penas__pena summary::-webkit-details-marker {
    display: none;
}

.mesas-penas__pena summary strong {
    font-family: var(--fuente-display);
    font-size: var(--texto-grande);
}

.mesas-penas__pena summary > .icono {
    margin-left: auto;
    transition: transform .15s;
}

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

.mesas-penas__pena--vacia summary strong {
    color: var(--rs-texto-tenue);
}

.mesas-penas__cuantos {
    font-weight: 600;
}

.mesas-penas__donde {
    color: var(--rs-texto-secundario);
    font-size: var(--texto-pequeno);
}

.mesas-penas__dentro {
    display: grid;
    gap: var(--espacio-3);
    padding: 0 var(--espacio-3) var(--espacio-3);
}

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

.mesas-penas__mover label {
    font-weight: 600;
}

.mesas-penas__mover select {
    flex: 0 1 16rem;
    width: auto;
    min-width: 10rem;
}

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

.mesas-penas__gente li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-2);
    padding: var(--espacio-2) 0;
    border-top: 1px solid var(--rs-borde-sutil);
}

.mesas-penas__persona {
    flex: 1 1 12rem;
    font-weight: 600;
}

.mesas-penas__gente select {
    max-width: 14rem;
}

@media (prefers-reduced-motion: reduce) {
    .mesas-penas__pena summary > .icono {
        transition: none;
    }
}
/* #endregion */

/* #region La lista de la peña (migración 0236) */
.lista-pena-junta__ajustes {
    display: grid;
    gap: var(--espacio-3);
    margin-bottom: var(--espacio-4);
    padding: var(--espacio-3);
    border: 1px solid var(--rs-borde);
    border-radius: var(--radio-md);
    background: var(--rs-superficie-2);
}

.lista-pena-junta__ajustes[hidden],
.lista-pena-junta__dias[hidden] {
    display: none;
}

.lista-pena-junta__dias input {
    width: 6rem;
}

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

.lista-pena-junta__guardado {
    color: var(--rs-exito);
    font-weight: 600;
}

.lista-pena-junta__nota {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    margin: 0 0 var(--espacio-3);
    color: var(--rs-texto-secundario);
}

.lista-pena-junta__cifras {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: var(--espacio-2);
    margin-bottom: var(--espacio-3);
}

.lista-pena-junta__cifra {
    display: grid;
    padding: var(--espacio-3);
    border: 1px solid var(--rs-borde);
    border-radius: var(--radio-md);
    background: var(--rs-superficie-2);
}

.lista-pena-junta__cifra strong {
    font-family: var(--fuente-display);
    font-size: 1.75rem;
    line-height: 1.1;
}

.lista-pena-junta__cifra span {
    color: var(--rs-texto-secundario);
    font-size: var(--texto-pequeno);
}

.lista-pena-junta__cifra--bien strong {
    color: var(--rs-exito);
}

.lista-pena-junta__cifra--aviso strong {
    color: var(--rs-aviso);
}

.lista-pena-junta__cifra--peligro strong {
    color: var(--rs-peligro);
}
/* #endregion */

/* #region 17. El dinero de un evento cancelado o aplazado (28 oct 2026, migraciones 0264-0265) */
/* Con «Aplazar» y «Cancelar evento» arriba, los botones bajan a su propia fila cuando no caben al lado
   del nombre, en vez de estrujarlo (y montarse encima de sus casillas). */
@media (min-width: 768px) {
    .ficha-evento .cabecera-pagina > .ficha-cabecera {
        flex: 1 1 30rem;
    }
}

.ficha-dinero {
    display: grid;
    gap: var(--espacio-4);
    margin-top: var(--espacio-3);
    padding: var(--espacio-4) var(--espacio-5);
    border: 1px solid color-mix(in srgb, var(--rs-aviso) 45%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--rs-aviso) 7%, transparent);
}

.ficha-dinero[hidden] {
    display: none;
}

.ficha-dinero--cancelado {
    border-color: color-mix(in srgb, var(--rs-peligro) 40%, transparent);
    background: color-mix(in srgb, var(--rs-peligro) 6%, transparent);
}

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

.ficha-dinero__icono {
    display: inline-flex;
    color: var(--rs-aviso);
}

.ficha-dinero--cancelado .ficha-dinero__icono {
    color: var(--rs-peligro);
}

.ficha-dinero__textos {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--espacio-1);
    min-width: 14rem;
}

.ficha-dinero__bloque h3 {
    margin: 0 0 var(--espacio-2);
    font-size: 1rem;
}

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

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

.ficha-dinero__fila--hecha {
    opacity: 0.7;
}

.ficha-dinero__quien {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 12rem;
}

.ficha-dinero__quien small {
    color: var(--rs-texto-tenue);
}

.ficha-dinero__importe {
    font-variant-numeric: tabular-nums;
}

.ficha-dinero__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-2);
}

.ficha-dinero__acciones .etiqueta {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-1);
}

.ficha-dinero__acciones .etiqueta .icono {
    width: 14px;
    height: 14px;
}

/* El día con turnos (28 oct 2026): al aplazar, qué turnos se mueven con él. */
.aplazar-turnos {
    margin: 0;
    padding: var(--espacio-2) var(--espacio-3);
    border-radius: var(--radio-sm);
    background: color-mix(in srgb, var(--rs-info) 10%, transparent);
    color: var(--rs-texto);
}
/* #endregion */

/* #region 18. La hoja del restaurador (28 oct 2026, migración 0266) */
/* En la pestaña «Menú», debajo de «Para el restaurante»: a quién, cuándo sale, mandarla ya y lo mandado. */
.menu-evento__hoja {
    display: grid;
    gap: var(--espacio-3);
    margin: 0;
}

.menu-evento__hoja[hidden] {
    display: none;
}

.menu-evento__hoja-estado {
    margin: 0;
    padding: var(--espacio-2) var(--espacio-3);
    border-radius: var(--radio-md);
    background: var(--rs-superficie-2);
}

.menu-evento__hoja-estado--exito {
    background: color-mix(in srgb, var(--rs-exito) 12%, transparent);
}

.menu-evento__hoja-estado--aviso {
    background: color-mix(in srgb, var(--rs-aviso) 14%, transparent);
}

/* Nombre, correo y teléfono en una fila; en el móvil, uno debajo de otro. */
.menu-evento__hoja-datos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--espacio-3);
}

.menu-evento__hoja-datos .campo {
    margin: 0;
}

.menu-evento__hoja-envio,
.menu-evento__hoja-datos .aviso,
.menu-evento__hoja-datos .menu-evento__guardar {
    grid-column: 1 / -1;
}

@media (max-width: 767px) {
    .menu-evento__hoja-datos {
        grid-template-columns: 1fr;
    }
}

.menu-evento__hoja-acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-2);
}

.menu-evento__hoja-envios h3 {
    margin: 0 0 var(--espacio-2);
    font-size: 0.95rem;
}

.menu-evento__hoja-envios:empty {
    display: none;
}

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

.menu-evento__hoja-lista li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-1) var(--espacio-3);
    padding: var(--espacio-2) 0;
    border-bottom: 1px solid var(--rs-borde-sutil);
}

.menu-evento__hoja-lista li > span {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-1);
}

.menu-evento__hoja-cuando {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.menu-evento__hoja-lista small {
    color: var(--rs-texto-secundario);
}
/* #endregion */

/* #region Ceder la entrada y cambiar el invitado (28 oct 2026, migración 0268) */
/* Lo que impediría aceptarla, en rojo; lo que conviene saber (otro precio, menores), en ámbar. */
.cesion-junta__aviso {
    display: flex;
    align-items: flex-start;
    gap: var(--espacio-1);
    font-size: var(--texto-etiqueta);
}

.cesion-junta__aviso .icono {
    flex: none;
    width: 15px;
    height: 15px;
    margin-top: 2px;
}

.cesion-junta__aviso--error {
    color: var(--rs-peligro);
}

.cesion-junta__aviso--info {
    color: var(--rs-aviso);
}

/* La petición a la que lleva el Inicio, señalada. */
.por-revisar__fila--destacada {
    margin-inline: calc(-1 * var(--espacio-2));
    padding-inline: var(--espacio-2);
    border-radius: var(--radio-sm);
    background: var(--rs-azul-suave);
}
/* #endregion */

/* #region La lista de espera (28 oct 2026, migración 0269) */
.lista-espera-junta {
    border-left-color: var(--rs-azul);
}

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

.lista-espera-junta__cabeza h2 {
    margin: 0;
}

/* Las cifras en una fila de pastillas: cuántos esperan, la consiguieron, se quedaron sin entrada… */
.lista-espera-junta__cifras {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-2);
    margin: var(--espacio-3) 0 0;
    padding: 0;
    list-style: none;
}

.lista-espera-junta__cifra {
    display: flex;
    align-items: baseline;
    gap: var(--espacio-1);
    padding: var(--espacio-1) var(--espacio-3);
    border: 1px solid var(--rs-borde);
    border-radius: 999px;
    font-size: var(--texto-etiqueta);
}

.lista-espera-junta__cifra strong {
    font-size: 1.05rem;
}

.lista-espera-junta__cifra--espera strong { color: var(--rs-aviso); }
.lista-espera-junta__cifra--ofrecida strong { color: var(--rs-azul); }
.lista-espera-junta__cifra--bien strong { color: var(--rs-exito); }
.lista-espera-junta__cifra--mal strong { color: var(--rs-peligro); }

.lista-espera-junta__puesto {
    display: inline-block;
    min-width: 2.2em;
    color: var(--rs-azul);
}

.lista-espera-junta__estado {
    display: flex;
    align-items: center;
    gap: var(--espacio-1);
    font-size: var(--texto-etiqueta);
    font-weight: 600;
}

.lista-espera-junta__estado .icono {
    flex: none;
    width: 15px;
    height: 15px;
}

.lista-espera-junta__estado--espera { color: var(--rs-aviso); }
.lista-espera-junta__estado--ofrecida { color: var(--rs-azul); }
.lista-espera-junta__estado--bien { color: var(--rs-exito); }
.lista-espera-junta__estado--mal { color: var(--rs-peligro); }
.lista-espera-junta__estado--gris { color: var(--rs-texto-secundario); }

/* Lo ya cerrado, más apagado: lo que importa es lo que sigue abierto. */
.lista-espera-junta__fila--cerrada {
    opacity: 0.75;
}
/* #endregion */

/* #region Invitaciones de la Junta (28 oct 2026, migración 0274) */
.protocolo-junta {
    border-left-color: var(--marca-acento);
}

/* El teléfono del invitado: se toca para llamar, sin el azul de un enlace (2 nov 2026). */
.protocolo-junta__telefono {
    color: var(--rs-texto-secundario);
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}

.protocolo-junta__telefono:hover {
    color: var(--marca-acento);
}

.protocolo-junta__cabeza h2 {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
}

.protocolo-junta__acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-2);
}

/* Las mesas de protocolo: casillas en una fila, y «Crear la mesa Protocolo» si no hay ninguna. */
.protocolo-junta__mesas {
    margin-top: var(--espacio-3);
    padding: var(--espacio-3);
    border: 1px dashed var(--rs-borde-fuerte);
    border-radius: var(--radio-md);
}

.protocolo-junta__mesas-titulo {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--espacio-2);
    margin: 0 0 var(--espacio-2);
}

.protocolo-junta__mesas-titulo .ayuda-campo {
    margin: 0;
}

.protocolo-junta__mesas-lista {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-2) var(--espacio-4);
}

.protocolo-junta__mesa {
    margin: 0;
}

/* Sus acompañantes, debajo del invitado, más pequeños. */
.protocolo-junta__acompanantes {
    margin: var(--espacio-2) 0 0;
    padding: 0 0 0 var(--espacio-3);
    border-left: 2px solid var(--rs-borde);
    list-style: none;
}

.protocolo-junta__acompanante {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-2);
    font-size: var(--texto-etiqueta);
}

.protocolo-junta__acompanante small {
    display: block;
    color: var(--rs-texto-secundario);
}

/* El formulario: los colectivos habituales de un toque y cuántos acompañantes. */
.protocolo-formulario__habituales {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-2);
}

.protocolo-formulario__habituales .chip[aria-pressed="true"] {
    border-color: var(--rs-azul);
    background: var(--rs-azul-suave);
    color: var(--rs-texto);
}

.protocolo-formulario__cuantos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-3);
    margin-bottom: var(--espacio-3);
}

.protocolo-formulario__cuantos output {
    display: inline-block;
    min-width: 2rem;
    text-align: center;
    font-weight: 700;
}
/* #endregion */

/* #region 19. Turnos del evento (28 oct 2026, migración 0275) */
.ficha-turnos {
    display: grid;
    gap: var(--espacio-3);
    margin-top: var(--espacio-3);
    padding: var(--espacio-4) var(--espacio-5);
    border: 1px solid color-mix(in srgb, var(--marca-acento) 30%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--marca-acento) 5%, transparent);
}

.ficha-turnos[hidden] {
    display: none;
}

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

.ficha-turnos__icono {
    display: inline-flex;
    color: var(--marca-acento);
}

.ficha-turnos__textos {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--espacio-1);
    min-width: 14rem;
}

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

.ficha-turnos__turno {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-2) var(--espacio-4);
    padding: var(--espacio-2) var(--espacio-3);
    border-radius: 10px;
    background: var(--rs-superficie-1);
    box-shadow: 0 1px 2px rgb(0 0 0 / 6%);
}

.ficha-turnos__turno--actual {
    outline: 2px solid color-mix(in srgb, var(--marca-acento) 55%, transparent);
}

.ficha-turnos__turno--cancelado {
    opacity: 0.6;
}

.ficha-turnos__horas {
    min-width: 6.5rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.ficha-turnos__datos {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 12rem;
}

.ficha-turnos__datos small,
.ficha-turnos__aqui {
    color: var(--rs-texto-secundario);
}

.ficha-turnos__aqui {
    font-size: 0.85rem;
    font-weight: 600;
}
/* #endregion */

/* #region Seguimiento en directo de la venta (31 oct 2026) */
.venta-directo__cabeza {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--espacio-2) var(--espacio-4);
}
.venta-directo__estado {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-2);
    font-size: 0.875rem;
    color: var(--rs-texto-tenue);
}
.venta-directo__punto {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--rs-exito);
    animation: venta-directo-latido 2s ease-in-out infinite;
}
.venta-directo__buscar {
    max-width: 28rem;
}
.venta-directo__toques {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--espacio-3);
    font-size: 0.8125rem;
}
.venta-directo__toques .boton-enlace {
    padding-block: 0;
    min-height: 0;
}

/* Sin azul (2 nov 2026): el nombre y los cambios de peña o mesa, en el color del texto; al pasar, en el de la
   asociación. Lo que hace algo, con su jerarquía: confirmar el pago, botón; cancelar o devolver, en rojo. */
.venta-directo__nombre,
.venta-directo .boton-enlace--neutro {
    color: var(--rs-texto-secundario);
    text-decoration: none;
}

.venta-directo__nombre {
    color: var(--rs-texto);
    font-weight: 600;
}

.venta-directo__nombre:hover,
.venta-directo .boton-enlace--neutro:hover {
    color: var(--marca-acento);
}

.venta-directo .tabla-eventos__acciones {
    white-space: nowrap;
}
.venta-directo__nueva {
    background: var(--rs-azul-suave);
}
@keyframes venta-directo-latido {
    50% { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
    .venta-directo__punto { animation: none; }
}
/* #endregion */

/* #region Invitaciones de la Junta: cuántos, escrito, y sus pases en papel (31 oct 2026) */
.protocolo-formulario__cuantos .compra__contador input {
    width: 3.5rem;
    border: 0;
    background: transparent;
    color: var(--rs-texto);
    font: inherit;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.pases-imprimir {
    display: none;
}
@media print {
    body.imprimiendo-pases > *:not(.pases-imprimir) {
        display: none !important;
    }
    body.imprimiendo-pases {
        background: #fff;
    }
    body.imprimiendo-pases .pases-imprimir {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 6mm;
    }
    .pases-imprimir__pase {
        break-inside: avoid;
        border: 1px dashed #999;
        border-radius: 3mm;
        padding: 4mm;
        text-align: center;
        color: #000;
    }
    .pases-imprimir__qr {
        display: flex;
        justify-content: center;
        margin-bottom: 2mm;
    }
    .pases-imprimir__evento {
        font-size: 9pt;
        margin: 0;
    }
    .pases-imprimir__nombre {
        font-size: 11pt;
        font-weight: 700;
        margin: 1mm 0;
    }
    .pases-imprimir__detalle {
        font-size: 8pt;
        margin: 0;
    }
}
/* #endregion */

/* #region 16. La cabecera: lo que se usa de vez en cuando, en «Más» (2 nov 2026) */
/* Estadísticas, otro turno, aplazar y cancelar: fuera de la fila de botones, a un toque. */
.ficha-mas .menu-desplegable__panel {
    right: 0;
    left: auto;
    min-width: 14rem;
}

.ficha-mas .menu-desplegable__opcion[hidden] {
    display: none;
}

/* Sin nada que ofrecer (un evento ya pasado), el menú no sale. */
.ficha-mas:not(:has(.menu-desplegable__opcion:not([hidden]))) {
    display: none;
}

/* En el móvil: «Listados» y «Escribir…» de dos en dos; debajo, «Más» a lo ancho y el engranaje a su lado. */
@media (max-width: 767px) {
    #ficha-acciones-arriba {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--espacio-2);
    }

    #ficha-acciones-arriba > .boton {
        flex: 1 1 40%;
        width: auto;
    }

    #ficha-acciones-arriba > .ficha-mas {
        flex: 1 1 auto;
    }

    #ficha-acciones-arriba > .ficha-mas > summary {
        justify-content: center;
        width: 100%;
    }

    #ficha-acciones-arriba > .engranaje-configuracion {
        flex: 0 0 auto;
        order: 10;
        width: auto;
    }
}
/* #endregion */

/* #region 17. Pantallas anchas: Precios, Menú y Opinión en dos columnas (2 nov 2026) */
/*
 * En una sola columna de 64rem, a 1920 px quedaba vacía la mitad derecha. En dos columnas de tarjetas (como las
 * de un periódico, no una rejilla): cada tarjeta entera en su columna y sin huecos debajo de la más corta, que
 * era lo que hizo volver a una sola columna.
 */
@media (min-width: 1500px) {
    .entradas-evento:not([hidden]),
    .menu-evento:not([hidden]),
    .encuesta-junta {
        display: block;
        max-width: none;
        columns: 2;
        column-gap: var(--espacio-4);
    }

    :is(.entradas-evento, .menu-evento, .encuesta-junta) > .tarjeta {
        margin: 0 0 var(--espacio-4);
        break-inside: avoid;
    }

    /* Las devoluciones son una tabla de seis columnas: a lo ancho de las dos, debajo, para que quepa entera. */
    .entradas-evento > .entradas-evento__devoluciones {
        column-span: all;
        margin-top: var(--espacio-4);
    }
}
/* #endregion */

/* #region 18. Ventas y pagos del evento (turno 2, 10 nov 2026) */
/* Arriba, el título y «Vender una entrada»; debajo, las cifras que filtran y lo vendido, línea a línea. */
.ventas-pagos {
    display: grid;
    gap: var(--espacio-4);
}

.ventas-pagos__cabeza {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-3);
}

.ventas-pagos__cabeza h2 {
    margin: 0;
}

.ventas-pagos .venta-directo__como {
    color: var(--rs-texto-tenue);
    font-size: var(--texto-pequeno);
}
/* #endregion */

/* #region 19. Se repite cada semana y la lista de la cena (12 nov 2026, migración 0365) */
.serie-evento h2,
.serie-lista h2 {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
}

.serie-evento__campos {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-4);
    margin-top: var(--espacio-3);
}

.serie-evento__grupo {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-2);
    border: 0;
    padding: 0;
    margin: 0;
}

.serie-evento__fila {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-2);
}

.serie-evento__fila[hidden] {
    display: none;
}

.serie-evento__opcion {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
}

.serie-evento__plazos {
    margin: 0;
    padding: var(--espacio-3);
    border-radius: var(--radio-md);
    background: var(--rs-hover);
}

.serie-evento__proximas ul,
/* Lo de la cocina (12 nov 2026): adultos y niños, platos, alergias en número y por mesa. */
.serie-lista__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);
}

.serie-lista__filas {
    margin: 0;
    padding-left: var(--espacio-5);
    display: flex;
    flex-direction: column;
    gap: var(--espacio-1);
}

.serie-evento__proximas small {
    color: var(--rs-texto-secundario);
    margin-left: var(--espacio-1);
}

.serie-evento__acciones,
.serie-lista__acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-2);
}

.serie-lista {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-3);
}

.serie-lista__cabeza {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--espacio-2);
}

.serie-lista__total {
    margin: 0;
    font-weight: 600;
}

.serie-lista__filas {
    columns: 2 16rem;
    display: block;
}
/* #endregion */

/* #region 20. Encargados de un evento y una semana sin cena (12 nov 2026, migración 0366) */
.encargados-evento h2 {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
}

.encargados-evento__lista,
.encargados-evento__resultados {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--espacio-1);
}

.encargados-evento__uno {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-2);
    padding: var(--espacio-1) var(--espacio-2);
    border-radius: var(--radio-md);
    background: var(--rs-hover);
}

.serie-lista__cancelada {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    margin: 0;
    color: var(--rs-peligro);
    font-weight: 600;
}
/* #endregion */

/* #region 21. El plano: para quién es cada mesa, quién se sienta y «Cómo ha quedado» (12 nov 2026) */
.etiqueta--uso {
    background: color-mix(in srgb, var(--color-para-quien, var(--rs-aviso)) 16%, transparent);
    border-color: color-mix(in srgb, var(--color-para-quien, var(--rs-aviso)) 45%, transparent);
    color: color-mix(in srgb, var(--color-para-quien, var(--rs-aviso)) 55%, var(--rs-texto));
}

.etiqueta--pena {
    gap: var(--espacio-1);
}

.etiqueta--pena .icono {
    width: 12px;
    height: 12px;
}

.mesa-para .chips {
    margin-block: var(--espacio-1) var(--espacio-2);
}

.mesas-reparto__listo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-2) var(--espacio-4);
    margin-top: var(--espacio-4);
    padding: var(--espacio-3) var(--espacio-4);
    border-radius: var(--radio-md);
    background: color-mix(in srgb, var(--marca-acento, var(--rs-azul)) 7%, transparent);
}

.mesas-reparto__listo .ayuda-campo {
    flex: 1 1 18rem;
    margin: 0;
}

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

.plano-editor__varias,
.plano-editor__uso {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-2);
}

.plano-editor__varias input[type="number"] {
    width: 5rem;
}

.plano-editor__uso input[type="text"] {
    flex: 1 1 10rem;
}

.plano-editor__uso input[type="color"] {
    flex: none;
    width: 2.75rem;
    height: 2.5rem;
    padding: 2px;
}

.plano-editor__gente h5,
.plano-gente__pena h5 {
    display: flex;
    justify-content: space-between;
    gap: var(--espacio-2);
    margin: var(--espacio-3) 0 var(--espacio-1);
    font-size: var(--texto-pequeno, .875rem);
}

.plano-gente__cuantos {
    color: var(--rs-texto-tenue);
    font-variant-numeric: tabular-nums;
}

.plano-gente ul {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.plano-gente__fila {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    min-height: 2.25rem;
    padding: 2px var(--espacio-2);
    border-radius: var(--radio-sm);
}

.plano-gente__fila[draggable="true"] {
    cursor: grab;
}

.plano-gente__fila:hover {
    background: var(--rs-superficie-2);
}

.plano-gente__fila label {
    flex: 1;
    min-width: 0;
}

.plano-gente__pena-acciones,
.plano-gente__pasar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-2);
    margin-top: var(--espacio-2);
}

.plano-gente__pasar {
    padding-top: var(--espacio-2);
    border-top: 1px solid var(--rs-borde-sutil);
}

.plano-editor__para,
.plano-editor__sin-entrada {
    margin-top: var(--espacio-3);
}

.plano-editor__para > summary,
.plano-editor__sin-entrada > summary {
    font-weight: 700;
    cursor: pointer;
}

.plano-editor__sin-entrada > summary {
    font-weight: 600;
    color: var(--rs-texto-tenue);
}

.plano-gente__pena-acciones select,
.plano-gente__pasar select {
    flex: 1 1 9rem;
    min-width: 0;
}

.plano-editor__sin-mesa summary {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    margin-top: var(--espacio-3);
    color: var(--rs-aviso-texto);
    font-weight: 600;
    cursor: pointer;
}

.como-ha-quedado {
    width: min(46rem, calc(100vw - 2rem));
    max-height: calc(100dvh - 2rem);
    padding: 0;
    flex-direction: column;
}

.como-ha-quedado[open] {
    display: flex;
}

.como-ha-quedado__cabeza,
.como-ha-quedado__pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-3);
    padding: var(--espacio-3) var(--espacio-4);
}

.como-ha-quedado__cabeza h2 {
    margin: 0;
}

.como-ha-quedado__resumen {
    margin: 0 var(--espacio-4);
    padding: var(--espacio-2) var(--espacio-3);
    border-radius: var(--radio-md);
    background: color-mix(in srgb, var(--rs-exito) 12%, transparent);
    font-weight: 700;
}

.como-ha-quedado__resumen--aviso {
    background: var(--rs-aviso-suave);
    color: var(--rs-aviso-texto);
}

.como-ha-quedado__partidas {
    margin: var(--espacio-2) var(--espacio-4) 0;
    color: var(--rs-texto-tenue);
}

.como-ha-quedado__cuerpo {
    flex: 1;
    overflow-y: auto;
    padding: var(--espacio-3) var(--espacio-4);
}

.como-ha-quedado__sin-mesa {
    margin-bottom: var(--espacio-3);
    padding: var(--espacio-2) var(--espacio-3);
    border: 1px solid color-mix(in srgb, var(--rs-aviso) 45%, transparent);
    border-radius: var(--radio-md);
    background: var(--rs-aviso-suave);
}

.como-ha-quedado__sin-mesa h3 {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    margin: 0;
    color: var(--rs-aviso-texto);
}

.como-ha-quedado__mesa {
    border-bottom: 1px solid var(--rs-borde-sutil);
}

.como-ha-quedado__mesa summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-2);
    padding: var(--espacio-2) 0;
    cursor: pointer;
    list-style: none;
}

.como-ha-quedado__mesa summary .icono:last-child {
    margin-left: auto;
}

.como-ha-quedado__cifra {
    color: var(--rs-texto-tenue);
    font-variant-numeric: tabular-nums;
}

.como-ha-quedado__pie {
    border-top: 1px solid var(--rs-borde-sutil);
}
/* #endregion */

/* #region 22. La tarjeta de cada mesa y «Lo que ha cambiado» (12 nov 2026, migración 0405) */
.plano-tarjeta {
    position: fixed;
    z-index: 60;
    width: min(23rem, calc(100vw - 1.5rem));
    max-height: min(32rem, calc(100dvh - 1.5rem));
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: var(--espacio-2);
    padding: var(--espacio-3) var(--espacio-4) var(--espacio-3);
    border: 1px solid var(--rs-borde-tarjeta);
    border-top: 3px solid var(--marca-acento, var(--rs-azul));
    border-radius: var(--radio-md);
    background: var(--rs-superficie-3);
    box-shadow: var(--sombra-lg);
    color: var(--rs-texto);
    font-size: var(--texto-pequeno, .875rem);
    pointer-events: none;
    animation: plano-tarjeta-entra 120ms ease-out;
}

.plano-tarjeta[hidden] {
    display: none;
}

@keyframes plano-tarjeta-entra {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .plano-tarjeta {
        animation: none;
    }
}

.plano-tarjeta__cabeza {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--espacio-3);
}

.plano-tarjeta__mesa {
    font-size: 1rem;
    letter-spacing: -0.01em;
}

.plano-tarjeta__ocupacion {
    color: var(--rs-texto-secundario);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.plano-tarjeta__para {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-1);
}

.plano-tarjeta__cambios {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    margin: 0;
    padding: var(--espacio-1) var(--espacio-2);
    border-radius: var(--radio-sm);
    background: var(--rs-exito-suave);
    color: var(--rs-exito-texto);
    font-weight: 600;
}

.plano-tarjeta__cambios .icono {
    width: 15px;
    height: 15px;
    flex: none;
}

.plano-tarjeta__gente {
    columns: 2 9.5rem;
    column-gap: var(--espacio-4);
    overflow: hidden;
}

.plano-tarjeta__pena {
    break-inside: avoid;
    margin-bottom: var(--espacio-2);
}

.plano-tarjeta h4 {
    display: flex;
    justify-content: space-between;
    gap: var(--espacio-2);
    margin: 0 0 2px;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--rs-borde-sutil);
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta, .8125rem);
    font-weight: 700;
    text-transform: none;
}

.plano-tarjeta__cuantos {
    font-variant-numeric: tabular-nums;
}

.plano-tarjeta ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.plano-tarjeta li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px var(--espacio-1);
    padding: 1px 0;
    line-height: 1.35;
}

.plano-tarjeta__nombre {
    min-width: 0;
    overflow-wrap: anywhere;
}

.plano-tarjeta__nuevo {
    margin-inline: -4px;
    padding-inline: 4px !important;
    border-radius: var(--radio-sm);
    background: var(--rs-exito-suave);
}

.plano-tarjeta__nuevo .plano-tarjeta__nombre {
    font-weight: 700;
}

.plano-tarjeta__mas,
.plano-tarjeta__vacia,
.plano-tarjeta__referencia {
    margin: 0;
    color: var(--rs-texto-tenue);
}

.plano-tarjeta__referencia {
    padding-top: var(--espacio-2);
    border-top: 1px solid var(--rs-borde-sutil);
    font-size: var(--texto-etiqueta, .8125rem);
}

.plano-tarjeta__salen h4 {
    color: var(--rs-peligro-texto, var(--rs-peligro));
}

.plano-tarjeta__salen s {
    color: var(--rs-texto-tenue);
}

.plano-tarjeta__adonde {
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta, .8125rem);
}

/* Las marcas de cada persona: lo justo para leerlas de un vistazo. */
.marca-persona {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 0 6px;
    border-radius: var(--radio-pildora);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

.marca-persona .icono {
    width: 11px;
    height: 11px;
}

.marca-persona--nuevo {
    background: color-mix(in srgb, var(--rs-exito) 22%, transparent);
    color: var(--rs-exito-texto);
}

.marca-persona--pagar {
    background: var(--rs-aviso-suave);
    color: var(--rs-aviso-texto);
}

.marca-persona--menor {
    background: color-mix(in srgb, var(--rs-info) 16%, transparent);
    color: color-mix(in srgb, var(--rs-info) 70%, var(--rs-texto));
}

.marca-persona--mano {
    background: var(--rs-superficie-4, var(--rs-superficie-2));
    color: var(--rs-texto-secundario);
}

/* Los nombres de la lista de gente (panel de la mesa y «Cómo ha quedado»), cada uno con sus marcas. */
.plano-gente__persona {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px var(--espacio-1);
    margin-right: var(--espacio-2);
}

.plano-gente__persona--nuevo {
    font-weight: 700;
}

.etiqueta--cambios {
    background: var(--rs-exito-suave);
    border-color: color-mix(in srgb, var(--rs-exito) 40%, transparent);
    color: var(--rs-exito-texto);
}

.etiqueta--cambios .icono {
    width: 12px;
    height: 12px;
}

.mesa-fila--cambiada .mesa-fila__celda-mesa {
    box-shadow: inset 3px 0 0 var(--rs-exito);
}

.mesa-fila__celda-mesa {
    cursor: default;
}

.lo-que-ha-cambiado {
    margin-bottom: var(--espacio-3);
    padding: var(--espacio-2) var(--espacio-3);
    border: 1px solid color-mix(in srgb, var(--rs-exito) 40%, transparent);
    border-radius: var(--radio-md);
    background: var(--rs-exito-suave);
}

.lo-que-ha-cambiado h3 {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    margin: 0;
    color: var(--rs-exito-texto);
}

.lo-que-ha-cambiado p {
    margin: var(--espacio-1) 0 var(--espacio-2);
    color: var(--rs-texto-secundario);
}

.lo-que-ha-cambiado--nada p {
    margin-bottom: 0;
}

.lo-que-ha-cambiado ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: 2px var(--espacio-4);
    margin: 0 0 var(--espacio-2);
    padding: 0;
    list-style: none;
}

.lo-que-ha-cambiado li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-1);
}

.lo-que-ha-cambiado li .icono {
    width: 13px;
    height: 13px;
    color: var(--rs-texto-tenue);
}

.lo-que-ha-cambiado__nombre {
    font-weight: 600;
    margin-right: var(--espacio-1);
}

.lo-que-ha-cambiado__de {
    color: var(--rs-texto-tenue);
}

.lo-que-ha-cambiado__a {
    font-weight: 600;
}

.lo-que-ha-cambiado__a--fuera {
    color: var(--rs-aviso-texto);
}

/* El aforo del evento en la pestaña Mesas: entradas + los que comen sin entrada (12 nov 2026). */
.mesas-reparto__aforo {
    margin: var(--espacio-1) 0 0;
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
    font-variant-numeric: tabular-nums;
}

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

.mesas-reparto__aforo--lleno strong:last-child {
    color: var(--rs-aviso-texto);
}
/* #endregion */