/* Responsive: mobile, grid y estilos de impresion */
@media (max-width:900px){ .grid-2{ grid-template-columns:1fr; } }

@media (max-width:760px){
  #app{ flex-direction:column; }

  /* Fondo blanco puro en celulares — solo DENTRO de la app. El login no se
     ve afectado: .login-screen es position:fixed con su propio fondo y se
     dibuja por encima de todo esto. En escritorio sigue el gris papel
     (--paper) de siempre, que a esa distancia de pantalla descansa más la
     vista; en un celular, al sol o con brillo bajo, ese gris se ve sucio y
     resta contraste al texto. */
  #app, #app main{ background:#ffffff; }

  /* El sidebar completo (logo, menú, y el pie con backup/logout) ahora entra
     deslizando desde la izquierda -- reemplaza la barra horizontal de antes. */
  .sidebar{
    position:fixed; top:0; left:0; height:100vh; width:82%; max-width:300px;
    z-index:200; transform:translateX(-100%); transition:transform .28s ease;
    flex-direction:column; box-shadow:2px 0 24px rgba(0,0,0,.4);
  }
  .sidebar.mobile-open{ transform:translateX(0); }
  .sidebar-backdrop{
    display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:190;
  }
  .sidebar-backdrop.is-visible{ display:block; animation:fade .2s ease; }

  .brand{ display:block; }
  nav.tabs{ display:block; overflow-x:hidden; overflow-y:auto; resize:none; }
  nav.tabs button{ width:100%; flex-direction:row; white-space:normal; font-size:13px; padding:9px 10px; }
  nav.tabs button .label-text{ display:inline; }

  /* Los botones "más opciones" / logout sueltos de la barra superior ya no
     hacen falta -- el pie del sidebar completo (con esos mismos botones)
     ahora es accesible deslizando el menú. Se dejan sus handlers de JS
     intactos por las dudas, solo se ocultan visualmente acá. */
  .mobile-more-btn, .mobile-logout-btn{ display:none; }
  .sidebar-foot{ display:block; }

  main{ padding:16px 14px 40px; }
  .view-head{ flex-direction:column; align-items:stretch; }
  .view-head .btn{ width:100%; }

  .kpi-row{ grid-template-columns:repeat(2,1fr); }

  /* tablas: scroll horizontal en vez de aplastarse */
  #prodTableWrap, #cliTableWrap, #lowStockTable, .receipt, .modal table.data{
    overflow-x:auto; -webkit-overflow-scrolling:touch;
  }
  table.data{ min-width:640px; }

  /* formularios: una columna, inputs sin zoom automático de iOS (16px) */
  .field-row{ grid-template-columns:1fr; }
  .field input, .field select, .field textarea,
  .search-row input, .search-row select,
  input.cell-edit, .line-item input, .line-item select{ font-size:16px; }

  .modal{ padding:18px 16px; max-width:100%; width:100%; border-radius:12px 12px 0 0; max-height:92vh; overflow-y:auto; margin-bottom:0; }
  .overlay{ padding:0; align-items:flex-end; }

  /* línea de producto en Ventas: apilada en 2 filas en vez de 5 columnas */
  .line-item{
    display:grid; grid-template-columns:1fr 1fr 1fr; grid-template-rows:auto auto;
    column-gap:8px; row-gap:6px; padding:10px;
  }
  .line-item > *:nth-child(1){ grid-column:1 / 4; font-size:13.5px; }
  .line-item > *:nth-child(2){ grid-column:1; }
  .line-item > *:nth-child(3){ grid-column:2; }
  .line-item > *:nth-child(4){ grid-column:3; font-size:13px; }
  .line-item > *:nth-child(5){ grid-column:1/4; justify-self:end; font-size:20px; padding:2px 10px; }

  /* HOTFIX — botones principales a 44×44px mínimo (Android/iOS lo piden
     para que un dedo los toque bien) sin tocar el tamaño en escritorio,
     que queda regido por las reglas de más arriba (fuera de este media query). */
  .btn, .btn.small, button.btn, .row-actions button, .modal-actions button,
  #btnMobileMore, #btnMobileLogout, .mobile-more-btn, .mobile-logout-btn,
  nav.tabs button{
    min-height:44px; min-width:44px;
  }
  .row-actions button{ padding:8px 11px; font-size:15px; }

  /* Login en mobile: ancho fijo ~80% del disponible, centrado, sin exceso de zoom/escalado. */
  .login-card{ width:80%; max-width:340px; padding:26px 22px; }
}

/* Evita que iOS/Android re-escalen el texto solos al rotar pantalla o volver de segundo plano —
   es una causa común del "zoom exagerado" que se ve al reabrir la app. */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
html, body{ overflow-x:hidden; overflow-y:visible; max-width:100vw; }

/* Soporte de área segura para iPhone con notch/Dynamic Island — no cambia el layout en
   dispositivos sin notch, env() devuelve 0px en esos casos. */
.sidebar{ padding-top:env(safe-area-inset-top); }
.sidebar-foot{ padding-bottom:calc(16px + env(safe-area-inset-bottom)); }
.login-screen{ padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom); }

@media print{
  body *{ visibility:hidden; }
  .print-area, .print-area *{ visibility:visible; }
  .print-area{ position:absolute; top:0; left:0; width:100%; }
  .no-print{ display:none !important; }
}