/*
 * contenido-pruebas.css
 * ─────────────────────────────────────────────────────────────────────────────
 * Estilos de la página "Contenido Pruebas de Acceso".
 *
 * Alcance:  Todo está dentro de #pruebas-container para evitar colisiones
 *           con el tema Astra y cualquier otro CSS global.
 *
 * Depende:  /style.css  →  define los custom properties (tokens) que se usan:
 *
 *   Espaciado:    --space-xs  --space-sm  --space-md  --space-lg
 *                 --space-xl  --space-xxl
 *   Tipografía:   --font-base  --font-titulo
 *                 --text-sm  --text-base  --text-lg  --text-xl  --text-xxl
 *   Color:        --color-dorado  --color-dorado-claro  --color-dorado-hover
 *                 --color-negro   --color-blanco
 *                 --text          --text-muted
 *   Misc:         --transition    --radius-sm
 * ─────────────────────────────────────────────────────────────────────────────
 */


/* ════════════════════════════════════════════════════════════════════════════
   CONTENEDOR RAÍZ
════════════════════════════════════════════════════════════════════════════ */

#pruebas-container {
    max-width: 980px;
    margin: 0 auto;
    padding: var(--space-lg);
}


/* ════════════════════════════════════════════════════════════════════════════
   TÍTULO DE PÁGINA
════════════════════════════════════════════════════════════════════════════ */

.pruebas-titulo {
    padding: var(--space-xxl) 0 var(--space-lg);
}

#pruebas-container h1 {
    font-family: var(--font-titulo);
    font-size: var(--text-xxl);
    color: var(--color-dorado);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.2;
    margin-bottom: var(--space-xl);
    max-width: 980px;
}


/* ════════════════════════════════════════════════════════════════════════════
   ENCABEZADOS DE SECCIÓN (h2, h3)
════════════════════════════════════════════════════════════════════════════ */

#pruebas-container h2 {
    font-family: var(--font-titulo);
    font-size: var(--text-xl);
    color: var(--color-dorado);
    line-height: 1.2;
    margin-bottom: 0;
}

/* h3 dentro de listas de dimensiones, avisos y notas */
#pruebas-container .pruebas-dimensiones li h3,
#pruebas-container .pruebas-seccion__contenido h3,
#pruebas-container .pruebas-aviso h3 {
    font-family: var(--font-titulo);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-negro);
    line-height: 1.3;
    margin-top: 0;
    margin-bottom: var(--space-lg);
}


/* ════════════════════════════════════════════════════════════════════════════
   SECCIONES DE CONTENIDO
════════════════════════════════════════════════════════════════════════════ */

/* Línea divisoria bajo el título de sección */
.pruebas-seccion__cabecera {
    width: 100%;
    padding-top: var(--space-sm);
    padding-bottom: var(--space-sm);
    margin-bottom: var(--space-md);
    border-bottom: 2px solid var(--color-dorado-claro);
}

.pruebas-seccion__contenido {
    font-size: var(--text-base);
    line-height: 1.75;
    color: var(--text);
}

.pruebas-seccion__contenido p {
    margin-bottom: var(--space-md);
}

.pruebas-seccion__contenido a {
    color: var(--color-dorado);
    text-decoration: underline;
    transition: color var(--transition);
}

.pruebas-seccion__contenido a:hover {
    color: var(--color-dorado-hover);
}

/* Párrafos dentro de <li> (ej.: texto de citaciones) */
.pruebas-seccion li p {
    margin-top: 0;
    margin-bottom: var(--space-md);
    line-height: 1.6;
}


/* ════════════════════════════════════════════════════════════════════════════
   AVISO DESTACADO (cuadro amarillo con borde dorado)
════════════════════════════════════════════════════════════════════════════ */

.pruebas-aviso {
    background-color: #fff8e1;
    border-left: 4px solid var(--color-dorado);
    border-radius: var(--radius-sm);
    padding: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-md);
    font-weight: 700;
    color: var(--color-negro);
}


/* ════════════════════════════════════════════════════════════════════════════
   NOTA INFORMATIVA (texto secundario en cursiva)
════════════════════════════════════════════════════════════════════════════ */

.pruebas-nota {
    font-size: var(--text-sm);
    color: var(--text-muted);
    line-height: 1.6;
    font-style: italic;
    margin-bottom: var(--space-md);
}


/* ════════════════════════════════════════════════════════════════════════════
   LISTA DE DIMENSIONES / PRUEBAS
   Usada tanto como <ol> (EE 1º, EE 2º–4º, EP 1º) como <ul> (EP 2º–6º).
════════════════════════════════════════════════════════════════════════════ */

.pruebas-dimensiones {
    list-style: none;
    padding: 0;
    margin-bottom: var(--space-lg);
}

/* Cada ítem lleva una línea de acento a la izquierda */
.pruebas-dimensiones > li {
    padding-left: var(--space-md);
    margin-bottom: var(--space-md);
    border-left: 3px solid var(--color-dorado-claro);
}

/* Sub-lista dentro de cada ítem */
.pruebas-dimensiones ul {
    list-style: none;
    padding-left: var(--space-md);
    margin-top: var(--space-xs);
}

.pruebas-dimensiones ul li::before {
    content: "·  ";
    color: var(--color-dorado);
    font-weight: 700;
}


/* ════════════════════════════════════════════════════════════════════════════
   DIVISOR VISUAL ENTRE BLOQUES DE NIVEL EDUCATIVO
════════════════════════════════════════════════════════════════════════════ */

.pruebas-divider {
    border: none;
    border-top: 2px solid var(--color-dorado-claro);
    margin: var(--space-xl) 0;
}


/* ════════════════════════════════════════════════════════════════════════════
   SECCIÓN "MÁS INFORMACIÓN" — botones de navegación
════════════════════════════════════════════════════════════════════════════ */

.pruebas-mas-info .pruebas-seccion__cabecera {
    width: 100%;
    padding-top: var(--space-sm);
    margin-bottom: var(--space-md);
}

.pruebas-mas-info__botones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-top: var(--space-md);
}

/* Los botones heredan el estilo base .btn del tema; aquí solo ajustamos color */
.btn-pruebas {
    color: var(--color-blanco);
    text-decoration: none;
    transition: background-color var(--transition), transform var(--transition);
}

.btn-pruebas:hover {
    background-color: var(--color-dorado-hover);
    color: inherit;
}


/* ════════════════════════════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    #pruebas-container {
        padding: var(--space-md);
    }

    #pruebas-container h2 {
        font-size: var(--text-lg);
    }

    .btn-pruebas {
        width: 100%;
        min-width: unset;
    }
}

@media (max-width: 480px) {
    #pruebas-container {
        padding: var(--space-sm) var(--space-md);
    }

    #pruebas-container h1 {
        font-size: var(--text-xl);
    }
}