/* =========================================================
   EXTRAS — terminal interativo (js/terminal.js), paleta Ctrl+K
   (js/paleta.js), barra de leitura e indicador do menu (js/navbar.js)
   ========================================================= */

/* ---------- barra de leitura no topo da página ---------- */
.barra-leitura {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 110; pointer-events: none;
  background: linear-gradient(90deg, #e5a963, #5fe0d8); transform: scaleX(0); transform-origin: left;
}

/* ---------- indicador líquido do menu ---------- */
/* só no computador: no celular o menu ☰ é posicionado pelo css/navbar.css */
@media (min-width: 901px) { .nav-links { position: relative; } }
.nav-indicador {
  position: absolute; top: 50%; left: -14px; width: calc(100% + 28px); height: 1.9rem; margin-top: -.95rem; border-radius: 980px; pointer-events: none; z-index: -1;
  background: rgba(255, 255, 255, .13); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
  opacity: 0; transition: clip-path .2s var(--ease-in-out), opacity .15s ease;
}
body.light-theme:not(.on-hero) .nav-indicador { background: rgba(0, 0, 0, .07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7); }
.nav-links a.is-atual { opacity: 1; }
@media (max-width: 900px) { .nav-indicador { display: none; } }

/* ---------- resposta ao clique: o botão afunda de leve ---------- */
.btn-primary, .vhero-btn, .privacy-btn { transition: transform 160ms var(--ease-out), background-color .2s ease, opacity .2s ease, box-shadow .2s ease, border-color .2s ease; }
.btn-primary:active, .vhero-btn:active, .privacy-btn:active, .paleta-botao:active { transform: scale(.97); }
.paleta-botao { transition: transform 160ms var(--ease-out), background-color .2s ease; }
@media (prefers-reduced-motion: reduce) {
  .btn-primary:active, .vhero-btn:active, .privacy-btn:active, .paleta-botao:active { transform: none; }
}

/* usa a propriedade scale, que soma com o transform do ímã e do hover em vez de substituí-lo */
.nav-cta, .lang-btn, .theme-btn, .detail-close, .detail-nav button, .news-chip, .news-tab, .news-refresh, .rc-abas button, .tm-chip, .tm-reset {
  transition: scale 160ms var(--ease-out), background-color .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease, box-shadow .2s ease;
}
.nav-cta:active, .lang-btn:active, .theme-btn:active, .detail-close:active, .detail-nav button:active, .news-chip:active, .news-tab:active, .news-refresh:active, .rc-abas button:active, .tm-chip:active, .tm-reset:active { scale: .97; }
.teo-tema, .teo-estudo, .news-card { transition: transform .2s var(--ease-out), scale 160ms var(--ease-out), border-color .2s ease; }
[data-detail]:active, .tool-card:active, .teo-tema:active, .teo-estudo:active, .teo-chamada:active, .news-card:active { scale: .98; }
@media (prefers-reduced-motion: reduce) {
  .nav-cta:active, .lang-btn:active, .theme-btn:active, .detail-close:active, .detail-nav button:active, .news-chip:active, .news-tab:active, .news-refresh:active, .rc-abas button:active, .tm-chip:active, .tm-reset:active,
  [data-detail]:active, .tool-card:active, .teo-tema:active, .teo-estudo:active, .teo-chamada:active, .news-card:active { scale: none; }
}

/* menu ☰: nasce do canto do botão, em vez de surgir de repente */
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  .nav-links.active {
    transform-origin: top right;
    transition: opacity .18s var(--ease-out), transform .18s var(--ease-out);
    @starting-style { opacity: 0; transform: scale(.97); }
  }
}

/* detalhes que ninguém nota: toque sem flash azul, números que não dançam, títulos sem palavra solta */
a, button { -webkit-tap-highlight-color: transparent; }
.rc-dados dd, .rc-tabela, .mk-value, .teo-progresso, .city-stats strong { font-variant-numeric: tabular-nums; }
h1, h2 { text-wrap: balance; }

/* páginas internas no celular: a volta vira só a seta */
@media (max-width: 480px) {
  .nav-back { font-size: 0; }
  .nav-back::first-letter { font-size: 1.2rem; }
}

/* ---------- botão da paleta no menu ---------- */
.paleta-botao {
  display: inline-flex; align-items: center; gap: .4rem; height: 1.95rem; padding: 0 .65rem; border-radius: 980px; cursor: pointer;
  font: inherit; font-size: .72rem; color: var(--cream); border: 0; background: rgba(127, 127, 127, .14);
}
body.on-hero .paleta-botao { color: #fff; background: rgba(255, 255, 255, .12); }
.paleta-botao:hover { background: rgba(127, 127, 127, .26); }
.paleta-botao svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.paleta-botao kbd { font: inherit; opacity: .72; }
@media (max-width: 1000px) { .paleta-botao kbd { display: none; } }
@media (max-width: 600px), (pointer: coarse) { .paleta-botao { display: none; } }

/* ---------- paleta ---------- */
.paleta-fundo {
  position: fixed; inset: 0; z-index: 9800; display: flex; justify-content: center; align-items: flex-start; padding: min(16vh, 140px) 1rem 1rem;
  background: rgba(0, 0, 0, .35);
}
.paleta-fundo[hidden] { display: none; }
body.light-theme .paleta-fundo { background: rgba(243, 241, 234, .4); }
.paleta {
  width: min(620px, 100%); border-radius: 1.3rem; overflow: hidden; color: var(--cream);
  background: linear-gradient(145deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03)), rgba(26, 26, 30, .78);
  border: 1px solid rgba(255, 255, 255, .18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 30px 90px rgba(0, 0, 0, .5);
  -webkit-backdrop-filter: blur(34px) saturate(180%); backdrop-filter: blur(34px) saturate(180%);
}
body.light-theme .paleta { background: linear-gradient(145deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, .55)), rgba(255, 255, 255, .5); border-color: rgba(255, 255, 255, .9); box-shadow: inset 0 1px 0 #fff, 0 30px 80px rgba(30, 50, 45, .2); }
.paleta-busca { display: flex; align-items: center; gap: .7rem; padding: .95rem 1.15rem; border-bottom: 1px solid var(--border); }
.paleta-busca svg { width: 19px; height: 19px; flex: 0 0 auto; fill: none; stroke: var(--gray); stroke-width: 2; stroke-linecap: round; }
.paleta-busca input { flex: 1; min-width: 0; font: inherit; font-size: 1.08rem; letter-spacing: -.012em; color: var(--cream); background: none; border: 0; outline: none; }
.paleta-busca input::placeholder { color: var(--gray); }
.paleta-busca kbd, .paleta-lista em { font: inherit; font-style: normal; font-size: .72rem; color: var(--gray); }
.paleta-busca kbd { padding: .12rem .45rem; border-radius: .4rem; background: rgba(127, 127, 127, .18); }
.paleta-lista { list-style: none; padding: .45rem; max-height: min(52vh, 420px); overflow-y: auto; scrollbar-width: thin; }
.paleta-lista li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .62rem .8rem; border-radius: .75rem; cursor: pointer; letter-spacing: -.01em; }
.paleta-lista li.is-marcado { background: rgba(229, 169, 99, .2); }
body.light-theme .paleta-lista li.is-marcado { background: rgba(10, 107, 102, .13); }
.paleta-lista small { display: block; color: var(--gray); font-size: .78rem; }
.paleta-vazio { justify-content: center !important; color: var(--gray); cursor: default !important; padding: 1.5rem !important; }

/* ---------- terminal interativo ---------- */
.about-visual.is-interativo { cursor: text; transition: box-shadow .3s; }
.about-visual.is-interativo:focus-within { box-shadow: 0 0 0 1px rgba(229, 169, 99, .55), 0 18px 50px rgba(0, 0, 0, .3); }
.is-interativo .av-body { max-height: 300px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .22) transparent; }
.av-body p.av-linha { clip-path: none; animation: none !important; white-space: pre-wrap; word-break: break-word; }
.av-body p.av-eco { color: #F5F0E8; opacity: .72; }
.av-body p.av-erro { color: #ff8a7a; }
.av-body a { color: #5fe0d8; text-underline-offset: 3px; }
.av-entrada { display: flex; align-items: center; gap: .55rem; opacity: 0; }
.about-visual.visible .av-entrada { animation: av-aparece .4s ease 4.1s forwards; }
@keyframes av-aparece { to { opacity: 1; } }
.av-entrada b { color: #e5a963; font-weight: 500; }
.av-entrada input { flex: 1; min-width: 0; font: inherit; color: #F5F0E8; caret-color: #e5a963; background: none; border: 0; outline: none; padding: 0; }
.av-entrada input::placeholder { color: rgba(245, 240, 232, .42); }
.about-visual:focus-within .av-entrada { opacity: 1; animation: none; }

@media (prefers-reduced-motion: reduce) {
  .nav-indicador { transition: none; }
  .av-entrada { opacity: 1; }
  .about-visual.visible .av-entrada { animation: none; }
}

/* =========================================================
   MENU REPAGINADO — só o botão principal tem destaque; o resto é discreto.
   Vem por último para valer sobre as regras antigas do menu.
   ========================================================= */
nav { gap: 1rem; }
.nav-links { gap: 1.6rem; }
.nav-right { gap: .25rem; }
.nav-right > .nav-cta { margin-left: .4rem; }
.nav-right > .lang-btn, .nav-right > .theme-btn { display: none; }   /* vão para Ajustes assim que o script roda */

/* busca e ajustes: só ícone, sem caixa */
.paleta-botao, .nav-icone {
  display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%;
  color: var(--cream); background: none; cursor: pointer; transition: scale 160ms var(--ease-out), background-color .15s ease;
}
.paleta-botao kbd { display: none; }
.paleta-botao svg, .nav-icone svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.paleta-botao:hover, .nav-icone:hover, .nav-icone[aria-expanded="true"] { background: rgba(127, 127, 127, .16); }
body.on-hero .paleta-botao, body.on-hero .nav-icone { color: #fff; background: none; }
body.on-hero .paleta-botao:hover, body.on-hero .nav-icone:hover, body.on-hero .nav-icone[aria-expanded="true"] { background: rgba(255, 255, 255, .14); }
.paleta-botao:active, .nav-icone:active { scale: .94; }
.paleta-botao:focus-visible, .nav-icone:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* entrar: um link de texto */

/* menu de ajustes: nasce do canto do botão; pelo teclado aparece na hora; fecha na hora */
.nav-ajustes { position: relative; display: inline-flex; }
.nav-ajustes-menu {
  position: absolute; top: calc(100% + 12px); right: 0; z-index: 2; display: grid; gap: .25rem; width: 200px; padding: .5rem;
  color: var(--cream); background: var(--card-bg); border: 1px solid var(--glass-line); border-radius: 16px; box-shadow: 0 16px 44px rgba(0, 0, 0, .35);
  transform-origin: top right; transition: opacity .15s var(--ease-out), transform .15s var(--ease-out);
  @starting-style { opacity: 0; transform: scale(.97); }
}
.nav-ajustes-menu[hidden] { display: none; }
.nav-ajustes-menu.sem-anim { transition: none; }
body.on-hero .nav-ajustes-menu { color: #f5f5f7; background: #1c1c1e; }
.nav-ajuste { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .3rem .3rem .3rem .55rem; font-size: .84rem; }
.nav-ajuste .lang-btn, .nav-ajuste .theme-btn { min-width: 42px; height: 30px; margin: 0; padding: 0 .55rem; }

@media (max-width: 600px), (pointer: coarse) { .paleta-botao { display: none; } }
@media (max-width: 1000px) { .nav-links { gap: 1.15rem; } }
@media (max-width: 900px) {
  .nav-right .nav-toggle { width: 34px; height: 34px; padding: 0; font-size: 1.15rem; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-ajustes-menu { transition: none; }
  .paleta-botao:active, .nav-icone:active { scale: none; }
}