/* ===========================================================
   Global-VZLA · Plataforma Web — BASE
   -----------------------------------------------------------
   Reset, tipografía de arranque y comportamientos que tienen que
   ser idénticos en las 6 herramientas. Se carga DESPUÉS de
   tokens.css y ANTES de components.css y del styles.css propio.

   Lo que vive acá es lo que ninguna herramienta debería volver a
   escribir: el `box-sizing`, el `[hidden]`, la barra de scroll,
   el anillo de foco y la selección de texto. Antes cada una
   repetía su versión, con medidas distintas.
   =========================================================== */

*, *::before, *::after{ box-sizing:border-box; }
* { margin:0; padding:0; }

/* El atributo hidden tiene que ganarle a display:grid/flex.
   Sin esto, un elemento con [hidden] y display:flex se sigue viendo
   — bug real pisado en el hub y en Conversion Lab (.m-fld). */
[hidden]{ display:none !important; }

/* `html` conserva el 100%: el fondo del body se propaga al canvas y
   los gradientes de atmósfera se posicionan contra él.
   ⚠️ El `body` NO lleva height:100%. Con height:100% el body mide un
   viewport aunque la página mida tres, y cualquier `position:sticky`
   (riel, sidebar, barra superior) se queda sin recorrido y desaparece
   al bajar. Bug pisado dos veces: Conversion Lab y Control de Activos,
   los dos el 2026-08-06. `min-height:100vh` es lo que hace falta. */
html{ height:100%; }

body{
  min-height:100vh;
  font-family:var(--font-body);
  font-size:var(--fs-md);
  line-height:var(--lh);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  transition:background var(--t-slow), color var(--t-slow);
}

/* ---- Tipografía de arranque ----
   Los títulos usan la fuente display; el cuerpo, la de texto. Cada
   herramienta ajusta tamaños en su propio archivo, pero la familia y
   el interletrado salen de acá para que un H2 se vea igual en las 6. */
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-display);
  font-weight:600;
  line-height:var(--lh-tight);
  letter-spacing:-.01em;
}
h1{ font-size:var(--fs-3xl); letter-spacing:-.02em; }
h2{ font-size:var(--fs-xl); }
h3{ font-size:var(--fs-lg); }

/* Números, ids, códigos y etiquetas técnicas: siempre mono.
   Es lo que hace que una columna de cifras se lea alineada. */
code,kbd,samp,pre{ font-family:var(--font-mono); font-size:.95em; }

a{ color:var(--accent-text); text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:3px; }

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

/* Los controles no heredan la fuente por defecto: sin esto, un
   <button> o un <select> se dibujan con la fuente del sistema y la
   pantalla queda con dos tipografías sin que nadie lo haya decidido. */
button,input,select,textarea{
  font-family:inherit;
  font-size:inherit;
  color:inherit;
}
button{ background:none; border:none; cursor:pointer; }
button:disabled{ cursor:default; }
textarea{ resize:vertical; }

/* ---- Foco visible ----
   `:focus-visible` y no `:focus`: el anillo aparece al navegar con
   teclado y no al hacer clic con el mouse. Quitar el contorno sin
   reponer nada deja a quien usa teclado sin saber dónde está. */
:focus{ outline:none; }
:focus-visible{
  outline:none;
  box-shadow:var(--ring);
  border-radius:var(--r-sm);
}

/* ---- Selección de texto ---- */
::selection{ background:var(--accent-soft); color:var(--text); }

/* ---- Barra de scroll ----
   Fina y con el color del tema. En Firefox se resuelve con las dos
   propiedades estándar; en Chromium, con el pseudo-elemento. */
*{ scrollbar-width:thin; scrollbar-color:var(--border-2) transparent; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{
  background:var(--border-2);
  border-radius:var(--r-sm);
  border:2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover{ background:var(--text-3); }

/* ---- Utilidades mínimas ---- */
.gv-muted{ color:var(--text-2); }
.gv-dim{ color:var(--text-3); }
.gv-mono{ font-family:var(--font-mono); }
.gv-num{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.gv-nowrap{ white-space:nowrap; }

/* Texto solo para lectores de pantalla. Un ícono sin nombre no
   existe para quien no lo ve. */
.gv-sr{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* ---- Movimiento reducido ----
   Quien lo pidió en su sistema operativo no debería recibir el logo
   orbitando ni las tarjetas entrando de a una. Se apaga todo salvo
   lo que comunica estado (el spinner sigue girando, más lento). */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}