/* --- RESET BÁSICO --- */

/* El selector universal (*) aplica estas reglas a TODOS los elementos HTML */
* {
  margin: 0; /* Elimina márgenes por defecto de los navegadores */
  padding: 0; /* Elimina rellenos por defecto */
  
  /* box-sizing: border-box es la regla MÁS IMPORTANTE de CSS moderno.
     Hace que si un elemento mide 100px y le pones 10px de padding y 1px de borde, 
     el tamaño TOTAL siga siendo 100px (los espacios se comen hacia adentro). 
     Por defecto (content-box), mediría 122px (100 + 20 padding + 2 bordes). */
  box-sizing: border-box; 
}

/* Configuramos el contenedor base de la página */
body {
  font-family: var(--font-family); /* Aplicamos nuestra fuente del sistema */
  background-color: var(--bg-app); /* Aplicamos color de fondo general */
  color: var(--text-main); /* Color de texto por defecto */
  
  /* Ocupar siempre el 100% de la altura visible de la pantalla (Viewport Height) */
  height: 100vh; 
  
  /* hidden bloquea el scroll en toda la página. 
     Queremos que la página esté fija y que SOLO el tablero central haga scroll. */
  overflow: hidden; 
}