/* ==========================================================================
   FLUENT UI BOOTSTRAP THEME - META ADS MANAGER (ESTILO FACEBOOK ADS)
   Archivo: fluent-bootstrap-hybrid.css
   Versión mejorada — misma identidad visual, más pulida para sistemas
   ========================================================================== */

/* ========================================
   TIPOGRAFÍA - Roboto, Arial, sans-serif (como Facebook Ads)
   ======================================== */
* {
  font-family: Roboto, Arial, Helvetica, sans-serif !important;
}

/* Variables CSS adaptadas al estilo Meta Ads Manager */
:root {
  /* Colores principales de Facebook Ads */
  --fb-blue-60: #142A62;
  --fb-blue-70: #0E1E48;
  --fb-blue-75: #142A62;
  --fb-blue-link: #142A62;
  --fb-primary: #142A62;
  --fb-primary-hover: #0E1E48;
  --fb-primary-pressed: #0A1738;

  /* Colores de fondo */
  --fb-background: #f0f2f5;
  --fb-wash: #F0F2F5;
  --fb-card-background: #ffffff;
  --fb-surface-background: #ffffff;

  /* Grises de Facebook */
  --fb-gray-00: #F5F6F7;
  --fb-gray-05: #F2F3F5;
  --fb-gray-10: #EBEDF0;
  --fb-gray-20: #DADDE1;
  --fb-gray-25: #CCD0D5;
  --fb-gray-30: #BEC3C9;
  --fb-gray-45: #8D949E;
  --fb-gray-70: #606770;
  --fb-gray-80: #444950;
  --fb-gray-100: #1C1E21;

  /* Unificado grises */
  --fb-unified-gray-90: #E4E6EB;
  --fb-unified-gray-95: #F0F2F5;
  --fb-unified-gray-100: #F7F8FA;
  --fb-unified-gray-80: #C9CCD1;
  --fb-unified-gray-70: #B0B3B8;
  --fb-unified-gray-40: #65676B;

  /* Big Blue */
  --big-blue-40: #56A1EB;
  --big-blue-50: #2887E6;
  --big-blue-60: #066CD2;
  --big-blue-gray-5: #F5F7F8;
  --big-blue-gray-30: #CBD3DB;
  --big-chart-blue: #3d6ad6;

  /* Colores de estado */
  --fb-green-55: #00A400;
  --fb-green-60: #008C00;
  --fb-red-55: #FA383E;
  --fb-red-70: #A00024;
  --fb-yellow-20: #FFBA00;

  /* Dataviz */
  --dataviz-blue-primary: #1D85FC;
  --dataviz-green-primary: #2B9A35;
  --dataviz-red-primary: #FB3C44;
  --dataviz-yellow-primary: #A18400;
  --dataviz-orange-primary: #D06C14;
  --dataviz-purple-primary: #7D74FF;

  /* Bootstrap overrides */
  --bs-primary: var(--fb-primary);
  --bs-primary-rgb: 20, 42, 98;
  --bs-secondary: var(--fb-gray-70);
  --bs-secondary-rgb: 96, 103, 112;
  --bs-success: var(--fb-green-55);
  --bs-success-rgb: 0, 164, 0;
  --bs-danger: var(--fb-red-55);
  --bs-danger-rgb: 250, 56, 62;
  --bs-warning: var(--fb-yellow-20);
  --bs-warning-rgb: 255, 186, 0;
  --bs-info: var(--dataviz-blue-primary);
  --bs-info-rgb: 29, 133, 252;
  --bs-light: var(--fb-gray-05);
  --bs-light-rgb: 242, 243, 245;
  --bs-dark: var(--fb-gray-100);
  --bs-dark-rgb: 28, 30, 33;

  /* Tipografía - 13px densa tipo Ads Manager */
  --bs-font-sans-serif: Roboto, Arial, Helvetica, sans-serif;
  --bs-font-size-base: 0.8125rem; /* 13px */
  --bs-line-height-base: 1.38;

  /* Bordes sutiles FB */
  --bs-border-radius: 4px;
  --bs-border-radius-sm: 2px;
  --bs-border-radius-lg: 6px;
  --bs-border-radius-xl: 8px;
  --bs-border-radius-2xl: 10px;
  --bs-border-color: var(--fb-gray-20);

  /* Sombras */
  --fb-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.04);
  --fb-shadow-dropdown: 0 2px 12px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.05);
  --fb-shadow-modal: 0 8px 28px rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.04);
  --fb-shadow-focus: 0 0 0 2px rgba(20, 42, 98, 0.28);
}

/* ========================================
   FONDO DE PÁGINA
   ======================================== */
body {
  font-family: var(--bs-font-sans-serif) !important;
  font-size: var(--bs-font-size-base) !important;
  line-height: var(--bs-line-height-base) !important;
  background-color: #f0f2f5 !important;
  color: #1C1E21 !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* ========================================
   ENLACES - SOLO LOS <a> AZULES
   ======================================== */
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand):not(.page-link):not(.list-group-item) {
  color: #142A62 !important;
  text-decoration: none !important;
}

a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand):not(.page-link):not(.list-group-item):hover {
  color: #0E1E48 !important;
  text-decoration: underline !important;
}

.btn a {
  color: inherit !important;
  text-decoration: none !important;
}

/* ========================================
   TÍTULOS - SIEMPRE OSCUROS
   ======================================== */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: #1C1E21 !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

/* ========================================
   CONTENEDORES
   ======================================== */
.container, .container-fluid {
  
  padding-left: 12px !important;
  padding-right: 12px !important;
}


/* ========================================
   CARDS - ESTILO FACEBOOK ADS
   ======================================== */
.card {
  background-color: #ffffff !important;
  border: 1px solid #DADDE1 !important;
  border-radius: 6px !important;
 box-shadow: var(--fb-shadow-card) !important;
  margin-bottom: 12px !important;
  overflow: hidden !important;
}

.card-header {
  background-color: #F5F6F7 !important;
  border-bottom: 1px solid #DADDE1 !important;
  padding: 10px 14px !important;
  font-weight: 600 !important;
  font-size: 0.8125rem !important;
  color: #1C1E21 !important;
  border-radius: 6px 6px 0 0 !important;
}

.card-body {
  background-color: #ffffff !important;
  padding: 14px 16px !important;
}

.card-footer {
  background-color: #F5F6F7 !important;
  border-top: 1px solid #DADDE1 !important;
  padding: 10px 14px !important;
  border-radius: 0 0 6px 6px !important;
}

.card .card {
  border: 1px solid #EBEDF0 !important;
  box-shadow: none !important;
  margin-bottom: 0 !important;
  border-radius: 4px !important;
}

.card-title {
  font-weight: 600 !important;
  color: #1C1E21 !important;
  margin-bottom: 6px !important;
  font-size: 0.9375rem !important;
}

.card-text {
  color: #1C1E21 !important;
  font-size: 0.8125rem !important;
}

.card-subtitle {
  color: #606770 !important;
  font-size: 0.75rem !important;
}

/* ========================================
   CARDS DE ESTADÍSTICAS / DASHBOARD
   ======================================== */
.dashboard-card {
  background: #ffffff !important;
  border: 1px solid #DADDE1 !important;
  border-radius: 6px !important;
  box-shadow: var(--fb-shadow-card) !important;
  margin-bottom: 12px !important;
  overflow: hidden !important;
}

.dashboard-card-header {
  background: #F5F6F7 !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid #DADDE1 !important;
  font-weight: 600 !important;
  font-size: 0.8125rem !important;
  color: #1C1E21 !important;
}

.dashboard-card-body {
  padding: 14px 16px !important;
  background: #ffffff !important;
}

.stat-card {
  background: #ffffff !important;
  border: 1px solid #DADDE1 !important;
  border-radius: 6px !important;
  padding: 14px 12px !important;
  text-align: center !important;
  box-shadow: var(--fb-shadow-card) !important;
  margin-bottom: 12px !important;
  transition: box-shadow 0.15s ease, border-color 0.15s ease !important;
}

.stat-card:hover {
  border-color: #CCD0D5 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

.stat-value {
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #1C1E21 !important;
  line-height: 1.15 !important;
  font-variant-numeric: tabular-nums !important;
}

.stat-label {
  font-size: 11px !important;
  color: #606770 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
  margin-top: 4px !important;
  font-weight: 600 !important;
}

/* ========================================
   BOTONES
   ======================================== */
.btn {
  font-family: var(--bs-font-sans-serif) !important;
  font-size: var(--bs-font-size-base) !important;
  font-weight: 600 !important;
  line-height: 1.33 !important;
  padding: 5px 12px !important;
  border-radius: 4px !important;
  border-width: 1px !important;
  border-style: solid !important;
  min-height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  box-shadow: none !important;
  transition: background-color 0.1s ease, border-color 0.1s ease, box-shadow 0.1s ease !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}

/* Primario - Azul FB */
.btn-primary {
  background-color: #142A62 !important;
  border-color: #142A62 !important;
  color: #ffffff !important;
}

.btn-primary:hover {
  background-color: #0E1E48 !important;
  border-color: #0E1E48 !important;
  color: #ffffff !important;
}

.btn-primary:active,
.btn-primary.active {
  background-color: #0A1738 !important;
  border-color: #0A1738 !important;
  color: #ffffff !important;
}

.btn-primary:focus,
.btn-primary:focus-visible {
  background-color: #142A62 !important;
  border-color: #142A62 !important;
  color: #ffffff !important;
  box-shadow: var(--fb-shadow-focus) !important;
}

/* Secundario - Gris */
.btn-secondary {
  background-color: #EBEDF0 !important;
  border-color: #CCD0D5 !important;
  color: #1C1E21 !important;
}

.btn-secondary:hover {
  background-color: #DADDE1 !important;
  border-color: #BEC3C9 !important;
  color: #1C1E21 !important;
}

.btn-secondary:active,
.btn-secondary.active {
  background-color: #CCD0D5 !important;
  border-color: #BEC3C9 !important;
  color: #1C1E21 !important;
}

.btn-secondary:focus,
.btn-secondary:focus-visible {
  background-color: #EBEDF0 !important;
  border-color: #CCD0D5 !important;
  color: #1C1E21 !important;
  box-shadow: 0 0 0 2px rgba(204, 208, 213, 0.35) !important;
}

/* Éxito - Verde */
.btn-success {
  background-color: #00A400 !important;
  border-color: #00A400 !important;
  color: #ffffff !important;
}

.btn-success:hover {
  background-color: #008C00 !important;
  border-color: #008C00 !important;
  color: #ffffff !important;
}

.btn-success:active,
.btn-success.active {
  background-color: #006600 !important;
  border-color: #006600 !important;
  color: #ffffff !important;
}

.btn-success:focus,
.btn-success:focus-visible {
  box-shadow: 0 0 0 2px rgba(0, 164, 0, 0.28) !important;
}

/* Peligro - Rojo */
.btn-danger {
  background-color: #FA383E !important;
  border-color: #FA383E !important;
  color: #ffffff !important;
}

.btn-danger:hover {
  background-color: #d62b31 !important;
  border-color: #d62b31 !important;
  color: #ffffff !important;
}

.btn-danger:active,
.btn-danger.active {
  background-color: #b01f24 !important;
  border-color: #b01f24 !important;
  color: #ffffff !important;
}

.btn-danger:focus,
.btn-danger:focus-visible {
  box-shadow: 0 0 0 2px rgba(250, 56, 62, 0.28) !important;
}

/* Warning */
.btn-warning {
  background-color: #FFBA00 !important;
  border-color: #FFBA00 !important;
  color: #1C1E21 !important;
}

.btn-warning:hover {
  background-color: #e0a400 !important;
  border-color: #e0a400 !important;
  color: #1C1E21 !important;
}

/* Info */
.btn-info {
  background-color: #1D85FC !important;
  border-color: #1D85FC !important;
  color: #ffffff !important;
}

.btn-info:hover {
  background-color: #142A62 !important;
  border-color: #142A62 !important;
  color: #ffffff !important;
}

/* Outline primary */
.btn-outline-primary {
  background-color: transparent !important;
  border-color: #142A62 !important;
  color: #142A62 !important;
}

.btn-outline-primary:hover {
  background-color: #142A62 !important;
  border-color: #142A62 !important;
  color: #ffffff !important;
}

.btn-outline-primary:active {
  background-color: #0E1E48 !important;
  border-color: #0E1E48 !important;
  color: #ffffff !important;
}

.btn-outline-primary:focus,
.btn-outline-primary:focus-visible {
  box-shadow: var(--fb-shadow-focus) !important;
}

/* Outline secondary */
.btn-outline-secondary {
  background-color: transparent !important;
  border-color: #CCD0D5 !important;
  color: #606770 !important;
}

.btn-outline-secondary:hover {
  background-color: #EBEDF0 !important;
  border-color: #CCD0D5 !important;
  color: #1C1E21 !important;
}

.btn-outline-success {
  background-color: transparent !important;
  border-color: #00A400 !important;
  color: #00A400 !important;
}

.btn-outline-success:hover {
  background-color: #00A400 !important;
  color: #ffffff !important;
}

.btn-outline-danger {
  background-color: transparent !important;
  border-color: #FA383E !important;
  color: #FA383E !important;
}

.btn-outline-danger:hover {
  background-color: #FA383E !important;
  color: #ffffff !important;
}

/* Deshabilitados */
.btn:disabled,
.btn.disabled {
  opacity: 0.5 !important;
  pointer-events: none !important;
  cursor: not-allowed !important;
}

/* Tamaños */
.btn-sm {
  font-size: 0.75rem !important;
  padding: 2px 8px !important;
  min-height: 24px !important;
}

.btn-lg {
  font-size: 0.9rem !important;
  padding: 8px 16px !important;
  min-height: 36px !important;
}

.btn-group > .btn {
  border-radius: 0 !important;
}

.btn-group > .btn:first-child {
  border-radius: 4px 0 0 4px !important;
}

.btn-group > .btn:last-child {
  border-radius: 0 4px 4px 0 !important;
}

/* ========================================
   NAVBAR
   ======================================== */
.navbar {
  background: #ffffff !important;
  border-bottom: 1px solid #DADDE1 !important;
  padding: 8px 16px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  min-height: 48px !important;
}

.navbar-brand {
  font-weight: 600 !important;
  color: #1C1E21 !important;
  font-size: 0.9375rem !important;
}

.navbar-brand:hover {
  color: #1C1E21 !important;
}

.navbar .nav-link {
  color: #606770 !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  padding: 6px 10px !important;
  border-radius: 4px !important;
}

.navbar .nav-link:hover {
  color: #1C1E21 !important;
  background-color: #F5F6F7 !important;
}

.navbar .nav-link.active {
  color: #1C1E21 !important;
  font-weight: 600 !important;
  background-color: #EBEDF0 !important;
}

/* ========================================
   PESTAÑAS
   ======================================== */
.nav-tabs {
  border-bottom: 1px solid #DADDE1 !important;
  gap: 0 !important;
}

.nav-tabs .nav-link {
  border: 1px solid transparent !important;
  border-bottom: none !important;
  background-color: transparent !important;
  padding: 8px 14px !important;
  font-size: var(--bs-font-size-base) !important;
  font-weight: 500 !important;
  color: #606770 !important;
  border-radius: 4px 4px 0 0 !important;
  margin-bottom: -1px !important;
}

.nav-tabs .nav-link:hover {
  background-color: #F5F6F7 !important;
  border-color: #DADDE1 #DADDE1 transparent !important;
  color: #1C1E21 !important;
}

.nav-tabs .nav-link.active {
  background-color: #ffffff !important;
  border-color: #DADDE1 #DADDE1 #ffffff !important;
  color: #142A62 !important;
  font-weight: 600 !important;
}

/* Pills */
.nav-pills .nav-link {
  border-radius: 4px !important;
  color: #606770 !important;
  font-weight: 500 !important;
  padding: 6px 12px !important;
}

.nav-pills .nav-link:hover {
  background-color: #F5F6F7 !important;
  color: #1C1E21 !important;
}

.nav-pills .nav-link.active {
  background-color: #142A62 !important;
  color: #ffffff !important;
}

/* ========================================
   FORMULARIOS
   ======================================== */
.form-control,
.form-select {
  font-family: var(--bs-font-sans-serif) !important;
  font-size: var(--bs-font-size-base) !important;
  line-height: 1.25 !important;
  padding: 5px 10px !important;
  border: 1px solid #CCD0D5 !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  background-color: #ffffff !important;
  color: #1C1E21 !important;
  height: auto !important;
  min-height: 28px !important;
  transition: border-color 0.1s ease, box-shadow 0.1s ease !important;
}

.form-control:hover,
.form-select:hover {
  border-color: #BEC3C9 !important;
}

.form-control:focus,
.form-select:focus {
  border-color: #142A62 !important;
  box-shadow: var(--fb-shadow-focus) !important;
  outline: none !important;
  background-color: #ffffff !important;
}

.form-control::placeholder {
  color: #8D949E !important;
  opacity: 1 !important;
}

.form-control:disabled,
.form-select:disabled {
  background-color: #F5F6F7 !important;
  color: #8D949E !important;
  cursor: not-allowed !important;
}

textarea.form-control,
textarea {
  height: auto !important;
  min-height: 60px !important;
  resize: vertical !important;
  overflow: auto !important;
  max-height: none !important;
  padding: 8px 10px !important;
}

/* Editores (CKEditor etc.) — no forzar altura */
textarea.editor,
textarea.minieditor,
textarea[data-cke-init] {
  min-height: 0 !important;
  height: 0 !important;
  resize: none !important;
  overflow: hidden !important;
}

input.form-control,
select.form-control,
select.form-select {
  height: auto !important;
}

.form-label {
  font-family: var(--bs-font-sans-serif) !important;
  font-size: var(--bs-font-size-base) !important;
  font-weight: 600 !important;
  color: #606770 !important;
  margin-bottom: 4px !important;
}

.form-text {
  font-size: 0.75rem !important;
  color: #8D949E !important;
}

.form-control-sm {
  padding: 2px 8px !important;
  font-size: 0.75rem !important;
  min-height: 24px !important;
}

.form-control-lg {
  padding: 8px 12px !important;
  font-size: 0.9rem !important;
  min-height: 36px !important;
}

.input-group-text {
  background-color: #F5F6F7 !important;
  border: 1px solid #CCD0D5 !important;
  color: #606770 !important;
  font-size: var(--bs-font-size-base) !important;
  padding: 5px 10px !important;
}

/* ========================================
   TABLAS
   ======================================== */
.table {
  font-size: var(--bs-font-size-base) !important;
  border-collapse: collapse !important;
  width: 100% !important;
  margin-bottom: 0 !important;
}

.table th {
  background-color: #F5F6F7 !important;
  color: #606770 !important;
  font-weight: 600 !important;
  font-size: 0.75rem !important;
  padding: 8px 12px !important;
  border-bottom: 1px solid #DADDE1 !important;
  border-right: 1px solid #DADDE1 !important;
  text-align: left !important;
  white-space: nowrap !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
}

.table th:last-child {
  border-right: none !important;
}

.table td {
  padding: 8px 12px !important;
  border-bottom: 1px solid #EBEDF0 !important;
  border-right: 1px solid #EBEDF0 !important;
  color: #1C1E21 !important;
  background-color: #ffffff !important;
  vertical-align: middle !important;
}

.table td:last-child {
  border-right: none !important;
}

.table-hover tbody tr:hover td {
  background-color: #F5F6F7 !important;
}

.table-striped tbody tr:nth-of-type(odd) td {
  background-color: #F7F8FA !important;
}

.table-bordered {
  border: 1px solid #DADDE1 !important;
}

.table-bordered th,
.table-bordered td {
  border: 1px solid #EBEDF0 !important;
}

.table-sm th,
.table-sm td {
  padding: 4px 8px !important;
}

/* ========================================
   MODALES
   ======================================== */
.modal-content {
  border: 1px solid #DADDE1 !important;
  border-radius: 6px !important;
  box-shadow: var(--fb-shadow-modal) !important;
  background-color: #ffffff !important;
}

.modal-header {
  border-bottom: 1px solid #DADDE1 !important;
  padding: 12px 16px !important;
  background-color: #F5F6F7 !important;
  border-radius: 6px 6px 0 0 !important;
}

.modal-title {
  color: #1C1E21 !important;
  font-weight: 600 !important;
  font-size: 0.9375rem !important;
}

.modal-body {
  padding: 16px !important;
  color: #1C1E21 !important;
}

.modal-footer {
  border-top: 1px solid #DADDE1 !important;
  padding: 12px 16px !important;
  background-color: #F5F6F7 !important;
  border-radius: 0 0 6px 6px !important;
  gap: 8px !important;
}

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

.btn-close {
  opacity: 0.55 !important;
}

.btn-close:hover {
  opacity: 0.85 !important;
}

/* ========================================
   ALERTAS
   ======================================== */
.alert {
  border-radius: 4px !important;
  border: 1px solid transparent !important;
  border-left-width: 4px !important;
  border-left-style: solid !important;
  padding: 10px 14px !important;
  font-size: var(--bs-font-size-base) !important;
  background-color: #ffffff !important;
  color: #1C1E21 !important;
  margin-bottom: 12px !important;
}

.alert-primary {
  border-left-color: #142A62 !important;
  background-color: #E9EDF7 !important;
  border-color: #C6D0E6 !important;
  border-left-color: #142A62 !important;
  color: #0A1738 !important;
}

.alert-success {
  border-left-color: #00A400 !important;
  background-color: #E6F6E6 !important;
  border-color: #B8E6B8 !important;
  border-left-color: #00A400 !important;
  color: #006600 !important;
}

.alert-danger {
  border-left-color: #FA383E !important;
  background-color: #FEECEC !important;
  border-color: #F5C0C2 !important;
  border-left-color: #FA383E !important;
  color: #A00024 !important;
}

.alert-warning {
  border-left-color: #FFBA00 !important;
  background-color: #FFF8E6 !important;
  border-color: #FFE8A3 !important;
  border-left-color: #FFBA00 !important;
  color: #7A5A00 !important;
}

.alert-info {
  border-left-color: #1D85FC !important;
  background-color: #E8F3FF !important;
  border-color: #B8D9FE !important;
  border-left-color: #1D85FC !important;
  color: #0A4A9E !important;
}

/* ========================================
   DROPDOWNS
   ======================================== */
.dropdown-menu {
  border: 1px solid #DADDE1 !important;
  border-radius: 6px !important;
  box-shadow: var(--fb-shadow-dropdown) !important;
  background-color: #ffffff !important;
  padding: 4px 0 !important;
  font-size: var(--bs-font-size-base) !important;
  min-width: 160px !important;
}

.dropdown-item {
  padding: 7px 14px !important;
  color: #1C1E21 !important;
  font-size: var(--bs-font-size-base) !important;
  font-weight: 400 !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: #F5F6F7 !important;
  color: #1C1E21 !important;
}

.dropdown-item:active,
.dropdown-item.active {
  background-color: #142A62 !important;
  color: #ffffff !important;
}

.dropdown-item.disabled,
.dropdown-item:disabled {
  color: #8D949E !important;
  background-color: transparent !important;
}

.dropdown-header {
  color: #606770 !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  padding: 6px 14px 4px !important;
}

.dropdown-divider {
  border-top: 1px solid #EBEDF0 !important;
  margin: 4px 0 !important;
}

/* ========================================
   BADGES
   ======================================== */
.badge {
  font-weight: 600 !important;
  padding: 3px 7px !important;
  border-radius: 3px !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.2px !important;
  line-height: 1.3 !important;
}

.bg-primary { background-color: #142A62 !important; }
.bg-success { background-color: #00A400 !important; }
.bg-danger  { background-color: #FA383E !important; }
.bg-warning { background-color: #FFBA00 !important; color: #1C1E21 !important; }
.bg-info    { background-color: #1D85FC !important; }
.bg-secondary { background-color: #8D949E !important; }
.bg-dark    { background-color: #1C1E21 !important; }
.bg-light   { background-color: #EBEDF0 !important; color: #1C1E21 !important; }

/* ========================================
   CHECKBOX / RADIO
   ======================================== */
.form-check-input {
  border: 1px solid #CCD0D5 !important;
  border-radius: 3px !important;
  background-color: #ffffff !important;
  width: 1em !important;
  height: 1em !important;
  margin-top: 0.15em !important;
  cursor: pointer !important;
  transition: background-color 0.1s ease, border-color 0.1s ease !important;
}

.form-check-input[type="radio"] {
  border-radius: 50% !important;
}

.form-check-input:checked {
  background-color: #142A62 !important;
  border-color: #142A62 !important;
}

.form-check-input:focus {
  border-color: #142A62 !important;
  box-shadow: var(--fb-shadow-focus) !important;
}

.form-check-input:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

.form-check-label {
  color: #1C1E21 !important;
  font-size: var(--bs-font-size-base) !important;
  cursor: pointer !important;
  padding-left: 2px !important;
}

.form-switch .form-check-input {
  width: 2em !important;
  border-radius: 2em !important;
}

/* ========================================
   PAGINATION
   ======================================== */
.pagination {
  gap: 2px !important;
}

.page-link {
  border: 1px solid #DADDE1 !important;
  border-radius: 4px !important;
  color: #142A62 !important;
  background: #ffffff !important;
  font-size: var(--bs-font-size-base) !important;
  font-weight: 500 !important;
  padding: 4px 10px !important;
  margin: 0 1px !important;
}

.page-link:hover {
  background: #F5F6F7 !important;
  border-color: #CCD0D5 !important;
  color: #1C1E21 !important;
}

.page-item.active .page-link {
  background: #142A62 !important;
  border-color: #142A62 !important;
  color: #ffffff !important;
}

.page-item.disabled .page-link {
  color: #8D949E !important;
  background: #F5F6F7 !important;
  border-color: #EBEDF0 !important;
}

/* ========================================
   LIST GROUP
   ======================================== */
.list-group-item {
  border: 1px solid #EBEDF0 !important;
  background: #ffffff !important;
  padding: 10px 14px !important;
  color: #1C1E21 !important;
  font-size: var(--bs-font-size-base) !important;
}

.list-group-item + .list-group-item {
  border-top: none !important;
}

.list-group-item.active {
  background: #142A62 !important;
  border-color: #142A62 !important;
  color: #ffffff !important;
}

.list-group-item:hover:not(.active) {
  background: #F5F6F7 !important;
}

.list-group {
  border-radius: 6px !important;
  overflow: hidden !important;
  box-shadow: var(--fb-shadow-card) !important;
}

/* ========================================
   PROGRESS / SPINNER
   ======================================== */
.progress {
  height: 8px !important;
  border-radius: 4px !important;
  background: #EBEDF0 !important;
  overflow: hidden !important;
}

.progress-bar {
  background: #142A62 !important;
  border-radius: 4px !important;
}

.spinner-border {
  border-color: #142A62 !important;
  border-right-color: transparent !important;
}

/* ========================================
   TOOLTIPS / POPOVERS
   ======================================== */
.tooltip-inner {
  background: #1C1E21 !important;
  border-radius: 4px !important;
  font-size: 0.75rem !important;
  padding: 5px 10px !important;
  font-weight: 500 !important;
}

.popover {
  border: 1px solid #DADDE1 !important;
  border-radius: 6px !important;
  box-shadow: var(--fb-shadow-dropdown) !important;
  font-size: var(--bs-font-size-base) !important;
}

.popover-header {
  background: #F5F6F7 !important;
  border-bottom: 1px solid #DADDE1 !important;
  font-weight: 600 !important;
  font-size: 0.8125rem !important;
}

/* ========================================
   BREADCRUMB
   ======================================== */
.breadcrumb {
  background: transparent !important;
  padding: 0 !important;
  margin-bottom: 8px !important;
  font-size: 0.75rem !important;
}

.breadcrumb-item a {
  color: #142A62 !important;
}

.breadcrumb-item.active {
  color: #606770 !important;
}

.breadcrumb-item + .breadcrumb-item::before {
  color: #8D949E !important;
}

/* ========================================
   ESTADOS DE TEXTO
   ======================================== */
.text-success { color: #00A400 !important; }
.text-danger  { color: #FA383E !important; }
.text-warning { color: #D48806 !important; }
.text-primary { color: #142A62 !important; }
.text-info    { color: #1D85FC !important; }
.text-muted   { color: #606770 !important; }
.text-dark    { color: #1C1E21 !important; }
.text-secondary { color: #606770 !important; }

/* ========================================
   UTILIDADES DE ESPACIADO (densidad Ads)
   ======================================== */
.container, .container-fluid {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

.mb-3 { margin-bottom: 10px !important; }
.mt-3 { margin-top: 10px !important; }
.mb-2 { margin-bottom: 6px !important; }
.mt-2 { margin-top: 6px !important; }
.mb-4 { margin-bottom: 16px !important; }
.mt-4 { margin-top: 16px !important; }
.mb-1 { margin-bottom: 4px !important; }
.mt-1 { margin-top: 4px !important; }

/* ========================================
   TRANSICIONES (solo elementos interactivos)
   ======================================== */
a, button, .btn, .nav-link, .form-control, .form-select,
.dropdown-item, .page-link, .list-group-item, .form-check-input {
  transition: background-color 0.12s ease,
              border-color 0.12s ease,
              color 0.12s ease,
              box-shadow 0.12s ease !important;
}

/* ========================================
   SCROLLBAR sutil
   ======================================== */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #F0F2F5;
}
::-webkit-scrollbar-thumb {
  background: #2b2c2c;
  border-radius: 4px;
  border: 2px solid #F0F2F5;
}
::-webkit-scrollbar-thumb:hover {
  background: #51555a;
}

/* ========================================
   MODO OSCURO (completo)
   ======================================== */
:root[data-bs-theme="dark"] {
  --bs-body-bg: #18191A;
  --bs-body-color: #E4E6EB;
  --bs-border-color: #3E4042;
  --fb-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --fb-shadow-dropdown: 0 4px 16px rgba(0, 0, 0, 0.4);
  --fb-shadow-modal: 0 8px 32px rgba(0, 0, 0, 0.5);
  --fb-shadow-focus: 0 0 0 2px rgba(124, 152, 214, 0.35);
}

:root[data-bs-theme="dark"] body {
  background-color: #18191A !important;
  color: #E4E6EB !important;
}

:root[data-bs-theme="dark"] .card,
:root[data-bs-theme="dark"] .dashboard-card,
:root[data-bs-theme="dark"] .stat-card,
:root[data-bs-theme="dark"] .panel {
  background-color: #242526 !important;
  border-color: #3E4042 !important;
}

:root[data-bs-theme="dark"] .card-header,
:root[data-bs-theme="dark"] .dashboard-card-header,
:root[data-bs-theme="dark"] .card-footer,
:root[data-bs-theme="dark"] .modal-header,
:root[data-bs-theme="dark"] .modal-footer {
  background-color: #1C1E21 !important;
  border-color: #3E4042 !important;
  color: #E4E6EB !important;
}

:root[data-bs-theme="dark"] .card-body,
:root[data-bs-theme="dark"] .dashboard-card-body,
:root[data-bs-theme="dark"] .modal-content {
  background-color: #242526 !important;
  border-color: #3E4042 !important;
}

:root[data-bs-theme="dark"] h1,
:root[data-bs-theme="dark"] h2,
:root[data-bs-theme="dark"] h3,
:root[data-bs-theme="dark"] h4,
:root[data-bs-theme="dark"] h5,
:root[data-bs-theme="dark"] h6,
:root[data-bs-theme="dark"] .card-title,
:root[data-bs-theme="dark"] .modal-title,
:root[data-bs-theme="dark"] .stat-value {
  color: #E4E6EB !important;
}

:root[data-bs-theme="dark"] .stat-label,
:root[data-bs-theme="dark"] .form-label,
:root[data-bs-theme="dark"] .text-muted,
:root[data-bs-theme="dark"] .text-secondary {
  color: #B0B3B8 !important;
}

:root[data-bs-theme="dark"] .form-control,
:root[data-bs-theme="dark"] .form-select {
  background-color: #3A3B3C !important;
  border-color: #4E4F50 !important;
  color: #E4E6EB !important;
}

:root[data-bs-theme="dark"] .form-control:focus,
:root[data-bs-theme="dark"] .form-select:focus {
  border-color: #9BB3E0 !important;
  background-color: #3A3B3C !important;
}

:root[data-bs-theme="dark"] .form-control::placeholder {
  color: #8A8D91 !important;
}

:root[data-bs-theme="dark"] .form-control:disabled,
:root[data-bs-theme="dark"] .form-select:disabled {
  background-color: #2A2B2C !important;
  color: #8A8D91 !important;
}

:root[data-bs-theme="dark"] .input-group-text {
  background-color: #3A3B3C !important;
  border-color: #4E4F50 !important;
  color: #B0B3B8 !important;
}

:root[data-bs-theme="dark"] .table th {
  background-color: #1C1E21 !important;
  color: #B0B3B8 !important;
  border-color: #3E4042 !important;
}

:root[data-bs-theme="dark"] .table td {
  background-color: #242526 !important;
  color: #E4E6EB !important;
  border-color: #3E4042 !important;
}

:root[data-bs-theme="dark"] .table-hover tbody tr:hover td {
  background-color: #3A3B3C !important;
}

:root[data-bs-theme="dark"] .table-striped tbody tr:nth-of-type(odd) td {
  background-color: #2A2B2C !important;
}

:root[data-bs-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand):not(.page-link) {
  color: #9BB3E0 !important;
}

:root[data-bs-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand):not(.page-link):hover {
  color: #B9CAEC !important;
}

:root[data-bs-theme="dark"] .navbar {
  background: #242526 !important;
  border-color: #3E4042 !important;
}

:root[data-bs-theme="dark"] .navbar-brand,
:root[data-bs-theme="dark"] .navbar .nav-link.active {
  color: #E4E6EB !important;
}

:root[data-bs-theme="dark"] .navbar .nav-link {
  color: #B0B3B8 !important;
}

:root[data-bs-theme="dark"] .navbar .nav-link:hover {
  color: #E4E6EB !important;
  background-color: #3A3B3C !important;
}

:root[data-bs-theme="dark"] .navbar .nav-link.active {
  background-color: #3A3B3C !important;
}

:root[data-bs-theme="dark"] .nav-tabs {
  border-color: #3E4042 !important;
}

:root[data-bs-theme="dark"] .nav-tabs .nav-link {
  color: #B0B3B8 !important;
}

:root[data-bs-theme="dark"] .nav-tabs .nav-link:hover {
  background-color: #3A3B3C !important;
  border-color: #3E4042 #3E4042 transparent !important;
  color: #E4E6EB !important;
}

:root[data-bs-theme="dark"] .nav-tabs .nav-link.active {
  background-color: #242526 !important;
  border-color: #3E4042 #3E4042 #242526 !important;
  color: #9BB3E0 !important;
}

:root[data-bs-theme="dark"] .btn-secondary {
  background-color: #3A3B3C !important;
  border-color: #4E4F50 !important;
  color: #E4E6EB !important;
}

:root[data-bs-theme="dark"] .btn-secondary:hover {
  background-color: #4E4F50 !important;
  border-color: #5A5B5C !important;
  color: #E4E6EB !important;
}

:root[data-bs-theme="dark"] .btn-outline-secondary {
  border-color: #4E4F50 !important;
  color: #B0B3B8 !important;
}

:root[data-bs-theme="dark"] .btn-outline-secondary:hover {
  background-color: #3A3B3C !important;
  color: #E4E6EB !important;
}

:root[data-bs-theme="dark"] .dropdown-menu {
  background-color: #242526 !important;
  border-color: #3E4042 !important;
}

:root[data-bs-theme="dark"] .dropdown-item {
  color: #E4E6EB !important;
}

:root[data-bs-theme="dark"] .dropdown-item:hover,
:root[data-bs-theme="dark"] .dropdown-item:focus {
  background-color: #3A3B3C !important;
  color: #E4E6EB !important;
}

:root[data-bs-theme="dark"] .dropdown-divider {
  border-color: #3E4042 !important;
}

:root[data-bs-theme="dark"] .list-group-item {
  background-color: #242526 !important;
  border-color: #3E4042 !important;
  color: #E4E6EB !important;
}

:root[data-bs-theme="dark"] .list-group-item:hover:not(.active) {
  background-color: #3A3B3C !important;
}

:root[data-bs-theme="dark"] .page-link {
  background: #242526 !important;
  border-color: #3E4042 !important;
  color: #9BB3E0 !important;
}

:root[data-bs-theme="dark"] .page-link:hover {
  background: #3A3B3C !important;
  color: #E4E6EB !important;
}

:root[data-bs-theme="dark"] .page-item.disabled .page-link {
  background: #1C1E21 !important;
  border-color: #3E4042 !important;
  color: #6A6D71 !important;
}

:root[data-bs-theme="dark"] .alert {
  background-color: #242526 !important;
  border-color: #3E4042 !important;
  color: #E4E6EB !important;
}

:root[data-bs-theme="dark"] .alert-primary {
  background-color: #16264F !important;
  border-color: #2A3F6A !important;
  color: #B9CAEC !important;
}

:root[data-bs-theme="dark"] .alert-success {
  background-color: #1A2E1A !important;
  border-color: #2A4A2A !important;
  color: #6DD66D !important;
}

:root[data-bs-theme="dark"] .alert-danger {
  background-color: #3A1A1A !important;
  border-color: #5A2A2A !important;
  color: #FF8A8E !important;
}

:root[data-bs-theme="dark"] .alert-warning {
  background-color: #3A2E0A !important;
  border-color: #5A4A1A !important;
  color: #FFD666 !important;
}

:root[data-bs-theme="dark"] .progress {
  background: #3A3B3C !important;
}

:root[data-bs-theme="dark"] .form-check-input {
  background-color: #3A3B3C !important;
  border-color: #4E4F50 !important;
}

:root[data-bs-theme="dark"] .form-check-label {
  color: #E4E6EB !important;
}

:root[data-bs-theme="dark"] ::-webkit-scrollbar-track {
  background: #18191A;
}
:root[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #4E4F50;
  border-color: #18191A;
}
:root[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: #5A5B5C;
}