/* ============================================================
   playground.edubox.app  |  ruleta-grupos.css
   Selector Aleatorio y Armador de Equipos
   Se carga SIEMPRE después de _comun/css/hl-comun.css.
   Solo BoxUI + tokens; nada de frameworks externos.
   ============================================================ */

/* -----------------------------------------------------------------------------
   Utilidad compartida (respaldo local de hl-comun.css si _comun no está presente)
   ----------------------------------------------------------------------------- */
.hl-tnum { font-variant-numeric: tabular-nums; }

/* -----------------------------------------------------------------------------
   Modo de la herramienta (segmentado a todo el ancho)
   ----------------------------------------------------------------------------- */
.hl-modos { width: 100%; margin-bottom: 1.25rem; }
.hl-modos > button { flex: 1 1 0; justify-content: center; white-space: nowrap; }
@media (max-width: 480px) {
    .hl-modos > button { white-space: normal; }
}

.hl-seg-equipos { width: 100%; }
.hl-seg-equipos > button { flex: 1 1 0; justify-content: center; }

/* -----------------------------------------------------------------------------
   RULETA / SELECCIONADOR AL AZAR
   ----------------------------------------------------------------------------- */
.hl-ruleta {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    min-height: 260px;
    text-align: center;
}

.hl-ruleta-nombre {
    font-size: clamp(2rem, 9vw, 6rem);
    font-weight: 800;
    line-height: 1.1;
    text-align: center;
    min-height: 1.2em;
    overflow-wrap: anywhere;
    margin: 0;
}

.hl-ruleta--girando .hl-ruleta-nombre { animation: hl-parpadeo .08s steps(1) infinite; }
@keyframes hl-parpadeo { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
    .hl-ruleta--girando .hl-ruleta-nombre { animation: none; }
}

.hl-ruleta-estado { justify-content: center; }
.hl-ruleta-acciones { justify-content: center; }
.hl-kbd-hint { align-self: center; }

/* -----------------------------------------------------------------------------
   CHIPS de nombres (pendientes / usados / parejas)
   ----------------------------------------------------------------------------- */
/* El .box-chip-row público va en una sola línea; aquí queremos que envuelva */
.hl-chip-wrap { flex-wrap: wrap; overflow-x: visible; }

.hl-chip-static { cursor: default; }
.hl-chip-usado { opacity: .82; }

.hl-chip-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    min-height: 0;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition: background-color var(--box-dur-fast) var(--box-ease),
                color var(--box-dur-fast) var(--box-ease);
}
.hl-chip-x:hover {
    background: var(--box-danger-bg);
    color: var(--box-danger-fg);
}
.hl-chip-usado .box-truncate { max-width: 8rem; }

/* -----------------------------------------------------------------------------
   BOMBO: Pendientes / Ya participaron (dos columnas)
   ----------------------------------------------------------------------------- */
.hl-bombo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}
@media (max-width: 480px) {
    .hl-bombo { grid-template-columns: 1fr; }
}
.hl-bombo h4 {
    margin: 0 0 0.4rem;
    font-size: var(--box-text-sm);
    text-transform: uppercase;
    letter-spacing: var(--box-tracking-wide);
    color: var(--box-text-muted);
}

/* -----------------------------------------------------------------------------
   Historial de elegidos
   ----------------------------------------------------------------------------- */
.hl-historial { margin: 0; padding-left: 1.25rem; }
.hl-historial li {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding-block: 0.15rem;
}
.hl-historial .hl-tnum {
    color: var(--box-text-subtle);
    font-size: var(--box-text-sm);
    flex-shrink: 0;
}

/* -----------------------------------------------------------------------------
   EQUIPOS
   ----------------------------------------------------------------------------- */
.hl-equipo-color {
    width: 12px;
    height: 26px;
    border-radius: 3px;
    flex-shrink: 0;
    background: var(--_c, var(--box-brand));
}
.hl-equipo-card { height: 100%; }
.hl-equipo-card > header h3 {
    margin: 0;
    font-size: var(--box-text-base);
    flex: 1;
    min-width: 0;
}
.hl-equipo-card > header .box-badge { flex-shrink: 0; }

.hl-integrantes { list-style: none; margin: 0; padding: 0; }
.hl-integrantes li {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    padding-block: 0.18rem;
    font-size: var(--box-text-md);
}
.hl-integran-num {
    color: var(--box-text-subtle);
    font-size: var(--box-text-sm);
    min-width: 1.35rem;
    text-align: right;
}
.hl-integrantes .box-truncate,
.hl-orden-lista .box-truncate,
.hl-historial .box-truncate { flex: 1; min-width: 0; }

.hl-equipos-resumen {
    font-weight: 650;
    font-size: var(--box-text-lg);
    margin-bottom: 0.85rem;
}

/* -----------------------------------------------------------------------------
   SORTEO DE ORDEN
   ----------------------------------------------------------------------------- */
.hl-orden-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.85rem;
}
.hl-orden-lista { list-style: none; margin: 0; padding: 0; }
.hl-orden-lista li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding-block: 0.4rem;
    border-bottom: 1px solid var(--box-border-subtle);
}
.hl-orden-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding-inline: 0.45rem;
    border-radius: var(--box-radius-pill);
    background: var(--box-brand-soft);
    color: var(--box-brand);
    font-weight: 700;
    font-size: var(--box-text-sm);
    flex-shrink: 0;
}

/* -----------------------------------------------------------------------------
   Barras de acción y textarea
   ----------------------------------------------------------------------------- */
.hl-barra-acciones { margin-bottom: 1rem; }
.hl-lista-textarea { resize: vertical; min-height: 9rem; }

.hl-par-fila > select { flex: 1; min-width: 0; }

/* -----------------------------------------------------------------------------
   PROYECCIÓN (pantalla completa)
   ----------------------------------------------------------------------------- */
.hl-resultado-area:fullscreen {
    background: var(--box-canvas);
    padding: clamp(1rem, 4vw, 3rem);
    overflow-y: auto;
}
.hl-resultado-area:fullscreen .hl-ruleta-nombre { font-size: clamp(5rem, 18vw, 13rem); }
.hl-resultado-area:fullscreen .hl-equipos-grid { font-size: 1.35rem; }
.hl-resultado-area:fullscreen .hl-equipos-resumen { font-size: var(--boxp-text-2xl); }
.hl-resultado-area:fullscreen .hl-orden-lista li { font-size: 1.5rem; }

/* Fallback si el navegador no soporta Fullscreen API: la clase va en <html> */
html.hl-proyectar .box-announce,
html.hl-proyectar .box-public-nav,
html.hl-proyectar .box-nav-drawer,
html.hl-proyectar .box-overlay,
html.hl-proyectar .box-public-footer { display: none; }
html.hl-proyectar main.box-container > *:not(#app-ruleta) { display: none; }
html.hl-proyectar #app-ruleta > .hl-modos,
html.hl-proyectar #app-ruleta > .box-main-layout > .box-sidebar,
html.hl-proyectar .hl-barra-acciones,
html.hl-proyectar .box-no-print { display: none; }
html.hl-proyectar .box-main-layout { display: block; }
html.hl-proyectar .hl-ruleta { min-height: 80vh; }
html.hl-proyectar .hl-ruleta-nombre { font-size: clamp(5rem, 18vw, 13rem); }
html.hl-proyectar .hl-equipos-grid { font-size: 1.35rem; }
html.hl-proyectar .hl-orden-lista li { font-size: 1.5rem; }

/* -----------------------------------------------------------------------------
   IMPRESIÓN — hoja limpia (PLAN MAESTRO §3.5)
   El resto (nav, footer, aviso) ya lo esconde hl-comun.css.
   ----------------------------------------------------------------------------- */
@media print {
    main.box-container > *:not(#app-ruleta) { display: none !important; }
    #app-ruleta > .hl-modos { display: none !important; }
    .box-main-layout { display: block !important; }
    .box-sidebar { display: none !important; }
    .hl-resultado-area { box-shadow: none; }
    .hl-equipo-card,
    .hl-orden-lista li,
    .hl-integrantes { break-inside: avoid; }
}