/*
  base.css: reset y estilos por etiqueta
  Se carga segundo en todas las páginas. Usa los tokens de variables.css.
  Acá no hay clases de componentes, solo el reset, .sr-only, el atributo
  [hidden], el scrollbar y el estilo base de body, títulos, links, listas,
  imágenes y main. Lo específico se pisa después en components.css y en
  el CSS de cada página.
*/

/* Con border-box el padding y el borde entran dentro del ancho declarado. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Única excepción al "sin !important" del proyecto: sin esto, cualquier
   display de una clase (flex, grid) le gana al atributo hidden y el
   elemento no se oculta. */
[hidden] {
  display: none !important;
}

/* Texto solo para lectores de pantalla (labels ocultos, avisos). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* color-scheme: dark hace que los controles nativos (inputs, scrollbar del
   sistema, <dialog>) salgan oscuros sin estilarlos uno por uno. */
html {
  color-scheme: dark;
  /* Firefox: no hay pseudo-elementos ahí, es la única forma de tocar el
     color del scrollbar. Chrome/Edge/Safari ignoran esto y usan los
     ::-webkit-scrollbar de abajo. */
  scrollbar-color: var(--primario-o1) var(--fondo);
  scrollbar-width: thin;
}

/* Mismos colores para Chrome/Edge/Safari. Con el selector universal en vez
   de uno puntual: cualquier contenedor con scroll propio (el desplegable
   del carrito, un <textarea>) hereda el mismo estilo sin tener que
   repetirlo. Las filas de categorías de la Home siguen ocultando la suya
   igual que antes (.carrusel__pista, en home.css) — esa regla es más
   específica que este selector universal y gana; ahí ya hay flechas como
   control alternativo, acá no. */
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: var(--fondo);
}

*::-webkit-scrollbar-thumb {
  background: var(--primario-o1);
  border: 2px solid var(--fondo);
  border-radius: var(--radio-sm);
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--acento);
}

/* ---- Estilos por etiqueta ---- */
body {
  margin: 0;
  min-height: 100vh;
  background: var(--fondo);
  color: var(--primario-c3);
  font: 400 16px/1.5 var(--font-ui);
}

/* Orbitron solo en h1-h3 (corrección del profesor). h4 queda en Roboto
   Flex por eso está separado. */
h1, h2, h3 {
  font-family: var(--font-display);
  margin: 0 0 var(--espaciado-2);
  line-height: 1.2;
}

h4 {
  margin: 0 0 var(--espaciado-2);
  line-height: 1.2;
}

h1 { font-size: 32px; font-weight: 700; }
h2 { font-size: 24px; font-weight: 600; }
h3 { font-size: 20px; font-weight: 600; }

p {
  margin: 0 0 var(--espaciado-4);
  color: var(--primario-c1);
}

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

/* Este subrayado también le llega a los <a class="btn">; components.css
   lo anula ahí para que solo se vea el de la animación del botón. */
a:hover {
  text-decoration: underline;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

img {
  max-width: 100%;
  display: block;
}

button {
  font-family: inherit;
}

/* Contenedor de contenido centrado. login.css lo pisa con .auth-shell. */
main {
  display: block;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--espaciado-6);
}