/* ============================================================
   AJUSTES RESPONSIVE GLOBALES — no altera el diseño de escritorio
   Se aplica a todo el sistema para que nada se distorsione en
   celulares y tablets (pantallas pequeñas y medianas).
   ============================================================ */

/* Imágenes y fotos de productos nunca desbordan su celda */
img { max-width: 100%; height: auto; }

/* Inputs con letra de 16px en móvil: evita que iPhone haga zoom al escribir */
@media (max-width: 767.98px) {
  input, select, textarea { font-size: 16px !important; }
}

/* ------- Tablas ------- */
/* Toda tabla dentro del panel se puede desplazar horizontalmente en móvil,
   incluso si no está envuelta en .table-responsive */
@media (max-width: 991.98px) {
  main table.table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  main table.table td, main table.table th { white-space: nowrap; }
  .table-responsive { -webkit-overflow-scrolling: touch; }
}

@media (max-width: 575.98px) {
  main table.table { font-size: 0.85rem; }
  main .btn-sm { padding: 0.2rem 0.35rem; font-size: 0.78rem; }
  main h1.h2 { font-size: 1.3rem; }
}

/* ------- Contenido principal ------- */
@media (max-width: 767.98px) {
  main { padding-left: 12px !important; padding-right: 12px !important; }
  /* Los botones de la cabecera (Nuevo, Imprimir, Importar...) se acomodan en varias líneas */
  .btn-toolbar { flex-wrap: wrap; gap: 4px; }
}

/* ------- Modales (formularios emergentes) ------- */
.modal-dialog { max-width: 96vw; }
@media (min-width: 768px) { .modal-dialog { max-width: 700px; } }
.modal-body { max-height: calc(100vh - 180px); overflow-y: auto; }

/* ------- Menú lateral ------- */
@media (max-width: 767.98px) {
  #sidebarMenu { max-height: calc(100vh - 48px); overflow-y: auto; }
  #sidebarMenu img { max-height: 90px; width: auto; display: block; margin: 0 auto; }
}

/* ------- Página de inicio de sesión ------- */
body.login-page,
body[style*="fondo.jpg"] { background-size: cover !important; background-position: center; }
.login-form { max-width: 420px; width: 92%; }
@media (max-width: 575.98px) {
  .login-form { margin-top: 12vh; }
}

/* Select2 (buscador de productos en ventas) a lo ancho disponible */
.select2-container { max-width: 100%; }