/* ============ INVENTORY SCREEN ============ */
.inv-table { width: 100%; border-collapse: collapse; }
.inv-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }

/* ── Responsive inventory — v124 ───────────────────────────────────────── */

/* ── Tablet (≤768px) ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .data-table { font-size: 11px; }

  /* KPI grid 3-col → 2-col */
  #app .screen-content div[style*="grid-template-columns:1fr 1fr 1fr"],
  #app .screen-content div[style*="grid-template-columns: 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ── Teléfono (≤600px) ───────────────────────────────────────────────────── */
@media (max-width: 600px) {
  /* Inventory header title + buttons: stack vertically */
  #app .screen-content > div[style*="justify-content:space-between"][style*="margin-bottom:20px"],
  #app .screen-content > div[style*="justify-content: space-between"][style*="margin-bottom: 20px"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  /* Action buttons row → full width, each button fills 50% */
  #app .screen-content > div[style*="justify-content:space-between"][style*="margin-bottom:20px"] > div[style*="display:flex"],
  #app .screen-content > div[style*="justify-content:space-between"][style*="margin-bottom:20px"] > div[style*="display: flex"] {
    width: 100% !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  #app .screen-content > div[style*="justify-content:space-between"][style*="margin-bottom:20px"] .btn {
    flex: 1 !important;
    justify-content: center !important;
    min-width: 120px !important;
  }

  /* Filter bar: force selects to fill row */
  #app .card-body .form-select[style*="width:180px"],
  #app .card-body .form-select[style*="width: 180px"],
  #app .card-body .form-select[style*="width:160px"],
  #app .card-body .form-select[style*="width: 160px"] {
    width: 100% !important;
    min-width: 0 !important;
    flex: 1 0 calc(50% - 6px) !important;
  }

  /* Export/Import/Lote buttons: wrap and compress */
  #app .card-body > div[style*="display:flex"][style*="gap:6px"] {
    flex-wrap: wrap !important;
    width: 100% !important;
  }
  #app .card-body > div[style*="display:flex"][style*="gap:6px"] .btn-sm {
    flex: 1 !important;
    justify-content: center !important;
    font-size: 11px !important;
    padding: 6px 4px !important;
  }

  /* Table: compact */
  .data-table { font-size: 10px; }
  .data-table th, .data-table td { padding: 4px 6px !important; white-space: nowrap; }

  /* KPI cards: reduce padding */
  .kpi-card { padding: 12px 10px !important; }
  .kpi-value { font-size: 24px !important; }
  .kpi-icon { font-size: 20px !important; }
}

/* ── Teléfono pequeño (≤480px) ──────────────────────────────────────────── */
@media (max-width: 480px) {
  /* KPI grid 2-col → 1-col (los 3 KPI uno bajo otro) */
  #app .screen-content div[style*="grid-template-columns:1fr 1fr 1fr"],
  #app .screen-content div[style*="grid-template-columns: 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .kpi-value { font-size: 22px !important; }

  /* Pagination bar: stack */
  #inv-pagination-bar {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    padding: 8px 12px !important;
  }
  #inv-pag-btns { flex-wrap: wrap !important; gap: 3px !important; }
  #inv-pag-btns .btn { font-size: 11px !important; padding: 4px 8px !important; min-height: 32px !important; }
}