/* 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; }
  .sidebar{
    width:100%; height:auto; position:sticky; top:0; z-index:30;
    flex-direction:row; align-items:center; box-shadow:0 2px 10px rgba(0,0,0,.25);
  }
  .brand{ display:none; }
  nav.tabs{
    display:flex; flex-direction:row; flex:1; padding:6px 4px;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
  }
  nav.tabs button{
    flex:0 0 auto; width:auto; display:flex; flex-direction:column; align-items:center; gap:4px;
    white-space:nowrap; font-size:10.5px; padding:8px 12px; margin-bottom:0; margin-right:2px;
    min-width:60px;
  }
  nav.tabs button .label-text{ display:block; }
  nav.tabs button .chip{ width:9px; height:9px; }
  .mobile-more-btn{
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    width:40px; height:40px; margin-right:8px; background:none; border:1px solid rgba(255,255,255,.25);
    color:#e8e4d8; font-size:18px; border-radius:6px; cursor:pointer;
  }
  .sidebar-foot{ display:none; }

  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; }

  .btn{ min-height:40px; }
  .row-actions button{ padding:6px 9px; font-size:14px; }
}

@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; }
}