/* ========================================
   ESTILOS PARA IMPRESIÓN - EVALUADOR TFC
   Presentación y Observaciones en página 3
======================================== */

@page {
    size: A4;
    margin: 1.2cm;
    
    @top-center {
        content: "Desarrollo Aplicaciones Web (DAW)";
        font-family: 'Roboto', sans-serif;
        font-size: 9pt;
        color: #333;
    }
    
    @bottom-center {
        content: "CIFP A Carballeira - Página " counter(page);
        font-family: 'Roboto', sans-serif;
        font-size: 8pt;
        color: #666;
    }
}

/* ========================================
   CONFIGURACIÓN GENERAL COMPACTA
======================================== */
body {
    font-family: 'Roboto', sans-serif;
    font-size: 10pt;
    line-height: 1.3;
    color: #222;
    background: #fff;
    margin: 0;
    padding: 0;
}

.contenedor-principal {
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Ocultar elementos no necesarios para impresión */
.encabezado-principal, 
.pie-pagina, 
.solo-pantalla {
    display: none !important;
}

/* ========================================
   CONTROL DE SALTOS DE PÁGINA ESPECÍFICOS
======================================== */

/* PÁGINA 1: Contenedor flexible (información + resultados) */
.contenedor-flex {
    page-break-after: always !important;
    page-break-inside: avoid !important;
    margin-bottom: 0.5cm;
    padding-bottom: 1cm;
}

/* PÁGINA 2: Solo Documentación y Proyecto */
.bloque-evaluacion:first-of-type {
    page-break-before: always !important;
}

/* PÁGINA 3: Presentación y Comentarios */
.bloque-evaluacion:nth-of-type(3) {
    page-break-before: always !important;
    margin-top: 0.5cm;
}

/* Forzar que comentarios NO vayan a nueva página (van con presentación) */
.seccion-comentarios {
    page-break-before: avoid !important;
    page-break-inside: avoid !important;
    margin-top: 0.4cm;
}

/* EVITAR ROMPER SUB-BLOQUES */
.sub-bloque {
    page-break-inside: avoid !important;
    page-break-after: avoid;
    margin-bottom: 0.2cm;
    padding-bottom: 0.15cm;
    border-bottom: 1px solid #E9ECEF;
}

.sub-bloque:last-child {
    border-bottom: none;
    margin-bottom: 0.15cm;
}

/* ========================================
   TIPOGRAFÍA COMPACTA
======================================== */
h1 {
    font-family: 'Roboto', sans-serif;
    font-size: 14pt;
    font-weight: 700;
    text-align: center;
    margin: 0.6cm 0 0.4cm;
    padding-bottom: 0.2cm;
    border-bottom: 2px solid #2E86C1;
    color: #1B4F72;
}

h2 {
    font-family: 'Roboto', sans-serif;
    font-size: 11pt !important;
    font-weight: 600;
    margin: 0.3cm 0 0.25cm !important;
    padding: 0.15cm 0.2cm;
    background-color: #F0F8FF !important;
    border-left: 3px solid #2E86C1 !important;
    color: #1B4F72;
    page-break-after: avoid !important;
}

h3 {
    font-family: 'Roboto', sans-serif;
    font-size: 10pt !important;
    font-weight: 500;
    margin: 0.2cm 0 0.15cm !important;
    padding-bottom: 0.1cm;
    border-bottom: 1px solid #5DADE2 !important;
    color: #2E86C1;
    page-break-after: avoid !important;
}

h4 {
    font-size: 10pt;
    margin: 0.2cm 0;
    font-weight: 600;
    page-break-after: avoid !important;
}

/* ========================================
   PÁGINA 1: CONTENEDOR FLEXIBLE OPTIMIZADO
======================================== */
.contenedor-flex {
    display: flex;
    justify-content: space-between;
    gap: 0.4cm;
    margin-bottom: 0.3cm;
    page-break-inside: avoid !important;
    page-break-after: always !important;
}

.contenedor-flex .seccion-estudiante,
.contenedor-flex .panel-resultados {
    flex: 1;
    margin-bottom: 0;
    padding: 0.3cm;
    border: 1px solid #E0E0E0;
    border-radius: 2px;
    background-color: #FAFAFA;
}

/* ========================================
   INFORMACIÓN DEL ESTUDIANTE - COMPACTA
======================================== */
.seccion-estudiante h2,
.panel-resultados h2 {
    font-size: 11pt !important;
    margin: 0 0 0.3cm 0 !important;
    padding: 0.1cm 0 !important;
    border-bottom: 2px solid #2E86C1 !important;
    background: none !important;
    color: #1B4F72;
}

.campo-formulario {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.12cm;
    padding-bottom: 0.08cm;
    border-bottom: 1px dotted #E0E0E0;
    font-size: 9pt;
}

.campo-formulario label {
    font-weight: 600;
    width: 45%;
    color: #444;
    font-family: 'Roboto', sans-serif;
}

.campo-formulario input {
    width: 50%;
    padding: 0.05cm;
    border: none !important;
    border-bottom: 1px solid #BDBDBD !important;
    background-color: transparent;
    font-style: italic;
    color: #212121;
    font-size: 9pt;
}

/* ========================================
   PANEL DE RESULTADOS - COMPACTO
======================================== */
.resultado-final {
    text-align: center;
    font-size: 11pt;
    font-weight: bold;
    margin: 0.2cm 0;
    padding: 0.25cm;
    background-color: #E8EAF6;
    border: 1px solid #C5CAE9;
    border-radius: 3px;
}

.info-alumno h2 {
    font-size: 10pt !important;
    margin: 0 0 0.15cm 0 !important;
    color: #1B4F72;
    border: none !important;
    background: none !important;
    padding: 0 !important;
}

.calificacion-container h3 {
    font-size: 9pt !important;
    margin: 0.15cm 0 !important;
    color: #2E86C1;
    border: none !important;
    background: none !important;
    padding: 0 !important;
}

.nota-final {
    font-size: 16pt;
    color: #1B4F72;
    margin: 0.15cm 0;
    font-weight: 700;
}

.estado-evaluacion {
    font-size: 9pt;
    padding: 0.15cm 0.3cm;
    border-radius: 3px;
    display: inline-block;
    font-weight: 600;
}

.estado-evaluacion.aprobado {
    background-color: #C8E6C9;
    color: #1B5E20;
}

.estado-evaluacion.suspenso {
    background-color: #FFCDD2;
    color: #C62828;
}

/* ========================================
   DESGLOSE COMPACTO
======================================== */
.desglose-puntuaciones {
    padding: 0.2cm;
    margin-top: 0.15cm;
}

.desglose-puntuaciones h3 {
    font-size: 9pt !important;
    margin: 0 0 0.15cm 0 !important;
    text-align: center;
    color: #2E86C1;
    border: none !important;
    background: none !important;
    padding: 0 !important;
}

.desglose-item {
    display: flex;
    justify-content: space-between;
    padding: 0.06cm 0.12cm;
    border-bottom: 1px solid #E0E0E0;
    font-size: 8pt;
    background-color: #F8F9FA;
    margin-bottom: 0.02cm;
}

.desglose-item:last-child {
    border-bottom: none;
}

/* ========================================
   PÁGINAS 2: DOCUMENTACIÓN Y PROYECTO
======================================== */
.bloque-evaluacion {
    margin-bottom: 0.2cm;
    padding: 0.15cm;
    border: 1px solid #E0E0E0;
    border-radius: 2px;
    background-color: #FAFAFA;
    page-break-inside: auto;
}

/* Primer bloque de evaluación en nueva página */
.bloque-evaluacion:first-of-type {
    page-break-before: always !important;
    margin-top: 0.3cm;
}

/* Bloque de presentación (tercero) en nueva página */
.bloque-evaluacion:nth-of-type(3) {
    page-break-before: always !important;
    margin-top: 0.3cm;
}

/* ========================================
   CRITERIOS DE EVALUACIÓN COMPACTOS
======================================== */
.criterios-grid {
    margin: 0.1cm 0;
}

.criterio-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.08cm;
    padding: 0.06cm 0.12cm;
    background-color: #F8F9FA;
    border-left: 2px solid #5DADE2;
    font-size: 8pt;
    page-break-inside: avoid;
}

.criterio-item label {
    flex: 1;
    font-weight: 500;
    color: #444;
    margin-right: 0.12cm;
}

.criterio-item select, 
.criterio-presentacion select {
    width: 20%;
    padding: 0.06cm;
    border: 1px solid #BDBDBD;
    border-radius: 2px;
    background-color: #FFF;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    font-size: 7pt;
}

/* ========================================
   PUNTUACIONES COMPACTAS
======================================== */
.puntuacion-parcial {
    text-align: right;
    font-weight: bold;
    margin-top: 0.12cm;
    font-family: 'Roboto', sans-serif;
    font-size: 8pt;
    padding: 0.06cm;
    background-color: #F0F8FF;
    border-radius: 2px;
    page-break-inside: avoid;
}

.puntuacion-total-bloque {
    text-align: center;
    font-weight: bold;
    margin: 0.12cm 0;
    padding: 0.12cm;
    background-color: #E8EAF6;
    border: 1px solid #C5CAE9;
    border-radius: 2px;
    font-size: 9pt;
    page-break-inside: avoid;
    page-break-before: avoid !important;
}

.puntuacion-valor {
    font-size: 9pt;
    color: #1B4F72;
    font-weight: 700;
}

/* ========================================
   PÁGINA 3: PRESENTACIÓN COMPACTA
======================================== */
.criterios-presentacion {
    margin: 0.12cm 0;
    padding: 0.12cm;
    background-color: #F0F8FF;
    border-radius: 2px;
    border-left: 3px solid #5DADE2;
    page-break-inside: avoid !important;
}

.criterios-presentacion p {
    font-weight: 600;
    color: #1B4F72;
    margin-bottom: 0.06cm;
    font-size: 8pt;
}

.criterios-presentacion ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.criterios-presentacion li {
    padding: 0.02cm 0;
    position: relative;
    padding-left: 0.25cm;
    font-size: 7pt;
    line-height: 1.2;
}

.criterios-presentacion li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #2E86C1;
    font-weight: bold;
}

.criterio-presentacion {
    padding: 0.12cm 0;
    page-break-inside: avoid !important;
}

.criterio-presentacion label {
    display: block;
    margin-bottom: 0.06cm;
    font-weight: 600;
    color: #1B4F72;
    font-size: 8pt;
}

/* ========================================
   PÁGINA 3: COMENTARIOS (SIN SALTO)
======================================== */
.seccion-comentarios {
    page-break-before: avoid !important;
    page-break-inside: avoid !important;
    margin-top: 0.4cm;
    padding: 0.3cm;
    border: 1px solid #E0E0E0;
    border-radius: 3px;
    background-color: #FAFAFA;
}

.seccion-comentarios h3 {
    font-size: 11pt !important;
    margin: 0 0 0.25cm 0 !important;
    color: #1B4F72;
    border-bottom: 2px solid #2E86C1 !important;
    padding-bottom: 0.15cm !important;
    background: none !important;
}

textarea.campo-comentarios {
    width: 100%;
    padding: 0.25cm;
    border: 1px solid #E0E0E0;
    border-radius: 2px;
    background-color: #FFF;
    font-family: 'Roboto', sans-serif;
    font-size: 9pt;
    line-height: 1.4;
    min-height: 3.5cm;
    resize: none;
}

/* ========================================
   CONTROL ESTRICTO DE SALTOS
======================================== */

/* Evitar romper encabezados de bloque */
.encabezado-bloque {
    page-break-after: avoid !important;
    page-break-inside: avoid !important;
}

/* Evitar romper sub-bloques completos */
.sub-bloque {
    page-break-inside: avoid !important;
    page-break-after: avoid;
}

/* Mantener criterios juntos */
.criterios-grid {
    page-break-inside: avoid;
}

/* Mantener puntuaciones con su bloque */
.puntuacion-total-bloque {
    page-break-before: avoid !important;
    page-break-inside: avoid !important;
}

/* Evitar viudas y huérfanas */
p, li {
    orphans: 3;
    widows: 3;
}

/* ========================================
   ELEMENTOS SOLO PARA IMPRESIÓN
======================================== */
.solo-impresion {
    display: block;
    text-align: center;
    font-style: italic;
    color: #666;
    margin-top: 0.3cm;
    font-size: 8pt;
}

/* ========================================
   OPTIMIZACIONES FINALES
======================================== */
/* Reducir espacios en general */
* {
    margin-top: 0;
}

/* Compactar listas */
ul, ol {
    margin: 0.06cm 0;
    padding-left: 0.3cm;
}

/* Compactar párrafos */
p {
    margin: 0.06cm 0;
}

/* Asegurar que los bloques principales mantengan cohesión */
.bloque-evaluacion {
    page-break-inside: auto;
}

/* Mantener sub-bloques unidos */
.sub-bloque h3 {
    page-break-after: avoid !important;
}

.sub-bloque .criterios-grid {
    page-break-before: avoid;
}

.sub-bloque .puntuacion-parcial {
    page-break-before: avoid !important;
}
/* ========================================
   ENCABEZADO PARA IMPRESIÓN
======================================== */

/* Mostrar información del alumno en impresión */
.info-alumno-encabezado {
    display: block !important;
    background: #F0F8FF;
    border: 1px solid #2E86C1;
    border-radius: 4px;
    padding: 0.2cm 0.4cm;
    margin: 0.3cm auto 0 auto;
    text-align: center;
    font-size: 10pt;
    font-weight: 600;
    color: #1B4F72;
    width: fit-content;
}

#nombreAlumnoEncabezado {
    font-weight: 700;
    color: #1B4F72;
}

/* Asegurar que el encabezado se muestre en impresión */
.encabezado-principal {
    display: block !important;
    background: #F8F9FA !important;
    color: #1B4F72 !important;
    padding: 0.5cm 0 !important;
    text-align: center;
    border-bottom: 2px solid #2E86C1;
    margin-bottom: 0.5cm;
    page-break-after: avoid;
}

.encabezado-principal h1 {
    font-size: 14pt !important;
    color: #1B4F72 !important;
    margin: 0 0 0.2cm 0 !important;
}

.encabezado-principal p {
    font-size: 9pt !important;
    color: #495057 !important;
    margin: 0 0 0.2cm 0 !important;
}
/* ========================================
   ESTILOS PARA IMPRESIÓN - EVALUADOR TFC
   Con nombre del alumno en encabezado de cada página
======================================== */

@page {
    size: A4;
    margin: 1.2cm;
    
    @top-left {
        content: "Alumno: " string(nombreAlumno);
        font-family: 'Roboto', sans-serif;
        font-size: 9pt;
        font-weight: bolder;
        color: #333;
        font-weight: 600;
    }
    
    @top-right {
        content: "CIFP A Carballeira";
        font-family: 'Roboto', sans-serif;
        font-size: 9pt;
        color: #333;
    }
    
    @bottom-center {
        content: "Página " counter(page) " de " counter(pages);
        font-family: 'Roboto', sans-serif;
        font-size: 8pt;
        color: #666;
    }
}

/* ========================================
   CONFIGURACIÓN GENERAL COMPACTA
======================================== */
body {
    font-family: 'Roboto', sans-serif;
    font-size: 10pt;
    line-height: 1.3;
    color: #222;
    background: #fff;
    margin: 0;
    padding: 0;
}

.contenedor-principal {
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Ocultar elementos no necesarios para impresión */
.encabezado-principal, 
.pie-pagina, 
.solo-pantalla {
    display: none !important;
}

/* ========================================
   CAPTURAR NOMBRE DEL ALUMNO PARA ENCABEZADO
======================================== */

/* Elemento que contiene el nombre del alumno */
#nombreEstudiante {
    string-set: nombreAlumno attr(value);
}

/* Si el input está vacío, usar el span de resultado */
#nombreAlumnoResultado {
    string-set: nombreAlumno content();
}

/* Alternativa: usar un elemento específico para el encabezado */
.nombre-para-encabezado {
    string-set: nombreAlumno content();
    display: none; /* Oculto en el contenido pero disponible para el encabezado */
}

/* ========================================
   CONTROL DE SALTOS DE PÁGINA ESPECÍFICOS
======================================== */

/* PÁGINA 1: Contenedor flexible (información + resultados) */
.contenedor-flex {
    page-break-after: always !important;
    page-break-inside: avoid !important;
    margin-bottom: 0.5cm;
    padding-bottom: 1cm;
}

/* PÁGINA 2: Solo Documentación y Proyecto */
.bloque-evaluacion:first-of-type {
    page-break-before: always !important;
}

/* PÁGINA 3: Presentación y Comentarios */
.bloque-evaluacion:nth-of-type(3) {
    page-break-before: always !important;
    margin-top: 0.5cm;
}

/* Forzar que comentarios NO vayan a nueva página (van con presentación) */
.seccion-comentarios {
    page-break-before: avoid !important;
    page-break-inside: avoid !important;
    margin-top: 0.4cm;
}

/* EVITAR ROMPER SUB-BLOQUES */
.sub-bloque {
    page-break-inside: avoid !important;
    page-break-after: avoid;
    margin-bottom: 0.2cm;
    padding-bottom: 0.15cm;
    border-bottom: 1px solid #E9ECEF;
}

.sub-bloque:last-child {
    border-bottom: none;
    margin-bottom: 0.15cm;
}

/* ========================================
   RESTO DE ESTILOS (mantener igual)
======================================== */

/* Tipografía compacta */
h1 {
    font-family: 'Roboto', sans-serif;
    font-size: 14pt;
    font-weight: 700;
    text-align: center;
    margin: 0.6cm 0 0.4cm;
    padding-bottom: 0.2cm;
    border-bottom: 2px solid #2E86C1;
    color: #1B4F72;
}

h2 {
    font-family: 'Roboto', sans-serif;
    font-size: 11pt !important;
    font-weight: 600;
    margin: 0.3cm 0 0.25cm !important;
    padding: 0.15cm 0.2cm;
    background-color: #F0F8FF !important;
    border-left: 3px solid #2E86C1 !important;
    color: #1B4F72;
    page-break-after: avoid !important;
}

h3 {
    font-family: 'Roboto', sans-serif;
    font-size: 10pt !important;
    font-weight: 500;
    margin: 0.2cm 0 0.15cm !important;
    padding-bottom: 0.1cm;
    border-bottom: 1px solid #5DADE2 !important;
    color: #2E86C1;
    page-break-after: avoid !important;
}

/* Continúa con el resto de estilos que ya tienes... */
/* (Mantener todos los demás estilos igual) */