/*
Diseño Adaptativo Accesible
Paula Artés Rodríguez
mailto: par45@alu.ua.es
*/

/* =========================================
   1. RESET Y TIPOGRAFÍA BASE
   ========================================= */
* {
    margin: 0;
    padding: 0;
    /* Box-sizing facilita el cálculo de anchos + padding */
    box-sizing: border-box;
}

body {
    /* Verdana es muy legible en pantalla (Accesibilidad) */
    font-family: Verdana, Geneva, sans-serif;
    background-color: #f4f4f4; /* Gris muy suave para no cansar la vista */
    color: #222222; /* Gris casi negro para alto contraste (AA) */
    font-size: 100%; /* Base 16px */
    line-height: 1.6; /* Interlineado amplio para legibilidad */
    text-align: center; /* Centrado para IEs antiguos */
}

/* Enlaces: Contraste mínimo 4.5:1 asegurado */
a {
    color: #004488; /* Azul oscuro accesible */
    text-decoration: none;
    font-weight: bold;
}

a:hover {
    text-decoration: underline;
    color: #002244;
}

/* ACCESIBILIDAD (WCAG 2.2): Indicador de foco visible */
a:focus, input:focus {
    outline: 3px solid #ffcc00; /* Borde amarillo/naranja visible al navegar con teclado */
    background-color: #333;
    color: #fff;
}

/* =========================================
   2. ESTRUCTURA (LAYOUT)
   ========================================= */
/* Contenedor principal centrado */
#contenedor {
    width: 90%; 
    max-width: 1200px; /* Limita el ancho en pantallas 1920px para que no se "desparrame" */
    min-width: 300px;
    margin: 0 auto;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    text-align: left; /* Restablece alineación texto */
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

/* =========================================
   3. CABECERA
   ========================================= */
#cabecera {
    background-color: #003366; /* Azul corporativo oscuro */
    color: #ffffff;
    padding: 20px;
    border-bottom: 5px solid #002244;
}

#cabecera h1 {
    font-size: 2em; /* Texto grande para lectura fácil */
    margin-bottom: 0.2em;
}

#cabecera h2 {
    font-size: 1.2em;
    font-weight: normal;
    color: #dddddd; /* Gris claro sobre azul oscuro (Buen contraste) */
}

/* =========================================
   4. MENÚ DE NAVEGACIÓN
   ========================================= */
#menu {
    background-color: #222222; /* Fondo oscuro */
    width: 100%;
    overflow: hidden; /* Limpia flotados */
    border-bottom: 4px solid #444;
}

#menu ul {
    list-style-type: none;
}

#menu li {
    float: left;
}

#menu li a {
    display: block;
    color: #ffffff;
    padding: 15px 20px;
    font-size: 1.1em;
    border-right: 1px solid #444;
}

#menu li a:hover {
    background-color: #004488;
    text-decoration: none;
}

/* =========================================
   5. CONTENIDO PRINCIPAL
   ========================================= */
/* Columna Izquierda (Texto principal) */
#contenido {
    float: left;
    width: 70%; /* Ocupa el 70% */
    padding: 30px;
}

#contenido h2 {
    color: #003366;
    border-bottom: 2px solid #ccc;
    padding-bottom: 10px;
    margin-bottom: 20px;
    font-size: 1.8em;
}

#contenido h3 {
    color: #444;
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 1.4em;
}

#contenido p, #contenido ul {
    margin-bottom: 1.5em;
    font-size: 1.05em; /* Un poco más grande para cumplir mejor WCAG */
}

#contenido ul {
    margin-left: 2em;
}

/* Columna Derecha (Barra lateral / Sidebar) */
/* Asumimos que el ID es #seleccion o una estructura similar adyacente */
#seleccion, .sidebar, #derecha { 
    float: right;
    width: 30%; /* El 30% restante */
    padding: 20px;
    background-color: #f8f9fa;
    border-left: 1px solid #eee;
    font-size: 0.95em;
}

#seleccion h3 {
    background-color: #e2e6ea;
    color: #333;
    padding: 10px;
    border-radius: 4px;
    margin-top: 20px;
    margin-bottom: 10px;
    border-left: 5px solid #003366;
}

#seleccion ul {
    list-style: none;
    margin-bottom: 20px;
}

#seleccion li {
    border-bottom: 1px solid #ddd;
    padding: 8px 0;
}

/* =========================================
   6. PIE DE PÁGINA
   ========================================= */
#pie {
    clear: both; /* Fuerza a bajar debajo de las columnas flotantes */
    background-color: #222222;
    color: #f1f1f1;
    padding: 20px;
    text-align: center;
    border-top: 5px solid #003366;
}

#pie a {
    color: #88ccff; /* Azul claro accesible sobre fondo oscuro */
}

/* =========================================
   7. DISEÑO ADAPTATIVO (RESPONSIVE)
   ========================================= */
/*
   Media Query para Tablets y Móviles.
   Se activa cuando la pantalla es menor de 800px.
   Cubre el requisito de 640px perfectamente.
*/
@media screen and (max-width: 800px) {

    /* El contenedor ocupa todo el ancho en móviles */
    #contenedor {
        width: 100%;
        max-width: 100%;
        border: none;
        box-shadow: none;
    }

    /* Quitamos los 'float' para que las columnas caigan una debajo de otra */
    #contenido, 
    #seleccion, 
    .sidebar, 
    #derecha {
        float: none;
        width: 100%; /* Ocupan todo el ancho disponible */
        padding: 20px;
        border: none;
    }

    /* El menú se vuelve vertical para que sea fácil de tocar con el dedo (Accesibilidad) */
    #menu {
        height: auto;
    }
    
    #menu li {
        float: none;
        width: 100%;
        border-bottom: 1px solid #555;
    }

    #menu li a {
        text-align: left;
        padding: 15px 25px; /* Áreas de toque grandes (WCAG Target Size) */
    }

    /* Ajuste visual del sidebar para diferenciarlo del contenido */
    #seleccion {
        background-color: #eeeeee;
        border-top: 4px solid #ccc;
    }
}

/* Corrección para que se vean los puntos de las listas */
#contenedor ul, #contenedor ol {
    margin-left: 30px; /* Crea espacio a la izquierda para los puntos */
    margin-bottom: 15px; /* Separa un poco las listas del siguiente párrafo */
}

/* Evitar que esto afecte al menú de navegación */
#menu ul {
    margin-left: 0; /* El menú debe seguir sin margen */
    list-style-type: none; /* Sin puntos */
}