/*
PI Usabilidad
Sergio Daniel Zaragoza
mailto:sdanielzaragoza@gmail.com
*/

/* ===========================
   1. RESETEO BÁSICO
   =========================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 100%;
}

body#pi {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    background-color: #f5f5f5;
    color: #222222;
    overflow-x: hidden; /* Evitar scroll horizontal */
}

/* Envolver todo el contenido */
#contenedor {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Texto básico */
p {
    margin-bottom: 0.75rem;
}

ul,
ol {
    margin-left: 1.5rem;
    margin-bottom: 0.75rem;
}

li {
    margin-bottom: 0.25rem;
}

/* Enlaces accesibles */
a {
    color: #004b8d;
    text-decoration: none;
}

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

a:focus-visible {
    outline: 3px solid #ff9900;
    outline-offset: 2px;
}

/* Imágenes responsivas (por si añades alguna) */
img {
    max-width: 100%;
    height: auto;
}

/* ===========================
   2. ZONA INTRO (CABECERA)
   =========================== */

#intro {
    background-color: #ffffff;
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    display: grid;
    gap: 1.5rem;
}

/* Títulos principales */
#titulo h1 span {
    font-size: 2rem;
    font-weight: bold;
    color: #00335c;
}

#titulo h2 span {
    font-size: 1.25rem;
    font-weight: normal;
    color: #555555;
}

/* Resumen de la asignatura */
#resumen {
    font-size: 0.95rem;
}

/* Comentario informativo */
#comentario {
    font-size: 0.9rem;
    border-top: 1px solid #dddddd;
    padding-top: 1rem;
    color: #444444;
}

/* Listas con clase ul1 / ul2 diferenciadas visualmente */
ul.ul1 {
    list-style: disc;
}

ul.ul2 {
    list-style: square;
}

/* ===========================
   3. ENLACES INTERNOS (APARTADOS)
   =========================== */

#enlacesintra {
    background-color: #004b8d;
    color: #ffffff;
    padding: 1rem;
    border-radius: 12px;
}

#enlacesintra h3.intra span {
    font-size: 1.1rem;
    font-weight: bold;
}

#enlacesintra ul.ul1 {
    list-style: none;
    margin: 0.75rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

#enlacesintra a {
    display: inline-block;
    padding: 0.4rem 0.6rem;
    border-radius: 999px;
    background-color: #ffffff;
    color: #004b8d;
    font-size: 0.95rem;
    font-weight: bold;
}

#enlacesintra a:hover,
#enlacesintra a:focus {
    background-color: #ffcc66;
    color: #00335c;
}

/* ===========================
   4. APARTADOS PRINCIPALES
      (#objetivos, #contenidos, #profesores, #bibliografia)
   =========================== */

#apartados {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Cada bloque principal como ?tarjeta? */
#objetivos,
#contenidos,
#profesores,
#bibliografia {
    background-color: #ffffff;
    padding: 1.25rem;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

/* Títulos de tercer nivel */
#apartados h3 span {
    font-size: 1.3rem;
    font-weight: bold;
    color: #00335c;
}

/* Espacio entre párrafos dentro de apartados */
#apartados p {
    margin-top: 0.5rem;
}

/* Listas dentro de contenidos */
#contenidos ul {
    margin-top: 0.5rem;
}

/* Definiciones (profesores / bibliografía) */
#profesores dl,
#bibliografia dl {
    margin-top: 0.75rem;
}

#profesores dt,
#bibliografia dt {
    font-weight: bold;
    margin-top: 0.75rem;
}

#profesores dd,
#bibliografia dd {
    margin-left: 1.25rem;
    margin-top: 0.25rem;
}

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

#bibliografia .editorial,
#bibliografia .isbn {
    display: inline-block;
    margin-left: 0.25rem;
    font-size: 0.9rem;
}

/* ===========================
   5. BLOQUE DE ENLACES (DISEÑOS, HISTÓRICO, RECURSOS)
   =========================== */

#enlaces {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Subbloques */
#lselecciona,
#lhistorico,
#lrecursos {
    background-color: #ffffff;
    padding: 1rem;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

/* Títulos de estos bloques */
#lselecciona h3.selecciona span,
#lhistorico h3.historico span,
#lrecursos h3.recursos span {
    font-size: 1.1rem;
    font-weight: bold;
    color: #00335c;
}

/* Listas dentro de estos bloques */
#lselecciona ul,
#lhistorico ul,
#lrecursos ul {
    list-style: none;
    margin-top: 0.6rem;
}

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

/* Enlaces con clases a1, a2, etc. */
#lselecciona a,
#lhistorico a,
#lrecursos a {
    font-weight: bold;
}

/* Enlace al correo con clase .c */
#lselecciona a.c {
    font-weight: normal;
    font-style: italic;
}

/* ===========================
   6. VERSIONES ANTERIORES
   =========================== */

#enlacesversiones {
    background-color: #ffffff;
    padding: 1rem;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

#enlacesversiones h3.versiones span {
    font-size: 1.1rem;
    font-weight: bold;
    color: #00335c;
}

#enlacesversiones ul.ul1 {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

#enlacesversiones li {
    margin: 0;
}

#enlacesversiones a {
    display: inline-block;
    padding: 0.4rem 0.7rem;
    border-radius: 999px;
    background-color: #004b8d;
    color: #ffffff;
    font-size: 0.9rem;
}

#enlacesversiones a:hover,
#enlacesversiones a:focus {
    background-color: #006bbd;
}

/* ===========================
   7. EXTRA DIVS (DECORACIÓN)
   =========================== */

/* Estos divs se pueden usar como decoraciones de fondo */
#extraDiv1,
#extraDiv2,
#extraDiv3,
#extraDiv4,
#extraDiv5,
#extraDiv6 {
    position: fixed;
    width: 12rem;
    height: 12rem;
    border-radius: 50%;
    opacity: 0.08;
    pointer-events: none;
    z-index: -1;
}

/* Puedes moverlos para crear manchas de color suaves */
#extraDiv1 { background-color: #004b8d; top: -4rem; left: -4rem; }
#extraDiv2 { background-color: #ffcc66; top: 20%; right: -5rem; }
#extraDiv3 { background-color: #66aa88; bottom: -6rem; left: 10%; }
#extraDiv4 { background-color: #cc6699; bottom: 10%; right: -5rem; }
#extraDiv5 { background-color: #9999ff; top: 50%; left: -6rem; }
#extraDiv6 { background-color: #ff9966; top: 75%; right: -6rem; }

/* ===========================
   8. TIPOGRAFÍA GENERAL
   =========================== */

h1, h2, h3 {
    line-height: 1.2;
}

/* Párrafos con clase .p1, .p2, etc. (por si quieres variaciones) */
p.p1 { }
p.p2 { }
p.p3 { }
p.p4 { }

/* Puedes añadir estilos diferentes si quieres, por ejemplo: */
/*
p.p1 { font-weight: bold; }
p.p2 { font-style: italic; }
*/

/* ===========================
   9. RESPONSIVE DESIGN
   =========================== */

/* A partir de 640px ya es más ancho, pero mantenemos 1 columna de momento */

/* ? 768px: reorganizamos algunas zonas en varias columnas */
@media (min-width: 768px) {

    #intro {
        grid-template-columns: 2fr 3fr;
        grid-template-areas:
            "titulo resumen"
            "comentario comentario";
    }

    #titulo {
        grid-area: titulo;
    }

    #resumen {
        grid-area: resumen;
    }

    #comentario {
        grid-area: comentario;
    }

    /* Bloque de enlaces (#enlaces) en 2 columnas */
    #enlaces {
        flex-direction: row;
        align-items: flex-start;
    }

    #lselecciona,
    #lhistorico,
    #lrecursos {
        flex: 1 1 0;
    }
}

/* ? 1024px: más aire general */
@media (min-width: 1024px) {
    body#pi {
        font-size: 1.05rem;
    }

    #contenedor {
        padding: 2rem 1rem 3rem;
    }

    #apartados {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }

    /* Que ?Bibliografía? ocupe todo el ancho si quieres: */
    #bibliografia {
        grid-column: 1 / -1;
    }
}

/* ? 1280px: centrado cómodo y límites */
@media (min-width: 1280px) {
    #contenedor {
        max-width: 1200px;
    }
}

/* ===========================
   10. ACCESIBILIDAD (WCAG 2.2 AA)
   =========================== */

/* Aseguramos contraste y estados de foco visibles ya definidos arriba.
   Aquí reforzamos algunas cosas más. */

/* Listas y elementos de definición legibles */
dt {
    font-size: 1rem;
}

dd {
    font-size: 0.95rem;
}

/* Formularios, por si hay en otras versiones (en este HTML no hay, pero por si acaso) */

label {
    display: inline-block;
    margin-bottom: 0.25rem;
    font-weight: bold;
}

input,
select,
textarea {
    font: inherit;
    padding: 0.35rem 0.5rem;
    border: 1px solid #999999;
    border-radius: 4px;
    max-width: 100%;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid #ff9900;
    outline-offset: 2px;
}