@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=Barlow:wght@300;400;500;600;700&display=swap");

:root {
  --rfet-navy: #061732;
  --rfet-blue: #1A266A;
  --rfet-blue-mid: #143A6B;
  --rfet-blue-light: #2476D2;
  --rfet-red: #E31F2A;
  --rfet-yellow: #FFED00;
  --rfet-green: #009447;
  --rfet-bg: #F4F6FA;
  --rfet-line: #E3E7EE;
  --rfet-text: #0A2240;
  --rfet-muted: #5A6A83;
}

html { scroll-behavior: smooth; }

body {
  color: var(--rfet-text);
  background: var(--rfet-bg);
  font-family: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--rfet-blue);
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 800;
  letter-spacing: .005em;
  line-height: 1.08;
}

h1, h2, .h1, .h2 { text-transform: uppercase; }

a {
  color: #1F5298;
  text-underline-offset: 3px;
}

a:hover { color: var(--rfet-red); }

/* Cabecera institucional */
.navbar.fixed-top {
  min-height: 60px;
  background: var(--rfet-blue) !important;
  border-bottom: 3px solid var(--rfet-red);
  box-shadow: 0 4px 20px rgba(6, 23, 50, .22);
}

.navbar.fixed-top .navbar-brand,
.navbar.fixed-top .nav-link,
.navbar.fixed-top .btn,
.navbar.fixed-top .login,
.navbar.fixed-top .login a,
.navbar.fixed-top .usertext,
.navbar.fixed-top label,
.navbar.fixed-top .form-check-label,
.navbar.fixed-top .custom-control-label {
  color: #FFF !important;
}

.navbar.fixed-top .navbar-brand {
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: .025em;
  text-transform: uppercase;
}

.navbar.fixed-top .nav-link {
  border-radius: 4px;
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.navbar.fixed-top .nav-link:hover,
.navbar.fixed-top .nav-link:focus,
.navbar.fixed-top .nav-link.active {
  color: #FFF !important;
  background: rgba(255, 255, 255, .11);
}

.primary-navigation .navigation .nav-link.active::before {
  border-bottom-color: var(--rfet-red);
}

.navbar.fixed-top .divider { border-color: rgba(255, 255, 255, .2); }
.navbar.fixed-top .icon { color: inherit; }

/* Lienzo y encabezados */
#page.drawers .main-inner,
.pagelayout-login #page,
.pagelayout-base #page {
  background: #FFF;
}

#page.drawers .main-inner {
  border: 1px solid var(--rfet-line);
  border-radius: 8px;
  box-shadow: 0 4px 18px rgba(10, 34, 64, .07);
}

#page-header {
  position: relative;
  margin-bottom: 1.5rem;
}

#page-header::after {
  display: block;
  width: 100%;
  height: 4px;
  margin-top: 1rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--rfet-red) 0 34%, var(--rfet-yellow) 34% 66%, var(--rfet-blue-light) 66% 100%);
  content: "";
}

.page-context-header .page-header-headings h1 {
  color: var(--rfet-blue);
  font-size: clamp(2rem, 4vw, 3rem);
}

.breadcrumb {
  font-size: .83rem;
  font-weight: 600;
  letter-spacing: .03em;
}

.breadcrumb-item + .breadcrumb-item::before { color: var(--rfet-red); }

.secondary-navigation {
  border-bottom: 1px solid var(--rfet-line);
}

.secondary-navigation .nav-link {
  color: var(--rfet-blue);
  font-weight: 600;
}

.secondary-navigation .nav-link.active {
  color: var(--rfet-blue);
  border-bottom-color: var(--rfet-red);
}

/* Tarjetas, bloques y cursos */
.card,
.coursebox,
.block,
.activity-item {
  border: 1px solid var(--rfet-line);
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(10, 34, 64, .06);
}

.card-header,
.block .card-title {
  color: var(--rfet-blue);
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 800;
  letter-spacing: .025em;
  text-transform: uppercase;
}

.coursebox {
  position: relative;
  padding: 1.35rem !important;
  border-left: 4px solid var(--rfet-blue);
  background: #FFF;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.coursebox:hover {
  transform: translateY(-3px);
  border-left-color: var(--rfet-red);
  box-shadow: 0 16px 34px -14px rgba(10, 34, 64, .28);
}

.coursebox .coursename a,
.coursebox h3 a,
.course-card .card-title a {
  color: var(--rfet-blue);
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  text-transform: uppercase;
}

.coursebox .coursename a:hover,
.coursebox h3 a:hover,
.course-card .card-title a:hover { color: var(--rfet-red); }

.activity-item {
  border-left: 3px solid transparent;
  background: #FFF;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.activity-item:hover {
  border-left-color: var(--rfet-blue-light);
  box-shadow: 0 8px 20px rgba(10, 34, 64, .09);
}

/* Botones y formularios */
.btn {
  border-radius: 4px;
  font-weight: 600;
  letter-spacing: .035em;
}

.btn-primary {
  color: #FFF;
  background: var(--rfet-red);
  border-color: var(--rfet-red);
  box-shadow: 0 7px 18px -8px rgba(227, 31, 42, .75);
}

.btn-primary:hover,
.btn-primary:focus {
  color: #FFF;
  background: #B51924;
  border-color: #B51924;
  transform: translateY(-1px);
}

.btn-secondary,
.btn-outline-secondary {
  color: var(--rfet-blue);
  background: #FFF;
  border-color: #AAB8CF;
}

.btn-secondary:hover,
.btn-outline-secondary:hover {
  color: #FFF;
  background: var(--rfet-blue);
  border-color: var(--rfet-blue);
}

.form-control,
.custom-select,
.form-select {
  border-color: #C8D3E6;
  border-radius: 4px;
}

.form-control:focus,
.custom-select:focus,
.form-select:focus {
  border-color: var(--rfet-blue-light);
  box-shadow: 0 0 0 .2rem rgba(36, 118, 210, .18);
}

:focus-visible {
  outline: 3px solid rgba(255, 237, 0, .9);
  outline-offset: 2px;
}

.badge-primary,
.bg-primary { background-color: var(--rfet-blue) !important; }
.badge-danger,
.bg-danger { background-color: var(--rfet-red) !important; }

.text-primary { color: var(--rfet-blue) !important; }
.border-primary { border-color: var(--rfet-blue) !important; }
.btn-link { color: #1F5298; }
.btn-link:hover { color: var(--rfet-red); }
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link,
.dropdown-item.active,
.dropdown-item:active,
.page-item.active .page-link,
.progress-bar {
  color: #FFF;
  background-color: var(--rfet-blue);
}

.page-item.active .page-link,
.custom-control-input:checked ~ .custom-control-label::before,
.form-check-input:checked {
  background-color: var(--rfet-blue);
  border-color: var(--rfet-blue);
}

.alert-info {
  color: var(--rfet-blue);
  background: #EAF2FB;
  border-color: #C8DDF4;
}

/* Cajones y navegación del curso */
.drawer,
.courseindex {
  background: #FFF;
  border-color: var(--rfet-line);
}

.courseindex .courseindex-section-title,
.drawer .list-group-item-action {
  color: var(--rfet-blue);
  font-weight: 600;
}

.courseindex .courseindex-section.current,
.courseindex .courseindex-section:hover,
.drawer .list-group-item-action:hover {
  background: rgba(36, 118, 210, .08);
}

.drawer-toggles .drawer-toggler .btn {
  color: #FFF;
  background: var(--rfet-blue);
  border-color: var(--rfet-blue);
}

/* Acceso y pie */
.pagelayout-login #page {
  background:
    radial-gradient(circle at 80% 15%, rgba(36, 118, 210, .35), transparent 38%),
    linear-gradient(125deg, var(--rfet-navy), var(--rfet-blue));
}

.login-container {
  border: 1px solid rgba(122, 179, 237, .25);
  border-top: 4px solid var(--rfet-red);
  border-radius: 8px;
  box-shadow: 0 24px 60px rgba(6, 23, 50, .38);
}

#page-footer {
  color: #AAB8CF;
  background: var(--rfet-navy);
  border-top: 4px solid var(--rfet-red);
}

#page-footer a { color: #DDE4F0; }
#page-footer a:hover { color: #FFF; }

/* Móvil */
@media (max-width: 767.98px) {
  .navbar.fixed-top { min-height: 60px; }
  #page.drawers .main-inner { border-radius: 0; }
  .page-context-header .page-header-headings h1 { font-size: 2rem; }
  .coursebox { padding: 1rem !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}