/* Fix para forzar fondo blanco en toda la aplicación */
html {
  background-color: #FFFFFF !important;
}

body {
  background-color: #FFFFFF !important;
}

.app-container {
  background-color: #FFFFFF !important;
}

.main-content {
  background-color: #FFFFFF !important;
}

.main-content.optimize-scroll {
  background-color: #FFFFFF !important;
}

.container-fluid {
  background-color: #FFFFFF !important;
}

/* Config container - REGLAS MOVIDAS A configuracion.css para evitar conflictos */
/* Las reglas de .config-container ahora están centralizadas en configuracion.css */

/* Config header - REGLAS MOVIDAS A configuracion.css para evitar conflictos */
/* Las reglas de .config-header ahora están centralizadas en configuracion.css */

/* Forzar fondo blanco en elementos principales específicos */
.config-section {
  background-color: #FFFFFF !important;
}

/* Asegurar que el body y html siempre tengan fondo blanco */
/* EXCLUIR el backdrop del modal de esta regla - usar reglas más específicas */
/* NO aplicar a elementos con clase modal-backdrop */
body > div:not(.modal-backdrop) {
  background-color: #FFFFFF !important;
}

/* Asegurar que el backdrop NO tenga fondo blanco */
body > .modal-backdrop {
  background-color: rgba(0, 0, 0, 0.5) !important;
  background: rgba(0, 0, 0, 0.5) !important;
}

/* Forzar fondo blanco en todas las vistas específicas */
.container-fluid {
  background-color: #FFFFFF !important;
}

.row {
  background-color: transparent !important;
}

/* Excluir las tarjetas del dashboard de tener fondo blanco */
/* Solo aplicar fondo blanco a tarjetas que NO sean del dashboard */
/* EXCEPCIÓN: Las tarjetas de alertas (alerta-card) SÍ deben tener fondo blanco */
.card:not(.card-primary):not(.card-success):not(.card-info):not(.card-warning):not(.card-danger):not(.stats-cards .card),
.alerta-card {
  background-color: #FFFFFF !important;
}

.card-body:not(.card-primary .card-body):not(.card-success .card-body):not(.card-info .card-body):not(.card-warning .card-body):not(.card-danger .card-body),
.alerta-card .card-body {
  background-color: #FFFFFF !important;
}

/* Las tarjetas del dashboard (card-primary, card-success, card-danger, etc.) NO deben tener fondo blanco */
/* Deben mantener sus gradientes definidos en main.css - no aplicar reglas aquí */
/* EXCEPCIÓN: Las tarjetas de alertas (alerta-card) SÍ deben tener fondo blanco */

.card-primary .card-body:not(.alerta-card .card-body),
.card-success .card-body:not(.alerta-card .card-body),
.card-info .card-body:not(.alerta-card .card-body),
.card-warning .card-body:not(.alerta-card .card-body),
.card-danger .card-body:not(.alerta-card .card-body),
.stats-cards .card-warning .card-body,
.stats-cards .card-danger .card-body {
  background-color: transparent !important;
  background: transparent !important;
}

/* Asegurar que las tarjetas de estadísticas con clase danger mantengan su gradiente */
.stats-cards .card-danger {
  background-color: transparent !important;
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important;
}

/* Asegurar que los contenedores principales tengan fondo blanco */
/* COMENTADO: Esta regla estaba bloqueando el backdrop del modal */
/*
.main-content > .container-fluid,
.main-content > div {
  background-color: #FFFFFF !important;
}
*/

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

/* Asegurar que el backdrop esté visible */
.modal-backdrop.fade {
  opacity: 0.5 !important;
}

.modal-backdrop.fade.show {
  opacity: 0.5 !important;
}

/* El contenido del modal debe tener fondo blanco */
.modal-content {
  background-color: #FFFFFF !important;
  background: #FFFFFF !important;
}

.modal-body {
  background-color: #FFFFFF !important;
  background: #FFFFFF !important;
}

.modal-header {
  background-color: #FFFFFF !important;
  background: #FFFFFF !important;
}

.modal-footer {
  background-color: #FFFFFF !important;
  background: #FFFFFF !important;
}

/* REGLA FINAL CON MÁXIMA ESPECIFICIDAD PARA EL BACKDROP */
/* Esta regla debe tener la máxima prioridad para asegurar que el backdrop sea oscuro */
body .modal-backdrop,
body .modal-backdrop.show,
body .modal-backdrop.fade,
body .modal-backdrop.fade.show,
html body .modal-backdrop,
html body .modal-backdrop.show,
html body .modal-backdrop.fade,
html body .modal-backdrop.fade.show,
body > .modal-backdrop,
body > .modal-backdrop.show,
body > .modal-backdrop.fade,
body > .modal-backdrop.fade.show {
  background-color: rgba(0, 0, 0, 0.5) !important;
  background: rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
  opacity: 0.5 !important;
}