/* ==========================================================================
SHEET CSS: US Letter (8.5 x 11 in) Printable Engine & Screen Scaler
Generador de Cuadernillos Educativos
========================================================================== */

/* Contenedor del visor de hojas en pantalla */
.sheet-viewer-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
width: 100%;
}

/* Barra de herramientas del visor (Zoom, Imprimir, Descargar) */
.sheet-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
max-width: 850px;
background: var(--bg-surface);
padding: 8px 16px;
border-radius: var(--radius-md);
border: 1px solid var(--border-color);
box-shadow: var(--shadow-sm);
flex-wrap: wrap;
gap: 8px;
}

.toolbar-group {
display: flex;
align-items: center;
gap: 6px;
}

.sheet-stage {
display: flex;
justify-content: center;
width: 100%;
overflow-x: auto;
padding: 20px 0 40px;
}

/* ==========================================================================
LA HOJA FÍSICA: FORMATO US LETTER (8.5 × 11 PULGADAS)
En pantalla a 96 DPI: 8.5in * 96 = 816px, 11in * 96 = 1056px
========================================================================== */
.sheet-paper {
width: 8.5in;
min-width: 8.5in;
max-width: 8.5in;
height: 11in;
min-height: 11in;
max-height: 11in;
background: #FFFFFF;
color: #1E293B;
box-shadow: var(--shadow-sheet);
border: 1px solid #CBD5E1;
border-radius: 2px;
position: relative;
box-sizing: border-box;
padding: 0.5in; /* Margen seguro para impresoras domésticas */
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
transform-origin: top center;
transition: transform 0.2s ease-out;
}

/* Clases de Zoom en pantalla */
.zoom-100 { transform: scale(1); }
.zoom-85  { transform: scale(0.85); }
.zoom-75  { transform: scale(0.75); }
.zoom-60  { transform: scale(0.60); }
.zoom-50  { transform: scale(0.50); }

/* ==========================================================================
COMPONENTES ESTRUCTURALES DE LA FICHA (ELEMENTOS HTML/SVG INDEPENDIENTES)
========================================================================== */

/* 1. Encabezado Escolar Imprimible */
.sheet-header {
display: flex;
flex-direction: column;
gap: 8px;
border-bottom: 2px solid #334155;
padding-bottom: 10px;
margin-bottom: 14px;
}

.sheet-header-top {
display: flex;
justify-content: space-between;
align-items: center;
}

.school-meta {
display: flex;
align-items: center;
gap: 8px;
}

.school-icon-box {
width: 32px;
height: 32px;
border-radius: 6px;
background: #EEF2FF;
border: 1px solid #C7D2FE;
display: flex;
align-items: center;
justify-content: center;
color: var(--primary);
}

.school-name {
font-size: 0.95rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.03em;
color: #0F172A;
}

.sheet-category-badge {
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
padding: 3px 10px;
border-radius: var(--radius-full);
background: #F1F5F9;
border: 1px solid #CBD5E1;
color: #334155;
}

/* Campos para rellenar a mano por el alumno */
.student-data-grid {
display: grid;
grid-template-columns: 2.2fr 1fr 0.8fr;
gap: 12px;
font-size: 0.85rem;
align-items: flex-end;
}

.fill-field {
display: flex;
align-items: flex-end;
gap: 6px;
white-space: nowrap;
}

.fill-field-label {
font-weight: 700;
color: #475569;
font-size: 0.8rem;
}

.fill-field-line {
flex: 1;
border-bottom: 1.5px dotted #64748B;
min-height: 18px;
}

/* 2. Bloque de Título e Instrucción Didáctica */
.sheet-title-block {
text-align: center;
margin-bottom: 14px;
}

font-family: var(--font-kids);
font-size: 1.55rem;
font-weight: 800;
color: #0F172A;
margin-bottom: 6px;
letter-spacing: -0.01em;
}

.sheet-instruction-box {
display: none !important;

background: #F8FAFC;
border: 1.5px solid #E2E8F0;
border-left: 4px solid var(--primary);
border-radius: 8px;
padding: 8px 12px;
display: flex;
align-items: center;
gap: 10px;
text-align: left;
}

.instruction-icon {
width: 22px;
height: 22px;
color: var(--primary);
flex-shrink: 0;
}

.instruction-text {
font-size: 0.92rem;
color: #334155;
font-weight: 500;
line-height: 1.35;
}

/* 3. Área de Contenido Principal del Ejercicio */
.sheet-content-body {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-around;
gap: 12px;
position: relative;
}

/* 4. Pie de Página Imprimible */
.sheet-footer {
border-top: 1.5px solid #E2E8F0;
padding-top: 8px;
margin-top: 10px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.75rem;
color: #64748B;
}

.sheet-footer-author {
display: flex;
align-items: center;
gap: 6px;
}

.sheet-footer-page {
  font-weight: 700;
  padding: 2px 8px;
  background: #F1F5F9;
  border-radius: 4px;
  border: 1px solid #E2E8F0;
}

/* ==========================================================================
   OVERLAY DE PREVISUALIZACIÓN DE CUADERNILLO PDF (EN PANTALLA)
   ========================================================================== */
body.has-pdf-overlay {
  overflow: hidden !important;
}

#metodo-pdf-overlay {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: #0F172A !important;
  background: rgba(15, 23, 42, 0.88) !important;
  backdrop-filter: blur(4px);
  z-index: 999999 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  padding: 30px 16px 60px 16px !important;
  box-sizing: border-box !important;
}

#metodo-pdf-overlay .pdf-pages-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 28px !important;
  margin: 0 auto !important;
  width: 100% !important;
}

#metodo-pdf-overlay .pdf-page-preview {
  position: relative !important;
  width: 8.5in !important;
  height: 11in !important;
  background: white !important;
  margin: 0 auto !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4) !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}

/* ==========================================================================
   REGLAS EXACTAS DE IMPRESIÓN (@page y @media print)
   ========================================================================== */
@page {
  size: letter portrait;
  margin: 0; /* Controlamos márgenes con .sheet-paper padding */
}

@media print {
/* Ocultar elementos de UI y no imprimibles */
.no-print,
#metodo-silabico-controls,
.sidebar,
.topbar,
.sidebar-overlay,
.sheet-toolbar,
.btn-sidebar-toggle,
#toast-container {
display: none !important;
}

html, body {
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
overflow: visible !important;
}

.app-wrapper,
.main-wrapper,
.views-container,
.views-container > div,
#metodo-sheet-viewer-container,
.sheet-viewer-container {
display: block !important;
position: static !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
width: 100% !important;
max-width: none !important;
height: auto !important;
min-height: 0 !important;
overflow: visible !important;
background: transparent !important;
gap: 0 !important;
}

/* Si está activo el overlay del compendio */
body:has(#metodo-pdf-overlay) .app-wrapper,
body.has-pdf-overlay .app-wrapper {
display: none !important;
}

#metodo-pdf-overlay {
position: static !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
overflow: visible !important;
background: transparent !important;
}

.pdf-pages-container {
display: block !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
}

.pdf-page-preview {
margin: 0 !important;
padding: 0 !important;
box-shadow: none !important;
border: none !important;
width: 8.5in !important;
height: 11in !important;
max-height: 11in !important;
overflow: hidden !important;
page-break-inside: avoid !important;
break-inside: avoid !important;
}

.pdf-page-preview:not(:last-child) {
page-break-after: always !important;
break-after: page !important;
}

.sheet-stage {
padding: 0 !important;
margin: 0 !important;
display: block !important;
overflow: visible !important;
width: 100% !important;
height: auto !important;
}

#sheet-scaler {
transform: none !important;
margin: 0 !important;
padding: 0 !important;
display: block !important;
width: 100% !important;
height: auto !important;
}

/* Hoja estándar de actividad */
.sheet-paper {
margin: 0 auto !important;
padding: 0.5in !important;
border: none !important;
box-shadow: none !important;
width: 8.5in !important;
height: 11in !important;
max-height: 11in !important;
page-break-inside: avoid !important;
break-inside: avoid !important;
page-break-before: avoid !important;
break-before: avoid !important;
transform: none !important;
overflow: hidden !important;
box-sizing: border-box !important;