/* ============================================================================
   IMPULSAMOS DS · base.css — base e componentes (paleta Bruma, 2026-10-22)
   Requer tokens.css carregado antes. Leia o LEIA-PRIMEIRO.md antes de usar.
   Copie tokens.css + base.css + layouts.css para o projeto e use as classes;
   não reescreva componentes que já existem aqui.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* Rolagem: a área principal mostra barra fina Bruma; tudo que rola DENTRO dela
   (listas, menus, janelas, caixas de texto) rola sem barra vertical; a barra
   horizontal fica fina e visível (quem usa mouse precisa dela). */
html { scrollbar-width: thin; scrollbar-color: var(--bruma) transparent; }
body * { scrollbar-width: auto; scrollbar-color: auto; }
body *::-webkit-scrollbar { width: 0; height: 6px; background: transparent; }
body *::-webkit-scrollbar-thumb { background: var(--linha-forte); border-radius: var(--r-pilula); }
body *::-webkit-scrollbar-thumb:hover { background: var(--tinta-46); }
@supports not selector(::-webkit-scrollbar) { body * { scrollbar-width: thin; scrollbar-color: var(--linha-forte) transparent; } }
/* O painel principal é a "página": barra fina sempre disponível */
.painel { scrollbar-width: thin !important; scrollbar-color: var(--bruma-profunda) transparent !important; }
.painel::-webkit-scrollbar { width: 8px !important; background: transparent; }
.painel::-webkit-scrollbar-thumb { background: var(--bruma-profunda) !important; border-radius: var(--r-pilula); }

body { margin: 0; background: var(--nevoa); color: var(--tinta); font: 400 var(--t-texto-m)/1.5 var(--font-body); letter-spacing: -.015em; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
p { margin: 0; }
::selection { background: var(--bruma); }
:focus-visible { outline: none; box-shadow: var(--sombra-foco); }
img { display: block; max-width: 100%; }

/* --------------------------------------------------------------- tipografia */
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 450; }
h1 { font-size: var(--t-titulo-1); line-height: 1.05; letter-spacing: -.045em; }
h2 { font-size: var(--t-titulo-2); line-height: 1.08; letter-spacing: -.04em; }
h3 { font-size: var(--t-titulo-3); line-height: 1.15; letter-spacing: -.035em; }
h4 { font-size: var(--t-titulo-4); line-height: 1.2; letter-spacing: -.03em; }
.t-display-2 { font: 450 var(--t-display-2)/1 var(--font-display); letter-spacing: -.05em; }
.t-titulo-1 { font: 450 var(--t-titulo-1)/1.05 var(--font-display); letter-spacing: -.045em; }
.t-titulo-2 { font: 450 var(--t-titulo-2)/1.08 var(--font-display); letter-spacing: -.04em; }
.t-titulo-3 { font: 450 var(--t-titulo-3)/1.15 var(--font-display); letter-spacing: -.035em; }
.t-titulo-4 { font: 450 var(--t-titulo-4)/1.2 var(--font-display); letter-spacing: -.03em; }
/* subtítulo: Sora no tamanho que couber, sempre com traço mais fino que o título acima */
.subtitulo { font-family: var(--font-display); font-weight: var(--peso-subtitulo); letter-spacing: -.03em; }
/* negrito em texto de conteúdo: palavras/trechos importantes, mais escuros que o texto */
:where(p, li, dd, td, blockquote, figcaption) :where(strong, b) { font-weight: var(--peso-destaque); color: var(--tinta); }
.num, .t-numero-1, .t-numero-2, .t-numero-3 { font-family: var(--font-display); font-weight: 450; font-variant-numeric: tabular-nums; }
.t-numero-1 { font-size: var(--t-numero-1); line-height: 1; letter-spacing: -.05em; }
.t-numero-2 { font-size: var(--t-numero-2); line-height: 1; letter-spacing: -.05em; }
.t-numero-3, .num { font-size: var(--t-numero-3); line-height: 1; letter-spacing: -.04em; }
.t-texto-g { font: 400 var(--t-texto-g)/1.5 var(--font-body); letter-spacing: -.02em; }
.t-texto-m { font: 400 var(--t-texto-m)/1.5 var(--font-body); letter-spacing: -.015em; }
.t-texto-p { font: 400 var(--t-texto-p)/1.45 var(--font-body); letter-spacing: -.01em; }
.t-interface { font: 500 var(--t-interface)/1.2 var(--font-body); letter-spacing: -.01em; }
.t-rotulo { font: 600 var(--t-rotulo)/1.2 var(--font-body); letter-spacing: .12em; text-transform: uppercase; }
.t-legenda { font: 400 var(--t-legenda)/1.4 var(--font-body); letter-spacing: -.01em; }
.t-codigo, .codigo { font: 500 var(--t-codigo)/1.45 var(--font-mono); letter-spacing: 0; }
.suave { color: var(--tinta-66); } .mudo { color: var(--tinta-46); } .apoio { color: var(--tinta-56); }

/* ------------------------------------------------------------------- ícones */
svg.i { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* Lucide traço 1.5 sempre (a Lucide vem com 2 por padrão — nunca usar). Tamanhos: 17 padrão · 18 discos · 15 fantasmas e menus · 14 chips · 13 texto pequeno. */

/* -------------------------------------------------------------------- marca */
.logo { display: block; fill: currentColor; flex: none; width: auto; }
.simbolo { display: block; fill: currentColor; flex: none; }
/* Composição da marca (23/10/2026): logotipo em cima, nome do sistema embaixo; o botão de recolher fica à direita, centrado */
.marca { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 12px; row-gap: 16px; }
.marca .logo { width: 156px; height: 20.6px; } /* proporção 566,95 × 74,97 = 7,56 : 1 — nunca mude */
.marca > .logo, .marca > .logo-link { grid-column: 1; grid-row: 1; }
.marca .divisor { display: none; }
.marca .nome { grid-column: 1; grid-row: 2; font: 600 10.5px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--ardosia-media); }
/* motivo gráfico: o símbolo "Caminhos" em máscara (hover do botão, faixa de atenção, tela de entrar) */
.estrela { position: relative; display: inline-block; width: 16px; height: 16px; flex: none; background: var(--acento); -webkit-mask: var(--motivo-simbolo) center / contain no-repeat; mask: var(--motivo-simbolo) center / contain no-repeat; }
/* brilho da estrela (27/10/2026, pedido da Isabela): a mesma luz cônica do .botao
   gira em loop por dentro do símbolo (a máscara recorta o ::after). A cor de base
   continua no background da .estrela, então quem troca a cor não perde o brilho. */
.estrela::after { content: ""; position: absolute; inset: -40%; background: conic-gradient(from var(--b-angulo), transparent 0 52%, rgba(255,255,255,.95) 66%, transparent 80%); animation: ds-b-gira 2.6s linear infinite; }
@media (prefers-reduced-motion: reduce) { .estrela::after { animation: none; opacity: 0; } }
/* rótulo com estrela: símbolo e texto centrados um no outro (a caixa alta fica
   alta numa linha de 1.2; em linha 1 com respiro de cima ela centra no símbolo) */
.t-rotulo:has(> .estrela) { display: flex; align-items: center; gap: 8px; line-height: 1; }
.t-rotulo > .estrela { width: 14px; height: 14px; margin-top: -1px; }

/* ------------------------------------------------------------------- botões */
/* Botão da marca — "shiny button" (23/10/2026, pedido da Isabela; modelo
   shiny-button do designali-in no 21st.dev, adaptado à marca). Pílula com
   contorno de luz: um degradê cônico gira devagar pela borda (3s); dentro,
   trama de pontos e um brilho que circula. HOVER: o fundo muda (Tinta →
   Ardósia no escuro), a faixa de luz se abre em Bruma/branco e gira mais
   rápido, um halo claro respira por dentro e a seta avança.
   <button class="botao"><span>Texto</span></button> — o <span> é obrigatório.
   Estilos: (padrão) escuro · .claro · .contorno · .destaque (Ardósia).
   Tamanhos: .pequeno 32 · .compacto 36 · (padrão) 44 · .grande 52 · .cheio
   (largura toda, 48). Ícone: .baixa / .sobe no lugar da seta; .sem-seta tira
   a seta (ex.: Entrar com Google, com o ícone dentro do <span>). */
@property --b-angulo { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@property --b-angulo-desvio { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@property --b-faixa { syntax: "<percentage>"; initial-value: 5%; inherits: false; }
@property --b-brilho { syntax: "<color>"; initial-value: white; inherits: false; }
@property --b-fundo { syntax: "<color>"; initial-value: #101820; inherits: false; }
@property --b-luz { syntax: "<color>"; initial-value: #B4C7D6; inherits: false; }
/* cor e luz DO MOMENTO (28/10/2026): os estilos (.claro, .contorno, .destaque, sobre Ardósia,
   tema escuro) só definem --b-fundo/--b-luz e os -hover; o hover troca estas duas, que
   nenhum estilo define. Antes o hover trocava --b-fundo e perdia para a regra do estilo. */
@property --b-cor { syntax: "<color>"; initial-value: #101820; inherits: false; }
@property --b-luz-agora { syntax: "<color>"; initial-value: #B4C7D6; inherits: false; }
.botao {
  /* escuro (padrão): Tinta → Ardósia no hover */
  --b-fundo: var(--tinta); --b-fundo-hover: var(--ardosia); --b-anel: rgba(255,255,255,.08); --b-texto: #fff; --b-texto-hover: #fff;
  --b-luz: var(--aco); --b-luz-hover: var(--bruma); --b-brilho-hover: #fff; --b-halo: var(--bruma-profunda); --b-pontos: #fff;
  --b-duracao: 3s; --b-transicao: .6s cubic-bezier(.25, 1, .5, 1); --pad: 22px;
  --b-cor: var(--b-fundo); --b-luz-agora: var(--b-luz);
  position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 var(--pad); border: 1px solid transparent; border-radius: var(--r-pilula);
  font: 600 13px/1 var(--font-body); letter-spacing: -.01em; white-space: nowrap; color: var(--b-texto); cursor: pointer; outline-offset: 4px;
  background:
    linear-gradient(var(--b-cor), var(--b-cor)) padding-box,
    conic-gradient(from calc(var(--b-angulo) - var(--b-angulo-desvio)), transparent, var(--b-luz-agora) var(--b-faixa), var(--b-brilho) calc(var(--b-faixa) * 2), var(--b-luz-agora) calc(var(--b-faixa) * 3), transparent calc(var(--b-faixa) * 4)) border-box;
  box-shadow: inset 0 0 0 1px var(--b-anel);
  transition: var(--b-transicao); transition-property: --b-angulo-desvio, --b-faixa, --b-brilho, --b-cor, --b-luz-agora, color, box-shadow, transform, opacity;
}
.botao::before, .botao::after, .botao > span::before { content: ""; position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: -1; pointer-events: none; }
/* trama de pontos que acompanha a luz */
.botao::before { --tamanho: calc(100% - 6px); --pos: 2px; --passo: calc(var(--pos) * 2); width: var(--tamanho); height: var(--tamanho); border-radius: inherit; background: radial-gradient(circle at var(--pos) var(--pos), var(--b-pontos) calc(var(--pos) / 4), transparent 0) padding-box; background-size: var(--passo) var(--passo); background-repeat: space; -webkit-mask-image: conic-gradient(from calc(var(--b-angulo) + 45deg), #000, transparent 10% 90%, #000); mask-image: conic-gradient(from calc(var(--b-angulo) + 45deg), #000, transparent 10% 90%, #000); opacity: .3; }
/* brilho que circula por dentro (aparece no hover) */
.botao::after { width: 170%; aspect-ratio: 1; background: linear-gradient(-50deg, transparent, var(--b-halo), transparent); -webkit-mask-image: radial-gradient(circle at bottom, transparent 40%, #000); mask-image: radial-gradient(circle at bottom, transparent 40%, #000); opacity: 0; transition: opacity var(--b-transicao); }
/* rótulo + seta */
.botao > span { position: static; display: inline-flex; align-items: center; gap: 8px; } /* static: o halo (span::before) mede o botão inteiro, não o rótulo — senão aparece um retângulo em volta do texto */
.botao > span::after { content: ""; width: 1em; height: 1em; flex: none; background: currentColor; -webkit-mask: var(--icone-seta) center / contain no-repeat; mask: var(--icone-seta) center / contain no-repeat; transition: transform .4s var(--ease-out); }
.botao.baixa > span::after { -webkit-mask-image: var(--icone-baixar); mask-image: var(--icone-baixar); }
.botao.sobe > span::after { -webkit-mask-image: var(--icone-subir); mask-image: var(--icone-subir); }
.botao.sem-seta > span::after { display: none; }
.botao > span > svg { width: 18px; height: 18px; flex: none; }
/* halo que respira (aparece no hover): cobre o botão todo */
.botao > span::before { width: calc(100% + 2rem); height: calc(100% + 2rem); box-shadow: inset 0 -1ex 2rem 4px var(--b-halo); opacity: 0; transition: opacity var(--b-transicao); animation: calc(var(--b-duracao) * 1.5) ds-b-respira linear infinite; }
/* giro contínuo; no hover soma um segundo giro mais rápido */
.botao, .botao::before, .botao::after { animation: ds-b-gira var(--b-duracao) linear infinite, ds-b-gira calc(var(--b-duracao) / .4) linear infinite reverse paused; animation-composition: add; }
.botao::after { animation-name: ds-b-roda, ds-b-roda; }
.botao:is(:hover, :focus-visible) { --b-cor: var(--b-fundo-hover); --b-faixa: 22%; --b-angulo-desvio: 95deg; --b-luz-agora: var(--b-luz-hover); --b-brilho: var(--b-brilho-hover); color: var(--b-texto-hover); }
.botao:is(:hover, :focus-visible), .botao:is(:hover, :focus-visible)::before, .botao:is(:hover, :focus-visible)::after { animation-play-state: running; }
.botao:is(:hover, :focus-visible)::after { opacity: .55; }
.botao:is(:hover, :focus-visible) > span::before { opacity: .9; }
.botao:is(:hover, :focus-visible) > span::after { transform: translateX(3px); }
.botao.baixa:is(:hover, :focus-visible) > span::after { transform: translateY(2px); }
.botao.sobe:is(:hover, :focus-visible) > span::after { transform: translateY(-2px); }
.botao.sem-seta:is(:hover, :focus-visible) > span::after { transform: none; }
.botao:active { transform: translateY(1px) scale(.98); }
@keyframes ds-b-gira { to { --b-angulo: 360deg; } }
@keyframes ds-b-roda { to { rotate: 360deg; } }
@keyframes ds-b-respira { 0%, 100% { scale: 1; } 50% { scale: 1.2; } }
/* estilos */
/* claro: branco → Bruma (chapado) no hover; a luz Ardósia da borda se abre e gira mais rápido */
.botao.claro { --b-fundo: #fff; --b-fundo-hover: var(--bruma); --b-anel: var(--linha-forte); --b-texto: var(--tinta-fixa); --b-texto-hover: var(--tinta-fixa); --b-luz: var(--aco); --b-luz-hover: var(--ardosia); --b-brilho-hover: var(--tinta); --b-halo: var(--bruma-profunda); --b-pontos: var(--ardosia); }
.botao.claro:is(:hover, :focus-visible) { --b-anel: rgba(37,65,87,.25); }
/* claro sem efeito dentro: sem trama, brilho ou halo — o hover só troca o fundo
   por um tom da paleta pouco mais escuro (Bruma) e a luz da borda se abre */
.botao.claro::before, .botao.claro::after, .botao.claro > span::before { display: none; }
/* contorno: o miolo tem a cor do fundo onde o botão está (a luz da borda passa por baixo dele) */
.botao.contorno { --b-fundo: var(--tela); --b-fundo-hover: var(--ardosia); --b-anel: var(--tinta-32); --b-texto: var(--tinta); --b-texto-hover: #fff; --b-luz: var(--aco); --b-luz-hover: var(--bruma); --b-brilho-hover: #fff; --b-halo: var(--bruma-profunda); --b-pontos: var(--ardosia); }
.botao.contorno:is(:hover, :focus-visible) { --b-anel: rgba(255,255,255,0); }
.cartao .botao.contorno, .popover .botao.contorno, .janela .botao.contorno { --b-fundo: var(--branco); }
.bloco.nevoa .botao.contorno, .casca > .topo-barra .botao.contorno { --b-fundo: var(--nevoa); }
.bloco:not(.nevoa):not(.escuro) .botao.contorno { --b-fundo: var(--tela); }
.botao.destaque { --b-fundo: var(--ardosia); --b-fundo-hover: var(--tinta); --b-anel: rgba(255,255,255,.12); --b-luz: var(--bruma-profunda); --b-luz-hover: var(--bruma); --b-halo: var(--aco); }
/* tamanhos */
.botao.pequeno { height: 32px; --pad: 14px; font-size: 12px; }
.botao.pequeno > span { gap: 6px; }
.botao.compacto { height: 36px; --pad: 16px; font-size: 12.5px; }
.botao.grande { height: 52px; --pad: 28px; font-size: 14.5px; }
.botao.cheio { width: 100%; height: 48px; }
.botao:disabled { opacity: .45; cursor: not-allowed; animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .botao, .botao::before, .botao::after, .botao > span::before { animation: none; } }

/* Botões secundários (.fantasma, .translucido): sem efeito próprio (27/10/2026,
   pedido da Isabela — a luz girando na borda saiu). O único botão com efeito é o
   .botao "shiny"; os secundários só trocam o fundo no hover e encolhem no clique. */
.fantasma:active, .translucido:active { transform: scale(.97); }

/* Botão fantasma: branco com contorno fino. Um .botao por grupo de ações; o resto é fantasma. */
.fantasma { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 16px; border-radius: var(--r-pilula); border: 1px solid var(--linha-forte); background: var(--branco); font: 500 12.5px/1 var(--font-body); color: var(--tinta); cursor: pointer; transition: background-color .15s var(--ease), border-color .15s var(--ease), transform .15s var(--ease); white-space: nowrap; }
.fantasma:is(:hover, :focus-visible) { background: var(--bruma-clara); border-color: var(--bruma-profunda); }
.fantasma:disabled { opacity: .45; cursor: not-allowed; }
.fantasma svg.i { width: 15px; height: 15px; }
.fantasma.grande { height: 44px; padding: 0 18px; font-size: 13px; }
.perigo { color: var(--negativo); }
.fantasma.perigo:is(:hover, :focus-visible) { background: var(--st-alerta); border-color: color-mix(in srgb, var(--negativo) 30%, transparent); }

/* Botão translúcido: para controles sobre a Névoa, degradê ou foto (barra superior, cartões de destaque). */
.translucido { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 18px; border: 0; border-radius: var(--r-pilula); background: var(--translucido); box-shadow: var(--borda-interna); font: 500 12.5px/1 var(--font-body); color: var(--tinta); cursor: pointer; transition: background-color .15s var(--ease), transform .15s var(--ease); white-space: nowrap; }
.translucido:is(:hover, :focus-visible) { background: rgba(255,255,255,.85); }
.translucido.compacto { height: 36px; padding: 0 16px; }
.translucido svg.i { width: 16px; height: 16px; }
.cartao.destaque .translucido, .escuro .translucido, .bloco.escuro .translucido { background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); color: #fff; }
:is(.cartao.destaque, .escuro, .bloco.escuro) .translucido:is(:hover, :focus-visible) { background: rgba(255,255,255,.22); }

/* Botão só de ícone (quadrado discreto) e botão redondo (barra superior) */
.icone { width: 32px; height: 32px; border: 0; border-radius: var(--r); background: none; display: grid; place-items: center; color: var(--tinta-46); cursor: pointer; }
.icone:hover { background: var(--hover); color: var(--tinta); }
.redondo { width: 44px; height: 44px; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--translucido); box-shadow: var(--borda-interna); color: var(--tinta-66); cursor: pointer; position: relative; transition: background-color .15s var(--ease); }
.redondo:hover { background: rgba(255,255,255,.85); }
.redondo .ponto { position: absolute; top: 10px; right: 11px; width: 7px; height: 7px; border-radius: 50%; background: var(--marcado); box-shadow: 0 0 0 2px #fff; }
.redondo svg.i { width: 18px; height: 18px; }

/* Chip de filtro (acima de listas). O ativo é tinta. <span class="n"> é a contagem; <span class="fechar"> remove o filtro. */
.chip { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; border: 0; border-radius: var(--r-pilula); background: var(--nevoa); font: 500 12.5px/1 var(--font-body); color: var(--tinta); cursor: pointer; white-space: nowrap; transition: background-color .15s var(--ease); }
.painel .chip, .cartao .chip { background: var(--nevoa); }
.chip:hover { background: var(--bruma-clara); }
.chip.ativo { background: var(--tinta); color: #fff; }
.chip .n { opacity: .5; }
.chip .fechar { width: 20px; height: 20px; margin-right: -8px; border-radius: 50%; background: rgba(16,24,32,.08); display: grid; place-items: center; }
.chip .fechar svg.i { width: 11px; height: 11px; }
.chip svg.i { width: 14px; height: 14px; }

/* Alternar (Grade | Lista): dois botões num trilho */
.alternar { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-pilula); background: var(--nevoa); }
.alternar button { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border: 0; border-radius: var(--r-pilula); background: none; font: 500 12.5px var(--font-body); color: var(--tinta-66); cursor: pointer; transition: background-color .15s var(--ease), color .15s var(--ease); }
.alternar button:hover { color: var(--tinta); }
.alternar button.ativo { background: var(--branco); color: var(--tinta); box-shadow: var(--sombra-ativo); }
.alternar .i { width: 14px; height: 14px; }

/* --------------------------------------------------------------- pílulas */
.pilula { display: inline-block; padding: 4px 10px; border-radius: var(--r-pilula); font-size: 11.5px; font-weight: 500; color: var(--tinta); white-space: nowrap; }
/* pílula de estado: fundo claro + texto e ponto na cor forte do estado (27/10/2026) */
.pilula:is(.aberto, .ok, .espera, .alerta) { display: inline-flex; align-items: center; gap: 6px; }
.pilula:is(.aberto, .ok, .espera, .alerta)::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.pilula.aberto { background: var(--st-aberto); color: var(--ardosia); }
.pilula.ok { background: var(--st-ok); color: var(--positivo); }
.pilula.espera { background: var(--st-espera); color: var(--aviso-texto); }
.pilula.alerta { background: var(--st-alerta); color: var(--negativo); }
.pilula.arquivado { background: rgba(16,24,32,.06); color: var(--tinta-66); }
.pilula.destaque { background: var(--ardosia); color: #fff; font-weight: 600; } /* rótulo em evidência */
.contagem { min-width: 20px; height: 20px; padding: 0 8px; border-radius: var(--r-pilula); display: inline-grid; place-items: center; background: var(--bruma); color: var(--ardosia); font-size: 11px; font-weight: 600; }
.ponto-s { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(16,24,32,.12); }
.ponto-s::before { content: ""; position: absolute; inset: -6px; }
.ponto-s::after { content: attr(data-situacao); position: absolute; z-index: 50; left: calc(100% + 8px); top: 50%; transform: translate(-4px, -50%); padding: 5px 9px; border-radius: 8px; background: var(--tinta); color: #fff; font: 500 11px/1.2 var(--font-body); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s var(--ease), transform .15s var(--ease); }
.ponto-s:hover::after { opacity: 1; transform: translate(0, -50%); }
.ponto-s.aberto { background: var(--acento); } .ponto-s.ok { background: var(--positivo); }
.ponto-s.espera { background: var(--aviso-texto); } .ponto-s.alerta { background: var(--negativo); } /* ponto na cor forte do estado */
.tecla { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 6px; background: var(--branco); box-shadow: inset 0 0 0 1px var(--linha-forte); font: 500 11px var(--font-mono); color: var(--tinta-66); }

/* -------------------------------------------------------------------- cartões */
.cartao { background: var(--branco); border-radius: var(--r-cartao); box-shadow: var(--sombra-cartao); padding: 24px 26px; }
.cartao-titulo { font: 450 var(--t-titulo-4)/1.2 var(--font-display); letter-spacing: -.03em; }
.cartao-cabeca { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.cartao-cabeca .sub { width: 100%; margin-top: -8px; font-size: 12px; color: var(--tinta-46); }
.cartao-cabeca .acoes { margin-left: auto; display: flex; gap: 8px; align-items: center; }
/* Vidro V1: sobre a Névoa ou um degradê (não sobre branco chapado) */
.cartao.vidro { background: var(--vidro); box-shadow: 0 0 0 1px var(--vidro-borda); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
/* Vidro V3 (denso): sobre Tela ou Névoa, flutuando sobre interface */
.cartao.vidro-denso { background: var(--vidro-denso); box-shadow: 0 0 0 1px rgba(16,24,32,.06), var(--sombra-cartao); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
/* Destaque em Ardósia (23/10/2026): o elemento mais importante de cada seção
   pode ser escuro — um cartão inteiro (.cartao.destaque), um bloco dentro de
   cartão branco (.bloco.escuro) ou uma chamada. Tudo que cai dentro vira
   branco em alfa; nada precisa de estilo na tela. */
.cartao.destaque, .bloco.escuro { background: var(--ardosia); color: #fff; }
.bloco.escuro { border-radius: var(--r-bloco); }
.cartao.destaque .apoio, .cartao.destaque .mudo, .cartao.destaque .suave, .cartao.destaque .sub, .cartao.destaque .t-rotulo, .cartao.destaque .secundario, .cartao.destaque small, .cartao.destaque time,
.bloco.escuro .apoio, .bloco.escuro .mudo, .bloco.escuro .suave, .bloco.escuro .t-rotulo, .bloco.escuro small { color: rgba(255,255,255,.66); }
.cartao.destaque h1, .cartao.destaque h2, .cartao.destaque h3, .cartao.destaque h4, .cartao.destaque .cartao-titulo, .cartao.destaque strong, .bloco.escuro h3, .bloco.escuro h4, .bloco.escuro strong { color: #fff; }
.cartao.destaque p, .cartao.destaque li, .cartao.destaque td, .bloco.escuro p, .bloco.escuro li { color: rgba(255,255,255,.82); }
.cartao.destaque .bloco, .cartao.destaque .bloco.nevoa, .cartao.destaque .chip, .cartao.destaque .pilula, .cartao.destaque .nota, .cartao.destaque .tecla, .bloco.escuro .chip, .bloco.escuro .pilula { background: rgba(255,255,255,.12); color: #fff; box-shadow: none; }
.cartao.destaque .chip:hover { background: rgba(255,255,255,.2); }
.cartao.destaque .chip.ativo, .cartao.destaque .pilula.destaque { background: #fff; color: var(--ardosia); }
/* pílula de estado sobre o escuro (28/10/2026): mantém a cor semântica, na versão
   do modo escuro (fundo da cor forte misturada na Tinta, texto claro do estado) */
:is(.cartao.destaque, .bloco.escuro) .pilula.ok { background: color-mix(in srgb, #256B45 45%, #101820); color: color-mix(in srgb, #256B45 40%, #D6EFE0); }
:is(.cartao.destaque, .bloco.escuro) .pilula.espera { background: color-mix(in srgb, #805B00 45%, #101820); color: color-mix(in srgb, #805B00 50%, #FBEFD9); }
:is(.cartao.destaque, .bloco.escuro) .pilula.alerta { background: color-mix(in srgb, #A8353A 45%, #101820); color: color-mix(in srgb, #A8353A 40%, #F8DADA); }
.cartao.destaque .avatar, .cartao.destaque .disco { background: rgba(255,255,255,.16); color: #fff; }
.cartao.destaque .linha-sep, .cartao.destaque .sanfona, .cartao.destaque .item-lista, .cartao.destaque tbody tr, .cartao.destaque thead tr { border-color: rgba(255,255,255,.18); }
.cartao.destaque .sep { background: rgba(255,255,255,.3); }
.cartao.destaque .sanfona summary::after, .cartao.destaque .nota svg.i { background: rgba(255,255,255,.66); color: rgba(255,255,255,.66); }
.cartao.destaque .sanfona summary, .cartao.destaque .sanfona .conteudo { color: #fff; }
.cartao.destaque .fantasma, .bloco.escuro .fantasma { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.2); color: #fff; }
:is(.cartao.destaque, .bloco.escuro) .fantasma:is(:hover, :focus-visible) { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.3); }
.cartao.destaque .botao:not(.contorno), .bloco.escuro .botao:not(.contorno) { --b-fundo: #fff; --b-fundo-hover: var(--bruma); --b-anel: rgba(255,255,255,0); --b-texto: var(--ardosia); --b-texto-hover: var(--tinta-fixa); --b-luz: var(--bruma-profunda); --b-luz-hover: #fff; --b-brilho-hover: var(--bruma); --b-halo: var(--bruma); --b-pontos: var(--ardosia); } /* sobre Ardósia, o botão vira claro */
.cartao.destaque .botao.contorno, .bloco.escuro .botao.contorno { --b-fundo: var(--ardosia); --b-anel: rgba(255,255,255,.4); --b-texto: #fff; --b-fundo-hover: #fff; --b-texto-hover: var(--ardosia); --b-luz-hover: var(--bruma-profunda); --b-pontos: #fff; }
.cartao.destaque .barra-prog .trilho { background: rgba(255,255,255,.18); } .cartao.destaque .barra-prog .trilho i { background: #fff; }
.cartao.destaque .icone { color: rgba(255,255,255,.66); } .cartao.destaque .icone:hover { background: rgba(255,255,255,.12); color: #fff; }
.cartao.destaque ::selection, .bloco.escuro ::selection { background: rgba(255,255,255,.3); }
/* estrela sobre o escuro (28/10/2026): o --acento é Ardósia no claro e sumia no
   fundo Ardósia; aqui ela fica Bruma (no tema escuro, Lima — ver MODO ESCURO). */
:is(.cartao.destaque, .bloco.escuro) .estrela { background: var(--bruma); }
/* Bloco dentro de cartão (mini-gráfico, resumo, agenda) */
.bloco { background: var(--tela); border-radius: var(--r-bloco); padding: 20px; }
.bloco.nevoa { background: var(--nevoa); border-radius: var(--r-interno); padding: 16px 18px; }
.bloco.degrade { position: relative; overflow: hidden; background: var(--g-bruma-1); }
/* mancha desfocada (decoração de degradês e capas) */
.mancha { position: absolute; border-radius: 50%; background: var(--bruma); filter: blur(90px); pointer-events: none; }
/* tamanhos padrão (28/10/2026): a tela escolhe só onde a mancha fica */
.mancha.pequena { width: 240px; height: 240px; filter: blur(50px); }
.mancha.media { width: 380px; height: 380px; filter: blur(70px); }
.mancha.grande { width: 560px; height: 560px; }
/* no bloco de chamada claro a mancha já vem no canto de baixo à direita */
.bloco.degrade > .mancha { right: -60px; bottom: -80px; opacity: .8; }
.bloco.degrade > :not(.mancha) { position: relative; }

/* Indicadores: grade de cartões com disco + rótulo + número */
.indicadores { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.indicador { display: flex; align-items: center; gap: 14px; padding: 18px 20px; }
.disco { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--bruma-clara); color: var(--acento); }
.disco svg.i { width: 18px; height: 18px; }
.indicador .rotulo { font-size: 11.5px; color: var(--tinta-46); }
.indicador .valor { font-size: var(--t-numero-2); line-height: 1; margin-top: 4px; }
.indicador .valor small { font: 500 11.5px var(--font-body); color: var(--positivo); letter-spacing: 0; margin-left: 6px; }
/* variação (28/10/2026): a cor diz se o número é bom ou ruim, não se subiu ou
   desceu ("−3 dias até contratar" é bom, verde). Ruim = .negativo; sem
   juízo (estável, sem base de comparação) = .neutro. */
.indicador .valor small.negativo { color: var(--negativo); }
.indicador .valor small.neutro { color: var(--tinta-56); }
/* Faixa de pílulas de números (linha de métricas compactas) */
.faixa-pilulas { display: flex; gap: 12px; }
.pilula-numero { flex: 1; display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 18px; border-radius: var(--r-pilula); background: var(--branco); box-shadow: var(--borda-interna); min-width: 0; }
.pilula-numero svg.i { color: var(--acento); width: 18px; height: 18px; }
.pilula-numero .texto { font-size: 13.5px; font-weight: 500; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pilula-numero .n { font-size: 12.5px; color: var(--tinta-46); white-space: nowrap; }

/* Faixa "precisa de atenção": degradê Bruma + símbolo + avisos em vidro */
.atencao { position: relative; overflow: hidden; border-radius: var(--r-cartao); padding: 16px; background: linear-gradient(120deg, #EAF0F5 0%, #D3E0EA 45%, #F5F8FB 100%); }
.atencao::before, .atencao::after { content: ""; position: absolute; border-radius: 50%; filter: blur(40px); opacity: .8; pointer-events: none; }
.atencao::before { width: 380px; height: 380px; left: -80px; top: -200px; background: var(--bruma-profunda); }
.atencao::after { width: 320px; height: 320px; right: -60px; bottom: -220px; background: var(--bruma); }
.atencao-vidro { position: relative; z-index: 1; border-radius: var(--r-bloco); background: var(--vidro); box-shadow: 0 0 0 1px var(--vidro-borda); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); padding: 14px; }
.atencao-topo { display: flex; align-items: center; gap: 10px; padding: 2px 4px 12px; font-size: 13px; font-weight: 500; }
.atencao-topo button { margin-left: 6px; padding: 0 0 0 12px; border: 0; border-left: 1px solid var(--linha-forte); background: none; color: var(--ardosia-media); font-weight: 500; cursor: pointer; }
.atencao-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.aviso { background: rgba(255,255,255,.88); border-radius: var(--r-interno); box-shadow: 0 0 0 1px var(--linha); padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.aviso strong { font: 600 14px/1.3 var(--font-body); }
.aviso p { margin: 0 0 8px; font-size: 12.5px; line-height: 1.55; color: var(--tinta-66); }
a.aviso { transition: background-color .15s var(--ease), box-shadow .15s var(--ease); }
a.aviso:hover, a.aviso:focus-visible { background: var(--branco); box-shadow: 0 0 0 1.5px var(--acento), var(--sombra-cartao); }
.aviso .abrir { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--ardosia-media); }
.aviso .abrir::after { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--icone-seta) center / contain no-repeat; mask: var(--icone-seta) center / contain no-repeat; transition: transform .3s var(--ease-out); }
a.aviso:hover .abrir::after { transform: translateX(4px); }

/* ------------------------------------------------------------------ campos */
.campo { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--tinta-46); }
.campo + .campo, .campo + .opcao, .opcao + .campo { margin-top: 14px; }
.campo input, .campo textarea, textarea.campo-texto { width: 100%; border: 1px solid var(--linha-forte); border-radius: var(--r); background: var(--branco); padding: 10px 14px; font: 13px/1.5 var(--font-body); color: var(--tinta); resize: vertical; }
.campo input { height: 44px; }
/* caixas de marcar e radios dentro de .campo não são campos de texto: as regras deles, mais abaixo, devolvem tamanho, borda e fundo próprios */
/* Campo em foco "acende" (23/10/2026): brilho da marca girando atrás do campo
   (.brilho, abaixo); o comum.js envolve cada input/textarea de .campo num
   <span class="brilho">. O campo fica branco, com borda Bruma Profunda. */
.campo input, .campo textarea, textarea.campo-texto { transition: border-color .2s var(--ease-out), background-color .2s var(--ease-out); }
.campo input:focus, .campo textarea:focus, textarea.campo-texto:focus { outline: none; border-color: var(--bruma-profunda); background: var(--branco); box-shadow: none; }
.campo .brilho { display: block; width: 100%; }
/* Brilho (glow): degradê cônico com as cores da Bruma, desfocado, girando
   (5s, contínuo) atrás do elemento — aparece só com foco dentro. */
@property --ds-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.brilho, .busca { position: relative; isolation: isolate; }
.brilho::before, .busca::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: var(--r); background: conic-gradient(from var(--ds-ang), var(--bruma-clara), var(--bruma-profunda), var(--bruma), var(--aco), var(--bruma), var(--bruma-clara)); filter: blur(7px); opacity: 0; transform: scale(1.01); transition: opacity .25s var(--ease-out); animation: ds-brilho 5s linear infinite paused; pointer-events: none; }
.brilho:focus-within::before, .busca:focus-within::before { opacity: 1; animation-play-state: running; }
@keyframes ds-brilho { to { --ds-ang: 360deg; } }
.campo input[readonly] { background: var(--tela); color: var(--tinta-46); }
.campo .erro { font-size: 11.5px; color: var(--negativo); }
input:disabled, select:disabled, textarea:disabled { opacity: .45; cursor: not-allowed; }

/* Busca (translúcida na barra superior; use .campo normal dentro de cartão) */
.busca { position: relative; }
.busca input { height: 44px; width: 280px; max-width: 100%; border: 0; background: var(--translucido); box-shadow: var(--borda-interna); border-radius: var(--r); padding: 0 16px 0 42px; font: 13.5px var(--font-body); color: var(--tinta); transition: background-color .15s var(--ease); }
.busca input::placeholder { color: var(--tinta-46); }
.busca input { transition: background-color .2s var(--ease-out), box-shadow .2s var(--ease-out); }
.busca input:focus { outline: none; background: var(--branco); box-shadow: var(--borda-interna); }
.busca svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--tinta-46); }
.cartao .busca input { background: var(--tela); }

/* Caixa de marcar: 18px, cantos 6px; marcada = Ardósia com check branco (traço 3 no viewBox 24 = 1,5px na tela) */
input[type=checkbox] { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; padding: 0; margin: 0; flex: none; border: 1.5px solid rgba(16,24,32,.24); border-radius: 6px; background: var(--branco) center / 12px no-repeat; cursor: pointer; transition: background-color .15s, border-color .15s; }
input[type=checkbox]:hover { border-color: var(--tinta-46); }
input[type=checkbox]:checked { background-color: var(--marcado); border-color: var(--marcado); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
input[type=checkbox]:focus-visible { outline: none; box-shadow: var(--sombra-foco); }
/* estado indeterminado (parte de um grupo marcada): traço no lugar do check */
input[type=checkbox]:indeterminate { background-color: var(--marcado); border-color: var(--marcado); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E"); }

/* Opção única (radio): 18px, marcada = anel Ardósia */
input[type=radio] { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; padding: 0; margin: 0; flex: none; border: 1.5px solid rgba(16,24,32,.24); border-radius: 50%; background: var(--branco); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
input[type=radio]:hover { border-color: var(--tinta-46); }
input[type=radio]:checked { border-color: var(--marcado); box-shadow: inset 0 0 0 4px var(--branco); background: var(--marcado); }
input[type=radio]:focus-visible { outline: none; box-shadow: inset 0 0 0 4px var(--branco), var(--sombra-foco); }
.opcao { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--tinta-66); cursor: pointer; }

/* Chave liga/desliga "líquida" (23/10/2026, pedido da Isabela; padrão de toda
   chave do DS): trilho 40×22, ligada = Ardósia. O botão branco atravessa o
   trilho esticando como uma gota, e uma gotinha vai atrás e se funde a ele —
   efeito "gooey" por filtro SVG (desfoque + contraste de alfa) numa camada
   própria (.gota, criada pelo comum.js). Sem quique: só estica e assenta.
   HTML: <span class="chave"><input type="checkbox"><span class="trilho"></span></span> */
.chave { position: relative; display: inline-block; width: 40px; height: 22px; flex: none; cursor: pointer; }
.chave input { position: absolute; z-index: 2; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chave .trilho { position: absolute; inset: 0; border-radius: var(--r-pilula); background: rgba(16,24,32,.15); transition: background-color .3s var(--ease); }
.chave input:checked ~ .trilho { background: var(--marcado); }
.chave input:focus-visible ~ .trilho { box-shadow: var(--sombra-foco); }
.chave input:disabled ~ .trilho { opacity: .45; cursor: not-allowed; }
/* camada das gotas (fundo transparente: é aí que o filtro funde as duas) */
.chave .gota { position: absolute; z-index: 1; inset: 0; pointer-events: none; -webkit-filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeGaussianBlur in='SourceGraphic' stdDeviation='2' result='b'/%3E%3CfeColorMatrix in='b' values='1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -8' result='g'/%3E%3CfeComposite in='SourceGraphic' in2='g' operator='atop'/%3E%3C/filter%3E%3C/svg%3E#g"); filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeGaussianBlur in='SourceGraphic' stdDeviation='2' result='b'/%3E%3CfeColorMatrix in='b' values='1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -8' result='g'/%3E%3CfeComposite in='SourceGraphic' in2='g' operator='atop'/%3E%3C/filter%3E%3C/svg%3E#g"); }
.chave .gota::before, .chave .gota::after { content: ""; position: absolute; top: 50%; border-radius: 50%; background: #fff; }
.chave .gota::after { left: 3px; width: 16px; height: 16px; margin-top: -8px; transition: transform .42s cubic-bezier(.3,.9,.3,1); }
.chave .gota::before { left: 7px; width: 8px; height: 8px; margin-top: -4px; transition: transform .42s cubic-bezier(.2,.7,.2,1) .07s; }
.chave input:checked ~ .gota::after, .chave input:checked ~ .gota::before { transform: translateX(18px); }
/* a gota estica na travessia (só depois do primeiro toque: comum.js põe .tocada) */
@keyframes ds-gota-vai { 0% { transform: translateX(0) scale(1); } 45% { transform: translateX(9px) scale(1.35, .8); } 100% { transform: translateX(18px) scale(1); } }
@keyframes ds-gota-volta { 0% { transform: translateX(18px) scale(1); } 45% { transform: translateX(9px) scale(1.35, .8); } 100% { transform: translateX(0) scale(1); } }
.chave.tocada input:checked ~ .gota::after { animation: ds-gota-vai .42s cubic-bezier(.3,.9,.3,1) both; }
.chave.tocada input:not(:checked) ~ .gota::after { animation: ds-gota-volta .42s cubic-bezier(.3,.9,.3,1) both; }
/* sem a camada .gota (HTML sem comum.js): o botão desliza no trilho mesmo */
.chave .trilho:last-child::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(16,24,32,.2); transition: transform .3s var(--ease); }
.chave input:checked ~ .trilho:last-child::after { transform: translateX(18px); }

/* Deslizador (range) */
input[type=range].deslizador { appearance: none; -webkit-appearance: none; width: 100%; height: 22px; margin: 0; background: none; cursor: pointer; }
input[type=range].deslizador::-webkit-slider-runnable-track { height: 6px; border-radius: var(--r-pilula); background: linear-gradient(90deg, var(--marcado) var(--valor, 50%), var(--bruma-clara) var(--valor, 50%)); }
input[type=range].deslizador::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; margin-top: -5px; border-radius: 50%; background: #fff; border: 1.5px solid var(--marcado); box-shadow: 0 1px 2px rgba(16,24,32,.2); }
input[type=range].deslizador::-moz-range-track { height: 6px; border-radius: var(--r-pilula); background: var(--bruma-clara); }
input[type=range].deslizador::-moz-range-progress { height: 6px; border-radius: var(--r-pilula); background: var(--marcado); }
input[type=range].deslizador::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 1.5px solid var(--marcado); }

/* Área de soltar arquivo (o input de arquivo fica escondido dentro) */
.zona { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 28px 16px; border: 1.5px dashed rgba(37,65,87,.3); border-radius: var(--r-interno); background: rgba(211,224,234,.18); cursor: pointer; transition: background-color .15s var(--ease), border-color .15s var(--ease); }
.zona:hover, .zona.sobre { background: rgba(211,224,234,.35); border-color: var(--acento); }
.campo .zona { color: var(--tinta); } /* dentro de .campo não herda o cinza do rótulo (28/10/2026) */
.zona .disco { background: var(--branco); box-shadow: var(--sombra-cartao); }
.zona strong { margin-top: 10px; font-size: 13px; font-weight: 500; }
.zona span { font-size: 11.5px; color: var(--tinta-46); }

/* Lista de escolha no visual do sistema: <select data-combo> (comum.js desenha a lista) */
.combo { position: relative; }
.combo-botao { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 190px; height: 36px; padding: 0 12px 0 14px; border: 1px solid var(--linha-forte); border-radius: var(--r); background: var(--branco); font: 500 12.5px var(--font-body); color: var(--tinta); cursor: pointer; transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
.combo-botao:hover { border-color: var(--tinta-46); }
.combo-botao:disabled { opacity: .45; cursor: not-allowed; border-color: var(--linha-forte); } /* select[data-combo] disabled (comum.js copia o disabled) */
.combo-item:focus-visible { background: var(--hover); color: var(--tinta); box-shadow: none; } /* setas do teclado */
.combo-botao.aberto { border-color: var(--ardosia-media); box-shadow: var(--sombra-foco); }
.campo .combo-botao { width: 100%; height: 44px; } /* dentro de .campo, o combo tem o tamanho do campo de texto (23/10/2026) */
.combo-botao .i { width: 14px; height: 14px; color: var(--tinta-46); transition: transform .15s var(--ease); }
.combo-botao.aberto .i { transform: rotate(180deg); }
.combo .combo-lista { top: calc(100% + 6px); left: 0; right: auto; width: auto; min-width: 100%; padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.combo-lista[hidden] { display: none; }
.combo-item { padding: 8px 12px; border: 0; border-radius: 10px; background: none; font: 400 12.5px var(--font-body); color: var(--tinta-66); text-align: left; white-space: nowrap; cursor: pointer; }
.combo-item:hover { background: var(--hover); color: var(--tinta); }
.combo-item.escolhido { background: var(--bruma-clara); color: var(--tinta); font-weight: 500; }

/* Campo de data: abre o .calendario abaixo (nunca o calendário nativo) */
.campo-data { position: relative; }
.campo-data input, .campo-data input[readonly] { padding-left: 42px; background: var(--branco); color: var(--tinta); cursor: pointer; }
.campo-data > svg.i { position: absolute; z-index: 1; left: 14px; bottom: 14px; width: 16px; height: 16px; color: var(--tinta-46); pointer-events: none; } /* z-index: fica por cima do .brilho que o comum.js cria (28/10/2026) */
.campo-data .calendario { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; }
.calendario { width: 292px; padding: 14px; background: rgba(255,255,255,.78); -webkit-backdrop-filter: blur(20px) saturate(1.2); backdrop-filter: blur(20px) saturate(1.2); border-radius: var(--r-interno); box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 0 0 1px var(--linha), var(--sombra-pop); }
.calendario[hidden] { display: none; }
.calendario-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 0 10px; }
.calendario-topo strong { font: 450 16px/1.1 var(--font-display); letter-spacing: -.03em; }
.calendario-topo .icone { width: 30px; height: 30px; border-radius: 50%; }
.calendario-grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px 0; }
.calendario-grade .dia-semana { padding: 4px 0 6px; text-align: center; font: 600 10.5px/1.5 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-46); }
.calendario-grade button { height: 34px; border: 0; border-radius: 50%; background: none; font: 500 12.5px var(--font-body); font-variant-numeric: tabular-nums; color: var(--tinta); cursor: pointer; transition: background-color .15s var(--ease); }
.calendario-grade button:hover { background: var(--hover); }
.calendario-grade button.fora { color: var(--tinta-32); }
.calendario-grade button.hoje { box-shadow: inset 0 0 0 1.5px var(--ardosia-media); }
.calendario-grade button.no-intervalo { background: var(--bruma-clara); border-radius: 0; }
.calendario-grade button.escolhido { background: var(--marcado); color: var(--sobre-marcado); border-radius: 50%; }
.calendario-grade button:disabled { opacity: .35; cursor: not-allowed; background: none; }
.calendario-rodape { display: flex; justify-content: space-between; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--linha); }
.calendario-rodape button { border: 0; background: none; padding: 4px 8px; border-radius: var(--r-pilula); font: 500 12px var(--font-body); color: var(--ardosia-media); cursor: pointer; }
.calendario-rodape button:hover { background: var(--hover); }

/* -------------------------------------------------------- avatar e autor */
.avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--bruma-clara); color: var(--acento); font: 600 12px var(--font-display); flex: none; }
.avatar.tinta { background: var(--ardosia); color: #fff; }
.avatar.grande { width: 56px; height: 56px; font-size: 18px; }
.avatar.mini { width: 20px; height: 20px; font-size: 9px; }
.avatar.mini svg.i { width: 12px; height: 12px; }
.avatar.com-foto { background-size: cover; background-position: center; }
/* Pessoa aparece por foto + nome; o e-mail vai no title. */
.autor { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; vertical-align: middle; }
.autor-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tinta); font-weight: 500; }
.autor.grande .avatar { width: 28px; height: 28px; font-size: 11px; }
.autor.grande .avatar svg.i { width: 15px; height: 15px; }
.comentario-editado { font-size: 11.5px; color: var(--tinta-46); cursor: default; }
.comentario-editado.com-dica::after { width: max-content; max-width: 260px; }

/* ------------------------------------------------------- listas e tabela */
.item-lista { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--linha); }
.item-lista:first-child { border-top: 0; }
.item-lista .primario { font-size: 13.5px; font-weight: 500; line-height: 1.3; }
.item-lista .secundario { font-size: 11.5px; color: var(--tinta-46); margin-top: 2px; }
.item-lista .fim { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.filtros { display: flex; align-items: center; gap: 8px; margin: 14px 0; flex-wrap: wrap; }
.filtros .busca { margin-left: auto; }
.filtros .direita { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.filtros .total, .acoes .total { font-size: 12px; color: var(--tinta-46); white-space: nowrap; }

table { width: 100%; border-collapse: collapse; text-align: left; }
thead tr { border-bottom: 1px solid var(--linha); }
th { padding: 8px 12px 8px 0; font: 600 10.5px/1.5 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-46); }
tbody tr { border-bottom: 1px solid var(--linha); cursor: pointer; transition: background-color .15s var(--ease); }
tbody tr:last-child { border-bottom: 0; }
tbody tr:hover { background: rgba(211,224,234,.3); }
td { padding: 14px 12px 14px 0; font-size: 12.5px; color: var(--tinta-66); vertical-align: middle; }
td:first-child, th:first-child { padding-left: 16px; }
td:last-child, th:last-child { padding-right: 16px; }
/* última coluna à direita só nas tabelas de dados (28/10/2026); tabela de leitura
   (texto, especificação) leva .leitura: sem alinhar à direita, sem hover nem mãozinha.
   :where() mantém a especificidade de antes (td:last-child). */
:where(table:not(.leitura)) :is(td, th):last-child { text-align: right; }
table.leitura tbody tr { cursor: default; }
table.leitura tbody tr:hover { background: none; }
td .primario { font-size: 13px; font-weight: 500; color: var(--tinta); line-height: 1.3; }
td .secundario { margin-top: 2px; font-size: 11.5px; color: var(--tinta-46); }
td:last-child .icone { display: inline-grid; vertical-align: middle; margin-left: 6px; }
.col-esconde { } /* some abaixo de 1024px (ver layouts.css) */

/* -------------------------------------------------- gráficos simples (CSS) */
.barra-prog { display: flex; align-items: center; gap: 10px; }
.barra-prog .trilho { flex: 1; height: 6px; border-radius: var(--r-pilula); background: var(--bruma-clara); overflow: hidden; }
.barra-prog .trilho i { display: block; height: 100%; border-radius: var(--r-pilula); background: var(--acento); transition: width .3s var(--ease); }
.barra-prog.aco .trilho i { background: var(--aco); }
.grafico-barras { display: flex; align-items: flex-end; justify-content: space-between; gap: 4px; height: var(--altura, 140px); } /* altura padrão 140; outra = --altura na classe da tela (28/10/2026) */
.grafico-barras .barra { width: 7px; border-radius: var(--r-pilula); background: var(--bruma-profunda); }
.grafico-barras .barra.alta { background: var(--acento); }
.grafico-eixo { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--tinta-46); margin-top: 10px; }

/* ---------------------------------------------------------------- navegação */
.abas { display: inline-flex; gap: 6px; }
.abas .chip[aria-selected=true] { background: var(--tinta); color: #fff; }
.trilha { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--tinta-56); }
.trilha svg.i { width: 13px; height: 13px; color: var(--tinta-32); }
.trilha strong { font-weight: 600; color: var(--tinta); }
.trilha a:hover { color: var(--tinta); }
.paginacao { display: flex; align-items: center; gap: 4px; }
.paginacao button { width: 32px; height: 32px; border: 0; border-radius: 50%; background: none; display: grid; place-items: center; font: 500 12.5px var(--font-body); font-variant-numeric: tabular-nums; color: var(--tinta-66); cursor: pointer; transition: background-color .15s var(--ease); }
.paginacao button:hover { background: var(--hover); color: var(--tinta); }
.paginacao button.atual { background: var(--tinta); color: #fff; }
.paginacao button:disabled { opacity: .35; cursor: not-allowed; }
/* Sanfona (acordeão) com <details class="sanfona"> */
.sanfona { border-top: 1px solid var(--linha); }
.sanfona:first-of-type { border-top: 0; }
.sanfona summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 14px 2px; font: 600 13px var(--font-body); cursor: pointer; }
.sanfona summary::-webkit-details-marker { display: none; }
.sanfona summary::after { content: ""; margin-left: auto; width: 16px; height: 16px; background: var(--tinta-46); -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") center / contain no-repeat; mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") center / contain no-repeat; transition: transform .16s var(--ease); }
.sanfona[open] summary::after { transform: rotate(180deg); }
.sanfona .conteudo { padding: 0 2px 16px; font-size: 13px; line-height: 1.6; color: var(--tinta-66); }

/* ----------------------------------------------------------------- feedback */
.nota { display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--r); background: var(--bruma-clara); font-size: 12px; color: var(--tinta-82); line-height: 1.5; }
.nota svg.i { color: var(--acento); margin-top: 1px; flex: none; }
.dica { margin-top: 10px; display: flex; gap: 8px; align-items: center; font-size: 11.5px; color: var(--tinta-46); }
.dica[hidden] { display: none; }
.dica svg.i { width: 13px; height: 13px; flex: none; } /* tamanho padrão do ícone da dica (28/10/2026) */
/* G do Google (Entrar com Google) em disco branco — vale em qualquer botão (28/10/2026) */
.g-disco { width: 24px; height: 24px; flex: none; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px var(--linha); display: grid; place-items: center; }
.g-disco svg { width: 14px; height: 14px; }
/* Explicação ao passar o mouse: <span class="com-dica" data-dica="…"> */
.com-dica { position: relative; display: inline-flex; }
.com-dica::after { content: attr(data-dica); position: absolute; z-index: 60; top: calc(100% + 8px); right: 0; width: 260px; padding: 10px 12px; border-radius: 10px; background: var(--tinta); color: #fff; font: 400 12px/1.45 var(--font-body); text-align: left; opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .15s var(--ease), transform .15s var(--ease); }
.com-dica:hover::after, .com-dica:focus-within::after { opacity: 1; transform: translateY(0); }
/* Rodinha de progresso */
.girando { width: 18px; height: 18px; flex: none; border-radius: 50%; border: 2px solid var(--bruma-clara); border-top-color: var(--acento); animation: ds-girar .8s linear infinite; }
@keyframes ds-girar { to { transform: rotate(360deg); } }
/* Aviso flutuante (toast) — criado por avisar() em comum.js */
.avisos-flutuantes { position: fixed; z-index: 80; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 10px; }
.aviso-flutuante { display: flex; align-items: flex-start; gap: 10px; width: 340px; max-width: calc(100vw - 40px); padding: 14px 16px; border-radius: var(--r-interno); background: var(--branco); box-shadow: 0 0 0 1px var(--linha), var(--sombra-pop); font-size: 13px; line-height: 1.45; animation: ds-subir .2s var(--ease-out); }
.aviso-flutuante svg.i { color: var(--acento); margin-top: 1px; }
.aviso-flutuante > svg.i:has(use[href="#i-check"]) { color: var(--positivo); } /* aviso de sucesso: ✓ verde */
.aviso-flutuante > svg.i:has(use[href="#i-fechar"]) { color: var(--negativo); } /* aviso de erro: vermelho */
.aviso-flutuante > svg.i:has(use[href="#i-alerta"]) { color: var(--aviso-texto); } /* atenção: âmbar (28/10/2026) */
.aviso-flutuante .icone { margin: -4px -6px 0 auto; width: 26px; height: 26px; border-radius: 50%; }
@keyframes ds-subir { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .aviso-flutuante { animation: none; } }

/* ------------------------------------------------------------- sobreposições */
/* Menus suspensos em vidro V3 (denso): fundo branco translúcido + desfoque, borda clara (23/10/2026) */
.popover { position: absolute; z-index: 40; right: 0; top: calc(100% + 8px); width: 360px; max-width: calc(100vw - 24px); max-height: 70vh; overflow-y: auto; background: rgba(255,255,255,.78); -webkit-backdrop-filter: blur(20px) saturate(1.2); backdrop-filter: blur(20px) saturate(1.2); border-radius: var(--r-interno); box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 0 0 1px var(--linha), var(--sombra-pop); padding: 6px; }
.popover[hidden] { display: none; }
.popover-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px 10px; border-bottom: 1px solid var(--linha); margin-bottom: 4px; }
.popover-topo strong { font: 450 16px/1.1 var(--font-display); letter-spacing: -.03em; }
.popover-topo button { border: 0; background: none; padding: 0; color: var(--ardosia-media); font-size: 12px; font-weight: 500; cursor: pointer; }
.sino { position: relative; }
.sino-caixa { position: relative; } /* o .popover de notificações abre abaixo do sino (comum.js) */
a.avatar { text-decoration: none; }
.notif { display: flex; gap: 10px; padding: 10px 12px; border-radius: var(--r); transition: background-color .15s var(--ease); }
.notif::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--marcado); }
.notif.lida::before { background: transparent; }
.notif:hover, .notif:focus-visible { background: var(--hover); }
.notif strong { display: block; font-size: 13px; font-weight: 600; }
.notif p { margin: 2px 0 4px; font-size: 12px; line-height: 1.5; color: var(--tinta-66); }
.notif time, .notif-vazio { font-size: 11.5px; color: var(--tinta-46); }
.notif-vazio { margin: 0; padding: 14px 12px; }
/* Menu de ações (⋯, conta, linha da tabela) */
.menu-linha { position: fixed; top: 0; left: 0; right: auto; width: 200px; max-height: calc(100vh - 16px); }
.menu-linha [role^=menuitem], .menu-conta :is(a, button) { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: 0; border-radius: 10px; background: none; font: 500 13px var(--font-body); color: var(--tinta-66); text-align: left; cursor: pointer; }
.menu-linha [role^=menuitem]:hover, .menu-linha [role^=menuitem]:focus-visible, .menu-conta :is(a, button):hover, .menu-conta :is(a, button):focus-visible { background: var(--hover); color: var(--tinta); box-shadow: none; }
.menu-linha [aria-checked=true] { background: var(--bruma-clara); color: var(--tinta); }
.menu-linha [role^=menuitem].perigo, .menu-conta :is(a, button).perigo { color: var(--negativo); } /* item de perigo vence a cor padrão do item (23/10/2026) */
.opcao .chave:last-child { margin-left: auto; order: 1; } /* "rótulo + chave à direita", padrão das telas de configurações; order: texto solto depois da chave (sem <span>) também fica à esquerda (28/10/2026) */
.menu-conta :is(a, button).separa, .menu-linha [role^=menuitem].separa { margin-top: 4px; border-top: 1px solid var(--linha); border-radius: 0 0 10px 10px; } /* a ou button, também no menu da linha (28/10/2026) */
/* Cuidado (27/10/2026): aviso de atenção dentro do conteúdo — risco, armadilha,
   ressalva. Âmbar semântico: fundo --st-espera, ícone (i-alerta) e rótulo em
   --aviso-texto. <div class="cuidado"><svg class="i"><use href="#i-alerta"/></svg>
   <span class="t-rotulo">Armadilha</span><p>…</p></div> */
.cuidado { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 4px 12px; align-content: start; padding: 14px 16px; border-radius: var(--r-interno); background: var(--st-espera); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--aviso-texto) 16%, transparent); }
.cuidado > svg.i { grid-row: span 2; width: 32px; height: 32px; padding: 8px; border-radius: 50%; background: color-mix(in srgb, var(--aviso-texto) 14%, transparent); color: var(--aviso-texto); }
.cuidado .t-rotulo { align-self: center; color: var(--aviso-texto); }
.cuidado p, .cuidado li { font-size: var(--t-texto-m); line-height: 1.6; color: var(--tinta-82); }

/* Janela de confirmação: <dialog class="janela"> nativo, aberto com showModal() */
.janela { width: min(440px, calc(100vw - 24px)); padding: 24px; border: 0; border-radius: var(--r-cartao); background: rgba(255,255,255,.86); -webkit-backdrop-filter: blur(24px) saturate(1.2); backdrop-filter: blur(24px) saturate(1.2); color: var(--tinta); box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), var(--sombra-pop); }
.janela::backdrop { background: rgba(16,24,32,.28); backdrop-filter: blur(6px); }
.janela h2 { font-size: var(--t-titulo-3); letter-spacing: -.035em; }
.janela p { margin: 8px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--tinta-66); }
.janela .acoes { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; }

/* --------------------------------------------------------------- utilidades */
/* Tabela em tela estreita: envolva a <table> num .rola-x (rolagem horizontal fina) */
.rola-x { overflow-x: auto; }
.rola-x table { min-width: 560px; }
.linha-sep { height: 1px; background: var(--linha); border: 0; margin: 0; }
.sep { width: 1px; height: 12px; background: var(--linha-forte); }
.rodape-numeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--linha); text-align: center; }
.rodape-numeros span { font-size: 11.5px; color: var(--tinta-46); }
.rodape-numeros .num { display: block; font-size: 22px; margin-top: 4px; color: var(--tinta); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ============================================================================
   MODO ESCURO (23/10/2026) — :root[data-tema="escuro"], ver tokens.css.
   Quase tudo vem dos tokens; aqui fica só o que token não resolve: brancos e
   tintas em alfa escritos à mão, os botões shiny, a chave líquida, o brilho
   do campo, vidros dos menus e o que a Lima passa a marcar.
   ========================================================================== */
[data-tema="escuro"] { scrollbar-color: rgba(245,248,251,.16) transparent; }
[data-tema="escuro"] ::selection { background: var(--ardosia); color: #fff; }
[data-tema="escuro"] .painel { scrollbar-color: rgba(245,248,251,.18) transparent !important; }
[data-tema="escuro"] .painel::-webkit-scrollbar-thumb { background: rgba(245,248,251,.18) !important; }

/* Alternar tema (botão .tema no pé da lateral, criado pelo comum.js): lua no claro, sol no escuro */
[data-alternar-tema] .tema-sol, [data-tema="escuro"] [data-alternar-tema] .tema-lua { display: none; }
[data-tema="escuro"] [data-alternar-tema] .tema-sol { display: block; }

/* Botão da marca. Padrão: Bruma (a cor principal) com texto Tinta; hover
   clareia para Tela e a luz da borda acende em Lima. */
[data-tema="escuro"] .botao:not(.claro, .contorno, .destaque) { --b-fundo: var(--bruma); --b-fundo-hover: #fff; --b-anel: rgba(245,248,251,.1); --b-texto: var(--tinta-fixa); --b-texto-hover: var(--tinta-fixa); --b-luz: var(--aco); --b-luz-hover: var(--lima); --b-brilho-hover: #fff; --b-halo: var(--bruma-profunda); --b-pontos: var(--ardosia); }
[data-tema="escuro"] .botao.claro { --b-anel: rgba(245,248,251,0); --b-luz-hover: var(--lima); --b-brilho-hover: #fff; }
[data-tema="escuro"] .botao.contorno { --b-luz-hover: var(--lima); --b-brilho-hover: #fff; --b-pontos: var(--bruma); }
[data-tema="escuro"] .botao.destaque { --b-fundo-hover: color-mix(in srgb, var(--ardosia) 72%, var(--aco)); --b-anel: rgba(245,248,251,.14); --b-luz-hover: var(--lima); --b-brilho-hover: #fff; }
/* secundários: a luz da borda vira Bruma Profunda (Ardósia some no escuro) */
[data-tema="escuro"] .fantasma:is(:hover, :focus-visible) { background: var(--bruma-clara); border-color: rgba(245,248,251,.2); }
[data-tema="escuro"] .translucido:is(:hover, :focus-visible) { background: rgba(245,248,251,.12); }
[data-tema="escuro"] .redondo:hover { background: rgba(245,248,251,.12); }
[data-tema="escuro"] .redondo .ponto { box-shadow: 0 0 0 2px var(--nevoa); }

/* item ativo: Lima com texto Tinta */
[data-tema="escuro"] .chip.ativo, [data-tema="escuro"] .abas .chip[aria-selected=true], [data-tema="escuro"] .paginacao button.atual { background: var(--lima); color: var(--tinta-fixa); }
[data-tema="escuro"] .chip .fechar { background: rgba(245,248,251,.1); }

/* pílulas e pontos */
[data-tema="escuro"] .pilula.arquivado { background: rgba(245,248,251,.07); }
[data-tema="escuro"] .pilula.aberto { color: var(--acento); } /* o fundo aberto já é Ardósia */
[data-tema="escuro"] .contagem { background: var(--ardosia); color: var(--bruma); }
[data-tema="escuro"] .ponto-s { background-image: linear-gradient(rgba(245,248,251,.4), rgba(245,248,251,.4)); box-shadow: inset 0 0 0 1px rgba(245,248,251,.25); }
/* balões (dica, situação): Ardósia, que se destaca do cartão */
[data-tema="escuro"] .com-dica::after, [data-tema="escuro"] .ponto-s::after { background: var(--ardosia); box-shadow: 0 0 0 1px rgba(245,248,251,.1), var(--sombra-pop); }

/* cartões: o destaque Ardósia ganha fio claro e luz no topo para não sumir no painel */
[data-tema="escuro"] .cartao.destaque { background: radial-gradient(120% 80% at 20% -20%, color-mix(in srgb, var(--ardosia) 70%, var(--aco)) 0%, rgba(37,65,87,0) 60%), var(--ardosia); box-shadow: inset 0 0 0 1px rgba(211,224,234,.14), var(--sombra-cartao); }
[data-tema="escuro"] .bloco.escuro { background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--ardosia) 75%, var(--aco)) 0%, rgba(37,65,87,0) 70%), var(--ardosia); box-shadow: inset 0 0 0 1px rgba(211,224,234,.14); }
[data-tema="escuro"] .cartao.vidro-denso { box-shadow: 0 0 0 1px rgba(245,248,251,.06), var(--sombra-cartao); }
[data-tema="escuro"] .mancha { background: var(--ardosia); }
[data-tema="escuro"] .atencao { background: linear-gradient(120deg, #101820 0%, #254157 45%, #14202B 100%); }
[data-tema="escuro"] .atencao::before { background: var(--ardosia); opacity: .9; }
[data-tema="escuro"] .atencao::after { background: color-mix(in srgb, var(--ardosia) 70%, var(--aco)); opacity: .5; }
[data-tema="escuro"] .aviso { background: rgba(26,44,58,.88); }
[data-tema="escuro"] .atencao .estrela, [data-tema="escuro"] :is(.cartao.destaque, .bloco.escuro) .estrela { background: var(--lima); }

/* campos: borda de foco Aço; brilho em Ardósia/Aço com um fio de Lima */
[data-tema="escuro"] .campo input:focus, [data-tema="escuro"] .campo textarea:focus, [data-tema="escuro"] textarea.campo-texto:focus { border-color: var(--aco); }
[data-tema="escuro"] .brilho::before, [data-tema="escuro"] .busca::before { background: conic-gradient(from var(--ds-ang), var(--ardosia), var(--aco), var(--ardosia), rgba(227,233,53,.75), var(--ardosia)); }
[data-tema="escuro"] .busca input:focus { box-shadow: inset 0 0 0 1px var(--linha-forte); }
[data-tema="escuro"] input[type=checkbox], [data-tema="escuro"] input[type=radio] { border-color: rgba(245,248,251,.3); }
[data-tema="escuro"] input[type=checkbox]:hover, [data-tema="escuro"] input[type=radio]:hover { border-color: rgba(245,248,251,.55); }
[data-tema="escuro"] input[type=checkbox]:checked, [data-tema="escuro"] input[type=radio]:checked { border-color: var(--marcado); }
[data-tema="escuro"] input[type=checkbox]:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101820' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
[data-tema="escuro"] input[type=checkbox]:indeterminate { border-color: var(--marcado); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101820' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E"); }
/* chave líquida: trilho claro em alfa; ligada = Lima com a gota Tinta */
[data-tema="escuro"] .chave .trilho { background: rgba(245,248,251,.16); }
[data-tema="escuro"] .chave input:checked ~ .trilho { background: var(--marcado); }
[data-tema="escuro"] .chave .gota::before, [data-tema="escuro"] .chave .gota::after { background: var(--tinta); transition-property: transform, background-color; }
[data-tema="escuro"] .chave input:checked ~ .gota::before, [data-tema="escuro"] .chave input:checked ~ .gota::after, [data-tema="escuro"] .chave input:checked ~ .trilho:last-child::after { background: var(--tinta-fixa); }
[data-tema="escuro"] .chave .trilho:last-child::after { background: var(--tinta); }
[data-tema="escuro"] input[type=range].deslizador::-webkit-slider-thumb { border-color: var(--tinta-fixa); background: var(--lima); }
[data-tema="escuro"] .zona { background: rgba(211,224,234,.04); border-color: rgba(211,224,234,.22); }
[data-tema="escuro"] .zona:hover, [data-tema="escuro"] .zona.sobre { background: rgba(211,224,234,.08); }
/* gráfico: barra comum em Ardósia clareada, a alta em Bruma (o contraste entre elas continua) */
[data-tema="escuro"] .grafico-barras .barra { background: color-mix(in srgb, var(--ardosia) 60%, var(--aco)); }
[data-tema="escuro"] .grafico-barras .barra.alta { background: var(--acento); }
[data-tema="escuro"] tbody tr:hover { background: rgba(211,224,234,.05); }

/* vidros dos menus, do calendário e da janela */
[data-tema="escuro"] .popover, [data-tema="escuro"] .calendario, [data-tema="escuro"] .janela { background: var(--vidro-denso); box-shadow: inset 0 0 0 1px rgba(245,248,251,.08), var(--sombra-pop); }
[data-tema="escuro"] .janela::backdrop { background: rgba(8,12,16,.6); }

/* ============================== FOCO PELO TECLADO (28/10/2026) ============
   Todo controle mostra o anel --sombra-foco no :focus-visible. Estes controles
   têm box-shadow próprio, que apagava o anel da regra geral (:focus-visible). */
.botao:focus-visible { outline: 0; box-shadow: inset 0 0 0 1px var(--b-anel), var(--sombra-foco); }
.redondo:focus-visible, .translucido:focus-visible { outline: 0; box-shadow: var(--borda-interna), var(--sombra-foco); }
:is(.cartao.destaque, .escuro, .bloco.escuro) .translucido:focus-visible { box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), var(--sombra-foco); }
.alternar button:focus-visible { outline: 0; box-shadow: var(--sombra-foco); }
.alternar button.ativo:focus-visible { box-shadow: var(--sombra-ativo), var(--sombra-foco); }

/* Caixa semântica (28/10/2026, regra da Isabela): verde .sem-ok, vermelha .sem-alerta,
   âmbar .sem-espera (o .cuidado já é âmbar). A caixa declara --sem (cor forte) e TUDO o que entra
   nela segue essa cor: chip, tag, pílula neutra, cartão interno (.interno) e rótulo do cartão interno.
   Nunca chip cinza, cartão branco ou cartão Névoa dentro de caixa semântica. Caixa nova: só a classe. */
.sem-ok { --sem: var(--positivo); --sem-caixa: var(--st-ok); }
.sem-alerta { --sem: var(--negativo); --sem-caixa: var(--st-alerta); }
.sem-espera, .cuidado { --sem: var(--aviso-texto); --sem-caixa: var(--st-espera); }
:is(.sem-ok, .sem-alerta, .sem-espera) { background: color-mix(in srgb, var(--sem-caixa) 45%, var(--branco)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sem) 18%, transparent); }
:is(.sem-ok, .sem-alerta, .sem-espera) > .t-rotulo { color: var(--sem); }
:is(.sem-ok, .sem-alerta, .sem-espera, .cuidado) :is(.chip, .tag, .pilula:not(.ok, .alerta, .espera, .aberto)) { background: color-mix(in srgb, var(--sem) 12%, var(--branco)); color: var(--sem); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sem) 22%, transparent); }
:is(.sem-ok, .sem-alerta, .sem-espera, .cuidado) .interno { background: color-mix(in srgb, var(--sem) 7%, var(--branco)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sem) 16%, transparent); }
:is(.sem-ok, .sem-alerta, .sem-espera, .cuidado) .interno .t-rotulo { color: var(--sem); }

/* Citação em destaque (28/10/2026, pedido da Isabela): frase-chave da marca (propósito, manifesto,
   fala de cliente). Aspa grande e clara ao fundo, à esquerda; texto alinhado à esquerda, Sora leve.
   <blockquote class="citacao"><p><strong>Trecho-chave</strong> e o resto da frase.</p></blockquote> */
.citacao { position: relative; isolation: isolate; margin: 0; padding: 34px 0 6px 6px; }
.citacao::before { content: "\201C"; position: absolute; z-index: -1; left: -8px; top: -34px; font: 450 150px/1 var(--font-display); color: var(--bruma); opacity: .4; pointer-events: none; }
.citacao p { margin: 0; max-width: 62ch; font: var(--peso-subtitulo) var(--t-titulo-3)/1.3 var(--font-display); letter-spacing: -.035em; color: var(--tinta); text-wrap: pretty; }
.citacao :is(strong, .p-chave) { font-weight: var(--peso-titulo); color: var(--tinta); }
.citacao footer { margin-top: 12px; font-size: var(--t-texto-p); color: var(--tinta-46); }
[data-tema="escuro"] .citacao::before { color: var(--bruma-profunda); }

/* ===== Componentes vindos da Plataforma de Marca (29/10/2026) ===== */

/* "!" nota da seção: explicação que vale só para uma seção (a da página inteira é o "?").
   <details class="nota-secao"><summary aria-label="Sobre …"><svg class="i"><use href="#i-nota"/></svg></summary><div><p>…</p></div></details>
   Fecha ao clicar fora ou com Esc (comum.js). Ao lado do título: dentro de .faixa fica centrado na altura dele. */
.nota-secao { position: relative; display: inline-block; }
.faixa:has(> .nota-secao) { align-items: center; }
.faixa > .nota-secao { align-self: center; }
.nota-secao > summary { list-style: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--translucido); box-shadow: var(--borda-interna); color: var(--tinta-56); cursor: pointer; transition: background-color .15s var(--ease), color .15s var(--ease); }
.nota-secao > summary::-webkit-details-marker { display: none; }
.nota-secao > summary svg.i { width: 15px; height: 15px; }
.nota-secao > summary:hover, .nota-secao[open] > summary { background: var(--branco); color: var(--tinta); }
.nota-secao > summary:focus-visible { outline: 0; box-shadow: var(--sombra-foco); }
.nota-secao > div { position: absolute; z-index: 40; top: calc(100% + 8px); left: 0; width: min(380px, 80vw); display: grid; gap: 10px; padding: 16px 18px; border-radius: var(--r-interno); background: var(--vidro); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: 0 0 0 1px var(--vidro-borda), var(--sombra-pop); font-size: var(--t-texto-m); line-height: 1.6; color: var(--tinta-82); }
.nota-secao > div p { margin: 0; }

/* Baixar em duas cores: o botão "Baixar" abre "Em preto" (tinta) e "Em branco".
   <details class="baixar"><summary class="fantasma"><svg class="i"><use href="#i-baixar"/></svg>Baixar</summary>
   <div class="baixar-menu" role="menu"><a role="menuitem" href="x.svg" download><span class="baixar-cor tinta"></span>Em preto<small>tinta #101820</small></a>…</div></details> */
.baixar { position: relative; display: inline-block; }
.baixar > summary { list-style: none; }
.baixar > summary::-webkit-details-marker { display: none; }
.baixar-menu { position: absolute; z-index: 40; right: 0; bottom: calc(100% + 6px); min-width: 190px; display: grid; gap: 2px; padding: 6px; border-radius: var(--r-interno); background: var(--vidro); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: 0 0 0 1px var(--vidro-borda), var(--sombra-pop); }
.baixar-menu a { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; column-gap: 10px; padding: 8px 10px; border-radius: 10px; font: 500 12.5px/1.3 var(--font-body); color: var(--tinta); text-decoration: none; }
.baixar-menu a small { grid-column: 2; font: 400 11px/1.3 var(--font-mono); color: var(--tinta-46); }
.baixar-menu a:hover, .baixar-menu a:focus-visible { background: var(--hover); outline: 0; }
.baixar-cor { grid-row: span 2; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--linha-forte); }
.baixar-cor.tinta { background: #101820; } .baixar-cor.branco { background: #FFFFFF; }

/* Copiar ao clicar: [data-copiar="texto"] copia o texto; [data-copiar] vazio copia o próprio texto do
   elemento; data-aviso troca a mensagem do aviso (comum.js + avisar()). Cursor de cópia. */
[data-copiar] { cursor: copy; }

/* Chip com dica: chip Bruma que mostra uma explicação ao passar o mouse ou focar (junte com .com-dica).
   <span class="chip-dica com-dica" tabindex="0" data-dica="…">palavra<span class="n">*</span></span> */
.chip-dica { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 9px 0 11px; border-radius: var(--r-pilula); background: var(--bruma); font-size: var(--t-texto-p); font-weight: 500; color: var(--tinta-fixa); text-decoration: none; cursor: help; transition: background-color .15s var(--ease); }
.chip-dica:hover { background: var(--bruma-profunda); }
.chip-dica:focus-visible { outline: 0; box-shadow: var(--sombra-foco); }
.chip-dica .n { opacity: .6; }
.chip-dica.com-dica::after { left: 0; right: auto; }

/* Caixas positivas e negativas: lista de pontos lado a lado, cada um numa caixa semântica.
   <ul class="caixas sim"> (verde, ✓) ou <ul class="caixas nao"> (vermelho, ✕); <strong> pode abrir o item. */
ul.caixas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; --sem: var(--positivo); --sem-caixa: var(--st-ok); }
ul.caixas.nao { --sem: var(--negativo); --sem-caixa: var(--st-alerta); }
ul.caixas li { position: relative; padding: 16px 18px 16px 46px; border-radius: var(--r-interno); background: color-mix(in srgb, var(--sem-caixa) 45%, var(--branco)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sem) 18%, transparent); font-size: var(--t-texto-m); line-height: 1.6; color: var(--tinta-82); }
ul.caixas li::before { content: ""; position: absolute; left: 18px; top: 18px; width: 16px; height: 16px; background: var(--sem); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat; }
ul.caixas.nao li::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m15 9-6 6'/%3E%3Cpath d='m9 9 6 6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m15 9-6 6'/%3E%3Cpath d='m9 9 6 6'/%3E%3C/svg%3E"); }
ul.caixas strong { font-weight: var(--peso-destaque); color: var(--tinta); }
@media (max-width: 1280px) { ul.caixas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { ul.caixas { grid-template-columns: minmax(0, 1fr); } }

/* Amostras de cor: pílula com o quadrado da cor e o nome; os valores abrem num balão (hover/foco).
   <ul class="amostras"><li tabindex="0" data-copiar="#101820"><span class="amostra-q" style="background:#101820"></span><span class="amostra-n">Tinta</span>
   <span class="amostra-balao" role="tooltip"><span class="amostra-balao-cor" style="background:#101820"></span><span class="amostra-linha"><b>HEX</b><span>#101820</span></span>…</span></li></ul> */
.amostras { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.amostras li { position: relative; display: flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: var(--r-interno); background: var(--tela); transition: background-color .15s var(--ease); }
.amostras li:hover, .amostras li:focus-visible { background: var(--hover); outline: 0; }
.amostras li:focus-visible { box-shadow: var(--sombra-foco); }
.amostra-q { flex: none; width: 32px; height: 32px; border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--linha); }
.amostra-n { font-size: var(--t-texto-m); font-weight: 500; color: var(--tinta); }
.amostra-balao { position: absolute; z-index: 40; left: 0; top: calc(100% + 8px); width: 280px; display: grid; gap: 8px; padding: 12px; border-radius: var(--r-interno); background: var(--branco); box-shadow: 0 0 0 1px var(--linha), var(--sombra-pop); opacity: 0; translate: 0 -4px; pointer-events: none; transition: opacity .15s var(--ease), translate .15s var(--ease); }
.amostras li:is(:hover, :focus-visible) .amostra-balao { opacity: 1; translate: 0 0; }
.amostra-balao-cor { height: 44px; border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--linha); }
.amostra-linha { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.amostra-linha b { font: 600 var(--t-rotulo)/1.2 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-46); }
.amostra-linha span { font: 500 12px/1.45 var(--font-mono); color: var(--tinta); overflow-wrap: anywhere; user-select: all; }
.amostra-linha .txt { font: 400 var(--t-texto-p)/1.45 var(--font-body); user-select: text; }