/* =============================================================================
   playground.edubox.app  |  hl-comun.css
   Clases y reglas compartidas entre TODAS las herramientas locales (hl-*).
   Se carga SIEMPRE antes del CSS propio de cada herramienta.
   Solo BoxUI + tokens; nada de frameworks externos.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Impresión — regla base (PLAN MAESTRO §3.5).
   Cada herramienta añade aquí sus propios @media print con prefijo hl-.
   ----------------------------------------------------------------------------- */
@media print {
    @page { size: letter portrait; margin: 1.5cm; }
    body { background: #fff !important; }
    .box-public-nav, .box-public-footer, .box-announce,
    .box-no-print, .hl-panel-config { display: none !important; }
    .hl-hoja { break-after: page; }
    .hl-hoja:last-child { break-after: auto; }
    .hl-item { break-inside: avoid; }
    * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* -----------------------------------------------------------------------------
   Hoja imprimible en pantalla (vista previa). Carta por defecto.
   Las herramientas que la usan sobrescriben tamaño y escala en su CSS propio.
   ----------------------------------------------------------------------------- */
.hl-hoja {
    background: #ffffff;
    color: #1a1a1a;
    width: 21.59cm;
    min-height: 27.94cm;
    margin: 0 auto;
    padding: 1.5cm;
    border-radius: var(--box-radius, 8px);
    box-shadow: 0 2px 14px rgba(0, 0, 0, .12);
}

/* -----------------------------------------------------------------------------
   Display gigante / número principal (cronómetro, PPM, notas…)
   ----------------------------------------------------------------------------- */
.hl-resultado-grande {
    font-size: clamp(2.5rem, 10vw, 5rem);
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    margin: 0;
}

/* -----------------------------------------------------------------------------
   Barra de progreso con etiqueta (reutilizada en rondas, evaluación…)
   ----------------------------------------------------------------------------- */
.hl-progreso-contexto {
    display: flex;
    align-items: center;
    gap: .75rem;
}
.hl-progreso-contexto .box-progress { flex: 1; margin: 0; }

/* -----------------------------------------------------------------------------
   Fila de atajos de teclado
   ----------------------------------------------------------------------------- */
.hl-kbd-row {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.25rem;
    font-size: .85rem;
    color: var(--box-text-muted, var(--box-muted-color, #666));
}

/* -----------------------------------------------------------------------------
   Utilidad para números de ancho fijo
   ----------------------------------------------------------------------------- */
.hl-tnum { font-variant-numeric: tabular-nums; }

/* -----------------------------------------------------------------------------
   Encabezado de ficha impresa (Nombre/Grado/Fecha) — fichas y exámenes
   ----------------------------------------------------------------------------- */
.hl-ficha-cabecera {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    border-bottom: 2px solid #000;
    padding-bottom: .5rem;
    margin-bottom: 1rem;
    font-size: .9rem;
}
.hl-ficha-cabecera .box-field { flex: 1; min-width: 160px; }

/* -----------------------------------------------------------------------------
   Accesibilidad: movimiento reducido
   ----------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .hl-animado, .hl-pulso { animation: none !important; }
}