/* Tema escuro.
 *
 * Folha separada, e não um bloco no `estilo.css`, por um motivo prático: o
 * tema claro continua sendo o padrão e não pode regredir. Com o escuro
 * isolado aqui, dá para ler num lugar só o que ele muda — e para desligar
 * tudo tirando uma linha do `index.html`.
 *
 * A estratégia é trocar TOKEN, não regra. O sistema já pinta quase tudo com
 * `var(--painel)`, `var(--texto)`, `var(--linha)`: redefinindo esses valores
 * sob `[data-tema="escuro"]`, a maior parte das ~50 telas vira de uma vez.
 * O que não vira são as cores cravadas na mão no CSS (branco em `#fff`,
 * cinzas soltos) — essas estão listadas no fim do arquivo, corrigidas uma a
 * uma, e é por onde este arquivo cresce quando alguém achar uma sobrando.
 *
 * A paleta veio da direção do dono: preto azulado, grafite e cinza escuro
 * dominando, laranja só como ação e identidade. */

:root[data-tema="escuro"] {
  --fundo: #080b10;
  --fundo-alto: #0e141c;
  --painel: #10151d;
  --painel-2: #0d1219;
  --vidro: rgba(16, 21, 29, .72);
  --vidro-forte: rgba(16, 21, 29, .92);

  /* As linhas deixam de ser tinta escura sobre claro e viram luz sobre
     escuro — a mesma borda em `rgba(17,24,39,.09)` simplesmente some aqui. */
  --linha: rgba(255, 255, 255, .08);
  --linha-forte: rgba(255, 255, 255, .14);

  --texto: #f5f7fa;
  --apagado: #9aa4b2;

  /* O laranja é o mesmo da marca: ele já tem contraste de sobra no escuro, e
     mudar o tom faria o sistema parecer outro produto. */
  --destaque: #ff5a1f;
  --destaque-2: #ff6b2c;
  --ok: #22c55e;
  --aviso-cor: #eab308;
  --alerta: #f0564b;

  /* No claro, sombra é cinza suave; no escuro, só o preto profundo cria
     profundidade — sombra clara sobre fundo escuro não existe na natureza. */
  --sombra: 0 12px 40px rgba(0, 0, 0, .34), 0 2px 8px rgba(0, 0, 0, .24);
  --sombra-alta: 0 20px 60px rgba(0, 0, 0, .45);
  --elev-1: 0 1px 2px rgba(0, 0, 0, .3), 0 1px 3px rgba(0, 0, 0, .22);
  --elev-2: var(--sombra);
  --elev-3: var(--sombra-alta);

  /* A seta dos seletores é um SVG embutido com a cor dentro do próprio
     desenho: sem redesenhar aqui, ela continuaria cinza-escuro, invisível
     sobre a pastilha escura. */
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa4b2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");

  color-scheme: dark;
}

/* ---------------- o que os tokens não alcançam ----------------

   Daqui para baixo é correção de cor cravada na mão. Cada bloco diz o que
   estava escrito no CSS claro e por que ele não sobrevive à inversão. */

/* Superfícies brancas. São as que mais aparecem: cartão, cabeçalho de
   tabela, pastilha de seletor, janela. Todas estavam em `#fff` literal. */
:root[data-tema="escuro"] .cartao,
:root[data-tema="escuro"] .janela,
:root[data-tema="escuro"] dialog,
:root[data-tema="escuro"] .sel .lista,
:root[data-tema="escuro"] thead th,
:root[data-tema="escuro"] .kpi,
:root[data-tema="escuro"] .tabela-limpa thead th {
  background: var(--painel);
  color: var(--texto);
  border-color: var(--linha);
}

/* A barra lateral tinha fundo próprio, mais claro que o conteúdo. No escuro
   a relação se inverte: ela fica mais funda, e o conteúdo flutua sobre ela. */
:root[data-tema="escuro"] .lateral {
  background: #090c11;
  border-right: 1px solid rgba(255, 255, 255, .06);
}
:root[data-tema="escuro"] .lateral .menu button,
:root[data-tema="escuro"] .lateral a { color: var(--apagado); }
:root[data-tema="escuro"] .lateral .menu button:hover { background: rgba(255, 255, 255, .05); }
:root[data-tema="escuro"] .lateral .menu button.ativo,
:root[data-tema="escuro"] .lateral .menu button[aria-current="page"] {
  background: rgba(255, 90, 31, .16);
  color: #fff;
}

/* Campos. No claro eles eram brancos com borda cinza; no escuro, poço
   escuro com borda de luz — campo branco aqui vira um holofote na tela. */
:root[data-tema="escuro"] input,
:root[data-tema="escuro"] select,
:root[data-tema="escuro"] textarea,
:root[data-tema="escuro"] .sel button {
  background: var(--fundo-alto);
  color: var(--texto);
  border-color: var(--linha);
}
:root[data-tema="escuro"] input::placeholder,
:root[data-tema="escuro"] textarea::placeholder { color: #667085; }
:root[data-tema="escuro"] input:focus,
:root[data-tema="escuro"] select:focus,
:root[data-tema="escuro"] textarea:focus { border-color: rgba(255, 90, 31, .45); }

/* Botões secundários: o `.discreto` nascia branco. */
:root[data-tema="escuro"] button.discreto {
  background: var(--fundo-alto);
  color: #dce1e8;
  border-color: var(--linha);
}
:root[data-tema="escuro"] button.discreto:hover {
  background: #151b24;
  border-color: var(--linha-forte);
}

/* Listas e linhas de tabela que usavam branco ou cinza clarinho no hover. */
:root[data-tema="escuro"] tbody tr:hover,
:root[data-tema="escuro"] .clicavel:hover { background: rgba(255, 255, 255, .04); }

/* Os selos de estado traziam fundo claro com texto escuro. Invertendo só o
   fundo, o texto sumiria; cada um ganha o par certo. */
:root[data-tema="escuro"] .selo { background: rgba(255, 255, 255, .07); color: #c9d1db; }
:root[data-tema="escuro"] .selo.ativo { background: rgba(34, 197, 94, .16); color: #6ee7a8; }
:root[data-tema="escuro"] .selo.pausado { background: rgba(234, 179, 8, .16); color: #facc48; }
:root[data-tema="escuro"] .selo.encerrado,
:root[data-tema="escuro"] .selo.critico { background: rgba(240, 86, 75, .16); color: #ff9f98; }
:root[data-tema="escuro"] .selo.alerta { background: rgba(255, 122, 26, .18); color: #ffb68a; }

/* O estado vazio desenhado tinha fundo claro para "afundar" na tela; no
   escuro ele precisa do contrário, subir um degrau. */
:root[data-tema="escuro"] .vazio-desenhado {
  background: rgba(255, 255, 255, .03);
  border-color: var(--linha);
}

/* O painel escuro do Financeiro já era escuro no tema claro. Aqui ele perde
   o contraste contra o fundo, então ganha borda e um brilho laranja de
   canto — é o destaque da tela, e precisa continuar parecendo um. */
:root[data-tema="escuro"] .fin-heroi {
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(255, 90, 31, .16) 0%, transparent 55%),
    radial-gradient(80% 120% at 0% 100%, rgba(255, 90, 31, .10) 0%, transparent 50%),
    linear-gradient(135deg, #111720 0%, #0b0f15 100%);
  border: 1px solid rgba(255, 255, 255, .10);
}
/* `:not(.grande)` porque a acao principal e laranja nos dois temas — sem o
   corte, a regra generica apagava justamente o botao que tem de saltar. */
:root[data-tema="escuro"] .fin-redondo-bolha:not(.grande) {
  background: #151c25;
  border-color: rgba(255, 255, 255, .12);
}

/* O fundo do sistema e uma arte clara (`fundo-saas.jpg`) sob um veu branco
   de 55%. No escuro o veu precisa inverter de lado: a mesma arte continua
   dando textura, mas por baixo de um veu quase preto. Sem isto, todo o
   conteudo ficava sobre uma mancha clara e o texto branco sumia. */
:root[data-tema="escuro"] body.com-lateral {
  background-image:
    linear-gradient(rgba(8, 11, 16, .93), rgba(8, 11, 16, .96)),
    url("fundo-saas.jpg");
}

/* As manchas de luz ambiente eram quentes e fracas para o claro. No escuro
   elas sao o unico relevo do fundo, entao ganham um pouco mais de presenca. */
:root[data-tema="escuro"] body::before {
  background:
    radial-gradient(760px 420px at 12% -8%, rgba(255, 90, 31, .10), transparent 70%),
    radial-gradient(900px 520px at 92% 0%, rgba(60, 110, 255, .07), transparent 70%);
}

/* A logo é um PNG claro com fundo transparente: no escuro ela some. O filtro
   a devolve sem precisar de um segundo arquivo. */
:root[data-tema="escuro"] .lateral img[src*="logo"] {
  filter: brightness(0) invert(1) opacity(.92);
}

/* Gráficos: a grade era cinza-claro e desaparece no escuro. */
:root[data-tema="escuro"] .grade-fundo line,
:root[data-tema="escuro"] .eixo line { stroke: rgba(255, 255, 255, .07); }
:root[data-tema="escuro"] .eixo text { fill: var(--apagado); }

/* ---------------- a segunda varredura ----------------

   Achados varrendo Clientes, Produção e Equipe com o computed style: são
   superfícies que usavam BRANCO TRANSLÚCIDO. Elas não aparecem procurando
   por `#fff` no CSS, e sobre o fundo escuro viram cinza leitoso — o efeito
   mais feio de um dark mal feito. */

/* A barra de filtros e o cabeçalho de tabela: véu branco sobre o fundo. */
:root[data-tema="escuro"] .caixa-filtros,
:root[data-tema="escuro"] th {
  background: rgba(255, 255, 255, .04);
  color: var(--apagado);
}

/* As colunas do Kanban da Produção, pelo mesmo motivo. */
:root[data-tema="escuro"] .prod-coluna,
:root[data-tema="escuro"] .kanban-coluna {
  background: rgba(255, 255, 255, .03);
  border-color: var(--linha);
}

/* A pastilha de marcação ("Cadastro incompleto") era branco sólido. */
:root[data-tema="escuro"] label.caixinha {
  background: var(--fundo-alto);
  border-color: var(--linha);
  color: var(--texto);
}

/* A lista aberta de um <select> nativo é desenhada pelo sistema operacional,
   não pelo CSS da página: sem pintar a `option`, ela abre branca por cima de
   tudo. `color-scheme: dark` no :root resolve na maioria dos navegadores, e
   isto cobre o resto. */
:root[data-tema="escuro"] option {
  background: #10151d;
  color: var(--texto);
}

/* Dois seletores precisaram de reforço porque os originais são mais
   específicos que `th` e `option` sozinhos — `#lista th` tem um id, e
   `.caixa-filtros select option` tem duas classes. Especificidade não se
   vence com boa intenção. */
:root[data-tema="escuro"] #lista th {
  background: rgba(255, 255, 255, .04);
  color: var(--apagado);
}
:root[data-tema="escuro"] .caixa-filtros select option {
  background: #10151d;
  color: var(--texto);
}

/* A chave "Já recebeu?": no claro, o estado ativo salta porque fica branco
   sobre cinza. No escuro `--painel` e `--fundo-alto` são vizinhos demais
   (#10151d e #0e141c) e a diferença some — então o ativo ganha o laranja de
   fundo, que é a cor que o sistema já usa para "selecionado". */
:root[data-tema="escuro"] .venda-chave button.ativo {
  background: rgba(255, 90, 31, .16);
  box-shadow: none;
}

/* ---------- calendario ----------
 *
 * O fundo das celulas virou `var(--painel)` no tema.css e acerta sozinho.
 * O que sobra aqui sao os ESTADOS, que no claro eram quase-brancos (#fbfbfc,
 * #fcfcfd, #fffbfa) e no escuro precisam ser quase-pretos: um cinza claro de
 * hover sobre fundo escuro vira um bloco branco piscando. */
:root[data-tema="escuro"] .calendario .dia:hover { background: rgba(255, 255, 255, .04); }
:root[data-tema="escuro"] .calendario .dia.fora { background: rgba(255, 255, 255, .02); }
:root[data-tema="escuro"] .calendario .dia.hoje { background: rgba(255, 90, 31, .08); }
:root[data-tema="escuro"] .calendario .dia.feriado { background: rgba(224, 52, 43, .09); }
:root[data-tema="escuro"] .calendario .dia.feriado:hover { background: rgba(224, 52, 43, .14); }
:root[data-tema="escuro"] .pastilha:hover { background: rgba(255, 255, 255, .07); }
:root[data-tema="escuro"] .dia-mais { border-color: var(--linha-forte); color: var(--apagado); }

/* As secoes da Pre-producao: o cartao de ideia e a pilha seguem o painel,
 * mas o `--painel-2` do cartao fica perto demais do fundo da pilha no
 * escuro — sem a borda, as pecas somem umas nas outras. */
:root[data-tema="escuro"] .pre-cartao {
  background: rgba(255, 255, 255, .035);
  border-color: var(--linha-forte);
}
:root[data-tema="escuro"] .pre-pilha .contador { background: rgba(255, 255, 255, .08); color: var(--texto); }

/* O numero do dia: no claro o apagado basta, no escuro o mes que se esta
 * olhando precisa de mais peso que a moldura ao redor. */
:root[data-tema="escuro"] .calendario .numero { color: var(--texto); }

/* ---------- superficies de vidro ----------
 *
 * Varios componentes usam branco translucido para parecer vidro sobre um
 * fundo claro: `rgba(255,255,255,.55)` e por ai. Sobre fundo escuro esse
 * mesmo branco nao fica discreto — fica uma capsula CINZA no meio da tela,
 * que era exatamente o que estava estranho no seletor de periodo do Inicio.
 *
 * No escuro o vidro inverte: em vez de clarear o que esta atras, escurece,
 * com um fio de luz na borda. */
:root[data-tema="escuro"] .cabeca-inicio .modos,
:root[data-tema="escuro"] .botao-calendario {
  background: rgba(255, 255, 255, .05);
  border-color: var(--linha-forte);
  box-shadow: none;
}
:root[data-tema="escuro"] .cabeca-inicio .modo:hover:not(.ativo),
:root[data-tema="escuro"] .botao-calendario:hover { background: rgba(255, 255, 255, .1); }
:root[data-tema="escuro"] .cabeca-inicio .modo.ativo {
  background: rgba(255, 90, 31, .16);
  color: #ffb68a;
  box-shadow: inset 0 0 0 1px rgba(255, 90, 31, .32);
}
:root[data-tema="escuro"] .botao-calendario.ativo {
  background: rgba(255, 90, 31, .16);
  color: #ffb68a;
  border-color: rgba(255, 90, 31, .38);
}
:root[data-tema="escuro"] .barra-cima { background: rgba(16, 21, 29, .72); }
:root[data-tema="escuro"] body.com-lateral aside.lateral {
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .055));
  border-right-color: var(--linha);
}
:root[data-tema="escuro"] .calendario-periodo { background: rgba(16, 21, 29, .92); }

/* ---------- o fundo da marca ----------
 *
 * A arte do 418 atras do painel inteiro, presa na viewport (`fixed`) para
 * nao rolar junto com o conteudo: fundo que rola vira textura em movimento e
 * cansa em tela de trabalho, que e onde se passa o dia.
 *
 * Fica em `body::before`, que ja existia para os halos de cor e ja esta
 * fora do fluxo e sem captura de clique. A camada escura por cima nao e
 * enfeite: sem ela o arco laranja passa por tras dos cartoes e briga com o
 * texto. O `--fundo` por baixo garante preto solido se a imagem nao chegar.
 *
 * 43 KB em WebP, reencodado do PNG de 1,5 MB da marca — fundo e o que menos
 * precisa de precisao de pixel, e esse peso aparece no celular. */
:root[data-tema="escuro"] body::before {
  background:
    linear-gradient(rgba(8, 11, 16, .62), rgba(8, 11, 16, .78)),
    url("fundo-painel.webp") center / cover no-repeat fixed,
    var(--fundo);
}

/* ---------- a escala das series, no escuro ----------
 *
 * A escala de `estilo.css` foi medida contra branco. Sobre preto, o passo
 * mais fechado (--serie-5, ferrugem) praticamente desaparece, e o ambar
 * claro grita. Aqui ela desloca: os tons sobem de luminosidade e o intervalo
 * entre eles abre, para duas series vizinhas continuarem distinguiveis numa
 * barra de 8px de largura. */
:root[data-tema="escuro"] {
  --serie-1: #ffd4a3;
  --serie-2: #ffa35c;
  --serie-3: #ff6b2c;
  --serie-4: #e04f14;
  --serie-5: #a8400f;
  --serie-neutra: #7b8694;
}

/* ---------- os graficos, mais leves ----------
 *
 * A barra era um bloco solido de cor: com cinco tons de laranja numa tela
 * preta, cinco blocos cheios viram cinco manchas que disputam atencao com o
 * numero ao lado — que e o que a pessoa veio ler.
 *
 * Aqui a barra vira vidro: o corpo translucido deixa o fundo aparecer e o
 * TOPO fica solido. O olho le a altura pela linha de cima, que e onde a
 * informacao esta; o resto do retangulo e so preenchimento, e nao precisa
 * gritar. O `currentColor` faz as duas partes seguirem a cor da serie sem
 * repetir a regra para cada tom.
 *
 * A grade vira tracejada e mais fraca: linha continua e cheia demais para o
 * papel dela, que e dar referencia de altura sem competir com o dado. */
:root[data-tema="escuro"] .grafico .barra {
  background: transparent;
  border-radius: 3px 3px 1px 1px;
  position: relative;
}
:root[data-tema="escuro"] .grafico .barra::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  /* Degrade, e nao opacidade plana.
     *
     * Plana em 22% deixava as duas series cinza-amarronzadas e matava a
     * distincao de tom que a paleta acabou de criar; subir a opacidade
     * devolvia o bloco solido que se queria evitar. O degrade resolve os
     * dois: a cor tem forca em cima, que e onde o olho le a altura, e
     * dissolve na base, que e so preenchimento. */
  background: linear-gradient(to bottom, currentColor, transparent);
  opacity: .62;
}
/* O topo solido: 2px que marcam a altura exata. */
:root[data-tema="escuro"] .grafico .barra::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2.5px;
  border-radius: 2px;
  background: currentColor;
}
/* A cor da serie passa a viver em `color`, para `currentColor` alcancar as
   duas camadas. O `background` fica para quem nao estiver no escuro. */
:root[data-tema="escuro"] .grafico .barra.laranja { color: var(--serie-3); }
:root[data-tema="escuro"] .grafico .barra.verde { color: var(--serie-1); }
:root[data-tema="escuro"] .grafico .barra.azul { color: var(--serie-2); }
:root[data-tema="escuro"] .grafico .barra.roxo { color: var(--serie-4); }

/* Barra de valor zero: so o tracinho do topo, sem corpo. */
:root[data-tema="escuro"] .grafico .barra.vazia::before { opacity: 0; }
:root[data-tema="escuro"] .grafico .barra.vazia::after { opacity: .5; }

:root[data-tema="escuro"] .grafico .coluna:hover .barra::before { opacity: .85; }
:root[data-tema="escuro"] .grafico .coluna:hover .barra { filter: none; }

/* A grade tracejada. `background-image` em vez de `border-top: dashed`
   porque o tracejado da borda nao deixa escolher o tamanho do traco, e o
   padrao do navegador e grosso demais para uma linha de 1px. */
:root[data-tema="escuro"] .linhas-guia i {
  height: 1px;
  background: repeating-linear-gradient(
    to right,
    rgba(255, 255, 255, .16) 0 4px,
    transparent 4px 10px
  );
  opacity: 1;
}

/* A rosca das etapas segue o mesmo principio: traco fino, nao anel grosso. */
:root[data-tema="escuro"] .rosca circle { stroke-width: 7; }


/* ---------- o cursor ----------
 *
 * Seta propria, em SVG embutido — sem requisicao e sem arquivo para perder.
 *
 * O SVG vai PERCENT-ENCODED. A primeira versao foi escrita com as aspas
 * cruas dentro do `url(...)` e o navegador recusava a imagem em silencio:
 * o cursor caia no do sistema e nada no console dizia por que. Cursor
 * quebrado nao avisa — so testando se a imagem decodifica da para saber.
 *
 * Corpo claro com contorno escuro de proposito: a seta precisa se ver tanto
 * sobre o preto do painel quanto sobre o laranja de um botao. Uma seta
 * laranja sumiria no botao, que e justamente onde ela mais importa.
 *
 * A silhueta continua sendo uma data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M3 2.2 17.4 12.6 10.9 13.4 14.1 20.2 11.4 21.4 8.2 14.6 3.6 19Z' fill='%23f5f7fa' stroke='%230a0d12' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E nos dois estados; o clicavel so ganha
 * um ponto laranja na cauda. Trocar a forma (por uma mao, por um circulo)
 * faria a pessoa perder a referencia de QUAL pixel recebe o clique — o
 * cursor e uma mira antes de ser enfeite.
 *
 * O `, default` e o `, pointer` no fim nao sao decoracao: se o navegador
 * recusar a imagem, o cursor do sistema assume em vez de sumir.
 *
 * Campo de texto, redimensionar e arrastar ficam com o cursor do sistema:
 * ali a forma COMUNICA (onde escrever, o que esticar), e trocar por uma
 * seta bonita apagaria a informacao. */
:root[data-tema="escuro"] body,
:root[data-tema="escuro"] .lateral {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M3 2.2 17.4 12.6 10.9 13.4 14.1 20.2 11.4 21.4 8.2 14.6 3.6 19Z' fill='%23f5f7fa' stroke='%230a0d12' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 3 2, default;
}
:root[data-tema="escuro"] a,
:root[data-tema="escuro"] button,
:root[data-tema="escuro"] select,
:root[data-tema="escuro"] summary,
:root[data-tema="escuro"] [role="button"],
:root[data-tema="escuro"] .clicavel,
:root[data-tema="escuro"] .grafico .coluna {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Cpath d='M3 2.2 17.4 12.6 10.9 13.4 14.1 20.2 11.4 21.4 8.2 14.6 3.6 19Z' fill='%23f5f7fa' stroke='%230a0d12' stroke-width='1.4' stroke-linejoin='round'/%3E%3Ccircle cx='20' cy='20' r='4.2' fill='%23ff5a1f' stroke='%230a0d12' stroke-width='1.2'/%3E%3C/svg%3E") 3 2, pointer;
}
:root[data-tema="escuro"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
:root[data-tema="escuro"] textarea {
  cursor: text;
}
:root[data-tema="escuro"] button:disabled,
:root[data-tema="escuro"] [disabled] { cursor: not-allowed; }

/* ---------- a barra em movimento sob o cursor ----------
 *
 * Mora AQUI, e nao em tema.css, por ordem de carga: o corpo da barra e
 * definido em `:root[data-tema="escuro"] ... ::before`, que tem a mesma
 * especificidade do seletor de hover. Empate resolve pela ordem do arquivo,
 * e o escuro carrega por ultimo — a regra escrita la era sobrescrita e o
 * brilho nunca aparecia. O que se via mexendo era o proprio corpo deslizando.
 *
 * O salto de 4px e um gesto unico: acontece e acaba. Este brilho percorre a
 * barra de baixo para cima sem parar, entao a coluna sob o cursor fica VIVA,
 * nao so deslocada. */
@keyframes brilho-subindo {
  /* Dois valores por passo porque a barra tem duas camadas de fundo, e
     animar `background-position` move todas de uma vez. A primeira fica
     parada em `0 0`: senao o corpo desliza junto e a barra parece esvaziar. */
  from { background-position: 0 0, 0 120%; }
  to { background-position: 0 0, 0 -40%; }
}

:root[data-tema="escuro"] .grafico .coluna:hover .barra::before {
  background-image:
    linear-gradient(to bottom, currentColor, transparent),
    linear-gradient(to top, transparent 0%, rgba(255, 255, 255, .5) 45%, transparent 90%);
  background-size: 100% 100%, 100% 55%;
  background-repeat: no-repeat;
  animation: brilho-subindo 1.4s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  :root[data-tema="escuro"] .grafico .coluna:hover .barra::before { animation: none; }
}

/* ---------- a rosca como anel de luz ----------
 *
 * Referencia do dono: um anel de luz difusa, com as cores correndo por
 * dentro — nao um traco solido com um brilho passando.
 *
 * Duas camadas de degrade conico, recortadas em anel por mascara e
 * desfocadas, girando em sentidos e velocidades DIFERENTES (7s e 11s ao
 * contrario). Como os periodos nao batem, as cores nunca repetem o mesmo
 * desenho: e isso que da o efeito furta-cor de bolha, em vez de uma roda
 * girando. A segunda camada soma luz (`screen`) por cima da primeira.
 *
 * Fica na paleta laranja e preto: ambar, laranja e ferrugem no lugar do
 * rosa e azul da referencia.
 *
 * Os arcos de DADO continuam no SVG, agora como um fio fino por cima da luz:
 * o anel e enfeite, a proporcao das etapas e informacao, e ela nao pode
 * girar. */
:root[data-tema="escuro"] .rosca::before,
:root[data-tema="escuro"] .rosca::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 15px), #000 calc(100% - 11px), #000 calc(100% - 3px), transparent 100%);
  mask: radial-gradient(farthest-side, transparent calc(100% - 15px), #000 calc(100% - 11px), #000 calc(100% - 3px), transparent 100%);
}
:root[data-tema="escuro"] .rosca::before {
  background: conic-gradient(
    from 0deg,
    #ffd4a3, #ff6b2c 18%, #a8400f 34%, rgba(168, 64, 15, .15) 46%,
    #e04f14 62%, #ffa35c 80%, #ffd4a3
  );
  filter: blur(4px);
  animation: girar-rosca 7s linear infinite, respirar-rosca 3.2s ease-in-out infinite;
}
:root[data-tema="escuro"] .rosca::after {
  background: conic-gradient(
    from 140deg,
    transparent, rgba(255, 146, 72, .9) 18%, transparent 38%,
    rgba(255, 212, 163, .85) 62%, transparent 82%
  );
  filter: blur(9px);
  mix-blend-mode: screen;
  animation: girar-rosca 11s linear infinite reverse;
}
@keyframes respirar-rosca {
  50% { opacity: .72; }
}

/* O halo de fora: a luz vaza um pouco do anel, como na referencia. */
:root[data-tema="escuro"] .rosca {
  border-radius: 50%;
  box-shadow: 0 0 26px -6px rgba(255, 107, 44, .45), inset 0 0 22px -8px rgba(255, 146, 72, .35);
}

/* O SVG fica por cima da luz e so os arcos de dado sobram, finos. O trilho e
   o brilho que corria antes saem: a luz agora e o anel. */
:root[data-tema="escuro"] .rosca svg { position: relative; z-index: 1; }
:root[data-tema="escuro"] .rosca .trilho,
:root[data-tema="escuro"] .rosca .giro { display: none; }
:root[data-tema="escuro"] .rosca .arco { stroke-width: 2.5; opacity: .9; }
:root[data-tema="escuro"] .rosca .miolo { z-index: 2; }

/* Sob o cursor a luz acelera. */
:root[data-tema="escuro"] .rosca:hover::before { animation-duration: 3s, 3.2s; }
:root[data-tema="escuro"] .rosca:hover::after { animation-duration: 5s; }

@media (prefers-reduced-motion: reduce) {
  :root[data-tema="escuro"] .rosca::before,
  :root[data-tema="escuro"] .rosca::after { animation: none; }
}

/* ---------- a mesma pegada do anel de luz ----------
 *
 * Pedido do dono depois do anel: nada de traco solido, nem no anel nem nas
 * barras. Tudo e luz.
 *
 * No anel sai o fio de dado. Na lista ao lado ficam os numeros de cada
 * etapa, que sao a leitura exata; o anel passa a ser so presenca.
 *
 * Nas barras sai o topo solido. Entra a barra como luz: degrade que parte
 * de um tom claro em cima, passa pela cor da serie e se dissolve na base,
 * com um halo da propria cor em volta. E a luz CORRE por dentro sem parar,
 * devagar, como as cores do anel — sob o cursor ela acelera e clareia.
 *
 * Estas regras ficam no fim de proposito: tem a mesma especificidade das
 * anteriores e precisam vencer pela ordem. */
:root[data-tema="escuro"] .rosca .arco { display: none; }

:root[data-tema="escuro"] .grafico .barra::after { display: none; }

:root[data-tema="escuro"] .grafico .barra {
  box-shadow: 0 0 14px -3px currentColor;
  border-radius: 6px 6px 2px 2px;
}
:root[data-tema="escuro"] .grafico .barra::before,
:root[data-tema="escuro"] .grafico .coluna:hover .barra::before {
  background-image: linear-gradient(
    to bottom,
    rgba(255, 228, 196, .95) 0%,
    currentColor 22%,
    currentColor 48%,
    transparent 100%
  );
  background-size: 100% 180%;
  background-repeat: no-repeat;
  filter: blur(.6px);
  opacity: .8;
  animation: luz-correndo 4.5s ease-in-out infinite alternate;
}
@keyframes luz-correndo {
  from { background-position: 0 0; }
  to { background-position: 0 100%; }
}

:root[data-tema="escuro"] .grafico .coluna:hover .barra::before {
  opacity: 1;
  animation-duration: 1.4s;
}
:root[data-tema="escuro"] .grafico .coluna:hover .barra { box-shadow: 0 0 22px -2px currentColor; }

/* Valor zero: sem corpo, so uma brasa fraca no chao, para o dia continuar
   existindo no grafico. Desfocada, nao um traco. */
:root[data-tema="escuro"] .grafico .barra.vazia { box-shadow: none; }
:root[data-tema="escuro"] .grafico .barra.vazia::before {
  background-image: none;
  background-color: currentColor;
  opacity: .28;
  filter: blur(1px);
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  :root[data-tema="escuro"] .grafico .barra::before { animation: none; }
}

/* O calendario de periodo no escuro: o dia escolhido segue a luz laranja
   dos graficos, e o meio do intervalo e uma faixa translucida. */
:root[data-tema="escuro"] .cal-janela { background: rgba(16, 21, 29, .97); border-color: var(--linha-forte); }
:root[data-tema="escuro"] .cal-atalhos { background: rgba(255, 255, 255, .025); }
:root[data-tema="escuro"] .cal-dia:hover { background: rgba(255, 255, 255, .07); }
:root[data-tema="escuro"] .cal-dia.meio { background: rgba(255, 107, 44, .14); }
:root[data-tema="escuro"] .cal-dia.ponta { background: var(--serie-3); box-shadow: 0 0 12px rgba(255, 107, 44, .45); }
:root[data-tema="escuro"] .cal-seta { border-color: var(--linha-forte); }

/* Os botoes da janela de periodo sem a roupa de botao.
 *
 * O `button` do sistema tem borda e uma sombra laranja embaixo. Dentro da
 * grade isso transformava cada dia em um cartaozinho, e a grade virava um
 * mosaico. Dia e atalho sao alvos de clique, nao botoes de acao: so o
 * Filtrar e o Limpar continuam vestidos de botao. */
:root[data-tema="escuro"] .cal-janela .cal-dia,
:root[data-tema="escuro"] .cal-janela .cal-atalho,
:root[data-tema="escuro"] .cal-janela .cal-seta {
  box-shadow: none;
  border: 0;
  background-image: none;
}
:root[data-tema="escuro"] .cal-janela .cal-dia { background-color: transparent; }
:root[data-tema="escuro"] .cal-janela .cal-dia.meio { background-color: rgba(255, 107, 44, .14); }
:root[data-tema="escuro"] .cal-janela .cal-dia.ponta { background-color: var(--serie-3); color: #fff; box-shadow: 0 0 12px rgba(255, 107, 44, .45); }
:root[data-tema="escuro"] .cal-janela .cal-dia:hover:not(.ponta) { background-color: rgba(255, 255, 255, .07); }
:root[data-tema="escuro"] .cal-janela .cal-atalho { background-color: transparent; }
:root[data-tema="escuro"] .cal-janela .cal-atalho:hover { background-color: rgba(255, 255, 255, .06); }
:root[data-tema="escuro"] .cal-janela .cal-atalho.ativo { background-color: rgba(255, 107, 44, .14); color: var(--serie-2); }
:root[data-tema="escuro"] .cal-janela .cal-seta { background-color: rgba(255, 255, 255, .05); }

/* Opaca de verdade. Translucida, o texto dos cartoes atras atravessava a
   grade e os numeros dos dias brigavam com "Carteira de clientes". */
:root[data-tema="escuro"] .cal-janela {
  background: #10151d;
  isolation: isolate;
}

/* "Outubro de 2026", nao "Outubro De 2026": o `capitalize` sobe a primeira
   letra de CADA palavra. A maiuscula do mes vem do JS. */
.cal-janela.periodo .cal-cabeca strong { text-transform: none; }

/* A rosca contem o proprio giro. As camadas de luz sao quadrados girando:
   na diagonal um quadrado ocupa ~41% a mais, e esse canto invisivel saia da
   caixa e fazia o cartao (que tem rolagem automatica) ganhar uma barra
   vertical. `overflow: hidden` com o raio redondo corta so o canto que nao
   aparecia; o halo continua, porque e sombra da propria rosca. */
:root[data-tema="escuro"] .rosca { overflow: hidden; }

/* ---------- a lista dos seletores ----------
 *
 * A regra de campos acima (`.sel button`) foi escrita para o BOTAO do
 * seletor, mas pegava tambem cada item da lista — que tambem e um <button>.
 * Cada opcao ganhava fundo e borda de campo e a lista virava uma pilha de
 * pilulas dentro de uma caixa clara. A regra que deveria pintar a lista
 * (`.sel .lista`) mirava uma classe que nao existe; a real e `.sel-lista`.
 *
 * Agora: a lista e um painel escuro, e o item e so texto, com fundo apenas
 * no hover e no escolhido. */
:root[data-tema="escuro"] .sel .sel-lista {
  background: #10151d;
  border: 1px solid var(--linha-forte);
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .7);
  padding: 5px;
}
:root[data-tema="escuro"] .sel .sel-item {
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 8px;
  color: var(--texto);
  font-weight: 500;
}
:root[data-tema="escuro"] .sel .sel-item:hover { background: rgba(255, 255, 255, .06); }
:root[data-tema="escuro"] .sel .sel-item.escolhido {
  background: rgba(255, 107, 44, .12);
  color: var(--serie-2);
  font-weight: 600;
}
:root[data-tema="escuro"] .sel .sel-item svg { stroke: var(--serie-2); }

/* ---------- perfil do cliente ----------
 *
 * O botao de voltar e o cartao da rede usavam branco translucido
 * (`rgba(255,255,255,.7)`) — no escuro isso e um bloco cinza claro, o mesmo
 * defeito das capsulas do Inicio. */
:root[data-tema="escuro"] .voltar-perfil {
  background: rgba(255, 255, 255, .05);
  border-color: var(--linha-forte);
  color: var(--texto);
}
:root[data-tema="escuro"] .voltar-perfil:hover { background: rgba(255, 255, 255, .1); }

/* A foto com um anel de luz, como os avatares de quem esta produzindo. */
:root[data-tema="escuro"] .perfil-avatar {
  background: linear-gradient(160deg, #2a3340, #141a23);
  box-shadow: 0 0 0 2px rgba(255, 107, 44, .5), 0 0 22px rgba(255, 107, 44, .22);
}

/* O selo de status e um botao: muda o status com um clique. A setinha diz
   que ele abre alguma coisa. */
.selo-editavel { cursor: pointer; gap: 5px; border-style: solid; }
.selo-editavel svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: .7; }
.selo-editavel:hover { filter: brightness(1.2); }
:root[data-tema="escuro"] .selo-editavel { box-shadow: none; }

/* ---------- contas conectadas, compacto ----------
 *
 * Era um cartao alto por rede, com o botao ocupando a largura inteira. Agora
 * cada rede e uma linha: o nome e o estado a esquerda, o botao a direita. */
.cartao-perfil .malha-redes { grid-template-columns: 1fr; gap: 8px; }
.cartao-perfil .cartao-rede {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 12px;
  padding: 10px 12px;
}
.cartao-perfil .cartao-rede > * { margin: 0; grid-column: 1; }
.cartao-perfil .cartao-rede .botao-rede {
  grid-column: 2;
  grid-row: 1 / 3;
  width: auto;
  padding: 7px 16px;
  font-size: 12.5px;
}
.cartao-perfil .cartao-rede .estado-rede { font-size: 11.5px; }
.cartao-perfil .cartao-rede .detalhe-rede,
.cartao-perfil .cartao-rede .nota-rede { font-size: 11.5px; grid-column: 1 / -1; }
.cartao-perfil .cartao-rede > :last-child:not(.botao-rede):not(.estado-rede):not(.topo-rede) { grid-column: 1 / -1; font-size: 11.5px; }
.cartao-perfil .logo-rede { width: 28px; height: 28px; border-radius: 8px; }
:root[data-tema="escuro"] .cartao-rede {
  background: rgba(255, 255, 255, .03);
  border-color: var(--linha);
}
:root[data-tema="escuro"] .botao-rede:not(.ok):not(:disabled) {
  background: rgba(255, 107, 44, .14);
  border: 1px solid rgba(255, 107, 44, .4);
  color: var(--serie-2);
  box-shadow: none;
}
:root[data-tema="escuro"] .botao-rede:disabled { background: rgba(255, 255, 255, .05); color: var(--apagado); box-shadow: none; }

/* ---------- quem atende: adicionar com um clique ---------- */
.adicionar-equipe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--linha-forte);
}
.adicionar-rotulo { font-size: 11.5px; color: var(--apagado); margin-right: 4px; }
.chip-pessoa {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px 4px 4px;
  border-radius: 999px;
  border: 1px solid var(--linha-forte);
  background: rgba(255, 255, 255, .04);
  color: var(--texto);
  font-size: 12.5px;
  font-weight: 500;
  box-shadow: none;
  cursor: pointer;
}
.chip-pessoa:hover { border-color: rgba(255, 107, 44, .5); background: rgba(255, 107, 44, .1); }
.chip-pessoa b { color: var(--serie-2); font-size: 14px; line-height: 1; }
.chip-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 9.5px;
  font-weight: 700;
  background: var(--fundo-alto);
}

/* ---------- os ultimos fundos claros ----------
 *
 * Varridos por regra (todo `background` branco translucido ou quase-branco
 * sem versao escura) e por tela (no navegador, compondo a transparencia sobre
 * o fundo de verdade). Cada um aqui era um bloco cinza claro no meio do
 * painel escuro. */
:root[data-tema="escuro"] .atalho-perfil {
  background: rgba(255, 255, 255, .05);
  border-color: var(--linha-forte);
  color: var(--texto);
}
:root[data-tema="escuro"] .atalho-perfil:hover { background: rgba(255, 255, 255, .1); }
:root[data-tema="escuro"] .atalho-perfil.zap { color: #5ee0a0; border-color: rgba(37, 211, 102, .35); background: rgba(37, 211, 102, .08); }

:root[data-tema="escuro"] .ficha-barra,
:root[data-tema="escuro"] .janelao-pe {
  background: rgba(16, 21, 29, .92);
  border-color: var(--linha);
}
:root[data-tema="escuro"] .janelao,
:root[data-tema="escuro"] .janelao .ficha-bloco { background: #10151d; border-color: var(--linha); }
:root[data-tema="escuro"] .lista-ficha li { background: rgba(255, 255, 255, .03); border-color: var(--linha); }
:root[data-tema="escuro"] .cartao-risco { background: rgba(224, 52, 43, .08); border-color: rgba(224, 52, 43, .3); }
:root[data-tema="escuro"] .ponto-dia { background: rgba(255, 255, 255, .04); border-color: var(--linha); }
:root[data-tema="escuro"] .previa-progresso { background: rgba(255, 255, 255, .06); }
:root[data-tema="escuro"] .escolha-rede .pilula:hover:not(.ativa) { background: rgba(255, 255, 255, .06); }
:root[data-tema="escuro"] .caixa-filtros .caixinha:has(input:checked) {
  background: rgba(255, 107, 44, .12);
  border-color: rgba(255, 107, 44, .4);
}

/* A barra lateral: o hover dos botoes e o rodape. */
:root[data-tema="escuro"] body.com-lateral nav.menu button:hover:not(.ativa),
:root[data-tema="escuro"] body.com-lateral .rodape-lateral button:hover,
:root[data-tema="escuro"] body.com-lateral .rodape-lateral .discreto:hover { background: rgba(255, 255, 255, .06); }
:root[data-tema="escuro"] body.com-lateral .rodape-lateral .discreto { background: rgba(255, 255, 255, .03); border-color: var(--linha); }

/* O avatar das pessoas na Equipe tinha fundo pessego claro. */
:root[data-tema="escuro"] .avatar-pessoa {
  background: linear-gradient(160deg, #2a3340, #141a23);
  color: var(--texto);
  box-shadow: 0 0 0 1.5px rgba(255, 107, 44, .35);
}


/* ---------- o cursor no estilo da referencia (Entis) ----------
 *
 * Substitui a seta clara anterior. Ponta de seta preta e grossa, contorno
 * branco largo e sombra macia — le em qualquer fundo, escuro ou laranja,
 * porque o contorno branco separa a seta do que estiver atras.
 *
 * Quatro estados, todos da mesma familia: a seta; a seta com o selo
 * redondo (com um ponto laranja) para o que e clicavel; a seta com um X
 * para o que esta desligado; e o I de texto no mesmo traco. Mesmo desenho
 * de base nos quatro, para o cursor mudar de estado sem mudar de cara.
 *
 * 32px: o maior tamanho que todo navegador aceita para cursor de imagem.
 * Percent-encoded, como o anterior — com aspas cruas o navegador recusava
 * a imagem em silencio. */
:root[data-tema="escuro"] body,
:root[data-tema="escuro"] .lateral {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cdefs%3E%3Cfilter id='s' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeDropShadow dx='1.2' dy='1.6' stdDeviation='1.1' flood-color='%23000' flood-opacity='.45'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url%28%23s%29'%3E%3Cpath d='M3.5 3 L24 11.2 L14.6 14.6 L11.2 24 Z' fill='%23111' stroke='%23fff' stroke-width='2.6' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E") 4 3, default;
}
:root[data-tema="escuro"] a,
:root[data-tema="escuro"] button,
:root[data-tema="escuro"] select,
:root[data-tema="escuro"] summary,
:root[data-tema="escuro"] label,
:root[data-tema="escuro"] [role="button"],
:root[data-tema="escuro"] [role="option"],
:root[data-tema="escuro"] .clicavel,
:root[data-tema="escuro"] .grafico .coluna {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cdefs%3E%3Cfilter id='s' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeDropShadow dx='1.2' dy='1.6' stdDeviation='1.1' flood-color='%23000' flood-opacity='.45'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url%28%23s%29'%3E%3Cpath d='M3.5 3 L24 11.2 L14.6 14.6 L11.2 24 Z' fill='%23111' stroke='%23fff' stroke-width='2.6' stroke-linejoin='round'/%3E%3Ccircle cx='23' cy='23' r='5.6' fill='%23111' stroke='%23fff' stroke-width='2.2'/%3E%3Ccircle cx='23' cy='23' r='1.9' fill='%23ff6b2c'/%3E%3C/g%3E%3C/svg%3E") 4 3, pointer;
}
:root[data-tema="escuro"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
:root[data-tema="escuro"] textarea,
:root[data-tema="escuro"] [contenteditable="true"] {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cdefs%3E%3Cfilter id='s' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeDropShadow dx='1.2' dy='1.6' stdDeviation='1.1' flood-color='%23000' flood-opacity='.45'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url%28%23s%29'%3E%3Cpath d='M12 6 H20 M16 6 V26 M12 26 H20' stroke='%23fff' stroke-width='5' stroke-linecap='round' fill='none'/%3E%3Cpath d='M12 6 H20 M16 6 V26 M12 26 H20' stroke='%23111' stroke-width='2.2' stroke-linecap='round' fill='none'/%3E%3C/g%3E%3C/svg%3E") 16 16, text;
}
:root[data-tema="escuro"] button:disabled,
:root[data-tema="escuro"] [disabled],
:root[data-tema="escuro"] [aria-disabled="true"] {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cdefs%3E%3Cfilter id='s' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeDropShadow dx='1.2' dy='1.6' stdDeviation='1.1' flood-color='%23000' flood-opacity='.45'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url%28%23s%29'%3E%3Cpath d='M3.5 3 L24 11.2 L14.6 14.6 L11.2 24 Z' fill='%23111' stroke='%23fff' stroke-width='2.6' stroke-linejoin='round'/%3E%3Ccircle cx='23' cy='23' r='5.6' fill='%23111' stroke='%23fff' stroke-width='2.2'/%3E%3Cpath d='M20.8 20.8 L25.2 25.2 M25.2 20.8 L20.8 25.2' stroke='%23fff' stroke-width='1.7' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E") 4 3, not-allowed;
}

/* Prioridade e prazo nos cartoes de pedido: o selo generico do escuro
   apagava a cor, e urgente ficava igual a normal. */
:root[data-tema="escuro"] .selo.prio-urgente,
:root[data-tema="escuro"] .selo.sla-estourou { background: rgba(240, 86, 75, .16); color: #ff9f98; }
:root[data-tema="escuro"] .selo.prio-alta { background: rgba(255, 122, 26, .18); color: #ffb68a; }
:root[data-tema="escuro"] .selo.sla-perto { background: rgba(234, 179, 8, .16); color: #facc48; }
:root[data-tema="escuro"] .selo.sla-ok,
:root[data-tema="escuro"] .selo.sla-no_prazo { background: rgba(34, 197, 94, .16); color: #6ee7a8; }
:root[data-tema="escuro"] .ped-coluna { background: rgba(255, 255, 255, .025); border: 1px solid rgba(255, 255, 255, .06); }
:root[data-tema="escuro"] .ped-tipo { background: rgba(255, 90, 31, .16); color: #ff8a5c; }