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


/* --- Body --- */
body {
    font-size: 100%; /* Permite al usuario reescalar (WCAG 1.4.4) */
    font-family: Arial, Helvetica, sans-serif;
    
    /* WCAG 1.4.3 (Contraste) */
    color: #222222;
    background-color: #ffffff;
    
    /* NUEVO: max-width limita el ancho para legibilidad (WCAG 1.4.8) */
    max-width: 960px;
    margin: 0 auto;
    padding: 1rem;
}

/* --- Header --- */
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 --- */
header nav a {
    padding: 0.5rem;
    font-size: 1.1rem;
}

main {
    padding: 1rem 0;
}

/* --- Migas de Pan --- */
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 --- */
#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;
}

/* --- Main/Footer --- */
a {
    color: #0056b3; /* Azul accesible (Contraste 4.5:1 sobre blanco) */
}

/* * WCAG 2.4.7 (Focus Visible) */
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;
}

/* --- Tablas --- */
table {
    margin-bottom: 1.5rem;
    border: 1px solid #cccccc; /* Borde exterior */
    /* NUEVO: border-collapse; une los bordes de las celdas */
    border-collapse: collapse;
    /* NUEVO: width: 100%; hace que la tabla ocupe el ancho disponible */
    width: 100%;
}

th, td {
    padding: 0.75rem;
    border: 1px solid #dddddd; /* Bordes internos */
}

th {
    background-color: #f4f4f4;
}

/* --- Imágenes e Iframes --- */
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 --- */
footer {
    background-color: #06585B;
    color: #444444;
    padding: 1.5rem;
    margin-top: 2rem;
    border-top: 1px solid #dddddd;
}
/* Enlaces del footer en blanco */
footer a {
    color: #ffffff; /* blanco */
    text-decoration: none;
}

footer a:hover,
footer a:focus {
    color: #eeeeee; /* un blanco ligeramente más claro al pasar el ratón */
    text-decoration: underline;
}
/* Enlace "Saltar al contenido principal" inicialmente oculto */
.saltar-a {
  position: fixed;     /* Fijo en pantalla */
  top: 10px;           /* Separación del borde superior */
  left: 50%;           /* Centrado horizontal */
  transform: translateX(-50%); /* Ajusta el centrado exacto */
  background-color: #000;
  color: #fff;
  padding: 0.5rem 1rem;
  font-weight: bold;
  border-radius: 4px;
  z-index: 1000;
  
  /* Oculto al inicio */
  opacity: 0;
  pointer-events: none; /* No se puede hacer clic cuando está oculto */
  
  transition: opacity 0.3s ease; /* Suaviza la aparición */
}

/* Cuando tenga la clase 'visible', se muestra */
.saltar-a.visible {
  opacity: 1;
  pointer-events: auto;
}


/* ===============================================================
   --- MODO OSCURO ---
   =============================================================== */

body.modo-oscuro {
  --color-primario: #4a90e2;
  --color-primario-oscuro: #1c3d5a;
  --color-enlace: #7ab4ff;
  --color-texto: #e4e4e4;
  --color-texto-claro: #ffffff;
  --color-fondo: #121212;
  --color-fondo-secundario: #1e1e1e;
  --color-borde-sutil: #333;

  background-color: var(--color-fondo);
  color: var(--color-texto);
}

/* Header y footer adaptados */
body.modo-oscuro header,
body.modo-oscuro footer {
  background-color: var(--color-primario-oscuro);
  color: var(--color-texto-claro);
}

/* Enlaces en modo oscuro */
body.modo-oscuro a {
  color: var(--color-enlace);
}

/* Secciones y contenedores */
body.modo-oscuro section,
body.modo-oscuro main,
body.modo-oscuro .container {
  background-color: var(--color-fondo-secundario);
  color: var(--color-texto);
  border-color: var(--color-borde-sutil);
}

/* Navegación */
body.modo-oscuro .nav-principal li a,
body.modo-oscuro .nav-letras li a {
  background-color: var(--color-fondo-secundario);
  color: var(--color-texto-claro);
}

body.modo-oscuro .nav-principal li a:hover,
body.modo-oscuro .nav-letras li a:hover {
  background-color: var(--color-primario);
  color: var(--color-texto-claro);
}
/* ===============================================================
   --- AJUSTES EXTRA DE MODO OSCURO (Tablas, Tabla de contenidos) ---
   =============================================================== */

/* Tabla de contenidos */
body.modo-oscuro #tabla-de-contenidos {
  background-color: #1e2a33; /* fondo más oscuro */
  border: 1px solid #333;
  color: #e4e4e4;
}

body.modo-oscuro #tabla-de-contenidos h3 {
  color: #7ab4ff; /* tono azul claro para resaltar */
}

/* Tablas */
body.modo-oscuro table {
  background-color: #1a1a1a;
  border: 1px solid #333;
}

body.modo-oscuro th {
  background-color: #2a2a2a; /* cabecera gris oscura */
  color: #ffffff;
}

body.modo-oscuro td {
  background-color: #1a1a1a;
  color: #e4e4e4;
  border: 1px solid #333;
}

/* Bordes más suaves y contrastados */
body.modo-oscuro th,
body.modo-oscuro td {
  border-color: #444;
}