html, body {
  height: 100%;
}

/*
  EL FONDO VA OSCURO SIEMPRE, y en un iPhone eso NO es cosmetica.
  --------------------------------------------------------------
  Instalada en la pantalla de inicio, la plataforma corre en modo autonomo y iOS pinta las dos
  franjas que no le tocan a la pagina -- la de la hora y la senal arriba, y la del gesto de inicio
  abajo -- CON EL FONDO DEL BODY. Aqui el fondo solo se ponia oscuro cuando el TELEFONO estaba en
  modo oscuro (prefers-color-scheme), asi que a quien lo trae en modo claro le salian dos franjas
  BLANCAS enmarcando una aplicacion negra. Se ve en las capturas que mando Manuel desde su iPhone.

  La plataforma es oscura y punto -- no tiene modo claro --, asi que su fondo no depende de un
  ajuste del aparato. Es el mismo negro del tema (oblivion.bg).

  color-scheme: dark va de la mano: le dice al navegador que pinte de oscuro lo que dibuja EL --
  las barras de desplazamiento, los selectores de fecha, el teclado de los campos -- que sobre
  esta piel salian claros y cantaban.
*/
body {
  margin: 0;
  padding: 0;
  background: #05070A;
  color-scheme: dark;
}

/*
  EN LA COMPUTADORA TODO SE VEIA "GIGANTE" (Manuel y Mr. Sound, 18 sep 2026): a 100% la piel se
  diseño pensando en el telefono y en un monitor de escritorio sale como con lupa.

  SE ACHICA TODA LA INTERFAZ AL 90% con zoom, en vez de ir bajando tamaños componente por componente
  -- son cientos de numeros escritos a mano y quedarian disparejos. Solo en COMPUTADORA: pantalla
  ancha y con raton. En el telefono y la tablet (dedo, sin hover) no cambia nada.

  EL MAPA ATINA IGUAL. Se midio antes de ponerlo: picando un punto del mapa con la interfaz al 90%,
  el mapa se desvia 1.1 px de donde se pico (0.4 px al 100%). Y la pantalla llena la ventana
  completa, sin franja vacia abajo.

  Los nombres de los equipos sobre el mapa NO se achican con esto (el mapa los dibuja aparte): su
  tamaño vive en map/MapPositions.js.

  VA EN #root, NUNCA EN html NI EN body. Primero se puso en html y se DESFASARON el menu de Cuenta y
  los letreros de los iconos: los menus, letreros y ventanitas de MUI se pintan FUERA de #root
  (en un portal colgado de body) y se acomodan con getBoundingClientRect de su boton. Con el zoom en
  html, esa medida sale en pixeles ya achicados y el menu se posiciona DENTRO del zoom, que la vuelve
  a achicar: todo quedaba corrido hacia arriba y a la izquierda. Con el zoom solo en #root, el portal
  queda al 100% y la medida del boton es justo la de la pantalla: cada menu cae donde esta su boton.
  El precio: menus, letreros y ventanitas se ven a su tamaño de siempre, no al 90%.
*/
/*
  LA ESCALA DEPENDE DEL ANCHO DE LA PANTALLA. Un 90% parejo se seguia viendo gigante en el monitor
  de Manuel (Acer K192HQL, 1366x768): en una pantalla chica cabe mucho menos. Medido en Firefox a
  1366: 0.8 queda parejo; 0.75 ya deja los IMEI de la lista demasiado chicos.

  "QUE NO SEA DE DEDO" Y NO "CON RATON". La primera version pedia (hover: hover) y (pointer: fine), y
  asi Firefox la ignoraba entera cuando el navegador no reportaba raton: la pantalla de Manuel siguio
  al 100%. Se excluye solo lo que de verdad es de dedo (pointer: coarse: telefonos y tabletas), que es
  lo unico que no se debe achicar -- ahi los botones tienen que medir un dedo.
*/
/*
  Y EL CONTENIDO DE MENUS Y LETREROS, CON LA MISMA ESCALA. A tamaño completo, en una pantalla de 1366
  el menu de Cuenta ya no cabia de alto y los ultimos renglones (Servidor, Cerrar sesion) quedaban
  cortados. Se achica lo de ADENTRO -- la lista del menu, el texto del letrero --, NUNCA la caja que
  MUI acomoda: esa se posiciona con top/left y, achicada, se correria igual que con el zoom en html.
  Las ventanitas (Dialog) se quedan a su tamaño: su caja tiene ancho fijo y achicar solo el contenido
  dejaria un hueco a la derecha.

  .avlmx-escala: el contenido de las ventanitas propias que se cuelgan de body (el calendario de
  Fletes, CampoFechaHora). Misma regla: se achica lo de adentro, nunca la caja que MUI acomoda.
*/
@media (min-width: 1024px) and (not (pointer: coarse)) {
  #root,
  .MuiMenu-list,
  .MuiAutocomplete-listbox,
  .MuiTooltip-tooltip,
  .avlmx-escala {
    zoom: 0.8;
  }
}

@media (min-width: 1440px) and (not (pointer: coarse)) {
  #root,
  .MuiMenu-list,
  .MuiAutocomplete-listbox,
  .MuiTooltip-tooltip,
  .avlmx-escala {
    zoom: 0.85;
  }
}

@media (min-width: 1800px) and (not (pointer: coarse)) {
  #root,
  .MuiMenu-list,
  .MuiAutocomplete-listbox,
  .MuiTooltip-tooltip,
  .avlmx-escala {
    zoom: 0.9;
  }
}

.root {
  display: flex;
  flex-direction: column;
  height: 100%;
}

@media print {
  * {
    height: auto !important;
    overflow: visible !important;
  }
}