/*
Estilo Claridad Minimal
Javier Galiana Hernández
jgh39@alu.ua.es
*/


/* RESET SUAVE Y TIPOGRAFÍA GLOBAL */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    /* Tamaño base de fuente razonable */
    font-size: 16px;
}

body#pi {
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    background: #f5f7fa;
    color: #222;
    line-height: 1.5;
}

/* ENLACES GENERALES */
a {
    color: #005b96;
    text-decoration: none;
}

a:hover,
a:focus {
    text-decoration: underline;
}

/* CONTENEDOR PRINCIPAL */
#contenedor {
    max-width: 1200px;
    margin: 1.5rem auto;
    padding: 1rem;
}

/* CABECERA: INTRO, TITULO, RESUMEN, COMENTARIO */

#intro {
    background: #ffffff;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    margin-bottom: 1.5rem;
}

#titulo h1 span {
    display: block;
    font-size: 1.8rem;
    color: #005b96;
    letter-spacing: 0.05em;
    margin-bottom: 0.3rem;
    text-transform: uppercase;
}

#titulo h2 span {
    display: block;
    font-size: 1.1rem;
    color: #ff9f1c;
    margin-bottom: 1rem;
}

/* RESUMEN */
#resumen {
    margin-bottom: 1rem;
}

#resumen p {
    margin-bottom: 0.5rem;
}

#resumen ul.ul1 {
    list-style: disc inside;
    margin: 0.3rem 0 0.6rem 0;
}

#resumen li {
    margin: 0.1rem 0;
}

/* COMENTARIO */
#comentario p {
    margin-bottom: 0.4rem;
    font-size: 0.95rem;
}

#comentario a {
    font-weight: 600;
}

/* LAYOUT GENERAL: COLUMNA LATERAL Y CUERPO PRINCIPAL
   Para viewports medios y grandes utilizamos flexbox.
*/

@media (min-width: 768px) {
    #contenedor {
        display: grid;
        grid-template-columns: 260px 1fr;
        grid-template-rows: auto;
        grid-column-gap: 1.5rem;
        grid-row-gap: 1.5rem;
        /* intro ocupa todo el ancho al principio mediante grid areas */
        grid-template-areas:
            "intro  intro"
            "lateral principal";
    }

    #intro {
        grid-area: intro;
    }

    /* Columna lateral: enlacesintra + enlaces + enlacesversiones */
    #enlacesintra,
    #enlaces,
    #enlacesversiones {
        grid-area: lateral;
    }

    /* Ajustamos lateral para apilar los bloques */
    #enlacesintra,
    #enlaces,
    #enlacesversiones {
        width: 100%;
    }

    /* Contenido principal */
    #apartados {
        grid-area: principal;
    }
}

/* COLUMNA LATERAL (ENLACESINTRA, ENLACES, ENLACESVERSIONES) */

#enlacesintra,
#enlaces,
#enlacesversiones {
    background: #ffffff;
    border-radius: 8px;
    padding: 1rem 1.1rem;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);
    margin-bottom: 1rem;
}

/* TÍTULOS LATERALES */
h3.intra span,
h3.selecciona span,
h3.historico span,
h3.recursos span,
h3.versiones span {
    display: block;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #005b96;
    margin-bottom: 0.4rem;
}

/* LISTAS LATERALES */
#enlacesintra ul.ul1,
#lselecciona ul,
#lhistorico ul,
#lrecursos ul,
#enlacesversiones ul.ul1 {
    list-style: none;
}

#enlacesintra li,
#lselecciona li,
#lhistorico li,
#lrecursos li,
#enlacesversiones li {
    margin: 0.25rem 0;
}

/* Enlaces en columna lateral */
#enlacesintra a,
#enlaces a,
#enlacesversiones a {
    display: inline-block;
    padding: 0.15rem 0;
    font-size: 0.95rem;
}

/* Efecto hover en lateral */
#enlacesintra a:hover,
#enlaces a:hover,
#enlacesversiones a:hover {
    color: #ff9f1c;
}

/* APARTADOS (CUERPO PRINCIPAL) */

#apartados {
    background: #ffffff;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* TÍTULOS DE APARTADO */
#apartados h3 span {
    display: block;
    font-size: 1.2rem;
    color: #005b96;
    border-bottom: 2px solid #ff9f1c;
    padding-bottom: 0.3rem;
    margin-bottom: 0.7rem;
}

/* PÁRRAFOS EN APARTADOS */
#apartados p {
    margin-bottom: 0.7rem;
}

/* LISTAS EN CONTENIDOS */
#contenidos ul.ul1 {
    margin-left: 1rem;
    margin-bottom: 0.8rem;
}

#contenidos ul.ul1 > li {
    margin: 0.4rem 0;
    font-weight: 600;
}

#contenidos ul.ul1 > li > ul {
    margin: 0.2rem 0 0.5rem 1rem;
    font-weight: normal;
    list-style: disc;
}

#contenidos ul.ul1 > li > ul li {
    margin: 0.15rem 0;
}

/* LISTA DE PRÁCTICAS (ul.ul2) */
#contenidos ul.ul2 {
    margin-left: 1rem;
    list-style: disc;
}

#contenidos ul.ul2 li {
    margin: 0.2rem 0;
}

/* PROFESORES (DL) */
#profesores dl {
    margin-bottom: 0.8rem;
}

#profesores dt {
    font-weight: 600;
    margin-top: 0.5rem;
}

#profesores dd {
    margin-left: 1rem;
    font-size: 0.95rem;
}

/* BIBLIOGRAFÍA (DL) */
#bibliografia dl {
    margin-bottom: 0.8rem;
}

#bibliografia dt {
    font-weight: 600;
    margin-top: 0.5rem;
}

#bibliografia dd {
    margin-left: 1rem;
    font-size: 0.95rem;
}

#bibliografia .autores {
    font-weight: 600;
}

#bibliografia .editorial,
#bibliografia .isbn {
    display: inline-block;
    margin-left: 0.1rem;
}

/* BLOQUES DE ENLACES (selecciona, historico, recursos) 
   Ya comparten estilo básico con la columna lateral.
*/

#lselecciona,
#lhistorico,
#lrecursos {
    margin-bottom: 0.8rem;
}

/* EXTRA DIVS (IMÁGENES DECORATIVAS) 
   Puedes personalizar estos estilos si incluyes imágenes.
   Por defecto, simplemente no se muestran hasta que los necesites.
*/

#extraDiv1,
#extraDiv2,
#extraDiv3,
#extraDiv4,
#extraDiv5,
#extraDiv6 {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* EJEMPLO: un círculo decorativo en la esquina superior derecha */
#extraDiv1 span {
    display: none;
}

/* VERSIÓN RESPONSIVE: MÓVIL / TABLET PEQUEÑO (hasta 767px) */

@media (max-width: 767px) {

    #contenedor {
        display: block;
        padding: 0.75rem;
        margin: 0.5rem auto;
    }

    #intro,
    #enlacesintra,
    #apartados,
    #enlaces,
    #enlacesversiones {
        margin-bottom: 1rem;
    }

    #intro {
        padding: 1.2rem;
    }

    #apartados {
        padding: 1.1rem;
    }

    #titulo h1 span {
        font-size: 1.5rem;
    }

    #titulo h2 span {
        font-size: 1rem;
    }

    body#pi {
        font-size: 0.95rem;
    }

    /* Listas laterales ocupan todo el ancho */
    #enlacesintra,
    #enlaces,
    #enlacesversiones {
        width: 100%;
    }

    /* Evitar textos demasiado largos en una sola línea */
    #enlacesintra a,
    #enlaces a,
    #enlacesversiones a {
        word-wrap: break-word;
    }
}

/* VERSIÓN PANTALLAS GRANDES (= 1200px) 
   Aumentamos algo de espaciado para que no se vea todo apelmazado.
*/

@media (min-width: 1200px) {
    #contenedor {
        margin-top: 2rem;
        margin-bottom: 2rem;
    }

    #intro,
    #apartados {
        padding: 2rem;
    }

    #titulo h1 span {
        font-size: 2.1rem;
    }

    #titulo h2 span {
        font-size: 1.2rem;
    }
}