/*
  base.css
  ---------------------------------------------------------
  Estilos generales que aplican a TODO el sitio: reset básico,
  tipografía, colores de fondo/texto y comportamiento del
  scroll. Piensa en este archivo como los "cimientos" antes
  de construir el layout y los componentes.
*/

/* El "reset" quita los márgenes/rellenos que cada navegador
   trae por defecto, así todos parten del mismo punto cero. */
* {
  box-sizing: border-box; /* El padding y el borde ya no aumentan el ancho total del elemento */
  margin: 0;
  padding: 0;
}

/* scroll-behavior: smooth hace que al hacer clic en enlaces
   internos (como "#contenido") la página se desplace suave
   en vez de saltar de golpe. */
html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--fuente-texto);
  color: var(--color-texto);
  background-color: var(--color-fondo);
  line-height: 1.65; /* Espacio entre renglones: mejora la lectura */
  min-height: 100vh; /* Que el fondo cubra toda la pantalla aunque haya poco texto */
  display: flex;
  flex-direction: column; /* Para que el <footer> siempre quede al final, aunque falte contenido */
  -webkit-font-smoothing: antialiased; /* Texto más nítido en pantallas de alta densidad */
}

/* Este contenedor envuelve el contenido principal de cada
   página (todo menos el encabezado y el pie de página).
   flex: 1 hace que "empuje" el footer hacia abajo. */
main {
  flex: 1;
}

img {
  max-width: 100%; /* Ninguna imagen se desborda de su contenedor */
  height: auto;    /* Mantiene la proporción original al redimensionar */
  display: block;
}

a {
  color: var(--color-primario-oscuro);
  text-decoration: none;
}

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

h1, h2, h3 {
  color: var(--color-primario-oscuro);
  line-height: 1.3;
  letter-spacing: -0.01em; /* Un poco más compacto: look tipográfico moderno */
}

h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 800; }
h2 { font-size: clamp(1.35rem, 3vw, 1.9rem); margin-bottom: var(--espacio-md); font-weight: 700; }
h3 { font-size: clamp(1.15rem, 2.5vw, 1.45rem); margin-bottom: var(--espacio-sm); font-weight: 700; }

p {
  margin-bottom: var(--espacio-md);
}

ul, ol {
  margin: 0 0 var(--espacio-md) 1.4rem;
}

/* Texto en línea que menciona código (por ejemplo: `initAlgorithm`)
   se diferencia del resto del párrafo con esta clase. */
code.linea {
  font-family: var(--fuente-codigo);
  background-color: var(--color-primario-claro);
  color: var(--color-primario-oscuro);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  font-size: 0.92em;
}

/* Utilidad para ocultar visualmente un elemento mientras sigue
   siendo leído por lectores de pantalla (accesibilidad). */
.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}