/* ════════════════════════════════════════════════════════════════════
   NV Gestor 6.1 y 6.2 · Celular y tablet (nv-movil-610.css)
   Carga al final de todos los CSS. Solo ajustes de tamaño, desborde,
   scroll de ventanas y áreas táctiles a 390, 768 y 1024 px; en PC
   (1366) no cambia nada. Usa las variables de tema existentes.
   ════════════════════════════════════════════════════════════════════ */

/* ═══ 1 · Áreas táctiles (pantallas táctiles y teléfono) ═══════════════
   Botones de cerrar ventanas, chips y segmentos: mínimo 40 px de alto en
   táctil. En PC con mouse no cambia nada. */
@media (pointer: coarse), (max-width: 768px) {
  .modal-overlay .modal-header .btn-icon,
  .modal-overlay .btn-icon[onclick*="closeModal"],
  .modal-overlay .mc-close, .modal-overlay .rv-close, .modal-overlay .bk-close,
  .modal-overlay .modal-close, .modal-overlay .nv6-x,
  .nvs6-x, .nvcf-x {
    min-width: 40px !important; min-height: 40px !important;
  }
  /* Generar lista: chips y segmentos */
  #page-generar-lista .nvh-chip,
  #page-generar-lista .nvh-seg button, #page-generar-lista [role="tablist"] button { min-height: 38px; }
  #page-generar-lista .nvh-chip { min-width: 38px; justify-content: center; }
  #page-generar-lista .nvh-seg4 button { min-height: 38px; }
  #page-generar-lista .nvh-chips.sm .nvh-chip { height: 34px; }
  #page-generar-lista .nvh-btn { min-height: 38px; }
  /* Registro de eventos y Papelera: el select ocupa todo el alto de su píldora */
  .nvev-pill, .nvpap-sort { min-height: 40px; }
  .nvev-pill select, .nvpap-sort select { align-self: stretch; min-height: 38px; }
  #nvevev-reset { min-height: 36px; }
  /* Dispositivos: filtros */
  .nveq-seg button { min-height: 38px; }
  /* Configuración: filas, enlaces y botones chicos */
  .nvcf-it { min-height: 48px; }
  .nvcf-link { min-height: 32px; padding: 0 4px; }
  .nv54-int button { min-height: 34px; }
  .nvs6-btn.is-sm { min-height: 36px; }
  /* Interruptores: área de toque invisible más grande, sin cambiar su dibujo */
  .nvcf-sw::after, .nvs6-sw::after { content: ''; position: absolute; inset: -9px -6px; }
  .nvs6-sw { position: relative; }
  /* Centro de Notificaciones: acciones rápidas de cada aviso */
  #nvav-panel .nvav-qa button { min-width: 36px; min-height: 36px; }
  #nvav-panel .nvav-itb button[data-a] { min-height: 34px; }
}

/* ═══ 2 · Copia de seguridad (teléfono) ════════════════════════════════
   En columna los botones del resumen se aplastaban a 17 px de alto
   (flex:1 dentro de una columna sin alto). */
@media (max-width: 600px) {
  #page-copias-seguridad .nvev-hero-a .nvev-btn { flex: none; width: 100%; height: auto; min-height: 42px; }
}
/* Segmentos (Todo / Solo clientes / Una plataforma): el texto ya no se corta */
@media (max-width: 1180px) {
  #page-copias-seguridad .nvev-seg button { white-space: normal; height: auto; min-height: 34px; line-height: 1.15; padding: 6px; text-overflow: clip; }
}

/* ═══ 3 · Ventana "Mi Perfil" (modal-my-profile, sin estilos propios) ═══ */
#modal-my-profile { align-items: center; justify-content: center; padding: 16px; }
#modal-my-profile .modal-box {
  display: flex; flex-direction: column; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
  background: var(--bg2); color: var(--text); border: 1px solid var(--border2, var(--border)); border-radius: 18px;
  box-shadow: 0 24px 64px rgba(0,0,0,.5); overflow: hidden; box-sizing: border-box;
}
#modal-my-profile .modal-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
#modal-my-profile .modal-header h3 { margin: 0; font-size: 16px; }
#modal-my-profile .modal-body { overflow-y: auto; overscroll-behavior: contain; flex: 1; min-height: 0; }
#modal-my-profile .form-input { display: block; box-sizing: border-box; min-height: 42px; padding: 0 12px; border-radius: 11px; border: 1px solid var(--border2, var(--border)); background: var(--bg); color: var(--text); font: inherit; font-size: 14px; }
#modal-my-profile .form-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--nv-accent-rgb, 99,102,241), .2); }
#modal-my-profile .modal-footer { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 18px; border-top: 1px solid var(--border); flex-shrink: 0; }
@media (max-width: 600px) {
  #modal-my-profile { align-items: flex-end; padding: 0; }
  #modal-my-profile .modal-box { width: 100% !important; max-width: none !important; border-radius: 18px 18px 0 0; padding-bottom: env(safe-area-inset-bottom); }
  #modal-my-profile .modal-footer .btn { flex: 1; min-height: 44px; }
}

/* ═══ 4 · iPhone y iPad: sin zoom al tocar un campo ═════════════════════
   Safari de iOS acerca la pantalla si la letra del campo es menor de 16 px. */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 1024px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: max(16px, 1em) !important; }
  }
}

/* ═══ 5 · Ventanas: el scroll interno no arrastra la página de atrás ═══ */
@media (max-width: 1024px) {
  .modal-overlay .modal-body, .modal-overlay .modal-content, .modal-overlay .mc-body { overscroll-behavior: contain; }
}

/* ═══ 6 · Configuración en el teléfono ═════════════════════════════════
   La nota del pie ya no aprieta el botón Listo (se lee en 2 líneas). */
@media (max-width: 600px) {
  .nvcf-ov .nvcf-foot, .nvcf-ov [class*="nvcf-pie"] { gap: 10px; }
  .nvcf-ov .nvcf-foot > :first-child, .nvcf-ov [class*="nvcf-pie"] > :first-child { font-size: 11px; line-height: 1.35; min-width: 0; }
}

/* ═══ 7 · Entrega Automática (capa de entrega61) en táctil ═════════════ */
@media (pointer: coarse), (max-width: 768px) {
  #nve-ov .nve-x { min-width: 40px; min-height: 40px; }
  #nve-ov #nve-apb { min-height: 36px; }
  #nve-ov .nve-chip { min-height: 34px; }
  #nve-ov [role="radiogroup"] button, #nve-ov [role="tablist"] button { min-height: 36px; }
}

/* ═══ 8 · Reportar caída: botones Ver y Marcar resuelta (táctil) ════════ */
@media (pointer: coarse), (max-width: 768px) {
  #page-reportar-caida .nvk-btn { min-height: 36px; }
}

/* ═══ 9 · Segunda pasada sobre las capas 6.1 (táctil) ══════════════════ */
@media (pointer: coarse), (max-width: 768px) {
  /* Cortes y Vencimientos (cobros61): el select de Agrupar ocupa toda su píldora;
     el nombre del cliente tiene un área de toque más alta sin mover la fila */
  .nvco .nvco-gsel select { align-self: stretch; }
  .nvco-nm { padding-block: 7px; margin-block: -7px; }
  /* Reposición (cuentas61) */
  #page-nv-reposicion .nvrp-btn, #page-nv-reposicion .nvrp-go, #page-nv-reposicion .nvrp-bank-c, #nvrp-ir-caidas { min-height: 36px; }
  /* Balance */
  #page-precios .nvf-btn { min-height: 36px; }
}

/* ═══ 10 · Clientes y Plataformas (vistas61) en el teléfono ═════════════
   Los chips de filtro y la fila de orden crecían más que la pantalla
   (el botón de lista/tarjetas y el filtro de responsable quedaban fuera).
   Ahora ocupan el ancho y los chips se deslizan de lado. */
@media (max-width: 768px) {
  .nv61-fl > .nv61-chips, .nv61-fl > .nv61-opts { width: 100%; max-width: 100%; box-sizing: border-box; }
  .nv61-opts .nv61-sel, .nv61-opts .nv61-sel select { min-width: 0; }
}
@media (pointer: coarse), (max-width: 768px) {
  .nv61-seg button { min-height: 36px; }
  .nv61-sel select { align-self: stretch; }
  .nv61-pw button { min-width: 34px; min-height: 34px; }
  .nv61-nm { padding-block: 7px; margin-block: -7px; }
}

/* ═══ 11 · Panel (extras61): tablas chicas dentro de tarjetas ═══════════
   mobile.css le da a toda tabla 560 px de ancho mínimo; en las tarjetas
   del Panel eso la sacaba de la pantalla. */
@media (max-width: 768px) {
  .nvx-tb { min-width: 0 !important; }
}

/* ═══ 12 · Ventanas de siempre: botones chicos ═════════════════════════ */
@media (pointer: coarse), (max-width: 768px) {
  /* Perfil liberado (después de cortar): copiar correo, clave y PIN */
  #modal-post-corte button[onclick^="postCorteCopiar"] { width: 32px !important; height: 32px !important; }
  /* Editar cliente: flecha de la lista de responsables */
  #modal-quick-edit button[onclick^="toggleQEResponsableDropdown"] { width: 32px !important; height: 32px !important; right: 3px !important; }
  /* Enviar datos: copiar contacto */
  #modal-send .nvm-mini { min-width: 36px; min-height: 36px; }
}
/* Ficha del cliente: 5 botones en el pie no caben en 520 px (el texto se
   cortaba también en PC). Ahora bajan a otra línea y se reparten el ancho. */
#modal-view-client .modal-footer { flex-wrap: wrap; }
#modal-view-client .modal-footer .btn { flex: 1 1 auto; min-width: max-content; justify-content: center; }

/* ═══ 13 · Ventanas de extras61 y Cierre de caja (táctil) ═══════════════
   Área de toque invisible alrededor de puntos y casillas, sin cambiar su dibujo. */
@media (pointer: coarse), (max-width: 768px) {
  .nvx-dots button, .nvx-chk { position: relative; }
  .nvx-dots button::after { content: ''; position: absolute; inset: -14px -6px; }
  .nvx-chk::after { content: ''; position: absolute; inset: -8px; }
  .nvcj-x { min-width: 40px; min-height: 40px; width: auto !important; }
  .nve-lnk { padding-block: 8px; margin-block: -8px; }
}

/* ═══ 14 · Pasada 6.2: capas envios62, editar62 y panel62 (táctil) ══════
   Botones de copiar e iconos de 24 a 28 px de ancho: 36 px en táctil.
   Sin cambiar su dibujo en PC con mouse. */
@media (pointer: coarse), (max-width: 768px) {
  /* Cortar (nv-envios-620): copiar cuenta y contraseña */
  .nve-ic { min-width: 36px; min-height: 36px; }
  /* Editar cliente (editar62): botones de icono de los campos */
  .nv6-ib { min-width: 34px; }
  /* Editar cuenta, perfil individual y Agregar cuenta (nv-editar-620) */
  .nved-ib { min-width: 36px; min-height: 36px; }
  .nva-step button { min-width: 36px; min-height: 36px; }
  #modal-account button[onclick^="swapSlots"] { width: 28px !important; min-height: 32px; }
  /* Agregar cliente: flecha de la lista de responsables */
  #modal-client button[onclick^="toggleResponsableDropdown"] { width: 32px !important; height: 32px !important; right: 3px !important; }
  /* Configuración > Entrega Automática: enlace "Ver" */
  .nve-lnk { min-width: 36px; display: inline-flex; align-items: center; justify-content: center; }
  /* Balance: "Ver las plataformas en la tabla" */
  #page-precios .nvf-link { min-height: 34px; }
}