/* TranscritorAi — folha de estilos compartilhada.
   Redesign v24: paleta neutra "estilo ChatGPT/DeepSeek" (cinzas verdadeiros
   em vez de cinza puxado pra azul), cantos mais arredondados, sombras mais
   suaves e um pouco mais de "respiro" — mesma estrutura de HTML/JS de
   sempre, nada de classe ou id novo aqui, só valores refinados. A logomarca
   (indigo #4f46e5) continua a mesma; trocar quando a identidade visual
   definitiva for decidida (ver seção 14 do plano). */

:root {
  --cor-fundo: #ffffff;
  --cor-fundo-alt: #f7f7f8;
  --cor-texto: #0d0d10;
  --cor-texto-suave: #6b6f7b;
  --cor-borda: #e5e5ea;
  --cor-marca: #4f46e5;
  --cor-marca-escura: #4338ca;
  --cor-marca-suave: #eef0ff;
  --cor-destaque: #12a150;
  --cor-card-fundo: #ffffff;
  --sombra-card: 0 1px 2px rgba(15, 15, 20, 0.03), 0 6px 20px rgba(15, 15, 20, 0.055);
  --sombra-elevada: 0 4px 10px rgba(15, 15, 20, 0.06), 0 16px 40px rgba(15, 15, 20, 0.09);
  --anel-foco: 0 0 0 3px color-mix(in srgb, var(--cor-marca) 30%, transparent);
  --raio: 16px;
  --raio-grande: 20px;
  --largura-maxima: 1120px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --cor-fundo: #0e0e10;
    --cor-fundo-alt: #17171a;
    --cor-texto: #f2f2f5;
    --cor-texto-suave: #9a9aa6;
    --cor-borda: #2a2a2e;
    --cor-marca: #8b85f2;
    --cor-marca-escura: #b3aef7;
    --cor-marca-suave: #211f3a;
    --cor-destaque: #3ecb7e;
    --cor-card-fundo: #1a1a1e;
    --sombra-card: 0 1px 2px rgba(0, 0, 0, 0.25), 0 6px 20px rgba(0, 0, 0, 0.32);
    --sombra-elevada: 0 4px 10px rgba(0, 0, 0, 0.3), 0 20px 48px rgba(0, 0, 0, 0.45);
    --anel-foco: 0 0 0 3px color-mix(in srgb, var(--cor-marca) 35%, transparent);
  }
}

* {
  box-sizing: border-box;
}

/* v29: reforça o atributo `hidden` do HTML contra qualquer classe que
   declare `display` (ex.: `.botao { display: inline-flex }`). Sem isso,
   um elemento com `hidden` + uma classe dessas fica visível na tela mesmo
   assim — a regra do navegador pro atributo (`[hidden] { display: none }`)
   é de folha de estilo do USUÁRIO/AGENTE, e uma regra de folha de estilo do
   AUTOR (a nossa) sempre ganha dela na cascata, não importa a especificidade
   de nenhuma das duas. Bug real encontrado ao testar `#botao-importar-drive`
   (v29, item 1) — ele nasce com `hidden` no HTML mas `.botao` define
   `display: inline-flex`, então ficava visível pra qualquer usuário
   deslogado até o JS decidir mostrar ou não. Os botões "Conectar"/
   "Desconectar" do Google Drive em meus-arquivos.html (v21) tinham o mesmo
   problema, encontrado junto. */
[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: -apple-system, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color 0.2s ease, color 0.2s ease;
}

h1, h2, h3, h4 {
  letter-spacing: -0.015em;
}

.container {
  max-width: var(--largura-maxima);
  margin: 0 auto;
  padding: 0 24px;
}

a {
  color: var(--cor-marca);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

img {
  max-width: 100%;
}

::selection {
  background: color-mix(in srgb, var(--cor-marca) 30%, transparent);
  color: var(--cor-texto);
}

:focus-visible {
  outline: none;
  box-shadow: var(--anel-foco);
  border-radius: 6px;
}

/* Barra de rolagem discreta, no tom da paleta atual (webkit) */
::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--cor-texto-suave) 35%, transparent);
  border-radius: 999px;
  border: 3px solid var(--cor-fundo);
}
::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--cor-texto-suave) 55%, transparent);
}

/* ---------- Barra lateral (v25) ----------
   Substitui o cabeçalho horizontal por um menu fixo à esquerda, presente em
   todas as páginas: navegação, planos (accordion) e a área de conta/idioma
   ficam todos ali, deixando o centro da tela livre pro conteúdo de cada
   página. Compressível no desktop (só ícones); vira uma gaveta (off-canvas)
   com overlay no mobile. */

.app-shell {
  display: flex;
  align-items: flex-start;
  min-height: 100vh;
}

.barra-lateral {
  --largura-barra: 260px;
  --largura-barra-comprimida: 72px;
  width: var(--largura-barra);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  background: var(--cor-fundo-alt);
  border-right: 1px solid var(--cor-borda);
  transition: width 0.2s ease;
  z-index: 30;
}

.barra-lateral.comprimida {
  width: var(--largura-barra-comprimida);
}

.barra-lateral.comprimida .rotulo-item {
  display: none;
}

.barra-lateral-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 16px 14px;
}

/* v26: no modo comprimido (72px) não cabe mais logo + botão lado a lado
   (28px + 28px + gap não cabem nos ~44px que sobram de largura útil) — o
   botão ficava sobreposto ao ícone da marca (bug relatado pelo Leandro).
   Empilhando os dois (ícone em cima, botão embaixo) resolve sem precisar
   encolher nada. */
.barra-lateral.comprimida .barra-lateral-topo {
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 10px 8px;
}

.barra-lateral.comprimida .marca {
  justify-content: center;
}

.marca {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--cor-texto);
  min-width: 0;
}

.marca svg {
  flex-shrink: 0;
}

.marca-texto {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.barra-lateral-comprimir {
  flex-shrink: 0;
  background: none;
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
  width: 28px;
  height: 28px;
  color: var(--cor-texto-suave);
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
}
.barra-lateral-comprimir:hover {
  color: var(--cor-texto);
  background: var(--cor-fundo);
}

.barra-lateral-nav {
  padding: 4px 10px;
}

.nav-links {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a,
.nav-links .nav-submenu-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--cor-texto-suave);
  font-weight: 500;
  font-size: 0.92rem;
  padding: 9px 12px;
  border-radius: 10px;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.nav-links a:hover,
.nav-links .nav-submenu-toggle:hover {
  color: var(--cor-texto);
  background: var(--cor-borda);
  text-decoration: none;
}

.barra-lateral.comprimida .nav-links a,
.barra-lateral.comprimida .nav-links .nav-submenu-toggle {
  justify-content: center;
  padding: 10px 0;
}

.item-menu-icone {
  flex-shrink: 0;
  font-size: 1.05rem;
  line-height: 1;
}

/* ---------- Submenu "Sobre" na navegação (v27) ----------
   Antes disso, cada página tinha um rodapé próprio (`<footer class="rodape">`)
   com uma coluna "Legal" (Política de Privacidade/Termos de Uso/LGPD) mais
   duas linhas de aviso/direitos autorais — o Leandro pediu pra tirar esse
   rodapé de vez ("retire esse menu inferior totalmente") e mover esses três
   links pra um item novo na navegação, logo abaixo de "Suporte", só sem se
   chamar "Legal" (virou "Sobre"). O botão funciona como um pequeno
   accordion: com a barra expandida, a lista abre embutida (indentada) logo
   abaixo do botão; com a barra comprimida (72px, só ícones), não cabe uma
   lista indentada, então vira um menu flutuante à direita — mesma ideia dos
   popovers de idioma/conta no rodapé da barra, só que abrindo pro lado em
   vez de pra cima (o item "Sobre" fica no meio da barra, não no rodapé). */

.nav-item-submenu {
  position: relative;
}

.nav-submenu-toggle {
  width: 100%;
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
}

.nav-submenu-seta {
  margin-left: auto;
  font-size: 0.65rem;
  opacity: 0.7;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.nav-submenu-toggle[aria-expanded="true"] .nav-submenu-seta {
  transform: rotate(180deg);
}

.nav-submenu {
  list-style: none;
  margin: 2px 0 4px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.nav-submenu[hidden] {
  display: none;
}

.nav-submenu a {
  display: block;
  padding: 7px 12px 7px 38px;
  border-radius: 8px;
  color: var(--cor-texto-suave);
  font-size: 0.85rem;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.nav-submenu a:hover {
  color: var(--cor-texto);
  background: var(--cor-borda);
  text-decoration: none;
}

.barra-lateral.comprimida .nav-submenu-seta {
  display: none;
}

/* `position: fixed` (não `absolute`) de propósito: `.barra-lateral` tem
   `overflow-y: auto` (telas baixas — ver breakpoint de altura), o que
   recorta qualquer coisa posicionada `absolute` que vaze pra fora da caixa
   da barra nos dois eixos, não só o vertical. `position: fixed` escapa
   desse corte; `top`/`left` são calculados em JS (`initSubmenuSobre` em
   main.js), não dá pra fazer só em CSS sem saber a posição do botão. */
.barra-lateral.comprimida .nav-submenu:not([hidden]) {
  position: fixed;
  z-index: 45;
  min-width: 190px;
  padding: 6px;
  background: var(--cor-card-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: 14px;
  box-shadow: var(--sombra-elevada);
}

.barra-lateral.comprimida .nav-submenu a {
  padding: 8px 10px;
}

/* ---------- Rodapé da barra lateral: idioma + conta (v26) ----------
   O Leandro achou o rodapé antigo (planos em accordion + select nativo de
   idioma + cartão de conta com créditos, saudação e "Sair" empilhados)
   "muito feio e grande demais". V26 tira os planos daqui (viraram página
   própria, ver planos.html) e reduz o resto a uma única linha enxuta: um
   botão de idioma compacto (com bandeira) e, do outro lado, ou um avatar
   circular que abre um popover pequeno (conta logada: saudação + Sair), ou
   um botão "Entrar" discreto (deslogado). Os créditos saíram totalmente
   daqui — moraram pro popover de uso ao lado do "Processar" (v26, item 5
   do pedido do Leandro; ver .uso-popover-* mais abaixo). */

/* v47 fix (bug visual relatado pelo Leandro): antes disto, idioma + conta
   ficavam lado a lado numa única linha (`justify-content: space-between`)
   dentro de uma barra lateral de só 260px — sem sobrar espaço nenhum pra
   "Entrar"/"Criar conta" (ou, logado, o indicador de créditos + saudação +
   "Sair"), cada palavra desses botões/textos quebrava sozinha em várias
   linhas e vazava pra fora do rodapé. Empilhado em coluna, cada linha usa a
   largura inteira do rodapé — sem mais quebra de palavra nem vazamento. */
.barra-lateral-rodape {
  margin-top: auto;
  padding: 10px;
  border-top: 1px solid var(--cor-borda);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

/* Comprimida (72px): não cabe texto nenhum, então o rodapé mostra só o
   botão de idioma (ícone da bandeira) — `.nav-acoes-conta` some inteira
   (ver regra logo abaixo), mesmo padrão já usado pro rótulo do idioma e
   pros itens do menu (`.rotulo-item`). Expandir a barra de volta continua
   dando acesso a entrar/sair normalmente. */
.barra-lateral.comprimida .barra-lateral-rodape {
  align-items: center;
  gap: 6px;
  padding: 8px 6px;
}

/* Select nativo escondido visualmente, mas continua no DOM e funcional
   (js/i18n.js não muda nada: `seletor.value =`/`dispatchEvent("change")`
   seguem funcionando por trás do botão bonito abaixo). */
.seletor-idioma-nativo {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.seletor-idioma-custom {
  position: relative;
}

.botao-idioma {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px solid var(--cor-borda);
  border-radius: 999px;
  padding: 6px 10px;
  color: var(--cor-texto-suave);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  max-width: 100%;
}
.botao-idioma:hover {
  color: var(--cor-texto);
  background: var(--cor-fundo);
}

.botao-idioma-bandeira {
  font-size: 0.95rem;
  line-height: 1;
  flex-shrink: 0;
}

.botao-idioma-nome {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.botao-idioma-seta {
  font-size: 0.65rem;
  opacity: 0.7;
  flex-shrink: 0;
}

.lista-idiomas-custom {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  z-index: 45;
  list-style: none;
  margin: 0;
  padding: 6px;
  min-width: 190px;
  max-height: min(300px, calc(100vh - 160px));
  overflow-y: auto;
  background: var(--cor-card-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: 14px;
  box-shadow: var(--sombra-elevada);
}

.lista-idiomas-custom[hidden] {
  display: none;
}

.lista-idiomas-custom li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.85rem;
  cursor: pointer;
  color: var(--cor-texto);
}

.lista-idiomas-custom li:hover,
.lista-idiomas-custom li:focus-visible {
  background: var(--cor-fundo-alt);
  outline: none;
}

.lista-idiomas-custom li[aria-selected="true"] {
  color: var(--cor-marca);
  font-weight: 700;
  background: var(--cor-marca-suave);
}

.barra-lateral.comprimida .botao-idioma-nome,
.barra-lateral.comprimida .botao-idioma-seta {
  display: none;
}
.barra-lateral.comprimida .botao-idioma {
  padding: 5px;
  justify-content: center;
}

.barra-lateral.comprimida .botao-conta-avatar {
  width: 28px;
  height: 28px;
  font-size: 0.78rem;
}
.barra-lateral.comprimida .lista-idiomas-custom {
  left: 100%;
  bottom: 0;
  margin-left: 8px;
}

/* v47: coluna de largura cheia, tanto deslogado ("Entrar"/"Criar conta"
   empilhados) quanto logado (créditos + saudação + "Sair" empilhados) — ver
   comentário completo em `.barra-lateral-rodape` acima. */
.nav-acoes-conta {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  width: 100%;
}

.nav-acoes-conta:empty {
  display: none;
}

/* Os botões "Entrar"/"Criar conta"/"Sair" reaproveitam `.botao` (pensado
   pra CTAs grandes no corpo da página) — aqui, dentro do rodapé estreito da
   barra lateral, precisam de um tamanho compacto próprio. */
.nav-acoes-conta .botao {
  width: 100%;
  padding: 8px 14px;
  font-size: 0.82rem;
  white-space: nowrap;
}

.conta-saudacao {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--cor-texto);
}

.indicador-creditos {
  display: block;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--cor-texto-suave);
}

.barra-lateral.comprimida .nav-acoes-conta {
  display: none;
}

/* Deslogado: link discreto (sem o par de botões grandes de antes). */
.link-entrar-compacto {
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Logado: avatar circular (inicial do nome) que abre um popover pequeno —
   troca o cartão empilhado (créditos + saudação + botão Sair) de antes por
   um único controle discreto, no mesmo espírito compacto do menu de conta
   do Claude. */
.conta-compacta {
  position: relative;
}

.botao-conta-avatar {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  border: none;
  background: var(--cor-marca);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.botao-conta-avatar:hover {
  opacity: 0.9;
}

.popover-conta {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  z-index: 45;
  min-width: 200px;
  background: var(--cor-card-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: 14px;
  box-shadow: var(--sombra-elevada);
  padding: 12px;
}

.popover-conta[hidden] {
  display: none;
}

.popover-conta-nome {
  margin: 0 0 10px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--cor-texto-suave);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.barra-lateral.comprimida .popover-conta {
  right: auto;
  left: 100%;
  margin-left: 8px;
  bottom: 0;
}

/* ---------- Área principal (conteúdo de cada página) ---------- */

.area-principal {
  flex: 1;
  min-width: 0;
}

.barra-topo-mobile {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--cor-fundo) 78%, transparent);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid var(--cor-borda);
}

.marca-mobile {
  font-size: 1rem;
}

.nav-toggle {
  display: inline-flex;
  flex-shrink: 0;
  background: none;
  border: 1px solid var(--cor-borda);
  border-radius: 10px;
  padding: 8px 10px;
  color: var(--cor-texto);
  cursor: pointer;
}

.barra-lateral-overlay {
  display: none;
}

/* ---------- Botões ---------- */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.12s ease, opacity 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.botao:hover {
  text-decoration: none;
  opacity: 0.94;
  transform: translateY(-1px);
}
.botao:active {
  transform: translateY(0);
  opacity: 1;
}

.botao-primario {
  background: var(--cor-marca);
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 15, 20, 0.05), 0 4px 14px color-mix(in srgb, var(--cor-marca) 30%, transparent);
}

.botao-primario:hover {
  box-shadow: 0 2px 4px rgba(15, 15, 20, 0.06), 0 8px 20px color-mix(in srgb, var(--cor-marca) 38%, transparent);
}

.botao-secundario {
  background: var(--cor-card-fundo);
  border-color: var(--cor-borda);
  color: var(--cor-texto);
}

.botao-secundario:hover {
  background: var(--cor-fundo-alt);
}

.botao-bloco {
  width: 100%;
}

.botao[disabled],
.botao.em-breve {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ---------- Seções gerais ---------- */

.secao {
  padding: 72px 0;
}

.secao-alt {
  background: var(--cor-fundo-alt);
}

.secao-titulo {
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  margin: 0 0 8px;
}

.secao-subtitulo {
  color: var(--cor-texto-suave);
  max-width: 640px;
  margin: 0 0 40px;
}

.centralizado {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Hero ---------- */

.hero {
  padding: 96px 0 64px;
  text-align: center;
}

.hero h1 {
  font-size: clamp(2rem, 4vw, 3.25rem);
  margin: 0 0 20px;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.hero p {
  font-size: 1.15rem;
  color: var(--cor-texto-suave);
  max-width: 640px;
  margin: 0 auto 32px;
}

.hero-acoes {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---------- Página inicial: só o processamento (v25) ----------
   O centro da home virou só a zona de processamento — sem hero, grade de
   formatos, "como funciona" ou planos (tudo isso saiu daqui: planos foram
   pra barra lateral, o resto foi removido a pedido do Leandro). A página
   ganhou cara de conversa: um título curto no topo, a lista de arquivos
   como um "feed" de mensagens (`.chat-feed`, ver .item-arquivo abaixo) e a
   zona de envio funcionando como a barra de composição, fixa embaixo. */

.pagina-chat {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 0px);
  padding-bottom: 24px;
}

.chat-intro {
  padding: 48px 24px 8px;
}

.chat-titulo {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}

.chat-subtitulo {
  color: var(--cor-texto-suave);
  margin: 0;
}

.chat-feed-container {
  flex: 1;
}

.chat-feed {
  min-height: 40px;
}

.zona-composicao {
  position: sticky;
  bottom: 0;
  background: color-mix(in srgb, var(--cor-fundo) 92%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding-top: 16px;
  padding-bottom: 4px;
  margin-top: 16px;
}

/* Cota/mensagem final/progresso (v27): fica ACIMA do cartão de composição,
   não mais dentro dele — ver comentário no index.html. Cada filho continua
   controlando sua própria visibilidade via `hidden`; este envoltório só
   centraliza e, quando tudo está escondido, não ocupa espaço nenhum. */
.zona-status {
  max-width: 720px;
  margin: 0 auto;
}

/* ---------- Zona de envio de arquivos ---------- */

.secao-upload {
  padding: 32px 0 56px;
}

/* "Cartão de composição" (v27): a zona de arrastar, o campo de URL e a
   linha de ação (contagem + Processar) agora vivem dentro de uma única
   caixa arredondada, no espírito da caixa de composição do chat da Claude
   — antes eram três elementos soltos, um deles (a zona de arrastar) bem
   grande, empilhados sem uma moldura comum. */
.composer-card {
  max-width: 720px;
  margin: 0 auto;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-grande);
  background: var(--cor-card-fundo);
  box-shadow: var(--sombra-card);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Composer recolhível (v29, item 9): a seta é o único filho direto sempre
   visível de `.composer-card` — o corpo (arrastar/URL/Processar) some via
   `.composer-recolhido`, deixando só a faixa fina da alça. */
.composer-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border: none;
  background: none;
  color: var(--cor-texto-suave);
  cursor: pointer;
  padding: 2px 0;
  margin: -4px 0 -2px;
  border-radius: 6px;
}

.composer-handle:hover,
.composer-handle:focus-visible {
  color: var(--cor-texto);
  outline: none;
}

.composer-handle-seta {
  display: inline-block;
  font-size: 0.85rem;
  transition: transform 0.2s ease;
}

/* Recolhido: a seta vira pra cima ("suprimido... com uma seta para cima",
   pedido do Leandro) e o corpo inteiro some, sobrando só a faixa da alça. */
.composer-card.composer-recolhido .composer-handle-seta {
  transform: rotate(180deg);
}

.composer-corpo {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.composer-card.composer-recolhido .composer-corpo {
  display: none;
}

/* A zona de arrastar virou uma faixa compacta (ícone + texto numa linha),
   não mais uma caixa grande com padding generoso — pedido do Leandro pra
   "ocupar menos espaço, pra limpar um pouco a tela". Continua sendo o
   mesmo alvo de clique/drag-and-drop de sempre (js/upload.js não muda). */
.zona-upload {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1.5px dashed var(--cor-borda);
  border-radius: var(--raio);
  padding: 9px 12px;
  cursor: pointer;
  background: var(--cor-fundo-alt);
  text-align: left;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.zona-upload:hover,
.zona-upload:focus-visible {
  border-color: var(--cor-marca);
  background: var(--cor-marca-suave);
  outline: none;
}

.zona-upload.arrastando {
  border-color: var(--cor-marca);
  background: var(--cor-marca-suave);
}

.zona-upload-icone {
  font-size: 1.1rem;
  flex-shrink: 0;
}

.zona-upload-textos {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.zona-upload-titulo {
  font-weight: 700;
  font-size: 0.85rem;
  margin: 0;
}

.zona-upload-subtitulo {
  color: var(--cor-texto-suave);
  font-size: 0.75rem;
  margin: 0;
}

.zona-upload-formatos {
  color: var(--cor-texto-suave);
  font-size: 0.78rem;
  margin: 0;
}

/* Uma vez que já tem arquivo/URL selecionado (`#acoes-upload` visível), o
   subtítulo da zona de arrastar não agrega mais nada (o usuário já sabe
   como funciona) — some pra deixar a faixa ainda mais enxuta. Degrada bem
   em navegadores sem :has(): o subtítulo simplesmente continua visível. */
.composer-card:has(#acoes-upload:not([hidden])) .zona-upload-subtitulo {
  display: none;
}

/* Campo "adicionar site" (v19): fica logo abaixo da zona de arrastar
   arquivos, sempre visível (diferente de #acoes-upload, que só aparece
   quando já tem algo selecionado) — adicionar uma URL não depende de já
   ter um arquivo escolhido. */
.zona-url {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Botão "Importar do Google Drive" (v29, item 1) — só aparece pra quem
   está logado E tem o recurso configurado no servidor (ver
   atualizarBotaoImportarDrive() em js/auth.js). Quebra pra linha de baixo
   em telas estreitas, junto com o campo de URL. */
.botao-importar-drive {
  white-space: nowrap;
}

.campo-url {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid var(--cor-borda);
  border-radius: 12px;
  background: var(--cor-card-fundo);
  color: inherit;
  font: inherit;
  font-size: 0.85rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.campo-url:focus-visible {
  outline: none;
  border-color: var(--cor-marca);
  box-shadow: var(--anel-foco);
}

/* Lista de arquivos convertidos/com falha — estilo de feed de chat (v25, a
   pedido do Leandro: "igual a interface do claude"). Mesma estrutura de
   HTML/classes de sempre (upload.js não mudou nada aqui, só a folha de
   estilos): cada `.item-arquivo` vira um "cartão-mensagem" com cantos bem
   arredondados e uma borda colorida à esquerda que reflete o status (verde
   pronto, vermelho falhou), como uma resposta de um assistente de chat. */
.lista-arquivos {
  list-style: none;
  margin: 8px auto 0;
  padding: 0;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* v62 — lotes concorrentes: cabeçalho de UM lote enviado (progresso +
   resultado final), um por lote, sempre logo antes dos `.item-arquivo`
   daquele mesmo lote. Reaproveita o miolo de `.progresso-upload`/
   `.mensagem-auth` de sempre (não mudou); só o envoltório em si (a moldura
   de cartão) é novo, pra agrupar visualmente com os itens do lote logo
   abaixo — mesmo espírito de cartão que `.item-arquivo`, com menos
   destaque (sem borda colorida à esquerda: não é uma "mensagem" de
   resultado por si só). */
.lote-cabecalho {
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: 12px 14px;
  background: var(--cor-fundo-alt);
}

.lote-cabecalho .progresso-upload {
  margin-top: 0;
}

.lote-cabecalho .mensagem-auth {
  margin-bottom: 0;
}

.item-arquivo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--cor-borda);
  border-left: 3px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: 12px 14px;
  background: var(--cor-card-fundo);
  box-shadow: var(--sombra-card);
  font-size: 0.85rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.item-arquivo:has(.item-arquivo-selo-pronto) {
  border-left-color: var(--cor-destaque);
}

.item-arquivo:has(.item-arquivo-selo-falhou) {
  border-left-color: #dc2626;
}

.item-arquivo:has(.item-arquivo-selo-processando) {
  border-left-color: var(--cor-marca);
}

.item-arquivo:has(.item-arquivo-selo-requer-login) {
  border-left-color: #d97706;
}

/* v40 — pedido do Leandro: além do selo amarelo, a linha inteira do item
   ganha um destaque bem mais fraco (contorno/sombra suave), pra chamar mais
   atenção enquanto o item está "aguardando login" sem competir visualmente
   com o próprio selo. Some sozinho quando o estado muda (ver
   atualizarSelosArquivos() em js/upload.js). */
.item-arquivo-atencao {
  box-shadow: 0 0 0 2px color-mix(in srgb, #d97706 22%, transparent), var(--sombra-card);
  background: color-mix(in srgb, #d97706 5%, var(--cor-card-fundo));
}

.item-arquivo-linha {
  display: flex;
  align-items: center;
  gap: 10px;
}

.item-arquivo-nome {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-arquivo-nome-editavel {
  cursor: pointer;
  border-radius: 4px;
}

.item-arquivo-nome-editavel:hover {
  text-decoration: underline;
  color: var(--cor-marca);
}

.item-arquivo-tamanho {
  color: var(--cor-texto-suave);
  font-size: 0.78rem;
  white-space: nowrap;
}

.item-arquivo-remover {
  border: none;
  background: none;
  color: var(--cor-texto-suave);
  cursor: pointer;
  font-size: 0.9rem;
  padding: 2px 4px;
  border-radius: 6px;
  line-height: 1;
}

.item-arquivo-remover:hover {
  color: #dc2626;
}

.item-arquivo-selo {
  white-space: nowrap;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
}

.item-arquivo-selo-pronto {
  background: color-mix(in srgb, var(--cor-destaque) 16%, transparent);
  color: var(--cor-destaque);
}

.item-arquivo-selo-falhou {
  background: color-mix(in srgb, #dc2626 14%, transparent);
  color: #dc2626;
}

/* Selo "Requer login" (v40): mesma estrutura clicável do "Falhou" (herda
   `.item-arquivo-selo-clicavel`), só que em âmbar — abre o popup de
   navegador ao vivo em vez do modal de erro técnico (ver
   atualizarSelosArquivos()/abrirPopupLogin() em js/upload.js e
   js/login-popup.js). */
.item-arquivo-selo-requer-login {
  background: color-mix(in srgb, #d97706 16%, transparent);
  color: #d97706;
}

/* Selo "Processando" (v34): estado transitório, recalculado a cada consulta
   de status a partir de `statusJob.arquivos_em_andamento` — nunca fica
   "preso" porque não é gravado em ESTADO_ARQUIVOS, some sozinho assim que o
   arquivo vira "pronto"/"falhou". O pulso discreto reforça que é uma ação em
   andamento, não um estado parado como os outros selos. */
.item-arquivo-selo-processando {
  background: color-mix(in srgb, var(--cor-marca) 14%, transparent);
  color: var(--cor-marca);
  animation: transcritor-selo-pulsar 1.6s ease-in-out infinite;
}

@keyframes transcritor-selo-pulsar {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* Selo "Na fila" (v34): arquivo já enviado ao backend mas ainda não coube
   numa leva de processamento em paralelo — ver `arquivos_pendentes` em
   `status_publico()`. Neutro de propósito, pra não competir visualmente com
   "Processando"/"Falhou". */
.item-arquivo-selo-fila {
  background: color-mix(in srgb, var(--cor-texto-suave) 14%, transparent);
  color: var(--cor-texto-suave);
}

/* Item reconstruído a partir do status do trabalho, não da seleção local do
   navegador (v34) — acontece ao reconectar a um trabalho em segundo plano
   depois de recarregar a página, quando a lista de `File`/URLs em memória já
   se perdeu. Borda tracejada sutil deixa claro que esse item não pode ser
   removido/reprocessado (não há mais o arquivo original em memória) — é só
   uma visão do que o backend está fazendo agora. */
.item-arquivo-sincronizado {
  border-style: dashed;
}

/* Selo "Falhou": vira um <button> clicável que abre o popup com o motivo
   completo da falha (ver #modal-erro-arquivo e abrirModalErro() em
   js/upload.js) — precisa dos resets abaixo porque um <button> traz borda,
   fonte e cursor próprios que o <span> dos outros selos não tem. */
.item-arquivo-selo-clicavel {
  border: none;
  font: inherit;
  cursor: pointer;
  transition: filter 0.15s ease;
}

.item-arquivo-selo-clicavel:hover,
.item-arquivo-selo-clicavel:focus-visible {
  filter: brightness(0.9);
  outline: 2px solid currentColor;
  outline-offset: 1px;
}

/* Ícone "ℹ" dentro do selo "Falhou" clicável: reforça visualmente (além do
   cursor e do hover) que o selo é um botão com mais informação por trás. */
.item-arquivo-selo-icone-info {
  display: inline-block;
  margin-left: 4px;
  font-style: normal;
  font-weight: 700;
  opacity: 0.85;
}

/* Item de formato não suportado (v19): fica meio apagado (opacidade
   reduzida) pra deixar claro visualmente que ele não vai ser processado,
   sem precisar remover o item da lista — o usuário ainda vê o nome e pode
   remover manualmente se quiser. */
.item-arquivo-invalido {
  opacity: 0.65;
}

.item-arquivo-formato-invalido {
  white-space: nowrap;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cor-texto-suave) 18%, transparent);
  color: var(--cor-texto-suave);
}

/* Botão "Reprocessar" (v19): aparece ao lado do selo "Falhou", chama
   POST /transcricoes/reprocessar (não gasta cota) em vez de reenviar o lote
   inteiro pelo fluxo normal. */
.item-arquivo-reprocessar {
  white-space: nowrap;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid var(--cor-marca);
  background: transparent;
  color: var(--cor-marca);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s ease, color 0.15s ease;
}

.item-arquivo-reprocessar:hover,
.item-arquivo-reprocessar:focus-visible {
  background: var(--cor-marca);
  color: #fff;
}

.item-arquivo-reprocessar:disabled {
  opacity: 0.6;
  cursor: default;
  background: transparent;
  color: var(--cor-marca);
}

.item-arquivo-duplicata {
  border-top: 1px dashed var(--cor-borda);
  padding-top: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
}

.item-arquivo-duplicata-aviso {
  margin: 0;
  width: 100%;
  font-size: 0.78rem;
  color: var(--cor-texto-suave);
}

.item-arquivo-duplicata-opcao {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  cursor: pointer;
}

.item-arquivo-duplicata-opcao input {
  cursor: pointer;
}

/* Checkbox mestre "selecionar todos" (v29, itens 3 e 4) — só aparece
   quando há pelo menos uma duplicata detectada na lista atual, ver
   atualizarCheckboxSelecionarTodos() em js/upload.js. */
.selecionar-todos-duplicatas-linha {
  padding: 2px 0 4px;
}

.selecionar-todos-duplicatas-opcao {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--cor-texto-suave);
  cursor: pointer;
}

.selecionar-todos-duplicatas-opcao input {
  cursor: pointer;
}

.acoes-upload {
  border-top: 1px solid var(--cor-borda);
  padding-top: 10px;
  text-align: left;
}

.aviso-upload-proto {
  color: var(--cor-texto-suave);
  font-size: 0.78rem;
  margin: 6px 0 0;
}

.acoes-upload-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.contagem-arquivos {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--cor-texto-suave);
  text-align: left;
}

/* ---------- Popover de uso/créditos (v26, item 5) ----------
   Substitui o antigo selo grande de créditos que ficava no rodapé da barra
   lateral: agora é um ícone discreto ao lado do "Processar", no estilo do
   indicador de limites de uso do próprio Claude (círculo pequeno que abre
   um painel compacto com barra de progresso) — só aparece pra quem está
   logado (mesma regra do indicador antigo). Os números vêm do mesmo
   `GET /usuarios/eu/capacidade` de sempre (auth.js: `obterCapacidade`,
   `atualizarIndicadorCreditos`), nenhuma rota nova. */
.acoes-upload-cabecalho-direita {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.botao-uso-creditos {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--cor-borda);
  background: var(--cor-fundo-alt);
  color: var(--cor-texto-suave);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.botao-uso-creditos:hover {
  color: var(--cor-texto);
  border-color: var(--cor-marca);
}

.uso-popover-plano {
  margin: 0 0 10px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--cor-texto-suave);
}

.uso-popover-texto {
  margin: 0 0 6px;
  font-size: 0.78rem;
  color: var(--cor-texto-suave);
}

.uso-popover-barra-trilha {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: var(--cor-borda);
  overflow: hidden;
  margin-bottom: 12px;
}

.uso-popover-barra-preenchimento {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--cor-marca);
  transition: width 0.3s ease;
}

.uso-popover-link {
  font-size: 0.78rem;
  font-weight: 600;
}

.progresso-upload {
  margin-top: 12px;
  text-align: left;
}

.progresso-trilha {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: var(--cor-borda);
  overflow: hidden;
}

.progresso-preenchimento {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--cor-marca);
  transition: width 0.3s ease;
}

.progresso-texto {
  margin: 6px 0 0;
  font-size: 0.8rem;
  color: var(--cor-texto-suave);
}

/* v51: desde que o texto de progresso parou de incluir o nome do arquivo/
   site atual (podia ser bem comprido, especialmente URL), a altura desta
   linha não varia mais entre uma atualização e outra — por isso não precisa
   mais de `flex-wrap`/`min-width` (eram o que causava a tela inteira
   "pulando" pra cima e pra baixo a cada ~1.2s de polling, quando o texto
   comprido quebrava linha ou empurrava o botão de cancelar). Texto
   centralizado no espaço entre o início da linha e o botão, que fica fixo
   na ponta. */
.progresso-upload-linha {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.progresso-upload-linha .progresso-texto {
  margin: 6px 0 0;
  flex: 1;
  text-align: center;
}

.botao-cancelar-processamento {
  padding: 6px 16px;
  font-size: 0.82rem;
  flex-shrink: 0;
}

.botao-cancelar-processamento:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
}

.link-inline {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  white-space: nowrap;
}

.link-inline:hover {
  text-decoration-thickness: 2px;
}

/* ---------- Meus arquivos (histórico) ---------- */

.lista-historico-grupos {
  margin: 20px auto 0;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}

.grupo-dia-historico {
  border: 1px solid var(--cor-borda);
  border-radius: 12px;
  background: var(--cor-fundo-alt);
  overflow: hidden;
}

.grupo-dia-historico-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}

.grupo-dia-historico-cabecalho::-webkit-details-marker {
  display: none;
}

.grupo-dia-historico-cabecalho:hover,
.grupo-dia-historico-cabecalho:focus-visible {
  color: var(--cor-marca-escura);
}

.grupo-dia-historico-contagem {
  font-weight: 400;
  color: var(--cor-texto-suave);
  font-size: 0.8rem;
  background: var(--cor-card-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: 999px;
  padding: 1px 9px;
}

.lista-historico {
  list-style: none;
  margin: 0;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.item-historico {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--cor-borda);
  border-radius: 10px;
  padding: 10px 14px;
  background: var(--cor-card-fundo);
  font-size: 0.85rem;
}

.item-historico-checkbox {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

.item-historico-nome {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}

.selo-origem-guardada {
  font-size: 0.8rem;
  opacity: 0.75;
  cursor: help;
}

.item-historico-tamanho {
  color: var(--cor-texto-suave);
  font-size: 0.78rem;
  white-space: nowrap;
}

.item-historico-data {
  color: var(--cor-texto-suave);
  font-size: 0.78rem;
  white-space: nowrap;
}

.item-historico-excluir {
  flex: 0 0 auto;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.95rem;
  padding: 4px;
  border-radius: 8px;
  color: var(--cor-texto-suave);
}

.item-historico-excluir:hover,
.item-historico-excluir:focus-visible {
  color: #dc2626;
  background: color-mix(in srgb, #dc2626 12%, transparent);
}

.historico-estado {
  color: var(--cor-texto-suave);
  font-size: 0.85rem;
  margin: 20px 0 0;
}

/* ---------- Meus arquivos: busca + seleção múltipla (Fase B) ---------- */

.barra-ferramentas-historico {
  max-width: 640px;
  margin: 20px auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.campo-busca-historico {
  flex: 1;
  min-width: 200px;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid var(--cor-borda);
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-size: 0.9rem;
}

.campo-busca-historico:focus-visible {
  outline: 2px solid var(--cor-marca);
  outline-offset: 1px;
}

.selecionar-todos-historico,
.selecionar-todos-excluidos {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--cor-texto-suave);
  white-space: nowrap;
  cursor: pointer;
}

.barra-selecao-historico {
  max-width: 640px;
  margin: 10px auto 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 14px;
  border-radius: 10px;
  background: var(--cor-marca-suave);
  font-size: 0.85rem;
}

.barra-selecao-historico #contador-selecionados,
.barra-selecao-historico .contador-selecionados-excluidos {
  flex: 1;
  font-weight: 600;
  color: var(--cor-marca-escura);
}

.botao-perigo {
  background: none;
  border: 1px solid #dc2626;
  color: #dc2626;
}

.botao-perigo:hover,
.botao-perigo:focus-visible {
  background: color-mix(in srgb, #dc2626 12%, transparent);
}

/* ---------- Meus arquivos: aba "Excluídos" / lixeira (v77) ---------- */

.abas-historico {
  display: flex;
  justify-content: center;
  gap: 18px;
  max-width: 640px;
  margin: 20px auto 0;
  border-bottom: 1px solid var(--cor-borda);
}

.aba-historico {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: none;
  color: var(--cor-texto-suave);
  font: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 8px 6px 10px;
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.aba-historico:hover,
.aba-historico:focus-visible {
  color: var(--cor-texto);
  outline: none;
}

.aba-historico[aria-selected="true"] {
  color: var(--cor-marca);
  border-bottom-color: var(--cor-marca);
}

.aba-historico-contagem {
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--cor-texto-suave);
  background: var(--cor-card-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: 999px;
  padding: 0 8px;
}

.excluidos-aviso {
  max-width: 640px;
  margin: 16px auto 0;
  color: var(--cor-texto-suave);
  font-size: 0.85rem;
  line-height: 1.5;
  text-align: left;
}

.excluidos-uso {
  margin-top: 6px;
  font-weight: 600;
}

/* Item da lixeira: mais coisa na linha (prazo + dois botões), então quebra em telas estreitas. */
.item-historico-excluido {
  flex-wrap: wrap;
}

.item-historico-excluido .item-historico-nome {
  flex: 1 1 180px;
}

.item-historico-prazo {
  color: var(--cor-texto-suave);
  font-size: 0.78rem;
  white-space: nowrap;
}

.item-historico-prazo-hoje {
  color: #dc2626;
  font-weight: 600;
}

/* ---------- Armazenamento em nuvem (Fase C) ---------- */

.secao-armazenamento {
  max-width: 640px;
  margin: 24px auto 0;
  text-align: left;
}

.armazenamento-cabecalho {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: space-between;
  border: 1px solid var(--cor-borda);
  border-radius: 12px;
  padding: 14px 16px;
  background: var(--cor-fundo-alt);
}

.armazenamento-medidor {
  flex: 1;
  min-width: 220px;
}

.armazenamento-medidor-texto {
  margin: 0 0 6px;
  font-size: 0.85rem;
  color: var(--cor-texto-suave);
}

.armazenamento-medidor-trilha {
  height: 8px;
  border-radius: 999px;
  background: var(--cor-borda);
  overflow: hidden;
}

.armazenamento-medidor-preenchimento {
  height: 100%;
  background: var(--cor-marca);
  border-radius: 999px;
  transition: width 0.3s ease;
}

.armazenamento-medidor-preenchimento-cheio {
  background: #dc2626;
}

.armazenamento-aviso-cheio {
  margin: 8px 0 0;
  font-size: 0.8rem;
  color: #dc2626;
}

.grade-planos-armazenamento {
  margin-top: 14px;
}

.cartao-plano-armazenamento .limite {
  font-weight: 600;
}

/* ---------- Google Drive (v21) ---------- */

.cartao-google-drive {
  margin-top: 14px;
  border: 1px solid var(--cor-borda);
  border-radius: 12px;
  padding: 16px;
  background: var(--cor-fundo-alt);
}

.cartao-google-drive-cabecalho {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.cartao-google-drive-cabecalho h3 {
  margin: 0;
  font-size: 1rem;
}

.cartao-google-drive-descricao {
  margin: 8px 0 0;
  font-size: 0.85rem;
  color: var(--cor-texto-suave);
}

.google-drive-info-conectado {
  margin-top: 10px;
}

.google-drive-conta-email,
.google-drive-enviados {
  margin: 0 0 4px;
  font-size: 0.85rem;
  color: var(--cor-texto-suave);
}

.google-drive-info-conectado .armazenamento-medidor {
  margin-top: 10px;
}

.cartao-google-drive-acoes {
  margin-top: 12px;
}

/* ---------- Logins salvos (v41) — reaproveita o cartão do Google Drive acima ---------- */

.lista-credenciais-login {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lista-credenciais-login-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
  background: var(--cor-card-fundo);
}

.lista-credenciais-login-dominio {
  margin: 0;
  font-weight: 600;
  font-size: 0.85rem;
}

.lista-credenciais-login-usuario {
  margin: 2px 0 0;
  font-size: 0.78rem;
  color: var(--cor-texto-suave);
}

/* ---------- Visualizador por tipo de arquivo (popup "Ver" — Fase C) ---------- */

/* Tamanho de verdade em `.modal-conteudo-visualizador`, mais abaixo, DEPOIS
   de `.modal-conteudo` — mesmo motivo do comentário em `.modal-conteudo-planos`
   (cascata: mesma especificidade, quem vem depois no arquivo vence; aqui
   definido antes, o `max-width: 360px`/`width: 100%` genéricos sempre
   ganhavam, e o popup nunca chegava a crescer de verdade). */

.visualizador-corpo {
  overflow: auto;
  margin-top: 10px;
  flex: 1;
}

.visualizador-texto {
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--cor-fundo-alt);
  border: 1px solid var(--cor-borda);
  border-radius: 10px;
  padding: 14px;
  font-size: 0.85rem;
  max-height: 100%;
  overflow: auto;
}

.visualizador-imagem {
  max-width: 100%;
  max-height: 100%;
  display: block;
  margin: 0 auto;
  border-radius: 10px;
}

/* ---------- Visualizador de site (v49): item processado a partir de uma
   URL nunca guarda arquivo de origem, então o "Ver" de sempre só mostrava o
   .md convertido — agora oferece a página original também (iframe, com
   aviso de que alguns sites bloqueiam ser exibidos assim) e um alternador
   pra voltar ao .md convertido, que sempre funciona. ---------- */
.visualizador-site {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.visualizador-site-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 8px;
}

.visualizador-site-aviso {
  font-size: 0.8rem;
  color: var(--cor-texto-suave);
  margin: 0 0 10px;
}

/* v69: o iframe passou a ser inserido depois de um `fetch` autenticado
   (`GET /historico/{id}/site-original`, proxy no backend — ver js/historico.js),
   então nasce dentro deste envoltório mostrando "Carregando..."/erro antes
   dele existir de verdade; o envoltório assume o `flex: 1` que antes era só
   do próprio iframe. */
.visualizador-site-iframe-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
}

.visualizador-site-iframe-wrap .historico-estado {
  margin: auto;
}

.visualizador-site-iframe {
  flex: 1;
  width: 100%;
  min-height: 0;
  border: 1px solid var(--cor-borda);
  border-radius: 10px;
  background: #fff;
}

.visualizador-site .visualizador-texto-bloco {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ---------- Texto convertido + botão "Copiar" (v69) ----------
   Reaproveitado por tipo="md", pelo alternador de tipo="site" (acima) e,
   novo nesta rodada, ao lado de imagem/vídeo/áudio/PDF quando o backend
   manda o texto convertido junto — pedido do Leandro: "no visualizador de
   vídeos, imagens e áudios não está mostrando o texto transcrito". */
.visualizador-texto-cabecalho {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 6px;
}

.visualizador-botao-copiar {
  padding: 4px 12px;
  font-size: 0.78rem;
}

.visualizador-midia-com-texto {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  min-height: 0;
}

.visualizador-midia-item {
  flex: 0 0 auto;
  max-height: 55%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.visualizador-midia-item .visualizador-imagem,
.visualizador-midia-item .visualizador-video,
.visualizador-midia-item .visualizador-pdf {
  max-height: 100%;
}

.visualizador-midia-item .visualizador-audio {
  width: 100%;
}

.visualizador-midia-com-texto .visualizador-texto-bloco {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.visualizador-midia-com-texto .visualizador-texto {
  flex: 1;
  min-height: 0;
}

/* ---------- Popup de planos (v28) ----------
   Carrega a própria `planos.html` num iframe, em vez de duplicar a grade de
   planos em cada página — pedido do Leandro: "é a mesma página só que em
   popup, pra não mudar o foco do usuário". `?modal=1` na URL do iframe faz a
   própria `planos.html` esconder a barra lateral (`.modo-popup`, mais
   abaixo) pra não ficar uma barra lateral dentro de outra.

   As regras de tamanho ficam mais abaixo, DEPOIS de `.modal-conteudo` (item
   17 do Leandro: "não está sendo possível ver tudo" — a causa era essa
   classe estar definida ANTES de `.modal-conteudo` no arquivo; com a mesma
   especificidade de seletor, quem vem depois no CSS "ganha" a cascata, então
   o `max-width: 360px`/`width: 100%` genérico de `.modal-conteudo`
   sobrescrevia o `width: min(1100px, 94vw)` daqui, encolhendo o popup de
   planos pra uma caixa de 360px — só a primeira carta cabia, sem nenhuma
   barra de rolagem visível pro usuário perceber que dava pra rolar). */

/* Modo popup de `planos.html` (embutida no iframe acima): some com a barra
   lateral e a barra superior mobile — sobra só o `<main>`, que é o
   conteúdo que interessa dentro do popup. */
body.modo-popup .barra-lateral,
body.modo-popup #overlay-barra-lateral,
body.modo-popup .barra-topo-mobile {
  display: none !important;
}

body.modo-popup .app-shell {
  min-height: 0;
}

/* ---------- Popup dos planos de armazenamento (v28) ---------- */

/* Tamanho de verdade em `.modal-conteudo-planos-armazenamento`, mais abaixo
   (depois de `.modal-conteudo` — mesmo motivo do comentário em
   `.modal-conteudo-planos`); o conteúdo continua sendo a grade
   `#grade-planos-armazenamento` renderizada por `historico.js`, só a
   moldura do popup que ficou igual à de planos de transcrições. */

.modal-conteudo-planos-armazenamento .titulo-login-github {
  text-align: left;
  margin: 0 0 16px;
}

.visualizador-video {
  width: 100%;
  max-height: 100%;
  border-radius: 10px;
  background: #000;
}

.visualizador-pdf {
  width: 100%;
  height: 100%;
  border: 1px solid var(--cor-borda);
  border-radius: 10px;
}

.visualizador-tabela-wrap {
  overflow: auto;
  max-height: 100%;
  border: 1px solid var(--cor-borda);
  border-radius: 10px;
}

.tabela-visualizador {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.82rem;
}

.tabela-visualizador th,
.tabela-visualizador td {
  border: 1px solid var(--cor-borda);
  padding: 6px 10px;
  text-align: left;
  white-space: nowrap;
}

.tabela-visualizador th {
  background: var(--cor-fundo-alt);
  position: sticky;
  top: 0;
}

/* ---------- Grid de formatos ---------- */

.grade-formatos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.cartao-formato {
  background: var(--cor-card-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: 14px;
  padding: 14px;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.cartao-formato:hover {
  border-color: color-mix(in srgb, var(--cor-marca) 40%, var(--cor-borda));
  box-shadow: var(--sombra-card);
  transform: translateY(-2px);
}

.cartao-formato h3 {
  margin: 8px 0 3px;
  font-size: 0.92rem;
}

.cartao-formato p {
  margin: 0;
  color: var(--cor-texto-suave);
  font-size: 0.8rem;
  line-height: 1.4;
}

.cartao-formato-extensoes {
  margin-top: 6px !important;
  font-size: 0.72rem !important;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  color: var(--cor-marca) !important;
  opacity: 0.85;
  word-break: break-word;
}

.icone-formato {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--cor-marca-suave);
  color: var(--cor-marca);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
}

.icone-formato svg {
  width: 16px;
  height: 16px;
}

/* ---------- Chips de formatos (página de planos) ---------- */

.chips-formatos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.chip-formato {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--cor-borda);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--cor-texto-suave);
  background: var(--cor-card-fundo);
}

.chip-formato-icone {
  font-size: 1.05rem;
  line-height: 1;
}

/* ---------- Passos "como funciona" ---------- */

.passos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 28px;
  counter-reset: passo;
}

.passo {
  position: relative;
  padding-left: 46px;
}

.passo::before {
  counter-increment: passo;
  content: counter(passo);
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--cor-marca);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
}

.passo h3 {
  margin: 0 0 6px;
  font-size: 1.05rem;
}

.passo p {
  margin: 0;
  color: var(--cor-texto-suave);
  font-size: 0.92rem;
}

/* ---------- Cartões de plano ---------- */

.grade-planos {
  display: grid;
  /* v43: 5 planos em vez de 4 (Free/Standard/Plus/Pro/Pro Max) — 230px
     mínimo só cabia 4 por linha nos ~1050-1100px de largura útil da página
     e do popup, sobrando o Pro Max sozinho numa segunda linha, fora da
     primeira dobra (item 17 do Leandro). 190px cabe as 5 lado a lado nessa
     largura e ainda encolhe normalmente em telas menores. */
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
  align-items: stretch;
}

.cartao-plano {
  background: var(--cor-card-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--sombra-card);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cartao-plano:hover {
  transform: translateY(-3px);
  box-shadow: var(--sombra-elevada);
}

.cartao-plano.destaque {
  border-color: var(--cor-marca);
  outline: 2px solid var(--cor-marca);
  outline-offset: -1px;
  box-shadow: var(--sombra-elevada);
}

.cartao-plano.plano-atual {
  border-color: var(--cor-destaque);
  outline: 2px solid var(--cor-destaque);
  outline-offset: -1px;
}

.cartao-plano .selo-atual {
  background: var(--cor-destaque);
}

.cartao-plano .selo {
  align-self: flex-start;
  background: var(--cor-marca);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
}

.cartao-plano h3 {
  margin: 0 0 4px;
  font-size: 1.1rem;
}

.cartao-plano .plano-descricao {
  color: var(--cor-texto-suave);
  font-size: 0.84rem;
  margin: 0 0 16px;
}

.cartao-plano .preco {
  font-size: 1.65rem;
  font-weight: 800;
  margin: 0;
}

.cartao-plano .preco small {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--cor-texto-suave);
}

.cartao-plano .limite {
  margin: 6px 0 20px;
  color: var(--cor-texto-suave);
  font-size: 0.92rem;
}

.cartao-plano .extra {
  margin: -10px 0 20px;
  color: var(--cor-texto-suave);
  font-size: 0.85rem;
}

.cartao-plano ul.extra {
  padding-left: 18px;
  list-style: disc;
}

.cartao-plano ul.extra li + li {
  margin-top: 4px;
}

.cartao-plano .botao {
  margin-top: auto;
}

/* ---------- Pacotes avulsos ---------- */

.grade-pacotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.cartao-pacote {
  background: var(--cor-card-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: 24px;
  text-align: center;
  box-shadow: var(--sombra-card);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cartao-pacote:hover {
  transform: translateY(-3px);
  box-shadow: var(--sombra-elevada);
}

.cartao-pacote .quantidade {
  font-size: 2.1rem;
  font-weight: 800;
  margin: 0;
}

.cartao-pacote .unidade {
  color: var(--cor-texto-suave);
  font-size: 0.85rem;
  margin: 0 0 14px;
}

.cartao-pacote .preco {
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0 0 16px;
}

/* ---------- Seletor de moeda ---------- */

.seletor-moeda {
  display: inline-flex;
  border: 1px solid var(--cor-borda);
  border-radius: 999px;
  padding: 4px;
  gap: 4px;
  margin: 0 auto 40px;
}

.seletor-moeda button {
  border: none;
  background: transparent;
  color: var(--cor-texto-suave);
  padding: 6px 16px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
}

.seletor-moeda button.ativo {
  background: var(--cor-marca);
  color: #fff;
}

/* ---------- Formas de pagamento ---------- */

.metodos-pagamento {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 24px;
}

.metodo-pagamento {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--cor-borda);
  border-radius: 999px;
  padding: 8px 16px 8px 12px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--cor-texto-suave);
  background: var(--cor-card-fundo);
}

.metodo-pagamento svg {
  flex-shrink: 0;
}

/* ---------- Responsivo ---------- */

@media (max-width: 760px) {
  /* No mobile a barra lateral vira uma gaveta (off-canvas): fica fora da
     tela (translateX) até o botão "☰" da barra superior abri-la, com um
     overlay escurecido atrás. O botão de comprimir some (não faz sentido
     numa gaveta que já fecha inteira) e o modo "comprimida" (herdado de uma
     sessão no desktop, via localStorage) é ignorado aqui. */
  .app-shell {
    display: block;
  }
  .barra-lateral {
    position: fixed;
    top: 0;
    left: 0;
    width: min(280px, 85vw);
    /* No mobile a gaveta é `position: fixed` (relativa à viewport, não ao
       fluxo do documento) — não sofre com o deslocamento da faixa de aviso
       que afeta o modo sticky do desktop, então usa 100vh cheio mesmo. */
    height: 100vh;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: var(--sombra-elevada);
  }
  .barra-lateral.aberta {
    transform: translateX(0);
  }
  .barra-lateral.comprimida {
    width: min(280px, 85vw);
  }
  .barra-lateral.comprimida .rotulo-item {
    display: initial;
  }
  .barra-lateral.comprimida .nav-links a,
  .barra-lateral.comprimida .nav-links .nav-submenu-toggle {
    justify-content: flex-start;
    padding: 9px 12px;
  }
  /* O submenu "Sobre" (v27) vira um menu flutuante no desktop comprimido
     (72px, só ícones); no mobile a gaveta sempre mostra tudo por extenso,
     então volta a ser uma lista indentada embutida, como no desktop
     expandido. */
  .barra-lateral.comprimida .nav-submenu-seta {
    display: inline;
  }
  .barra-lateral.comprimida .nav-submenu:not([hidden]) {
    position: static;
    min-width: 0;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
    margin: 2px 0 4px;
  }
  .barra-lateral.comprimida .nav-submenu a {
    padding: 7px 12px 7px 38px;
  }
  /* No mobile a gaveta sempre mostra tudo por extenso (o estado
     "comprimida" é só uma preferência herdada do desktop via localStorage)
     — desfaz o empilhamento vertical e o modo só-ícone que essas mesmas
     regras aplicam lá em cima para o desktop comprimido. */
  .barra-lateral.comprimida .barra-lateral-topo {
    flex-direction: row;
    justify-content: space-between;
    padding: 16px 14px;
  }
  .barra-lateral.comprimida .marca {
    justify-content: flex-start;
  }
  .barra-lateral.comprimida .barra-lateral-rodape {
    flex-direction: row;
    padding: 10px;
  }
  .barra-lateral.comprimida .botao-idioma {
    padding: 6px 10px;
    justify-content: flex-start;
  }
  .barra-lateral.comprimida .botao-idioma-nome,
  .barra-lateral.comprimida .botao-idioma-seta {
    display: inline;
  }
  .barra-lateral.comprimida .lista-idiomas-custom {
    left: 0;
    bottom: calc(100% + 8px);
    margin-left: 0;
  }
  .barra-lateral.comprimida .popover-conta {
    right: 0;
    left: auto;
    bottom: calc(100% + 8px);
    margin-left: 0;
  }
  .barra-lateral-comprimir {
    display: none;
  }
  .barra-lateral-overlay:not([hidden]) {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 14, 0.45);
    z-index: 25;
  }
  .area-principal {
    width: 100%;
  }
  .barra-topo-mobile {
    display: flex;
  }
  .secao {
    padding: 48px 0;
  }
}

/* Faixa intermediária (tablets deitados, laptops de 13"-14", monitores
   secundários mais estreitos) — o Leandro testou em 3 monitores de
   tamanhos diferentes e viu informação cortada num deles. Só o breakpoint
   de 760px existia antes (mobile/desktop), sem nada pro meio do caminho:
   a barra lateral ficava com 260px fixos até bem perto do limite mobile,
   apertando o conteúdo central em telas de resolução média. */
@media (min-width: 761px) and (max-width: 1180px) {
  .barra-lateral:not(.comprimida) {
    --largura-barra: 216px;
  }
  .container {
    padding: 0 18px;
  }
  .chat-intro {
    padding: 32px 18px 8px;
  }
}

/* Telas baixas (monitores widescreen de pouca altura, notebooks com
   resolução vertical curta): o conteúdo da barra lateral é `position:
   sticky; height: 100vh` — antes da v26, com o accordion de planos aberto
   e o rodapé grande, sobrava pouca altura de viewport e dava pra cortar
   visualmente o rodapé (créditos/conta) sem indicação clara de que dava
   pra rolar. O rodapé compacto da v26 já ajuda bastante; isto aqui reduz
   ainda mais o respiro vertical do topo/nav pra sobrar mais espaço útil. */
@media (max-height: 700px) {
  .barra-lateral-topo {
    padding: 10px 14px;
  }
  .barra-lateral-nav {
    padding: 2px 10px;
  }
  .nav-links a {
    padding: 7px 12px;
  }
  .chat-intro {
    padding-top: 20px;
  }
}

/* ---------- Página de entrar / criar conta (estilo inspirado no GitHub) ---------- */

.secao-login-github {
  padding: 48px 0 64px;
}

.container-github {
  max-width: 360px;
}

.marca-login {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--cor-texto);
  margin-bottom: 24px;
}

.titulo-login-github {
  text-align: center;
  font-size: 1.3rem;
  font-weight: 600;
  margin: 0 0 18px;
}

.cartao-github {
  background: var(--cor-card-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra-card);
  padding: 24px 24px 28px;
  text-align: center;
}

.painel-auth + .painel-auth {
  margin-top: 0;
}

.cartao-secundario-github {
  background: var(--cor-fundo-alt);
  box-shadow: none;
  margin-top: 16px;
  padding: 16px 22px;
  font-size: 0.88rem;
  color: var(--cor-texto-suave);
}

.cartao-secundario-github a {
  font-weight: 600;
  margin-left: 4px;
}

#ja-logado {
  text-align: center;
}

/* Regra explícita: já fomos mordidos uma vez por uma regra de display
   author-level vencendo o [hidden] nativo do navegador (ver memória do
   projeto). Deixar explícito aqui evita repetir o mesmo bug nesta página. */
.painel-auth[hidden],
#ja-logado[hidden] {
  display: none;
}

.aviso-demo {
  font-size: 0.78rem;
  color: var(--cor-texto-suave);
  margin: 0 0 16px;
}

.mensagem-auth {
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.85rem;
  margin-bottom: 16px;
  text-align: left;
}

.mensagem-auth-erro {
  background: color-mix(in srgb, #dc2626 12%, transparent);
  color: #dc2626;
}

.mensagem-auth-sucesso {
  background: color-mix(in srgb, var(--cor-destaque) 14%, transparent);
  color: var(--cor-destaque);
}

.mensagem-auth-aviso {
  background: var(--cor-marca-suave);
  color: var(--cor-marca-escura);
}

/* Faixa de mensagem (sucesso/aviso/erro) com um botão à direita — usado pelo
   "Baixar .zip" na faixa verde de "Pronto! O download do .zip começou." */
.mensagem-auth-com-botao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.mensagem-auth-com-botao > span {
  flex: 1 1 auto;
}

.mensagem-auth-botao-baixar {
  flex: 0 0 auto;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 0.15s ease;
}

.mensagem-auth-botao-baixar:hover,
.mensagem-auth-botao-baixar:focus-visible {
  filter: brightness(0.9);
  outline: 2px solid currentColor;
  outline-offset: 1px;
}

/* v58 — botão "Continuar com o Google" (Google Identity Services) nas telas
   de entrar/criar conta. Escondido por padrão (removido via JS só quando o
   backend confirma que está configurado, ver js/auth-google.js). */
.google-signin-container {
  display: flex;
  justify-content: center;
  width: 100%;
  overflow: hidden;
  margin-bottom: 14px;
}

.divisor-ou {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  color: var(--cor-texto-suave);
  font-size: 0.8rem;
  text-transform: uppercase;
}

.divisor-ou::before,
.divisor-ou::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--cor-borda);
}

.form-auth {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
}

.form-auth[hidden] {
  display: none;
}

.form-auth label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--cor-texto-suave);
}

.form-auth input,
.form-auth textarea {
  border: 1px solid var(--cor-borda);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 0.95rem;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-auth textarea {
  resize: vertical;
  min-height: 110px;
}

.form-auth input:focus,
.form-auth textarea:focus {
  outline: none;
  border-color: var(--cor-marca);
  box-shadow: var(--anel-foco);
}

.divisor-ou {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 16px;
  color: var(--cor-texto-suave);
  font-size: 0.8rem;
}

.divisor-ou::before,
.divisor-ou::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--cor-borda);
}

.botao-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  border: 1px solid var(--cor-borda);
  border-radius: 12px;
  padding: 10px;
  background: #fff;
  color: #1f1f1f;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
}

.botao-google:hover {
  background: #f7f7f7;
}

.linha-esqueci-senha {
  margin: -6px 0 2px;
  text-align: right;
  font-size: 0.8rem;
}

/* ---------- Modal de login (mostrado ao tentar processar sem estar logado, preserva os arquivos já selecionados) ---------- */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 14, 0.5);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 50;
  animation: transcritor-modal-surgir 0.15s ease;
}

@keyframes transcritor-modal-surgir {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.modal-overlay[hidden] {
  display: none;
}

.modal-conteudo {
  position: relative;
  background: var(--cor-card-fundo);
  border-radius: var(--raio-grande);
  box-shadow: var(--sombra-elevada);
  padding: 28px 24px 24px;
  max-width: 360px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  text-align: center;
}

.modal-fechar {
  position: absolute;
  top: 10px;
  right: 10px;
  border: none;
  background: none;
  color: var(--cor-texto-suave);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  line-height: 1;
}

.modal-fechar:hover {
  color: var(--cor-texto);
  background: var(--cor-fundo-alt);
}

.modal-conteudo .titulo-login-github {
  margin-top: 0;
}

.modal-conteudo-planos {
  width: min(1100px, 94vw);
  height: min(88vh, 900px);
  max-width: min(1100px, 94vw);
  max-height: min(88vh, 900px);
  padding: 0;
  overflow: hidden;
}

.modal-conteudo-planos .modal-fechar {
  z-index: 2;
  background: var(--cor-card-fundo);
  border: 1px solid var(--cor-borda);
}

/* v49, pedido do Leandro: "a janela popup de visualização do arquivo de
   origem está muito pequeno deixe parecida com a janela da compra dos
   planos de transcrições" / "altere a janela popup de planos de
   armazenamento para a mesma que o de planos de transcrições" — mesmo
   tamanho de `.modal-conteudo-planos` acima (min(1100px, 94vw) x
   min(88vh, 900px)), sem o `padding: 0`/`overflow: hidden` de lá (o
   conteúdo aqui não é um iframe de página própria, é texto/imagem/vídeo/
   pdf ou a grade de planos direto, que ainda precisam do padding padrão do
   `.modal-conteudo` e de rolagem própria). Ficam AQUI, depois de
   `.modal-conteudo`, pelo mesmo motivo do comentário acima — definidas
   antes dele no arquivo (onde moravam originalmente, perto das outras
   classes de `.visualizador-*`), o `max-width: 360px`/`width: 100%`
   genéricos sempre venciam a cascata e os dois popups nunca chegavam a
   crescer de verdade, por mais que o `min()` aqui parecesse correto. */
.modal-conteudo-visualizador {
  width: min(1100px, 94vw);
  height: min(88vh, 900px);
  max-width: min(1100px, 94vw);
  max-height: min(88vh, 900px);
  display: flex;
  flex-direction: column;
}

/* ---------- Painel de conta (v69): informações pessoais, indique-e-ganhe,
   histórico de pagamentos e exclusão de conta. Aberto clicando no nome do
   usuário na barra lateral (ver atualizarNavConta() em js/auth.js e o
   markup montado por js/conta.js). ---------- */

.conta-saudacao-clicavel {
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.15s ease;
}

.conta-saudacao-clicavel:hover,
.conta-saudacao-clicavel:focus-visible {
  text-decoration-color: currentColor;
  outline: none;
}

.modal-conteudo-conta {
  width: min(760px, 94vw);
  height: min(88vh, 720px);
  max-width: min(760px, 94vw);
  max-height: min(88vh, 720px);
  display: flex;
  flex-direction: column;
  text-align: left;
  overflow: hidden;
}

.conta-cabecalho {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.conta-cabecalho .titulo-login-github {
  margin: 0;
  text-align: left;
}

.conta-cabecalho-acoes {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.conta-abas {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--cor-borda);
  margin: 14px 0 16px;
  overflow-x: auto;
  flex-shrink: 0;
  /* v50 — continua rolando por toque/arraste quando as 3 abas não cabem
     (telas estreitas), só sem mostrar a barra de rolagem (que sobrava feia
     bem colada no texto das abas, sem espaço de verdade pra ela). */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.conta-abas::-webkit-scrollbar {
  display: none;
}

.conta-aba {
  border: none;
  background: none;
  color: var(--cor-texto-suave);
  font: inherit;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 8px 4px 10px;
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.conta-aba:hover,
.conta-aba:focus-visible {
  color: var(--cor-texto);
  outline: none;
}

.conta-aba[aria-selected="true"] {
  color: var(--cor-marca);
  border-bottom-color: var(--cor-marca);
}

.conta-painel {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.conta-grade-campos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 560px) {
  .conta-grade-campos {
    grid-template-columns: 1fr;
  }
}

.conta-selo-google {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--cor-marca);
  background: var(--cor-marca-suave);
  padding: 2px 8px;
  border-radius: 999px;
  width: fit-content;
}

.conta-opcao-notificacao {
  flex-direction: row !important;
  align-items: center;
  gap: 8px !important;
}

.conta-opcao-notificacao input {
  width: auto;
}

.conta-texto-explicativo {
  color: var(--cor-texto-suave);
  font-size: 0.85rem;
  margin: 0 0 14px;
}

.conta-link-indicacao {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
}

.conta-link-indicacao input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--cor-borda);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 0.85rem;
  background: var(--cor-fundo-alt);
  color: var(--cor-texto);
}

.conta-tabela-wrap {
  overflow: auto;
  max-height: 100%;
  border: 1px solid var(--cor-borda);
  border-radius: 10px;
}

.conta-selo-status {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.conta-selo-aprovado {
  background: color-mix(in srgb, var(--cor-destaque) 16%, transparent);
  color: var(--cor-destaque);
}

.conta-selo-pendente {
  background: color-mix(in srgb, #d97706 16%, transparent);
  color: #d97706;
}

.conta-selo-recusado {
  background: color-mix(in srgb, #dc2626 14%, transparent);
  color: #dc2626;
}

/* Item 13: linha de pagamento "recusado" no histórico, clicável — abre popup com o motivo. */
.conta-linha-clicavel {
  cursor: pointer;
}

.conta-linha-clicavel:hover,
.conta-linha-clicavel:focus-visible {
  background: var(--cor-fundo-alt);
  outline: none;
}

.conta-recusado-dica {
  font-size: 0.72rem;
  color: var(--cor-texto-suave);
  white-space: nowrap;
}

.modal-conteudo-planos-armazenamento {
  width: min(1100px, 94vw);
  height: min(88vh, 900px);
  max-width: min(1100px, 94vw);
  max-height: min(88vh, 900px);
  overflow-y: auto;
  text-align: left;
}

.iframe-modal-planos {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: var(--raio-grande);
}

/* ---------- Checkout de plano (v43, item 16) ---------- */

.modal-conteudo-checkout {
  max-width: min(440px, 94vw);
  text-align: left;
}

.checkout-resumo-plano {
  background: var(--cor-fundo-alt);
  border-radius: var(--raio);
  padding: 16px 18px;
  margin: 8px 0 18px;
}

.checkout-plano-nome {
  margin: 0;
  font-weight: 700;
  font-size: 1.05rem;
}

.checkout-plano-preco {
  margin: 4px 0 0;
  font-size: 1.5rem;
  font-weight: 800;
}

.checkout-plano-preco small {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--cor-texto-suave);
}

.checkout-plano-limite {
  margin: 4px 0 0;
  color: var(--cor-texto-suave);
  font-size: 0.88rem;
}

.checkout-secao-titulo {
  margin: 0 0 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--cor-texto-suave);
}

.checkout-metodos-pagamento {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
  margin-bottom: 18px;
}

.checkout-metodo {
  border: 1px solid var(--cor-borda);
  background: var(--cor-card-fundo);
  border-radius: 10px;
  padding: 10px 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--cor-texto);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.checkout-metodo:hover {
  border-color: var(--cor-marca);
}

.checkout-metodo.selecionado {
  border-color: var(--cor-marca);
  background: var(--cor-marca-suave);
  color: var(--cor-marca-escura);
  outline: 2px solid var(--cor-marca);
  outline-offset: -1px;
}

.checkout-acoes {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

.checkout-acoes .botao {
  flex: 1;
}

.modal-login-aviso-arquivos {
  background: var(--cor-marca-suave);
  color: var(--cor-marca-escura);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.82rem;
  margin: 0 0 16px;
  text-align: left;
}

body.modal-aberto {
  overflow: hidden;
}

/* ---------- Popup de login ao vivo (v40) ---------- */

.modal-conteudo-login-site {
  max-width: min(720px, 94vw);
  text-align: left;
}

.modal-conteudo-login-site .titulo-login-github {
  text-align: left;
  margin: 0 0 6px;
}

.modal-login-site-nome {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--cor-texto-suave);
  margin: 0 0 8px;
  word-break: break-word;
}

.modal-login-site-instrucao {
  font-size: 0.88rem;
  line-height: 1.5;
  margin: 0 0 14px;
}

.modal-login-site-tela-caixa {
  position: relative;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  background: #1a1a1a;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-login-site-tela {
  width: 100%;
  height: 100%;
  object-fit: contain;
  cursor: pointer;
  display: block;
}

.modal-login-site-tela:focus-visible {
  outline: 2px solid var(--cor-marca);
  outline-offset: -2px;
}

.modal-login-site-carregando {
  position: absolute;
  color: #d4d4d8;
  font-size: 0.85rem;
}

.modal-login-site-status {
  margin: 12px 0 0;
  font-size: 0.85rem;
  color: var(--cor-texto-suave);
}

.modal-login-site-acoes {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* v41: prompt "salvar esse login?" dentro do mesmo popup, depois de
   confirmar — mesmo âmbar do selo "Requer login" (v40) e o mesmo padrão
   `color-mix` com `transparent`/variáveis de tema usado ali, pra ficar
   igualmente legível no claro e no escuro. */
.modal-login-site-salvar-credencial {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, #d97706 45%, transparent);
  background: color-mix(in srgb, #d97706 8%, var(--cor-card-fundo));
  border-radius: 8px;
}

.modal-login-site-salvar-credencial p {
  margin: 0 0 10px;
  font-size: 0.85rem;
  color: var(--cor-texto);
  line-height: 1.5;
}

.modal-login-site-salvar-credencial .modal-login-site-acoes {
  margin-top: 0;
}

/* ---------- Popup de limites (v29, item 8 — antes um popover-dropdown, v26) ---------- */

.modal-conteudo-uso {
  max-width: min(360px, 92vw);
  text-align: left;
}

.modal-conteudo-uso .titulo-login-github {
  text-align: left;
  margin: 0 0 12px;
}

/* ---------- Modal de erro de arquivo (mostra o motivo completo de uma falha ao clicar no selo "Falhou") ---------- */

.modal-conteudo-erro {
  max-width: min(640px, 92vw);
  text-align: left;
}

.modal-conteudo-erro .titulo-login-github {
  text-align: left;
  margin: 0 0 12px;
}

.modal-erro-nome {
  font-weight: 600;
  font-size: 0.95rem;
  margin: 0 0 10px;
  word-break: break-word;
}

/* Resumo curto e amigável do erro (sempre visível) — antes era um <pre> com
   o despejo técnico inteiro; agora é só a frase de resumo, então não precisa
   mais de caixa de fundo nem de rolagem própria. */
.modal-erro-mensagem {
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0 0 4px;
}

.modal-erro-detalhes {
  margin-top: 12px;
}

.modal-erro-detalhes summary {
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--cor-texto-suave);
  padding: 4px 0;
  user-select: none;
}

.modal-erro-detalhes summary:hover,
.modal-erro-detalhes summary:focus-visible {
  color: inherit;
}

/* Despejo técnico completo (log cru do motor) — escondido atrás de "Ver
   detalhes técnicos"; herda o tratamento visual que .modal-erro-mensagem
   tinha antes, já que agora é ele quem guarda o texto longo/pré-formatado. */
.modal-erro-tecnico {
  background: var(--cor-fundo-alt);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 0.78rem;
  line-height: 1.5;
  font-family: inherit;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 40vh;
  overflow-y: auto;
  margin: 6px 0 0;
}

/* ---------- Modal de descoberta de site (v41): rastreia um domínio/caminho
   marcado com "/*" e mostra o total de páginas/arquivos ANTES de cobrar
   qualquer crédito — confirmar só empurra a lista pras URLs normais. Ver
   iniciarDescobertaSite() em js/upload.js. ---------- */

.modal-conteudo-descoberta-site {
  max-width: min(640px, 92vw);
  text-align: left;
}

.modal-conteudo-descoberta-site .titulo-login-github {
  text-align: left;
  margin: 0 0 6px;
}

.modal-descoberta-site-url {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--cor-texto-suave);
  margin: 0 0 14px;
  word-break: break-word;
}

.modal-descoberta-site-carregando p {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--cor-texto-suave);
  margin: 0 0 14px;
  text-align: center;
}

/* v49, pedido do Leandro: "o ícone do transcritor parado no lado esquerdo
   e o robozinho indo até o lado direito que é o site e pegando as
   informações e trazendo novamente com o documento" — a marca fica FIXA à
   esquerda (âncora/"casa"), um robô separado (🤖) viaja até o globo (o
   site sendo rastreado), busca um documento e volta com ele, em loop (sem
   % real — a API de descoberta só devolve o resultado final, ver
   comentário em index.html). Tudo posicionado de forma absoluta dentro do
   contêiner — mais simples que combinar flex com filhos animados, e evita
   depender da ordem/gap do flex pra alinhar globo/marca/robô/documento. */
.descoberta-site-animacao {
  height: 52px;
  margin-bottom: 14px;
  position: relative;
}

.descoberta-site-globo {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  font-size: 1.7rem;
  line-height: 1;
}

/* Fixa à esquerda — não anima mais (era ela quem viajava antes; agora é só
   a "casa" de onde o robô sai e pra onde ele volta). */
.descoberta-site-marca {
  position: absolute;
  top: 50%;
  left: 0;
  display: flex;
  transform: translateY(-50%);
}

.descoberta-site-marca svg {
  display: block;
}

.descoberta-site-robo {
  position: absolute;
  top: 50%;
  left: 30px;
  font-size: 1.3rem;
  line-height: 1;
  transform: translateY(-50%);
  animation: descoberta-site-robo-viajar 3.2s ease-in-out infinite;
}

.descoberta-site-documento {
  position: absolute;
  top: 50%;
  left: calc(100% - 36px);
  font-size: 1.15rem;
  line-height: 1;
  animation: descoberta-site-documento-viajar 3.2s ease-in-out infinite;
}

/* O robô sai de perto da marca (30px, "casa"), viaja até perto do globo
   (44%), "chega" com um pulinho (50%), vira de lado (`scaleX(-1)`,
   espelhado — evita o salto/teleporte de um `infinite` voltando de 100%
   pra 0%) e volta pra casa carregando o documento. Termina exatamente no
   mesmo estado do início (posição e orientação), pra o loop não ter
   costura visível. */
@keyframes descoberta-site-robo-viajar {
  0%, 4% {
    left: 30px;
    transform: translateY(-50%) scaleX(1) scale(1);
  }
  44% {
    left: calc(100% - 46px);
    transform: translateY(-50%) scaleX(1) scale(1);
  }
  50% {
    left: calc(100% - 46px);
    transform: translateY(-50%) scaleX(1) scale(1.15);
  }
  56% {
    left: calc(100% - 46px);
    transform: translateY(-50%) scaleX(-1) scale(1);
  }
  94% {
    left: 30px;
    transform: translateY(-50%) scaleX(-1) scale(1);
  }
  100% {
    left: 30px;
    transform: translateY(-50%) scaleX(1) scale(1);
  }
}

/* O documento fica invisível até o robô "chegar" perto do globo (~44-50%),
   aparece (fade + scale in) como se tivesse sido pego, viaja de volta junto
   com o robô, e some de novo perto do fim (entregue à marca). */
@keyframes descoberta-site-documento-viajar {
  0%, 44% {
    left: calc(100% - 36px);
    opacity: 0;
    transform: translateY(-50%) scale(0.4);
  }
  52% {
    left: calc(100% - 36px);
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
  94% {
    left: 30px;
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
  99%, 100% {
    left: 30px;
    opacity: 0;
    transform: translateY(-50%) scale(0.4);
  }
}

.descoberta-site-barra-trilha {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: var(--cor-borda);
  overflow: hidden;
  margin-bottom: 14px;
}

.descoberta-site-barra-preenchimento {
  height: 100%;
  width: 40%;
  border-radius: 999px;
  background: var(--cor-marca);
  animation: descoberta-site-barra-deslizar 1.4s ease-in-out infinite;
}

@keyframes descoberta-site-barra-deslizar {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(250%);
  }
}

/* v49, pedido do Leandro: essa animação (marca indo buscar e voltando com o
   documento) deve rodar SEMPRE, mesmo com "reduzir movimento" ativado no
   SO — decisão explícita dele depois de testar numa máquina com essa
   preferência ligada (o estado estático de acessibilidade que existia aqui
   antes, por mais arrumado que tivesse ficado, ainda não era o que ele
   queria ver). Por isso, de propósito, SEM bloco `@media
   (prefers-reduced-motion: reduce)` para `.descoberta-site-marca`/
   `.descoberta-site-documento`/`.descoberta-site-barra-preenchimento` —
   é puramente decorativo/pequeno (não pisca, não ocupa a tela, não é
   essencial pra usar o site), então o risco de desconforto pra quem tem
   sensibilidade a movimento foi considerado aceitável nesta troca.
   A barra de progresso da estimativa de processamento (fora deste modal
   de descoberta) continua sem animação nenhuma, então não é afetada por
   essa decisão. */

.modal-descoberta-site-resumo {
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0 0 10px;
}

.modal-descoberta-site-aviso {
  border: 1px solid color-mix(in srgb, #d97706 45%, transparent);
  background: color-mix(in srgb, #d97706 8%, var(--cor-card-fundo));
  color: var(--cor-texto);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.82rem;
  line-height: 1.5;
  margin: 0 0 10px;
}

.modal-descoberta-site-aviso-credito {
  border-color: color-mix(in srgb, #dc2626 45%, transparent);
  background: color-mix(in srgb, #dc2626 10%, var(--cor-card-fundo));
}

.modal-descoberta-site-acoes {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.modal-descoberta-site-erro p {
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0 0 4px;
}

/* ================= Suporte (v23, item 4) ================= */

.cartao-suporte-formulario,
.cartao-suporte-lista {
  background: var(--cor-card-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra-card);
  padding: 20px;
  text-align: left;
  margin: 0 0 20px;
}

.suporte-subtitulo-secao {
  font-size: 1.05rem;
  margin: 0 0 10px;
}

.suporte-aviso-prototipo {
  color: var(--cor-texto-suave);
  font-size: 0.82rem;
  margin: 0 0 14px;
}

.lista-chamados {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.item-chamado {
  border: 1px solid var(--cor-borda);
  border-radius: 12px;
  padding: 12px 14px;
  background: var(--cor-fundo-alt);
}

.item-chamado-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.item-chamado-assunto {
  font-weight: 600;
  font-size: 0.92rem;
}

.item-chamado-mensagem {
  color: var(--cor-texto-suave);
  font-size: 0.85rem;
  margin: 6px 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.item-chamado-data {
  color: var(--cor-texto-suave);
  font-size: 0.75rem;
  margin: 0;
}

.selo-status-chamado {
  flex: 0 0 auto;
  white-space: nowrap;
}

.selo-status-aberto {
  background: color-mix(in srgb, #f59e0b 16%, transparent);
  color: #b45309;
}

.selo-status-respondido {
  background: color-mix(in srgb, var(--cor-marca) 16%, transparent);
  color: var(--cor-marca-escura);
}

.selo-status-fechado {
  background: color-mix(in srgb, var(--cor-destaque) 16%, transparent);
  color: var(--cor-destaque);
}

/* ================= Ideias enviadas pelos usuários (v39) =================
   Mesmos selos de status dos chamados acima (`.selo-status-chamado`), só
   com as cores para os valores próprios de `ideias_usuario.status`. */

.selo-status-recebida {
  background: color-mix(in srgb, #f59e0b 16%, transparent);
  color: #b45309;
}

.selo-status-em_analise {
  background: color-mix(in srgb, var(--cor-marca) 16%, transparent);
  color: var(--cor-marca-escura);
}

.selo-status-planejada {
  background: color-mix(in srgb, #0ea5e9 16%, transparent);
  color: #0369a1;
}

.selo-status-implementada {
  background: color-mix(in srgb, #22c55e 16%, transparent);
  color: #15803d;
}

.selo-status-recusada {
  background: color-mix(in srgb, var(--cor-destaque) 16%, transparent);
  color: var(--cor-destaque);
}

/* ================= Página Roadmap (v39) =================
   Só documentação — nenhum dos itens listados aqui está implementado.
   Grade de cartões, mesma linguagem visual de `.cartao-github`. */

.roadmap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin-top: 28px;
  text-align: left;
}

.cartao-roadmap {
  background: var(--cor-card-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra-card);
  padding: 22px;
  display: flex;
  flex-direction: column;
}

.cartao-roadmap-icone {
  font-size: 1.8rem;
  line-height: 1;
  margin-bottom: 8px;
}

.selo-roadmap-planejado {
  align-self: flex-start;
  background: color-mix(in srgb, var(--cor-marca) 16%, transparent);
  color: var(--cor-marca-escura);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}

.cartao-roadmap-titulo {
  font-size: 1.05rem;
  margin: 0 0 8px;
}

.cartao-roadmap-texto {
  color: var(--cor-texto-suave);
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0 0 10px;
}

.cartao-roadmap-lista {
  margin: 0;
  padding-left: 20px;
  color: var(--cor-texto-suave);
  font-size: 0.88rem;
  line-height: 1.7;
  columns: 2;
}

.roadmap-nota {
  text-align: center;
  margin-top: 24px;
}

/* ================= Anexos de suporte (v28, item 3) ================= */

.campo-anexos-suporte input[type="file"] {
  border: 1px dashed var(--cor-borda);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 0.85rem;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  cursor: pointer;
}

.anexos-suporte-ajuda {
  color: var(--cor-texto-suave);
  font-size: 0.75rem;
  font-weight: 400;
}

.lista-anexos-selecionados {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lista-anexos-selecionados:empty {
  display: none;
}

.chip-anexo-selecionado {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--cor-fundo-alt);
  border: 1px solid var(--cor-borda);
  border-radius: 10px;
  padding: 6px 8px 6px 12px;
  font-size: 0.8rem;
  font-weight: 400;
}

.chip-anexo-nome {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--cor-texto);
}

.chip-anexo-tamanho {
  flex: 0 0 auto;
  color: var(--cor-texto-suave);
  font-size: 0.72rem;
}

.chip-anexo-remover {
  flex: 0 0 auto;
  border: none;
  background: none;
  color: var(--cor-texto-suave);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 4px 6px;
  border-radius: 6px;
  line-height: 1;
}

.chip-anexo-remover:hover,
.chip-anexo-remover:focus-visible {
  color: inherit;
  background: var(--cor-borda);
}

.lista-anexos-chamado {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.botao-anexo-chamado {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--cor-borda);
  background: var(--cor-card-fundo);
  color: var(--cor-marca);
  border-radius: 10px;
  padding: 5px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}

.botao-anexo-chamado:hover,
.botao-anexo-chamado:focus-visible {
  background: var(--cor-marca-suave);
}

.item-chamado-anexo-tamanho {
  color: var(--cor-texto-suave);
  font-weight: 400;
}

/* ================= Enviar para IA (v23, item 6) ================= */

.item-historico-enviar-ia {
  flex: 0 0 auto;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.95rem;
  padding: 4px;
  border-radius: 8px;
  color: var(--cor-texto-suave);
}

.item-historico-enviar-ia:hover,
.item-historico-enviar-ia:focus-visible {
  color: var(--cor-marca);
  background: var(--cor-marca-suave);
}

.menu-enviar-ia {
  position: absolute;
  z-index: 60;
  background: var(--cor-card-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: 14px;
  box-shadow: var(--sombra-elevada);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 180px;
}

.menu-enviar-ia-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.88rem;
  color: var(--cor-texto);
}

.menu-enviar-ia-item:hover,
.menu-enviar-ia-item:focus-visible {
  background: var(--cor-fundo-alt);
}

.menu-enviar-ia-emoji {
  font-size: 1rem;
}

/* ================= Documentação da API (v23, item 5) ================= */

.cartao-api-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 20px 0;
}

.cartao-api-info {
  background: var(--cor-fundo-alt);
  border-radius: 12px;
  padding: 14px 18px;
  text-align: left;
  font-size: 0.85rem;
  color: var(--cor-texto-suave);
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cartao-api-info code {
  background: var(--cor-card-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: 6px;
  padding: 1px 5px;
  font-size: 0.82em;
}

.grupo-endpoints-api {
  text-align: left;
  margin: 0 0 28px;
}

.tabela-endpoints-api-wrapper {
  overflow-x: auto;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
}

.tabela-endpoints-api {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  background: var(--cor-card-fundo);
}

.tabela-endpoints-api th,
.tabela-endpoints-api td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--cor-borda);
  text-align: left;
  white-space: nowrap;
}

.tabela-endpoints-api td:nth-child(3) {
  white-space: normal;
  min-width: 220px;
}

.tabela-endpoints-api th {
  color: var(--cor-texto-suave);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: var(--cor-fundo-alt);
}

.tabela-endpoints-api tbody tr:last-child td {
  border-bottom: none;
}

.tabela-endpoints-api tbody tr {
  transition: background-color 0.1s ease;
}

.tabela-endpoints-api tbody tr:hover {
  background: var(--cor-fundo-alt);
}

.tabela-endpoints-api code,
.cartao-api-info code {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

.tabela-endpoints-api code {
  font-size: 0.8em;
}

.selo-metodo-api {
  display: inline-block;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.selo-metodo-get {
  background: color-mix(in srgb, #2563eb 16%, transparent);
  color: #2563eb;
}

.selo-metodo-post {
  background: color-mix(in srgb, var(--cor-destaque) 16%, transparent);
  color: var(--cor-destaque);
}

.selo-metodo-patch {
  background: color-mix(in srgb, #f59e0b 16%, transparent);
  color: #b45309;
}

.selo-metodo-delete {
  background: color-mix(in srgb, #dc2626 16%, transparent);
  color: #dc2626;
}

.selo-auth-api {
  display: inline-block;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 0.72rem;
  font-weight: 600;
}

.selo-auth-sim {
  background: var(--cor-marca-suave);
  color: var(--cor-marca-escura);
}

.selo-auth-nao {
  background: var(--cor-fundo-alt);
  color: var(--cor-texto-suave);
}

/* Páginas legais (v31: privacidade.html, termos.html, lgpd.html) — texto
   corrido, então uma coluna mais estreita que o `.container` padrão
   (1120px, pensado pra grades de cartões) fica mais confortável de ler. */
.container-legal {
  max-width: 760px;
}

.conteudo-legal {
  color: var(--cor-texto);
  line-height: 1.7;
}

.conteudo-legal h2 {
  font-size: 1.25rem;
  margin: 40px 0 12px;
}

.conteudo-legal h2:first-child {
  margin-top: 0;
}

.conteudo-legal p {
  margin: 0 0 16px;
}

.conteudo-legal ul {
  margin: 0 0 16px;
  padding-left: 22px;
}

.conteudo-legal li {
  margin-bottom: 6px;
}

/* Selo de versão do sistema (formato MAJOR.0.ANO.VERSAO.BUILD, ex.: 1.0.2026.77.0024)
   — canto inferior direito da viewport, em todas as páginas (injetado por
   js/main.js:initVersaoSistema, não duplicado no HTML de cada página).
   Cinza discreto (opacidade 40%) de propósito: é só um rótulo de
   diagnóstico, não deve competir com o resto da interface. `pointer-events:
   none` pra nunca atrapalhar clique em nada por baixo (ex.: composer fixo
   da home). z-index baixo — sempre atrás de modal/popover/gaveta mobile. */
.selo-versao-sistema {
  position: fixed;
  right: 10px;
  bottom: 6px;
  z-index: 5;
  color: var(--cor-texto);
  opacity: 0.4;
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  user-select: none;
}

.conteudo-legal .legal-atualizado {
  color: var(--cor-texto-suave);
  font-size: 0.9rem;
  margin: 0 0 32px;
}

/* v69 — formulário de cartão (js/pagamento-cartao.js), dentro de
   `#modal-cartao` (planos.html). Os três `.campo-cartao-seguro` (número,
   validade, CVV) ficam vazios no HTML — o SDK do Mercado Pago injeta um
   `<iframe>` dentro de cada um na hora de montar o formulário
   (`mp.cardForm`), então só precisam parecer um campo de texto comum por
   fora; o conteúdo sensível nunca é nosso, é isolado no iframe deles. */
.modal-conteudo-cartao {
  max-width: min(420px, 94vw);
  text-align: left;
}

.modal-conteudo-cartao .titulo-login-github {
  text-align: left;
  margin: 0 0 4px;
}

.modal-cartao-plano {
  font-weight: 600;
  color: var(--cor-texto);
  margin: 0 0 10px;
}

.modal-conteudo-cartao .aviso-demo {
  text-align: left;
  margin: 0 0 18px;
}

.campo-cartao {
  margin-bottom: 14px;
}

.campo-cartao label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--cor-texto-suave);
  margin-bottom: 6px;
}

.campo-cartao input[type="text"],
.campo-cartao select,
.campo-cartao-seguro {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--cor-borda);
  border-radius: 12px;
  background: var(--cor-card-fundo);
  color: inherit;
  font: inherit;
  font-size: 0.9rem;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.campo-cartao-seguro {
  height: 42px;
  /* o iframe do Mercado Pago preenche isso sozinho quando o formulário monta */
}

.campo-cartao input[type="text"]:focus-visible,
.campo-cartao select:focus-visible,
.campo-cartao-seguro:focus-within {
  outline: none;
  border-color: var(--cor-marca);
  box-shadow: var(--anel-foco);
}

/* "Nome no cartão" tem autocomplete="cc-name" de propósito (facilita
   preencher) — mas o autopreenchimento do Chrome pinta o campo com a cor
   dele (branco/azulado), ignorando nosso tema escuro, por baixo do
   `background` normal acima. Sobrescreve com uma "sombra interna" do
   tamanho do campo inteiro, mesmo truque de sempre pra manter o
   `background`/`color` do tema mesmo depois do autopreenchimento. */
.campo-cartao input[type="text"]:-webkit-autofill,
.campo-cartao input[type="text"]:-webkit-autofill:hover,
.campo-cartao input[type="text"]:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--cor-texto);
  -webkit-box-shadow: 0 0 0 1000px var(--cor-card-fundo) inset;
  transition: background-color 9999s ease-in-out 0s;
}

.campo-cartao-linha {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* v75 — aviso "confirme seu e-mail" no topo (js/auth.js:aplicarAvisoEmailNaoVerificado) e link "esqueci a senha". */
.aviso-email {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 16px;
  font-size: 0.9rem;
  background: #fef3c7;
  color: #78350f;
  border-bottom: 1px solid #fcd34d;
}

.aviso-email-botao {
  padding: 6px 12px;
  font-size: 0.85rem;
}

.link-esqueci-senha {
  align-self: flex-end;
  font-size: 0.85rem;
  margin-top: -6px;
}

.texto-apoio-auth {
  margin: 0 0 4px;
  font-size: 0.9rem;
  color: inherit;
  opacity: 0.85;
}

@media (prefers-color-scheme: dark) {
  .aviso-email {
    background: #422006;
    color: #fde68a;
    border-bottom-color: #854d0e;
  }
}

/* v75 — aviso de cookies (js/analytics.js) e botão "Preferências de cookies" do menu lateral. */
.banner-cookies {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 1000;
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  padding: 14px 18px;
  background: var(--cor-fundo-alt, #fff);
  color: var(--cor-texto, #111827);
  border: 1px solid var(--cor-borda, #d1d5db);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  font-size: 0.88rem;
  line-height: 1.45;
}

.banner-cookies p {
  flex: 1 1 320px;
  margin: 0;
}

.banner-cookies-acoes {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}

.botao-preferencias-cookies {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  padding: 4px 2px;
  font: inherit;
  font-size: 0.78rem;
  color: inherit;
  opacity: 0.7;
  cursor: pointer;
  text-align: left;
}

.botao-preferencias-cookies .rotulo-item {
  text-decoration: underline;
}

.botao-preferencias-cookies-icone {
  font-size: 1rem;
  line-height: 1;
}

.botao-preferencias-cookies:hover,
.botao-preferencias-cookies:focus-visible {
  opacity: 1;
}

/* Comprimida, o rótulo some (regra global `.rotulo-item` acima) mas o botão
   continua visível e clicável, só com o ícone -- nunca fica sem nenhum jeito
   de reabrir as preferências de cookies depois de já ter respondido. */
.barra-lateral.comprimida .botao-preferencias-cookies {
  padding: 4px;
  justify-content: center;
}

/* ------------------------------------------------------------------ */
/* Tour guiado da home (js/tour.js) — balão que percorre os pontos     */
/* principais do site, com o alvo de cada passo destacado.             */
/* ------------------------------------------------------------------ */

.tour-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 2000;
}

.tour-alvo-destacado {
  position: relative;
  z-index: 2001;
  border-radius: 10px;
  box-shadow: 0 0 0 4px var(--cor-marca), 0 0 0 9999px rgba(0, 0, 0, 0.55);
  transition: box-shadow 0.2s ease;
}

.tour-balao {
  position: fixed;
  z-index: 2002;
  width: min(320px, calc(100vw - 28px));
  background: var(--cor-fundo-alt);
  color: var(--cor-texto);
  border: 1px solid var(--cor-borda);
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
}

.tour-balao-progresso {
  margin: 0 0 6px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--cor-marca);
}

.tour-balao-titulo {
  margin: 0 0 8px;
  font-size: 1.05rem;
}

.tour-balao-texto {
  margin: 0 0 16px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--cor-texto-suave);
}

.tour-balao-rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.tour-balao-auto {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--cor-texto-suave);
  cursor: pointer;
}

.tour-balao-botoes {
  display: flex;
  gap: 8px;
}

.tour-balao-botao-pequeno {
  padding: 8px 14px;
  font-size: 0.85rem;
}

@media (max-width: 640px) {
  .tour-balao-rodape {
    flex-direction: column;
    align-items: stretch;
  }

  .tour-balao-botoes {
    justify-content: flex-end;
  }
}

/* ------------------------------------------------------------------ */
/* Campo de pesquisa (documentação e histórico de versões)             */
/* ------------------------------------------------------------------ */

.busca-bloco {
  margin: 28px 0 8px;
}

.busca-campo {
  position: relative;
  display: flex;
  align-items: center;
}

.busca-icone {
  position: absolute;
  left: 14px;
  font-size: 0.9rem;
  opacity: 0.6;
  pointer-events: none;
}

.busca-input {
  width: 100%;
  padding: 11px 40px 11px 38px;
  border: 1px solid var(--cor-borda);
  border-radius: 12px;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font: inherit;
  font-size: 0.95rem;
}

.busca-input:focus {
  outline: 2px solid color-mix(in srgb, var(--cor-marca) 55%, transparent);
  outline-offset: 1px;
  border-color: var(--cor-marca);
}

.busca-limpar {
  position: absolute;
  right: 8px;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--cor-texto-suave);
  cursor: pointer;
  font-size: 0.85rem;
}

.busca-limpar:hover {
  background: var(--cor-fundo-alt);
  color: var(--cor-texto);
}

.busca-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 34px;
  margin-top: 8px;
}

.busca-status {
  margin: 0;
  color: var(--cor-texto-suave);
  font-size: 0.85rem;
}

.busca-vazio {
  margin: 28px 0;
  text-align: center;
  color: var(--cor-texto-suave);
}

.busca-destaque {
  padding: 0 2px;
  border-radius: 3px;
  background: color-mix(in srgb, #facc15 55%, transparent);
  color: inherit;
}

.botao-texto {
  padding: 4px 6px;
  border: 0;
  background: transparent;
  color: var(--cor-marca);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}

.botao-texto:hover {
  text-decoration: underline;
}

/* ------------------------------------------------------------------ */
/* Histórico de versões (historico-de-versoes.html)                    */
/* ------------------------------------------------------------------ */

.versao-lista {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 10px;
}

.versao-item {
  border: 1px solid var(--cor-borda);
  border-radius: 14px;
  background: var(--cor-fundo-alt);
}

.versao-item[hidden] {
  display: none;
}

.versao-cabecalho {
  display: flex;
  align-items: center;
  gap: 10px 12px;
  flex-wrap: wrap;
  padding: 14px 20px;
  cursor: pointer;
  list-style: none;
}

.versao-cabecalho::-webkit-details-marker {
  display: none;
}

.versao-cabecalho::before {
  content: "›";
  flex: 0 0 auto;
  width: 14px;
  color: var(--cor-texto-suave);
  font-size: 1.2rem;
  line-height: 1;
  transition: transform 0.15s;
}

.versao-item[open] > .versao-cabecalho::before {
  transform: rotate(90deg);
}

.versao-numero {
  flex: 0 0 auto;
  padding: 2px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cor-marca) 16%, transparent);
  color: var(--cor-marca);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.versao-data {
  color: var(--cor-texto-suave);
  font-size: 0.88rem;
}

.versao-atual {
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, #22c55e 18%, transparent);
  color: #15803d;
  font-size: 0.75rem;
  font-weight: 600;
}

.versao-contagem {
  margin-left: auto;
  color: var(--cor-texto-suave);
  font-size: 0.8rem;
}

.versao-itens {
  margin: 0;
  padding: 0 20px 6px 44px;
  list-style: none;
}

.versao-assunto {
  padding: 12px 0;
  border-top: 1px solid var(--cor-borda);
}

.versao-assunto[hidden] {
  display: none;
}

.versao-titulo {
  margin: 0 0 4px;
  font-size: 0.98rem;
}

.versao-texto {
  margin: 0;
  color: var(--cor-texto-suave);
  line-height: 1.6;
  font-size: 0.92rem;
}

.versao-texto + .versao-texto {
  margin-top: 8px;
}

@media (prefers-color-scheme: dark) {
  .versao-atual {
    color: #4ade80;
  }
}

/* ------------------------------------------------------------------ */
/* Documentação (documentacao.html)                                    */
/* ------------------------------------------------------------------ */

.doc-layout {
  margin-top: 28px;
}

/* Sem JavaScript: só os tópicos, um embaixo do outro. */
.doc-lateral {
  display: none;
}

.doc-com-js {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

.doc-com-js .doc-lateral {
  display: block;
  position: sticky;
  top: 20px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding-right: 4px;
}

.doc-topicos {
  margin-top: 18px;
}

.doc-topicos-grupo {
  margin-bottom: 16px;
}

.doc-topicos-grupo[hidden] {
  display: none;
}

.doc-topicos-rotulo {
  margin: 0 0 4px 10px;
  color: var(--cor-texto-suave);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.doc-topicos ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.doc-topicos li[hidden] {
  display: none;
}

.doc-topicos a {
  display: block;
  padding: 7px 10px;
  border-radius: 8px;
  color: var(--cor-texto);
  font-size: 0.92rem;
  text-decoration: none;
}

.doc-topicos a:hover {
  background: var(--cor-fundo-alt);
}

.doc-topicos a.ativo {
  background: color-mix(in srgb, var(--cor-marca) 14%, transparent);
  color: var(--cor-marca);
  font-weight: 600;
}

.doc-corpo {
  min-width: 0;
}

.doc-corpo .busca-status {
  min-height: 22px;
  margin-bottom: 4px;
}

.doc-secao {
  margin-bottom: 44px;
  scroll-margin-top: 24px;
}

.doc-com-js .doc-secao {
  margin-bottom: 0;
}

.doc-secao[hidden] {
  display: none;
}

.doc-secao h2 {
  font-size: 1.3rem;
  margin-bottom: 6px;
}

.doc-secao h3 {
  font-size: 1.02rem;
  margin: 20px 0 6px;
}

.doc-secao p {
  color: var(--cor-texto-suave);
  line-height: 1.65;
  margin: 0 0 12px;
}

.doc-secao ul {
  color: var(--cor-texto-suave);
  line-height: 1.65;
  margin: 0 0 12px;
  padding-left: 20px;
}

.doc-secao li {
  margin-bottom: 4px;
}

.doc-secao strong {
  color: var(--cor-texto);
}

.doc-resultados {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.doc-resultados[hidden] {
  display: none;
}

.doc-resultado {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 18px;
  border: 1px solid var(--cor-borda);
  border-radius: 12px;
  background: var(--cor-fundo-alt);
  color: inherit;
  text-decoration: none;
}

.doc-resultado:hover {
  border-color: var(--cor-marca);
}

.doc-resultado-grupo {
  color: var(--cor-texto-suave);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.doc-resultado-titulo {
  color: var(--cor-texto);
  font-size: 1.02rem;
  font-weight: 600;
}

.doc-resultado-trecho {
  color: var(--cor-texto-suave);
  font-size: 0.88rem;
  line-height: 1.55;
}

.doc-navegacao {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--cor-borda);
}

.doc-navegacao:empty {
  display: none;
}

.doc-navegacao-link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 48%;
  padding: 10px 16px;
  border: 1px solid var(--cor-borda);
  border-radius: 10px;
  color: var(--cor-texto);
  text-decoration: none;
}

.doc-navegacao-link:hover {
  border-color: var(--cor-marca);
}

.doc-navegacao-proximo {
  margin-left: auto;
  text-align: right;
}

.doc-navegacao-dica {
  color: var(--cor-texto-suave);
  font-size: 0.75rem;
}

.doc-navegacao-nome {
  font-weight: 600;
  font-size: 0.92rem;
}

@media (max-width: 860px) {
  .doc-com-js {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .doc-com-js .doc-lateral {
    position: static;
    max-height: none;
    overflow: visible;
  }

  .doc-topicos {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .doc-topicos-grupo {
    width: 100%;
    margin-bottom: 8px;
  }

  .doc-topicos ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .doc-topicos a {
    border: 1px solid var(--cor-borda);
    padding: 5px 12px;
    font-size: 0.85rem;
  }

  .versao-itens {
    padding-left: 20px;
  }

  .versao-contagem {
    margin-left: 0;
  }
}

/* ------------------------------------------------------------------ */
/* Ícones de informação (ⓘ) e balão (js/info-dicas.js)                 */
/* ------------------------------------------------------------------ */

.info-dica {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin-left: 6px;
  padding: 0;
  border: 1px solid var(--cor-texto-suave);
  border-radius: 50%;
  background: transparent;
  color: var(--cor-texto-suave);
  font: italic 700 0.68rem/1 Georgia, "Times New Roman", serif;
  vertical-align: middle;
  cursor: pointer;
  opacity: 0.75;
}

.info-dica:hover,
.info-dica[aria-expanded="true"] {
  opacity: 1;
  border-color: var(--cor-marca);
  color: var(--cor-marca);
}

.info-dica:focus-visible {
  outline: 2px solid var(--cor-marca);
  outline-offset: 2px;
}

/* Alvo escondido (atributo hidden) leva o ícone junto. */
[hidden] + .info-dica {
  display: none;
}

.info-balao {
  position: fixed;
  z-index: 1100;
  width: min(300px, calc(100vw - 20px));
  padding: 12px 14px;
  border: 1px solid var(--cor-borda);
  border-radius: 12px;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.info-balao[hidden] {
  display: none;
}

.info-balao-titulo {
  margin: 0 0 4px;
  font-size: 0.9rem;
  font-weight: 700;
}

.info-balao-texto {
  margin: 0;
  color: var(--cor-texto-suave);
  font-size: 0.85rem;
  line-height: 1.5;
}

/* ------------------------------------------------------------------ */
/* Textos corridos justificados: páginas legais (privacidade, termos,  */
/* LGPD), documentação, histórico de versões e roadmap. Hifenização    */
/* automática (usa o `lang` da página) evita buracos entre palavras.   */
/* Títulos, subtítulos centralizados e botões continuam como estavam.  */
/* ------------------------------------------------------------------ */
.conteudo-legal p,
.conteudo-legal li,
.doc-secao p,
.doc-secao li,
.versao-texto,
.cartao-roadmap-texto,
.cartao-roadmap-lista li,
.roadmap-nota {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}

/* Painel de conta: barra fixa com o botão Salvar, e-mail com o selo de conta
   Google na mesma linha, e a aba Opções. */
.conta-barra-salvar {
  display: flex;
  justify-content: flex-end;
  flex-shrink: 0;
  margin: -6px 0 12px;
}

.conta-barra-salvar[hidden] {
  display: none;
}

.conta-campo-com-selo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.conta-campo-com-selo input {
  flex: 1;
  min-width: 0;
}

.conta-campo-com-selo .conta-selo-google {
  margin-top: 0;
  white-space: nowrap;
  flex-shrink: 0;
}

.conta-campo-com-selo .conta-selo-google[hidden] {
  display: none;
}

.conta-painel > .conta-opcao-notificacao {
  display: flex;
  cursor: pointer;
  margin-bottom: 16px;
  line-height: 1.4;
}