/*
 * ViviMatch Brand Override
 * Sobreescribe los colores por defecto de Metronic con la identidad ViviMatch.
 * Incluir SIEMPRE al final, después de los CSS de Metronic.
 *
 * Paleta AZUL ELÉCTRICO del logo (muestreada de logo-vivimatch.png):
 *   Azul primario  → #0040F0  (= PRIMARY, "Match" del logo)
 *   Azul marino    → #001040  ("Vivi" del logo)
 *   Acento teal    → #2596BE  (círculos del isotipo)
 *   Degradado      → #2E5FF5 (0%) · #0040F0 (55%) · #001C70 (100%)
 *   Tagline        → Gray #9CA3AF
 */

/* ─── 1. Variables raíz ─────────────────────────────────── */
:root {
  --vm-900:            #001040;   /* navy "Vivi"         */
  --vm-800:            #001C70;   /* gradient end        */
  --vm-700:            #0028A0;
  --vm-600:            #0030C0;   /* activo / hover      */
  --vm-500:            #0040F0;   /* PRIMARY — azul logo */
  --vm-400:            #2E5FF5;   /* gradient start      */
  --vm-300:            #6690FA;
  --vm-200:            #C7D6FD;
  --vm-100:            #E5ECFE;
  --vm-50:             #F4F7FF;
  --vm-navy:           #001040;   /* fondo hero / sidebar */
  --vm-teal:           #2596BE;   /* acento del isotipo   */
  --vm-text-muted:     #6B7280;

  /* Degradado oficial del logo */
  --vm-gradient:       linear-gradient(135deg, #2E5FF5 0%, #0040F0 55%, #001C70 100%);

  /* Bootstrap / Metronic overrides */
  --bs-primary:        #0040F0;
  --bs-primary-rgb:    0, 64, 240;
  --kt-primary:        #0040F0;
  --kt-primary-active: #0030C0;
  --kt-primary-light:  #E5ECFE;
  --kt-primary-inverse:#ffffff;
}

/* ─── 2. Botones ────────────────────────────────────────── */
.btn-primary {
  background-color: var(--vm-500) !important;
  border-color:     var(--vm-500) !important;
  color:            #fff !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--vm-600) !important;
  border-color:     var(--vm-600) !important;
}
.btn-light-primary {
  background-color: var(--vm-100) !important;
  color:            var(--vm-500) !important;
  border-color:     transparent !important;
}
.btn-light-primary:hover {
  background-color: var(--vm-500) !important;
  color:            #fff !important;
}

/* ─── 3. Sidebar ────────────────────────────────────────── */
.app-sidebar,
#vm-sidebar,
.sidebar-wrapper {
  background: var(--vm-navy) !important;
  background: linear-gradient(180deg, var(--vm-navy) 0%, #0A1230 100%) !important;
}

.nav-item {
  color: rgba(255,255,255,0.65) !important;
}
.nav-item:hover {
  background: rgba(255,255,255,0.07) !important;
  color: rgba(255,255,255,0.9) !important;
}
.nav-item.active {
  background: var(--vm-600) !important;
  color: #fff !important;
}
.nav-item.active .nav-icon,
.nav-item.active i {
  color: var(--vm-300) !important;
}

/* ─── 4. Campana / badges ───────────────────────────────── */
#campana-badge,
#sidebar-alert-badge,
.badge-notification {
  background: var(--vm-500) !important;
}

/* Badges Metronic */
.badge.badge-primary,
span.badge-primary {
  background-color: var(--vm-500) !important;
}
.badge.badge-light-primary {
  background-color: var(--vm-100) !important;
  color:            var(--vm-500) !important;
}

/* ─── 5. Links y focus ──────────────────────────────────── */
a.text-primary,
.text-primary { color: var(--vm-500) !important; }

a:focus-visible { outline-color: var(--vm-400); }

/* ─── 6. Formularios ────────────────────────────────────── */
.form-control:focus,
.form-select:focus {
  border-color:  var(--vm-400) !important;
  box-shadow:    0 0 0 3px rgba(0,64,240,.18) !important;
}
.form-check-input:checked {
  background-color: var(--vm-500) !important;
  border-color:     var(--vm-500) !important;
}
.form-switch .form-check-input:checked {
  background-color: var(--vm-500) !important;
}

/* ─── 7. Tablas / hover ─────────────────────────────────── */
.table-hover tbody tr:hover td { background: var(--vm-50) !important; }

/* ─── 8. Progress bars ──────────────────────────────────── */
.progress-bar { background-color: var(--vm-500) !important; }
.progress-bar.bg-primary { background-color: var(--vm-500) !important; }

/* ─── 9. Paginación ─────────────────────────────────────── */
.page-item.active .page-link {
  background-color: var(--vm-500) !important;
  border-color:     var(--vm-500) !important;
}
.page-link { color: var(--vm-500) !important; }
.page-link:hover { color: var(--vm-600) !important; }

/* ─── 10. Alertas flash ─────────────────────────────────── */
.alert-primary {
  background-color: var(--vm-100) !important;
  border-color:     var(--vm-300) !important;
  color:            var(--vm-700) !important;
}

/* ─── 11. Dropdown / menú desplegable ───────────────────── */
.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--vm-500) !important;
}

/* ─── 12. Breadcrumb ────────────────────────────────────── */
.breadcrumb-item a { color: var(--vm-500) !important; }
.breadcrumb-item.active { color: var(--vm-text-muted) !important; }

/* ─── 13. Sidebar logo ──────────────────────────────────── */
.sidebar-logo { display: flex; align-items: center; padding: 20px 16px 12px; }
.sidebar-logo img { height: 36px; width: auto; }

/* ─── 14. Portal público — colores hero ─────────────────── */
.btn-hero-primary,
.portal-btn-primary {
  background: var(--vm-500) !important;
  color: #fff !important;
  border-color: var(--vm-500) !important;
}
.btn-hero-primary:hover,
.portal-btn-primary:hover {
  background: var(--vm-600) !important;
  border-color: var(--vm-600) !important;
}
.portal-hero-bg     { background: linear-gradient(135deg, var(--vm-navy) 0%, var(--vm-800) 100%) !important; }
.portal-accent      { color: var(--vm-500) !important; }
.portal-accent-bg   { background: var(--vm-100) !important; }

/* ─── 15. Score bars (matches / leads) ──────────────────── */
.score-bar-fill { background: linear-gradient(90deg, var(--vm-700), var(--vm-400)) !important; }

/* ─── 16. Cards ─────────────────────────────────────────── */
.card-header-primary {
  background: var(--vm-500) !important;
  color: #fff !important;
}
.card.card-vm-accent {
  border-left: 4px solid var(--vm-500) !important;
}

/* ─── 17. Metronic KTMenu active ────────────────────────── */
[data-kt-menu-trigger] .menu-item.active > .menu-link,
.menu-item.here > .menu-link {
  background-color: var(--vm-600) !important;
  color: #fff !important;
}
.menu-item:hover > .menu-link {
  background-color: rgba(0,64,240,.12) !important;
  color: var(--vm-500) !important;
}