/* ============================================================
   RESPONSIVE GLOBAL - SISTEMA MARQUEZ
   Breakpoints:
     - Móvil  : ≤ 767px
     - Tablet : 768px - 1024px
     - Laptop : 1025px - 1199px
   ============================================================ */

/* -------------------------------------------------------
   TABLET: 768px – 1024px
   ------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1024px) {

  /* Layout general */
  .content-wrapper,
  .right-side {
    margin-left: 0 !important;
  }

  /* Header */
  .main-header .logo {
    width: 150px !important;
  }

  /* Cabecera del dashboard */
  .dashboard-header-modern {
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 15px;
  }

  .btns-dash-modern {
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
  }

  .btns-dash-modern a {
    font-size: 0.8em;
    padding: 5px 10px;
  }

  /* Columnas de formulario en tablet */
  .col-md-3,
  .col-md-4 {
    width: 50% !important;
    float: left;
  }

  /* Tabla de items */
  .tabla-items {
    font-size: 0.85em;
  }

  .tabla-items thead th {
    font-size: 0.78em;
    padding: 5px 4px !important;
  }

  /* === TABLAS PRINCIPALES (Ventas, Cotizaciones, Guias) === */
  .tablaVentas,
  .tablaCotizaciones,
  .tablaGuias {
    font-size: 0.85em !important;
  }
  
  .tablaVentas th,
  .tablaVentas td,
  .tablaCotizaciones th,
  .tablaCotizaciones td,
  .tablaGuias th,
  .tablaGuias td {
    padding: 6px !important;
  }

  /* Botones de acción un poco más compactos en tablet */
  .contenedor-print-comprobantes #printA4,
  .contenedor-print-comprobantes #printT,
  .contenedor-print-comprobantes .printA4,
  .contenedor-print-comprobantes .printT,
  .contenedor-print-comprobantes .printTK,
  .contenedor-print-comprobantes .xml,
  .contenedor-print-comprobantes .cdr,
  .contenedor-print-comprobantes #xml,
  .contenedor-print-comprobantes #cdr,
  .contenedor-print-comprobantes .s-success,
  .contenedor-print-comprobantes .s-rechazo,
  .contenedor-print-comprobantes .anulado,
  .contenedor-print-comprobantes .option-menu,
  .contenedor-print-comprobantes .senda4,
  .contenedor-print-comprobantes .sendCa4,
  .contenedor-print-comprobantes .s-getcdr,
  .contenedor-print-comprobantes .email-guia {
    width: 36px !important;
    height: 36px !important;
  }
  
  /* Totales */
  .tabla-totales {
    font-size: 0.8em;
  }

  /* === CREAR GUÍA ESPECÍFICO (TABLET) === */
  .formGuia legend {
    font-size: 1.25em !important;
    margin-left: 5px !important;
  }
  
  .number-guiar {
    width: 35px !important;
    height: 35px !important;
    line-height: 35px !important;
  }
  
  .number-guiar h3 {
    line-height: 35px !important;
    font-size: 1.3em !important;
  }

  /* === MODAL PAGOS MÚLTIPLES (TABLET) === */
  #modalPagosMultiples h3 {
    font-size: 24px !important;
  }
  #modalPagosMultiples .col-md-4 {
    width: 33.333% !important;
  }
  #modalPagosMultiples .modal-body {
    max-height: calc(100vh - 160px);
    overflow-y: auto;
  }
  #modalPagosMultiples .panel {
    margin-bottom: 5px;
  }
  #modalPagosMultiples .row {
    margin-bottom: 5px !important;
  }

  /* Ajustar ancho de modales */
  .modal-dialog {
    width: 90% !important;
    margin: 10px auto !important;
  }
}

/* -------------------------------------------------------
   MÓVIL: ≤ 767px
   ------------------------------------------------------- */
@media (max-width: 767px) {

  /* === LAYOUT BASE === */
  body {
    font-size: 14px;
  }

  .content-wrapper,
  .right-side {
    margin-left: 0 !important;
    padding: 0 !important;
    min-height: auto !important;
  }

  /* Ocultar sidebar en móvil por defecto (AdminLTE lo maneja) */
  .main-sidebar {
    transform: translateX(-230px);
    transition: transform 0.3s ease;
  }

  .sidebar-open .main-sidebar {
    transform: translateX(0);
  }

  /* === HEADER === */
  .main-header {
    position: sticky !important;
    top: 0;
    z-index: 1000;
  }

  .main-header .logo {
    width: 100% !important;
    font-size: 1em !important;
    text-align: left !important;
    padding: 0 8px !important;
  }

  .main-header .logo .logo-lg {
    display: inline !important;
    font-size: 0.9em !important;
  }

  .main-header .navbar {
    margin-left: 0 !important;
  }

  .header-indicators {
    display: none !important;
  }

  /* === CABECERA DASHBOARD MODERN === */
  .dashboard-header-modern {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px;
    padding: 10px !important;
    border-radius: 8px;
  }

  .dash-title {
    font-size: 1em !important;
  }

  .btns-dash-modern {
    width: 100%;
    justify-content: flex-start !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .btns-dash-modern a {
    font-size: 0.7em !important;
    padding: 5px 9px !important;
    white-space: nowrap;
  }

  /* === FORMULARIOS === */
  .box-body,
  .box-modern {
    padding: 8px !important;
  }

  /* Todos los col-md-* ocupan ancho completo en móvil */
  [class*="col-md-"],
  [class*="col-lg-"] {
    width: 100% !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* Pero algunos pares van a 50% */
  .col-xs-6 {
    width: 50% !important;
  }

  .form-control {
    font-size: 0.9em;
    height: 36px;
  }

  .input-group-addon {
    padding: 6px 8px;
    font-size: 0.85em;
  }

  /* === TABLA DE ITEMS (VENTA) === */
  .tabla-items {
    font-size: 0.75em !important;
    min-width: 600px; /* Scroll horizontal */
  }

  .items-c {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .tabla-items thead th {
    padding: 4px 3px !important;
    font-size: 0.7em !important;
  }

  .tabla-items tbody td {
    padding: 3px !important;
    font-size: 0.78em !important;
  }

  /* === TABLA TOTALES === */
  .tabla-totales {
    font-size: 0.8em !important;
  }

  .tabla-totales td,
  .tabla-totales th {
    padding: 4px !important;
  }

  /* === TABLA DE VENTAS / DATATABLE === */
  .tablaVentas,
  .tablaCotizaciones,
  .tablaGuias {
    font-size: 0.78em !important;
  }
  .tablaVentas th,
  .tablaVentas td,
  .tablaCotizaciones th,
  .tablaCotizaciones td,
  .tablaGuias th,
  .tablaGuias td {
    padding: 4px !important;
  }

  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Ocultar columnas menos importantes en móvil (XML y CDR) */
  .tablaVentas th:nth-child(7),
  .tablaVentas td:nth-child(7),
  .tablaVentas th:nth-child(8),
  .tablaVentas td:nth-child(8),
  .tablaGuias th:nth-child(7),
  .tablaGuias td:nth-child(7),
  .tablaGuias th:nth-child(8),
  .tablaGuias td:nth-child(8),
  .tablaGuias th:nth-child(9),
  .tablaGuias td:nth-child(9),
  .tablaGuias th:nth-child(10),
  .tablaGuias td:nth-child(10),
  .tablaCotizaciones th:nth-child(2),
  .tablaCotizaciones td:nth-child(2),
  .tablaCotizaciones th:nth-child(7),
  .tablaCotizaciones td:nth-child(7),
  .tablaInventarios th:nth-child(3),
  .tablaInventarios td:nth-child(3),
  .tablaInventarios th:nth-child(4),
  .tablaInventarios td:nth-child(4),
  .tablaInventarios th:nth-child(5),
  .tablaInventarios td:nth-child(5),
  .tablaGastos th:nth-child(2),
  .tablaGastos td:nth-child(2),
  .tablaGastos th:nth-child(5),
  .tablaGastos td:nth-child(5) {
    display: none;
  }

  /* === GUÍAS RETORNO ESPECÍFICO === */
  /* Ocultar ciudad partida y llegada en móvil */
  .tablaGuiasRetorno th:nth-child(5),
  .tablaGuiasRetorno td:nth-child(5),
  .tablaGuiasRetorno th:nth-child(6),
  .tablaGuiasRetorno td:nth-child(6) {
    display: none;
  }
  .tablaGuiasRetorno th:nth-child(7),
  .tablaGuiasRetorno td:nth-child(7) {
    display: table-cell !important;
  }

  /* === REPORTE VENTAS ESPECÍFICO === */
  .tabla-reportes th:nth-child(2),
  .tabla-reportes td:nth-child(2),
  .tabla-reportes th:nth-child(5),
  .tabla-reportes td:nth-child(5),
  .tabla-reportes th:nth-child(8),
  .tabla-reportes td:nth-child(8),
  .tabla-reportes th:nth-child(9),
  .tabla-reportes td:nth-child(9),
  .tabla-reportes th:nth-child(10),
  .tabla-reportes td:nth-child(10) {
    display: none !important;
  }
  
  /* Mostrar columna PDF que se oculta por defecto en tablaVentas */
  .tabla-reportes th:nth-child(7),
  .tabla-reportes td:nth-child(7) {
    display: table-cell !important;
  }

  /* === REPORTE COMPRAS ESPECÍFICO === */
  .tablaReporteCompras th:nth-child(2),
  .tablaReporteCompras td:nth-child(2),
  .tablaReporteCompras th:nth-child(5),
  .tablaReporteCompras td:nth-child(5),
  .tablaReporteCompras th:nth-child(6),
  .tablaReporteCompras td:nth-child(6) {
    display: none !important;
  }
  
  /* Mostrar columnas que se ocultan por defecto en tablaVentas */
  .tablaReporteCompras th:nth-child(7),
  .tablaReporteCompras td:nth-child(7),
  .tablaReporteCompras th:nth-child(8),
  .tablaReporteCompras td:nth-child(8),
  .tablaReporteCompras th:nth-child(9),
  .tablaReporteCompras td:nth-child(9) {
    display: table-cell !important;
  }

  /* === REPORTE SALDOS ALMACEN ESPECÍFICO === */
  #tablaSaldosDetallado th:nth-child(2),
  #tablaSaldosDetallado td:nth-child(2),
  #tablaSaldosDetallado th:nth-child(3),
  #tablaSaldosDetallado td:nth-child(3),
  #tablaSaldosDetallado th:nth-child(5),
  #tablaSaldosDetallado td:nth-child(5),
  #tablaSaldosDetallado th:nth-child(6),
  #tablaSaldosDetallado td:nth-child(6),
  #tablaSaldosDetallado th:nth-child(7),
  #tablaSaldosDetallado td:nth-child(7),
  #tablaSaldosDetallado th:nth-child(8),
  #tablaSaldosDetallado td:nth-child(8),
  #tablaSaldosDetallado th:nth-child(9),
  #tablaSaldosDetallado td:nth-child(9),
  #tablaSaldosDetallado th:nth-child(11),
  #tablaSaldosDetallado td:nth-child(11),
  #tablaSaldosDetallado th:nth-child(14),
  #tablaSaldosDetallado td:nth-child(14) {
    display: none !important;
  }

  #tablaSaldosConsolidado th:nth-child(2),
  #tablaSaldosConsolidado td:nth-child(2),
  #tablaSaldosConsolidado th:nth-child(4),
  #tablaSaldosConsolidado td:nth-child(4),
  #tablaSaldosConsolidado th:nth-child(5),
  #tablaSaldosConsolidado td:nth-child(5),
  #tablaSaldosConsolidado th:nth-child(6),
  #tablaSaldosConsolidado td:nth-child(6),
  #tablaSaldosConsolidado th:nth-child(7),
  #tablaSaldosConsolidado td:nth-child(7),
  #tablaSaldosConsolidado th:nth-child(8),
  #tablaSaldosConsolidado td:nth-child(8),
  #tablaSaldosConsolidado th:last-child,
  #tablaSaldosConsolidado td:last-child {
    display: none !important;
  }

  /* === NUEVA COMPRA (CARRITO) ESPECÍFICO === */
  .tablaItemsCompra th:nth-child(3),
  .tablaItemsCompra td:nth-child(3),
  .tablaItemsCompra th:nth-child(6),
  .tablaItemsCompra td:nth-child(6),
  .tablaItemsCompra th:nth-child(7),
  .tablaItemsCompra td:nth-child(7) {
    display: none !important;
  }

  /* === CLIENTES ESPECÍFICO === */
  .tabla-clientes th:nth-child(4),
  .tabla-clientes td:nth-child(4),
  .tabla-clientes th:nth-child(5),
  .tabla-clientes td:nth-child(5),
  .tabla-clientes th:nth-child(6),
  .tabla-clientes td:nth-child(6),
  .tabla-clientes th:nth-child(7),
  .tabla-clientes td:nth-child(7),
  .tabla-clientes th:nth-child(9),
  .tabla-clientes td:nth-child(9) {
    display: none !important;
  }

  /* Reducir tamaño de botones de acción en la tabla de ventas para que ocupen menos espacio horizontal */
  .contenedor-print-comprobantes #printA4,
  .contenedor-print-comprobantes #printT,
  .contenedor-print-comprobantes .printA4,
  .contenedor-print-comprobantes .printT,
  .contenedor-print-comprobantes .printTK,
  .contenedor-print-comprobantes .xml,
  .contenedor-print-comprobantes .cdr,
  .contenedor-print-comprobantes #xml,
  .contenedor-print-comprobantes #cdr,
  .contenedor-print-comprobantes .s-success,
  .contenedor-print-comprobantes .s-rechazo,
  .contenedor-print-comprobantes .anulado,
  .contenedor-print-comprobantes .option-menu,
  .contenedor-print-comprobantes .senda4,
  .contenedor-print-comprobantes .sendCa4,
  .contenedor-print-comprobantes .s-getcdr,
  .contenedor-print-comprobantes .email-guia {
    width: 32px !important;
    height: 32px !important;
  }
  .contenedor-print-comprobantes {
    gap: 3px !important;
  }

  /* === RESUMEN / DETRACCIONES === */
  .contenedor-detracciones {
    margin: 8px 0 !important;
    padding: 0 !important;
  }

  /* === MODALES === */
  .modal-dialog {
    width: 96% !important;
    margin: 10px auto !important;
  }

  .modal-body {
    padding: 10px !important;
  }

  /* === BOTONES PRINCIPALES === */
  .btnGuardarVenta,
  .btnGuardarGuia,
  .btnEliminarCarro {
    width: 48%;
    font-size: 1.2em;
    padding: 12px;
  }

  .contenedor-btns-carrito {
    display: flex !important;
    gap: 8px;
    padding: 10px;
  }

  /* === MENU SIDEBAR === */
  .sidebar-menu li > a {
    font-size: 12px !important;
    padding: 8px 6px !important;
  }

  /* === CARD / BOX === */
  .box,
  .box-modern,
  .box-header-calendar-modern {
    border-radius: 8px !important;
    margin-bottom: 10px;
  }

  /* === CREAR GUÍA / VENTA ESPECÍFICO === */
  .formGuia legend,
  .formVenta legend {
    font-size: 1.1em !important;
    margin-left: 5px !important;
    margin-bottom: 10px !important;
  }
  
  .number-guiar {
    width: 30px !important;
    height: 30px !important;
    line-height: 30px !important;
  }
  
  .number-guiar h3 {
    line-height: 30px !important;
    font-size: 1.2em !important;
  }

  /* === TARGETS / KPI CARDS === */
  .info-box {
    min-height: 60px;
  }

  .info-box-content {
    padding: 5px 10px !important;
  }

  .info-box-number {
    font-size: 1.4em !important;
  }

  /* === BOTONES DE ACCIÓN EN TABLAS === */
  .btn-xs {
    padding: 3px 6px !important;
    font-size: 0.7em !important;
  }

  /* === SELECT2 === */
  .select2-container {
    width: 100% !important;
  }

  /* === SECCIÓN CLIENTE EN FACTURA === */
  .row-sucursal {
    padding: 0 !important;
  }

  /* === BOTONES ENVÍO SUNAT === */
  .radio-envio .col-md-6 {
    width: 100% !important;
  }

  /* === BÚSQUEDA EN FORMULARIO === */
  .nuevoProducto .flex {
    flex-direction: column !important;
  }

  .nuevoProducto .flex input[type="search"] {
    width: 100% !important;
    margin-bottom: 8px;
  }

  /* === BOTÓN AGREGAR PRODUCTOS === */
  .btn-agregar-carrito,
  .btnproser {
    width: 100%;
    margin: 4px 0 !important;
    font-size: 0.85em;
  }

  /* === DESCUENTO / MÉTODO PAGO === */
  .tabla-descuentos {
    font-size: 0.82em !important;
  }

  /* === PAGINATION === */
  .dataTables_paginate {
    text-align: center;
    width: 100%;
    margin-top: 8px;
  }

  .dataTables_length,
  .dataTables_filter {
    text-align: center;
    float: none !important;
    position: relative !important;
    margin: 4px 0;
  }

  /* === FECHAS === */
  #fechaDoc,
  #fechaVence {
    font-size: 0.85em;
  }

  /* === MODO PAGO EMAIL === */
  .modo-contenedor-email {
    display: flex;
    gap: 12px;
    align-items: center;
  }

  /* === DETRACCIONES === */
  .contenedor-detracciones .col-md-9,
  .contenedor-detracciones .col-md-3 {
    width: 100% !important;
  }

  /* === MODAL PAGOS MÚLTIPLES (MÓVIL) === */
  #modalPagosMultiples h3 {
    font-size: 20px !important;
  }
  #modalPagosMultiples strong {
    font-size: 14px !important;
    margin-bottom: 5px !important;
  }
  #modalPagosMultiples .col-md-4 {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
  }
  #modalPagosMultiples .col-md-4:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
  }
  #modalPagosMultiples .panel-body {
    padding: 10px;
  }
  #modalPagosMultiples .modal-body {
    max-height: calc(100vh - 140px);
    overflow-y: auto;
  }
  #modalPagosMultiples .panel {
    margin-bottom: 10px;
  }
  #modalPagosMultiples .row {
    margin-bottom: 10px !important;
  }
  
  /* === LOGIN === */
  .login-box {
    width: 95vw !important;
    margin: 0 auto !important;
  }
}

/* -------------------------------------------------------
   LAPTOP PEQUEÑO: 1025px – 1199px
   ------------------------------------------------------- */
@media (min-width: 1025px) and (max-width: 1199px) {

  .btns-dash-modern a {
    font-size: 0.82em;
    padding: 5px 11px;
  }

  .tabla-items {
    font-size: 0.87em;
  }

  .tabla-totales {
    font-size: 0.83em;
  }

  .content-wrapper {
    padding: 0 8px;
  }
}

/* -------------------------------------------------------
   MEJORAS TÁCTILES GENERALES (todos los tamaños táctiles)
   ------------------------------------------------------- */
@media (hover: none) and (pointer: coarse) {
  /* Aumentar touch targets */
  .btn,
  .form-control,
  .input-group-addon,
  select,
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="search"] {
    min-height: 40px;
  }

  /* Eliminar hover effects en touch */
  .btns-dash-modern a:hover {
    transform: none !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
  }
}