/* custom-overrides.css - Ajustes adicionales para el tema moderno */

/* Paleta institucional */
:root {
  --primary: #003066;            /* Azul institucional */
  --primary-contrast: #ffffff;   /* Contraste sobre primario */
}

/* Fix para z-index de dropdowns del navbar */
.navbar .dropdown-menu {
  z-index: 1050 !important;
}

/* Asegurar que el contenido principal tenga z-index menor */
.container, .container-fluid, .card, .table-responsive {
  z-index: 1 !important;
}

/* Mejoras para las tarjetas de estadísticas */
.card {
  transition: all 0.3s ease;
  border: none;
  border-radius: 10px; /* leve incremento del radio global */
  /* Fondo de tarjeta solicitado */
  background-color: #e6e8eb;
  /* Texto más oscuro para mejor contraste */
  color: #222;
  /* Sombra más profunda */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  /* Borde sutil para definición */
  border: 1px solid rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.card:hover {
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.30);
  transform: translateY(-3px);
}

/* Cabecera de tarjeta clara con títulos/íconos en negro */
.card-header {
  background-color: #cfd4da; /* encabezado claro para títulos negros */
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  padding: 0.6rem 0.9rem; /* header compacto */
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

 /* Títulos e íconos de tarjetas en negro (solo en headers claros) */
 .card-header:not(.bg-primary):not(.bg-success):not(.bg-danger):not(.bg-info):not(.bg-secondary):not(.bg-dark):not(.card-header-dark) h1,
 .card-header:not(.bg-primary):not(.bg-success):not(.bg-danger):not(.bg-info):not(.bg-secondary):not(.bg-dark):not(.card-header-dark) h2,
 .card-header:not(.bg-primary):not(.bg-success):not(.bg-danger):not(.bg-info):not(.bg-secondary):not(.bg-dark):not(.card-header-dark) h3,
 .card-header:not(.bg-primary):not(.bg-success):not(.bg-danger):not(.bg-info):not(.bg-secondary):not(.bg-dark):not(.card-header-dark) h4,
 .card-header:not(.bg-primary):not(.bg-success):not(.bg-danger):not(.bg-info):not(.bg-secondary):not(.bg-dark):not(.card-header-dark) h5,
 .card-header:not(.bg-primary):not(.bg-success):not(.bg-danger):not(.bg-info):not(.bg-secondary):not(.bg-dark):not(.card-header-dark) h6,
 .card-header:not(.bg-primary):not(.bg-success):not(.bg-danger):not(.bg-info):not(.bg-secondary):not(.bg-dark):not(.card-header-dark) .card-title,
 .card-header:not(.bg-primary):not(.bg-success):not(.bg-danger):not(.bg-info):not(.bg-secondary):not(.bg-dark):not(.card-header-dark) i {
   color: #000000 !important;
 }

/* Cuerpo de la tarjeta con tono muy leve para profundidad */
.card-body {
  background-color: #e6e8eb;
  color: #222;
  padding: 1rem; /* cuerpo cómodo y coherente con header */
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

/* Títulos de sección legacy: unificarlos visualmente como headers */
h5.border-bottom.fw-semibold,
h6.border-bottom.fw-semibold {
  background-color: #cfd4da;
  color: #000 !important;
  padding: 0.6rem 0.9rem;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.08);
}
h5.border-bottom.fw-semibold i,
h6.border-bottom.fw-semibold i {
  color: #000 !important;
}

.border-top-primary {
  border-top: 3px solid var(--primary, #1a5276);
}

.border-top-success {
  border-top: 3px solid var(--success, #27ae60);
}

.border-top-warning {
  border-top: 3px solid var(--warning, #f1c40f);
}

.border-top-danger {
  border-top: 3px solid var(--danger, #e74c3c);
}

/* Mejoras para los iconos */
.feature-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: var(--primary, #1a5276);
}

.feature-icon.text-success {
  color: var(--success, #27ae60);
}

.feature-icon.text-warning {
  color: var(--warning, #f1c40f);
}

.feature-icon.text-danger {
  color: var(--danger, #e74c3c);
}

/* Animaciones */
.fade-in {
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Mejoras para la barra de navegación */
.navbar-mcda {
  background-color: #003066 !important; /* color solicitado */
}

.navbar-mcda .navbar-brand {
  color: white;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.navbar-mcda .nav-link {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
  transition: all 0.3s ease;
  padding: 0.75rem 1rem;
  border-radius: 4px;
  margin-right: 0.25rem;
}

.navbar-mcda .nav-link:hover,
.navbar-mcda .nav-link:focus {
  color: white;
  background-color: rgba(255, 255, 255, 0.1);
}

.navbar-mcda .nav-link.active {
  color: white;
  background-color: rgba(255, 255, 255, 0.15);
}

/* Sección de bienvenida */
.welcome-section {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin-bottom: 2.5rem;
}

/* Mejoras para botones */
.btn {
  border-radius: 4px;
  font-weight: 500;
  padding: 0.5rem 1.25rem;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.btn-primary {
  background-color: var(--primary, #003066);
  border-color: var(--primary, #003066);
}

.btn-primary:hover, .btn-primary:focus {
  background-color: #002855; /* hover más oscuro */
  border-color: #002855;
  box-shadow: 0 4px 8px rgba(0, 48, 102, 0.3);
}

/* Mejoras para formularios */
.form-control, .form-select {
  border-radius: 4px;
  padding: 0.75rem 1rem;
  border: 1px solid #dde2e6;
  transition: all 0.3s ease;
}

.form-control:focus, .form-select:focus {
  border-color: var(--primary, #003066);
  box-shadow: 0 0 0 0.25rem rgba(0, 48, 102, 0.25);
}

/* Footer personalizado */
.footer {
  background-color: #003066; /* color solicitado */
  color: white !important; /* forzar color blanco */
  padding: 2rem 0;
  margin-top: 3rem;
}

.footer h5, .footer p {
  color: white !important;
}

.footer a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: all 0.3s ease;
}

.footer a:hover {
  color: white;
  text-decoration: underline;
}

/* Fondo global del sitio */
body {
  background-color: #d1e3f0; /* color solicitado */
}

/* Mejoras para badges */
.badge {
  font-weight: 500;
  padding: 0.35em 0.65em;
  border-radius: 4px;
}

/* Badge primario */
.badge.bg-primary {
  background-color: var(--primary, #003066) !important;
  color: var(--primary-contrast, #ffffff) !important;
}

/* Mejoras para alertas */
.alert {
  border: none;
  border-radius: 8px;
  padding: 1rem 1.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Mejoras para modales */
.modal-content {
  border: none;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.modal-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  background-color: var(--primary, #003066);
  color: white;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

/* Asegurar que el título del modal tome el color del header (evita quedar negro en headers oscuros) */
.modal-header .modal-title {
  color: inherit !important;
}

.modal-header .modal-title i {
  color: inherit !important;
}

.modal-header .btn-close {
  filter: brightness(0) invert(1);
}

/* Mejoras para tablas */
.table {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Tablas armonizadas con header claro de card */
.table thead th {
  background-color: #cfd4da;
  color: #000000;
  font-weight: 600;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

/* Zebra y hover adaptados al fondo #e6e8eb */
.table-striped tbody tr:nth-of-type(odd) {
  background-color: #dde1e6;
}

.table-hover tbody tr:hover {
  background-color: rgba(0, 0, 0, 0.06);
}

/* Neutralizar table-dark en thead para mantener header claro global */
.table thead.table-dark th,
.table.table-dark thead th,
.table thead.sticky-top.table-dark th {
  background-color: #cfd4da !important;
  color: #000 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
}

/* Contenedores legacy con bg-white que funcionan como cards */
.bg-white.rounded-4.shadow-lg,
.bg-white.rounded-3.shadow-sm,
.bg-white.rounded-3.shadow-lg,
.bg-white.rounded-4.shadow-sm {
  background-color: #e6e8eb !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
  color: #222;
}

/* Utilidades */
.bg-light-gray {
  background-color: #f8f9fa;
}

.text-primary {
  color: var(--primary, #003066) !important;
}

/* Utilidades para fondo primario */

/* Usuarios: header con textos/íconos blancos respetando el color de fondo actual */
#usuariosHeader h1,
#usuariosHeader h2,
#usuariosHeader h3,
#usuariosHeader h4,
#usuariosHeader h5,
#usuariosHeader h6,
#usuariosHeader .card-title,
#usuariosHeader i {
  color: #ffffff !important;
}

/* Fondo específico para el header de Gestión de Usuarios */
#usuariosHeader {
  background-color: #065abf !important;
}

/* Borde sutil para la tarjeta de Gestión de Usuarios */
#usuariosCard {
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
}

/* Centrado de encabezados de tabla en Gestión de Usuarios */
#usuariosTable thead th {
  text-align: center;
  vertical-align: middle !important;
}

/* Headers por módulo: fondo personalizado y texto/íconos blancos */
#proveedoresHeader,
#pagosHeader,
#notasHeader {
  border-radius: 10px;
  padding: 0.75rem 1rem;
  color: #fff;
}

#proveedoresHeader { background-color: #0b7dda !important; }
#pagosHeader { background-color: #1f7a8c !important; }
#notasHeader { background-color: #6c757d !important; }

#proveedoresHeader h1, #proveedoresHeader h2, #proveedoresHeader h3, #proveedoresHeader h4, #proveedoresHeader h5, #proveedoresHeader h6,
#proveedoresHeader i,
#pagosHeader h1, #pagosHeader h2, #pagosHeader h3, #pagosHeader h4, #pagosHeader h5, #pagosHeader h6,
#pagosHeader i,
#notasHeader h1, #notasHeader h2, #notasHeader h3, #notasHeader h4, #notasHeader h5, #notasHeader h6,
#notasHeader i {
  color: #ffffff !important;
}

.bg-primary {
  background-color: var(--primary, #003066) !important;
}

.border-primary {
  border-color: var(--primary, #003066) !important;
}

/* Outline primario */
.btn-outline-primary {
  color: var(--primary, #003066);
  border-color: var(--primary, #003066);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--primary, #003066);
  border-color: var(--primary, #003066);
  color: var(--primary-contrast, #ffffff);
}

/* Nav pills activo */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--primary, #003066);
  color: var(--primary-contrast, #ffffff);
}

/* Checkboxes y radios activos */
.form-check-input:checked {
  background-color: var(--primary, #003066);
  border-color: var(--primary, #003066);
}

/* Item activo de dropdown */
.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--primary, #003066) !important;
  color: var(--primary-contrast, #ffffff) !important;
}

.shadow-sm {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}

.shadow-lg {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Enlaces globales (navbar/footer tienen reglas más específicas) */
a {
  color: var(--primary, #003066);
  text-decoration: none;
}
a:hover, a:focus {
  color: #002855;
  text-decoration: underline;
}
a:active {
  color: #002855;
}

/* Spinners */
.spinner-border.text-primary,
.spinner-grow.text-primary {
  color: var(--primary, #003066) !important;
}

/* Links primarios */
a.link-primary,
.btn-link {
  color: var(--primary, #003066) !important;
}
.btn-link:hover,
a.link-primary:hover {
  color: #002855 !important;
}

/* Tooltips & Popovers */
.tooltip-inner {
  background-color: var(--primary, #003066);
  color: var(--primary-contrast, #ffffff);
}
.tooltip.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before,
.tooltip.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: var(--primary, #003066);
}
.tooltip.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before,
.tooltip.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: var(--primary, #003066);
}
.popover-header {
  background-color: var(--primary, #003066);
  color: var(--primary-contrast, #ffffff);
}

/* Paginación */
.page-link {
  color: var(--primary, #003066);
}
.page-link:hover {
  color: #002855;
}
.page-item.active .page-link {
  background-color: var(--primary, #003066);
  border-color: var(--primary, #003066);
  color: var(--primary-contrast, #ffffff);
}

/* List group activo */
.list-group-item.active {
  background-color: var(--primary, #003066);
  border-color: var(--primary, #003066);
}

/* Progress bars */
.progress-bar.bg-primary {
  background-color: var(--primary, #003066) !important;
}

/* Switches */
.form-switch .form-check-input:checked {
  background-color: var(--primary, #003066);
  border-color: var(--primary, #003066);
}