/*
 * La barra de un evento (18 oct 2026, «todo desde un mismo sitio»): la
 * pestaña «Barra» de su ficha (/gestion/eventos-formulario,
 * parciales/barra-evento.php) y la parte de dar consumiciones de «En
 * directo» (parciales/barra-personas.php).
 *
 * La cargan plantillas/gestion/eventos-formulario.php y en-directo.php,
 * después de panel.css y gestion.css (de ahí salen las tarjetas, el
 * interruptor .ajuste, las opciones grandes .eleccion, la franja de cifras,
 * el conmutador y la ventana). La configuración general de la barra (la
 * carta, las barras y cómo se sirve) tiene su hoja, barra.css. Las piezas van
 * en el orden en que salen:
 *
 *   1. La pestaña: sus bloques, con aire entre ellos
 *   2. Su barra, en una frase: el interruptor, cómo es y descargar
 *   3. Ahora mismo: el tope con su barra
 *   4. Ampliar y parar
 *   5. Cada barra con su cola
 *   6. Por hora, no servidas y bebidas
 *   7. La gente: quién tiene cuántas y lo servido
 *   8. Buscar y dar a quien no sale (del padrón)
 *   9. Cada persona: lo que le toca y cuántas le quedan
 *  10. Lo servido: las anuladas, tachadas
 *  11. La ventana «Cómo es la barra en este evento»
 *
 * Convenciones:
 * - Verde, ámbar y rojo solo para el estado: encendida, parada o el tope.
 */

/* #region 1. La pestaña: sus bloques, con aire entre ellos */
.barra-del-evento,
.barra-directo {
    display: grid;
    gap: var(--espacio-4);
}

.barra-del-evento > .tarjeta,
.barra-directo > .tarjeta,
.barra-directo .barra-rejilla > .tarjeta {
    margin: 0;
}

.barra-directo__actualizado {
    text-align: right;
    font-size: var(--texto-pequeno);
}

.barra-del-evento h2,
.barra-gente h2 {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
}
/* #endregion */

/* #region 2. Su barra, en una frase: el interruptor, cómo es y descargar */
.barra-estado {
    display: grid;
    gap: var(--espacio-3);
}

/* La frase, con su punto: verde encendida, ámbar parada, gris sin barra. */
.barra-estado__resumen {
    display: flex;
    align-items: baseline;
    gap: var(--espacio-2);
    margin: 0;
    padding: var(--espacio-3) var(--espacio-4);
    border-radius: var(--radio-md);
    background: var(--rs-superficie-2);
    font-weight: 600;
}

.barra-estado__resumen::before {
    content: "";
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--rs-texto-tenue);
    translate: 0 -1px;
}

.barra-estado__resumen[data-estado="activa"]::before {
    background: var(--rs-exito);
}

.barra-estado__resumen[data-estado="pausada"]::before {
    background: var(--rs-aviso);
}

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

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

.barra-estado__acciones .informe-exportar {
    margin-left: auto;
}
/* #endregion */

/* #region 3. Ahora mismo: el tope con su barra */
/* En una tarjeta: el tope con su barra, la franja de cifras y, abajo, ampliar y parar. */
.barra-resumen {
    display: grid;
    gap: var(--espacio-4);
    margin: 0;
}

.barra-tope {
    display: grid;
    gap: var(--espacio-3);
}

.barra-tope__cifras {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--espacio-2) var(--espacio-4);
}

.barra-tope__cifras strong {
    font-family: var(--fuente-display);
    font-size: var(--texto-h2);
}

.barra-tope__pista {
    height: 14px;
    border-radius: var(--radio-pildora);
    background: var(--rs-superficie-3);
    overflow: hidden;
}

.barra-tope__pista span {
    display: block;
    height: 100%;
    background: var(--rs-exito-solido);
    transition: width 400ms var(--curva);
}

.barra-tope__pista[data-nivel="aviso"] span {
    background: var(--rs-aviso);
}

.barra-tope__pista[data-nivel="lleno"] span {
    background: var(--rs-peligro-solido);
}
/* #endregion */

/* #region 4. Ampliar y parar */
.barra-resumen__acciones {
    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);
}

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

/* Parar, a la derecha con su explicación al lado. */
.barra-resumen__pausar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-2) var(--espacio-3);
    margin-left: auto;
}

.barra-resumen__pausar .ayuda-campo {
    max-width: 36ch;
    margin: 0;
}
/* #endregion */

/* #region 5. Cada barra con su cola */
.barra-puntos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: var(--espacio-3);
}

/* Cerrada, apagada; abierta, con su borde verde. */
.barra-punto {
    display: grid;
    gap: var(--espacio-2);
    padding: var(--espacio-3) var(--espacio-4);
    border: 1px solid var(--rs-borde-tarjeta);
    border-radius: var(--radio-lg);
    background: var(--rs-superficie-2);
    opacity: 0.75;
}

.barra-punto--abierta {
    opacity: 1;
    border-color: var(--rs-exito);
}

.barra-punto__nombre,
.barra-punto__cifras {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--espacio-2);
}

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

.barra-punto__cola {
    display: grid;
    gap: var(--espacio-1);
}

.barra-punto__pista {
    height: 8px;
    border-radius: var(--radio-pildora);
    background: var(--rs-superficie-3);
    overflow: hidden;
}

.barra-punto__pista span {
    display: block;
    height: 100%;
    background: var(--rs-azul);
}
/* #endregion */

/* #region 6. Por hora, no servidas y bebidas */
.barra-rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: var(--espacio-4);
}

/* «Bebidas», debajo de «No servidas» en la misma tarjeta. */
.barra-directo__subtitulo {
    margin-top: var(--espacio-6);
}
/* #endregion */

/* #region 7. La gente: quién tiene cuántas y lo servido */
.barra-gente {
    display: grid;
    gap: var(--espacio-4);
}

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

.barra-gente__cabeza h2 {
    margin: 0;
}
/* #endregion */

/* #region 8. Buscar y dar a quien no sale (del padrón) */
.barra-buscar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--espacio-3);
}

.barra-buscar .campo {
    flex: 1 1 18rem;
    margin: 0;
}

.barra-padron {
    display: grid;
    gap: var(--espacio-2);
    margin-top: var(--espacio-4);
    padding: var(--espacio-4);
    border-radius: var(--radio-lg);
    background: var(--rs-superficie-2);
}

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

.barra-padron__lista li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--espacio-2);
}
/* #endregion */

/* #region 9. Cada persona: lo que le toca y cuántas le quedan */
.barra-personas {
    display: grid;
    margin: var(--espacio-4) 0 0;
    padding: 0;
    list-style: none;
}

/* Su cara, su nombre con lo que le toca, cuántas le quedan y sus botones. */
.barra-persona {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--espacio-3) var(--espacio-4);
    padding: var(--espacio-3) 0;
    border-bottom: 1px solid var(--rs-borde-sutil);
}

/* La última, sin raya: debajo ya va la de la paginación. */
.barra-persona:last-child {
    border-bottom: 0;
}

.barra-persona__datos {
    display: grid;
    min-width: 0;
}

.barra-persona__datos small {
    color: var(--rs-texto-secundario);
}

/* Cuántas le quedan: el número y, debajo, «le quedan»; en verde si tiene, apagado si no le queda ninguna. */
.barra-persona__quedan {
    display: grid;
    justify-items: center;
    min-width: 4.5rem;
    line-height: 1.1;
}

.barra-persona__quedan strong {
    color: var(--rs-exito);
    font-family: var(--fuente-display);
    font-size: 1.25rem;
    font-variant-numeric: tabular-nums;
}

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

.barra-persona__quedan--ninguna strong {
    color: var(--rs-texto-tenue);
}

.barra-persona__menor {
    justify-self: center;
}

/* Sus botones (también los de cada resultado del padrón). */
.barra-persona__acciones {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--espacio-1);
}

/* En el móvil, los botones debajo del nombre y grandes para el dedo. */
@media (max-width: 560px) {
    .barra-persona {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .barra-persona__acciones {
        grid-column: 2 / -1;
    }

    .barra-persona__acciones .boton {
        min-height: 44px;
        min-width: 44px;
    }
}
/* #endregion */

/* #region 10. Lo servido: las anuladas, tachadas */
.fila-anulada td {
    color: var(--rs-texto-tenue);
}

.fila-anulada td:nth-child(2) {
    text-decoration: line-through;
}
/* #endregion */

/* #region 11. La ventana «Cómo es la barra en este evento» */
.barra-ventana {
    width: min(46rem, calc(100vw - 2rem));
}

/* Cada tema, un paso de la ventana (.ventana-paso, gestion.css), separado del anterior por su raya. */
.barra-configurar__grupo {
    gap: var(--espacio-3);
    padding-top: var(--espacio-4);
    border-top: 1px solid var(--rs-borde-sutil);
}

.barra-configurar__grupo > .ayuda-campo,
.barra-configurar__grupo > .aviso,
.barra-configurar .campo {
    margin: 0;
}

/* «2 consumiciones por persona», bajo su opción (solo con «Un número para cada persona»). */
.barra-configurar .barra-configurar__numero {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--espacio-2);
}

.barra-configurar__numero input {
    width: 6rem;
}

/* Distinto por tipo: plegado, con su flecha que gira. */
.barra-configurar__categorias summary {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-2);
    color: var(--rs-texto-secundario);
    font-weight: 600;
    list-style: none;
    cursor: pointer;
}

.barra-configurar__categorias summary::-webkit-details-marker {
    display: none;
}

.barra-configurar__categorias summary .icono {
    width: 16px;
    height: 16px;
    transition: transform var(--duracion-hover) var(--curva);
}

.barra-configurar__categorias[open] summary .icono {
    transform: rotate(180deg);
}

.barra-configurar__categorias summary:hover {
    color: var(--marca-acento);
}

.barra-configurar__categorias > .ayuda-campo {
    margin: var(--espacio-2) 0 0;
}

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

.barra-configurar__categorias li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--espacio-3);
}

.barra-configurar__categorias input {
    width: 7rem;
}

.barra-configurar__tope {
    display: grid;
    gap: var(--espacio-3);
}

.barra-configurar__etiqueta {
    margin: 0;
    font-weight: 600;
}

/* «Guardar» abajo, siempre a la vista aunque las opciones no quepan. */
.barra-configurar .formulario-acciones {
    position: sticky;
    bottom: 0;
    z-index: 1;
    margin: 0 calc(var(--espacio-6) * -1) calc(var(--espacio-6) * -1);
    padding: var(--espacio-4) var(--espacio-6);
    border-top: 1px solid var(--rs-borde-sutil);
    background: var(--rs-superficie-2);
}
/* #endregion */