/* =============================================================================
   playground.edubox.app  |  fichas-imprimibles.css
   Fábrica de Fichas Imprimibles — CSS de INTERFAZ (sidebar, selector de
   generador, toolbar, avisos, responsive). Lo relativo a la hoja y a la
   impresión vive en hoja-impresion.css (se carga después de este).
   Se carga después de boxui.min.css, boxui-public.min.css, custom.css y hl-comun.css.
   Fuera de @layer: gana a BoxUI por defecto. Sin !important fuera de print.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   Selector de generador (box-segmented adaptado a 5 opciones)
   --------------------------------------------------------------------------- */
.hl-modos {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin-bottom: 1.1rem;
}
.hl-modos > button {
    flex: 1 1 auto;
    white-space: nowrap;
    gap: .4rem;
}

@media (max-width: 720px) {
    .hl-modos > button { white-space: normal; padding-inline: .5rem; font-size: .78rem; }
}

/* ---------------------------------------------------------------------------
   Barra de acciones de impresión
   --------------------------------------------------------------------------- */
.hl-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
}
.hl-toolbar .hl-toolbar-info {
    margin-inline-start: auto;
    font-size: var(--box-text-sm, .85rem);
    color: var(--box-text-muted, #666);
}

/* ---------------------------------------------------------------------------
   Panel de configuración (artículos del sidebar)
   --------------------------------------------------------------------------- */
.hl-panel-config > header {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .7rem .9rem;
    font-weight: 700;
    font-size: .95rem;
    border-bottom: 1px solid var(--box-border-subtle, #dcdcdc);
}
.hl-panel-config > header i { color: var(--box-brand, #2563eb); }
.hl-panel-config .hl-cuerpo { padding: .9rem; }

.hl-panel-config .box-field { margin-bottom: .7rem; }
.hl-panel-config .box-field:last-child { margin-bottom: 0; }

.hl-panel-config .box-check { margin-bottom: .5rem; }

/* Campos de rango en dos columnas dentro de la sidebar */
.hl-campos-rango {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
}

/* Área de texto de entrada de palabras/pistas */
.hl-area-texto {
    resize: vertical;
    min-height: 8rem;
    font-family: var(--box-font-mono, ui-monospace, monospace);
    font-size: .9rem;
}

/* Resumen de estado (p. ej. cuántas palabras se detectaron) */
.hl-resumen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin-bottom: .8rem;
}
.hl-resumen .box-badge { font-size: .78rem; }

/* ---------------------------------------------------------------------------
   Avisos (casos borde del PLAN §5) que se muestran en el sidebar
   --------------------------------------------------------------------------- */
.hl-avisos { margin: .75rem 0 0; }
.hl-avisos .box-alert { margin-bottom: .45rem; }
.hl-avisos .box-alert:last-child { margin-bottom: 0; }
.hl-avisos .box-alert > div { font-size: .86rem; line-height: 1.35; }

/* ---------------------------------------------------------------------------
   Zona de vista previa
   --------------------------------------------------------------------------- */
.hl-preview {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1rem .4rem 2rem;
    overflow-x: auto;
    min-height: 200px;
}

.hl-etiqueta-preview {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0 0 .35rem;
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--box-text-muted, #666);
}
.hl-etiqueta-preview i { color: var(--box-brand, #2563eb); }

/* Alternador "ver solución" en pantalla */
.hl-ver-sol {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}

/* ---------------------------------------------------------------------------
   Responsive 360 px
   --------------------------------------------------------------------------- */
@media (max-width: 420px) {
    .hl-toolbar .box-btn { padding-inline: .65rem; font-size: .8rem; }
    .hl-campos-rango { grid-template-columns: 1fr; }
    .hl-panel-config .hl-cuerpo { padding: .75rem; }
    .hl-preview { padding-inline: 0; }
}