/* ═══════════════════════════════════════════
   DEXLOW HUB — Capa responsiva global
   Corrige inline-styles que no tienen media queries
   ═══════════════════════════════════════════ */

/* ── Alto real en móvil (evita que el teclado rompa el layout) ── */
:root {
  --app-h: 100dvh;
}
@supports not (height: 100dvh) {
  :root { --app-h: -webkit-fill-available; }
}

/* ── Eliminar delay táctil de 300ms en toda la app ── */
button, a, input, select, textarea, [role="button"], label {
  touch-action: manipulation;
}

/* ── Evitar zoom en iOS al hacer focus en inputs (requiere font-size >= 16px) ── */
input, select, textarea {
  font-size: max(16px, 1em) !important;
}

/* ── Tablas: scroll horizontal en móvil ── */
table {
  min-width: 100%;
}
.table-wrap, [style*="overflow"][style*="auto"] {
  -webkit-overflow-scrolling: touch;
}

/* ── Modales: nunca más altos que la pantalla ── */
[style*="position:fixed"], [style*="position: fixed"] {
  max-height: var(--app-h);
}

/* ── Contenedores internos de modales ── */
[style*="maxWidth"][style*="overflow"] {
  max-height: 90dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Texto: nunca menor a 12px en ningún dispositivo ── */
* {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ══ MOBILE ≤ 640px ══════════════════════════════ */
@media (max-width: 640px) {

  /* Reducir padding de secciones grandes */
  [style*="padding:24px"], [style*="padding: 24px"] {
    padding: 14px !important;
  }

  /* Tablas: scroll horizontal forzado */
  div:has(> table) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Botones: mínimo 44px de alto (área táctil recomendada) */
  button {
    min-height: 40px;
  }

  /* Grids de stats: 2 columnas en móvil */
  [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Encabezados: no desbordarse */
  h1, h2, h3 {
    word-break: break-word;
    hyphens: auto;
  }

  /* Modales: ocupar ancho completo */
  [style*="maxWidth:420"], [style*="maxWidth: 420"],
  [style*="maxWidth:460"], [style*="maxWidth: 460"],
  [style*="maxWidth:500"], [style*="maxWidth: 500"],
  [style*="maxWidth:540"], [style*="maxWidth: 540"],
  [style*="maxWidth:600"], [style*="maxWidth: 600"],
  [style*="maxWidth:620"], [style*="maxWidth: 620"] {
    max-width: calc(100vw - 24px) !important;
    width: 100% !important;
  }

  /* Flex rows que se rompen en mobile → columna */
  [style*="display:flex"][style*="gap"] {
    flex-wrap: wrap;
  }
}

/* ══ MOBILE ≤ 400px (pantallas muy pequeñas) ════ */
@media (max-width: 400px) {

  /* Tipografía base más pequeña */
  body { font-size: 14px; }

  p, span, div, td, th, li, label { font-size: 13px; }

  button { font-size: 13px; }

  /* Padding mínimo en tarjetas */
  [style*="padding:20px"], [style*="padding: 20px"] {
    padding: 12px !important;
  }
  [style*="padding:16px"], [style*="padding: 16px"] {
    padding: 10px !important;
  }
}

/* ══ TABLET 641px – 1024px ═══════════════════════ */
@media (min-width: 641px) and (max-width: 1024px) {

  /* Grids de 4 columnas → 2 en tablet */
  [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ══ PRINT ═══════════════════════════════════════ */
@media print {
  nav, .np, [class*="np"] { display: none !important; }
}