/* ============================================================================
   FRONTERA · sistema de diseño
   «Donde el número se vuelve paisaje.»

   Identidad inventada para este proyecto (NO Rebenque, NO AIL). Galería-observatorio
   en penumbra: el lienzo del fractal ocupa el 100% de la pantalla; el cromo flota en
   los márgenes como CARTELAS de museo — sin cajas, sin bordes duros, sin glass, sin
   sombras dramáticas. Un solo acento cálido (ámbar) con tacañería de comisario; todo
   el presupuesto de saturación se cede al fractal. Detalle en docs/IDENTIDAD.md.
   ============================================================================ */

:root {
  /* — Tinta y papel (sustrato oscuro de instrumento; nunca #000 puro) — */
  --ink:        #0B0F1A; /* fondo: azul-noche con profundidad atmosférica */
  --ink-raised: #141A28; /* lámina apenas un grado más clara, si algo necesita superficie */
  --paper:      #E9E4D8; /* texto principal, cálido marfil */
  --paper-dim:  #9A958A; /* texto secundario, etiquetas en reposo */

  /* — Acento cálido: el único latido vivo. Reservado al dato vivo, cursor y foco — */
  --accent:     #E8A24C; /* ámbar */
  --accent-dim: #A8762E;
  --guide:      #F2C879; /* «estrella guía»: punto del logo y retículo */

  /* — Estructura y secundarios discretísimos — */
  --line:       #26303F; /* hairlines, separadores apenas perceptibles */
  --cool:       #7FB6D8; /* estado: rama Julia */
  --ok:         #8FB1A4; /* estado: confirmaciones */

  /* — Tipografía (stacks del sistema; cero descargas por defecto) — */
  --font-display: ui-serif, "New York", Georgia, "Times New Roman", serif;
  --font-ui:      ui-sans-serif, -apple-system, "SF Pro Text", system-ui, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "IBM Plex Mono", "Menlo", monospace;

  /* — Ritmo y movimiento — */
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1); /* easing de instrumento: entra firme, posa suave */
  --fade:      420ms;
  --space:     16px;
}

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

html, body {
  height: 100%;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-ui);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;            /* app a pantalla completa: el lienzo no scrollea */
  overscroll-behavior: none;
}

/* Lectores numéricos: SIEMPRE mono con cifras tabulares para que los dígitos no
   bailen al hacer zoom (cuentakilómetros de latón). */
.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: 0.01em;
}

/* Wordmark y micro-copy editorial. */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.02em;
}

/* — Cartela: etiqueta de museo flotante, sin caja — */
.cartela {
  position: fixed;
  font-size: 12px;
  line-height: 1.5;
  color: var(--paper-dim);
  user-select: none;
  transition: opacity var(--fade) var(--ease);
  /* Sombra muy suave: legibilidad del cromo sobre zonas claras del fractal (no decorativa). */
  text-shadow: 0 1px 4px rgba(8, 10, 16, 0.5);
}
.cartela .dato { color: var(--paper); }
.cartela .vivo { color: var(--accent); } /* el dato que cambia en tiempo real */

/* — Foco de teclado: anillo ámbar de 1px, nunca el azul del navegador — */
:focus-visible {
  outline: 1.5px solid var(--accent);
  outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* — Cromo que se auto-oculta: clase que la UI alterna tras inactividad — */
.chrome-hidden { opacity: 0 !important; pointer-events: none; }

/* — El lienzo del fractal: ocupa todo, es el protagonista — */
#lienzo {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;          /* gestionamos nosotros los gestos (pan/zoom) */
  cursor: grab;
}
body.panning #lienzo { cursor: grabbing; }

/* Respeto a quien prefiere menos movimiento. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}