/* SOLUCIÓN RADICAL - ELIMINAR COMPLETAMENTE EL PROBLEMA */

/* Reset completo de alturas y overflow */
* {
  box-sizing: border-box;
}

/* SOBRESCRIBIR TODOS LOS ESTILOS PROBLEMÁTICOS CON MÁXIMA ESPECIFICIDAD */
html {
  margin: 0 !important;
  padding: 0 !important;
  height: 100% !important;
  min-height: 100vh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
  background-color: #FFFFFF !important;
}

body {
  margin: 0 !important;
  padding: 0 !important;
  height: 100% !important;
  min-height: 100vh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
  background-color: #FFFFFF !important;
}

/* NO aplicar fondo blanco al backdrop del modal */
.modal-backdrop,
.modal-backdrop.show,
body > .modal-backdrop {
  background-color: rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
}

.app-container, .container-fluid, .dashboard-header, .stats-cards, .card, .row {
  margin: 0 !important;
  padding: 0 !important;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  transform: none !important;
  box-sizing: border-box !important;
}

/* html y body ya están definidos arriba */

/* Asegurar que no haya elementos ocultos */
.main-content .container-fluid:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  transform: none !important;
  overflow: visible !important;
}

/* SOLUCIÓN RADICAL - FORZAR VISIBILIDAD COMPLETA */
body {
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
  min-height: 100vh !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  transform: none !important;
}

html {
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
  min-height: 100vh !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  transform: none !important;
}

/* FORZAR QUE EL CONTENIDO PRINCIPAL SEA COMPLETAMENTE VISIBLE */
.app-container {
  display: flex !important;
  min-height: 100vh !important;
  height: auto !important;
  max-height: none !important;
  width: 100vw !important;
  background-color: #FFFFFF !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  transform: none !important;
}

.main-content {
  flex: 1 !important;
  margin-left: var(--sidebar-width) !important;
  transition: none !important;
  min-height: 100vh !important;
  height: auto !important;
  max-height: none !important;
  width: calc(100vw - var(--sidebar-width)) !important;
  max-width: calc(100vw - var(--sidebar-width)) !important;
  background-color: #FFFFFF !important;
  position: relative !important;
}

/* Asegurar que main-content siempre tenga margen incluso si sidebar tiene clases */
.sidebar.hidden + .main-content,
.sidebar.collapsed + .main-content {
  margin-left: var(--sidebar-width) !important;
  width: calc(100vw - var(--sidebar-width)) !important;
  max-width: calc(100vw - var(--sidebar-width)) !important;
}

.container-fluid {
  padding: 20px !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  min-height: auto !important;
  height: auto !important;
  max-height: none !important;
  padding-top: 0 !important;
  padding-bottom: 40px !important;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  transform: none !important;
  overflow: visible !important;
}

/* ELIMINAR CUALQUIER RESTRICCIÓN EN TODAS LAS TARJETAS */
.card, .row, .col, .col-6, .col-md-3, .col-md-6, .col-12 {
  margin: 0 !important;
  padding: 0 !important;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  transform: none !important;
  box-sizing: border-box !important;
}

/* FORZAR QUE LAS TARJETAS DE ESTADÍSTICAS SEAN VISIBLES */
.stats-cards {
  margin-top: 0 !important;
  margin-bottom: 30px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  transform: none !important;
  overflow: visible !important;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
}

/* FORZAR QUE EL HEADER DEL DASHBOARD SEA VISIBLE */
.dashboard-header {
  margin-top: 0 !important;
  margin-bottom: 30px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  transform: none !important;
  overflow: visible !important;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
}

/* ELIMINAR CUALQUIER RESTRICCIÓN DE ALTURA EN RESPONSIVE */
@media (max-width: 768px) {
  .main-content, .container-fluid, .card, .row, .stats-cards, .dashboard-header {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

/* FORZAR QUE EL SIDEBAR SIEMPRE ESTÉ VISIBLE Y OCUPE TODA LA ALTURA */
.sidebar {
  width: var(--sidebar-width) !important;
  background: linear-gradient(180deg, var(--primary-color) 0%, var(--primary-light) 100%) !important;
  background-attachment: fixed !important;
  background-size: var(--sidebar-width) 100vh !important;
  background-repeat: repeat-y !important;
  color: var(--text-white) !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: none !important;
  z-index: 1000 !important;
  transition: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1) !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: translateX(0) !important;
  pointer-events: auto !important;
}

/* Pseudo-elemento para cubrir toda la altura con el fondo */
.sidebar::before {
  content: '' !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: var(--sidebar-width) !important;
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: none !important;
  background: linear-gradient(180deg, var(--primary-color) 0%, var(--primary-light) 100%) !important;
  background-attachment: fixed !important;
  background-size: var(--sidebar-width) 100% !important;
  background-repeat: repeat-y !important;
  z-index: -1 !important;
  pointer-events: none !important;
}

/* Forzar que el sidebar nunca se oculte */
.sidebar.hidden,
.sidebar.collapsed {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: translateX(0) !important;
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  height: 100vh !important;
  width: var(--sidebar-width) !important;
  z-index: 1000 !important;
  pointer-events: auto !important;
}

/* MEJORAR ESPACIADO DE LAS TARJETAS */
.card {
  margin: 0 0 20px 0 !important;
  padding: 20px !important;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  transform: none !important;
  box-sizing: border-box !important;
}

/* Espaciado específico para las filas */
.row {
  margin: 0 0 30px 0 !important;
  padding: 0 !important;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  transform: none !important;
  box-sizing: border-box !important;
}

/* Espaciado para las columnas */
.col, .col-6, .col-md-3, .col-md-6, .col-12 {
  margin: 0 0 20px 0 !important;
  padding: 0 15px !important;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  transform: none !important;
  box-sizing: border-box !important;
}

/* Espaciado específico para las tarjetas de estadísticas */
.stats-cards .card {
  margin: 0 0 20px 0 !important;
  padding: 20px !important;
}

/* Espaciado entre las filas de tarjetas */
.stats-cards .row {
  margin-bottom: 30px !important;
}

/* Espaciado para las secciones principales */
.alertas-section, .acciones-rapidas, .grupos-grid {
  margin-bottom: 40px !important;
  margin-top: 20px !important;
}

/* MEJORAR ESPACIADO HORIZONTAL ENTRE TARJETAS */
.row .col-6:first-child {
  padding-right: 10px !important;
}

.row .col-6:last-child {
  padding-left: 10px !important;
}

.row .col-md-3:not(:last-child) {
  padding-right: 10px !important;
}

.row .col-md-3:not(:first-child) {
  padding-left: 10px !important;
}

/* Espaciado específico para las tarjetas de estadísticas en fila */
.stats-cards .row .col-6,
.stats-cards .row .col-md-3 {
  margin-bottom: 20px !important;
}

/* Espaciado entre las tarjetas de la misma fila */
.card + .card {
  margin-top: 20px !important;
}

/* Espaciado para las tarjetas de grupos */
.grupos-grid .card {
  margin-bottom: 30px !important;
}

/* Espaciado para las tarjetas de alertas */
.alertas-section .card {
  margin-bottom: 30px !important;
}

/* Espaciado para las tarjetas de acciones rápidas */
.acciones-rapidas .card {
  margin-bottom: 30px !important;
}