@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,400;0,700;1,400&display=swap');

html {
    box-sizing: border-box; 
    scroll-behavior: smooth;
}


/* --- Body --- */
body {
    
    font-size: 112.5%;  
    font-family: 'Merriweather';
    color: #222222;
    background-color: #ffffff;
    max-width: 80ch;
    margin: 0 auto;
    padding: 1rem;
}

header {
    background-color: #003366;
    color: #ffffff;
    padding: 1.5rem;
    border-bottom: 5px solid #0056b3;
}

header h1 {
    margin-top: 0;
    margin-bottom: 1rem;
}


header a {
    color: #ffffff;
    text-decoration: none;
}

header nav a {
    padding: 0.5rem;
    font-size: 1.1rem;
}

main {
    padding: 1rem 0;
}

nav[aria-label="Migas de pan"] {
    padding: 0.5rem 0;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

nav[aria-label="Migas de pan"] ol {
    margin: 0;
    padding: 0;
    list-style: none; 
    display: flex;
}

nav[aria-label="Migas de pan"] li::before {
    content: '>';
    margin: 0 0.5rem;
    color: #555555;
}
nav[aria-label="Migas de pan"] li:first-child::before {
    content: '';
    margin: 0;
}

#tabla-de-contenidos {
    background-color: #f0f8ff;
    border: 1px solid #bde0ff;
    padding: 1rem 1.5rem;
    margin-bottom: 2rem;
}

#tabla-de-contenidos h3 {
    margin-top: 0;
}

h2, h3 {
    color: #003366;
    margin-top: 2rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #eeeeee;
}

a {
    color: #0056b3;
}

a:focus {
    outline: 3px solid #0056b3;
}

header a:focus {
    outline: 3px solid #ffffff;
}

ul, ol {
    padding-left: 2rem;
    margin-bottom: 1rem;
}

dl {
    padding-left: 1rem;
    margin-bottom: 1rem;
}

table {
    margin-bottom: 1.5rem;
    border: 1px solid #cccccc;
    border-collapse: collapse;
    width: 100%;
}

th, td {
    padding: 0.75rem;
    border: 1px solid #dddddd;
    /* REQUISITO: Asegurar alineación izquierda */
    text-align: left;
}

th {
    background-color: #f4f4f4;
}

img, iframe {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1.5rem auto;
    border: 1px solid #dddddd;
    padding: 4px;
}

iframe {
    padding: 0;
    width: 560px; 
}

footer {
    background-color: #408589;
    color: #444444;
    padding: 1.5rem;
    margin-top: 2rem;
    border-top: 1px solid #dddddd;
}