/*
Hoja de estilos trabajo optativo CSS
Silvia Larrosa Marín
mailto:slm91@ arroba @alu.ua.es
*/


/* ESTILOS GENERALES */

* {
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif; /* Fuente est?ndar*/
    font-size: 16px; /* Tama?o bueno para lectura */
    background-color: #f0f0f0; /* Gris claro de fondo */
    color: #000000; /* Texto negro para buen contraste */
    margin: 0;
    padding: 0;
}

/* Colores para los enlaces (cumplen accesibilidad AA) */
a {
    color: #0000EE; /* Azul est?ndar de internet */
    text-decoration: none; 
    font-weight: bold;
}

a:hover {
    text-decoration: underline; /* Subrayar al pasar el rat?n */
    background-color: #ddd; /* Peque?a ayuda visual */
}

/* Para que se marque cuando navegas con teclado */
a:focus {
    outline: 3px solid #000;
    background-color: yellow;
    color: #000 !important; /* fuerza la letra a negro */
}

/* ESTRUCTURA DE LA P?GINA */

/* Contenedor principal */
#contenedor {
    max-width: 1000px; /* No muy ancho para que no se deforme */
    margin: 0 auto; /* Para centrar el contenedor */
    background-color: #ffffff; /* Fondo blanco para el texto */
    border: 1px solid #999; /* Borde sencillo */
    padding: 10px;
    
    /* Flexbox para poner las columnas lado a lado */
    display: flex;
    flex-wrap: wrap; /* Permite que caigan abajo en m?viles */
    justify-content: space-between;
}

/* CABECERA */
#intro {
    width: 100%; /* Ocupa todo el ancho */
    background-color: #e6e6e6;
    padding: 15px;
    border-bottom: 2px solid #000;
    margin-bottom: 20px;
}

#titulo h1 {
    color: #333;
    font-size: 2em;
    margin-top: 0;
}

#titulo h2 {
    font-size: 1.2em;
    color: #555;
    font-weight: normal;
}

/* Cajas de resumen y comentario */
#resumen, #comentario {
    border: 1px solid #ccc;
    padding: 10px;
    margin-top: 10px;
    background-color: #fff;
}

/* BARRA DE NAVEGACI?N SUPERIOR */
#enlacesintra {
    width: 100%;
    background-color: #333; /* Fondo oscuro */
    color: #fff;
    padding: 10px;
    margin-bottom: 20px;
}

#enlacesintra h3 {
    display: inline; /* Para que se ponga al lado de la lista */
    color: #fff;
    margin-right: 10px;
}

#enlacesintra ul {
    display: inline;
    padding: 0;
    list-style: none; /* Para quitar los puntos de la lista */
}

#enlacesintra li {
    display: inline; /* Elementos en horizontal */
    margin-right: 15px;
}

#enlacesintra a {
    color: #fff; /* Enlaces blancos sobre fondo negro */
    border-bottom: 1px dotted #fff;
}

/* ZONA CENTRAL */

/* Columna izquierda: Contenido principal */
#apartados {
    width: 68%; /* Un poco menos del 70% para dejar hueco */
    padding-right: 15px;
}

#apartados div {
    margin-bottom: 30px;
    border-bottom: 1px solid #ccc; /* L?nea separadora */
    padding-bottom: 20px;
}

#apartados h3 {
    background-color: #003366; /* Azul oscuro */
    color: #fff;
    padding: 5px 10px;
}

/* Estilos para las definiciones de profesores */
dt {
    font-weight: bold;
    margin-top: 10px;
    color: #003366;
}

dd {
    margin-left: 20px;
    margin-bottom: 10px;
}

/* Columna derecha: Barra lateral de enlaces */
#enlaces {
    width: 30%; /* El resto del ancho */
    background-color: #f9f9f9;
    padding: 10px;
    border: 1px solid #ddd;
}

#enlaces div {
    margin-bottom: 20px;
}

#enlaces h3 {
    font-size: 1.1em;
    border-bottom: 2px solid #003366;
    color: #333;
}

#enlaces ul {
    padding-left: 20px; /* Sangr?a para las listas */
}

#enlaces li {
    margin-bottom: 5px;
}

/* PIE DE P?GINA */
#enlacesversiones {
    width: 100%;
    background-color: #eee;
    border-top: 2px solid #000;
    padding: 20px;
    text-align: center;
    margin-top: 20px;
}

#enlacesversiones ul, #enlacesversiones li {
    display: inline;
    margin: 0 5px;
    list-style: none;
}

/* Ocultamos los divs extra que no usamos */
#extraDiv1, #extraDiv2, #extraDiv3, #extraDiv4, #extraDiv5, #extraDiv6 {
    display: none;
}

/* DISE?O RESPONSIVE PARA M?VIL */
/* Si la pantalla es peque?a (menos de 768px), se cambia el dise?o */
@media screen and (max-width: 768px) {
    
    /* Para que las columnas ocupen todo el ancho */
    #apartados, #enlaces {
        width: 100%;
        display: block;
    }

    #enlaces {
        margin-top: 20px; /* Separa la barra lateral del contenido */
    }
    
    /* Ajustamos el men? de navegaci?n */
    #enlacesintra li {
        display: block; /* En m?vil, uno debajo de otro es m?s f?cil de pulsar */
        margin-top: 5px;
    }
    
    #contenedor {
        width: 100%;
        border: none;
    }
}