/* =============================================
   RESPONSIVE — Smartphone
============================================= */
@media (max-width: 768px) {
  /* Layout base */
  .app-content { padding: 12px 10px 90px; }   /* padding-bottom deja espacio al bottom nav */
  .login-card  { padding: 32px 24px; margin: 16px; }
  .app-navbar  { padding: 0 10px; }

  /* Ocultar tabs horizontales en móvil — reemplazadas por bottom nav */
  .app-tabs { display: none !important; }

  /* ─── BOTTOM NAVIGATION BAR ─── */
  .bottom-nav {
    display: flex !important;
  }

  /* ─── TABLAS → CARDS en móvil ─── */
  .tbl-cot thead { display: none; }
  .tbl-cot tbody tr {
    display: block;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    margin-bottom: 10px;
    padding: 12px 14px;
    border: 1px solid var(--border);
  }
  .tbl-cot tbody td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 5px 0;
    border: none;
    font-size: 13px;
    gap: 8px;
  }
  /* ::before labels definidos por nth-child más abajo */
  /* Fila vacía: centrar el empty-state */
  .tbl-cot tbody tr#trVacio {
    box-shadow: none;
    border: none;
    background: transparent;
    padding: 0;
  }
  .tbl-cot tbody tr#trVacio td {
    justify-content: center;
  }
  .tbl-cot tbody tr#trVacio td::before { display: none; }

  /* ─── STICKY BOTÓN GENERAR ─── */
  .sticky-generar-wrapper {
    display: block !important;
  }
  /* Ocultar botón generar inline en móvil */
  .generar-inline { display: none !important; }

  /* ─── AGREGAR PRODUCTO — layout simplificado ─── */
  .row.g-3.align-items-end { gap: 10px 12px !important; }

  /* ─── TOTALES BOX — más compacto ─── */
  .totales-box { font-size: 14px; }
  .tot-row { padding: 8px 0; }

  /* ─── MODALS → BOTTOM SHEET ─── */
  .modal-dialog {
    margin: 0 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .modal-content {
    border-radius: 20px 20px 0 0 !important;
    border: none !important;
    max-height: 90vh;
    overflow-y: auto;
  }
  .modal.fade .modal-dialog {
    transform: translateY(100%);
  }
  .modal.show .modal-dialog {
    transform: translateY(0);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  }
  /* Drag handle visual */
  .modal-content::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: #ddd;
    border-radius: 2px;
    margin: 8px auto 0;
  }
}

@media (max-width: 768px) {
  .csv-import-modal { max-height: 92vh !important; }
  .csv-import-header { padding: 15px 18px; }
  .csv-import-body { padding: 14px; }
  .csv-import-intro { align-items: stretch; flex-direction: column; gap: 10px; }
  .csv-import-intro .btn { width: 100%; }
  .csv-drop-zone { min-height: 132px; }
  .csv-import-stats { grid-template-columns: repeat(2, 1fr); }
  .csv-table-scroll { max-height: 220px; }
  .csv-import-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 12px 14px;
  }
  .csv-import-footer .btn { margin: 0; width: 100%; }
  .csv-import-footer .btn-primary { grid-column: 1 / -1; }
}

/* ─── DATA-LABELS por columna (card-view móvil, mayor especificidad que .tbl-cot) ─── */
@media (max-width: 768px) {
  /* Estilo compartido de los pseudo-labels */
  #cuerpoCot    tr td::before,
  #cuerpoHistorial tr td::before,
  #tbodyUsuarios   tr td::before,
  #tbodyInvKardex  tr td::before {
    font-weight: 700; color: var(--muted);
    font-size: 11px; text-transform: uppercase;
    letter-spacing: 0.5px; flex: 0 0 90px; padding-top: 1px;
  }
  /* Tabla cotización */
  #cuerpoCot tr td:nth-child(1)::before { content: "Código"; }
  #cuerpoCot tr td:nth-child(2)::before { content: "Descripción"; }
  #cuerpoCot tr td:nth-child(3)::before { content: "Cant."; }
  #cuerpoCot tr td:nth-child(4)::before { content: "Precio Uni."; }
  #cuerpoCot tr td:nth-child(5)::before { content: "Subtotal"; }
  #cuerpoCot tr td:nth-child(6)::before { content: ""; flex: 0 0 0px; }
  /* Tabla historial */
  #cuerpoHistorial tr td:nth-child(1)::before { content: "N° Cot."; }
  #cuerpoHistorial tr td:nth-child(2)::before { content: "Fecha"; }
  #cuerpoHistorial tr td:nth-child(3)::before { content: "Cliente"; }
  #cuerpoHistorial tr td:nth-child(4)::before { content: "Neto"; }
  #cuerpoHistorial tr td:nth-child(5)::before { content: "Total"; }
  #cuerpoHistorial tr td:nth-child(6)::before { content: "Estado"; }
  #cuerpoHistorial tr td:nth-child(7)::before { content: ""; flex: 0 0 0px; }
  /* Tabla usuarios */
  #tbodyUsuarios tr td:nth-child(1)::before { content: "Usuario"; }
  #tbodyUsuarios tr td:nth-child(2)::before { content: "Nombre"; }
  #tbodyUsuarios tr td:nth-child(3)::before { content: "Rol"; }
  #tbodyUsuarios tr td:nth-child(4)::before { content: "Estado"; }
  #tbodyUsuarios tr td:nth-child(5)::before { content: ""; flex: 0 0 0px; }
  /* Tabla kardex */
  #tbodyInvKardex tr td:nth-child(1)::before { content: "Fecha"; }
  #tbodyInvKardex tr td:nth-child(2)::before { content: "Artículo"; }
  #tbodyInvKardex tr td:nth-child(3)::before { content: "Tipo"; }
  #tbodyInvKardex tr td:nth-child(4)::before { content: "Cantidad"; }
  #tbodyInvKardex tr td:nth-child(5)::before { content: "Saldo"; }
  #tbodyInvKardex tr td:nth-child(6)::before { content: "Responsable"; }
  #tbodyInvKardex tr td:nth-child(7)::before { content: "Motivo"; }
}

@media (max-width: 640px) {
  .omnibox-wrapper { display: none; } /* En móviles pequeños ocultamos para no apretar el menú */
}