/* nav-academy.css — header and stock tabs in the Academy style (oct 2026).
   Loaded LAST on every page with a header, so it wins over each page's own CSS.
   Header: the active link is a soft teal pill with a dot (the "kicker" treatment); hover is a
   light teal wash. Stock tabs (.paginas): active in ink, hover in a light teal wash. */
:root { --nav-ink: #16242a; --nav-line: rgba(22, 36, 42, 0.09); --nav-teal: #548C92; --nav-teal-dark: #285260; }

/* ===== Header ===== */
.topbar, .seccionFija .arriba { border-bottom-color: var(--nav-line) !important; }
.brand-name { font-weight: 800 !important; letter-spacing: -0.02em !important; color: var(--nav-ink) !important; }
.brand-logo { border-color: var(--nav-line) !important; box-shadow: none !important; }

.af-nav__link, .busqueda-af-nav .af-nav__link, .af-nav-mobile .af-nav__link {
  position: relative;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  color: rgba(22, 36, 42, 0.62) !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  padding: 8px 14px !important;
  background: transparent !important;
  transition: background .15s ease, color .15s ease !important;
}
.af-nav__link:hover, .busqueda-af-nav .af-nav__link:hover {
  background: rgba(84, 140, 146, 0.08) !important;
  color: var(--nav-ink) !important;
}
.af-nav__link.is-active, .busqueda-af-nav .af-nav__link.is-active, .af-nav-mobile .af-nav__link.is-active {
  background: rgba(84, 140, 146, 0.12) !important;
  color: var(--nav-teal-dark) !important;
  font-weight: 700 !important;
  padding-left: 22px !important;
}
.af-nav__link.is-active::before, .busqueda-af-nav .af-nav__link.is-active::before {
  content: "";
  position: absolute;
  left: 10px; top: 50%;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--nav-teal);
  transform: translateY(-50%);
}

/* profile pill (non-premium); the gold premium pill keeps its own styles */
.perfilUsuario:not(.is-premium) { background: #fff !important; border: 1px solid var(--nav-line) !important; box-shadow: none !important; border-radius: 999px !important; }
.perfilUsuario:not(.is-premium):hover { background: rgba(84, 140, 146, 0.06) !important; }
.perfilUsuario:not(.is-premium) .perfilCirculo { background: var(--nav-teal-dark) !important; }
.perfilUsuario:not(.is-premium) .nombreUsuario { color: var(--nav-ink) !important; font-weight: 700 !important; }

/* ===== Stock tabs ===== */
/* Hover: light teal wash on any tab. The active tab of each page keeps its ink background:
   each page marks it with its own class (.summary, .profile, …) in <page>-academy.css, so the
   hover below must not apply to that one. The data-nav-active hook is set by the inline script
   in each stock page (body[data-nav-active="scores"] → .paginas .scores). */
@media (min-width: 769px) {
  .paginas .elementoNav:hover {
    background: rgba(84, 140, 146, 0.08) !important;
    background-color: rgba(84, 140, 146, 0.08) !important;
    border-color: transparent !important;
    color: var(--nav-ink) !important;
    transform: none !important;
    box-shadow: none !important;
  }
  .paginas .elementoNav:hover h3 { color: var(--nav-ink) !important; }
  body[data-nav-active="summary"] .paginas .summary:hover,
  body[data-nav-active="profile"] .paginas .profile:hover,
  body[data-nav-active="statistics"] .paginas .statistics:hover,
  body[data-nav-active="scores"] .paginas .scores:hover,
  body[data-nav-active="financials"] .paginas .financials:hover,
  body[data-nav-active="analysis"] .paginas .analysis:hover,
  body[data-nav-active="owners"] .paginas .owners:hover,
  body[data-nav-active="news"] .paginas .news:hover {
    background: var(--nav-ink) !important;
    background-color: var(--nav-ink) !important;
    border-color: var(--nav-ink) !important;
    color: #fff !important;
  }
  body[data-nav-active] .paginas .elementoNav:hover h3 { color: inherit !important; }
}