/*
 * «Quién viene» a un evento (quien-viene.js): la lista de personas de un
 * evento, en su ficha (pestaña «Asistentes», con cifras que filtran y
 * acciones) y en Estadísticas (solo para mirar y descargar). La cargan
 * plantillas/gestion/eventos-formulario.php (detrás de eventos.css y antes
 * de eventos-ficha.css) y estadisticas.php (detrás de estadisticas.css),
 * siempre después de panel.css y gestion.css (de ahí salen la tabla, la
 * selección de varias filas, las pastillas y la cara de cada persona).
 * Rediseño del 17 oct 2026.
 *
 *   1. La tarjeta de Asistentes (solo en la ficha): el título y sus botones
 *   2. Las cifras que filtran (solo en la ficha)
 *   3. Buscar y filtrar, cuántos hay y «Recordar el pago»
 *   4. Cada persona: su cara, su nombre y de dónde viene su entrada
 *   5. El pago (con el ticket y si ya entró), la mesa y el contacto
 *   6. Lo que se puede hacer con cada fila
 *   7. Móvil: cada persona en una ficha corta
 *
 * Convenciones:
 * - Lo que está bien, en verde; lo que falta, en ámbar; lo devuelto, en
 *   rojo; lo demás, en el color de la asociación.
 * - Colores, radios y espacios, de tokens de base.css.
 */

/* #region 1. La tarjeta de Asistentes (solo en la ficha): el título y sus botones */
/* El título y sus botones arriba, y la lista debajo. */
.asistentes-evento {
    display: grid;
    gap: var(--espacio-4);
}

.asistentes-evento > .aviso {
    margin: 0;
}

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

.asistentes-evento__cabeza h2 {
    margin: 0;
    font-size: 1.0625rem;
}

/* En el móvil, los dos botones a lo ancho y «Añadir entradas», la principal, primero. */
@media (max-width: 767px) {
    .asistentes-evento__cabeza .ficha-evento__altas {
        display: flex;
        flex-direction: column-reverse;
        align-items: stretch;
        width: 100%;
    }

    .asistentes-evento__cabeza .ficha-evento__altas .boton {
        justify-content: center;
    }
}

/* La lista, aquí y en Estadísticas: cada parte con su aire (las cifras, el buscador, cuántos hay, la tabla y las páginas). */
.quien {
    display: grid;
    gap: var(--espacio-4);
}
/* #endregion */

/* #region 2. Las cifras que filtran (solo en la ficha) */
/* Una franja fina con divisiones: cada cifra filtra la lista al pulsarla (y la elegida, subrayada en su color). */
.quien__cifras {
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    border: 1px solid var(--rs-borde);
    border-radius: var(--radio-lg);
    background: var(--rs-superficie-1);
}

.quien-cifra {
    --tono-cifra: var(--rs-texto-secundario);
    position: relative;
    display: grid;
    flex: 1 1 8.5rem;
    align-content: start;
    gap: 2px;
    padding: var(--espacio-3) var(--espacio-4);
    border: 0;
    border-left: 1px solid var(--rs-borde-sutil);
    background: none;
    color: var(--rs-texto);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--duracion-hover) var(--curva);
}

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

.quien-cifra--bien { --tono-cifra: var(--rs-exito); }
.quien-cifra--falta { --tono-cifra: var(--rs-aviso); }
.quien-cifra--mal { --tono-cifra: var(--rs-peligro); }
.quien-cifra--info { --tono-cifra: var(--rs-azul); }

.quien-cifra:hover {
    background: color-mix(in srgb, var(--tono-cifra) 6%, transparent);
}

.quien-cifra[aria-pressed="true"] {
    background: color-mix(in srgb, var(--tono-cifra) 10%, transparent);
}

.quien-cifra[aria-pressed="true"]::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 3px;
    background: var(--tono-cifra);
}

.quien-cifra:focus-visible {
    outline: none;
    box-shadow: inset var(--anillo-foco);
}

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

/* La etiqueta, con el punto de su color. */
.quien-cifra span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
}

.quien-cifra span::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--tono-cifra);
}

/* Lo que suma en dinero, debajo y en el color de la cifra. */
.quien-cifra small {
    color: color-mix(in srgb, var(--tono-cifra) 80%, var(--rs-texto));
    font-size: var(--texto-etiqueta);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* En el móvil, dos cifras por fila. */
@media (max-width: 767px) {
    .quien-cifra {
        flex-basis: 45%;
        border-top: 1px solid var(--rs-borde-sutil);
    }
}
/* #endregion */

/* #region 3. Buscar y filtrar, cuántos hay y «Recordar el pago» */
.quien__barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-2);
}

.quien__barra .campo {
    margin: 0;
}

.quien__buscar {
    flex: 1 1 18rem;
}

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

@media (max-width: 767px) {
    .quien__barra select {
        flex: 1;
        min-width: 0;
    }
}

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

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

/* La lista filtrada (p. ej. «No vinieron»), descargable tal cual. */
.quien__descargar {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-2);
    margin-inline-end: auto;
    font-size: var(--texto-etiqueta);
}
/* #endregion */

/* #region 4. Cada persona: su cara, su nombre y de dónde viene su entrada */
.quien__marco {
    margin: 0;
    padding: 0;
}

.quien__tabla {
    width: 100%;
}

.quien__tabla td {
    vertical-align: middle;
}

.quien__persona {
    min-width: 14rem;
}

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

.quien-persona__textos {
    display: grid;
    min-width: 0;
}

.quien-persona__nombre {
    color: var(--rs-texto);
    font-weight: 600;
    text-decoration: none;
    transition: color var(--duracion-hover) var(--curva);
}

a.quien-persona__nombre:hover {
    color: var(--marca-acento);
}

.quien-persona__nombre small {
    margin-left: var(--espacio-1);
    color: var(--rs-texto-tenue);
    font-size: var(--texto-pequeno);
    font-weight: 500;
}

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

.quien-persona__datos .etiqueta {
    margin-left: var(--espacio-1);
}

/* Las devueltas y las que no vienen, apagadas (siguen ahí para saberlo). */
.fila-apagada .quien-persona,
.fila-apagada .quien__pago {
    opacity: 0.6;
}
/* #endregion */

/* #region 5. El pago (con el ticket y si ya entró), la mesa y el contacto */
/* La pastilla (y «Entró» si ya ha entrado) y, debajo, el ticket, cuánto y cómo, en una línea. */
.quien__pago {
    display: grid;
    justify-items: start;
    gap: var(--espacio-1);
}

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

.quien__pago small {
    color: var(--rs-texto-secundario);
    font-size: var(--texto-pequeno);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.quien__mesa {
    white-space: nowrap;
}

.quien__sentar {
    display: block;
    width: 100%;
    min-width: 8rem;
    max-width: 12rem;
    margin-top: var(--espacio-1);
    padding-block: var(--espacio-1);
}

/* La mesa de quien ya está sentado, con el lápiz de «Cambiar de mesa»; al pulsarlo, su lista. */
.quien__mesa-actual {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-1);
}

.quien__mesa-actual .quien__sentar {
    flex-basis: 100%;
    margin-top: 0;
}

.quien__cambiar-mesa {
    color: var(--rs-texto-secundario);
}

/* Contacto en una línea: el teléfono y el botón del correo. */
.quien__contacto {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-2);
    white-space: nowrap;
}

.quien__contacto a:not(.quien__correo) {
    color: var(--rs-texto);
    text-decoration: none;
}

.quien__contacto a:not(.quien__correo):hover {
    color: var(--marca-acento);
}

.quien__correo {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--rs-borde);
    border-radius: var(--radio-sm);
    color: var(--rs-texto-secundario);
}

.quien__correo:hover {
    border-color: var(--marca-acento);
    color: var(--marca-acento);
}

.quien__correo .icono {
    width: 16px;
    height: 16px;
}
/* #endregion */

/* #region 6. Lo que se puede hacer con cada fila */
/* La acción principal y «⋯» con las demás. */
.quien__tabla td:last-child {
    white-space: nowrap;
}

.quien__acciones {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--espacio-2);
}

.quien__mas-panel {
    position: fixed;
    top: auto;
    min-width: 12rem;
}

.quien__mas-panel > * {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 38px;
    padding: 0 var(--espacio-3);
    border-radius: var(--radio-sm);
    text-align: left;
    text-decoration: none;
}

.quien__mas-panel > *:hover {
    background: var(--rs-hover);
    text-decoration: none;
}
/* #endregion */

/* #region 7. Móvil: cada persona en una ficha corta */
/*
 * Arriba, su cara y su nombre a lo ancho;
 * debajo, el pago (con el ticket y si ya entró) y la mesa; y luego, el
 * contacto y sus botones.
 */
@media (max-width: 767px) {
    .quien__tabla thead {
        display: none;
    }

    .quien__tabla tr.quien__fila {
        display: grid !important;
        grid-template-columns: 24px minmax(0, 1fr) auto;
        grid-template-areas:
            "casilla persona persona"
            ". estado mesa"
            ". contacto acciones";
        align-items: center;
        gap: var(--espacio-2) var(--espacio-3);
        padding: var(--espacio-4) 0;
    }

    .quien__tabla tr.quien__fila > td {
        display: block !important;
        width: auto;
        min-width: 0;
        padding: 0 !important;
        background: transparent !important;
    }

    .quien__tabla tr.quien__fila > td::before {
        content: none !important;
    }

    .quien__fila > .columna-casilla { grid-area: casilla; }
    .quien__fila > .quien__persona { grid-area: persona; min-width: 0; }
    .quien__fila > .quien__acciones-celda { grid-area: acciones; }
    .quien__fila > .quien__estado { grid-area: estado; }
    .quien__fila > .quien__mesa { grid-area: mesa; justify-self: end; }
    .quien__fila > .quien__contacto-celda { grid-area: contacto; }

    /* Sin casilla (en Estadísticas, o lo pagado), el nombre empieza en el borde. */
    .quien__tabla:not(:has(.casilla-fila)) tr.quien__fila {
        grid-template-columns: 0 minmax(0, 1fr) auto;
        column-gap: 0;
    }

    /* Su casilla ya tiene columna: sin el sangrado de las otras tablas con casilla (gestion-tablas.css). */
    .app-panel .quien__tabla:has(td.columna-casilla) tbody tr.quien__fila {
        padding-left: 0;
    }

    /* Lo largo se parte: el ticket con su forma de pago y de quién viene de protocolo. */
    .quien__pago small,
    .quien-persona__datos .etiqueta {
        white-space: normal;
    }

    /* Con un teléfono largo, el correo baja: nada se monta encima de «Cobrar». */
    .quien__contacto {
        flex-wrap: wrap;
    }
}
/* #endregion */

/* #region Editar una entrada (turno 3, editar-entrada.js) */
/* La nota de la Junta, debajo de la persona: pequeña y en una línea. */
.quien__nota {
    display: flex;
    align-items: flex-start;
    gap: var(--espacio-1);
    margin: var(--espacio-1) 0 0;
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
    max-width: 32ch;
}

.quien__nota .icono {
    flex: none;
    width: 0.9rem;
    height: 0.9rem;
    margin-top: 0.15em;
}

.editar-entrada .ventana-paso + .ventana-paso {
    margin-top: var(--espacio-3);
}

.editar-entrada__apagado {
    opacity: 0.5;
}

.editar-entrada__pasar {
    display: grid;
    gap: var(--espacio-3);
    margin-top: var(--espacio-2);
}

.editar-entrada__elegido {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    margin: 0;
    color: var(--rs-exito-texto);
}

.editar-entrada__no-se-puede {
    display: flex;
    align-items: flex-start;
    gap: var(--espacio-2);
}

.editar-entrada__no-se-puede .icono {
    flex: none;
    margin-top: 0.15em;
}
/* #endregion */