/* ============================================================================
   base.css — Reset, tipografía global, accesibilidad y utilidades.
   Consume exclusivamente tokens de tokens.css.
   ============================================================================ */

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

* { margin: 0; }

/* El atributo hidden SIEMPRE gana, aunque la clase defina display propio */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--fuente-texto);
  font-size: var(--texto-base);
  line-height: var(--interlineado);
  color: var(--color-texto);
  background-color: var(--color-fondo);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* Títulos de interfaz: Inter Tight SemiBold, tracking apretado. Casablanca
   queda solo en la marca (--fuente-marca): identidad, no jerarquía. */
h1, h2 {
  font-family: var(--fuente-titulos);
  font-weight: var(--peso-titulo);
  line-height: var(--interlineado-titulos);
  letter-spacing: -0.015em;
}

/* DOS VOCES (ítem 14): dentro de las pantallas del equipo, los títulos hablan
   en Space Grotesk — carácter para el usuario experto; el cliente conserva la
   voz tranquila (Inter Tight). Los números de trabajo alinean en columna. */
.asesor-shell h1, .asesor-shell h2, .asesor-shell h3,
.admin h1, .admin h2, .admin h3,
.analytics h1, .analytics h2, .analytics h3 {
  font-family: var(--fuente-panel);
  letter-spacing: -0.01em;
}
.asesor-shell table, .admin table, .analytics table {
  font-variant-numeric: tabular-nums;
}
h1 { font-size: var(--texto-2xl); }
h2 { font-size: var(--texto-xl); }
h3 {
  font-family: var(--fuente-texto);
  font-weight: var(--peso-semibold);
  font-size: var(--texto-lg);
  line-height: 1.35;
}
h4 {
  font-family: var(--fuente-texto);
  font-weight: var(--peso-semibold);
  font-size: var(--texto-base);
}

/* Legibilidad (dislexia): nunca justificar, líneas cortas en texto corrido */
p, li, dd { text-align: left; max-width: var(--ancho-lectura); }

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

/* Los logos nunca se deforman: aunque un contenedor flex intente estirarlos,
   object-fit conserva la proporción de la imagen. */
img[data-logo] { object-fit: contain; }

input, button, textarea, select { font: inherit; color: inherit; }

button { cursor: pointer; background: none; border: none; padding: 0; }

a {
  color: var(--color-acento-texto);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { color: var(--color-acento-fuerte); }

::selection { background: var(--amarillo-marca); color: var(--negro); }

/* Foco visible SIEMPRE: anillo dorado de alto contraste */
:focus-visible {
  outline: 3px solid var(--color-foco);
  outline-offset: 2px;
  border-radius: var(--radio-xs);
}

/* El foco programático del router (títulos con tabindex=-1) no pinta anillo:
   es solo para lectores de pantalla, no una parada de teclado real. */
[tabindex='-1']:focus,
[tabindex='-1']:focus-visible { outline: none; }

/* Scrollbars discretas acordes a la paleta */
* { scrollbar-width: thin; scrollbar-color: var(--gris-claro) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--gris-claro); border-radius: 8px; }

/* ----------------------------------------------------------------------------
   Utilidades
   --------------------------------------------------------------------------- */

/* Ocultar visualmente manteniendo acceso a lectores de pantalla */
.visualmente-oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.contenedor {
  width: 100%;
  max-width: 75rem; /* en rem: escala con la base en pantallas gigantes */
  margin-inline: auto;
  padding-inline: var(--esp-4);
}

/* Superficie kraft: textura de cartón como acento de marca (~80 % opacidad) */
.fondo-kraft { position: relative; isolation: isolate; }


.fondo-kraft::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--textura-kraft);
  background-size: 460px;
  opacity: var(--kraft-opacidad);
  pointer-events: none;
}

.texto-suave { color: var(--color-texto-suave); }
.texto-sm { font-size: var(--texto-sm); }
.texto-xs { font-size: var(--texto-xs); }


.fila { display: flex; align-items: center; gap: var(--esp-3); }
.fila-entre { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); }
.columna { display: flex; flex-direction: column; gap: var(--esp-3); }

.icono { flex: none; }


/* ----------------------------------------------------------------------------
   Pantallas gigantes (monitores anchos y ultrapanorámicos curvos). Toda la app
   mide en rem: subir la base escala tipografía, espacios y contenedores en
   proporción, así el tablero no queda como una estampilla perdida en 3440px.
   --------------------------------------------------------------------------- */
@media (min-width: 1920px) {
  html { font-size: 17.5px; }
  /* Además de la letra, el LIENZO crece: los contenedores usan más pantalla */
  .contenedor { max-width: 92rem; }
}
@media (min-width: 2560px) {
  html { font-size: 19px; }
  .contenedor { max-width: 104rem; }
}
@media (min-width: 3400px) {
  html { font-size: 21px; }
  .contenedor { max-width: 116rem; }
}