/*
===============================================
Responsive Fixes - Sistema Clínica Unión
===============================================
Parches específicos para compatibilidad Bootstrap + DevExpress
y ajustes responsive para el sistema médico
===============================================
*/

/* 
===============================================
1. FIXES PARA NAVBAR FIXED
===============================================
*/

/* Asegurar que el contenido no se oculte bajo navbar */
body {
  padding-top: 60px;
}

@media (max-width: 768px) {
  body {
    padding-top: 50px;
  }
}

/* 
===============================================
2. FIXES DEVEXPRESS + BOOTSTRAP
===============================================
*/

/* Prevenir conflictos de z-index */
.navbar-fixed-top {
  z-index: 1030;
}

/* DevExpress dropdowns aparecen sobre navbar */
.dxeBase,
.dxm-main,
.dxm-popup {
  z-index: 1040 !important;
}

/* Ajustes para grids DevExpress en mobile */
@media (max-width: 768px) {
  .dxgvControl {
    font-size: 12px;
    min-width: 100%;
  }

  .dxgv table {
    min-width: 600px;
  }
}

/* 
===============================================
3. FORMULARIOS RESPONSIVE
===============================================
*/

/* Mejor apariencia de labels en mobile */
@media (max-width: 768px) {
  .editor-label,
  .display-label {
    margin-bottom: 5px;
    font-weight: bold;
    display: block;
  }

  .editor-field {
    margin-bottom: 15px;
  }
}

/* Inputs DevExpress responsive */
@media (max-width: 768px) {
  .dxeTextBox,
  .dxeDateEdit,
  .dxeComboBox {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* 
===============================================
4. TABLAS Y GRIDS RESPONSIVE
===============================================
*/

/* Wrapper responsive para tablas grandes */
.table-responsive-union {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

@media (max-width: 768px) {
  .table-responsive-union {
    margin-bottom: 15px;
    overflow-y: hidden;
    border: 1px solid #c1c1c1;
  }
}

/* 
===============================================
5. MODAL Y POPUP FIXES
===============================================
*/

/* Modals responsive */
@media (max-width: 768px) {
  .modal-dialog {
    margin: 10px;
  }

  .modal-content {
    padding: 10px;
  }
}

/* DevExpress popups en mobile */
@media (max-width: 768px) {
  .dxpc-contentWrapper {
    max-width: 95% !important;
    max-height: 85% !important;
  }
}

/* 
===============================================
6. NAVEGACIÓN MOBILE
===============================================
*/

/* Mejor touch targets en mobile */
@media (max-width: 768px) {
  .navbar-nav li a {
    padding: 12px 15px !important;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

/* Dropdown menu más amigable para touch */
@media (max-width: 768px) {
  .dropdown-menu {
    position: static;
    float: none;
    width: auto;
    margin-top: 0;
    background-color: #317abf;
    border: 0;
    box-shadow: none;
  }

  .dropdown-menu li a {
    color: #ffffff !important;
    padding: 12px 20px;
  }

  .dropdown-menu li a:hover {
    background-color: #205a94 !important;
  }
}

/* 
===============================================
7. ELEMENTOS DE ACCIÓN RESPONSIVE
===============================================
*/

/* Botones más grandes en mobile */
@media (max-width: 768px) {
  .btn {
    padding: 12px 16px;
    font-size: 16px;
    min-height: 44px;
  }

  .btn-xs {
    padding: 8px 12px;
    font-size: 14px;
    min-height: 36px;
  }
}

/* 
===============================================
8. COMPATIBILIDAD IE8+
===============================================
*/

/* Fallbacks para IE8 */
.navbar-union {
  background-color: #205a94;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#205a94', endColorstr='#205a94');
}

/* Fallback para responsive en IE8 */
@media screen and (max-width: 768px) {
  .visible-xs {
    display: block !important;
  }
  .hidden-xs {
    display: none !important;
  }
}

/* 
===============================================
9. PRINT STYLES
===============================================
*/

@media print {
  .navbar,
  .btn,
  .dropdown {
    display: none !important;
  }

  body {
    padding-top: 0 !important;
  }

  .container-fluid {
    padding: 0 !important;
  }
}

/* 
===============================================
10. UTILIDADES ESPECÍFICAS UNION
===============================================
*/

/* Loading indicator responsive */
.loading-indicator {
  text-align: center;
  padding: 20px;
}

@media (max-width: 768px) {
  .loading-indicator {
    padding: 10px;
    font-size: 14px;
  }
}

/* Alerts responsive */
@media (max-width: 768px) {
  .alert {
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 4px;
  }

  .alert-dismissible .close {
    padding: 10px;
    right: 10px;
    top: 5px;
  }
}

/* Breadcrumb responsive */
@media (max-width: 768px) {
  .breadcrumb-union {
    padding: 8px 10px;
    font-size: 12px;
  }

  .breadcrumb-union > li {
    display: inline-block;
  }
}

/*
===============================================
11. FIX GLOBAL PARA GRIDVIEW TOUCH SWIPE
===============================================
Solución global para prevenir que los GridView cambien de página
al hacer swipe horizontal en dispositivos móviles.
Se aplica automáticamente a TODOS los GridView sin modificar vistas.
===============================================
*/

/* Forzar scroll nativo en lugar de swipe-to-page */
@media (max-width: 768px) {
  /* Prevenir que DevExpress capture eventos touch para paginación */
  .dxgvControl,
  .dxgvControl *,
  .dxgv table,
  .dxgv tbody,
  .dxgv tr,
  .dxgv td {
    touch-action: pan-x pan-y !important;
    -ms-touch-action: pan-x pan-y !important;
  }

  /* Asegurar que el GridView tenga overflow visible para scroll horizontal */
  .dxgvControl {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    position: relative;
  }

  /* Contenedor de tabla con scroll horizontal */
  .dxgv table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    min-width: max-content;
  }

  /* Indicador visual de que el grid es scrollable horizontalmente */
  .dxgvControl::after {
    content: "← Desliza para ver más columnas →";
    display: block;
    text-align: center;
    color: #999;
    font-size: 11px;
    padding: 8px 5px;
    background: linear-gradient(to bottom, #f8f9fa 0%, #e9ecef 100%);
    border-top: 1px solid #dee2e6;
    font-style: italic;
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
  }

  /* Ocultar indicador si el grid no tiene scroll horizontal */
  .dxgvControl:not(.has-horizontal-scroll)::after {
    display: none;
  }

  /* Mejorar visibilidad del scrollbar en WebKit (Chrome, Safari) */
  .dxgvControl::-webkit-scrollbar {
    height: 8px;
  }

  .dxgvControl::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
  }

  .dxgvControl::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
  }

  .dxgvControl::-webkit-scrollbar-thumb:hover {
    background: #555;
  }
}

/*
===============================================
CARGA: Este archivo debe ir DESPUÉS de bootstrap-union.css
===============================================
*/