/* ═══════════════════════════════════════════════════════════════════════════
   MAG Ventas · TABLETA / iPAD
   Capa que se carga al final (después de skin-ventas y skin-modulos). Tres cosas:
     1) TACTO (cualquier pantalla táctil, del ancho que sea): sin zoom al tocar un campo, blancos de toque cómodos,
        sin esperas de doble toque y sin depender del mouse.
     2) TABLETA (761–1279 px): los módulos usan el ancho disponible en vez de estirar el diseño de celular.
     3) ORIENTACIÓN: vertical (iPad mini/Air/Pro en vertical) y horizontal (1024–1366 px).
   Pantalla grande con mouse y celular no cambian.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────── 1) TACTO ───────── */
@media (pointer: coarse) {
  html { -webkit-tap-highlight-color: rgba(20, 184, 166, 0.14); -webkit-text-size-adjust: 100%; }
  button, a, select, summary, label, [role=button], [onclick], input { touch-action: manipulation; }
  /* iOS/iPadOS hace zoom al enfocar un campo de menos de 16 px y la pantalla «se sube» */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]), select, textarea { font-size: 16px !important; }
  /* blancos de toque: 40 px como mínimo (Apple pide 44; los chips de filtro quedan en 40 para no ensanchar de más las filas) */
  .modal-box button, .modal-box select, .modal-box [role=button], .modal-box .btn, .modal-box a.btn,
  .modal-box input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]) { min-height: 40px; }
  .modal-box input[type=checkbox], .modal-box input[type=radio], .modal-body .check-row input[type=checkbox] { width: 22px; height: 22px; }
  .modal-head button, .modal-box .nv-cerrar-x, .modal-box [id$="-close"], .modal-box .mj-x { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .icon-btn, .avatar { width: 44px; height: 44px; }
  .topnav-item > a { padding-top: 11px; padding-bottom: 11px; }
  .tnd-col button, .tnd-col a { padding: 12px 12px; }
  /* los menús que se abrían al pasar el mouse se abren con un toque (ver tableta-ui.js) */
  @media (hover: none) {
    .topnav-item:hover .topnav-dropdown { display: none; }
    .topnav-item.tn-abierto .topnav-dropdown { display: block; }
  }
  /* los botones que solo aparecían al pasar el mouse se ven siempre */
  .ar-quitarp { opacity: 1; }
  /* barras fijas de abajo: por encima de la barra de inicio del iPad */
  #tb-barra { bottom: calc(22px + env(safe-area-inset-bottom)); }
  .nexo-fab, #nx-fab, #nx-boton { margin-bottom: env(safe-area-inset-bottom); }
}

/* ───────── 2) TABLETA ───────── */
@media (min-width: 761px) and (max-width: 1279px) {
  .topbar { padding-left: max(18px, env(safe-area-inset-left)); padding-right: max(18px, env(safe-area-inset-right)); }
  /* ventanas emergentes: aprovechan el alto del iPad */
  .modal-overlay { padding: 14px; }
  .modal-box { max-height: 94vh; }
  .modal-box.wide { max-width: min(720px, 96vw); }
  .modal-box.xwide { max-width: 96vw; max-height: 94vh; }
  .modal-body { padding: 20px 26px; }
}

/* ───────── Vista dividida en vertical (iPad mini/Air/Pro en vertical, 761–1050 px) ─────────
   Los módulos con lista + ficha (Clientes…) que en celular se vuelven «lista → ficha a pantalla completa» aquí muestran las dos a la vez. */
@media (min-width: 761px) and (max-width: 1050px) {
  #clientes-modal .cx.cx { grid-template-columns: minmax(310px, 42%) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  #clientes-modal .cx.cx > .cx-nav { grid-column: 1 / -1; }
  #clientes-modal .cx.cx > .cx-ficha { display: block; position: static; inset: auto; z-index: auto; border-radius: inherit; min-width: 0; overflow: auto; }
  #clientes-modal .fx-hero .atras { display: none !important; } #clientes-modal .fx-hero { padding-top: 22px; }
  #clientes-modal .cx-f { gap: 10px; padding: 10px 8px; } #clientes-modal .cx-f .cx-wa { font-size: 0; width: 44px; padding: 0; justify-content: center; } #clientes-modal .cx-f .cx-wa::before { content: '💬'; font-size: 1.05rem; }
}

/* ───────── Tarjetas de cifras y pestañas en tableta ───────── */
@media (min-width: 761px) and (max-width: 1050px) {
  /* 6 tarjetas = 3 + 3 (no 4 + 2); 3 tarjetas = una sola fila */
  .cl-kpis:has(> :nth-child(6):last-child), .cl-kpis:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* las barras de pestañas no se pisan: una sola fila que se desliza con el dedo */
  .modal-box .cl-tabs { display: flex !important; flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start !important; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .modal-box .cl-tabs::-webkit-scrollbar { display: none; }
  .modal-box .cl-tabs button { flex: 0 0 auto !important; width: auto !important; white-space: nowrap !important; padding-left: 14px; padding-right: 14px; }
}
@media (min-width: 761px) and (max-width: 1250px) {
  #ventas-modal .modal-box .vx-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #ventas-modal .modal-box .vx-k.hero { grid-column: 1 / -1; }
}

/* ───────── Teclado en pantalla (iPad, >760 px): la ventana se ajusta al área visible ───────── */
@media (min-width: 761px) and (pointer: coarse) {
  body.teclado .modal-overlay.open { align-items: flex-start; padding-top: 8px; padding-bottom: 8px; }
  body.teclado .modal-overlay.open .modal-box { height: auto; max-height: calc(var(--vvh, 100vh) - 16px) !important; }
  body.teclado #mensajes-modal .modal-box, body.teclado .modal-overlay.open .modal-box.full { height: calc(var(--vvh, 100vh) - 16px) !important; }
}

/* ───────── Alto real de la pantalla (iPad con barra de Safari): dvh en vez de vh ───────── */
@supports (height: 100dvh) {
  @media (min-width: 761px) and (pointer: coarse) {
    #app.visible { height: 100dvh; }
    .modal-box { max-height: 94dvh; }
    .modal-overlay .modal-box.full, #mensajes-modal .modal-box { height: 96dvh !important; max-height: 96dvh !important; }
    .modal-overlay .modal-box.xwide { max-height: 94dvh; }
  }
}