/* ============================================================
   VIRAMONT — Ajustes para celulares y tablets
   Compartido por todas las páginas. Solo actúa en pantallas táctiles
   o de menos de 900 px: el escritorio no cambia.
   ============================================================ */

/* Imágenes y selectores nunca más anchos que su espacio (el texto de una opción larga ensanchaba la fila) */
@media (max-width: 900px) {
  img, video, canvas, iframe { max-width: 100%; }
  select { max-width: 100%; min-width: 0; }
}

/* Ventanas emergentes: si son más altas que la pantalla se desplazan, sin cortar la parte de arriba */
@media (max-width: 900px) {
  #dc-root div[style*="position: fixed"][style*="inset: 0"] { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  #dc-root div[style*="position: fixed"][style*="inset: 0"][style*="align-items: center"] { align-items: flex-start !important; }
  #dc-root div[style*="position: fixed"][style*="inset: 0"][style*="align-items: center"] > * { margin-top: auto !important; margin-bottom: auto !important; flex-shrink: 0; }
}

/* iPhone hace zoom al tocar un campo con letra menor a 16 px: en pantallas táctiles los campos usan 16 px */
@media (max-width: 900px) and (pointer: coarse) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([style*="font-size"]),
  select:not([style*="font-size"]), textarea:not([style*="font-size"]),
  input[style*="font-size: 9"], input[style*="font-size: 10"], input[style*="font-size: 11"], input[style*="font-size: 12"],
  input[style*="font-size: 13"], input[style*="font-size: 14"], input[style*="font-size: 15"],
  select[style*="font-size: 9"], select[style*="font-size: 10"], select[style*="font-size: 11"], select[style*="font-size: 12"],
  select[style*="font-size: 13"], select[style*="font-size: 14"], select[style*="font-size: 15"],
  textarea[style*="font-size: 9"], textarea[style*="font-size: 10"], textarea[style*="font-size: 11"], textarea[style*="font-size: 12"],
  textarea[style*="font-size: 13"], textarea[style*="font-size: 14"], textarea[style*="font-size: 15"] { font-size: 16px !important; }
}

/* Toques cómodos: botones y campos con alto mínimo de 40 px */
@media (max-width: 900px) and (pointer: coarse) {
  button, select, input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]) { min-height: 40px; }
  button { touch-action: manipulation; }
  a, button, [role=button] { -webkit-tap-highlight-color: rgba(31, 79, 208, .15); }
  /* Enlaces de los menús de navegación: área de toque de 40 px (los enlaces dentro de un texto no cambian) */
  nav a, #vrm-global-nav a, #vrm-global-nav summary { min-height: 40px; display: inline-flex; align-items: center; }
}

/* Textos muy chicos (9–10,5 px) se leen sin hacer zoom */
@media (max-width: 600px) {
  #dc-root [style*="font-size: 9px"], #dc-root [style*="font-size: 9.5px"],
  #dc-root [style*="font-size: 10px"], #dc-root [style*="font-size: 10.5px"] { font-size: 11px !important; }
}

/* La barra del sitio (Lubricentro · Tienda · TOLEDO · Ingresar) no queda fija arriba en el celular:
   se ve al entrar y se va al desplazar, para dejar la pantalla al contenido */
@media (max-width: 900px) {
  #vrm-global-nav { position: relative !important; }
}

/* Red de seguridad: nada empuja la página de lado (las tablas anchas se deslizan dentro de su caja) */
@media (max-width: 900px) {
  html, body { max-width: 100%; overflow-x: clip; }
}