/* =======================================================
   ESTILOS EXCLUSIVOS: RESULTADOS PAES
   ======================================================= */

/* FONDO GENERAL */
body {
    background-color: #f8f9fa; /* Gris muy claro para resaltar el blanco */
}

/* 1. HERO SECTION (ENCABEZADO VERDE) */
.paes-hero {
    background: linear-gradient(rgba(13, 43, 33, 0.95), rgba(13, 43, 33, 0.85)), url('img/fondo_patio.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Efecto Parallax elegante */
    color: white;
    padding: 100px 0 80px 0;
    text-align: center;
    position: relative;
    margin-bottom: 0;
}

.paes-title {
    font-family: 'Merriweather', serif;
    font-size: 3.5rem;
    font-weight: 900;
    color: #FFC107; /* Dorado Institucional */
    text-shadow: 0 4px 10px rgba(0,0,0,0.3);
    margin-bottom: 15px;
    letter-spacing: -1px;
}

/* 2. TÍTULO "CUADRO DE HONOR" */
h3.fw-bold {
    font-size: 2.5rem;
    color: #0d2b21;
    margin-bottom: 10px;
}

/* 3. TARJETAS DE ALUMNOS (SCORE CARDS) */
.score-card {
    background: #ffffff;
    border-radius: 15px; /* Bordes redondeados modernos */
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06); /* Sombra suave y flotante */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Animación con rebote */
    height: 100%;
    border: none;
    position: relative;
}

.score-card:hover {
    transform: translateY(-10px); /* Sube al pasar el mouse */
    box-shadow: 0 20px 40px rgba(13, 43, 33, 0.15); /* Sombra verdosa al subir */
}

/* 4. IMAGEN DEL ALUMNO */
.student-img-wrapper {
    height: 260px;
    overflow: hidden;
    position: relative;
    background-color: #e9ecef;
}

.student-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top; /* Enfoca las caras */
    transition: transform 0.6s ease;
}

.score-card:hover .student-img {
    transform: scale(1.1); /* Zoom suave a la foto */
}

/* 5. CUERPO DE LA TARJETA */
.card-body-paes {
    padding: 25px 20px;
    text-align: center;
    position: relative;
    z-index: 2;
    background: white;
}

.student-name {
    font-family: 'Merriweather', serif;
    font-weight: 700;
    font-size: 1.15rem;
    color: #0d2b21;
    margin-bottom: 5px;
    min-height: 54px; /* Altura fija para alinear nombres de 2 líneas */
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.3;
}

/* 6. PUNTAJE GIGANTE */
.score-number {
    font-size: 3.8rem;
    font-weight: 900;
    color: #FFC107; /* Dorado */
    line-height: 1;
    text-shadow: 2px 2px 0px rgba(0,0,0,0.05); /* Sombra sutil para definición */
    margin: 5px 0;
}

.score-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
    color: #888;
    margin-bottom: 20px;
    display: block;
}

/* 7. ETIQUETAS DE MATERIAS (BADGES) */
.subject-badge {
    display: inline-block;
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Colores específicos por materia */
.subject-mat { background-color: #e3f2fd; color: #0d47a1; } /* Azul suave */
.subject-lec { background-color: #fce4ec; color: #880e4f; } /* Rosa suave */
.subject-his { background-color: #fff3e0; color: #e65100; } /* Naranja suave */
.subject-cie { background-color: #e8f5e9; color: #1b5e20; } /* Verde suave */

/* 8. MEDALLAS DE RANGO (TOP 3) */
.rank-medal {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 45px;
    height: 45px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 1.3rem;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    z-index: 10;
}

.medal-1 { color: #FFD700; border: 3px solid #FFD700; } /* Oro */
.medal-2 { color: #A9A9A9; border: 3px solid #A9A9A9; } /* Plata */
.medal-3 { color: #CD7F32; border: 3px solid #CD7F32; } /* Bronce */

/* 9. RESPONSIVE (Móvil) */
@media (max-width: 768px) {
    .paes-title { font-size: 2.5rem; }
    .score-number { font-size: 3rem; }
    .student-img-wrapper { height: 300px; } /* Fotos más grandes en celular */
}