/*
 * Las pulseras de un evento: su ficha y «En directo» (gestion/pulseras-evento.js).
 */

/* #region Pulseras de la asociación (31 oct 2026, migración 0320) */
/* El título y, a la derecha, cuántos la llevan con su barra; debajo, una fila por persona como en «Asistentes». */
.pulseras-evento__cabeza {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-2) var(--espacio-4);
}

.pulseras-evento__cabeza h2 {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-2);
    margin: 0;
}

.pulseras-evento__cabeza h2 > .icono {
    color: var(--marca-acento);
}

.pulseras-evento__progreso {
    display: grid;
    justify-items: end;
    gap: var(--espacio-1);
    min-width: 10rem;
}

.pulseras-evento__cifra {
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
    font-variant-numeric: tabular-nums;
}

.pulseras-evento__barra {
    width: 100%;
    height: 0.375rem;
    overflow: hidden;
    border-radius: var(--radio-pildora);
    background: var(--rs-superficie-3);
}

.pulseras-evento__barra > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--rs-exito);
    transition: width var(--duracion-hover) var(--curva);
}

.pulseras-evento > .ayuda-campo {
    margin: var(--espacio-2) 0 var(--espacio-4);
}

.pulseras-evento .campo-buscar {
    margin-bottom: var(--espacio-3);
}

.pulseras-evento__lista {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pulseras-evento__fila {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto minmax(11rem, auto);
    align-items: center;
    gap: var(--espacio-3);
    padding: var(--espacio-3) 0;
    border-top: 1px solid var(--rs-borde-sutil);
}

.pulseras-evento__quien {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.pulseras-evento__quien strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pulseras-evento__quien small {
    color: var(--rs-texto-tenue);
}

.pulseras-evento__fila .etiqueta {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

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

/* En el móvil, la etiqueta baja debajo del nombre y el botón sigue a la derecha: una persona, una fila corta. */
@media (max-width: 639px) {
    .pulseras-evento__fila {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "cara quien acciones"
            "cara estado acciones";
        gap: var(--espacio-1) var(--espacio-3);
    }

    .pulseras-evento__fila > .avatar-fila {
        grid-area: cara;
    }

    .pulseras-evento__quien {
        grid-area: quien;
    }

    .pulseras-evento__fila > .etiqueta {
        grid-area: estado;
        justify-self: start;
    }

    .pulseras-evento__acciones {
        grid-area: acciones;
        flex-direction: column;
        align-items: flex-end;
        gap: var(--espacio-1);
    }

    .pulseras-evento__progreso {
        justify-items: start;
        width: 100%;
    }
}
/* #endregion */

/* #region Añadir un niño de última hora (10 nov 2026, gestion/nino-ultima-hora.js) */
/* El botón, a la vista junto al título: lo que se pulsa el día del evento. */
.pulseras-evento__anadir {
    margin-left: auto;
}

.nino-ultima-hora .ventana-paso + .ventana-paso {
    margin-top: var(--espacio-4);
    padding-top: var(--espacio-4);
    border-top: 1px solid var(--rs-borde-sutil);
}

.nino-ultima-hora__resultados {
    display: grid;
    gap: var(--espacio-1);
    margin: var(--espacio-2) 0;
    padding: 0;
    list-style: none;
}

/* Cada niño o adulto, un botón entero que se toca con el dedo: nombre, edad y si ya viene. */
.nino-ultima-hora__opcion {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 2px var(--espacio-3);
    width: 100%;
    min-height: 2.75rem;
    padding: var(--espacio-2) var(--espacio-3);
    border: 1px solid var(--rs-borde-sutil);
    border-radius: var(--radio-md);
    background: var(--rs-superficie-1);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.nino-ultima-hora__opcion:hover,
.nino-ultima-hora__opcion:focus-visible {
    border-color: var(--marca-acento);
}

.nino-ultima-hora__opcion small {
    grid-column: 1;
    color: var(--rs-texto-tenue);
}

.nino-ultima-hora__opcion .etiqueta {
    grid-column: 2;
    grid-row: 1 / span 2;
    white-space: nowrap;
}

/* Lo ya elegido: con su ✓ y «Cambiar». */
.nino-ultima-hora__elegido {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-2);
    padding: var(--espacio-2) var(--espacio-3);
    border-radius: var(--radio-md);
    background: var(--rs-superficie-2);
}

.nino-ultima-hora__elegido > span {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-2);
}

.nino-ultima-hora__elegido .icono {
    color: var(--rs-exito);
}

.nino-ultima-hora__edad input {
    max-width: 6rem;
}

.nino-ultima-hora__rotulo {
    font-weight: 600;
}
/* #endregion */

/* #region Leer la pulsera con la cámara (pedir-pulsera.js, 12 nov 2026) */
.pulsera-camara {
    display: grid;
    gap: var(--espacio-2);
    justify-items: start;
    margin-top: var(--espacio-2);
}

.pulsera-camara__visor {
    display: grid;
    gap: var(--espacio-2);
    justify-items: center;
    width: 100%;
}

.pulsera-camara__visor video {
    width: 100%;
    max-width: 22rem;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radio-md);
    background: #000;
}
/* #endregion */