/*
 * klashub-theme.css
 * Paleta do Conect Kids: roxo profundo com dourado.
 *
 * Cores tiradas da propria logo (indigo #28048c, amarelo #fad823, magenta
 * #fc0080) e da pagina de vendas da marca: fundo roxo escuro, um dourado
 * fosco como unico destaque.
 *
 * O amarelo da logo tem saturacao de 96%: bom em arte, ruim em preenchimento
 * de botao. O dourado #e6c458 e a versao utilizavel dele (S 73%), o mesmo tom
 * que a pagina de vendas ja usa.
 *
 * SOBRE OS SELETORES COM `html`:
 * o customizer do tema (template-customizer.js) reinjeta core-dark.css e
 * theme-default-dark.css no fim do documento, depois desta folha. Vencer por
 * ordem de origem nao funciona. Prefixar com `html` leva a especificidade a
 * (0,1,1), acima do `:root` e do `.btn-primary` do tema, que sao (0,1,0).
 ******************************************************************************/

:root {
  /* Cores da marca, exatamente como aparecem na logo */
  --kh-brand-indigo: #28048c;
  --kh-brand-yellow: #fad823;
  --kh-brand-magenta: #fc0080;
}

/* =========================================================================
 * 1. TOKENS: MODO ESCURO (o padrao deste painel)
 * ========================================================================= */

html.dark-style {
  /* Superficies em roxo profundo. Nunca preto puro. */
  --kh-bg: #150a28;
  --kh-bg-deep: #0e0619;
  --kh-surface: #1e1038;
  --kh-surface-2: #271646;
  --kh-surface-3: #331f5c;
  --kh-line: #3a2359;
  --kh-line-soft: #2b1943;

  /* Superficie da barra de navegacao. Um degrau de +6 em L* acima do fundo
     do corpo: separa sem virar outra cor. Quase opaca, para o brilho roxo
     do topo nao atravessar e apagar a barra. */
  --kh-chrome: rgba(34, 20, 67, 0.94);
  --kh-chrome-line: #33205a;

  --kh-gold: #e6c458;
  --kh-gold-hover: #efd47f;
  --kh-gold-press: #d4b03f;
  --kh-gold-ink: #2a1c00;
  --kh-gold-wash: rgba(230, 196, 88, 0.13);
  --kh-gold-line: rgba(230, 196, 88, 0.32);

  --kh-text: #ffffff;
  --kh-text-muted: #b4a6c8;
  --kh-text-dim: #8877a3;

  /* Reescrita dos tokens do Bootstrap */
  --bs-body-bg: #150a28;
  --bs-body-bg-rgb: 21, 10, 40;
  --bs-body-color: #b4a6c8;
  --bs-body-color-rgb: 180, 166, 200;
  --bs-heading-color: #ffffff;
  --bs-emphasis-color: #ffffff;
  --bs-border-color: #3a2359;
  --bs-border-color-translucent: rgba(255, 255, 255, 0.08);
  --bs-secondary-color: #8877a3;
  --bs-secondary-bg: rgba(255, 255, 255, 0.07);
  --bs-tertiary-bg: rgba(255, 255, 255, 0.04);
  --bs-card-bg: #1e1038;
  --bs-black: #0e0619;

  --bs-primary: #e6c458;
  --bs-primary-rgb: 230, 196, 88;
  --bs-link-color: #e6c458;
  --bs-link-color-rgb: 230, 196, 88;
  --bs-link-hover-color: #efd47f;
}

/* =========================================================================
 * 2. TOKENS: MODO CLARO
 * ========================================================================= */

html.light-style {
  --kh-bg: #f6f3fb;
  --kh-bg-deep: #ece5f6;
  --kh-surface: #ffffff;
  --kh-surface-2: #faf7fe;
  --kh-surface-3: #f1eaf9;
  --kh-line: #e2d7f0;
  --kh-line-soft: #eee7f7;

  /* No claro a barra e branca contra o corpo levemente lilas */
  --kh-chrome: rgba(255, 255, 255, 0.94);
  --kh-chrome-line: #ddd0ee;

  /* No modo claro o destaque NAO e o dourado. Escurecido o suficiente para
     passar em contraste sobre branco, o dourado vira marrom. O destaque aqui
     e o indigo da marca (#28048c), que e o mesmo da logo.
     Os nomes das variaveis seguem com o prefixo -gold por serem os mesmos
     encaixes usados no modo escuro. */
  --kh-gold: #28048c;
  --kh-gold-hover: #1d0369;
  --kh-gold-press: #15024e;
  --kh-gold-ink: #ffffff;
  --kh-gold-wash: rgba(40, 4, 140, 0.08);
  --kh-gold-line: rgba(40, 4, 140, 0.24);

  --kh-text: #22103f;
  --kh-text-muted: #5d4a78;
  --kh-text-dim: #6f5f87;

  --bs-body-bg: #f6f3fb;
  --bs-body-bg-rgb: 246, 243, 251;
  --bs-body-color: #5d4a78;
  --bs-body-color-rgb: 93, 74, 120;
  --bs-heading-color: #22103f;
  --bs-emphasis-color: #22103f;
  --bs-border-color: #e2d7f0;
  --bs-secondary-color: #6f5f87;
  --bs-card-bg: #ffffff;

  --bs-primary: #28048c;
  --bs-primary-rgb: 40, 4, 140;
  --bs-link-color: #28048c;
  --bs-link-color-rgb: 40, 4, 140;
  --bs-link-hover-color: #1d0369;
}

/* =========================================================================
 * 3. FUNDO: brilho roxo, como na pagina de vendas
 * ========================================================================= */

html body {
  background-color: var(--kh-bg);
  color: var(--bs-body-color);
}

/* Duas luzes radiais fixas atras do painel. Nao rolam e nao pegam clique. */
html body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(70rem 40rem at 50% -10%, rgba(80, 40, 150, 0.55), transparent 62%),
    radial-gradient(48rem 34rem at 92% 8%, rgba(120, 45, 130, 0.22), transparent 60%),
    var(--kh-bg);
}

html.light-style body::before {
  background:
    radial-gradient(70rem 40rem at 50% -10%, rgba(160, 130, 220, 0.22), transparent 62%),
    radial-gradient(48rem 34rem at 92% 8%, rgba(220, 190, 120, 0.15), transparent 60%),
    var(--kh-bg);
}

/* O tema pinta os contenedores; deixa o brilho aparecer */
html .layout-wrapper,
html .layout-container,
html .layout-page,
html .content-wrapper,
html .layout-navbar-full .layout-page {
  background: transparent !important;
}

/* =========================================================================
 * 4. NAVBAR E MENU
 * ========================================================================= */

/* A barra usava a mesma cor do corpo com transparencia: sobre o brilho roxo
   do topo ela desaparecia. Agora tem superficie propria, um degrau de +6 em
   L* acima do fundo, quase opaca para o brilho nao atravessar. */
html .bg-navbar-theme,
html .layout-navbar {
  background-color: var(--kh-chrome) !important;
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border-bottom: 0;
  box-shadow: none !important;
}

html.light-style .bg-navbar-theme,
html.light-style .layout-navbar {
  background-color: var(--kh-chrome) !important;
}

html .bg-menu-theme {
  background-color: transparent !important;
  box-shadow: none !important;
}

html .menu-horizontal {
  border-bottom: 1px solid var(--kh-line-soft);
}

html .menu-horizontal .menu-item > .menu-link,
html .menu-vertical .menu-item > .menu-link {
  color: var(--kh-text-muted);
  border-radius: 0.5rem;
}

html .menu-horizontal .menu-item > .menu-link:hover,
html .menu-vertical .menu-item > .menu-link:hover {
  color: var(--kh-text);
  background-color: rgba(255, 255, 255, 0.05);
}

html.light-style .menu-item > .menu-link:hover {
  background-color: rgba(34, 16, 63, 0.05);
}

html .menu-item.active > .menu-link:not(.menu-toggle) {
  color: var(--kh-gold) !important;
  background-color: var(--kh-gold-wash) !important;
  box-shadow: none !important;
}

html .menu-item.active > .menu-link:not(.menu-toggle)::after {
  background: var(--kh-gold);
}

/* =========================================================================
 * 5. CARDS E SUPERFICIES
 * ========================================================================= */

html .card,
html .dropdown-menu,
html .modal-content,
html .offcanvas {
  background-color: var(--kh-surface);
  border: 1px solid var(--kh-line-soft);
}

/* Fio de luz na borda superior: separa a superficie do fundo */
html.dark-style .card,
html.dark-style .dropdown-menu,
html.dark-style .modal-content {
  box-shadow: var(--kh-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

html .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--bs-body-color);
  --bs-table-border-color: var(--kh-line-soft);
}

html .list-group {
  --bs-list-group-bg: transparent;
  --bs-list-group-border-color: var(--kh-line-soft);
  --bs-list-group-color: var(--bs-body-color);
}

html hr,
html .dropdown-divider {
  border-color: var(--kh-line-soft);
  opacity: 1;
}

/* =========================================================================
 * 6. BOTOES
 * O tema pinta .btn-primary com hex fixo e usa !important no hover,
 * entao aqui vai hex direto tambem, com a mesma arma.
 * ========================================================================= */

html .btn-primary {
  --bs-btn-bg: var(--kh-gold);
  --bs-btn-border-color: var(--kh-gold);
  --bs-btn-color: var(--kh-gold-ink);
  --bs-btn-hover-bg: var(--kh-gold-hover);
  --bs-btn-hover-border-color: var(--kh-gold-hover);
  --bs-btn-hover-color: var(--kh-gold-ink);
  --bs-btn-active-bg: var(--kh-gold-press);
  --bs-btn-active-color: var(--kh-gold-ink);
  background-color: var(--kh-gold);
  border-color: var(--kh-gold);
  color: var(--kh-gold-ink);
  font-weight: 600;
}

html .btn-primary:hover,
html .btn-check:focus + .btn-primary,
html .btn-primary:focus,
html .btn-primary.focus {
  background-color: var(--kh-gold-hover) !important;
  border-color: var(--kh-gold-hover) !important;
  color: var(--kh-gold-ink) !important;
}

html .btn-primary:active,
html .btn-primary.active {
  background-color: var(--kh-gold-press) !important;
  border-color: var(--kh-gold-press) !important;
  color: var(--kh-gold-ink) !important;
}

html .btn-outline-primary,
html .btn-label-primary {
  color: var(--kh-gold);
  border-color: var(--kh-gold-line);
  background-color: var(--kh-gold-wash);
}

html .btn-outline-primary:hover,
html .btn-label-primary:hover {
  background-color: var(--kh-gold) !important;
  border-color: var(--kh-gold) !important;
  color: var(--kh-gold-ink) !important;
}

html .btn-text-primary,
html .btn-text-secondary {
  color: var(--bs-body-color);
  background-color: transparent;
  border-color: transparent;
}

html .btn-text-primary:hover,
html .btn-text-secondary:hover {
  color: var(--kh-gold) !important;
  background-color: var(--kh-gold-wash) !important;
}

html .bg-label-primary {
  background-color: var(--kh-gold-wash) !important;
  color: var(--kh-gold) !important;
}

html .bg-primary {
  background-color: var(--kh-gold) !important;
  color: var(--kh-gold-ink) !important;
}

html .text-primary {
  color: var(--kh-gold) !important;
}

/* =========================================================================
 * 7. FORMULARIOS
 * ========================================================================= */

html .form-control,
html .form-select,
html .input-group-text {
  background-color: rgba(255, 255, 255, 0.04);
  border-color: var(--kh-line);
  color: var(--kh-text);
}

html.light-style .form-control,
html.light-style .form-select,
html.light-style .input-group-text {
  background-color: #ffffff;
  color: var(--kh-text);
}

html .form-control:focus,
html .form-select:focus {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: var(--kh-gold);
  box-shadow: 0 0 0 3px var(--kh-gold-wash);
  color: var(--kh-text);
}

html.light-style .form-control:focus,
html.light-style .form-select:focus {
  background-color: #ffffff;
}

html .form-control::placeholder {
  color: var(--kh-text-dim);
  opacity: 1;
}

html .form-check-input:checked {
  background-color: var(--kh-gold);
  border-color: var(--kh-gold);
}

html .form-check-input:focus {
  border-color: var(--kh-gold);
  box-shadow: 0 0 0 3px var(--kh-gold-wash);
}

/* =========================================================================
 * 8. FOCO
 * ========================================================================= */

html :focus-visible,
html .btn:focus-visible,
html a:focus-visible {
  outline-color: var(--kh-gold);
}

html .btn:focus-visible,
html .form-control:focus-visible,
html .form-select:focus-visible,
html a:focus-visible {
  box-shadow: 0 0 0 4px var(--kh-gold-wash);
}

/* =========================================================================
 * 9. COMPONENTES
 * ========================================================================= */

html .progress-bar { background-color: var(--kh-gold); }
html .progress { background-color: rgba(255, 255, 255, 0.07); }

html .spinner-border.text-primary,
html .spinner-grow.text-primary { color: var(--kh-gold) !important; }

html .kh-chipbar,
html .mentorship-nav {
  background: rgba(30, 16, 56, 0.68);
  border-color: var(--kh-line);
}

html.light-style .kh-chipbar,
html.light-style .mentorship-nav {
  background: rgba(255, 255, 255, 0.82);
}

html .kh-chip.active,
html .mentorship-nav-item.active,
html .course-chip.active {
  background-color: var(--kh-gold);
  border-color: var(--kh-gold);
  color: var(--kh-gold-ink);
}

html .kh-chip:hover,
html .mentorship-nav-item:hover,
html .course-chip:hover {
  background-color: var(--kh-gold-wash);
  border-color: var(--kh-gold-line);
  color: var(--kh-gold);
}

html .kh-chip-index {
  background: var(--kh-gold-wash);
  color: var(--kh-gold);
}

html .kh-chip.active .kh-chip-index {
  background: rgba(42, 28, 0, 0.18);
  color: var(--kh-gold-ink);
}

html .kh-state-icon {
  background: var(--kh-gold-wash);
  color: var(--kh-gold);
}

html .kh-toast {
  background: var(--kh-surface-2);
  border-color: var(--kh-line);
  border-inline-start-color: var(--kh-gold);
}

html .kh-toast-icon { color: var(--kh-gold); }
html .kh-error-code { color: var(--kh-gold); }

html .kh-skip-link {
  background: var(--kh-gold);
  color: var(--kh-gold-ink);
}

html .kh-skip-link:focus { color: var(--kh-gold-ink); }

/* =========================================================================
 * 10. ULTIMAS SOBRESCRITAS DO TEMA
 * Regras do tema que usam !important ou seletor composto e precisam
 * ser batidas item a item.
 * ========================================================================= */

/* O tema fixa o foco em #666cff com !important, inclusive no form-floating */
html .form-control:focus,
html .form-select:focus,
html .form-floating-outline .form-control:focus,
html .form-floating-outline .form-select:focus {
  border-color: var(--kh-gold) !important;
}

html .form-control:focus ~ .form-label,
html .form-control:focus ~ .form-label::after {
  border-color: var(--kh-gold);
  color: var(--kh-gold);
}

/* Caixa alta em todo botao envelhece a interface. Frase normal le melhor
   e combina com a pagina de vendas da marca. */
html .btn {
  text-transform: none;
  letter-spacing: -0.006em;
}

/* Bordas herdadas do indigo antigo nas variantes primarias */
html .btn-outline-primary,
html .btn-outline-primary .badge {
  border-color: var(--kh-gold-line);
}

html .btn-label-primary,
html .btn-label-primary:focus,
html .btn-label-primary.focus {
  border-color: var(--kh-gold-line);
}

html .btn-outline-primary:hover,
html .btn-label-primary:hover {
  border-color: var(--kh-gold) !important;
}

/* O tema poe uma sombra dura embaixo de todo botao preenchido */
html .btn[class*='btn-']:not([class*='btn-label-']):not([class*='btn-text-']):not([class*='btn-outline-']) {
  box-shadow: none;
}

html .btn-primary:hover {
  box-shadow: 0 6px 16px -6px rgba(230, 196, 88, 0.5);
}

html.light-style .btn-primary:hover {
  box-shadow: 0 6px 16px -6px rgba(40, 4, 140, 0.35);
}

/* =========================================================================
 * 11. NAVBAR E MENU: casando a especificidade do tema
 *
 * O tema fixa esses fundos com seletores de 2 a 4 classes mais !important
 * (ex.: `.layout-horizontal .bg-navbar-theme.layout-navbar`). As regras
 * abaixo repetem o mesmo seletor com `html` na frente para passar na frente.
 * ========================================================================= */

html .bg-navbar-theme,
html .layout-horizontal .bg-navbar-theme.layout-navbar,
html .layout-navbar-fixed .window-scrolled .bg-navbar-theme.layout-navbar {
  background-color: var(--kh-chrome) !important;
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  color: var(--kh-text-muted);
}

html.light-style .bg-navbar-theme,
html.light-style .layout-horizontal .bg-navbar-theme.layout-navbar,
html.light-style .layout-navbar-fixed .window-scrolled .bg-navbar-theme.layout-navbar {
  background-color: var(--kh-chrome) !important;
  color: var(--kh-text-muted);
}

/* A linha do menu tinha outra transparencia (0.6 contra 0.74), o que fazia as
   duas faixas parecerem tiras desencontradas. Mesma superficie nas duas. */
html .bg-menu-theme,
html .bg-menu-theme.menu-horizontal {
  background-color: var(--kh-chrome) !important;
  color: var(--kh-text-muted);
}

html.light-style .bg-menu-theme,
html.light-style .bg-menu-theme.menu-horizontal {
  background-color: var(--kh-chrome) !important;
}

/* Texto dos itens */
html .bg-navbar-theme .navbar-nav > .nav-link,
html .bg-navbar-theme .navbar-nav > .nav-item > .nav-link,
html .bg-navbar-theme .navbar-brand,
html .bg-navbar-theme .navbar-brand a,
html .bg-navbar-theme .navbar-text,
html .bg-navbar-theme .search-input-wrapper .search-input,
html .bg-navbar-theme .search-input-wrapper .search-toggler,
html .bg-menu-theme .menu-link,
html .bg-menu-theme .menu-text,
html .bg-menu-theme .menu-horizontal-prev,
html .bg-menu-theme .menu-horizontal-next {
  color: var(--kh-text-muted);
}

html .bg-navbar-theme .navbar-nav > .nav-link:hover,
html .bg-navbar-theme .navbar-nav > .nav-item > .nav-link:hover,
html .bg-menu-theme .menu-link:hover,
html .bg-menu-theme .menu-link:focus {
  color: var(--kh-text);
}

/* Item ativo: o tema pinta de indigo, aqui vira o dourado da marca */
html .bg-menu-theme .menu-item.active > .menu-link:not(.menu-toggle),
html .bg-menu-theme.menu-horizontal .menu-inner > .menu-item.active > .menu-link.menu-toggle {
  background-color: var(--kh-gold-wash) !important;
  background: var(--kh-gold-wash) !important;
  color: var(--kh-gold) !important;
}

html .bg-menu-theme .menu-item.active:not(.open) > .menu-link:not(.menu-toggle) {
  color: var(--kh-gold) !important;
}

/* Submenus */
html .bg-menu-theme.menu-horizontal .menu-inner .menu-item:not(.menu-item-closing) > .menu-sub {
  background: var(--kh-surface-2);
  border: 1px solid var(--kh-line-soft);
  border-radius: 0.75rem;
  box-shadow: var(--kh-shadow-lg);
}

html .bg-menu-theme.menu-horizontal .menu-sub > .menu-item.active > .menu-link:not(.menu-toggle) {
  background-color: var(--kh-gold-wash) !important;
  color: var(--kh-gold) !important;
}

html .bg-menu-theme .menu-inner-shadow {
  background: linear-gradient(var(--kh-bg) 5%, rgba(21, 10, 40, 0.75) 45%, rgba(21, 10, 40, 0)) !important;
}

/* =========================================================================
 * 12. ALERTAS SOLIDOS
 * Faixa inteira em cor cheia atropela a paleta. Vira superficie tingida
 * com uma barra lateral na cor do estado, que comunica o mesmo com menos ruido.
 * ========================================================================= */

html .alert-solid-primary,
html .alert-solid-secondary,
html .alert-solid-success,
html .alert-solid-info,
html .alert-solid-warning,
html .alert-solid-danger,
html .alert-solid-dark {
  color: var(--bs-heading-color);
  border: 1px solid var(--kh-line);
  border-inline-start-width: 3px;
}

html .alert-solid-danger {
  background-color: rgba(255, 77, 73, 0.12);
  border-color: rgba(255, 77, 73, 0.28);
  border-inline-start-color: #ff4d49;
}

html .alert-solid-warning {
  background-color: rgba(253, 181, 40, 0.12);
  border-color: rgba(253, 181, 40, 0.28);
  border-inline-start-color: #fdb528;
}

html .alert-solid-success {
  background-color: rgba(114, 225, 40, 0.12);
  border-color: rgba(114, 225, 40, 0.26);
  border-inline-start-color: #72e128;
}

html .alert-solid-info {
  background-color: rgba(38, 198, 249, 0.12);
  border-color: rgba(38, 198, 249, 0.26);
  border-inline-start-color: #26c6f9;
}

html .alert-solid-primary {
  background-color: var(--kh-gold-wash);
  border-color: var(--kh-gold-line);
  border-inline-start-color: var(--kh-gold);
}

/* O tema deixa o texto dos alertas solidos branco fixo */
html [class*='alert-solid-'] .btn-close { filter: none; }

/* =========================================================================
 * 13. CONTRASTE DE FORMULARIO
 * O tema deixa o rotulo do checkbox/radio quase invisivel no modo claro
 * (medido em 1.35:1). Aqui ele volta para a cor de corpo, que passa em AA.
 * ========================================================================= */

html .form-check-label,
html .form-check .form-check-label,
html .form-check-input ~ .form-check-label {
  color: var(--bs-body-color);
}

html .form-label,
html .col-form-label {
  color: var(--bs-heading-color);
}

/* Placeholder no escuro estava em 4.03:1 */
html.dark-style .form-control::placeholder,
html.dark-style .form-select::placeholder {
  color: #9384ac;
}

/* =========================================================================
 * 14. ABAS
 * O tema marca a aba ativa com um elemento .tab-slider posicionado por JS,
 * nao com borda. Era ele que continuava indigo.
 * ========================================================================= */

html .nav-tabs .tab-slider {
  background-color: var(--kh-gold);
}

html .nav-tabs .nav-link.waves-effect .waves-ripple {
  background: radial-gradient(var(--kh-gold-wash) 0, var(--kh-gold-wash) 40%, transparent 50%);
}

/* Abas em caixa alta envelhecem a interface */
html .nav-tabs .nav-link,
html .nav-pills .nav-link {
  text-transform: none;
  letter-spacing: -0.006em;
}

/* O tema cobre .active, .active:hover e .active:focus. Depois do clique o
   botao fica em foco, entao so a regra base nao bastava. */
html .nav-tabs .nav-link.active,
html .nav-tabs .nav-link.active:hover,
html .nav-tabs .nav-link.active:focus,
html .nav-pills .nav-link.active:focus {
  color: var(--kh-gold);
}

html .nav-pills .nav-link.active,
html .nav-pills .nav-link.active:hover,
html .nav-pills .show > .nav-link {
  background-color: var(--kh-gold);
  color: var(--kh-gold-ink);
}

/* =========================================================================
 * 15. BARRA SUPERIOR
 * Antes era logo + vao vazio + tres icones soltos de 24px, sem area de
 * toque e sem indicar o que faziam. As pecas abaixo dao materia e affordance
 * a barra sem sair da identidade.
 * ========================================================================= */

/* Marca com respiro e alvo de clique honesto */
html .layout-navbar .app-brand-link {
  display: inline-flex;
  align-items: center;
  border-radius: var(--kh-radius-sm);
  padding: 0.25rem;
  transition: opacity var(--kh-dur) var(--kh-ease);
}

html .layout-navbar .app-brand-link:hover { opacity: 0.85; }

/* --- Gatilho da busca ---
 * Vira um campo aparente: quem olha entende que da para buscar. O icone
 * sozinho nao comunicava nada no layout horizontal. */
html .kh-search-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.25rem;
  padding: 0 0.5rem 0 0.75rem;
  border-radius: var(--kh-radius-pill);
  border: 1px solid var(--kh-line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--bs-secondary-color);
  font-family: var(--bs-font-sans-serif);
  font-size: 0.8125rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--kh-dur) var(--kh-ease),
              background-color var(--kh-dur) var(--kh-ease),
              color var(--kh-dur) var(--kh-ease);
}

html.light-style .kh-search-trigger {
  background: rgba(34, 16, 63, 0.035);
}

html .kh-search-trigger:hover {
  border-color: var(--kh-gold-line);
  background: var(--kh-gold-wash);
  color: var(--bs-heading-color);
}

html .kh-search-trigger:focus-visible {
  outline: 2px solid var(--kh-gold);
  outline-offset: 2px;
}

html .kh-search-trigger .mdi {
  font-size: 1.125rem;
  line-height: 1;
}

html .kh-search-label {
  white-space: nowrap;
}

/* Atalho de teclado: informacao secundaria, nao decoracao */
html .kh-kbd {
  padding: 0.1875rem 0.375rem;
  border-radius: var(--kh-radius-xs);
  border: 1px solid var(--kh-line);
  background: transparent;
  color: var(--bs-secondary-color);
  font-family: var(--bs-font-sans-serif);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

/* Abaixo de 1200px sobra so o icone */
@media (max-width: 1199.98px) {
  html .kh-search-label,
  html .kh-kbd { display: none; }

  html .kh-search-trigger {
    width: 2.25rem;
    padding: 0;
    justify-content: center;
  }
}

/* --- Botoes de icone ---
 * 36px de alvo, superficie no hover. Antes eram glifos soltos sem area. */
html .kh-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--kh-radius-pill);
  border: 1px solid transparent;
  color: var(--bs-body-color);
  text-decoration: none;
  transition: background-color var(--kh-dur) var(--kh-ease),
              border-color var(--kh-dur) var(--kh-ease),
              color var(--kh-dur) var(--kh-ease),
              transform var(--kh-dur-fast) var(--kh-ease);
}

html .kh-icon-btn .mdi { font-size: 1.25rem; line-height: 1; }

html .kh-icon-btn:hover {
  background: var(--kh-gold-wash);
  border-color: var(--kh-gold-line);
  color: var(--kh-gold);
}

html .kh-icon-btn:active { transform: scale(0.94); }

html .kh-icon-btn:focus-visible {
  outline: 2px solid var(--kh-gold);
  outline-offset: 2px;
}

html .kh-icon-btn.show {
  background: var(--kh-gold-wash);
  color: var(--kh-gold);
}

/* --- Gatilho do usuario ---
 * Avatar sozinho nao parece menu. Nome e seta resolvem. */
html .kh-user-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.25rem;
  padding: 0 0.5rem 0 0.25rem;
  border-radius: var(--kh-radius-pill);
  border: 1px solid transparent;
  color: var(--bs-body-color);
  text-decoration: none;
  transition: background-color var(--kh-dur) var(--kh-ease),
              border-color var(--kh-dur) var(--kh-ease);
}

html .kh-user-trigger:hover,
html .kh-user-trigger.show {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--kh-line);
  color: var(--bs-heading-color);
}

html.light-style .kh-user-trigger:hover,
html.light-style .kh-user-trigger.show {
  background: rgba(34, 16, 63, 0.045);
}

html .kh-user-trigger:focus-visible {
  outline: 2px solid var(--kh-gold);
  outline-offset: 2px;
}

html .kh-user-trigger .avatar {
  width: 1.875rem;
  height: 1.875rem;
  flex: 0 0 auto;
}

html .kh-user-trigger .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid var(--kh-line);
}

html .kh-user-name {
  font-family: var(--kh-font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.006em;
  max-width: 8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html .kh-user-caret {
  font-size: 1rem;
  line-height: 1;
  opacity: 0.55;
  transition: transform var(--kh-dur) var(--kh-ease);
}

html .kh-user-trigger.show .kh-user-caret { transform: rotate(180deg); }

@media (max-width: 575.98px) {
  html .kh-user-name,
  html .kh-user-caret { display: none; }

  html .kh-user-trigger { padding: 0 0.25rem; }
}

/* Ponto de presenca discreto, sem anel grosso */
html .layout-navbar .avatar-online::after {
  width: 0.5rem;
  height: 0.5rem;
  box-shadow: 0 0 0 2px var(--kh-bg);
}

/* --- Barra e menu como uma peca so --- */
/* Altura da navbar fica como o tema define (64px). Eu tinha reduzido para
   60px e o menu horizontal, posicionado a partir da altura esperada, ficava
   4px abaixo: aparecia uma faixa do fundo escuro entre as duas barras. */

html .layout-navbar .navbar-nav.flex-row {
  gap: 0.25rem;
}

/* A linha do menu abaixo deixa de parecer uma segunda barra solta */
html .menu-horizontal {
  border-top: 1px solid var(--kh-line-soft);
}

/* =========================================================================
 * 16. FAIXA DE NAVEGACAO COMO UMA PECA SO
 * A barra e a linha do menu formam um bloco de chrome acima do conteudo:
 * mesma superficie, um fio separando as duas e uma sombra que descola do fundo.
 * ========================================================================= */

html .layout-navbar-full .layout-navbar {
  border-bottom: 1px solid var(--kh-chrome-line);
}

/* Fio entre a barra e o menu, e sombra sob a faixa toda */
html .menu-horizontal {
  border-top: 0;
  border-bottom: 1px solid var(--kh-chrome-line);
  box-shadow: 0 12px 24px -18px rgba(0, 0, 0, 0.85);
}

html.light-style .menu-horizontal {
  box-shadow: 0 12px 24px -18px rgba(34, 16, 63, 0.25);
}

/* Sem menu horizontal, a sombra fica na propria barra */
html .layout-content-navbar .layout-navbar,
html .layout-without-menu .layout-navbar {
  box-shadow: 0 12px 24px -18px rgba(0, 0, 0, 0.85) !important;
}

/* =========================================================================
 * 17. CONTRASTE DAS VARIANTES "LABEL" NO MODO CLARO
 *
 * O tema claro pinta .btn-label-* e .bg-label-* com a cor cheia do estado
 * sobre um fundo palido da mesma cor. Medido: warning 1.62, success 1.52,
 * info 1.75, danger 2.65. Tudo abaixo do minimo AA (4.5), ou seja, ilegivel.
 * Aqui o texto escurece o suficiente para passar, mantendo a matiz.
 * O modo escuro ja passava (warning 4.99) e nao e tocado.
 * ========================================================================= */

html.light-style .btn-label-warning,
html.light-style .btn-label-warning:hover,
html.light-style .btn-label-warning:focus,
html.light-style .btn-label-warning.focus,
html.light-style .bg-label-warning {
  color: #8a5a00 !important;
}

html.light-style .btn-label-danger,
html.light-style .btn-label-danger:hover,
html.light-style .btn-label-danger:focus,
html.light-style .btn-label-danger.focus,
html.light-style .bg-label-danger {
  color: #a11b18 !important;
}

html.light-style .btn-label-success,
html.light-style .btn-label-success:hover,
html.light-style .btn-label-success:focus,
html.light-style .btn-label-success.focus,
html.light-style .bg-label-success {
  color: #3d6b12 !important;
}

html.light-style .btn-label-info,
html.light-style .btn-label-info:hover,
html.light-style .btn-label-info:focus,
html.light-style .btn-label-info.focus,
html.light-style .bg-label-info {
  color: #0a5c78 !important;
}

/* =========================================================================
 * 18. NOTIFICACOES
 * Sino entre a busca e o alternador de tema. O ponto so aparece quando ha
 * algo; o painel sempre abre, com estado vazio quando nao ha nada.
 * ========================================================================= */

html .kh-notif .kh-icon-btn {
  position: relative;
}

/* Ponto de aviso encostado no sino */
html .kh-notif-dot {
  position: absolute;
  top: 0.375rem;
  right: 0.4375rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--bs-danger);
  box-shadow: 0 0 0 2px var(--kh-chrome);
}

@media (prefers-reduced-motion: no-preference) {
  html .kh-notif-dot {
    animation: kh-notif-pulse 2.4s var(--kh-ease) infinite;
  }
}

@keyframes kh-notif-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(0.82); opacity: 0.65; }
}

/* --- Painel --- */
html .kh-notif-menu {
  width: min(23rem, calc(100vw - 2rem));
  padding: 0;
  overflow: hidden;
}

html .kh-notif-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--kh-line-soft);
}

html .kh-notif-title {
  font-family: var(--kh-font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.014em;
  color: var(--bs-heading-color);
}

html .kh-notif-count {
  min-width: 1.375rem;
  padding: 0.125rem 0.4375rem;
  border-radius: var(--kh-radius-pill);
  background: var(--kh-gold-wash);
  color: var(--kh-gold);
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

html .kh-notif-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 24rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

html .kh-notif-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--kh-line-soft);
}

html .kh-notif-item:last-child { border-bottom: 0; }

html .kh-notif-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--kh-radius-sm);
  font-size: 1.0625rem;
  background: var(--kh-gold-wash);
  color: var(--kh-gold);
}

/* A cor carrega a urgencia; o texto continua na cor de leitura normal */
html .kh-notif-item.is-critical .kh-notif-icon {
  background: rgba(255, 77, 73, 0.14);
  color: var(--bs-danger);
}

html .kh-notif-item.is-warning .kh-notif-icon {
  background: rgba(253, 181, 40, 0.14);
  color: var(--bs-warning);
}

html .kh-notif-body {
  flex: 1 1 auto;
  min-width: 0;
}

html .kh-notif-item-title {
  margin: 0;
  font-family: var(--kh-font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.008em;
  color: var(--bs-heading-color);
}

html .kh-notif-text {
  margin: 0.1875rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--bs-body-color);
  overflow-wrap: anywhere;
}

html .kh-notif-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.4375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--kh-gold);
  text-decoration: none;
}

html .kh-notif-link:hover {
  color: var(--kh-gold);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

html .kh-notif-link .mdi {
  font-size: 0.9375rem;
  transition: transform var(--kh-dur) var(--kh-ease);
}

html .kh-notif-link:hover .mdi { transform: translateX(2px); }

/* --- Estado vazio --- */
html .kh-notif-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 2rem 1.25rem;
  text-align: center;
  color: var(--bs-secondary-color);
  font-size: 0.875rem;
}

html .kh-notif-empty .mdi {
  font-size: 1.75rem;
  color: var(--bs-success);
  opacity: 0.75;
}

/* ===========================================================================
 * BUSCA DE CONTEUDO — paleta em overlay
 * O input antigo vivia dentro da navbar como irmao flex: ao abrir ele
 * empurrava a barra e aparecia ao lado do menu do usuario. Aqui o painel e
 * position:fixed, entao nao disputa espaco com nada.
 * =========================================================================== */

html .kh-search {
  position: fixed;
  inset: 0;
  z-index: 1090;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(3rem, 12vh, 8rem) 1rem 2rem;
}
html .kh-search[hidden] { display: none; }

html .kh-search__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 4, 22, 0.62);
  opacity: 0;
  transition: opacity var(--kh-dur) var(--kh-ease);
}
html .kh-search.is-open .kh-search__backdrop { opacity: 1; }
@supports (backdrop-filter: blur(2px)) {
  html .kh-search__backdrop { backdrop-filter: blur(3px); }
}

html .kh-search__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(40rem, 100%);
  max-height: min(30rem, 70vh);
  overflow: hidden;
  border: 1px solid var(--kh-line);
  border-radius: var(--kh-radius-lg);
  background: var(--kh-surface);
  box-shadow: var(--kh-shadow-lg);
  opacity: 0;
  transform: translateY(-0.5rem) scale(0.985);
  transition: opacity var(--kh-dur) var(--kh-ease), transform var(--kh-dur) var(--kh-ease);
}
html .kh-search.is-open .kh-search__panel { opacity: 1; transform: none; }

/* --- Campo --------------------------------------------------------------- */
html .kh-search__field {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 0 0 auto;
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--kh-line-soft);
}
html .kh-search__field-icon { font-size: 1.375rem; color: var(--kh-text-dim); }

html .kh-search__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--bs-heading-color);
  font-family: var(--bs-font-sans-serif);
  font-size: 1rem;
  line-height: 1.5;
}
html .kh-search__input:focus { outline: none; }
html .kh-search__input::placeholder { color: var(--kh-text-dim); }
/* O X nativo do type=search briga com o kbd Esc ao lado. */
html .kh-search__input::-webkit-search-cancel-button { display: none; }

html .kh-search__close {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
html .kh-search__close:focus-visible { outline: 2px solid var(--kh-gold); outline-offset: 2px; }
/* O tema esconde .kh-kbd abaixo de 1200px; sem isto o botao de fechar ficaria
   sem conteudo visivel justamente onde nao ha tecla Esc. */
html .kh-search__close .kh-kbd { display: inline-block; }
html .kh-search__close-icon { display: none; font-size: 1.375rem; color: var(--kh-text-dim); }
@media (max-width: 767.98px) {
  html .kh-search__close .kh-kbd { display: none; }
  html .kh-search__close-icon { display: block; }
}

/* --- Estados ------------------------------------------------------------- */
html .kh-search__status {
  flex: 0 0 auto;
  margin: 0;
  padding: 0.875rem 1rem;
  color: var(--kh-text-dim);
  font-size: 0.8125rem;
}
html .kh-search__status[hidden] { display: none; }
html .kh-search__status[data-tone='error'] { color: var(--bs-danger); }

/* --- Resultados ---------------------------------------------------------- */
html .kh-search__results {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0.375rem;
  overscroll-behavior: contain;
}
html .kh-search__results:empty { display: none; }

html .kh-search__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: var(--kh-radius-md);
  color: var(--bs-body-color);
  text-decoration: none;
  transition: background-color var(--kh-dur-fast) var(--kh-ease);
}
/* Um item ativo so: o teclado e o mouse compartilham o mesmo destaque, senao
   ficam dois "selecionados" na tela ao mesmo tempo. */
html .kh-search__item.is-active { background: var(--kh-gold-wash); }

html .kh-search__item-icon { flex: 0 0 auto; font-size: 1.25rem; color: var(--kh-text-dim); }
html .kh-search__item.is-active .kh-search__item-icon { color: var(--kh-gold); }

html .kh-search__item-text { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
html .kh-search__item-title {
  color: var(--bs-heading-color);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
}
html .kh-search__item-title mark {
  padding: 0;
  background: transparent;
  color: var(--kh-gold);
  font-weight: 700;
}
/* display:block e nao flex: text-overflow:ellipsis nao vale em flex container,
   e o caminho do curso corta com frequencia no celular. */
html .kh-search__item-path {
  display: block;
  color: var(--kh-text-dim);
  font-size: 0.75rem;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html .kh-search__item-path .mdi {
  margin: 0 0.15rem;
  font-size: 0.875rem;
  vertical-align: -0.1em;
  opacity: 0.7;
}

html .kh-search__item-go {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--kh-text-dim);
  font-size: 1rem;
  opacity: 0;
}
html .kh-search__item.is-active .kh-search__item-go { opacity: 1; }

/* Trava a rolagem do fundo enquanto a busca esta aberta. */
body.kh-search-open { overflow: hidden; }

@media (max-width: 575.98px) {
  html .kh-search { padding: 0; align-items: stretch; }
  html .kh-search__panel { width: 100%; max-height: 100%; border: 0; border-radius: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html .kh-search__backdrop,
  html .kh-search__panel,
  html .kh-search__item { transition: none; }
}