/* ==========================================================================
   css/movil.css — experiencia móvil de todo el sistema (se carga al final del <head>).
   Patrón: encabezado compacto en cuadrícula · barra de módulos en una sola fila
   deslizable (con "Herramientas" como lista que se abre a todo el ancho) · pestañas y
   filtros en una línea con scroll horizontal · objetivos táctiles de 40–44 px.
   La barra lateral (≤ 900 px) vive en global.css (panel que se abre encima).
   ========================================================================== */
@media (max-width: 640px) {
  :root { --movil-pad: 12px; }
  html { -webkit-text-size-adjust: 100%; }
  body { overflow-x: hidden; }
  /* El contenido es una columna flex con scroll: sin esto las filas con overflow se aplastan */
  .app-main > * { flex-shrink: 0; }
  .app-main { padding: var(--movil-pad) var(--movil-pad) calc(var(--movil-pad) + env(safe-area-inset-bottom)); }

  /* ---------- Encabezado: marca + perfil · selectores · buscador ---------- */
  .app-header {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
    column-gap: 10px; row-gap: 8px; height: auto; min-height: 0; padding: 10px var(--movil-pad) 12px;
  }
  .header-left { display: contents; }
  .logo-container { grid-column: 1; grid-row: 1; height: auto; }
  /* Solo el isotipo: se oculta el logo completo y se muestra el icono */
  .logo-container { width: 30px; height: 30px; }
  .logo-img { display: none; }
  .logo-container::before { content: ""; display: block; width: 30px; height: 30px; background: url("../logos/LOGO_GP_isotipo.png") center / contain no-repeat; }
  .logo-text { grid-column: 2; grid-row: 1; min-width: 0; }
  .logo-text h1 { font-size: 15px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .logo-text p, .header-divider, .mes-objetivo-container { display: none; }
  .header-right { grid-column: 3; grid-row: 1; gap: 6px; }
  .user-profile-name, .user-profile-role, .user-profile-info { display: none; }
  .user-profile-badge { padding: 2px; gap: 2px; }
  .alerts-bell-btn { width: 40px; height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }

  .categoria-selector-container { grid-column: 1 / 3; grid-row: 2; min-width: 0; }
  .categoria-selector-btn { width: 100%; height: 40px; min-width: 0; }
  .year-stepper-container { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
  .categoria-selector-container ~ .year-stepper-container { grid-column: 3; justify-self: end; }
  .year-stepper-container { height: 40px; }
  .btn-year-step { min-width: 36px; min-height: 36px; }
  .search-container { grid-column: 1 / -1; grid-row: 3; margin: 0; max-width: none; }
  .search-input { height: 42px; box-sizing: border-box; padding-top: 0; padding-bottom: 0; }

  /* ---------- Barra de módulos: una sola fila deslizable ---------- */
  .modules-nav-row {
    display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; overflow-x: auto; overflow-y: hidden;
    margin: 0 calc(var(--movil-pad) * -1) 14px; padding: 2px var(--movil-pad) 6px;
    scrollbar-width: none; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  }
  .modules-nav-row::-webkit-scrollbar { display: none; }
  .modules-nav { flex: none; width: auto; max-width: none; margin: 0; padding: 3px; gap: 2px; box-shadow: none; scroll-snap-align: start; }
  .modules-nav:first-of-type { width: auto; }
  .modules-nav:first-of-type .module-nav-btn { flex: none; }
  .module-nav-btn { min-height: 40px; padding: 0 14px; font-size: 13.5px; white-space: nowrap; }
  .categoria-tipos-hint { display: none !important; }
  /* "Herramientas": la lista se abre a todo el ancho, sin quedar recortada por el scroll */
  .modules-nav-tools-menu { position: fixed; left: var(--movil-pad); right: var(--movil-pad); top: auto; width: auto; max-width: none; }
  .modules-nav-tools-menu .dropdown-item { min-height: 46px; font-size: 14px; }

  /* ---------- Pestañas de estado y chips: una línea con scroll ---------- */
  .status-tabs { flex-wrap: nowrap; gap: 8px; overflow-x: auto; margin: 0 calc(var(--movil-pad) * -1) 14px; padding: 2px var(--movil-pad) 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .status-tabs::-webkit-scrollbar { display: none; }
  .status-tab-btn { flex: none; min-height: 40px; white-space: nowrap; }
  #gv-status-tabs.status-tabs { margin: 0 calc(var(--movil-pad) * -1) 14px; padding: 2px var(--movil-pad) 4px; }

  /* ---------- Gestión de Venta: barra de filtros compacta ---------- */
  .gv-toolbar { padding: 8px; gap: 8px; }
  .gv-toolbar .gv-search-bar { flex: 1 1 100%; }
  .gv-alcance-group { order: 1; }
  .gv-toolbar .gv-fbtn { order: 2; flex: 1 1 0; justify-content: center; }
  .gv-toolbar #gv-f-solicitudes, .gv-toolbar #gv-f-reporte { order: 3; flex: none; padding: 0 12px; }
  .gv-toolbar #gv-f-solicitudes > span:not(.count), .gv-toolbar #gv-f-reporte > span { display: none; }
  .gv-toolbar .view-toggle-group { order: 4; flex: none; }
  .gv-alcance-nota { margin: 0 2px 10px; }

  /* ---------- Tarjetas, listas y formularios ---------- */
  .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .table-wrapper { -webkit-overflow-scrolling: touch; }
  .form-input, .form-select, .search-input, input, select, textarea { font-size: 16px; }
  .form-input, .form-select { min-height: 44px; }
  .dialog-card { max-width: calc(100vw - 16px); }
  .toast-container { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); }
  .toast { max-width: none; }
}

/* Teléfonos muy angostos (≤ 360 px) */
@media (max-width: 360px) {
  .logo-img { height: 20px; }
  .module-nav-btn { padding: 0 11px; font-size: 13px; }
  .rend-controls .rend-seg button { font-size: 12px; }
}

/* Reactivados: filtros apilados */
@media (max-width: 640px) {
  .react-toolbar { flex-wrap: wrap; }
  .react-toolbar > * { flex: 1 1 100%; width: 100% !important; }
}

/* Gestión de Venta: una sola fila de acciones y sin la pista de arrastrar (no aplica al tacto) */
@media (max-width: 640px) {
  .gv-toolbar .gv-fbtn { padding: 0 10px; }
  .gv-toolbar .gv-fbtn .caret { display: none; }
  .gv-toolbar #gv-f-solicitudes, .gv-toolbar #gv-f-reporte { padding: 0 10px; }
  .gv-toolbar .view-toggle-group .view-mode-btn { min-width: 36px; padding: 0 6px; }
  .gv-results-hint { display: none; }
}