/* =============================================================================
   playground.edubox.app  |  cronometro-aula.css
   Centro de Tiempo de Aula — solo lo que BoxUI no cubre. Prefijo hl-.
   Se carga SIEMPRE después de boxui.min.css, boxui-public.min.css, custom.css y
   hl-comun.css. Fuera de @layer: gana a todo BoxUI por defecto.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Display gigante
   ----------------------------------------------------------------------------- */
.hl-display {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 1rem;
    padding: clamp(1.25rem, 5vw, 3.5rem);
    margin-block: 1.25rem 1rem;
    border-radius: var(--box-radius-lg, 14px);
    background: var(--box-surface);
    border: 1px solid var(--box-border);
    transition: background-color .4s ease, color .4s ease;
}

.hl-display-tiempo {
    font-size: clamp(4rem, 22vw, 16rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    margin: 0;
    color: inherit;
}

.hl-display-etiqueta {
    font-size: clamp(1rem, 3vw, 2rem);
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--box-muted-color);
    margin: 0;
}

/* Estados del display (tokens reales verificados en 01-tokens.css) */
.hl-display--aviso {
    background: var(--box-warning-bg);
    color: var(--box-warning-fg);
}
.hl-display--critico {
    background: var(--box-danger-bg);
    color: var(--box-danger-fg);
}
.hl-display--critico .hl-display-tiempo {
    animation: hl-pulso 1s ease-in-out infinite;
}
.hl-display--critico .hl-display-etiqueta {
    color: inherit;
    opacity: .85;
}

/* Al llegar a 0: parpadeo del display completo */
.hl-display--fin {
    background: var(--box-danger-bg);
    color: var(--box-danger-fg);
    animation: hl-parpadeo 1s step-start infinite;
}

@keyframes hl-pulso {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.06); }
}

@keyframes hl-parpadeo {
    0%, 100% { opacity: 1; }
    50%      { opacity: .35; }
}

/* Mientras está en pausa y hay tiempo configurado, número apagado */
.hl-congelado {
    opacity: .45;
}

/* -----------------------------------------------------------------------------
   Modos: el segmented de BoxUI desborda en móvil → grilla propia
   ----------------------------------------------------------------------------- */
.hl-modos {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin-block: 1rem;
}

@media (max-width: 640px) {
    .hl-modos {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }
    .hl-modos > button {
        padding-inline: .5rem;
        white-space: normal;
    }
}

/* -----------------------------------------------------------------------------
   Controles
   ----------------------------------------------------------------------------- */
.hl-controles {
    justify-content: center;
    margin-block: 1rem 1.5rem;
}

/* En contexto público los botones crecen (padding 1.5rem); los de solo icono
   deben mantenerse cuadrados */
.hl-controles .box-btn-icon {
    width: var(--box-control-h-lg);
    min-height: var(--box-control-h-lg);
    padding-inline: 0;
}

.hl-campos-tiempo .box-field {
    min-width: 140px;
}

.hl-resumen-rondas {
    margin-bottom: 0;
}

/* -----------------------------------------------------------------------------
   Semáforo
   ----------------------------------------------------------------------------- */
.hl-semaforo {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.hl-semaforo-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    height: auto;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 4px solid transparent;
    color: var(--box-text-on-brand, #fff);
    font-size: 1.1rem;
    font-weight: 700;
    text-align: center;
    padding: 1.5rem .75rem;
    cursor: pointer;
    transition: transform var(--box-dur-fast, 140ms) ease, border-color var(--box-dur-fast, 140ms) ease, box-shadow var(--box-dur-fast, 140ms) ease;
}

.hl-semaforo-btn i {
    font-size: clamp(1.5rem, 5vw, 2.5rem);
}

.hl-semaforo-btn small {
    color: inherit;
    opacity: .85;
    font-size: .8rem;
    font-weight: 500;
    line-height: 1.3;
}

.hl-semaforo--verde   { background: var(--box-green-500, #17935a); }
.hl-semaforo--amarillo{ background: var(--box-amber-500, #c77b0a); }
.hl-semaforo--rojo    { background: var(--box-red-500, #d93a2e); }

.hl-semaforo-btn:hover {
    transform: translateY(-2px);
    translate: none;
    box-shadow: none;
}

.hl-semaforo-btn[aria-pressed="true"] {
    border-color: var(--box-text);
    transform: scale(1.06);
    box-shadow: var(--box-shadow, 0 2px 8px rgba(0, 0, 0, .25));
}

/* El display del semáforo también se tiñe del estado activo */
.hl-display--verde {
    background: var(--box-success-bg);
    color: var(--box-success-fg);
}
.hl-display--amarillo {
    background: var(--box-warning-bg);
    color: var(--box-warning-fg);
}
.hl-display--rojo {
    background: var(--box-danger-bg);
    color: var(--box-danger-fg);
}
.hl-display--verde .hl-display-tiempo,
.hl-display--amarillo .hl-display-tiempo,
.hl-display--rojo .hl-display-tiempo {
    font-size: clamp(3.5rem, 16vw, 12rem);
    text-transform: uppercase;
}

@media (max-width: 640px) {
    .hl-semaforo { grid-template-columns: 1fr; gap: .75rem; }
    .hl-semaforo-btn { aspect-ratio: auto; min-height: 96px; border-radius: var(--box-radius-lg, 14px); }
}

/* -----------------------------------------------------------------------------
   Pantalla completa: solo el display
   ----------------------------------------------------------------------------- */
.hl-display:fullscreen {
    width: 100vw;
    height: 100vh;
    max-width: none;
    border: none;
    border-radius: 0;
    background: var(--box-canvas);
    margin: 0;
    place-items: center;
}

.hl-display:fullscreen .hl-display-tiempo {
    font-size: clamp(4rem, 24vw, 18rem);
}

/* -----------------------------------------------------------------------------
   Accesibilidad: movimiento reducido (sin pulso ni parpadeo)
   ----------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .hl-display--critico .hl-display-tiempo,
    .hl-display--fin {
        animation: none;
    }
}

/* -----------------------------------------------------------------------------
   Impresión
   ----------------------------------------------------------------------------- */
@media print {
    .hl-display {
        border: 1px solid #000;
    }
}