/* ========================================
   ESTILOS PARA PANTALLA - EVALUADOR TFC
   Diseño coherente con XADE - Xunta de Galicia
======================================== */

/* Importar fuente Roboto desde Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap');

/* ========================================
   VARIABLES CSS PERSONALIZADAS - XADE THEME
======================================== */
:root {
    /* Colores principales basados en XADE */
    --color-primario-xade: #2E86C1;        /* Azul principal XADE */
    --color-secundario-xade: #1B4F72;      /* Azul oscuro */
    --color-acento-xade: #5DADE2;          /* Azul claro */
    --color-blanco-xade: #FFFFFF;          /* Blanco puro */
    --color-gris-claro: #F8F9FA;           /* Gris muy claro */
    --color-gris-medio: #E9ECEF;           /* Gris medio */
    --color-gris-texto: #495057;           /* Gris para texto */
    
    /* Colores de estado */
    --color-exito: #28A745;
    --color-error: #DC3545;
    --color-advertencia: #FFC107;
    --color-info: #17A2B8;
    
    /* Tipografía institucional */
    --fuente-principal: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --tamano-fuente-base: 14px;
    --tamano-fuente-titulo: 1.8rem;
    --tamano-fuente-subtitulo: 1.4rem;
    
    /* Espaciado institucional */
    --espaciado-xs: 0.25rem;
    --espaciado-sm: 0.5rem;
    --espaciado-md: 1rem;
    --espaciado-lg: 1.5rem;
    --espaciado-xl: 2rem;
    
    /* Sombras suaves */
    --sombra-ligera: 0 2px 4px rgba(46, 134, 193, 0.1);
    --sombra-media: 0 4px 8px rgba(46, 134, 193, 0.15);
    --sombra-fuerte: 0 8px 16px rgba(46, 134, 193, 0.2);
    
    /* Transiciones */
    --transicion-suave: 0.3s ease;
}

/* ========================================
   RESET Y CONFIGURACIÓN GENERAL
======================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--fuente-principal);
    font-size: var(--tamano-fuente-base);
    line-height: 1.6;
    color: var(--color-gris-texto);
    background: var(--color-gris-claro);
    min-height: 100vh;
}

/* ========================================
   CONTENEDORES PRINCIPALES
======================================== */
.contenedor {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--espaciado-md);
}

.contenedor-principal {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--espaciado-lg);
    background: var(--color-blanco-xade);
    min-height: calc(100vh - 160px);
    border-radius: 8px;
    box-shadow: var(--sombra-media);
}

/* ========================================
   ENCABEZADO PRINCIPAL - ESTILO XADE
======================================== */
.encabezado-principal {
    background: linear-gradient(135deg, var(--color-primario-xade), var(--color-secundario-xade));
    color: var(--color-blanco-xade);
    padding: var(--espaciado-xl) 0;
    text-align: center;
    box-shadow: var(--sombra-media);
    margin-bottom: var(--espaciado-lg);
    border-radius: 8px;
    position: relative;
}

.encabezado-principal::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-acento-xade);
}

.encabezado-principal h1 {
    font-size: var(--tamano-fuente-titulo);
    font-weight: 600;
    margin-bottom: var(--espaciado-sm);
    letter-spacing: 0.5px;
}

.encabezado-principal p {
    font-size: 1rem;
    opacity: 0.9;
    font-weight: 300;
}

/* ========================================
   LAYOUT FLEXIBLE - ESTILO INSTITUCIONAL
======================================== */
.contenedor-flex {
    display: flex;
    justify-content: space-between;
    gap: var(--espaciado-lg);
    margin-bottom: var(--espaciado-xl);
}

/* ========================================
   SECCIONES Y BLOQUES - DISEÑO XADE
======================================== */
.seccion-estudiante,
.bloque-evaluacion,
.seccion-comentarios,
.panel-resultados {
    background: var(--color-blanco-xade);
    padding: var(--espaciado-xl);
    border-radius: 8px;
    border: 1px solid var(--color-gris-medio);
    box-shadow: var(--sombra-ligera);
    margin-bottom: var(--espaciado-xl);
    transition: var(--transicion-suave);
}

.seccion-estudiante:hover,
.panel-resultados:hover {
    box-shadow: var(--sombra-media);
    border-color: var(--color-acento-xade);
}

/* Secciones en el contenedor flexible */
.seccion-estudiante, 
.panel-resultados {
    flex: 1;
    margin-bottom: 0;
    min-width: 0;
    max-width: 600px;
}

/* ========================================
   ENCABEZADOS - ESTILO INSTITUCIONAL
======================================== */
.seccion-estudiante h2,
.panel-resultados h2,
.seccion-comentarios h3 {
    color: var(--color-primario-xade);
    font-weight: 600;
    margin-bottom: var(--espaciado-lg);
    padding-bottom: var(--espaciado-sm);
    border-bottom: 2px solid var(--color-acento-xade);
    font-size: var(--tamano-fuente-subtitulo);
}

/* ========================================
   FORMULARIOS - ESTILO XADE
======================================== */
.formulario-estudiante {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--espaciado-lg);
    margin-top: var(--espaciado-md);
}

.campo-formulario {
    display: flex;
    flex-direction: column;
    gap: var(--espaciado-sm);
}

.campo-formulario label {
    font-weight: 500;
    color: var(--color-secundario-xade);
    font-size: 0.95rem;
}

.campo-formulario input {
    padding: var(--espaciado-md);
    border: 2px solid var(--color-gris-medio);
    border-radius: 4px;
    font-size: 1rem;
    font-family: var(--fuente-principal);
    transition: var(--transicion-suave);
    background: var(--color-blanco-xade);
}

.campo-formulario input:focus {
    outline: none;
    border-color: var(--color-primario-xade);
    box-shadow: 0 0 0 3px rgba(46, 134, 193, 0.1);
}

/* ========================================
   BLOQUES DE EVALUACIÓN - DISEÑO XADE
======================================== */
.encabezado-bloque {
    background: linear-gradient(135deg, var(--color-primario-xade), var(--color-acento-xade));
    color: var(--color-blanco-xade);
    padding: var(--espaciado-lg);
    margin: calc(-1 * var(--espaciado-xl)) calc(-1 * var(--espaciado-xl)) var(--espaciado-lg) calc(-1 * var(--espaciado-xl));
    border-radius: 8px 8px 0 0;
    border-bottom: 3px solid var(--color-secundario-xade);
}

.encabezado-bloque h2 {
    font-size: var(--tamano-fuente-subtitulo);
    font-weight: 600;
    margin: 0;
    color: var(--color-blanco-xade);
    border: none;
    padding: 0;
}

.sub-bloque {
    padding: var(--espaciado-lg) 0;
    border-bottom: 1px solid var(--color-gris-medio);
    margin-bottom: var(--espaciado-lg);
}

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

.sub-bloque h3 {
    color: var(--color-secundario-xade);
    margin-bottom: var(--espaciado-lg);
    font-size: 1.2rem;
    font-weight: 500;
    padding-left: var(--espaciado-md);
    border-left: 4px solid var(--color-acento-xade);
}

/* ========================================
   CRITERIOS DE EVALUACIÓN
======================================== */
.criterios-grid {
    display: grid;
    gap: var(--espaciado-md);
    margin-top: var(--espaciado-md);
}

.criterio-item {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--espaciado-md);
    align-items: center;
    padding: var(--espaciado-md);
    background: var(--color-gris-claro);
    border-radius: 4px;
    border-left: 3px solid var(--color-acento-xade);
    transition: var(--transicion-suave);
}

.criterio-item:hover {
    background: #F0F8FF;
    border-left-color: var(--color-primario-xade);
}

.criterio-item label {
    font-weight: 500;
    color: var(--color-gris-texto);
    font-size: 0.95rem;
}

/* ========================================
   SELECTORES - ESTILO INSTITUCIONAL
======================================== */
.selector-puntuacion,
.selector-puntuacion-presentacion {
    padding: var(--espaciado-sm) var(--espaciado-md);
    border: 2px solid var(--color-gris-medio);
    border-radius: 4px;
    background: var(--color-blanco-xade);
    font-family: var(--fuente-principal);
    font-size: 0.9rem;
    cursor: pointer;
    transition: var(--transicion-suave);
    min-width: 200px;
}

.selector-puntuacion:focus,
.selector-puntuacion-presentacion:focus {
    outline: none;
    border-color: var(--color-primario-xade);
    box-shadow: 0 0 0 3px rgba(46, 134, 193, 0.1);
}

/* ========================================
   BOTONES - DISEÑO XADE
======================================== */
.botones-accion {
    display: flex;
    justify-content: center;
    gap: var(--espaciado-lg);
    margin-bottom: var(--espaciado-xl);
    flex-wrap: wrap;
}

.boton {
    padding: var(--espaciado-md) var(--espaciado-xl);
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: 500;
    font-family: var(--fuente-principal);
    cursor: pointer;
    transition: var(--transicion-suave);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--espaciado-sm);
    min-width: 160px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.boton:hover {
    transform: translateY(-1px);
    box-shadow: var(--sombra-media);
}

.boton-imprimir {
    background: var(--color-primario-xade);
    color: var(--color-blanco-xade);
}

.boton-imprimir:hover {
    background: var(--color-secundario-xade);
}

.boton-limpiar {
    background: var(--color-advertencia);
    color: var(--color-blanco-xade);
}

.boton-limpiar:hover {
    background: #E0A800;
}

/* ========================================
   PANEL DE RESULTADOS - ESTILO XADE
======================================== */
.resultado-final {
    padding: var(--espaciado-lg);
    text-align: center;
    background: linear-gradient(135deg, var(--color-primario-xade), var(--color-acento-xade));
    color: var(--color-blanco-xade);
    border-radius: 8px 8px 0 0;
    margin: calc(-1 * var(--espaciado-xl)) calc(-1 * var(--espaciado-xl)) var(--espaciado-lg) calc(-1 * var(--espaciado-xl));
    border-bottom: 3px solid var(--color-secundario-xade);
}

.info-alumno h2 {
    font-size: 1.1rem;
    margin: 0 0 var(--espaciado-md) 0;
    color: var(--color-blanco-xade);
    font-weight: 500;
    border: none;
    padding: 0;
}

.calificacion-container h3 {
    font-size: 1.2rem;
    margin-bottom: var(--espaciado-sm);
    color: var(--color-blanco-xade);
    font-weight: 600;
    border: none;
    padding: 0;
}

.nota-final {
    font-size: 2.2rem;
    font-weight: 700;
    margin: var(--espaciado-md) 0;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* ========================================
   ESTADOS DE EVALUACIÓN
======================================== */
.estado-evaluacion {
    font-size: 0.95rem;
    font-weight: 600;
    padding: var(--espaciado-xs) var(--espaciado-md);
    border-radius: 20px;
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.estado-evaluacion.aprobado {
    background: rgba(40, 167, 69, 0.9);
    color: var(--color-blanco-xade);
}

.estado-evaluacion.suspenso {
    background: rgba(220, 53, 69, 0.9);
    color: var(--color-blanco-xade);
}

/* ========================================
   PUNTUACIONES - ESTILO INSTITUCIONAL
======================================== */
.puntuacion-parcial {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: var(--espaciado-lg);
    padding: var(--espaciado-md);
    background: var(--color-gris-claro);
    border-radius: 4px;
    border-left: 4px solid var(--color-primario-xade);
    font-weight: 600;
}

.puntuacion-valor {
    color: var(--color-primario-xade);
    font-size: 1.1rem;
    margin: 0 var(--espaciado-xs);
    font-weight: 700;
}

.puntuacion-total-bloque {
    background: linear-gradient(135deg, var(--color-secundario-xade), var(--color-primario-xade));
    color: var(--color-blanco-xade);
    padding: var(--espaciado-lg);
    text-align: center;
    margin: var(--espaciado-lg) calc(-1 * var(--espaciado-xl)) calc(-1 * var(--espaciado-xl)) calc(-1 * var(--espaciado-xl));
    border-radius: 0 0 8px 8px;
}

.puntuacion-total-bloque h4 {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0;
}

/* ========================================
   DESGLOSE DE PUNTUACIONES
======================================== */
.desglose-puntuaciones {
    padding: var(--espaciado-lg);
    background: var(--color-gris-claro);
    border-radius: 4px;
    margin-top: var(--espaciado-md);
}

.desglose-puntuaciones h3 {
    color: var(--color-secundario-xade);
    margin-bottom: var(--espaciado-md);
    font-size: 1rem;
    text-align: center;
    font-weight: 600;
    border: none;
    padding: 0;
}

.desglose-grid {
    display: grid;
    gap: var(--espaciado-sm);
}

.desglose-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--espaciado-sm) var(--espaciado-md);
    background: var(--color-blanco-xade);
    border-radius: 4px;
    border-left: 3px solid var(--color-acento-xade);
    font-weight: 500;
    font-size: 0.9rem;
}

/* ========================================
   PRESENTACIÓN - CRITERIOS
======================================== */
.criterios-presentacion {
    margin: var(--espaciado-lg) 0;
    padding: var(--espaciado-lg);
    background: var(--color-gris-claro);
    border-radius: 4px;
    border-left: 4px solid var(--color-acento-xade);
}

.criterios-presentacion p {
    font-weight: 600;
    color: var(--color-secundario-xade);
    margin-bottom: var(--espaciado-sm);
}

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

.criterios-presentacion li {
    padding: var(--espaciado-xs) 0;
    position: relative;
    padding-left: var(--espaciado-lg);
    color: var(--color-gris-texto);
}

.criterios-presentacion li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--color-primario-xade);
    font-weight: bold;
}

.criterio-presentacion {
    padding: var(--espaciado-lg) 0;
}

.criterio-presentacion label {
    display: block;
    margin-bottom: var(--espaciado-md);
    font-weight: 600;
    color: var(--color-secundario-xade);
    font-size: 1rem;
}

/* ========================================
   COMENTARIOS
======================================== */
.campo-comentarios {
    width: 100%;
    padding: var(--espaciado-md);
    border: 2px solid var(--color-gris-medio);
    border-radius: 4px;
    font-family: inherit;
    font-size: 1rem;
    resize: vertical;
    transition: var(--transicion-suave);
    min-height: 120px;
    background: var(--color-blanco-xade);
}

.campo-comentarios:focus {
    outline: none;
    border-color: var(--color-primario-xade);
    box-shadow: 0 0 0 3px rgba(46, 134, 193, 0.1);
}

/* ========================================
   PIE DE PÁGINA
======================================== */
.pie-pagina {
    background: var(--color-secundario-xade);
    color: var(--color-blanco-xade);
    text-align: center;
    padding: var(--espaciado-lg);
    margin-top: auto;
    border-radius: 8px;
    font-size: 0.9rem;
}

/* ========================================
   ELEMENTOS DE VISIBILIDAD
======================================== */
.solo-impresion {
    display: none;
}

.solo-pantalla {
    display: block;
}

/* ========================================
   RESPONSIVIDAD
======================================== */
@media (max-width: 768px) {
    .contenedor-principal {
        padding: var(--espaciado-md);
        margin: var(--espaciado-sm);
    }
    
    .contenedor-flex {
        flex-direction: column;
    }
    
    .criterio-item {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .formulario-estudiante {
        grid-template-columns: 1fr;
    }
    
    .botones-accion {
        flex-direction: column;
        align-items: center;
    }
    
    .nota-final {
        font-size: 1.8rem;
    }
    
    .selector-puntuacion,
    .selector-puntuacion-presentacion {
        min-width: auto;
        width: 100%;
    }
}

/* ========================================
   ANIMACIONES SUAVES
======================================== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.seccion-estudiante,
.bloque-evaluacion,
.seccion-comentarios,
.panel-resultados {
    animation: fadeInUp 0.4s ease-out;
}
.botones-accion {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 20px !important;
    flex-wrap: nowrap !important;
}

.boton {
    flex: none !important;
}

/* ========================================
   ENCABEZADO PRINCIPAL - ESTILO XADE
======================================== */
.encabezado-principal {
    background: linear-gradient(135deg, var(--color-primario-xade), var(--color-secundario-xade));
    color: var(--color-blanco-xade);
    padding: var(--espaciado-xl) 0;
    text-align: center;
    box-shadow: var(--sombra-media);
    margin-bottom: var(--espaciado-lg);
    border-radius: 8px;
    position: relative;
}

.encabezado-principal::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-acento-xade);
}

.encabezado-principal h1 {
    font-size: var(--tamano-fuente-titulo);
    font-weight: 600;
    margin-bottom: var(--espaciado-sm);
    letter-spacing: 0.5px;
}

.encabezado-principal p {
    font-size: 1rem;
    opacity: 0.9;
    font-weight: 300;
    margin-bottom: var(--espaciado-md);
}

/* Nuevo estilo para la información del alumno en el encabezado */
.info-alumno-encabezado {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: var(--espaciado-sm) var(--espaciado-lg);
    display: inline-block;
    font-size: 1rem;
    font-weight: 500;
    margin-top: var(--espaciado-sm);
    transition: var(--transicion-suave);
}

.info-alumno-encabezado:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

#nombreAlumnoEncabezado {
    font-weight: 600;
    color: var(--color-blanco-xade);
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
/* ========================================
   BOTÓN VOLVER - ESTILO XADE
======================================== */
/* Botón “Volver” con fondo cian redondeado */
.boton-volver {
  position: absolute;
  top: 20px;          /* ajusta según tu diseño */
  left: 20px;
  z-index: 3;

  /* Estilo visual */
  background: cyan;     /* cian de la paleta */ /* [1] */
  color: #11b51c;                      /* buen contraste sobre cian */
  border: none;
  border-radius: 9999px;               /* forma de píldora */
  padding: 6px 18px;                   /* algo más de aire */
  font-weight: 600;
  opacity: 0.85;                       /* discreto */

  transition: opacity 0.3s var(--transition-smooth),
              transform 0.3s var(--transition-smooth);
}

.boton-volver:hover,
.boton-volver:focus-visible {
  opacity: 1;
  transform: translateY(-2px);
}