/* IEJA Connect: cabeçalho igual ao do site novo (dev.institutoieja.com.br, adv/ieja-site-dev/menu/menu.html).
   Regras de base copiadas do site; o bloco "Moodle" no fim adapta ao Moove: esconde a barra do tema,
   abre espaço no topo e acomoda a área do usuário do Moodle (#usernavigation) dentro do cartão.
   Só vale com html.ieja-menu-novo (posto pelo script do additionalhtmlhead). */
  .ieja-nav { --ouro: #C49D47; --tinta: #1d1e1c; --suave: #6b6a65; --linha: #e7e3da;
    position: fixed; z-index: 1031; left: 0; right: 0; top: 0; padding: 14px 16px; pointer-events: none; }
  /* a área do usuário do Moodle (.nav-moodle) fica fora das regras de base: ela usa os ícones do tema (fonte de ícones) e os botões do Bootstrap */
  .ieja-nav, .ieja-nav *:where(:not(.nav-moodle *)) { font-family: "PT Sans", system-ui, sans-serif !important; box-sizing: border-box; }
  .ieja-nav a:where(:not(.nav-moodle *)) { text-decoration: none !important; }
  .ieja-nav button:where(:not(.nav-moodle *)) { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; box-shadow: none; letter-spacing: normal; text-transform: none; }
  .ieja-nav ul:where(:not(.nav-moodle *)) { list-style: none; margin: 0; padding: 0; }
  .ieja-nav p:where(:not(.nav-moodle *)) { margin: 0; }
  .ieja-nav .nav-card { pointer-events: auto; max-width: 1280px; margin: 0 auto; background: #fff; border: 1px solid rgb(29 30 28 / .08); border-radius: 24px; overflow: hidden;
    box-shadow: 0 1px 2px rgb(0 0 0 / .04), 0 14px 36px -10px rgb(0 0 0 / .22); }

  /* linha de cima */
  .ieja-nav .nav-topo { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px 12px 26px; }
  .ieja-nav .nav-logo img { height: 38px !important; width: auto !important; display: block; }
  .ieja-nav .nav-itens { display: flex; align-items: center; gap: 2px; }
  .ieja-nav .nav-it { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 9px 15px; font-size: 15px; font-weight: 700; color: #4a4945 !important; transition: background .2s, color .2s; }
  /* o tema pinta botão em foco/hover de dourado: o estado é definido aqui com !important para não depender dele */
  .ieja-nav .nav-it:hover, .ieja-nav .nav-it:focus { background: #f5f3ee !important; color: var(--tinta) !important; outline: none; }
  .ieja-nav .nav-it[aria-expanded="true"], .ieja-nav .nav-it[aria-expanded="true"]:hover, .ieja-nav .nav-it[aria-expanded="true"]:focus { background: var(--ouro) !important; color: #fff !important; }
  .ieja-nav .nav-it:focus-visible { box-shadow: 0 0 0 2px var(--tinta) !important; }
  .ieja-nav .mob-it:hover, .ieja-nav .mob-it:focus { background: #f5f3ee !important; color: var(--tinta) !important; outline: none; }
  .ieja-nav .mob-it[aria-expanded="true"] { background: var(--ouro) !important; color: #fff !important; }
  .ieja-nav .nav-seta { width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .3s; }
  .ieja-nav [aria-expanded="true"] > .nav-seta { transform: translateY(2px) rotate(-135deg); }
  .ieja-nav .nav-acoes { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
  .ieja-nav .nav-bt { border-radius: 999px; padding: 11px 20px; font-size: 14px; font-weight: 700; white-space: nowrap; transition: background .2s, color .2s, border-color .2s; }
  .ieja-nav .nav-bt-sec { border: 1px solid var(--linha); background: #faf9f6; color: var(--tinta) !important; }
  .ieja-nav .nav-bt-sec:hover { background: #f1eee6; }
  .ieja-nav .nav-bt-pri { background: var(--tinta); color: #fff !important; border: 1px solid var(--tinta); }
  .ieja-nav .nav-bt-pri:hover { background: var(--ouro); border-color: var(--ouro); color: var(--tinta) !important; }
  .ieja-nav .nav-ham { display: none; width: 44px; height: 44px; border-radius: 999px; position: relative; }
  .ieja-nav .nav-ham i { position: absolute; left: 12px; right: 12px; height: 2px; background: var(--tinta); transition: transform .3s, opacity .2s; }
  .ieja-nav .nav-ham i:nth-child(1) { top: 15px; } .ieja-nav .nav-ham i:nth-child(2) { top: 21px; } .ieja-nav .nav-ham i:nth-child(3) { top: 27px; }
  .ieja-nav .nav-ham[aria-expanded="true"] i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .ieja-nav .nav-ham[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
  .ieja-nav .nav-ham[aria-expanded="true"] i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* gaveta (abre a altura com grid 0fr → 1fr) */
  .ieja-nav .nav-mega, .ieja-nav .nav-mob { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .4s cubic-bezier(.22,1,.36,1), opacity .3s; }
  .ieja-nav .nav-mega.on, .ieja-nav .nav-mob.on { grid-template-rows: 1fr; opacity: 1; }
  .ieja-nav .nav-mega-in, .ieja-nav .nav-mob-in { overflow: hidden; min-height: 0; }
  .ieja-nav .mega { display: grid; grid-template-columns: 1fr 1fr auto; gap: 40px; padding: 10px 32px 30px; animation: nav-entra .35s cubic-bezier(.22,1,.36,1); }
  @keyframes nav-entra { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
  .ieja-nav .mega-col { display: flex; flex-direction: column; gap: 22px; }
  .ieja-nav .mega-sob { width: fit-content; border: 1px solid var(--linha); border-radius: 999px; padding: 6px 14px; font-size: 12px; font-weight: 700; color: var(--suave); letter-spacing: 1.5px; text-transform: uppercase; }
  .ieja-nav .mega-col ul { display: flex; flex-direction: column; gap: 14px; }
  .ieja-nav .mega-col a { display: inline-flex; align-items: center; gap: 10px; font-size: 21px; line-height: 1.2; font-weight: 700; color: var(--tinta) !important; transition: color .2s; }
  .ieja-nav .mega-col a:hover { color: #8a6a28 !important; }
  .ieja-nav .mega-txt { display: inline-flex; font-size: 21px; line-height: 1.2; font-weight: 700; color: var(--tinta); }
  .ieja-nav .mega-txt small { display: block; font-size: 13px; font-weight: 400; color: var(--suave); margin-top: 3px; }
  .ieja-nav .mob-lista .mega-txt { font-size: 15px; font-weight: 400; color: #4a4945; }
  /* menus com 3 colunas (Formação, Eventos): títulos menores para caber a segmentação inteira */
  .ieja-nav .mega-denso { gap: 32px; }
  .ieja-nav .mega-denso .mega-col ul { gap: 12px; }
  .ieja-nav .mega-denso .mega-col a { font-size: 17px; line-height: 1.25; }
  .ieja-nav .mega-denso .mega-foto { width: 250px; height: 250px; }
  .ieja-nav .mega-col a small { display: block; font-size: 13px; font-weight: 400; color: var(--suave); margin-top: 3px; }
  .ieja-nav li.tem-ajuda { display: flex; align-items: flex-start; gap: 8px; }
  .ieja-nav a.mega-ajuda { flex: none; display: inline-flex !important; align-items: center; justify-content: center; width: 20px; height: 20px; margin-top: 3px; border-radius: 50%; border: 1.5px solid var(--ouro); color: #8a6a28 !important; font-size: 12px !important; font-weight: 700; line-height: 1 !important; text-decoration: none; transition: background .2s, color .2s; }
  .ieja-nav a.mega-ajuda:hover, .ieja-nav a.mega-ajuda:focus-visible { background: var(--ouro); color: var(--tinta) !important; outline: none; }
  .ieja-nav .mega-selo { border-radius: 999px; background: var(--ouro); color: var(--tinta); padding: 3px 9px; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; white-space: nowrap; }
  .ieja-nav .mega-rodape { margin-top: auto; padding-top: 30px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--suave); }
  .ieja-nav .mega-rodape a { font-size: 14px; font-weight: 400; color: var(--suave) !important; }
  .ieja-nav .mega-redes { display: flex; gap: 14px; padding-top: 4px; }
  .ieja-nav .mega-redes a { width: 22px; height: 22px; color: #4a4945 !important; }
  .ieja-nav .mega-redes a:hover { color: var(--tinta) !important; }
  .ieja-nav .mega-redes svg { width: 22px; height: 22px; fill: currentColor; display: block; }
  .ieja-nav .mega-foto { position: relative; width: 300px; height: 272px; border-radius: 18px; overflow: hidden; background: #e9e6df; display: flex; flex-direction: column; justify-content: flex-end; }
  .ieja-nav .mega-foto img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; transition: transform 6s ease-out; }
  .ieja-nav .mega:hover .mega-foto img { transform: scale(1.05); }
  .ieja-nav .mega-foto p { position: relative; z-index: 1; margin: 12px !important; padding: 10px 12px; border-radius: 10px; background: rgb(13 13 12 / .78); color: #fff; font-size: 14px; line-height: 1.35; font-weight: 700; }
  .ieja-nav .mega-foto p span { color: var(--ouro); }

  /* celular / telas médias */
  .ieja-nav .mob { padding: 2px 16px 18px; display: flex; flex-direction: column; }
  .ieja-nav .mob-it { display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 14px 10px; border-radius: 12px; font-size: 17px; font-weight: 700; color: var(--tinta) !important; text-align: left; }
  .ieja-nav .mob-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s cubic-bezier(.22,1,.36,1); }
  .ieja-nav .mob-sub.on { grid-template-rows: 1fr; }
  .ieja-nav .mob-sub > div { overflow: hidden; min-height: 0; }
  .ieja-nav .mob-lista { margin: 0 0 10px 12px !important; padding-left: 14px !important; border-left: 2px solid var(--ouro); display: flex; flex-direction: column; gap: 12px; }
  .ieja-nav .mob-lista a { font-size: 15px; color: #4a4945 !important; display: inline-flex; gap: 8px; align-items: center; }
  .ieja-nav .mob-foto { margin: 4px 0 12px 12px; height: 120px; border-radius: 12px; overflow: hidden; position: relative; }
  .ieja-nav .mob-foto img { width: 100% !important; height: 100% !important; object-fit: cover; }
  .ieja-nav .mob-bts { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; padding-top: 16px; border-top: 1px solid var(--linha); }
  .ieja-nav .mob-bts .nav-bt { text-align: center; padding: 13px 20px; }

  @media (max-width: 1240px) { .ieja-nav .nav-bt-sec { display: none; } .ieja-nav .nav-it { padding: 9px 12px; } }
  @media (max-width: 1080px) {
    .ieja-nav .nav-itens, .ieja-nav .nav-acoes, .ieja-nav .nav-mega { display: none; }
    .ieja-nav .nav-ham { display: block; }
    .ieja-nav .nav-topo { padding: 10px 10px 10px 20px; }
    .ieja-nav .nav-logo img { height: 32px !important; }
    .ieja-nav .nav-mob-in { max-height: calc(100svh - 110px); overflow-y: auto; }
  }
  @media (max-width: 480px) { .ieja-nav { padding: 10px; } .ieja-nav .nav-card { border-radius: 20px; } }

  /* ---------- Moodle ---------- */
  .ieja-nav .nav-card { overflow: visible; }               /* o menu do usuário (dropdown) não pode ser cortado */
  .ieja-nav .nav-mega-in { border-radius: 0 0 24px 24px; }
  .ieja-nav .nav-dir { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
  .ieja-nav .nav-moodle { display: flex; align-items: center; }
  .ieja-nav .nav-it { white-space: nowrap; }
  /* #usernavigation é um .navbar-nav do Bootstrap: fora da barra .navbar-expand ele empilha; aqui fica em linha */
  .ieja-nav .nav-moodle #usernavigation { display: flex; flex-direction: row !important; flex-wrap: nowrap; align-items: center; gap: 4px; margin: 0 !important; height: auto !important; }
  .ieja-nav .nav-moodle .navbar-nav .dropdown-menu, .ieja-nav .nav-moodle .popover-region-container { position: absolute !important; }
  .ieja-nav .nav-moodle .usermenu .dropdown-menu { right: 0; left: auto; }
  /* logado: a área do usuário ocupa o lugar do botão secundário, e o menu vira sanfona mais cedo */
  .ieja-logado .ieja-nav .nav-bt-sec { display: none; }
  @media (max-width: 1160px) {
    .ieja-logado .ieja-nav .nav-itens, .ieja-logado .ieja-nav .nav-acoes, .ieja-logado .ieja-nav .nav-mega { display: none; }
    .ieja-logado .ieja-nav .nav-ham { display: block; }
    .ieja-logado .ieja-nav .nav-topo { padding: 10px 10px 10px 20px; }
    .ieja-logado .ieja-nav .nav-mob-in { max-height: calc(100svh - 110px); overflow-y: auto; }
  }
  @media (max-width: 640px) {
    .ieja-nav .nav-moodle #usernavigation > #toggle-darkmode, .ieja-nav .nav-moodle #usernavigation > .editmode-switch-form,
    .ieja-nav .nav-moodle .popover-region-mylearning { display: none !important; }
  }
  .ieja-nav .nav-moodle .langmenu, .ieja-nav .nav-moodle .divider, .ieja-nav .nav-moodle .login .btn-login,
  .ieja-nav .nav-moodle .login a { display: none !important; }
  .ieja-nav .nav-moodle .nav-link, .ieja-nav .nav-moodle .icon, .ieja-nav .nav-moodle .popover-region-toggle { color: var(--tinta) !important; }
  .ieja-nav .nav-moodle .dropdown-menu { font-family: inherit; }
  .ieja-nav .nav-moodle .usermenu .login { display: none; }
  .ieja-nav .nav-entrar { border-radius: 999px; padding: 11px 20px; font-size: 14px; font-weight: 700; white-space: nowrap;
    background: var(--ouro); color: var(--tinta) !important; border: 1px solid var(--ouro); transition: background .2s; }
  .ieja-nav .nav-entrar:hover { background: #d6b25f; }
  @media (max-width: 1080px) {
    .ieja-nav .nav-entrar { padding: 9px 16px; }
    .ieja-nav .nav-dir { gap: 4px; }
  }

  /* A barra do Moove (70 px) sai; o cartão é mais alto. Em vez de fixar alturas, tudo desce a diferença (--ieja-dy, medida pelo
     menu.js): o #page mantém a margem que o Moove dá (70 ou 130 com a barra de abas do curso) e os elementos fixos descem junto. */
  html.ieja-menu-novo { --ieja-dy: 34px; }
  html.ieja-menu-novo nav.navbar.fixed-top { display: none !important; }
  html.ieja-menu-novo body.ieja-menu-on #page-wrapper { padding-top: var(--ieja-dy); }
  html.ieja-menu-novo body.ieja-menu-on .secondary-navigation { transform: translateY(var(--ieja-dy)); }
  html.ieja-menu-novo body.ieja-menu-on .drawer:not(.drawer-primary) { margin-top: var(--ieja-dy); padding-bottom: var(--ieja-dy); }
  html.ieja-menu-novo body.ieja-menu-on { scroll-padding-top: calc(80px + var(--ieja-dy)); }
  /* algumas telas do Moodle passam da largura no celular (ex.: aviso de restrição da atividade no curso), o que alargava a página
     e empurrava o botão do menu para fora da tela; o excesso é cortado sem criar rolagem nova */
  html.ieja-menu-novo body.ieja-menu-on #page-wrapper { overflow-x: clip; }
  /* capa de curso do Moodle (arte horizontal com texto): mostrada inteira em 16:9, legenda embaixo em vez de por cima */
  .ieja-nav .mega-foto.mega-foto-capa { height: auto !important; justify-content: flex-start; background: #141311; align-self: start; }
  .ieja-nav .mega-foto-capa img { position: static; aspect-ratio: 16 / 9; height: auto !important; }
  .ieja-nav .mega:hover .mega-foto-capa img { transform: none; }
  .ieja-nav .mega-foto-capa p { margin: 0 !important; border-radius: 0; background: #141311; }
  .ieja-nav .mega-col a.mega-mais, .ieja-nav .mob-lista a.mega-mais { font-size: 14px !important; font-weight: 700; color: #8a6a28 !important; }
  .ieja-nav .mob-lista .mob-sob { margin-top: 6px; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--suave); }
  .ieja-nav .mob-lista .mob-sob:first-child { margin-top: 0; }
  .ieja-nav .mob-lista .mob-sob:empty { height: 1px; margin: 4px 0 0; background: var(--linha); }
  /* modo escuro e modo de edição dentro do menu do usuário (movidos pelo menu.js) */
  .ieja-nav .ieja-dd-chaves { display: flex; flex-direction: column; gap: 10px; padding: 8px 16px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--linha); }
  .ieja-nav .ieja-dd-chaves #toggle-darkmode { gap: 6px; }
  .ieja-nav .ieja-dd-chaves .ieja-dd-rot { margin-right: auto; padding-right: 12px; }
  .ieja-nav .ieja-dd-chaves svg { width: 16px; height: 16px; flex: none; }
  .ieja-nav .ieja-dd-chaves .form-check { margin: 0; }
  .ieja-nav .ieja-dd-chaves .editmode-switch-form .input-group { justify-content: space-between; flex-wrap: nowrap; }
  .ieja-nav .ieja-dd-chaves .editmode-switch-form label { white-space: nowrap; }
  .ieja-nav .nav-moodle #usernavigation > .divider { display: none !important; }

  /* ícones da área do usuário: o Moodle mistura estilos (chapéu e balão da Font Awesome, acessibilidade em imagem preenchida).
     Aqui viram botões redondos iguais, com ícones de traço no mesmo desenho (Lucide), e dourado no hover, como os itens do menu. */
  .ieja-nav .nav-moodle .popover-region { display: flex; align-items: center; }
  .ieja-nav .nav-moodle .popover-region-toggle { position: relative; display: flex !important; align-items: center; justify-content: center;
    width: 38px; height: 38px; padding: 0 !important; margin: 0 1px; border-radius: 999px; background: #f5f3ee; border: 1px solid var(--linha);
    color: var(--tinta) !important; box-shadow: none !important; outline: none; transition: background .2s, border-color .2s, color .2s; }
  .ieja-nav .nav-moodle .popover-region-toggle:hover, .ieja-nav .nav-moodle .popover-region-toggle[aria-expanded="true"] { background: var(--ouro); border-color: var(--ouro); }
  .ieja-nav .nav-moodle .popover-region-toggle:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--tinta) !important; }
  .ieja-nav .nav-moodle .popover-region-toggle > i, .ieja-nav .nav-moodle .popover-region-toggle > img { display: none !important; }
  /* o Moodle usa ::before/::after do botão para a setinha do balão (escondida quando fechado): aqui o ::before vira o ícone e o ::after sai */
  .ieja-nav .nav-moodle .popover-region-toggle::after { display: none !important; }
  .ieja-nav .nav-moodle .popover-region-toggle::before { content: "" !important; display: block !important; position: static !important; border: 0 !important; margin: 0 !important;
    width: 19px; height: 19px; background: currentColor;
    -webkit-mask: var(--ieja-ic) center / contain no-repeat; mask: var(--ieja-ic) center / contain no-repeat; }
  .ieja-nav .nav-moodle #nav-mylearning-popover-container .popover-region-toggle { --ieja-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0z'/%3E%3Cpath d='M22 10v6'/%3E%3Cpath d='M6 12.5V16a6 3 0 0 0 12 0v-3.5'/%3E%3C/svg%3E"); }
  .ieja-nav .nav-moodle #nav-accessibility-popover-container .popover-region-toggle { --ieja-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='4.5' r='1.5'/%3E%3Cpath d='m9 20 3-6 3 6'/%3E%3Cpath d='m5.5 8 6.5 2 6.5-2'/%3E%3Cpath d='M12 10v4'/%3E%3C/svg%3E"); }
  .ieja-nav .nav-moodle #nav-notification-popover-container .popover-region-toggle { --ieja-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.268 21a2 2 0 0 0 3.464 0'/%3E%3Cpath d='M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326'/%3E%3C/svg%3E"); }
  .ieja-nav .nav-moodle [id^="message-drawer-toggle"] { --ieja-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); }
  /* contador de não lidas: bolinha dourada no canto do botão */
  .ieja-nav .nav-moodle .popover-region-toggle .count-container { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 999px; background: var(--tinta); color: #fff; border: 2px solid #fff; font: 700 10px/14px "PT Sans", sans-serif; text-align: center; }
  /* avatar no mesmo tamanho; sem a seta do dropdown */
  .ieja-nav .nav-moodle .usermenu .dropdown-toggle { display: flex; align-items: center; padding: 0 0 0 6px !important; box-shadow: none !important; outline: none; }
  .ieja-nav .nav-moodle .usermenu .dropdown-toggle::after { display: none; }
  .ieja-nav .nav-moodle .usermenu .avatar, .ieja-nav .nav-moodle .usermenu .userinitials { width: 38px !important; height: 38px !important; }
  .ieja-nav .nav-moodle .usermenu .userinitials { background: var(--tinta); color: #fff; font: 700 13px/38px "PT Sans", sans-serif; border: 0; }
  .ieja-nav .nav-moodle .usermenu .dropdown-toggle:hover .userinitials, .ieja-nav .nav-moodle .usermenu .dropdown-toggle[aria-expanded="true"] .userinitials { background: var(--ouro); color: var(--tinta); }
  .ieja-nav .nav-moodle .usermenu .dropdown-toggle:focus-visible .avatar { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--tinta); }

  /* ---- botão de tema (06/11/2026): no lugar do balão de mensagens, mesmo botão redondo dos vizinhos. Lua no claro, sol no escuro. ---- */
  .ieja-nav .nav-moodle [data-region="popover-region-messages"], .ieja-nav #toggle-darkmode { display: none !important; }
  .ieja-nav .nav-moodle .ieja-tema { cursor: pointer; font: inherit; }
  .ieja-nav .nav-moodle .ieja-tema { --ieja-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z'/%3E%3C/svg%3E"); }
  .ieja-escuro .ieja-nav .nav-moodle .ieja-tema { --ieja-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41'/%3E%3C/svg%3E"); }
  .ieja-nav .nav-moodle .ieja-tema-reg { margin-right: 2px; }
  .ieja-nav .nav-logo .logo-escuro { display: none !important; }

  /* ---- cabeçalho no tema escuro: cartão grafite, textos claros. Onde a "tinta" é FUNDO (botão Meus cursos, iniciais, contador)
     ou texto sobre o dourado, a cor é fixada à parte para não perder contraste. ---- */
  .ieja-escuro .ieja-nav { --tinta: #f2efe8; --suave: #a9a59b; --linha: #3a3833; }
  .ieja-escuro .ieja-nav .nav-card { background: #1b1b19; border-color: rgb(255 255 255 / .08); box-shadow: 0 1px 2px rgb(0 0 0 / .3), 0 14px 36px -10px rgb(0 0 0 / .6); }
  .ieja-escuro .ieja-nav .nav-logo .logo-claro { display: none !important; }
  .ieja-escuro .ieja-nav .nav-logo .logo-escuro { display: block !important; }
  .ieja-escuro .ieja-nav .nav-it, .ieja-escuro .ieja-nav .mob-lista .mega-txt, .ieja-escuro .ieja-nav .mega-redes a, .ieja-escuro .ieja-nav .mob-lista a { color: #d9d5cc !important; }
  .ieja-escuro .ieja-nav .nav-it:hover, .ieja-escuro .ieja-nav .nav-it:focus, .ieja-escuro .ieja-nav .mob-it:hover, .ieja-escuro .ieja-nav .mob-it:focus { background: #2a2926 !important; color: #f2efe8 !important; }
  .ieja-escuro .ieja-nav .nav-bt-sec { background: #242320; }
  .ieja-escuro .ieja-nav .nav-bt-sec:hover { background: #2f2e2a; }
  .ieja-escuro .ieja-nav .nav-bt-pri { background: #f2efe8; border-color: #f2efe8; color: #1d1e1c !important; }
  .ieja-escuro .ieja-nav .nav-bt-pri:hover, .ieja-escuro .ieja-nav .nav-entrar, .ieja-escuro .ieja-nav a.mega-ajuda:hover, .ieja-escuro .ieja-nav a.mega-ajuda:focus-visible,
  .ieja-escuro .ieja-nav .mega-selo { color: #1d1e1c !important; }
  .ieja-escuro .ieja-nav .mega-col a:hover, .ieja-escuro .ieja-nav a.mega-ajuda, .ieja-escuro .ieja-nav .mega-col a.mega-mais, .ieja-escuro .ieja-nav .mob-lista a.mega-mais { color: #d6b25f !important; }
  .ieja-escuro .ieja-nav .mega-foto { background: #2a2926; }
  .ieja-escuro .ieja-nav .nav-moodle .popover-region-toggle { background: #2a2926; }
  .ieja-escuro .ieja-nav .nav-moodle .popover-region-toggle:hover, .ieja-escuro .ieja-nav .nav-moodle .popover-region-toggle[aria-expanded="true"] { background: var(--ouro); border-color: var(--ouro); color: #1d1e1c !important; }
  .ieja-escuro .ieja-nav .nav-moodle .popover-region-toggle:focus-visible { box-shadow: 0 0 0 2px #1b1b19, 0 0 0 4px #f2efe8 !important; }
  .ieja-escuro .ieja-nav .nav-moodle .popover-region-toggle .count-container { color: #1d1e1c; border-color: #1b1b19; }
  .ieja-escuro .ieja-nav .nav-moodle .usermenu .userinitials { color: #1d1e1c; }
  .ieja-escuro .ieja-nav .nav-moodle .usermenu .dropdown-toggle:hover .userinitials,
  .ieja-escuro .ieja-nav .nav-moodle .usermenu .dropdown-toggle[aria-expanded="true"] .userinitials { color: #1d1e1c; }
  .ieja-escuro .ieja-nav .nav-moodle .usermenu .dropdown-toggle:focus-visible .avatar { box-shadow: 0 0 0 2px #1b1b19, 0 0 0 4px #f2efe8; }