@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700");

/* Modo claro (default) */
:root {
  --brand-primary: #0066CC;
  --brand-primary-light: #66B2FF;
  --brand-primary-dark: #003366;
  --brand-gradient-start: #0040AA;
  --brand-gradient-end: #007BFF;
  --brand-text: #2F4FA3;
  --brand-white: #ffffff;
  --brand-gray: #99abb4;
  --brand-gray-dark: #263238;
  --brand-gray-mid: #607d8b;
}

:root.pink {
  --brand-primary: #E31D6B;         /* rosa fuerte base */
  --brand-primary-light: #F279A8;   /* rosa intermedio */
  --brand-primary-dark: #8B0E3F;    /* rosa oscuro profundo */
  --brand-gradient-start: #C01558;  /* inicio gradiente */
  --brand-gradient-end: #FF5A9C;    /* fin gradiente */
  --brand-text: #B5144F;            /* texto principal */
  --brand-white: #ffffff;
  --brand-gray: #C9CBD3;            /* gris medio adaptado */
  --brand-gray-dark: #373A40;
  --brand-gray-mid: #7C808A;
}


/* 🌙 Modo oscuro */
:root.dark {
  --brand-primary: #3399FF;           /* Azul principal más brillante */
  --brand-primary-light: #66CCFF;     /* Azul claro para hover */
  --brand-primary-dark: #001F33;      /* Azul muy oscuro */
  --brand-gradient-start: #001A33;    /* Inicio gradiente oscuro */
  --brand-gradient-end: #004080;      /* Fin gradiente */
  --brand-text: #B0C7FF;              /* Texto azul claro */
  --brand-white: #121212;             /* Fondo oscuro global */
  --brand-gray: #7a8691;              /* Gris íconos sidebar */
  --brand-gray-dark: #d0d4d7;         /* Gris claro para texto */
  --brand-gray-mid: #a0aab5;          /* Gris medio claro */
}

/*Preloader*/
.preloader {
  width: 100%;
  height: 100%;
  top: 0px;
  position: fixed;
  z-index: 99999;
  background: var(--brand-white);
}

.preloader .cssload-speeding-wheel {
  position: absolute;
  top: calc(50% - 3.5px);
  left: calc(50% - 3.5px);
}

/*******************
/*Top bar
*******************/
.topbar {
  background: var(--brand-primary);
  /* Old browsers */
  background: -moz-linear-gradient(left, var(--brand-gradient-start) 0%, var(--brand-gradient-end) 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(left, var(--brand-gradient-start) 0%, var(--brand-gradient-end) 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, var(--brand-gradient-start) 0%, var(--brand-gradient-end) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.topbar .top-navbar .navbar-header .navbar-brand .dark-logo {
  display: none;
}

.topbar .top-navbar .navbar-header .navbar-brand .light-logo {
  display: inline-block;
  color: rgba(255, 255, 255, 0.8);
}

.topbar .navbar-light .navbar-nav .nav-item > a.nav-link {
  color: rgba(255, 255, 255, 0.8) !important;
}

.topbar .navbar-light .navbar-nav .nav-item > a.nav-link:hover,
.topbar .navbar-light .navbar-nav .nav-item > a.nav-link:focus {
  color: var(--brand-white) !important;
}

/*******************
/*General Elements
*******************/
a {
  color: var(--brand-primary);
}

a.link:hover, a.link:focus {
  color: var(--brand-primary) !important;
}

.bg-theme {
  background-color: var(--brand-primary) !important;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}

.right-sidebar .rpanel-title {
  background: var(--brand-primary);
}

.stylish-table tbody tr:hover,
.stylish-table tbody tr.active {
  border-left: 4px solid var(--brand-primary);
}

.text-themecolor {
  color: var(--brand-primary) !important;
}

.profile-tab li a.nav-link.active,
.customtab li a.nav-link.active {
  border-bottom: 2px solid var(--brand-primary);
  color: var(--brand-primary);
}

.profile-tab li a.nav-link:hover,
.customtab li a.nav-link:hover {
  color: var(--brand-primary);
}

/*******************
/*Buttons
*******************/
.btn-themecolor,
.btn-themecolor.disabled {
  background: var(--brand-primary);
  color: var(--brand-white);
  border: 1px solid var(--brand-primary);
}

.btn-themecolor:hover,
.btn-themecolor.disabled:hover {
  background: var(--brand-primary);
  opacity: 0.7;
  border: 1px solid var(--brand-primary);
}

.btn-themecolor.active,
.btn-themecolor:focus,
.btn-themecolor.disabled.active,
.btn-themecolor.disabled:focus {
  background: var(--brand-primary-light);
}

/*******************
/*sidebar navigation
*******************/
.sidebar-nav {
  background: var(--brand-white);
}

.sidebar-nav ul li a {
  color: var(--brand-gray-mid);
}

.sidebar-nav ul li a.active,
.sidebar-nav ul li a:hover {
  color: var(--brand-primary);
}

.sidebar-nav ul li a.active {
  color: var(--brand-gray-dark);
}

.sidebar-nav ul li.nav-small-cap {
  color: var(--brand-gray);
}

.sidebar-nav > ul > li.active > a,
.sidebar-nav > ul > li.active:hover > a {
  color: var(--brand-white) !important;
  background: var(--brand-primary) !important;
}

.sidebar-nav > ul > li.active > a i,
.sidebar-nav > ul > li.active:hover > a i {
  color: var(--brand-white) !important;
}

.sidebar-nav > ul > li.active > a:after,
.sidebar-nav > ul > li.active:hover > a:after {
  border-color: var(--brand-white);
}

.sidebar-nav > ul > li > a.active i,
.sidebar-nav > ul > li > a:hover i {
  color: var(--brand-primary);
}

.sidebar-nav > ul > li > a i {
  color: var(--brand-gray);
}

.sidebar-nav > ul > li > a.active {
  font-weight: 400;
  background: var(--brand-white);
  color: var(--brand-primary);
}