:root {
  --otec-navy: #0b0b0c;
  --otec-navy-2: #303030;
  --otec-blue: #1673b0;
  --otec-sky: #2c9ee0;
  --otec-sky-300: #7cc4ee;
  --otec-sky-200: #bfe4f8;
  --otec-sky-100: #e3f1fb;
  --otec-sky-50: #f2f8fc;
  --otec-ink: #23272b;
  --otec-muted: #5a6068;
  --otec-line: #dde2e6;
  --otec-font-head: 'Poppins', sans-serif;
  --otec-font-body: 'Montserrat', sans-serif;

  --bs-primary: #1673b0;
  --bs-primary-rgb: 22, 115, 176;
  --bs-link-color: #1673b0;
  --bs-link-color-rgb: 22, 115, 176;
  --bs-link-hover-color: #0b0b0c;
  --bs-link-hover-color-rgb: 11, 11, 12;
  --bs-body-color: #23272b;
  --bs-body-color-rgb: 35, 39, 43;
  --bs-heading-color: #0b0b0c;
  --bs-border-color: #dde2e6;
  --bs-body-font-family: 'Montserrat', sans-serif;
}

body {
  font-family: var(--otec-font-body);
}

h1:not(.otec-page h1):not(.login-layout-left h1),
h2:not(.otec-page h2):not(.login-layout-left h2),
h3:not(.otec-page h3):not(.login-layout-left h3),
h4:not(.otec-page h4):not(.login-layout-left h4),
.h1:not(.otec-page .h1):not(.login-layout-left .h1),
.h2:not(.otec-page .h2):not(.login-layout-left .h2),
.h3:not(.otec-page .h3):not(.login-layout-left .h3),
.h4:not(.otec-page .h4):not(.login-layout-left .h4) {
  font-family: var(--otec-font-head);
  color: var(--otec-navy);
}

/* 2. Botones */
.btn {
  border-radius: 2px;
  font-weight: 500;
}

.btn-primary {
  --bs-btn-bg: #1673b0;
  --bs-btn-border-color: #1673b0;
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: #0a2540;
  --bs-btn-hover-border-color: #0a2540;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #0a2540;
  --bs-btn-active-border-color: #0a2540;
  --bs-btn-active-color: #fff;
  --bs-btn-focus-shadow-rgb: 124, 196, 238;
  --bs-btn-disabled-bg: #1673b0;
  --bs-btn-disabled-border-color: #1673b0;
}

.btn-outline-primary {
  --bs-btn-color: #1673b0;
  --bs-btn-border-color: #1673b0;
  --bs-btn-hover-bg: #1673b0;
  --bs-btn-hover-border-color: #1673b0;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #0a2540;
  --bs-btn-active-border-color: #0a2540;
  --bs-btn-focus-shadow-rgb: 124, 196, 238;
}

.btn-secondary {
  --bs-btn-bg: #fff;
  --bs-btn-color: #0a2540;
  --bs-btn-border-color: #cfe5f4;
  --bs-btn-hover-bg: #e3f1fb;
  --bs-btn-hover-border-color: #7cc4ee;
  --bs-btn-hover-color: #0a2540;
  --bs-btn-active-bg: #bfe4f8;
  --bs-btn-active-border-color: #7cc4ee;
  --bs-btn-active-color: #0a2540;
}

/* 3. Barra superior */
.navbar.fixed-top {
  background-color: var(--otec-navy-2) !important;
  border-bottom: 3px solid var(--otec-sky) !important;
}

.navbar.fixed-top .nav-link,
.navbar.fixed-top .navbar-brand,
.navbar.fixed-top .icon,
.navbar.fixed-top .btn-link,
.navbar.fixed-top .dropdown-toggle,
.navbar.fixed-top .popover-region-toggle,
.navbar.fixed-top .nav-item > a {
  color: #fff !important;
}

.primary-navigation .nav-link {
  font-family: var(--otec-font-body);
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.navbar.fixed-top .nav-link:hover,
.navbar.fixed-top .nav-link.active,
.navbar.fixed-top .navbar-brand:hover,
.navbar.fixed-top .btn-link:hover,
.navbar.fixed-top .dropdown-toggle:hover,
.navbar.fixed-top .popover-region-toggle:hover,
.navbar.fixed-top .nav-item > a:hover {
  color: var(--otec-sky-300) !important;
}

.navbar.fixed-top .nav-item.active > a,
.navbar.fixed-top .nav-link.active {
  border-bottom: 3px solid var(--otec-sky);
}

.navbar.fixed-top .dropdown-menu a,
.navbar.fixed-top .dropdown-menu .dropdown-item {
  color: var(--otec-ink) !important;
}

.navbar.fixed-top .dropdown-menu .dropdown-item:hover,
.navbar.fixed-top .dropdown-menu a:hover {
  background: #e3f1fb;
}

/* 4. Cabecera de pagina */
.page-header-headings h1,
#page-header h1 {
  font-family: var(--otec-font-head);
  font-weight: 700;
  color: var(--otec-navy);
  letter-spacing: .02em;
}

.breadcrumb a {
  color: var(--otec-blue);
}

/* 5. Tarjetas */
.card {
  border-color: var(--otec-line);
  border-radius: 0;
}

.card-header {
  background: #f3f4f5;
  border-bottom-color: var(--otec-line);
}

.card.dashboard-card {
  border-top: 3px solid var(--otec-sky);
}

.card.dashboard-card:hover {
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}

.dashboard-card .coursename,
.course-card .coursename {
  color: var(--otec-navy);
  font-family: var(--otec-font-head);
  font-weight: 600;
}

/* 6. Navegacion secundaria y pestanas */
.secondary-navigation .nav-link.active,
.nav-tabs .nav-link.active {
  color: var(--otec-navy);
  border-bottom: 3px solid var(--otec-sky);
  font-weight: 600;
}

.secondary-navigation .nav-link,
.nav-tabs .nav-link {
  color: var(--otec-muted);
}

.nav-pills .nav-link.active {
  background-color: var(--otec-blue);
}

/* 7. Formularios */
.form-control,
.form-select {
  border-radius: 2px;
  border-color: var(--otec-line);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--otec-sky-300);
  box-shadow: 0 0 0 .2rem rgba(124,196,238,.35);
}

.form-check-input:checked {
  background-color: var(--otec-blue);
  border-color: var(--otec-blue);
}

label,
.form-label {
  color: var(--otec-ink);
}

/* 8. Componentes */
.page-item.active .page-link {
  background-color: var(--otec-blue);
  border-color: var(--otec-blue);
}

.page-link {
  color: var(--otec-blue);
}

.badge.bg-primary {
  background-color: var(--otec-blue) !important;
}

.progress-bar {
  background-color: var(--otec-sky);
}

.alert-info {
  background: var(--otec-sky-100);
  border-color: var(--otec-sky-200);
  color: var(--otec-navy);
}

.generaltable th,
.table > thead th {
  background: #f3f4f5;
  color: var(--otec-navy);
}

.btn-footer-popover {
  background-color: var(--otec-blue);
  border-color: var(--otec-blue);
  color: #fff;
}

/* 9. Pagina de login */
body.pagelayout-login #page .login-layout-left {
  background-image: url('pix/altiplano/chungara_hero.jpg') !important;
  background-size: cover !important;
  background-position: center 35% !important;
}

.login-layout-left-content {
  background: rgba(0,0,0,.62);
  color: #fff;
  border-radius: 0;
}

.login-layout-left-content h1,
.login-layout-left-content .h2 {
  color: #fff;
  font-family: var(--otec-font-head);
  font-weight: 700;
}

.login-layout-stat-value {
  color: var(--otec-sky-200);
  font-family: var(--otec-font-head);
  font-weight: 700;
}

body.pagelayout-login .login-container h1,
body.pagelayout-login .login-container .h2 {
  color: var(--otec-navy);
  font-family: var(--otec-font-head);
  font-weight: 700;
}

#loginbtn {
  background-color: var(--otec-blue);
  border-color: var(--otec-blue);
}

#loginbtn:hover {
  background-color: var(--otec-navy);
  border-color: var(--otec-navy);
}

body.pagelayout-login a {
  color: var(--otec-blue);
}

/* 10. Movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: .01ms !important;
  }
}