/* ==========================================================================
   BASE — fuentes, reset, el fondo, el foco, el movimiento reducido (PLANUI U1)

   Lo que es de documento y no de componente, con la base de la fusion
   (`vitrina/fusion/estilos/base.css`). Salieron la grilla de fondo, las
   escuadras del monitor y el grano de la fase T (PLANUI §5.9): el unico
   decorado es el ambiente (`#fx-ambiente`, src/ui/fx/).
   ========================================================================== */

/* --- Fuentes ---------------------------------------------------------------
   Las de la vitrina (`vitrina/comun/fuentes/`, OFL 1.1, subset latin), auto-
   hospedadas: Mona Sans variable (peso 200-900, ancho 75-125 %) para los
   titulos, los momentos y los numeros; Geist para el cuerpo; Geist Mono para
   los rotulos. Salen Barlow e Inter (PLANUI §5.3). */

@font-face {
  font-family: 'Mona Sans';
  font-style: normal;
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url('fuentes/mona-sans-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fuentes/geist-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fuentes/geist-mono-latin.woff2') format('woff2');
}

/* --- Reset ---------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

/* La noche teñida del tono (LINEA regla 3: ningun fondo negro neutro). El ambiente pinta encima; esto es lo que se ve
   antes de que monte, o si no monta. */
html,
body { background: var(--tono-vacio); }

body {
  margin: 0;
  min-height: 100vh;
  font: 400 var(--t-cuerpo) / 1.5 var(--f-cuerpo);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, figure, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

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

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

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

/* Todo numero del juego va en cifras tabulares: sin esto, un contador que sube tiembla. */
.num, .tabular { font-variant-numeric: tabular-nums; }

/* --- Foco -----------------------------------------------------------------
   El anillo doble de la vitrina: claro por fuera, oscuro por dentro, para
   que se lea sobre la luz y sobre el panel (PLANUI §9.6). */

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px var(--bg-void);
}
:focus:not(:focus-visible) { outline: none; }

/* Un salto al contenido para el teclado, escondido hasta que se lo enfoca. */
.saltar-al-contenido {
  position: absolute;
  left: -9999px;
  top: var(--s-2);
  z-index: 10000;
  padding: var(--s-2) var(--s-4);
  background: var(--panel-hondo);
  border-radius: var(--r-control);
  box-shadow: inset 0 0 0 1px var(--filete);
}
.saltar-al-contenido:focus { left: var(--s-2); }

/* --- Barras de scroll ------------------------------------------------------ */

* { scrollbar-width: thin; scrollbar-color: var(--linea-fuerte) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--linea-fuerte);
  border-radius: var(--r-chip);
  border: 3px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background-clip: content-box; background-color: var(--ink-mute); }

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

/* Visible para un lector de pantalla, invisible en la pantalla. */
.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

[hidden] { display: none !important; }

/* --- El celular: la escala de la vitrina (su base.css, @media 640) ----------- */

@media (max-width: 640px) {
  :root { --franja-alto: 52px; --barra-alto: 56px; --t-titulo: 30px; --t-titulo-s: 24px; --t-opcion: 16px; }
}

/* --- Movimiento reducido -----------------------------------------------------
   Todo con camino quieto (PLANUI §5.7). La regla `*` no alcanza a los
   pseudo-elementos de las View Transitions: van aparte (§9.4). El
   reproductor y el envoltorio de transiciones leen esta preferencia en JS. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}