/**
 * css/compat.css
 * Compatibilidad entre sistemas y pantallas: iPhone/iPad (Safari), Android (Chrome), Windows y Linux (Chrome, Edge, Firefox).
 *  - Letra del sistema de cada equipo; sin zoom automático al escribir en iOS (campos de 16 px en pantallas táctiles).
 *  - Botones cómodos de tocar (44 px) en pantallas táctiles; sin retraso de doble toque.
 *  - Zonas seguras del iPhone (muesca y barra inferior) y altura real de pantalla con barras del navegador (dvh).
 *  - Ventanas emergentes que no se salen de la pantalla; tablas con desplazamiento horizontal propio.
 */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Ubuntu, Cantarell, 'Noto Sans', Arial, sans-serif;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
button,
a,
select,
label,
summary {
  touch-action: manipulation;
}
input,
select,
textarea,
button {
  font-family: inherit;
}
.theme-btn {
  bottom: calc(12px + env(safe-area-inset-bottom));
  left: calc(12px + env(safe-area-inset-left));
}
dialog {
  margin: auto;
  max-height: 92vh;
  max-height: 92dvh;
  max-width: calc(100vw - 16px);
  overflow: auto;
  overscroll-behavior: contain;
}
.scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* Pantallas táctiles: sin zoom al escribir en iOS y objetivos de toque de 44 px */
@media (pointer: coarse) {
  input,
  select,
  textarea {
    font-size: 16px;
  }
  .btn,
  button.link,
  .pill,
  .xl-chip {
    min-height: 44px;
  }
}
/* Celulares: el botón de tema no tapa los botones de abajo */
@media (max-width: 700px) {
  .theme-btn {
    bottom: calc(70px + env(safe-area-inset-bottom));
    width: 38px;
    height: 38px;
  }
}
@media print {
  .theme-btn {
    display: none;
  }
}