/*
 * En directo (/gestion/en-directo): el día del evento desde el móvil
 * (docs/en-directo.md). Pestañas Resumen, Puerta y Barra.
 *
 * Solo la carga plantillas/gestion/en-directo.php, después de panel.css y
 * gestion.css (de ahí salen las pestañas, la tarjeta, la franja de cifras,
 * el punto de «En directo» —.directo-estado—, su latido —directo-latido—,
 * el reparto de cada pestaña —.directo .pestanas__panel— y los títulos de
 * sus tarjetas). Las piezas van en el orden en que salen:
 *
 *   1. El evento y si está al día
 *   2. Los avisos
 *   3. Resumen: una tarjeta por zona
 *   4. El anillo de lo que va lleno
 *   5. Puerta y Barra: el anillo, cuántos faltan y las cifras
 *   6. Las listas: buscar, puertas, últimos y no servidas
 *   7. Puerta: las llegadas por tramos
 *   8. Dos columnas y las barras por tipo de entrada
 *   9. Puerta: las mesas
 *  10. «Ver asistentes» y «Abrir la barra»
 *  11. Barra: lo que se puede hacer
 *  12. Montepío
 *  13. Pantalla completa
 *  14. Menos movimiento
 */

/* #region El reparto de cada pestaña y su latido */
@keyframes directo-latido {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.35; transform: scale(0.8); }
}

.directo .pestanas__panel {
    display: grid;
    gap: var(--espacio-4);
}

.directo .pestanas__panel[hidden] {
    display: none;
}

.directo-dos > .tarjeta,
.directo .tarjeta h2 {
    margin-top: 0;
}

@media (max-width: 767px) {
    .directo .cabecera-pagina__descripcion,
    #directo-pantalla-completa {
        display: none;
    }
}
/* #endregion */

/* #region 1. El evento y si está al día */
/* En su tarjeta (como en la Barra): el desplegable y, al lado, la pastilla. */
.directo-barra-superior {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--espacio-3) var(--espacio-4);
    margin: 0;
}

.directo-evento {
    flex: 1 1 18rem;
    max-width: 40rem;
    margin: 0;
}

/* Al día: verde con el punto que late; atrasado, ámbar y quieto. */
.directo-vivo {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-2);
    min-height: 44px;
    margin: 0;
    padding: var(--espacio-2) var(--espacio-3);
    border-radius: var(--radio-pildora);
    background: color-mix(in srgb, var(--rs-exito) 14%, transparent);
    color: var(--rs-texto);
    font-size: var(--texto-pequeno);
    font-weight: 600;
}

.directo-vivo__punto {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--rs-exito);
    animation: directo-latido 1.6s ease-in-out infinite;
}

.directo-vivo[data-atrasado="true"] {
    background: color-mix(in srgb, var(--rs-aviso) 18%, transparent);
}

.directo-vivo[data-atrasado="true"] .directo-vivo__punto {
    background: var(--rs-aviso);
    animation: none;
}
/* #endregion */

/* #region 2. Los avisos */
.directo-avisos {
    display: grid;
    gap: var(--espacio-2);
}

/* Sin avisos, que no deje el hueco del reparto de la pestaña. */
.directo-avisos:empty {
    display: none;
}

.directo-aviso {
    margin: 0;
}
/* #endregion */

/* #region 3. Resumen: una tarjeta por zona */
/*
 * Cada zona en una tarjeta ancha (3 nov 2026: antes, un anillo solo y
 * centrado, con media tarjeta vacía): el anillo a la izquierda y, a su
 * lado, cómo va y sus cuatro cifras; toda la tarjeta abre su pestaña.
 */
.directo-tarjetas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr));
    gap: var(--espacio-4);
}

.directo-tarjeta {
    display: grid;
    align-content: start;
    gap: var(--espacio-4);
    width: 100%;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.directo-tarjeta:hover {
    border-color: color-mix(in srgb, var(--marca-acento) 45%, var(--rs-borde));
}

.directo-tarjeta__titulo {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    font-weight: 700;
}

/* La flecha, al final: dice que se abre. */
.directo-tarjeta__titulo > .icono:last-child {
    margin-left: auto;
    color: var(--rs-texto-tenue);
    transition: transform var(--duracion-hover) var(--curva);
}

.directo-tarjeta:hover .directo-tarjeta__titulo > .icono:last-child {
    transform: translateX(2px);
    color: var(--marca-acento);
}

.directo-tarjeta__cuerpo {
    display: grid;
    grid-template-columns: 8.5rem minmax(0, 1fr);
    align-items: center;
    gap: var(--espacio-5);
}

.directo-tarjeta__cuerpo:not(:has(.directo-anillo)) {
    grid-template-columns: minmax(0, 1fr);
}

.directo-tarjeta .directo-anillo {
    display: block;
    width: 100%;
}

.directo-tarjeta__textos {
    display: grid;
    gap: var(--espacio-3);
    min-width: 0;
}

.directo-tarjeta__frase {
    font-size: var(--texto-grande);
    font-weight: 600;
}

/* Las cifras, de dos en dos y separadas por una línea fina. */
.directo-tarjeta__datos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--rs-borde-sutil);
}

.directo-tarjeta__dato {
    display: grid;
    gap: 2px;
    padding: var(--espacio-2) var(--espacio-3) var(--espacio-2) 0;
    border-bottom: 1px solid var(--rs-borde-sutil);
}

.directo-tarjeta__dato strong {
    font-family: var(--fuente-display);
    font-size: 1.25rem;
    font-variant-numeric: tabular-nums;
}

.directo-tarjeta__dato > span {
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
}

.directo-tarjeta__dato--peligro strong {
    color: var(--rs-peligro-texto);
}

@media (max-width: 520px) {
    .directo-tarjeta__cuerpo {
        grid-template-columns: 6.5rem minmax(0, 1fr);
        gap: var(--espacio-3);
    }
}
/* #endregion */

/* #region 4. El anillo de lo que va lleno */
.directo-anillo__svg {
    display: block;
    width: 100%;
    height: auto;
}

.directo-anillo__pista,
.directo-anillo__valor {
    fill: none;
    stroke-width: 12;
}

.directo-anillo__pista {
    stroke: var(--rs-borde);
}

.directo-anillo__valor {
    stroke: var(--marca-principal);
    stroke-linecap: round;
    transition: stroke-dasharray 0.6s var(--curva);
}

.directo-anillo__svg[data-nivel="aviso"] .directo-anillo__valor {
    stroke: var(--rs-aviso);
}

.directo-anillo__svg[data-nivel="lleno"] .directo-anillo__valor {
    stroke: var(--rs-peligro);
}

.directo-anillo__cifra {
    fill: var(--rs-texto);
    font-size: 28px;
    font-weight: 800;
    text-anchor: middle;
}

.directo-anillo__debajo {
    fill: var(--rs-texto-secundario);
    font-size: 12px;
    text-anchor: middle;
}
/* #endregion */

/* #region 5. Puerta y Barra: el anillo, cuántos faltan y las cifras */
/* El anillo a la izquierda; a su lado, cuántos faltan y, debajo, las cifras en una franja. */
.directo-llegadas {
    display: grid;
    grid-template-columns: minmax(8rem, 10rem) minmax(0, 1fr);
    align-items: center;
    gap: var(--espacio-3) var(--espacio-5);
}

.directo-llegadas > .directo-anillo {
    grid-row: span 2;
}

.directo-llegadas__textos {
    display: grid;
    gap: var(--espacio-1);
}

.directo-llegadas__textos h2,
.directo-llegadas__textos p {
    margin: 0;
}

.directo-llegadas__quedan {
    font-size: var(--texto-grande);
    font-weight: 700;
}

@media (max-width: 767px) {
    .directo-llegadas {
        grid-template-columns: minmax(7rem, 9rem) minmax(0, 1fr);
        gap: var(--espacio-3);
    }

    /* En el móvil, las cifras debajo del anillo, a lo ancho y de dos en dos. */
    .directo-llegadas > .directo-anillo {
        grid-row: auto;
    }

    .directo-llegadas > .franja-cifras {
        grid-column: 1 / -1;
    }
}
/* #endregion */

/* #region 6. Las listas: buscar, puertas, últimos y no servidas */
.directo-lista {
    display: grid;
    gap: var(--espacio-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.directo-lista__fila {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--espacio-3);
    padding: var(--espacio-2) 0;
    border-bottom: 1px solid var(--rs-borde);
}

.directo-lista__fila:last-child {
    border-bottom: 0;
}

.directo-lista__texto {
    display: grid;
    gap: 2px;
    min-width: 0;
    overflow-wrap: anywhere;
}

.directo-lista__hora {
    color: var(--rs-texto-tenue);
    font-size: var(--texto-pequeno);
    font-variant-numeric: tabular-nums;
}

.directo-lista__cifra {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
/* #endregion */

/* #region 7. Puerta: las llegadas por tramos */
/* Barras con aire, la base marcada, la punta con su número y el tramo de ahora resaltado. */
.directo-tramos {
    display: flex;
    align-items: stretch;
    gap: 6px;
    height: 170px;
    padding: var(--espacio-5) 0;
    border-bottom: 1px solid var(--rs-borde);
    overflow-x: auto;
}

.directo-tramos__tramo {
    position: relative;
    display: flex;
    flex: 1 0 12px;
    align-items: flex-end;
    justify-content: center;
}

.directo-tramos__barra {
    position: relative;
    width: min(100%, 48px);
    border-radius: 4px 4px 0 0;
    background: color-mix(in srgb, var(--marca-acento) 55%, transparent);
    transition: height 0.6s var(--curva), background-color var(--duracion-hover) var(--curva);
}

.directo-tramos__tramo:hover .directo-tramos__barra,
.directo-tramos__tramo--punta .directo-tramos__barra {
    background: var(--marca-acento);
}

.directo-tramos__tramo--ahora .directo-tramos__barra {
    background: var(--rs-exito);
}

.directo-tramos__cuantas {
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    translate: -50% 0;
    color: var(--rs-texto);
    font-size: var(--texto-etiqueta);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.directo-tramos__hora {
    position: absolute;
    top: 100%;
    left: 0;
    padding-top: var(--espacio-1);
    color: var(--rs-texto-tenue);
    font-size: 11px;
    white-space: nowrap;
}
/* #endregion */

/* #region 8. Dos columnas y las barras por tipo de entrada */
.directo-dos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: var(--espacio-4);
}

.directo-fila {
    display: grid;
    gap: var(--espacio-1);
    margin-bottom: var(--espacio-3);
}

.directo-fila__cabecera {
    display: flex;
    justify-content: space-between;
    gap: var(--espacio-2);
}

.directo-fila__pista {
    height: 8px;
    border-radius: var(--radio-pildora);
    background: var(--rs-borde);
    overflow: hidden;
}

.directo-fila__pista span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--marca-principal);
    transition: width 0.6s var(--curva);
}
/* #endregion */

/* #region 9. Puerta: las mesas */
.directo-mesas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
    gap: var(--espacio-2);
}

.directo-mesa {
    display: grid;
    gap: 2px;
    padding: var(--espacio-3);
    border: 1px solid var(--rs-borde);
    border-radius: var(--radio-md);
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* La mesa que ya está entera, en verde. */
.directo-mesa--completa {
    border-color: color-mix(in srgb, var(--rs-exito) 50%, var(--rs-borde));
    background: color-mix(in srgb, var(--rs-exito) 10%, transparent);
}

.directo-mesa small {
    color: var(--rs-exito);
    font-weight: 600;
}
/* #endregion */

/* #region 10. «Ver asistentes» y «Abrir la barra» */
.directo-ir {
    margin: 0;
}
/* #endregion */

/* #region 11. Barra: lo que se puede hacer */
.directo-acciones h2 {
    margin: 0 0 var(--espacio-3);
}

/* Ampliar el tope y parar las barras, en una fila; los botones, grandes para el dedo. */
.directo-acciones__fila {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-3);
}

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

.directo-acciones__etiqueta {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-2);
    margin-right: var(--espacio-2);
    color: var(--rs-texto-secundario);
    font-weight: 600;
}

.directo-acciones__botones .boton {
    min-width: 4.5rem;
    min-height: 44px;
    font-variant-numeric: tabular-nums;
}

.directo-acciones__fila > .boton {
    min-height: 44px;
}
/* #endregion */

/* #region 12. Pantalla completa */
/* Una tablet en la mesa de la Junta, una tele: sin menú y a todo lo ancho. */
.directo-pantalla-completa .barra-lateral,
.directo-pantalla-completa .cabecera-gestion,
.directo-pantalla-completa .cabecera-pagina__descripcion {
    display: none;
}

.directo-pantalla-completa .contenido-gestion {
    margin: 0;
    max-width: none;
}
/* #endregion */

/* #region 13. Menos movimiento */
@media (prefers-reduced-motion: reduce) {
    .directo-vivo__punto {
        animation: none;
    }
}
/* #endregion */

/* #region El guardia de seguridad (migración 0263): dar su enlace y anularlo */
.directo-guardia h2 {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
}

.directo-guardia__dar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--espacio-3);
    margin-top: var(--espacio-3);
}

/* El botón, junto a su campo: no al otro lado de la tarjeta. */
.directo-guardia__dar .campo {
    flex: 0 1 28rem;
    margin: 0;
}

.directo-guardia__nuevo {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-4);
    margin-top: var(--espacio-3);
    padding: var(--espacio-4);
    border: 1px solid var(--rs-borde-tarjeta);
    border-radius: var(--radio-lg);
    background: var(--rs-superficie-2);
}

.directo-guardia__qr {
    flex: none;
    padding: var(--espacio-2);
    border-radius: var(--radio-md);
    background: #fff;
    line-height: 0;
}

.directo-guardia__qr svg {
    width: 10.5rem;
    height: 10.5rem;
}

.directo-guardia__textos {
    flex: 1 1 14rem;
    display: flex;
    flex-direction: column;
    gap: var(--espacio-2);
}

.directo-guardia__textos p {
    margin: 0;
}

.directo-guardia__textos input {
    width: 100%;
    font-family: var(--fuente-mono);
    font-size: 0.8125rem;
}
/* #endregion */

/* #region La puerta llama a la Junta (migración 0278): lo pendiente, en rojo y arriba */
.directo-llamadas h2 {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
}

.directo-llamadas[data-pendientes]:not([data-pendientes="0"]) {
    border-color: var(--rs-peligro);
    box-shadow: 0 0 0 1px var(--rs-peligro);
}

.directo-llamada__botones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-2);
    justify-content: flex-end;
}

.directo-llamada--resuelta {
    opacity: 0.6;
}
/* #endregion */