/*
===============================================
Bootstrap-Union Custom CSS
===============================================
Personalización de Bootstrap 3.3.7 para sistema Clínica Unión
Respeta colores MetropolisBlue y mantiene compatibilidad DevExpress
Autor: Integración Bootstrap para Union.Almacen.Web
Fecha: 2025
===============================================
*/

/* Variables CSS para compatibilidad (IE9+) */
:root {
  --primary-blue: #205a94; /* Color principal MetropolisBlue */
  --secondary-blue: #255c90; /* Variante secundaria */
  --light-blue: #317abf; /* Azul claro */
  --dark-text: #2a2a2a; /* Texto principal */
  --light-text: #717171; /* Texto secundario */
  --border-color: #c1c1c1; /* Bordes */
  --input-border: #999; /* Bordes de inputs */
  --input-text: #555; /* Texto en inputs */
  --background-light: #fff; /* Fondo claro */
  --background-gray: #eeeeee; /* Fondo gris */
  --success-green: #5cb85c; /* Verde éxito */
  --warning-orange: #f0ad4e; /* Naranja advertencia */
  --danger-red: #d9534f; /* Rojo peligro */
}

/*
===============================================
1. OVERRIDE BOOTSTRAP NAVBAR
===============================================
*/

/* Navbar principal con colores Union */
.navbar-union {
  background-color: #205a94;
  border-color: #255c90;
  background-image: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.navbar-union .navbar-brand {
  color: #ffffff !important;
  font-weight: bold;
  font-size: 18px;
}

.navbar-union .navbar-brand:hover,
.navbar-union .navbar-brand:focus {
  color: #e8f2ff !important;
}

/* Items del menú */
.navbar-union .navbar-nav > li > a {
  color: #ffffff !important;
  padding: 15px 18px;
  transition: background-color 0.3s ease;
}

.navbar-union .navbar-nav > li > a:hover,
.navbar-union .navbar-nav > li > a:focus {
  color: #ffffff !important;
  background-color: #255c90 !important;
}

/* Item activo */
.navbar-union .navbar-nav > .active > a,
.navbar-union .navbar-nav > .active > a:hover,
.navbar-union .navbar-nav > .active > a:focus {
  color: #ffffff !important;
  background-color: #317abf !important;
}

/* Toggle button para mobile */
.navbar-union .navbar-toggle {
  border-color: #ffffff;
}

.navbar-union .navbar-toggle:hover,
.navbar-union .navbar-toggle:focus {
  background-color: #255c90;
}

.navbar-union .navbar-toggle .icon-bar {
  background-color: #ffffff;
}

/*
===============================================
2. BOTONES PERSONALIZADOS
===============================================
*/

/* Botón primario Union */
.btn-union-primary {
  background-color: #205a94;
  border-color: #255c90;
  color: #ffffff;
}

.btn-union-primary:hover,
.btn-union-primary:focus,
.btn-union-primary:active {
  background-color: #255c90;
  border-color: #317abf;
  color: #ffffff;
}

/* Botón secundario Union */
.btn-union-secondary {
  background-color: #317abf;
  border-color: #205a94;
  color: #ffffff;
}

.btn-union-secondary:hover,
.btn-union-secondary:focus,
.btn-union-secondary:active {
  background-color: #205a94;
  border-color: #255c90;
  color: #ffffff;
}

/* Override botón primary de Bootstrap */
.btn-primary {
  background-color: #205a94;
  border-color: #255c90;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: #255c90;
  border-color: #317abf;
}

/*
===============================================
3. FORMULARIOS Y INPUTS
===============================================
*/

/* Compatibilidad con inputs existentes */
.form-control {
  border: 1px solid #999;
  color: #555;
}

.form-control:focus {
  border-color: #205a94;
  box-shadow: 0 0 0 0.2rem rgba(32, 90, 148, 0.25);
}

/* Labels estilo Union */
.control-label {
  color: #2a2a2a;
  font-weight: bold;
}

/* Grupos de formulario mejorados */
.form-group-union {
  margin-bottom: 20px;
}

.form-group-union .control-label {
  margin-bottom: 8px;
  display: block;
}

/*
===============================================
4. PANELES Y CARDS
===============================================
*/

/* Panel principal Union */
.panel-union {
  border: 1px solid #c1c1c1;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.panel-union-heading {
  background-color: #205a94;
  color: #ffffff;
  padding: 12px 15px;
  border-bottom: 1px solid #255c90;
  font-weight: bold;
}

.panel-union-body {
  padding: 20px;
}

/* Card moderno para contenido */
.card-union {
  background: #ffffff;
  border: 1px solid #c1c1c1;
  border-radius: 6px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card-union-header {
  border-bottom: 2px solid #205a94;
  padding-bottom: 10px;
  margin-bottom: 15px;
}

.card-union-title {
  color: #205a94;
  font-size: 18px;
  font-weight: bold;
  margin: 0;
}

/*
===============================================
5. TABLAS RESPONSIVE
===============================================
*/

/* Wrapper para DevExpress grids */
.table-union-wrapper {
  margin-bottom: 20px;
  border: 1px solid #c1c1c1;
  border-radius: 4px;
  overflow-x: auto;
}

/* Estilos para tablas Bootstrap */
.table-union {
  margin-bottom: 0;
}

.table-union thead th {
  background-color: #205a94;
  color: #ffffff;
  border-bottom: 2px solid #255c90;
}

.table-union tbody tr:hover {
  background-color: #e8f2ff;
}

/*
===============================================
6. ALERTAS Y MENSAJES
===============================================
*/

/* Alerta éxito Union */
.alert-union-success {
  background-color: #e6ffe9;
  border-color: #38762c;
  color: #38762c;
}

/* Alerta información Union */
.alert-union-info {
  background-color: #e3f7fc;
  border-color: #2e6093;
  color: #2e6093;
}

/* Alerta advertencia Union */
.alert-union-warning {
  background-color: #fffbc8;
  border-color: #8f680e;
  color: #8f680e;
}

/* Alerta error Union */
.alert-union-danger {
  background-color: #ffc8d1;
  border-color: #cd0a0a;
  color: #cd0a0a;
}

/*
===============================================
7. UTILIDADES UNION
===============================================
*/

/* Espaciado */
.mt-union {
  margin-top: 20px;
}
.mb-union {
  margin-bottom: 20px;
}
.ml-union {
  margin-left: 20px;
}
.mr-union {
  margin-right: 20px;
}
.pt-union {
  padding-top: 20px;
}
.pb-union {
  padding-bottom: 20px;
}
.pl-union {
  padding-left: 20px;
}
.pr-union {
  padding-right: 20px;
}

/* Colores de texto */
.text-union-primary {
  color: #205a94 !important;
}
.text-union-secondary {
  color: #317abf !important;
}
.text-union-muted {
  color: #717171 !important;
}
.text-union-dark {
  color: #2a2a2a !important;
}

/* Fondos */
.bg-union-primary {
  background-color: #205a94 !important;
  color: #ffffff;
}
.bg-union-light {
  background-color: #e8f2ff !important;
}
.bg-union-gray {
  background-color: #eeeeee !important;
}

/* Bordes */
.border-union {
  border: 1px solid #c1c1c1 !important;
}
.border-union-primary {
  border: 1px solid #205a94 !important;
}
.border-union-top {
  border-top: 2px solid #205a94 !important;
}

/*
===============================================
8. RESPONSIVE HELPERS
===============================================
*/

/* Contenedor principal responsive */
.container-union {
  padding-left: 15px;
  padding-right: 15px;
  margin-left: auto;
  margin-right: auto;
}

/* Grid responsive para DevExpress */
.devexpress-wrapper {
  overflow-x: auto;
  margin-bottom: 20px;
}

@media (max-width: 768px) {
  .devexpress-wrapper {
    margin-left: -15px;
    margin-right: -15px;
  }

  .container-union {
    padding-left: 10px;
    padding-right: 10px;
  }

  /* Formularios en mobile */
  .form-group-union .control-label {
    margin-bottom: 5px;
  }

  /* Botones más grandes en mobile */
  .btn-union-primary,
  .btn-union-secondary {
    padding: 12px 20px;
    font-size: 16px;
  }
}

/*
===============================================
9. COMPATIBILIDAD DEVEXPRESS
===============================================
*/

/* Asegurar que DevExpress no conflicte */
.dxgvControl {
  margin: 0 !important;
}

/* Wrapper para combos DevExpress */
.devexpress-combo-wrapper {
  margin-bottom: 15px;
}

/* Wrapper para editores DevExpress */
.devexpress-editor-wrapper {
  margin-bottom: 15px;
}

/* Asegurar que los temas MetropolisBlue se mantengan */
.dxMetropolisBlue {
  /* Preservar estilos existentes */
}

/*
===============================================
10. NAVEGACIÓN BREADCRUMB
===============================================
*/

.breadcrumb-union {
  background-color: #e8f2ff;
  border: 1px solid #c1c1c1;
  border-radius: 4px;
  padding: 8px 15px;
  margin-bottom: 20px;
}

.breadcrumb-union > li + li:before {
  color: #717171;
  content: "/ ";
}

.breadcrumb-union > .active {
  color: #2a2a2a;
}

/*
===============================================
IMPORTANTE: Orden de carga
===============================================
Este archivo debe cargarse DESPUÉS de bootstrap.min.css
y ANTES de cualquier CSS específico de DevExpress para
evitar conflictos y mantener las personalizaciones.
===============================================
*/