/* ==========================================================================
   tokens.css — Sistema de escala fluida para videowall 3x3
   Cargar PRIMERO (antes de header.css/main.css y de los CSS de cada página).
   Bajo el umbral, --ui-scale = 1  => valores idénticos a hoy (cero regresión).
   ========================================================================== */

/* Registrar --ui-scale como número permite: (a) que calc(px * --ui-scale)
   compute correctamente, y (b) que getComputedStyle devuelva el número ya
   resuelto (lo usa ui-scale.js para Chart.js/Leaflet). */
@property --ui-scale {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

:root {
  /* Escala maestra: 1 en desktop/4K; crece solo en el muro (ver media query). */
  --ui-scale: 1;
  --fs-root: 16px;

  /* Cabecera y paneles laterales */
  --header-h:        calc(68px  * var(--ui-scale));
  --sidebar-user-w:  calc(280px * var(--ui-scale));
  --sidebar-pan-w:   calc(380px * var(--ui-scale));

  /* Iconos y controles */
  --icon-xs:     calc(16px * var(--ui-scale));
  --icon-sm:     calc(20px * var(--ui-scale));
  --icon-btn:    calc(32px * var(--ui-scale));
  --icon-btn-lg: calc(40px * var(--ui-scale));

  /* Espaciado (paddings/gaps/offsets en px que deben escalar) */
  --space-1: calc(4px  * var(--ui-scale));
  --space-2: calc(8px  * var(--ui-scale));
  --space-3: calc(12px * var(--ui-scale));
  --space-4: calc(16px * var(--ui-scale));
  --space-5: calc(20px * var(--ui-scale));
  --space-6: calc(24px * var(--ui-scale));

  /* Anchos de modal: escalan proporcionalmente, con tope vw para no desbordar. */
  --modal-w-sm: min(92vw, calc(560px  * var(--ui-scale)));
  --modal-w-md: min(92vw, calc(900px  * var(--ui-scale)));
  --modal-w-lg: min(94vw, calc(1300px * var(--ui-scale)));
}

/* Modo videowall: se activa SOLO en superficies muy anchas (muro 3x3).
   La división por una longitud con unidad (1920px) produce un NÚMERO
   adimensional; el min() evita desbordar en alto (la app es overflow:hidden). */
@media (min-width: 4000px) {
  :root {
    --ui-scale: min(calc(100vw / 1920px), calc(100vh / 1080px));
  }
}

/* Palanca tipográfica: arrastra todos los rem (incluido Bootstrap). */
html { font-size: calc(var(--fs-root) * var(--ui-scale)); }

/* Permite forzar el modo manualmente para pruebas (opcional). */
body.videowall { --ui-scale: min(calc(100vw / 1920px), calc(100vh / 1080px)); }