/* ========================================
   MOBILE Y TABLET (< 768px)
   Botones solo con iconos EN HEADER
   ======================================== */
@media (max-width: 767px) {
  /* ✅ CRÍTICO: Asegurar gap horizontal de 18px para iconos */
  .form-grid {
    gap: 5px 18px !important; /* Vertical 5px, horizontal 18px */
  }
  
  .form-grid-rma {
    gap: 5px 18px !important;
  }
  
  /* Grupos: gap 18px horizontal cuando están en fila */
  .date-range-group:not([style*="flex-direction: column"]),
  .category-brand-group:not([style*="flex-direction: column"]) {
    gap: 18px !important;
  }

  /* ✅ CRÍTICO: Tablas con scroll horizontal en mobile */
  .tabla-contenedor {
    overflow-x: auto !important;
    overflow-y: hidden !important; /* ✅ NUEVO: Evitar doble scroll vertical */
    -webkit-overflow-scrolling: touch;
  }

  /* ✅ CRÍTICO: Sobrescribir overflow:hidden en cards full-height */
  .card-full-height .card-body .tabla-contenedor {
    overflow-x: auto !important;
    overflow-y: hidden !important; /* ✅ Solo scroll vertical dentro de la tabla, no aquí */
    -webkit-overflow-scrolling: touch;
  }

  /* ✅ Botones: solo iconos en mobile (SOLO en card-header-actions) */
  .card-header-actions .btn .btn-text {
    display: none !important;
  }
  
  .card-header-actions .btn .btn-icon {
    position: static !important;
    transform: none !important;
  }
  
  .card-header-actions .btn {
    min-width: 36px !important;
    max-width: 36px !important;
    padding: 10px !important;
    justify-content: center !important;
  }
}

/* ========================================
   RESOLUCIONES PEQUEÑAS (768px - 900px)
   Ajustes adicionales para pantallas pequeñas
   ======================================== */
@media (min-width: 768px) and (max-width: 900px) {
  /* Body: eliminar scroll horizontal */
  body {
    overflow-x: hidden !important;
  }

  .container {
    overflow-x: hidden;
  }

  /* Form grid: ajustar para que no se desborde */
  .form-grid {
    grid-template-columns: 1fr 1fr 1fr !important; /* ✅ Columnas iguales en tablet */
    gap: 5px 18px !important; /* ✅ CANON GLOBAL: 5px vertical, 18px horizontal */
  }
  
  /* Grid RMA también flexible en tablet */
  .form-grid-rma {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr !important; /* ✅ Columnas iguales */
    gap: 5px 18px !important; /* ✅ CANON GLOBAL: 5px vertical, 18px horizontal */
  }

  /* Grupos de fecha y categoría: mantener 18px */
  .date-range-group,
  .category-brand-group {
    gap: 18px !important; /* ✅ CORREGIDO: de 10px a 18px */
    width: 100% !important; /* ✅ Asegurar ancho completo */
  }
  
  /* ✅ CRÍTICO: Campos dentro de grupos deben crecer al 100% */
  .date-range-group .form-field,
  .category-brand-group .form-field {
    flex: 1 !important;
    min-width: 0 !important;
    width: 100% !important;
  }
  
  /* ✅ CRÍTICO: Inputs y selects dentro de grupos al 100% */
  .date-range-group .form-field input,
  .date-range-group .form-field select,
  .category-brand-group .form-field input,
  .category-brand-group .form-field select {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Campos: asegurar que no excedan el contenedor */
  .form-field,
  .form-grid > div {
    min-width: 0;
  }

  .form-field input,
  .form-field select,
  .form-field textarea {
    box-sizing: border-box;
  }

  /* Tablas: agregar scroll horizontal si es necesario */
  .tabla-contenedor {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  /* ✅ CRÍTICO: Sobrescribir overflow:hidden en cards full-height (tablet) */
  .card-full-height .card-body .tabla-contenedor {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
  }
  
  /* ✅ Botones: solo iconos en tablet (SOLO en card-header-actions) */
  .card-header-actions .btn .btn-text {
    display: none !important;
  }
  
  .card-header-actions .btn .btn-icon {
    position: static !important;
    transform: none !important;
  }
  
  .card-header-actions .btn {
    min-width: 36px !important;
    max-width: 36px !important;
    padding: 10px !important;
    justify-content: center !important;
  }
}

/* ========================================
   TABLET AMPLIO (901px - 1199px)
   Grid flexible para resoluciones intermedias
   ======================================== */
@media (min-width: 901px) and (max-width: 1199px) {
  /* Form grid: columnas flexibles */
  .form-grid {
    grid-template-columns: 1fr 1fr 1fr !important; /* ✅ Columnas iguales */
    gap: 5px 18px !important;
  }
  
  /* Grid RMA también flexible */
  .form-grid-rma {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr !important; /* ✅ Columnas iguales */
    gap: 5px 18px !important;
  }

  /* Grupos de fecha y categoría */
  .date-range-group,
  .category-brand-group {
    gap: 18px !important;
  }
}