:root {
    /* AJUSTE CONFORTO VISUAL (pedido explicito do usuario: "no tema escuro
       e claro de uma reduzida no brilho... para ficar confortavel aos
       olhos e nao cansar ao usar o monitor", refinado depois pra "um pouco
       mais suave"). O problema tecnico do tema escuro ORIGINAL nao era o
       fundo (#05070d ja e' bem escuro) e sim o CONTRASTE: texto quase
       branco puro sobre fundo quase preto puro e' o par que mais cansa a
       vista em uso prolongado de monitor. Fundo ficou um pouco menos
       escuro, texto ficou um pouco menos branco -- os dois se aproximam,
       reduzindo o salto de luminosidade sem perder legibilidade (contraste
       ainda folgado, so' nao no extremo). Mesmo raciocinio no ciano de
       destaque (--accent-cyan), suavizado pra nao brilhar tanto a noite.
       Validado primeiro no mockup (layout_modelo_chamados_conforto.html)
       antes de vir pra cá -- ver claude/FUNCIONALIDADES_CHAMADOS_2026-08.md. */
    --bg-void: #10141f;
    --bg-panel: #181d29;
    --bg-panel-raised: #1d232f;
    --border-steel: #2a3244;
    /* Rodada 43B -- ajuste aprovado pelo usuario. O par anterior
       (#b7bdcc sobre #181d29) dava 9,0:1 no corpo e 4,4:1 no secundario:
       abaixo da faixa de conforto (10-14:1) e um fio abaixo do minimo de
       acessibilidade no texto pequeno, que e' justamente onde moram
       "Solicitante:", "Equipe:", data e SLA. Clareado o minimo pra entrar
       na faixa -- o tema continua o mesmo de olhar. */
    --text-primary: #c2c8d6;   /* 10,1:1 sobre --bg-panel */

    /* RODADA 100 -- AS TRES ALTURAS DE TEXTO, MEDIDAS E NAO ESTIMADAS.
       `--text-secondary` subiu para ~6:1 e nasceu `--text-terciario` no piso
       AA (4,5:1). O terciario e' EXATAMENTE a cor que o secundario tinha
       antes: o que existia era o secundario certo sendo apagado por
       `opacity`, e opacity e' decisao de cor escrita onde ninguem procura
       cor. Ver o bloco "opacity em texto" no fim do arquivo. Os tres valores
       saem de `ferramentas_contraste.ajustar()` contra o pior fundo em que a
       cor pousa (--bg-void, --bg-panel, --bg-panel-raised). */
    --text-secondary: #99a0b0;   /* 6,01:1 sobre --bg-panel-raised */
    --text-terciario: #838b9f;   /* 4,62:1 -- era o valor do secundario */

    /* RODADA 100 -- AS VERSOES SOLIDAS, e por que elas nao sao um capricho.
       `--accent` e `--danger` fazem dois papeis opostos no mesmo tema: TEXTO
       sobre fundo do tema (onde precisam clarear, num tema escuro, para
       passar em 4,5:1) e FUNDO com texto branco em cima (onde precisam
       escurecer, pelo mesmo motivo). Enquanto foram uma variavel so',
       melhorar um papel piorava o outro -- medido: no Repouso, branco sobre
       --accent dava 2,81:1 em 42 lugares (aba ativa, chip de coluna, botao
       flutuante do chat), e branco sobre --danger dava 2,58:1 no "x" de
       fechar e no contador do chat. Nao da' para derivar uma da outra em
       CSS, entao sao literais -- e sao literais MEDIDOS, de
       `ferramentas_contraste.ajustar()`, um por tema, ao lado da cor de que
       derivam. */
    --accent: #5987e4;   /* rodada 100: 4,51:1 -- o #3f74e0 dava 3,59 como TEXTO */
    --accent-solido: #4c74c4;  /* 4,56:1 com o branco por cima */
    --danger-solido: #ad4f4f;  /* HOTFIX 100A: dimensionado contra o texto REAL do botao (#eef1f7), nao contra branco puro */
    --accent-cyan: #5fb0d4;
    --accent-soft: rgba(63,116,224,.14);
    --danger: #f87171;
    --success: #34d399;
    --radius: 14px;

    /* AJUSTE 33 -- paleta fechada das bolinhas de status do card (fita do
       topo foi substituida por bolinhas no canto superior esquerdo).
       --danger continua sendo o vermelho suave usado em alertas/erro do
       sistema todo -- Alta usa um vermelho proprio, mais vivo, so pra essa
       bolinha, sem mexer no vermelho de erro do resto da interface. */
    --cor-prioridade-alta: #da291c;
    --cor-prioridade-media: #f97316;
    --cor-prioridade-baixa: #2f6fed;
    --cor-compartilhado: #94a3b8;
    --cor-vencendo: #f5b942;
    --cor-concluida: #34d399;
    /* Pedido explicito (2a rodada): teal tambem foi rejeitado -- pediu uma
       cor "totalmente diferente" das que ja existem, sugerindo preto.
       Usei um preto-grafite (#141416) em vez de #000000 puro por um motivo
       tecnico: o fundo do site inteiro (--bg-void, alguns comentarios
       acima) e' #05070d -- quase preto tambem. #000000 solido em cima
       desse fundo, com a bolinha usando so' a borda padrao
       rgba(0,0,0,.35) (ver regra ".bolinha" mais abaixo, comum a todas),
       ficaria basicamente invisivel na legenda e no card. Por isso a
       bolinha-recorrente abaixo GANHA uma borda propria, mais clara, so'
       pra ela ficar visivel -- continua lendo como "preto" (a cor de
       preenchimento e' preta de verdade), so' com um contorno que
       aparece contra o fundo escuro. */
    --cor-recorrente: #141416;

    /* RODADA 97 -- A FONTE VOLTOU; QUEM MUDOU FOI O GLIFO.
       A rodada 96 tirou a Orbitron da interface inteira porque ela desenha o
       TIL como barra inclinada -- "DESCRIÇÃO" saia igual a crase, e foi assim
       que a Kamile leu. O diagnostico estava certo e o remedio era caro
       demais: a identidade visual do sistema mudava por causa de UM glifo.
       Medido: traco de 101 unidades para uma onda de 88. A onda era menor que
       o proprio traco, entao sumia dentro dele -- e as pontas em alturas
       diferentes (844 x 756) fecham o desenho de uma crase.
       A 97 conserta o glifo: `tildecomb` foi redesenhado com traco de 62 e
       onda de 100 de pico a pico, pontas na mesma altura, dentro da MESMA
       caixa. Um glifo governa as seis letras (Ã Õ Ñ ã õ ñ), entao nenhum
       composto precisou ser tocado. Ver ferramentas_fonte/redesenhar_til.py,
       que refaz o arquivo a partir do binario publicado, e o bloco 1 da
       suite 97, que MEDE o glifo servido em vez de confiar nesta prosa.
       A familia se chama "Orbitron BW" de proposito: se o @font-face falhar,
       o navegador NAO pode cair numa Orbitron instalada na maquina de quem
       olha -- ela traz o til velho, e o defeito voltaria em silencio. Com
       nome proprio, a falha cai em sans-serif, que se ve'. */
    --fonte-marca: "Orbitron BW", sans-serif;
    /* Derivada, nao repetida (mesmo idioma de --borda/--surface na rodada 91):
       hoje marca e interface sao a mesma fonte, e a separacao dos dois nomes
       e' o que permite que um dia voltem a ser diferentes sem varrer o CSS. */
    --fonte-titulo: var(--fonte-marca);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg-void);
    color: var(--text-primary);
    font-family: "Inter", system-ui, sans-serif;
}

h1, h2, h3, h4 {
    font-family: var(--fonte-titulo);
    font-weight: 700;
    letter-spacing: .03em;
}

/* A MARCA -- os elementos que carregam o nome da empresa e o logotipo. Eles
   continuam apontando para --fonte-marca, e nao para --fonte-titulo, porque
   sao coisas diferentes que hoje calham de ter a mesma resposta. */
.brand, .logo-word, .login-brand .brand-name {
    font-family: var(--fonte-marca);
    font-weight: 700;
    letter-spacing: .03em;
}
h1 { font-size: 26px; }
h2 { font-size: 18px; }
h3 { font-size: 14px; }
h4 { font-size: 13px; }

.sidebar-nav a,
button,
.view-switcher a,
.calendario-visoes a,
.badge,
.filtro-atividades a {
    font-family: var(--fonte-titulo);
    letter-spacing: .02em;
}

a { color: var(--accent); text-decoration: none; }

/* Sinapse de fundo */
.site-bg { position: fixed; inset: 0; background: var(--bg-void); z-index: -2; }
#network-canvas {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    opacity: .35;
}
.app-shell, .login-wrapper { position: relative; z-index: 1; }

/* Login */
.login-wrapper {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    padding: 20px;
    z-index: 1;
}
.login-wrapper::before {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    background: radial-gradient(circle, rgba(47,143,255,.16) 0%, transparent 70%);
    z-index: -1;
    pointer-events: none;
}

.login-box {
    position: relative;
    background: var(--modal-fundo);
    /* HOTFIX 100A -- PISO OPACO. A linha de cima e' um GRADIENTE, e o reset
       `body.tema-minimalista * { background-image: none !important }` apaga
       gradiente de tudo. Como `background:` e' atalho, ele tambem zera a cor
       de fundo -- e no Minimalista e no Papel Branco esta superficie ficava
       com `rgba(0,0,0,0)` e `none`: transparente de verdade, com a tela de
       tras lida por cima do texto do modal. Medido no Chromium.
       Esta longhand vem DEPOIS de proposito: o atalho define imagem e cor,
       ela substitui so' a cor. Onde o gradiente sobrevive ele cobre; onde for
       apagado, sobra painel opaco em vez de nada. */
    background-color: var(--bg-panel);
    /* Usa a variavel, nao um gradiente cravado: o cartao de Login (e o de
       Trocar Senha, que reaproveita a mesma .login-box) precisa acompanhar
       o tema -- no tema claro um cartao escuro fixo era o defeito antigo.
       Rodada 43B: quem define --modal-fundo no claro e' o Papel Branco. */
    padding: 40px;
    border-radius: var(--radius);
    border: 1px solid var(--border-steel);
    width: 100%;
    max-width: 380px;
    box-shadow:
        0 1px 0 rgba(255,255,255,.07) inset,
        0 -18px 30px -20px rgba(0,0,0,.7) inset,
        0 22px 40px -22px #2f8fff;
}
.login-box::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, #2f8fff, transparent);
    opacity: .8;
}

.login-brand { text-align: center; margin-bottom: 30px; }
.brand-name { font-weight: 700; font-size: 22px; letter-spacing: 1px; }

.logo-mark-img {
    max-width: 92px;
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 22px;
}
/* Bloqueio (best-effort) de copia das imagens da marca: impede
   selecionar/arrastar a imagem e some com o cursor de "arrastar", alem
   de nao deixar o clique do mouse "alcancar" a imagem (pointer-events:
   none), entao o menu de botao direito que aparece e o da pagina, sem a
   opcao "Salvar imagem como". Some com isso + o atributo
   oncontextmenu="return false" no HTML (dupla camada, caso o navegador
   ignore uma das duas). IMPORTANTE: isso e so uma dificuldade a mais,
   nao um bloqueio real -- qualquer imagem que chega ao navegador pode
   ser extraida por quem abrir as ferramentas de desenvolvedor ou a aba
   de rede, entao nao existe protecao 100% eficaz so no lado do
   navegador. */
.logo-mark-img,
.marca-8anos-imagem img,
.marca-8anos-wordmark {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
    pointer-events: none;
}

.wordmark { text-align: center; margin-bottom: 4px; }
.wordmark-brand {
    font-family: var(--fonte-marca);
    font-weight: 700;
    font-size: 22px;
    letter-spacing: 1.5px;
}
/* RODADA 100 -- era #2f8fff cravado, e dava 2,17:1 a 2,48:1 sobre a sidebar,
   nos QUATRO temas, nas 33 telas. A marca e' a primeira coisa da tela e era
   a pior leitura dela. Passa a seguir o --accent do tema, que a mesma
   rodada colocou no piso AA. */
.wordmark-blue { color: var(--accent); }
.wordmark-wolf { color: var(--text-primary); }
.wordmark-sub {
    margin-top: 8px;
    font-family: var(--fonte-marca);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .25em;
    color: var(--text-secondary);
}

.esqueci-senha {
    text-align: center;
    margin-top: 18px;
    font-size: 11.5px;
}
.esqueci-senha a { color: var(--text-secondary); }
.esqueci-senha a:hover { color: var(--accent-cyan); }

/* Selo "8 anos" no canto inferior direito da tela de login.
   Achados desta rodada:
   1) z-index:0 -- mais baixo que o do .login-wrapper (z-index:1), que
      cobre a tela inteira (position:fixed; inset:0). Mesmo o wrapper
      sendo transparente fora do cartao central, deixar o selo no MESMO
      nivel (z-index:1) evita qualquer chance de outro elemento em cima
      dele passar a cobri-lo (ex.: overlays futuros, modais). Antes ele
      dependia de nenhum elemento acima ter fundo propio; agora nao
      depende mais disso.
   2) A mascara radial (mask-image) cortava a imagem de forma agressiva
      (transparente a partir de 78% do raio), o que podia deixar a logo
      com uma "sombra" estranha/cortada dependendo do formato do PNG --
      provavel causa do visual "feio" na tela de login. Reduzida para
      comecar o degrade mais tarde (55%/96%), preservando so um leve
      esmaecimento nas bordas, sem cortar o miolo da imagem.
   3) Adicionado um "prato" circular translúculo atras da imagem
      (::before), com blur, para garantir contraste minimo contra
      QUALQUER cor de fundo (escuro ou claro) independente das cores do
      PNG em si -- se a imagem for clara ela ainda se destaca sobre o
      prato escuro/claro-com-borda, em vez de se misturar direto com
      o fundo da pagina. */
.marca-8anos {
    position: fixed;
    bottom: 18px;
    right: 22px;
    width: 152px;
    text-align: center;
    /* z-index 0 (nao 1): o .app-shell inteiro (sidebar + area de
       conteudo, onde ficam os cards do quadro) tem z-index:1. Com o selo
       no MESMO nivel (1) ele empilhava por cima de tudo, cobrindo o
       texto do card quando a janela ficava mais baixa/estreita e uma
       coluna curta (ex.: "Concluido" com 1 card so) terminava bem no
       canto onde o selo mora. Em z-index:0 (nivel mais baixo que o
       app-shell), qualquer card real -- que tem fundo solido -- passa a
       desenhar POR CIMA do selo automaticamente nessa sobreposicao; o
       selo so aparece onde realmente nao ha conteudo (fundo vazio da
       pagina), que e a intencao original. Isso nao reintroduz o bug do
       selo "sumido" no login: aquele bug era da mascara/z-index cortando
       a imagem, ja corrigido a parte -- e onde o .login-wrapper e
       transparente (fora do cartao central), nao ha nada desenhado ali
       pra cobrir o selo, independente do z-index. */
    z-index: 0;
    pointer-events: none;
}
.marca-8anos-wordmark {
    font-family: var(--fonte-marca);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1px;
    margin-bottom: 6px;
}
.marca-8anos-imagem {
    position: relative;
    width: 100%;
}
.marca-8anos-imagem::before {
    content: "";
    position: absolute;
    inset: 6%;
    border-radius: 50%;
    background: var(--bg-panel-raised);
    border: 1px solid var(--border-steel);
    box-shadow: 0 8px 24px -10px rgba(0,0,0,.35);
    z-index: -1;
}
.marca-8anos img {
    width: 100%;
    display: block;
    -webkit-mask-image: radial-gradient(ellipse at center, black 55%, transparent 96%);
    mask-image: radial-gradient(ellipse at center, black 55%, transparent 96%);
}
.marca-8anos p {
    margin-top: 4px;
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #2f8fff;
    line-height: 1.5;
}

.lobo-decor {
    max-width: 300px;
    text-align: center;
}
.lobo-decor img {
    width: 100%;
    border-radius: var(--radius);
    filter: drop-shadow(0 0 30px rgba(47,111,237,.25));
}
.lobo-decor-erro {
    max-width: 160px;
    text-align: center;
    flex-shrink: 0;
}
.lobo-decor-erro img {
    width: 100%;
    border-radius: var(--radius);
    filter: drop-shadow(0 0 20px rgba(47,111,237,.2));
}

label { display: block; margin: 12px 0 4px; color: var(--text-secondary); font-size: 13px; }

.campo-icone { position: relative; }
.campo-icone::before {
    content: "";
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    opacity: .55;
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
}
.campo-icone-email::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%234fd1ff' stroke-width='1.8' viewBox='0 0 24 24'%3E%3Cpath d='M3 6l9 7 9-7M4 5h16a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}
.campo-icone-senha::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%234fd1ff' stroke-width='1.8' viewBox='0 0 24 24'%3E%3Crect x='4' y='11' width='16' height='9' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E");
}
.campo-icone input { padding-left: 38px; }

input {
    width: 100%;
    padding: 10px 13px;
    background: var(--bg-panel-raised);
    border: 1px solid rgba(47,111,237,.25);
    border-radius: 10px;
    color: var(--text-primary);
}
input:focus {
    outline: none;
    border-color: var(--accent);
}
select {
    padding: 10px 13px;
    background: var(--bg-panel-raised);
    border: 1px solid rgba(47,111,237,.25);
    border-radius: 10px;
    color: var(--text-primary);
    font-family: "Inter", sans-serif;
    font-size: 13px;
}
/* RODADA 98 -- O BOTAO DEIXA DE NASCER FAIXA.
   ==========================================================================
   Esta regra declarava largura de cem por cento. Botao sem classe -- e sao 68
   deles, em 36 telas -- herdava isso e virava uma faixa atravessando o
   formulario inteiro: 1252px de botao para um rotulo de 50px ("Salvar", na
   tela de Dados cadastrais do cliente). Medido, nao estimado: ver clique98.py.

   A rodada 96 ja' tinha consertado ESTE MESMO defeito -- mesma faixa, relato
   da Kamile -- mas so' para `.form-cliente-estruturado`, a tela vizinha. O
   sintoma saiu de uma tela e o mecanismo continuou de pe'; duas rodadas
   depois ele reapareceu na tela do lado. Por isso o conserto agora e' na
   raiz: botao nasce do tamanho do proprio rotulo, e quem QUER faixa pede --
   `.form-login` e `.form-trocar-senha` ja' pediam, cada uma com a sua propria
   declaracao de largura cheia, e por isso nao mudam de aparencia.

   A medicao antes/depois esta' no LEIA-ME: dos 349 botoes visiveis do
   sistema, seis mudaram de largura -- os quatro que eram faixa e dois que
   passaram a caber melhor. Nenhum outro se mexeu. */
button {
    margin-top: 20px;
    width: auto;
    padding: 10px;
    background: #24499e;
    color: #eef1f7;
    font-weight: 600;
    border: 1px solid #2f5cba;
    border-radius: 10px;
    cursor: pointer;
}
button:hover { background: #2b57b8; }
button:hover { opacity: 0.9; }

.mensagem-erro {
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 14px;
    margin-bottom: 16px;
    background: rgba(248,113,113,.1);
    border: 1px solid var(--danger);
    color: var(--danger);
}
.aviso { color: var(--accent); font-size: 14px; }

/* App shell — sidebar lateral.
   ATENCAO: o `min-height` abaixo E' SOBRESCRITO pela rodada 117, no fim
   deste arquivo, onde o shell passa a ter `height: 100vh` e `overflow:
   hidden` para o menu e o cabecalho pararem de andar com a rolagem. A linha
   fica aqui porque continua sendo o piso do layout; a explicacao inteira
   esta' la'. */
.app-shell { min-height: 100vh; display: flex; }

.sidebar {
    width: 240px;
    flex-shrink: 0;
    background: var(--bg-panel);
    border-right: 1px solid var(--border-steel);
    display: flex;
    flex-direction: column;
    padding: 28px 0;
}
.sidebar-brand { text-align: center; padding: 0 20px 22px; }
.sidebar-logo { max-width: 56px; margin: 0 auto 10px; }
.sidebar .wordmark-brand { font-size: 15px; }
.sidebar .wordmark-sub { font-size: 9px; }
.sidebar::after {
    content: "";
    display: block;
    height: 1px;
    background: var(--border-steel);
    margin: 0 20px 18px;
}

.sidebar-nav { display: flex; flex-direction: column; gap: 4px; padding: 0 14px; }
.sidebar-nav a {
    display: block;
    padding: 11px 14px;
    border-radius: 10px;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    border-left: 3px solid transparent;
}
.sidebar-nav a:hover { color: var(--text-primary); background: var(--bg-panel-raised); }
.sidebar-nav a.ativo {
    color: var(--accent-cyan);
    font-weight: 600;
    background: linear-gradient(90deg, rgba(47,111,237,.16), transparent);
    border-left: 3px solid var(--accent);
}
.badge-sidebar {
    float: right;
    background: var(--accent-soft);
    color: var(--accent-cyan);
    border: none;
    font-size: 10.5px;
    padding: 1px 7px;
}

.area-principal { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar-slim {
    display: flex;
    justify-content: flex-end;
    /* RODADA 129 -- o lado ESQUERDO caiu de 24px para 14px ("trazer elas mais
       pra esquerda"). O direito fica em 24px: e' onde mora o nome da pessoa, e
       encostar o nome na borda e' o defeito que a 97 consertou. */
    padding: 14px 24px 14px 14px;
    border-bottom: 1px solid var(--border-steel);
}
.user-info { display: flex; gap: 12px; align-items: center; color: var(--text-secondary); font-size: 13.5px; }
/* RODADA 93 -- a barra ganhou o seletor de disponibilidade em TODA tela, e o
   nome da pessoa passou a quebrar em tres linhas espremido contra a borda.
   `min-width: 0` deixa o bloco encolher; o nome nao quebra e vira reticencias;
   e o e-mail, que e' o dado menos util ali, some antes dos outros quando a
   janela aperta -- ele continua na tela de Minha conta. */
.user-info { min-width: 0; }
.user-identidade strong {
    /* `flex: 0 0 auto` no NOME e `0 1 auto` no e-mail: quando a barra aperta,
       quem encolhe e' o e-mail. A primeira versao disto deixou os dois
       encolhiveis, e o navegador cortou justamente o nome -- a topbar
       mostrava "T..." ao lado do endereco inteiro. */
    flex: 0 0 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}
.user-identidade .email-topbar {
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* RODADA 96 -- DUAS LINHAS NO CANTO DIREITO.
   Em cima quem e' a pessoa (avatar ao lado de nome e e-mail), embaixo as duas
   acoes da conta. Antes tudo dividia uma fileira so', e o nome de quem esta'
   logado ficava no mesmo nivel visual de "Sair". Pedido da Kamile, 10/09. */
.user-bloco {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 0;
    gap: 1px;
}
.user-identidade {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
    /* RODADA 97 -- O NOME PASSAVA POR BAIXO DO AVATAR.
       Medido no Chromium, em 1280px: `.user-bloco` fica com 219px na fileira,
       e esta linha media 262. Sem teto de largura, um filho flex nao encolhe
       nem quebra -- ele TRANSBORDA, e como o bloco alinha a direita o excesso
       sai pela ESQUERDA, exatamente por cima do avatar. Na tela lia-se
       "ministrador" com o circulo em cima do "Ad".
       `max-width: 100%` devolve o teto do pai; ai' o `flex: 0 1 auto` do
       e-mail (logo acima) finalmente tem o que fazer e ele encolhe com
       reticencias, que era o combinado desde a 96 -- o e-mail e' o primeiro a
       ceder, o nome fica inteiro.
       Nao e' regressao da troca de fonte: a mesma medicao com Sora forcada
       via CSSOM da' os mesmos 262px. Vem da 96, quando o bloco virou coluna.
       Licao 25 desta casa: so' aparece depois do layout, so' a medicao acha. */
    max-width: 100%;
    overflow: hidden;
}
.user-acoes {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* RODADA 97 -- o ponto de corte subiu de 1200 para 1400px.
   Medido: a 1280 (a largura de notebook mais comum na casa) a fileira da
   direita pede 262px e tem 219. Com o e-mail na tela, a barra inteira era
   obrigada a quebrar em duas fileiras; sem ele, o nome sozinho mede 93px e
   cabe folgado. A regra de quem cede primeiro nao mudou desde a 93 -- o
   e-mail e' o dado menos util ali, e continua inteiro em Minha conta. So'
   mudou QUANDO ele cede, e agora o numero veio de medicao, nao de palpite. */
@media (max-width: 1400px) {
    .user-info { font-size: 12.5px; gap: 9px; }
    .user-identidade > .email-topbar { display: none; }
}

.conteudo {
    padding: 24px;
    flex: 1;
    max-width: 1300px;
    width: 100%;
}
.rodape { text-align: center; padding: 12px; color: var(--text-secondary); font-size: 12px; }

/* RODADA 49E -- o selo dos 8 anos (.marca-8anos, z-index:0) atravessava
   as TABELAS. A regra que o selo assume esta escrita no comentario dele:
   "conteudo com fundo SOLIDO desenha por cima automaticamente". Card tem
   fundo; tabela nao tinha -- e' transparente por padrao -- entao o lobo
   aparecia no meio das linhas e chegou a cobrir o link "Desativar" da
   ultima linha, que fica justamente no canto onde o selo mora.
   Bastou dar fundo a tabela para ela entrar na mesma regra dos cards.
   Nao mexi no z-index do selo de proposito: o comentario dele registra
   dois bugs anteriores causados exatamente por isso. */
table { width: 100%; border-collapse: collapse; background: var(--bg-panel); }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border-steel); }

.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--bg-panel-raised);
    border: 1px solid var(--border-steel);
    font-size: 12px;
    margin-right: 4px;
}
.badge-ok { border-color: var(--success); color: var(--success); }
.badge-erro { border-color: var(--danger); color: var(--danger); }

/* Cor de prioridade fora do quadro kanban (ex.: Relatório Analítico) --
   mesmas variaveis --cor-prioridade-* ja usadas nas bolinhas do card,
   pra prioridade "Alta" nao se perder em meio a uma tabela de texto. */
.badge-prioridade-alta { border-color: var(--cor-prioridade-alta); color: var(--cor-prioridade-alta); }
.badge-prioridade-media { border-color: var(--cor-prioridade-media); color: var(--cor-prioridade-media); }
.badge-prioridade-baixa { border-color: var(--cor-prioridade-baixa); color: var(--cor-prioridade-baixa); }

.alerta-sucesso, .alerta-erro {
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 14px;
    margin-bottom: 16px;
}
.alerta-sucesso { background: rgba(52,211,153,.1); border: 1px solid var(--success); color: var(--success); }
.alerta-erro { background: rgba(248,113,113,.1); border: 1px solid var(--danger); color: var(--danger); }
.alerta-com-acao { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.link-voltar-quadro {
    font-size: 12px;
    font-weight: 700;
    color: var(--success);
    white-space: nowrap;
}
.link-voltar-quadro:hover { text-decoration: underline; }

textarea {
    padding: 10px;
    background: var(--bg-panel-raised);
    border: 1px solid var(--border-steel);
    border-radius: 10px;
    color: var(--text-primary);
    font-family: monospace;
}

/* Cabecalho de tela (titulo + botoes de acao) */
.cabecalho-tela {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 4px;
}
/* RODADA 43B-4 -- Chamados: titulo e link do portal na mesma linha, e a
   barra dos 3 cartoes puxada pra cima, colada nela. Com o mural fora
   (ver o comentario no template), a faixa do topo inteira cabe em uma
   linha e a tabela sobe. */
.cabecalho-chamados-linha {
    align-items: baseline;
    justify-content: flex-start;
    gap: 12px;
    margin-bottom: 0;
}
.cabecalho-chamados-linha h1 { margin: 0; }
.link-portal-chamados {
    font-size: 11.5px;
    color: var(--accent-cyan);
    text-decoration: none;
    white-space: nowrap;
}
.link-portal-chamados:hover { text-decoration: underline; }
/* Sobe a barra dos cartoes pra' linha do titulo (o HTML nao mudou de
   lugar -- ver o porque no template: os cartoes sao compartilhados pelas
   4 abas e mover o bloco obrigaria a mexer nas quatro). */
.cabecalho-chamados-linha + .barra-stats-chamados {
    margin-top: -38px;
    justify-content: flex-end;
}
@media (max-width: 900px) {
    /* Em tela estreita nao ha' espaco pros dois na mesma linha -- volta a
       empilhar em vez de sobrepor. */
    .cabecalho-chamados-linha + .barra-stats-chamados {
        margin-top: 10px;
        justify-content: flex-start;
    }
}
.cabecalho-acoes { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Botao solido (sem vidro/blur), pra acoes pequenas onde o efeito "vidro
   liquido" (var(--vidro-*) + backdrop-filter: blur) fica visualmente
   instavel -- o vidro e' translucido de proposito, entao a cor final
   depende do que esta desfocado atras dele (a sinapse animada de fundo);
   em pontos da tela com pouca linha/ponto azul atras, o botao acaba
   parecendo quase preto em vez de azul. Pedido explicito: "os botoes da
   imagem ainda estao no padrao errado" (o botao "Atualizar", nos
   agendamentos, parecia preto enquanto "Criar agendamento"/"Salvar
   alteracoes" pareciam azul vivo -- mesma classe/opacidade em teoria, so'
   que sensivel a posicao na tela). Preenchimento SOLIDO (sem blur) resolve
   de vez: fica sempre a mesma cor, em qualquer lugar da tela.
   Cor ajustada numa rodada seguinte (com print da aba "Agendamentos" como
   referencia): mesma receita usada em ".linha-salvar-final button" (ver
   AJUSTE FINO 4, mais abaixo) -- azul-marinho escuro + borda/brilho
   azul-claro, nao azul vivo solido. As duas classes tem que ter SEMPRE a
   mesma aparencia, ja que ambas sao "o botao de acao primaria" em telas
   diferentes. */
.btn-solido-azul {
    width: auto;
    margin: 0;
    padding: 8px 20px;
    font-size: 12.5px;
    font-weight: 600;
    border-radius: 10px;
    cursor: pointer;
}
.btn-solido-azul:hover { filter: brightness(1.3); }

.btn-nova-inline {
    width: auto;
    margin: 0;
    padding: 8px 16px;
    font-size: 12.5px;
}

/* Abas de administracao */
.abas-admin {
    display: flex;
    gap: 4px;
    background: var(--bg-panel);
    border: 1px solid var(--border-steel);
    border-radius: 10px;
    padding: 3px;
    width: fit-content;
    margin: 14px 0 24px;
}
.abas-admin a {
    padding: 7px 16px;
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
}
.abas-admin a.ativo {
    background: linear-gradient(135deg, var(--accent), var(--accent-cyan));
    color: #04101f;
    font-weight: 700;
}

.selo-modulo {
    display: inline-block;
    font-size: 9.5px;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 10px;
    margin-right: 8px;
    background: var(--bg-panel-raised);
    color: var(--text-secondary);
    border: 1px solid var(--border-steel);
}
.selo-modulo-atividades { border-color: var(--accent); color: var(--accent-cyan); }
.selo-modulo-nucleo { border-color: var(--danger); color: var(--danger); }

/* ===========================================================
   AJUSTE 21 — permissoes "perigosas" (revisao geral de seguranca):
   selo de aviso nas telas de matriz-por-grupo e excecao-por-usuario,
   mais a faixa de instrucao no topo de cada tela. Motivo do risco vai
   no atributo "title" do selo (tooltip nativo ao passar o mouse).
   =========================================================== */
.aviso-permissoes-perigosas {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 16px;
    margin-bottom: 14px;
    background: rgba(245, 158, 11, .08);
    border: 1px solid rgba(245, 158, 11, .28);
    border-radius: var(--radius);
    color: var(--text-secondary);
    font-size: 12.5px;
    line-height: 1.55;
}
.icone-aviso-perigo {
    flex-shrink: 0;
    color: #f5c56b;
    font-size: 15px;
}
.selo-permissao-perigosa {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 9px;
    border-radius: 20px;
    background: rgba(245, 158, 11, .16);
    border: 1px solid rgba(245, 158, 11, .4);
    color: #f5c56b;
    font-size: 10.5px;
    font-weight: 600;
    margin-left: 6px;
    white-space: nowrap;
    cursor: help;
}
tr.linha-permissao-perigosa td.col-permissao,
tr.linha-permissao-perigosa td:first-child {
    border-left: 3px solid #f5c56b;
}

/* ===========================================================
   PERMISSAO CRITICA -- selo VERMELHO, um degrau ACIMA do laranja
   "⚠ Atenção" acima -- pedido explicito: identificador proprio e secao
   PROPRIA (no topo da tela, titulo diferente), separada da lista geral.
   Usado hoje so' em "atividades.confidencial_criar" (ver
   PERMISSOES_CRITICAS em permissoes_router.py), mas a estrutura suporta
   adicionar mais no futuro sem mexer no template.
   =========================================================== */
.titulo-permissoes-criticas {
    color: var(--danger);
    display: flex;
    align-items: center;
    gap: 8px;
}
.aviso-permissao-critica {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 16px;
    margin-bottom: 14px;
    background: rgba(248, 113, 113, .1);
    border: 1px solid rgba(248, 113, 113, .4);
    border-radius: var(--radius);
    color: var(--text-secondary);
    font-size: 12.5px;
    line-height: 1.55;
}
.icone-aviso-critica {
    flex-shrink: 0;
    color: var(--danger);
    font-size: 15px;
}
.selo-permissao-critica {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 9px;
    border-radius: 20px;
    background: rgba(248, 113, 113, .2);
    border: 1px solid var(--danger);
    color: var(--danger);
    font-size: 10.5px;
    font-weight: 700;
    margin-left: 6px;
    white-space: nowrap;
    cursor: help;
}
tr.linha-permissao-critica td.col-permissao,
tr.linha-permissao-critica td:first-child {
    border-left: 3px solid var(--danger);
}
.tabela-permissoes-criticas {
    margin-bottom: 28px;
}

.form-novo-usuario { display: flex; gap: 10px; margin: 16px 0 10px; flex-wrap: wrap; }
.form-novo-usuario input, .form-novo-usuario select { width: auto; min-width: 160px; }
.form-novo-usuario button { width: auto; margin: 0; padding: 10px 18px; }

.linha-grupo-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-steel);
}

.form-editar-usuario { max-width: 400px; margin-bottom: 24px; }
.form-editar-usuario button { width: auto; padding: 10px 20px; }

.form-renomear-grupo { display: flex; gap: 6px; }
.form-renomear-grupo input { width: auto; padding: 6px 10px; font-size: 13px; }
.form-renomear-grupo button { width: auto; margin: 0; padding: 6px 12px; font-size: 12px; }

.form-novo-grupo { display: flex; gap: 10px; margin: 16px 0 22px; }
.form-novo-grupo input { width: auto; min-width: 220px; }
.form-novo-grupo button { width: auto; margin: 0; padding: 10px 18px; }

.tabela-scroll { overflow-x: auto; }
.tabela-permissoes { min-width: 600px; }
.tabela-permissoes th { white-space: nowrap; }
.col-permissao { min-width: 240px; }

.form-toggle-permissao { display: inline; }
.toggle-permissao {
    width: auto;
    margin: 0;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid var(--border-steel);
}
.toggle-permissao.sim {
    background: rgba(52,211,153,.14);
    color: var(--success);
    border-color: var(--success);
}
.toggle-permissao.nao {
    background: var(--bg-panel-raised);
    color: var(--text-secondary);
}
.toggle-permissao:hover { opacity: .85; }

/* Modulo Atividades */
.view-switcher {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--bg-panel);
    border: 1px solid var(--border-steel);
    border-radius: 10px;
    padding: 3px;
    width: fit-content;
    /* 43B-4 -- densidade: 14 -> 8. */
    margin: 8px 0;
    flex-wrap: wrap;
}
.view-switcher a {
    padding: 7px 18px;
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
}
.view-switcher a.ativo {
    background: linear-gradient(135deg, var(--accent), var(--accent-cyan));
    color: #04101f;
    font-weight: 700;
}

.banner-colaborador {
    background: var(--accent-soft);
    border: 1px solid var(--accent);
    color: var(--accent-cyan);
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 13px;
    margin: 14px 0;
}

.banner-atrasadas {
    background: rgba(248,113,113,.1);
    border: 1px solid var(--danger);
    color: var(--danger);
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    margin: 14px 0;
}

.linha-filtros {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 12px 0 18px;
}
.form-busca { display: flex; gap: 8px; }
.form-busca input { width: auto; min-width: 200px; }
.form-busca button { width: auto; margin: 0; padding: 10px 16px; }

/* Filtros novos ao lado da busca (prioridade, status, atrasadas, perto de
   vencer) -- mesma linha da busca em telas largas, quebrando pra baixo em
   telas estreitas em vez de espremer ou vazar da tela. */
.form-busca-com-filtros { flex-wrap: wrap; align-items: center; row-gap: 10px; }
.form-busca-com-filtros select { width: auto; min-width: 130px; margin: 0; }

/* "Atrasadas" e "Perto de vencer": pilulas clicaveis (chip), no lugar do
   checkbox com texto do lado -- mesmo padrao visual das abas de status
   usadas em outras telas do sistema. Cada uma e' um <input type="checkbox">
   de verdade (funciona sem JS, continua indo no formulario normalmente),
   so que escondido -- quem aparece pro usuario e' o <label> logo depois
   dele, estilizado de pilula. ":checked + .chip-filtro" pinta a pilula de
   azul quando marcada. As duas sao independentes, entao da pra marcar as
   duas ao mesmo tempo (nao e' um "ou", e' um "e cada uma"). */
.grupo-chips-filtro { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.chip-filtro-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.chip-filtro {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid var(--border-steel);
    background: var(--bg-panel-raised);
    color: var(--text-secondary);
    font-size: 12.5px;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: background .15s, border-color .15s, color .15s;
}
.chip-filtro:hover { border-color: var(--accent-cyan); color: var(--accent-cyan); }
.chip-filtro-input:checked + .chip-filtro {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.chip-filtro-input:focus-visible + .chip-filtro { outline: 2px solid var(--accent-cyan); outline-offset: 2px; }

.filtro-atividades {
    display: flex;
    gap: 16px;
    margin: 12px 0 18px;
}
.filtro-atividades a {
    color: var(--text-secondary);
    font-size: 13.5px;
    font-weight: 500;
    padding-bottom: 4px;
    border-bottom: 2px solid transparent;
}
.filtro-atividades a.ativo {
    color: var(--accent-cyan);
    border-bottom-color: var(--accent-cyan);
}

.form-nova-atividade {
    display: flex;
    gap: 10px;
    margin: 16px 0 24px;
    flex-wrap: wrap;
    align-items: flex-start;
}
/* AJUSTE 32: os campos ganharam rotulo em cima (.campo-com-rotulo), entao o
   input/select deixou de ser filho direto de .form-nova-atividade -- o
   flex/min/max-width que antes miravam o campo em si agora miram o
   ENVOLTORIO (wrapper), que e quem realmente participa do flex da linha.
   O input/select por dentro so precisa ocupar 100% do wrapper. */
.form-nova-atividade .campo-cca-titulo {
    flex: 1.3;
    min-width: 160px;
    max-width: 260px;
}
.form-nova-atividade .campo-cca-descricao {
    flex: 1;
    min-width: 140px;
    max-width: 220px;
}
.form-nova-atividade .campo-cca-prioridade,
.form-nova-atividade .campo-cca-prazo,
.form-nova-atividade .campo-cca-hora {
    min-width: 110px;
    max-width: 140px;
}
.form-nova-atividade .campo-cca-titulo input,
.form-nova-atividade .campo-cca-descricao input,
.form-nova-atividade .campo-cca-prioridade select,
.form-nova-atividade .campo-cca-prazo input,
.form-nova-atividade .campo-cca-hora input {
    width: 100%;
}
.form-nova-atividade button {
    width: auto;
    margin-top: 0;
    padding: 10px 20px;
    white-space: nowrap;
}
.selo-atribuido-para {
    padding: 10px 16px;
    background: var(--bg-panel-raised);
    border: 1px solid var(--border-steel);
    border-radius: 10px;
    font-size: 13px;
    color: var(--accent-cyan);
    font-weight: 600;
}

.btn-mais-opcoes {
    width: auto;
    margin: 0;
    padding: 10px 14px;
    background: var(--bg-panel-raised);
    border: 1px solid var(--border-steel);
    color: var(--text-secondary);
    font-size: 12px;
}
.btn-mais-opcoes:hover { border-color: var(--accent); color: var(--accent-cyan); }

.opcoes-avancadas {
    display: none;
    width: 100%;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
    padding: 14px;
    background: var(--bg-panel);
    border: 1px solid var(--border-steel);
    border-radius: 10px;
}
.opcoes-avancadas.aberto { display: flex; }
.opcoes-avancadas .rotulo-inline {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 11.5px;
    color: var(--text-secondary);
}
.opcoes-avancadas select[multiple] { min-height: 70px; }
.rotulo-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
}
.rotulo-checkbox input { width: auto; }

.kanban {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.kanban-coluna {
    position: relative;
    /* Achado desta rodada: era cor fixa (#101521/#05070b), sempre escura
       em QUALQUER tema -- por isso as colunas do quadro ficavam pretas
       mesmo com o tema claro ativado. Trocado pelas variaveis do tema
       (praticamente identico ao valor fixo antigo no tema escuro, e
       agora acompanha o tema claro tambem). */
    background: linear-gradient(165deg, var(--bg-panel-raised), var(--bg-void) 78%);
    border: 1px solid var(--border-steel);
    border-radius: var(--radius);
    padding: 14px;
    min-height: 200px;
    box-shadow: 0 1px 0 rgba(255,255,255,.05) inset;
}
.kanban-coluna h3 {
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.kanban-card {
    position: relative;
    overflow: hidden;
    background: var(--bg-panel-raised);
    border: 1px solid var(--border-steel);
    /* Rodada 30 -- pedido explicito do usuario: "linha da cor da
       prioridade" no card, igual ja' existe em .linha-chamado-fila-v2
       (ver .borda-prioridade-*, que so' define a COR -- a largura mora
       aqui). Transparent por padrao pra nao quebrar cards sem a classe. */
    border-left: 4px solid transparent;
    border-radius: 10px;
    /* padding-top maior que os outros lados: da espaco pro cluster de
       bolinhas (AJUSTE 33) no canto superior esquerdo sem encostar no
       conteudo do card. */
    padding: 18px 12px 12px;
    margin-bottom: 10px;
    cursor: pointer;
    animation: card-fade-in .25s ease;
}
@keyframes card-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}
.kanban-card.atrasada { border: 1.5px solid var(--danger); background: linear-gradient(165deg, rgba(248,113,113,.12), var(--bg-panel-raised) 60%); box-shadow: 0 0 0 1px rgba(248,113,113,.15), 0 0 16px rgba(248,113,113,.25); }
.kanban-vazio {
    text-align: center;
    padding: 24px 10px;
    color: var(--text-terciario);
    font-size: 12.5px;
}

/* ===========================================================
   AJUSTE 33 -- bolinhas de status no canto superior esquerdo do card,
   no lugar da fita colorida que ficava no topo inteiro. Motivo da troca
   (pedido do usuario): com mais de um status (prioridade + compartilhado
   + vence em breve + concluida) a fita virava varias faixas empilhadas,
   dificeis de diferenciar; a bolinha permite empilhar HORIZONTALMENTE,
   uma por status ativo, mantendo cada cor isolada e legivel. Sao foscas
   de proposito (sem glow/box-shadow) -- so um circulo solido com um
   contorno escuro fino pra nao se perder no fundo do card. */
.cluster-bolinhas {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    gap: 4px;
    z-index: 1;
}
.bolinha {
    /* display:inline-block e' necessario pro <span> respeitar width/height
       fora de um container flex -- sem isso, um <span> (inline por padrao)
       IGNORA width/height e vira so' a borda de um elemento sem area, que
       aparece como um tracinho. Funcionava "por acidente" em todo lugar
       que a bolinha ja aparecia antes (legenda, kanban) porque o pai e'
       sempre flex, e todo item dentro de flex vira bloco automaticamente
       ("blockificacao") -- mas dentro de um <td> de tabela comum (Estilo
       Grade, ver chamados.html) nao tem esse container flex, e o bug
       aparecia. Achado explicito do usuario: "colocar as bolinhas na
       coluna prioridade hoje so ta um risco". */
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,.35);
    flex-shrink: 0;
}
.bolinha-alta { background: var(--cor-prioridade-alta); }
.bolinha-media { background: var(--cor-prioridade-media); }
.bolinha-baixa { background: var(--cor-prioridade-baixa); }
/* Prioridade "Critica" do modulo Chamados -- acima de "Alta" (ver
   claude/FUNCIONALIDADES_CHAMADOS_2026-08.md, secao 19.7). Mesma tecnica
   visual ja usada em .bolinha-confidencial (Atividades) -- metade preta,
   metade vermelha -- pra ficar imediatamente diferente da bolinha
   vermelha CHEIA de "Alta", sem inventar cor nova fora da paleta de
   prioridade ja existente (reaproveita --cor-prioridade-alta). */
.bolinha-critica {
    background: linear-gradient(90deg, #0a0a0a 50%, var(--cor-prioridade-alta) 50%);
    border-color: rgba(255,255,255,.55);
}
.bolinha-compartilhado { background: var(--cor-compartilhado); }
.bolinha-vencendo { background: var(--cor-vencendo); }
.bolinha-concluida { background: var(--cor-concluida); }
.bolinha-recorrente {
    background: var(--cor-recorrente);
    /* Ver comentario da variavel --cor-recorrente, no :root -- sem isso,
       preto sobre o fundo quase-preto do site some de vista. */
    border-color: rgba(255,255,255,.55);
}

.select-prioridade { border-width: 1.5px; transition: border-color .15s, color .15s; }
.select-prioridade.cor-baixa { border-color: var(--cor-prioridade-baixa); color: var(--cor-prioridade-baixa); }
.select-prioridade.cor-media { border-color: var(--cor-prioridade-media); color: var(--cor-prioridade-media); }
.select-prioridade.cor-alta { border-color: var(--cor-prioridade-alta); color: var(--cor-prioridade-alta); }

.kanban-card-titulo {
    font-weight: 600;
    font-size: 13.5px;
    margin: 6px 0 4px;
}
.kanban-card-descricao {
    font-size: 12.5px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}
.kanban-card-rodape {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.selo-prazo {
    font-size: 10.5px;
    color: var(--text-secondary);
    font-family: "JetBrains Mono", monospace;
}
.selo-atrasado {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--danger);
    font-weight: 700;
    background: rgba(248,113,113,.14);
    padding: 2px 8px 2px 6px;
    border-radius: 8px;
}

.banner-atrasadas {
    display: flex;
    align-items: center;
    gap: 8px;
}
.banner-atrasadas::before {
    content: "";
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f5b942' d='M12 2 1 21h22z'/%3E%3Crect x='11' y='9' width='2' height='6' fill='%23101521'/%3E%3Ccircle cx='12' cy='17.3' r='1.1' fill='%23101521'/%3E%3C/svg%3E");
}
.selo-comentarios {
    font-size: 10.5px;
    color: var(--text-secondary);
    margin-top: 6px;
}
/* Selo de origem do modulo -- pedido explicito: "identificacao do modulo
   que foi gerado" o card. Discreto de proposito (hoje e' sempre
   "ATIVIDADES" em todo card, entao nao pode competir visualmente com
   informacao que muda de card pra card). */
.selo-origem-modulo {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--text-terciario);
    background: var(--bg-panel-raised);
    border: 1px solid var(--border-steel);
    border-radius: 5px;
    padding: 1px 6px;
    margin-right: 6px;
    text-transform: uppercase;
    white-space: nowrap;
}
.avatar-iniciais {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-cyan));
    color: #04101f;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    flex-shrink: 0;
}
.form-excluir-card { text-align: right; margin-top: 6px; }
.link-excluir {
    width: auto;
    margin-top: 0;
    padding: 0;
    background: none;
    border: none;
    color: var(--danger);
    font-size: 11.5px;
    font-weight: 400;
    cursor: pointer;
}
.link-excluir:hover { text-decoration: underline; opacity: 1; }

/* Modo compacto */
#btn-modo-compacto {
    width: auto;
    margin: 0;
    padding: 7px 12px;
    background: var(--bg-panel);
    border: 1px solid var(--border-steel);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
}
#btn-modo-compacto.ativo { border-color: var(--accent); color: var(--accent-cyan); }

.modo-compacto .kanban-card { padding: 8px 10px; margin-bottom: 6px; }
.modo-compacto .kanban-card-titulo { font-size: 12.5px; margin: 4px 0 2px; }
.modo-compacto .kanban-card-descricao { display: none; }
.modo-compacto .kanban-coluna { padding: 10px; }
.modo-compacto .calendario-mes-dia { min-height: 68px; }

/* Modal de detalhe da atividade (tambem usado no modal de confirmacao) */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: var(--overlay-fundo);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 20px;
}
.modal-overlay.aberto { display: flex; }

.detalhe-atividade {
    background: var(--modal-fundo);
    /* HOTFIX 100A -- PISO OPACO. A linha de cima e' um GRADIENTE, e o reset
       `body.tema-minimalista * { background-image: none !important }` apaga
       gradiente de tudo. Como `background:` e' atalho, ele tambem zera a cor
       de fundo -- e no Minimalista e no Papel Branco esta superficie ficava
       com `rgba(0,0,0,0)` e `none`: transparente de verdade, com a tela de
       tras lida por cima do texto do modal. Medido no Chromium.
       Esta longhand vem DEPOIS de proposito: o atalho define imagem e cor,
       ela substitui so' a cor. Onde o gradiente sobrevive ele cobre; onde for
       apagado, sobra painel opaco em vez de nada. */
    background-color: var(--bg-panel);
    border: 1px solid var(--border-steel);
    border-radius: var(--radius);
    padding: 20px 22px;
    width: 100%;
    max-width: 420px;
    max-height: 82vh;
    overflow-y: auto;
    /* RODADA 96 -- a sombra ja' existia como variavel (--modal-sombra, definida
       nos quatro temas) e NENHUMA regra a usava: o modal era uma caixa chapada
       sobre a tela, sem relevo. E' a irma do veu mais fechado acima -- as duas
       juntas e' que fazem o modal parar de se confundir com o fundo no tema
       claro. */
    box-shadow: var(--modal-sombra);
}
.form-editar-atividade button {
    width: auto;
    margin-top: 6px;
    padding: 9px 22px;
    font-size: 13px;
}
.detalhe-cabecalho { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.detalhe-fechar {
    width: auto;
    margin: 0;
    padding: 4px 10px;
    background: none;
    border: 1px solid var(--border-steel);
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 14px;
}
.detalhe-fechar-texto {
    font-size: 12.5px;
    color: var(--text-secondary);
}
.detalhe-fechar-texto:hover { color: var(--accent-cyan); }

.form-editar-atividade input[type="text"],
.form-editar-atividade textarea,
.form-editar-atividade select,
.form-editar-atividade input[type="date"] {
    width: 100%;
    margin-bottom: 10px;
}
.detalhe-linha { display: flex; gap: 10px; }
.detalhe-linha select,
.detalhe-linha input { flex: 1; }
.detalhe-meta { color: var(--text-secondary); font-size: 12.5px; }

.lista-comentarios { margin: 12px 0; max-height: 180px; overflow-y: auto; }
.comentario { padding: 8px 0; border-bottom: 1px solid var(--border-steel); }
.comentario-autor { font-size: 12px; font-weight: 600; }
.comentario-autor span { font-weight: 400; color: var(--text-secondary); font-size: 11px; margin-left: 6px; }
.comentario-texto { font-size: 13px; margin-top: 2px; }

.form-comentario { display: flex; gap: 8px; margin-top: 10px; }
.form-comentario input { flex: 1; width: auto; }
.form-comentario button { width: auto; margin: 0; padding: 9px 16px; }

/* RODADA 96 -- 11px sem peso e sem sublinhado nao e' link, e' enfeite. Era o
   "+ cadastrar solicitante" do modal de chamado novo, que a Kamile so' achava
   forcando a vista. Subiu para 12.5px, ganhou peso e sublinhado permanente --
   sublinhado so' no hover exige que a pessoa ADIVINHE que aquilo e' clicavel
   para so' entao descobrir que era. */
.link-editar-comentario {
    width: auto;
    margin: 4px 0 0;
    padding: 0;
    background: none;
    border: none;
    color: var(--accent);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}
.link-editar-comentario:hover { text-decoration: underline; opacity: 1; }
.form-editar-comentario { display: flex; gap: 6px; margin-top: 6px; }
.form-editar-comentario input { flex: 1; width: auto; padding: 6px 10px; font-size: 12.5px; }
.form-editar-comentario button { width: auto; margin: 0; padding: 6px 12px; font-size: 12px; }

/* Calendario de Atividades */
.calendario-controles {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    margin: 16px 0 22px;
}
.calendario-visoes {
    display: flex;
    gap: 4px;
    background: var(--bg-panel);
    border: 1px solid var(--border-steel);
    border-radius: 10px;
    padding: 3px;
}
.calendario-visoes a {
    padding: 6px 14px;
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
}
.calendario-visoes a.ativo {
    background: linear-gradient(135deg, var(--accent), var(--accent-cyan));
    color: #04101f;
    font-weight: 700;
}
.calendario-navegacao {
    display: flex;
    align-items: center;
    gap: 14px;
}
.calendario-seta {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-panel-raised);
    border: 1px solid var(--border-steel);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 16px;
}
.calendario-seta:hover { border-color: var(--accent); }
.botao-hoje {
    padding: 6px 14px;
    border-radius: 8px;
    background: var(--bg-panel-raised);
    border: 1px solid var(--border-steel);
    color: var(--text-secondary);
    font-size: 12.5px;
    font-weight: 600;
}
.botao-hoje:hover { border-color: var(--accent); color: var(--accent-cyan); }
.calendario-rotulo {
    font-family: "Sora", sans-serif;
    font-weight: 700;
    font-size: 15px;
    min-width: 160px;
    text-align: center;
}

.calendario-dia { display: flex; flex-direction: column; gap: 10px; }
.calendario-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-panel-raised);
    border: 1px solid var(--border-steel);
    border-radius: 10px;
    padding: 12px 14px;
    cursor: pointer;
}
.calendario-item:hover { border-color: var(--accent); }

.calendario-semana {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
}
.calendario-coluna-dia {
    background: var(--bg-panel);
    border: 1px solid var(--border-steel);
    border-radius: 10px;
    padding: 10px;
    min-height: 140px;
}
.calendario-coluna-dia.hoje { border-color: var(--accent); }
.calendario-coluna-dia h4 {
    font-size: 11.5px;
    color: var(--text-secondary);
    text-transform: capitalize;
    margin: 0 0 8px;
    font-weight: 600;
}

.calendario-mes-cabecalho {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    margin-bottom: 8px;
}
.calendario-mes-cabecalho span {
    text-align: center;
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
}
.calendario-mes-linha {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    margin-bottom: 8px;
}
.calendario-mes-dia {
    background: var(--bg-panel);
    border: 1px solid var(--border-steel);
    border-radius: 10px;
    padding: 8px;
    min-height: 90px;
}
.calendario-mes-dia.hoje { border-color: var(--accent); background: var(--accent-soft); }
.calendario-mes-dia-vazio { background: transparent; border: none; }
.calendario-mes-numero {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 600;
}
.calendario-mais {
    font-size: 10.5px;
    color: var(--text-secondary);
    margin-top: 2px;
}
.calendario-vazio {
    text-align: center;
    padding: 24px 10px;
    color: var(--text-terciario);
    font-size: 12.5px;
}

.calendario-item-mini {
    background: var(--bg-panel-raised);
    border-radius: 6px;
    padding: 4px 6px;
    margin-top: 5px;
    font-size: 10.5px;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.calendario-item-mini:hover { background: var(--accent-soft); }
.kanban-card.atrasada.compartilhado {
    border-color: var(--danger);
    box-shadow: 0 0 0 1px rgba(248,113,113,.2), 0 0 20px rgba(248,113,113,.3);
}
.selo-compartilhado {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .04em;
    color: #04101f;
    background: linear-gradient(135deg, var(--accent), var(--accent-cyan));
    padding: 3px 9px 3px 7px;
    border-radius: 8px;
    margin: 6px 0 4px;
}
.selo-compartilhado svg { flex-shrink: 0; }
.kanban-card-rodinha { display: flex; gap: 10px; margin-top: 4px; }
.form-compartilhar { display: flex; gap: 8px; margin-top: 10px; }
.form-compartilhar input { flex: 1; width: auto; }
.form-compartilhar button { width: auto; margin: 0; padding: 9px 16px; }
.detalhe-bloqueada { text-align: center; padding-top: 10px; }
.icone-cadeado { color: var(--accent-cyan); margin: 10px auto 6px; width: fit-content; }
.form-desbloquear { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.form-desbloquear button { width: 100%; margin: 0; }

.icone-cadeado-card {
    position: absolute;
    top: 8px;
    right: 8px;
    color: var(--text-terciario);
}

/* ===========================================================
   REFORMA VISUAL — modal de detalhe, botões, ícones, contraste
   =========================================================== */

/* Card de detalhe: mais largo e horizontal, menos vertical */
.detalhe-atividade {
    max-width: 560px;
    padding: 22px 26px;
}

/* Fechar "X" em vermelho, chamando atenção */
.detalhe-fechar {
    color: var(--danger);
    border-color: rgba(248,113,113,.35);
    font-weight: 700;
}
.detalhe-fechar:hover { background: rgba(248,113,113,.1); border-color: var(--danger); }

/* Botões dentro de formulários: menores, sem gradiente pesado, alinhados à direita.
   ACHADO desta rodada: esta regra (".form-editar-atividade button[type='submit']")
   e' MAIS ESPECIFICA que ".linha-salvar-final button" (classe + atributo +
   elemento vs. classe + elemento) -- ela sempre vencia, ignorando qualquer
   ajuste de cor feito so' na outra regra. Ha' 4 declaracoes dela espalhadas
   pelo arquivo (rodadas antigas: AJUSTE FINO 2, AJUSTE FINO 3 etc.) -- as
   4 foram atualizadas juntas nesta rodada pra usar a MESMA cor de
   ".linha-salvar-final button" (azul-marinho + borda/brilho azul-claro,
   ver comentario la'), senao a proxima pessoa que mexer numa esquece da
   outra e o bug volta. */
.form-editar-atividade button[type="submit"] {
    width: auto;
    margin-top: 4px;
    padding: 8px 22px;
    font-size: 12.5px;
    font-weight: 600;
    align-self: flex-end;
}
.form-editar-atividade button[type="submit"]:hover { filter: brightness(1.3); }

/* Linha de campos (prioridade + data + hora) mais compacta e alinhada */
.detalhe-linha {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}
.detalhe-linha select,
.detalhe-linha input {
    padding: 8px 10px;
    font-size: 12.5px;
}

/* Textarea de descricao menor */
.form-editar-atividade textarea { min-height: 44px; padding: 8px 10px; font-size: 13px; }
.form-editar-atividade input[type="text"] { padding: 8px 10px; font-size: 13px; }

/* Icones de calendario/relogio visiveis no fundo escuro */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(0.65) brightness(1.6);
    cursor: pointer;
    opacity: .9;
}

/* Contraste do texto digitado/placeholder dentro dos campos
   (antes era um branco fixo #f4f7fc -- funcionava por acaso no tema escuro
   porque --text-primary tambem e quase-branco, mas no tema claro
   --text-primary vira escuro e isso ficava sem efeito nenhum, deixando o
   texto digitado branco-sobre-branco, ilegivel. Usar a variavel resolve
   os dois temas de uma vez.) */
input, textarea, select { color: var(--text-primary); }
/* Mesmo raciocinio do texto digitado: o placeholder tinha uma cor cinza-
   azulada CLARA fixa (rgba(163,172,194,.65)), pensada para contrastar
   contra fundo de campo escuro. No tema claro o fundo do campo tambem
   fica claro (--bg-panel-raised), entao esse cinza claro sobre fundo
   claro ficava "apagado" -- e exatamente o que foi reportado no texto
   de conteudo dos campos vazios (placeholder). Trocado por uma variavel
   de tema: continua o mesmo tom no escuro, mas fica um cinza-escuro
   legivel no claro. */
input::placeholder, textarea::placeholder { color: var(--placeholder-cor); }
input, select {
    border-color: rgba(79,209,255,.22);
}
input:focus, select:focus, textarea:focus {
    border-color: var(--accent-cyan);
}

/* Avisos de sucesso/erro mais compactos, nao ocupam a linha toda */
.alerta-sucesso, .alerta-erro {
    display: inline-block;
    padding: 7px 14px;
    font-size: 12.5px;
    width: auto;
    max-width: 100%;
}
.alerta-com-acao { display: flex; width: 100%; }

/* Botoes de acao secundaria (compartilhar, comentar) mais discretos */
.form-compartilhar button,
.form-comentario button {
    padding: 8px 16px;
    font-size: 12.5px;
    background: var(--accent);
    box-shadow: none;
}
.form-compartilhar button:hover,
.form-comentario button:hover { background: var(--accent-cyan); color: #04101f; }

/* Selo "Compartilhado com" mais compacto */
.linha-grupo-toggle { padding: 7px 0; font-size: 13px; }

/* Forcando o tamanho certo do botao de salvar (a regra anterior nao venceu) */
.form-editar-atividade button[type="submit"] {
    width: auto !important;
    display: block;
    margin-left: auto !important;
    margin-top: 10px !important;
    padding: 8px 20px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    text-shadow: none !important;
}
.form-editar-atividade button[type="submit"]:hover { filter: brightness(1.3) !important; }

/* Banner de atrasadas tambem nao deve ocupar a linha toda */
.banner-atrasadas {
    display: inline-flex;
    width: auto;
    max-width: 100%;
}

/* Botoes secundarios em geral (Buscar, Compartilhar, Enviar) — solidos, sem gradiente */
.form-busca button,
.form-compartilhar button,
.form-comentario button,
.linha-excecao button {
    background: var(--accent) !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
.form-busca button:hover,
.form-compartilhar button:hover,
.form-comentario button:hover {
    background: var(--accent-cyan) !important;
    color: #04101f !important;
}
/* ---------------------------------------------------------------------
   Responsividade
   --------------------------------------------------------------------- */

/* Achado desta rodada: a regra "tornar toda tabela rolavel" abaixo estava
   FORA de qualquer @media -- rodava em QUALQUER largura de tela, nao so no
   celular como o nome da secao ("Responsividade") sugeria. Isso quebrava
   duas coisas ao mesmo tempo, mesmo em tela grande: (1) "white-space:
   nowrap" e herdado por tudo dentro da tabela, inclusive a descricao longa
   de cada permissao (.detalhe-meta), forcando ela numa linha so e
   alargando a coluna de permissao ao ponto de empurrar a ultima coluna
   ("Definir para esta pessoa") pra bem longe da tela, sem nenhum indicio
   visual de que dava pra rolar; (2) "display: block" numa <table> quebra
   o alinhamento entre cabecalho e linhas (cada <tr> passa a se comportar
   como uma tabela independente). As tabelas que realmente precisam de
   rolagem horizontal (ex.: a matriz de permissoes, com uma coluna por
   grupo) ja tem isso resolvido caso a caso via ".tabela-scroll" +
   ".tabela-permissoes", que nao tem esses dois problemas. Movida pra
   dentro do proprio @media de celular, onde já fazia sentido.  */
@media (max-width: 900px) {
    .conteudo table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
    .kanban {
        grid-template-columns: 1fr;
    }
    .app-shell {
        flex-direction: column;
    }
    .sidebar {
        width: 100%;
        flex-direction: row;
        align-items: center;
        padding: 12px 16px;
        overflow-x: auto;
    }
    .sidebar-brand { padding: 0 16px 0 0; text-align: left; display: flex; align-items: center; gap: 10px; }
    .sidebar-logo { max-width: 34px; margin: 0; }
    .sidebar::after { display: none; }
    .sidebar-nav { flex-direction: row; padding: 0; }
    .conteudo {
        padding: 16px;
    }
    .marca-8anos {
        width: 100px;
    }
}

@media (max-width: 640px) {
    .login-wrapper {
        padding: 16px;
    }
    .login-box {
        padding: 28px 22px;
    }
    .form-nova-atividade {
        flex-direction: column;
    }
    .form-nova-atividade input,
    .form-nova-atividade select,
    .form-nova-atividade button {
        width: 100%;
    }
    .user-info {
        font-size: 12.5px;
        flex-wrap: wrap;
    }
    .marca-8anos {
        display: none;
    }
    .wordmark-brand {
        font-size: 19px;
    }
    .calendario-semana {
        grid-template-columns: 1fr;
    }
    .calendario-mes-cabecalho, .calendario-mes-linha {
        grid-template-columns: repeat(7, minmax(36px, 1fr));
        overflow-x: auto;
    }
    .calendario-controles {
        flex-direction: column;
        align-items: stretch;
    }
}
.selo-compartilhado {
    display: inline-block;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .04em;
    color: #04101f;
    background: linear-gradient(135deg, var(--accent), var(--accent-cyan));
    padding: 3px 9px;
    border-radius: 8px;
    margin: 6px 0 4px;
}
.kanban-card-rodinha { display: flex; gap: 10px; margin-top: 4px; }
.form-compartilhar { display: flex; gap: 8px; margin-top: 10px; }
.form-compartilhar input { flex: 1; width: auto; }
.form-compartilhar button { width: auto; margin: 0; padding: 9px 16px; }
.linha-excecao select { padding: 6px 10px; font-size: 12.5px; min-width: 160px; }
.atividades_excluidas table button { width: auto; margin: 0; padding: 6px 14px; font-size: 12px; }

/* ===========================================================
   AJUSTE FINO 2 — centralizacao, tamanho do card, botao, X
   =========================================================== */

.detalhe-atividade {
    max-width: 440px !important;
    padding: 18px 20px !important;
    margin: 0 auto !important;
}

.detalhe-fechar {
    background: var(--danger-solido) !important;
    color: #fff !important;
    border: none !important;
    font-weight: 700;
}
.detalhe-fechar:hover { opacity: .85; background: var(--danger-solido) !important; }

.form-editar-atividade input[type="text"],
.form-editar-atividade textarea,
.form-editar-atividade select,
.form-editar-atividade input[type="date"],
.form-editar-atividade input[type="time"],
.form-editar-atividade input[type="file"],
.form-editar-atividade input[type="password"] {
    margin-bottom: 8px !important;
    padding: 7px 10px !important;
    font-size: 12.5px !important;
}
.form-editar-atividade textarea { min-height: 40px !important; }

.form-editar-atividade button[type="submit"] {
    font-weight: 700 !important;
}
.form-editar-atividade button[type="submit"]:hover { filter: brightness(1.3) !important; }

/* ===========================================================
   AJUSTE FINO 3 — card compacto sem scroll, X estilo Windows,
   botoes secundarios como link, flag de e-mail no final
   =========================================================== */

.detalhe-atividade {
    max-width: 640px !important;
    max-height: none !important;
    overflow-y: visible !important;
    padding: 16px 20px !important;
}

.detalhe-cabecalho {
    position: relative;
    min-height: 8px;
    margin-bottom: 10px !important;
}
.detalhe-fechar {
    position: absolute;
    top: -4px;
    right: -4px;
}

.form-editar-atividade {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 10px;
}
.form-editar-atividade input[name="titulo"],
.form-editar-atividade textarea,
.form-editar-atividade .detalhe-linha,
.form-editar-atividade .linha-final-form {
    grid-column: 1 / -1;
}
.form-editar-atividade textarea { min-height: 36px !important; resize: vertical; }

.linha-final-form {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
}
.linha-final-form .rotulo-checkbox { margin: 0; }
/* Esta e' a ULTIMA declaracao de ".form-editar-atividade button[type=submit]"
   no arquivo -- como as 4 tem a mesma especificidade, esta e' a que
   realmente manda (CSS resolve empate de especificidade por ordem: a
   ultima declarada vence). Foi ela quem manteve o botao azul vivo mesmo
   depois de mudar as outras 3 -- por isso QUALQUER cor nova tem que
   entrar aqui tambem, sempre. */
.form-editar-atividade button[type="submit"] {
    font-weight: 600 !important;
    margin: 0 !important;
    padding: 8px 20px !important;
    width: auto !important;
}
.form-editar-atividade button[type="submit"]:hover { filter: brightness(1.3) !important; }

/* Compartilhar e Enviar comentario no estilo "link", igual Remover */
.form-compartilhar button,
.form-comentario button {
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    color: var(--accent-cyan) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}
.form-compartilhar button:hover,
.form-comentario button:hover { text-decoration: underline; opacity: 1; }
.form-compartilhar, .form-comentario { align-items: center; }
input[type="file"] {
    padding: 6px 8px !important;
    color: var(--text-secondary);
}
input[type="file"]::file-selector-button {
    background: var(--bg-panel-raised);
    color: var(--text-primary);
    border: 1px solid var(--border-steel);
    border-radius: 8px;
    padding: 6px 12px;
    margin-right: 10px;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
}
input[type="file"]::file-selector-button:hover { border-color: var(--accent-cyan); }

/* Avatar de destaque para membros compartilhados */
.avatar-compartilhado {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-cyan));
    color: #04101f;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    border: 2px solid var(--accent-cyan);
    box-shadow: 0 0 6px rgba(79,209,255,.4);
    margin-right: 8px;
    vertical-align: middle;
}

/* Botao final de salvar, centralizado embaixo de tudo */
.linha-salvar-final {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    margin-top: 10px;
}
.linha-salvar-final button {
    width: auto;
    padding: 9px 32px;
}

/* Formulario de comentario logo abaixo do titulo */
.form-comentario-topo { margin: 10px 0 16px; }

/* ===========================================================
   AJUSTE FINO 4 — X no canto, Salvar no fim, cor do botao
   =========================================================== */

/* 1) X do topo: barra limpa, botao quadrado alinhado a direita */
.detalhe-cabecalho {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    position: static !important;
    min-height: 0 !important;
    margin-bottom: 14px !important;
}
.detalhe-fechar {
    position: static !important;
    top: auto !important;
    right: auto !important;
    flex: 0 0 auto;
    width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 8px !important;
    font-size: 14px !important;
    line-height: 1 !important;
}

/* 2) Linha do Salvar (agora no fim): separador sutil acima */
.linha-salvar-final {
    grid-column: auto !important;
    margin-top: 18px !important;
    padding-top: 16px !important;
    border-top: 1px solid var(--border-steel) !important;
    display: flex !important;
    justify-content: center !important;
    /* Pedido explicito: "cancelar edição ta muito encostado" -- sem
       gap nenhum aqui, o botao "Salvar alteracoes"/"Criar agendamento" e o
       link "Cancelar edicao" (quando os dois aparecem juntos, ex.: tela de
       agendamentos em modo edicao) ficavam colados um no outro, porque
       nenhum dos dois tem margem propria (de proposito, pra nao reintroduzir
       o bug do "botao desalinhado" -- ver AJUSTE FINO 4, alguns comentarios
       acima). Mesmo valor (12px) ja usado na versao confidencial deste
       mesmo layout (.linha-salvar-final-confidencial), so' pra manter
       consistente. */
    gap: 12px !important;
}

/* 3) Cor do botao Salvar -- pedido explicito (com print da aba "Agendamentos"
   como referencia): nao e' pra ser azul vivo solido (#2f6fed cobrindo o
   botao inteiro) -- e' pra ser esse azul-marinho ESCURO com borda/brilho
   azul-claro, igual a aba ativa do menu (.view-switcher a.ativo, mais
   abaixo no arquivo). Essa aba usa "vidro" (fundo translucido + blur) que
   fica bem porque o menu tem um fundo escuro constante atras; um BOTAO,
   em qualquer lugar da tela, pode cair em cima da sinapse animada do fundo
   (poucas linhas azuis atras = vidro parece quase preto -- ja foi o
   problema do botao "Atualizar"). Por isso aqui e' SOLIDO (sem blur),
   com as MESMAS cores da aba (aproximacao solida do vidro azul), garantindo
   a mesma aparencia em QUALQUER lugar da tela, sempre. Vale pra "Salvar
   alteracoes" em toda tela que usa esta classe (card normal, bloqueado,
   confidencial) e "Criar agendamento"/"Salvar alteracoes" na tela de
   Agendamentos. */
.linha-salvar-final button {
    --cor-btn: #0f2354;          /* preenchimento: azul-marinho escuro, igual a aba ativa */
    --cor-btn-brilho: #2f6fed;   /* usado so' no brilho/glow ao redor, nao no preenchimento */
    width: auto !important;
    /* Zera a margin-top:20px que "button {}" (regra generica das telas de
       login/cadastro, bem no topo do arquivo) aplicava em TODO botao do
       site -- aqui dentro da linha final ela nao tem por que existir (o
       espacamento de cima ja vem do padding-top/border-top da propria
       .linha-salvar-final), e sobrava so' nesse botao (o "Excluir card"
       ao lado, .link-excluir, ja zerava a propria margem). Essa margem
       assimetrica (20px em cima, 0 embaixo) empurrava o botao ~10px pra
       baixo do centro da linha -- causa real do desalinhamento. */
    margin: 0 !important;
    padding: 10px 34px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--vidro-texto) !important;
    border-radius: 10px !important;
    box-shadow:
        0 0 16px -3px var(--cor-btn-brilho),
        inset 0 1px 0 rgba(255, 255, 255, .08) !important;
    cursor: pointer;
}
.linha-salvar-final button:hover {
    filter: brightness(1.3) !important;
    background: var(--cor-btn) !important;
}

/* ===========================================================
   VIDRO LÍQUIDO — botões, aba ativa, badge e avatares
   Não toca em .site-bg nem em #network-canvas: o vidro deixa
   a sinapse aparecer borrada por trás, nunca cobre o fundo.
   =========================================================== */

:root {
    --vidro-azul: #1b6fff; /* tom extraído da 2ª arte do lobo cibernético */

    /* Achado desta rodada (tema claro "apagado"): todo botao/badge/aba
       "Vidro Liquido" abaixo usava rgba(27,111,255, alpha-baixo) FIXO com
       texto quase branco -- funciona no escuro (o azul translucido brilha
       contra o fundo quase preto), mas no claro vira um azul-bem-claro
       lavado sobre fundo branco, com o texto quase branco por cima
       ficando ilegivel. Em vez de sair trocando alpha/texto em cada uma
       das ~15 regras que usam esse padrao, cada nivel de opacidade virou
       uma variavel: no escuro tem o MESMO valor de sempre (nada muda
       visualmente la), no claro fica bem mais opaco e na cor grafite do
       tema -- da um botao escuro solido com texto branco por cima, sempre
       legivel, em vez de tentar manter o "vidro" translucido nao ser
       transparente demais sobre fundo claro. */
    --vidro-16: rgba(27, 111, 255, .16);
    --vidro-18: rgba(27, 111, 255, .18);
    --vidro-22: rgba(27, 111, 255, .22);
    --vidro-24: rgba(27, 111, 255, .24);
    --vidro-28: rgba(27, 111, 255, .28);
    --vidro-sombra: rgba(27, 111, 255, .45);
    /* Cor do placeholder (texto de exemplo dentro do campo vazio).
       Igual ao valor fixo antigo -- tema escuro fica identico. */
    --placeholder-cor: rgba(163, 172, 194, .65);

    /* ---- Rodada 36: cores que ANTES eram fixas no meio do arquivo ----
       Relato do usuario: "a inicial ao lado do nome do tecnico ta apagada
       no branco... revise o branco pois algumas coisas estao sumindo" e
       "tem modais que nao mudou o tema".

       Causa: ~40 regras de componente escreviam #eaf2ff / #fff / #0f2354 /
       o gradiente escuro do modal DIRETO no valor. Como sao valores fixos,
       nenhum tema conseguia troca-los -- no tema de fundo branco isso da
       texto branco em cima de branco (some) e modal preto num tema claro.

       Agora sao variaveis: o componente usa a variavel, cada tema define o
       valor. Os valores abaixo sao exatamente os antigos, entao o tema
       escuro padrao continua pixel por pixel igual. */
    --vidro-texto: #eaf2ff;          /* texto sobre botao/chip de vidro    */
    --vidro-texto-forte: #ffffff;    /* idem, versao de mais destaque      */
    --vidro-ativo-bg: #0f2354;       /* fundo do estado ligado/selecionado */
    --vidro-ativo-texto: #eaf2ff;    /* texto do estado ligado             */
    --vidro-ativo-borda: rgba(47,111,237,.55);
    --vidro-ativo-brilho: 0 0 16px -3px #2f6fed, inset 0 1px 0 rgba(255,255,255,.08);
    --modal-fundo: linear-gradient(165deg, #101521, #05070b 78%);
    --modal-sombra: 0 20px 50px rgba(0,0,0,.45);
    --overlay-fundo: rgba(0,0,0,.6);
    --campo-fundo: rgba(13,17,25,.8);   /* fundo dos campos de formulario */
    --fundo-critico: #1a0505;           /* card "Criticos" da barra de stats */

    /* RODADA 91 -- TRES NOMES QUE NUNCA EXISTIRAM, E 20 DECLARACOES MORTAS.
       --------------------------------------------------------------------
       `--borda` (13 usos), `--surface` (6) e `--warning` (1) eram escritas
       como se fossem variaveis de tema. Nenhuma foi definida em lugar
       nenhum -- nem aqui, nem nos quatro temas.

       E o navegador NAO ignora so' a cor. `var(--X)` sem fallback, com --X
       inexistente, e' invalido no valor computado: a DECLARACAO INTEIRA e'
       descartada e a propriedade volta ao valor inicial. `border: 1px solid
       var(--borda)` nao vira "borda cinza": vira `border-style: none` --
       some a borda. `background: var(--surface)` vira transparente.

       Por isso o defeito atravessou rodadas sem ninguem achar: nao ha' erro
       no console, nao ha' erro no servidor, e a tela abre. So' falta
       alguma coisa nela. Achado quando o fio do Conversas (rodada 89)
       apareceu sem caixa; medindo o arquivo inteiro em vez da tela, os
       outros 17 usos estavam nas telas do portal e do chamado do usuario.

       O conserto e' UMA definicao, e nao quatro -- mas ela nao podia ficar
       AQUI, e ficou. Ver o bloco `body` logo abaixo: e' para la' que as tres
       linhas se mudaram na rodada 100, e o motivo esta' escrito la'. */
}

/* RODADA 100 -- AS TRES LINHAS ESTAVAM NO ELEMENTO ERRADO, E ISSO PINTAVA
   PAINEL ESCURO NO TEMA BRANCO.
   ------------------------------------------------------------------------
   A rodada 91 escreveu, no bloco acima: "substituicao de var() e' resolvida
   no ELEMENTO que usa, entao `--borda: var(--border-steel)` aqui pega,
   dentro de cada tema, o --border-steel daquele tema". Isso esta' errado, e
   a rodada 99 ja' tinha tropecado no mesmo degrau com `--acao-bg`.

   O valor de uma custom property e' resolvido NO ELEMENTO ONDE A DECLARACAO
   ESTA'. Em `:root`, `var(--border-steel)` pega o --border-steel DE :root --
   o do tema escuro -- e desce ja' resolvido; a redefinicao que o tema faz em
   `body` nunca e' consultada. Medido no Chromium, na tela /conta:

       tema           --bg-panel-raised     --surface
       escuro         #1d232f               #1d232f
       papelbranco    #f6f4f0               #1d232f   <- o painel fica escuro
       repouso        #262c34               #1d232f

   Sao 8 usos de --surface, 23 de --borda e 3 de --warning, e nos tres temas
   que nao sao o escuro TODOS eles pintavam a cor do escuro. A tela /conta
   era a mais visivel: no Papel Branco o cartao saia azul-marinho com o texto
   escuro do tema em cima -- 1,32:1, texto invisivel.

   O conserto continua sendo UMA definicao, so' que no elemento certo. O
   tema e' uma classe no `<body>`, entao uma declaracao TAMBEM em `body`
   resolve com o --border-steel daquele body -- que ja' e' o do tema. Medido
   antes de escrever, porque esta mesma suposicao ja' errou duas vezes:

       alias em :root, com body.tema ativo  ->  #111111  (congelado)
       alias em body,  com body.tema ativo  ->  #eeeeee  (segue o tema)

   Nenhuma copia por tema, e nenhum valor literal repetido. */
body {
    --borda: var(--border-steel);
    --surface: var(--bg-panel-raised);
    --warning: var(--cor-vencendo);
}

/* Botões primários: + Nova, Buscar, + ATIVIDADE */
.btn-nova-inline,
.form-nova-atividade button,
.form-busca button {
    background: var(--vidro-16) !important;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, .12) !important;
    box-shadow:
        0 4px 18px -8px var(--vidro-sombra),
        inset 0 1px 0 rgba(255, 255, 255, .12) !important;
    color: var(--vidro-texto) !important;
    text-shadow: none !important;
    transition: filter .2s, background .2s;
}
.btn-nova-inline:hover,
.form-nova-atividade button:hover,
.form-busca button:hover {
    filter: brightness(1.12);
    background: var(--vidro-22) !important;
}

/* Aba ativa (Quadro / Calendário / Equipe / Excluídas) */
.view-switcher a.ativo {
    background: var(--vidro-16) !important;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
    color: var(--vidro-texto) !important;
}

/* Badge "COMPARTILHADO" — aparece no card do quadro e no modal. Cinza
   metalico (--cor-compartilhado), alinhado com a bolinha correspondente
   -- e a unica cor "neutra" da paleta de status, escolhida assim de
   proposito pra nao ter parentesco de matiz com nenhuma das outras cinco
   cores (prioridades, vence-em-breve, concluida). */
.selo-compartilhado {
    background: rgba(148, 163, 184, .20) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(148, 163, 184, .4) !important;
    color: #e2e8f0 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
}

/* Avatares — responsável no card e compartilhado no modal */
.avatar-iniciais,
.avatar-compartilhado {
    background: var(--vidro-28) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, .16) !important;
    color: var(--vidro-texto) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}

/* Badge de contagem na sidebar */
.badge-sidebar {
    background: var(--vidro-22) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, .12);
    color: var(--vidro-texto) !important;
}

/* Botão "Salvar alterações" do modal de detalhe -- ATE' A RODADA ANTERIOR
   este botao usava "vidro" (var(--vidro-18) + backdrop-filter: blur), igual
   aos outros elementos "Vidro Liquido" acima. Removido de proposito: pedido
   explicito "os 3 botoes quero que fiquem no padrao novo layout que temos em
   todo o site... sempre que gerar uma nova tela, siga exatamente o padrao
   que estabelecemos". O motivo tecnico (ja documentado tambem no comentario
   de .btn-solido-azul, perto do topo do arquivo): vidro e' TRANSLUCIDO, a
   cor final depende do que esta desfocado atras (a sinapse animada de
   fundo) -- em partes da tela com pouca linha azul atras, o botao "Salvar
   alteracoes"/"Criar agendamento" ficava parecendo quase preto, igual
   aconteceu com o "Atualizar". Em vez de vidro, este botao agora e' SOLIDO
   (ver AJUSTE FINO 4, a regra ".linha-salvar-final button" logo acima desta,
   que ja definia --cor-btn/background solido -- essa regra vinha sendo
   "vencida" por esta aqui embaixo dela no arquivo). Sem sobrescrever nada
   agora, a regra solida de cima passa a valer de verdade -- mesma familia
   visual do ".btn-solido-azul" usado no botao "Atualizar": preenchimento
   solido, sem blur, sempre a MESMA cor em qualquer parte da tela. */

/* X do modal — reforço: sempre alinhado à direita, nunca à esquerda */
.detalhe-cabecalho {
    display: flex !important;
    align-items: center !important;
    position: static !important;
}
.detalhe-fechar {
    position: static !important;
    top: auto !important;
    right: auto !important;
    margin-left: auto !important;
}
/* ===========================================================
   TAMANHO CONSISTENTE + ALINHAMENTO ANEXO/SENHA
   =========================================================== */

/* Uma única regra de largura, vence todas as anteriores —
   mesmo tamanho sempre, seja modal sobreposto ou página cheia */
.detalhe-atividade {
    max-width: 560px !important;
    width: 100% !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

/* Anexo e Proteger com senha: duas colunas de largura igual
   (o grid-template-columns do HTML estava inerte porque o
   container é flex, não grid — resolvido aqui, sem mexer no HTML) */
.detalhe-linha .rotulo-inline {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Mesma altura e base para os dois inputs, mesmo sendo tipos diferentes
   (input[type=file] e input[type=password] têm caixas nativas distintas) */
.form-editar-atividade input[type="file"],
.form-editar-atividade input[type="password"] {
    height: 38px !important;
    box-sizing: border-box !important;
    padding: 0 10px !important;
}
.form-editar-atividade input[type="file"] {
    display: flex !important;
    align-items: center !important;
}
.form-editar-atividade input[type="file"]::file-selector-button {
    height: 24px;
    padding: 0 12px;
    margin-right: 10px;
}
/* ===========================================================
   CHECKLIST (subtarefas) — modal de detalhe + card do quadro
   =========================================================== */

.linha-checklist-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}
.checkbox-checklist {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1px solid var(--border-steel);
    background: none;
    color: var(--accent-cyan);
    font-size: 12px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}
.linha-checklist-item.concluido .checkbox-checklist {
    background: var(--accent-cyan);
    color: #04101f;
    border-color: var(--accent-cyan);
}
.texto-checklist-item {
    flex: 1;
    font-size: 13px;
}
.linha-checklist-item.concluido .texto-checklist-item {
    text-decoration: line-through;
    color: var(--text-secondary);
}

.form-checklist-novo {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    align-items: center;
}
.form-checklist-novo input { flex: 1; width: auto; }
.form-checklist-novo button {
    width: auto;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    color: var(--accent-cyan);
    font-size: 12px;
    font-weight: 600;
    box-shadow: none;
}
.form-checklist-novo button:hover { text-decoration: underline; }

.selo-checklist-completo { color: var(--accent-cyan) !important; }

/* ===========================================================
   TAGS (etiquetas coloridas) — versão reforçada (!important),
   substitui o bloco antigo que não vencia a regra genérica
   "button { width: 100% }" / "input { width: 100% }"
   =========================================================== */

.linha-tags-card, .lista-tags-card {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 6px 0;
}

.chip-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 20px;
    border: 1px solid;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .3px;
    white-space: nowrap;
}

.chip-tag-remover {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: 11px;
    line-height: 1;
    padding: 0;
}

.chip-tag-remover:hover {
    opacity: 1;
}

.form-tag-novo {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 8px !important;
    width: 100% !important;
}

.form-tag-novo input[type="text"] {
    flex: 1 1 auto !important;
    width: auto !important;
    height: 38px !important;
    box-sizing: border-box !important;
    padding: 0 10px !important;
}

.form-tag-novo input[type="color"] {
    flex: 0 0 38px !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    padding: 2px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    background: transparent !important;
    cursor: pointer !important;
    display: inline-block !important;
}

.form-tag-novo button {
    flex: 0 0 auto !important;
    width: auto !important;
    height: 38px !important;
    padding: 0 16px !important;
    background: var(--vidro-16) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 8px !important;
    color: var(--vidro-texto-forte) !important;
    font-family: var(--fonte-titulo) !important;
    font-size: 12px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

.form-filtro-tag select {
    height: 38px;
    box-sizing: border-box;
    padding: 0 10px;
    border-radius: 8px;
    background: var(--campo-fundo);
    border: 1px solid rgba(255,255,255,.12);
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
}

/* ===== AJUSTE 6: Card de detalhe responsivo (se ajusta a qualquer tamanho de tela) ===== */
.detalhe-atividade {
    width: min(94vw, 560px) !important;
    max-width: none !important;
    max-height: 88vh !important;
    overflow-y: auto !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

/* ===== Tags: anexar tag já existente (nova tela de detalhe, sem criação inline) ===== */
.form-tag-anexar {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 10px !important;
    flex-wrap: nowrap !important;
}
.form-tag-anexar select {
    flex: 1 1 auto !important;
    width: auto !important;
    height: 38px;
    box-sizing: border-box;
    padding: 0 10px;
    border-radius: 8px;
    background: var(--campo-fundo);
    border: 1px solid rgba(255,255,255,.12);
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
}
.form-tag-anexar button {
    flex: 0 0 auto !important;
    width: auto !important;
    height: 38px !important;
    padding: 0 16px !important;
    background: var(--vidro-16) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 8px !important;
    color: var(--vidro-texto-forte) !important;
    font-family: var(--fonte-titulo) !important;
    font-size: 12px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

.link-gerenciar-tags {
    display: inline-block;
    margin-top: 10px;
    font-size: 12px;
    color: var(--accent-cyan);
    text-decoration: none;
}
.link-gerenciar-tags:hover { text-decoration: underline; }

/* ===== Tela de gerenciamento de tags (/atividades/tags) ===== */
.form-tag-gerenciar {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.form-tag-gerenciar input[type="text"] {
    flex: 1 1 220px !important;
    width: auto !important;
    height: 38px;
    box-sizing: border-box;
    padding: 0 12px;
    border-radius: 8px;
    background: var(--campo-fundo);
    border: 1px solid rgba(255,255,255,.12);
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
}
.form-tag-gerenciar input[type="color"] {
    flex: 0 0 auto !important;
    width: 42px !important;
    height: 38px !important;
    padding: 2px !important;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.12);
    background: var(--campo-fundo);
    cursor: pointer;
}
.form-tag-gerenciar button {
    flex: 0 0 auto !important;
    width: auto !important;
    height: 38px !important;
    padding: 0 18px !important;
    background: var(--vidro-16) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 8px !important;
    color: var(--vidro-texto-forte) !important;
    font-family: var(--fonte-titulo) !important;
    font-size: 12px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

/* ===== Botão "Aplicar licença" fora do padrão do botão genérico (button{width:100%}) =====
   Achado desta rodada: ainda usava o "vidro liquido" (fundo translucido +
   blur), o padrao ja abandonado nos outros botoes de acao primaria por
   ficar instavel visualmente (cor final depende do que esta desfocado
   atras). Unificado com a mesma receita solida de ".btn-solido-azul" /
   ".linha-salvar-final button" -- azul-marinho solido + borda/brilho
   azul-claro, sem blur. */
.form-licenca button[type="submit"] {
    width: auto !important;
    margin-top: 10px;
    padding: 0 18px !important;
    height: 38px !important;
    border-radius: 8px !important;
    font-family: var(--fonte-titulo) !important;
    font-size: 12px !important;
    cursor: pointer !important;
}
.form-licenca button[type="submit"]:hover { filter: brightness(1.3); }

/* ===== AJUSTE 7: filtro de tag abaixo do formulario de nova atividade ===== */
.linha-filtro-tag-abaixo {
    margin: 0 0 16px;
}
.linha-filtro-tag-abaixo .form-filtro-tag {
    display: inline-flex;
}

/* ===== AJUSTE 8: "+ Adicionar tag" compacto (sem ocupar espaco fixo no card) =====
   Usa <details>/<summary> nativo do HTML -- some quando fechado, sem JS.
   (innerHTML nao executa <script> ao inserir fragmento via fetch, entao a
   solucao precisa ser 100% CSS/HTML para funcionar tanto no modal quanto
   na pagina cheia da atividade.) */
.linha-acoes-tag {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 6px;
}
.detalhes-anexar-tag {
    margin: 0;
}
.detalhes-anexar-tag summary {
    cursor: pointer;
    color: var(--accent-cyan);
    font-size: 12px;
    list-style: none;
    display: inline-block;
}
.detalhes-anexar-tag summary::-webkit-details-marker { display: none; }
.detalhes-anexar-tag summary::marker { content: ""; }
.detalhes-anexar-tag[open] summary { margin-bottom: 8px; display: block; }
.detalhes-anexar-tag .form-tag-anexar { margin-top: 0 !important; }

/* ===== AJUSTE 9: card de detalhe mais compacto -- menos espaco desperdicado ===== */
.detalhe-atividade {
    padding: 14px 18px !important;
}
.detalhe-atividade h2 {
    margin: 0 0 6px !important;
}
.detalhe-atividade h3 {
    margin-bottom: 6px !important;
    font-size: 13px !important;
}
.detalhe-atividade .detalhe-linha {
    gap: 8px !important;
    margin-bottom: 6px !important;
}
.detalhe-atividade .lista-tags-card {
    margin-bottom: 4px !important;
    gap: 6px !important;
}
.detalhe-atividade .lista-checklist {
    margin-bottom: 6px !important;
}
.detalhe-atividade .linha-checklist-item {
    padding: 3px 0 !important;
}
.detalhe-atividade .comentario {
    padding: 6px 0 !important;
    margin-bottom: 4px !important;
}
.detalhe-atividade .form-editar-atividade input,
.detalhe-atividade .form-editar-atividade textarea,
.detalhe-atividade .form-editar-atividade select {
    margin-bottom: 6px !important;
}
.detalhe-atividade .rotulo-checkbox {
    margin-top: 2px !important;
}

/* ===== AJUSTE 10: espaco vazio do card + "Gerenciar tags" mal posicionado =====
   Causa do espaco vazio: paragrafos <p class="detalhe-meta"> (ex: "Nenhuma
   tag ainda.") herdam a margem padrao do navegador (~1em em cima/embaixo),
   que nunca tinha sido zerada. "Gerenciar tags" ficava colado no botao
   "+ Adicionar tag" porque os dois eram itens de um flex sem separacao --
   agora ficam nas pontas opostas da linha (empurrados para as bordas). */
.detalhe-atividade p.detalhe-meta {
    margin: 4px 0 !important;
}
.detalhe-atividade .rotulo-checkbox {
    margin: 2px 0 !important;
}
.linha-acoes-tag {
    justify-content: space-between !important;
}
.link-gerenciar-tags {
    margin-top: 0 !important;
    white-space: nowrap;
}

/* ===== Barra de progresso do checklist ===== */
.barra-progresso-checklist {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: rgba(255,255,255,.08);
    overflow: hidden;
    margin-bottom: 8px;
}
.barra-progresso-checklist-preenchida {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--accent-cyan));
    border-radius: 3px;
    transition: width .25s ease;
}

/* ===== AJUSTE 11: filtro de tag ocupando o espaco vazio ao lado do aviso ===== */
.linha-meta-filtro {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap;
    gap: 12px;
    margin: -8px 0 16px;
}
.linha-meta-filtro p.detalhe-meta {
    margin: 0 !important;
}
.linha-meta-filtro-sozinha {
    justify-content: flex-end !important;
    margin-top: 4px;
}

/* ===== AJUSTE 12: "Gerenciar tags" ao lado do titulo "Tags" (nao mais embaixo) ===== */
.linha-titulo-tags {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-top: 12px;
}
.linha-titulo-tags h3 {
    margin: 0 !important;
}

/* ===== AJUSTE 13: formulario "Novo Usuario" organizado em grade, com rotulo =====
   Antes era uma unica linha com 10 campos sem legenda, ficava confuso. Agora
   cada campo tem um rotulo em cima e os campos se organizam automaticamente
   em colunas de acordo com a largura da tela (grid auto-fit). */
.form-novo-usuario {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
    gap: 14px 18px !important;
    align-items: end !important;
    padding: 16px !important;
    background: var(--bg-panel-raised);
    border: 1px solid var(--border-steel);
    border-radius: var(--radius);
    margin-bottom: 10px;
}
.form-novo-usuario .campo-form {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.form-novo-usuario .campo-form label {
    font-size: 11px;
    color: var(--text-secondary);
    font-family: var(--fonte-titulo);
    letter-spacing: .02em;
}
.form-novo-usuario input,
.form-novo-usuario select {
    width: 100% !important;
    height: 38px;
    box-sizing: border-box;
}
.form-novo-usuario .campo-form-botao {
    grid-column: 1 / -1;
    flex-direction: row;
}
.form-novo-usuario button[type="submit"] {
    width: auto !important;
    padding: 0 20px !important;
    height: 40px !important;
    border-radius: 8px !important;
    font-family: var(--fonte-titulo) !important;
    font-size: 12px !important;
    cursor: pointer !important;
}
.form-novo-usuario button[type="submit"]:hover { filter: brightness(1.3); }

/* ===== AJUSTE 14: formulario "Novo departamento" e edicao inline por linha =====
   Antes reaproveitava .form-tag-gerenciar, que tem 2 inputs de texto
   competindo pelo mesmo espaco -- o botao acabava quebrando linha sozinho e
   parecia desalinhado. Agora tem classe propria com proporcao fixa. */
.form-departamento-novo {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
/* RODADA 96 -- o CNPJ e o e-mail do cliente novo ficavam um por linha, porque
   so' `nome` e `descricao` tinham regra aqui: os outros dois caiam no estilo
   padrao de input, que e' `width: 100%`. Sao campos curtos, e uma linha
   inteira para cada um empurrava a tabela de clientes para baixo da dobra.
   Pedido da Kamile, 10/09.
   A aparencia dos quatro e' a MESMA -- o que muda de um para outro e' so'
   quanto cada um ocupa da linha. Por isso o desenho vem junto e o `flex` vem
   separado: antes disso, `nome` e `descricao` repetiam nove declaracoes
   identicas, e o terceiro campo teria repetido de novo. */
.form-departamento-novo input[name="nome"],
.form-departamento-novo input[name="descricao"],
.form-departamento-novo input[name="cnpj"],
.form-departamento-novo input[name="email_contato"] {
    width: auto !important;
    height: 38px;
    box-sizing: border-box;
    padding: 0 12px;
    border-radius: 8px;
    background: var(--campo-fundo);
    border: 1px solid rgba(255,255,255,.12);
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
}
.form-departamento-novo input[name="nome"] { flex: 1 1 200px !important; }
.form-departamento-novo input[name="cnpj"] { flex: 0 1 170px !important; }
.form-departamento-novo input[name="email_contato"] { flex: 1 1 230px !important; }
.form-departamento-novo input[name="descricao"] {
    flex: 2 1 280px !important;
}
.form-departamento-novo button {
    flex: 0 0 auto !important;
    width: auto !important;
    height: 38px !important;
    padding: 0 18px !important;
    border-radius: 8px !important;
    font-family: var(--fonte-titulo) !important;
    font-size: 12px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}
.form-departamento-novo button:hover { filter: brightness(1.3); }

.detalhes-editar-departamento {
    display: inline-block;
    margin-right: 10px;
}
.detalhes-editar-departamento summary {
    cursor: pointer;
    color: var(--accent-cyan);
    font-size: 12px;
    list-style: none;
    display: inline-block;
}
.detalhes-editar-departamento summary::-webkit-details-marker { display: none; }
.detalhes-editar-departamento summary::marker { content: ""; }
.form-editar-departamento {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap;
    margin-top: 8px;
}
.form-editar-departamento input {
    height: 34px;
    box-sizing: border-box;
    padding: 0 10px;
    border-radius: 8px;
    background: var(--campo-fundo);
    border: 1px solid rgba(255,255,255,.12);
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    width: auto !important;
}
.form-editar-departamento input[name="nome"] { flex: 1 1 140px !important; }
.form-editar-departamento input[name="descricao"] { flex: 2 1 200px !important; }
.form-editar-departamento button {
    flex: 0 0 auto !important;
    width: auto !important;
    height: 34px !important;
    padding: 0 14px !important;
    border-radius: 8px !important;
    font-family: var(--fonte-titulo) !important;
    font-size: 11px !important;
    cursor: pointer !important;
}
.form-editar-departamento button:hover { filter: brightness(1.3); }

/* ===== AJUSTE 15: icones no menu lateral (Dashboard / Atividades / Configuracao) ===== */
.sidebar-nav a {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}
.icone-nav {
    display: inline-flex;
    flex-shrink: 0;
}
.badge-sidebar {
    float: none !important;
    margin-left: auto !important;
}

/* ===== AJUSTE 16: botao de alternar tema claro/escuro ===== */
.topbar-slim {
    justify-content: space-between !important;
}
/* Agrupa relogio do servidor + botao de tema num unico item do
   space-between (junto na ESQUERDA), sem mudar o botao de tema de lugar
   -- so' o relogio novo entra do lado dele. user-info continua sozinho
   na direita, como sempre foi. */
.topbar-esquerda {
    display: flex;
    align-items: center;
    gap: 12px;
}
/* RODADA 97 -- QUANDO NAO CABE, A BARRA QUEBRA; ELA NAO ESMAGA NINGUEM.
   Com o teto de largura do `.user-identidade` (mais acima) o nome parou de
   passar por cima do avatar, mas a medicao mostrou o passo seguinte do mesmo
   problema: a 1100px o bloco inteiro da pessoa era espremido para 42px --
   nome de 86px dentro de caixa de 42. Trocar transbordo por corte nao e'
   conserto.
   A causa e' `space-between` com tres botoes largos na esquerda e
   `min-width: 0` na direita (rodada 93): quem cede e' sempre o lado direito,
   ate' sumir. Agora o lado direito NAO encolhe (`flex: 0 0 auto`) e a barra
   pode quebrar em duas fileiras -- mesma saida que a barra de escrever do
   chat recebeu na 91: em tela estreita a linha vira coluna, em vez de os
   itens disputarem o mesmo pixel. */
.topbar-slim { flex-wrap: wrap; row-gap: 10px; }
.topbar-slim > .user-info { flex: 0 0 auto; }
.relogio-servidor {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12.5px;
    color: var(--text-secondary);
    white-space: nowrap;
    cursor: help;
}
/* AJUSTE 33: o botao era so um circulo com icone, sem nenhum texto --
   agora vira uma pilula (icone + rotulo dizendo pra ONDE o clique muda). */
.btn-alternar-tema {
    width: auto !important;
    height: 34px !important;
    /* Mesmo bug do botao "Salvar alteracoes" (ver .linha-salvar-final
       button) -- a regra generica "button {}" no topo do arquivo aplica
       margin-top:20px em TODO botao do site, e nada aqui zerava isso.
       Margem so' em cima empurrava o botao ~10px pra baixo do centro,
       desalinhando com o relogio do servidor ao lado (.relogio-servidor,
       um <span>, sem essa margem). */
    margin: 0 !important;
    padding: 0 12px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: var(--bg-panel-raised) !important;
    border: 1px solid var(--border-steel) !important;
    border-radius: 8px !important;
    color: var(--text-secondary) !important;
    cursor: pointer;
    white-space: nowrap;
}
.btn-alternar-tema:hover {
    color: var(--accent-cyan) !important;
    border-color: var(--accent-cyan) !important;
}
.texto-alternar-tema {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
}

/* ===== Sino de notificacoes (topbar) ===== */
.sino-wrapper { position: relative; }
.btn-sino-notificacoes {
    width: auto !important;
    height: 34px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-panel-raised) !important;
    border: 1px solid var(--border-steel) !important;
    border-radius: 8px !important;
    color: var(--text-secondary) !important;
    cursor: pointer;
    font-size: 15px;
    position: relative;
}
.btn-sino-notificacoes:hover { color: var(--accent-cyan) !important; border-color: var(--accent-cyan) !important; }
.badge-sino {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--danger);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.dropdown-notificacoes {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 340px;
    max-height: 380px;
    overflow-y: auto;
    background: var(--bg-panel);
    border: 1px solid var(--border-steel);
    border-radius: var(--radius);
    box-shadow: 0 12px 30px -10px rgba(0,0,0,.5);
    z-index: 50;
}
.dropdown-notificacoes.aberto { display: block; }
.dropdown-notificacoes-cabecalho {
    padding: 12px 14px;
    font-weight: 700;
    font-size: 12.5px;
    border-bottom: 1px solid var(--border-steel);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.lista-notificacoes { display: flex; flex-direction: column; }
.linha-notificacao {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-steel);
    color: var(--text-primary);
    font-size: 12.5px;
}
.linha-notificacao:hover { background: var(--bg-panel-raised); }
.linha-notificacao.nao-lida { border-left: 3px solid var(--accent); }
.linha-notificacao-vencendo { border-left: 3px solid var(--cor-vencendo); }
.linha-notificacao-data { font-size: 10.5px; color: var(--text-secondary); }
.notificacao-vazio { padding: 16px 14px; text-align: center; color: var(--text-secondary); font-size: 12.5px; }
@media (max-width: 640px) {
    /* Em tela estreita, so o icone -- o texto some pra nao espremer o
       resto do topbar (nome do usuario, etc.). */
    .texto-alternar-tema { display: none; }
}
/* Botao de tema mostra o icone da PROXIMA opcao do ciclo (escuro -> claro
   -> minimalista -> escuro), nao do tema atual -- mesma logica de sempre,
   so' estendida pra 3 estados. Escuro (padrao, sem classe): mostra sol
   (--> clique vai pro claro). Claro: mostra o icone "minimalista" (-->
   clique vai pro minimalista). Minimalista: mostra lua (--> clique volta
   pro escuro). */
.icone-lua,
.icone-minimalista { display: none; }
body.tema-minimalista .icone-sol,
body.tema-minimalista .icone-minimalista { display: none; }
body.tema-minimalista .icone-lua { display: inline-block; }

/* ===========================================================
   TEMA MINIMALISTA -- terceiro modo, ao lado de escuro/claro (pedido
   explicito: "nao esqueca que sao 3 temas agora: claro, escuro e
   minimalista... pode codificar"). Trazido do mockup
   (mockup/tema_minimalista.css, ja aprovado visualmente pelo usuario),
   com a MESMA reducao de brilho aplicada aos outros dois temas acima
   (texto quase-branco original suavizado, fundo negro-puro suavizado).

   ATENCAO -- NAO PORTAR a parte do mockup que trocava a fonte da sidebar
   pra Quicksand: pedido explicito desta rodada foi "a fonte do sidebar e'
   a padrao que escolhemos no modulo atividade, que ela seja padrao pra
   todos, nao modifique ela". A regra ja existente no topo deste arquivo
   (".sidebar-nav a { font-family: 'Orbitron' ... !important }") continua
   valendo em qualquer tema, inclusive minimalista, porque nenhuma regra
   abaixo redeclara font-family pra .sidebar-nav/.wordmark-brand/.wordmark-sub/
   .brand/.logo-word -- so' o restante do conteudo (fora da sidebar) vira
   Quicksand (ver "body.tema-minimalista { font-family: ... }" mais abaixo). */
body.tema-minimalista {
    --bg-void: #202024;
    --bg-panel: #26262a;
    --bg-panel-raised: #2c2c31;
    --border-steel: #3a3a40;
    --text-primary: #d6d6da;
    --text-secondary: #aaaaaf;   /* 6,01:1 sobre --bg-panel-raised */
    --text-terciario: #94949a;   /* 4,61:1 -- o antigo #8c8c92 dava 4,16 */
    --accent: #5492f7;   /* rodada 100: 4,52:1 -- o #3b82f6 dava 3,78 como TEXTO */
    --accent-solido: #4375c6;  /* 4,57:1 com o branco por cima */
    --danger-solido: #ab514e;  /* HOTFIX 100A: dimensionado contra o texto REAL do botao (#eef1f7), nao contra branco puro */
    --accent-cyan: #5492f7;  /* rodada 100: piso AA como TEXTO sobre o fundo mais claro em que pousa */
    --accent-soft: rgba(59,130,246,.14);
    --danger: #f48784;  /* rodada 100: piso AA como TEXTO sobre o fundo mais claro em que pousa */
    --success: #4ade80;
    --cor-vencendo: #d9b35c;
    --cor-prioridade-alta: #f2726f;
    --cor-prioridade-media: #d9b35c;
    --cor-prioridade-baixa: #6ea8e0;
}

/* Sem fundo de rede animada nem qualquer glow -- so' estrutura. Reaproveita
   as mesmas classes do botao manual "Ocultar fundo animado" (ver mais
   abaixo) -- minimalista fica sempre sem sinapse, nao precisa do usuario
   clicar em nada. */
body.tema-minimalista #network-canvas,
body.tema-minimalista .site-bg,
body.tema-minimalista .marca-8anos { display: none !important; }

body.tema-minimalista,
body.tema-minimalista * {
    box-shadow: none !important;
    text-shadow: none !important;
    background-image: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* Excecao ao "sem background-image" acima -- a bolinha de prioridade
   "Critica" e' a MESMA tecnica metade-preta-metade-vermelha usada em
   .bolinha-confidencial: um gradiente linear de 2 cores, tecnicamente um
   background-image. Sem esta excecao o reset geral apagava o gradiente. */
body.tema-minimalista .bolinha-critica {
    background-image: linear-gradient(90deg, #0a0a0a 50%, var(--cor-prioridade-alta) 50%) !important;
}

/* RODADA 100 -- SEGUNDA EXCECAO, E ESTA CUSTOU UM AVISO DE SEGURANCA.
   A faixa de homologacao tambem se pinta com background-image (as listras
   amarelas), e o reset acima a apagava. O que sobrava era o texto
   #2b1a00 -- quase preto, escolhido para contrastar com o AMARELO -- em cima
   do fundo escuro do tema. Medido: 1,03:1, nas 33 telas, no Minimalista e no
   Papel Branco (que carrega a classe junto). A faixa que existe para avisar
   "esta nao e' a base de producao" era INVISIVEL em dois dos quatro temas.

   O CLAUDE.md diz, sobre a variavel AMBIENTE, que "a inversao e' proposital,
   o erro seguro e' avisar demais". Um aviso que some conforme o tema e' o
   contrario disso. Por decisao do Alex (rodada 100), a faixa deixa de herdar
   paleta: cor propria, igual nos quatro temas, e as listras entram na
   excecao do reset. O `background-color` solido embaixo e' proposital -- se
   um dia outra regra apagar a imagem de novo, o aviso continua amarelo em
   vez de virar texto preto no escuro. Aviso nao degrada em silencio. */
.faixa-ambiente {
    background-color: #f5b942 !important;
}
body.tema-minimalista .faixa-ambiente {
    background-image: repeating-linear-gradient(
        135deg, #f5b942 0 14px, #e0a52f 14px 28px) !important;
}

/* Botao-padrao: estilo "ghost" -- fundo neutro, borda fina, texto claro. */
body.tema-minimalista button {
    background: var(--bg-panel-raised) !important;
    border: 1px solid var(--border-steel) !important;
    color: var(--text-primary) !important;
}
body.tema-minimalista button:hover { border-color: var(--text-secondary) !important; }

/* Acoes primarias -- unicas com preenchimento solido (azul chapado, sem
   brilho), pra destacar sem recorrer a gradiente/glow. */
/* RODADA 100 -- `.btn-solido-azul` SAIU desta regra, e passou a ler a pele.
   Ela pintava os dois com `var(--accent)`. Como o `.btn-solido-azul` ja' e'
   acao principal desde a rodada 99, ele tinha duas fontes de cor: a pele
   (--acao-bg) e esta regra de tema (--accent). Enquanto os dois valores eram
   iguais ninguem via; a 100 precisou separa-los (um e' texto sobre fundo
   escuro, o outro e' fundo com texto branco -- ver o bloco --acao-bg do
   Minimalista) e a divergencia teria aparecido na tela. Agora quem pinta
   acao principal e' so' a pele.

   `.btn-nova-inline` continua aqui de proposito: ele NAO e' acao principal
   no sistema (e' a referencia do padrao vidro desde a rodada 29), e' este
   tema que o promove. Le' --acao-bg para que a promocao use exatamente o
   mesmo azul da acao, em vez de um segundo azul. A excecao esta' registrada
   em PROMOVIDOS_PELO_TEMA, no clique99. */
body.tema-minimalista .btn-nova-inline {
    background: var(--acao-bg) !important;
    border: 1px solid var(--acao-borda) !important;
    color: var(--acao-texto) !important;
    filter: none !important;
}
body.tema-minimalista .btn-nova-inline:hover,
body.tema-minimalista .btn-solido-azul:hover { filter: brightness(1.12) !important; }

/* Aba ativa -- sem preenchimento cheio, so' um traco embaixo na cor de
   destaque (ex.: abas de Administracao, view-switcher de Atividades). */
body.tema-minimalista .view-switcher a.ativo,
body.tema-minimalista .abas-admin a.ativo {
    background: var(--bg-panel-raised) !important;
    border: 1px solid var(--border-steel) !important;
    border-bottom: 2px solid var(--accent) !important;
    color: var(--text-primary) !important;
}

/* Avatares com iniciais (topbar, listas) -- sem gradiente. */
body.tema-minimalista .avatar-iniciais {
    background: var(--bg-panel-raised) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-steel) !important;
}

/* Marca "BLUE" do wordmark usa azul fixo -- mantem a cor de destaque (e'
   identidade da marca, nao decoracao de tela) -- NAO mexe na fonte dela,
   so' na cor (fonte continua protegida pela regra global no topo do
   arquivo, ver comentario grande acima). */
body.tema-minimalista .wordmark-blue { color: var(--accent) !important; }

/* Fonte arredondada -- so' no CONTEUDO (fora da sidebar, ver aviso grande
   acima do bloco minimalista). Quicksand no corpo/titulos/botoes do
   conteudo do modulo, mantendo Inter como fallback. */
body.tema-minimalista {
    font-family: "Quicksand", "Inter", system-ui, sans-serif !important;
}
body.tema-minimalista h1,
body.tema-minimalista h2,
body.tema-minimalista h3,
body.tema-minimalista h4,
body.tema-minimalista button,
body.tema-minimalista .view-switcher a,
body.tema-minimalista .badge {
    font-family: "Quicksand", "Inter", system-ui, sans-serif !important;
    letter-spacing: normal !important;
}

/* ===========================================================
   Botao "Ocultar fundo animado" (Sinapse) -- pedido explicito: "botao
   para ocultar sinapse". Funciona em QUALQUER tema (nao so' minimalista,
   que ja fica sem sinapse por definicao acima) -- estado persistido em
   localStorage (ver base.html), classe aplicada no <body> antes do
   primeiro render pra nao piscar a rede aparecendo e sumindo.
   =========================================================== */
body.sinapse-oculta .site-bg,
body.sinapse-oculta #network-canvas {
    display: none !important;
}

/* ===========================================================
   AJUSTE 18 — tema claro (correcao de fundo) + alinhamento de
   botoes (Tags/Departamentos) + filtro de tag ao lado de
   "+ ATIVIDADE" + "Gerenciar tags" colado no titulo + reset de
   senha (admin) + versao no rodape da sidebar.
   =========================================================== */

/* --- 18.1: campos que usavam cor fixa rgba(13,17,25,.8)/#fff em vez de
   variavel -- ficavam certos no escuro por coincidencia, mas viravam uma
   "ilha" preta feia dentro do tema claro. Agora acompanham o tema. --- */
.form-filtro-tag select,
.form-tag-anexar select,
.form-tag-gerenciar input[type="text"],
.form-tag-gerenciar input[type="color"],
.form-departamento-novo input[name="nome"],
.form-departamento-novo input[name="descricao"],
.form-editar-departamento input {
    background: var(--bg-panel-raised) !important;
    border: 1px solid var(--border-steel) !important;
    color: var(--text-primary) !important;
}

/* --- 18.2: botao "Criar"/"Salvar" desalinhado nos formularios de Tag e
   Departamento -- a causa era o `button { margin-top: 20px }` global (da
   tela de login) que continuava valendo porque essas classes nunca
   zeravam a margem, so ajustavam altura/padding. --- */
.form-tag-gerenciar button,
.form-tag-anexar button,
.form-tag-novo button,
.form-departamento-novo button,
.form-editar-departamento button {
    margin: 0 !important;
}

/* --- 18.3: filtro de tag ao lado do botao "+ ATIVIDADE" (mesma linha),
   em vez de embaixo junto com o aviso de compartilhamento/anexo. --- */
.linha-criar-e-filtro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}
.linha-criar-e-filtro .form-nova-atividade {
    flex: 1 1 auto;
}
.linha-criar-e-filtro .form-filtro-tag {
    flex: 0 0 auto;
}
.linha-criar-e-filtro .form-filtro-tag select {
    height: 38px;
}
.paragrafo-meta-abaixo {
    margin: 8px 0 16px !important;
}

/* --- 18.4: "Gerenciar tags" precisa ficar GRUDADO do lado do titulo
   "Tags", nao nas pontas opostas do card (o `space-between` antigo jogava
   um pra cada extremidade). --- */
.linha-titulo-tags {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 12px;
    margin-top: 12px;
}
.linha-titulo-tags h3 {
    margin: 0 !important;
}
.linha-titulo-tags .link-gerenciar-tags {
    margin-top: 0 !important;
}

/* --- 18.5: botao "Resetar senha" (tela Editar usuario) -- tom ambar,
   deixa claro que e uma acao sensivel sem usar a cor de "excluir". --- */
.btn-resetar-senha {
    width: auto !important;
    margin: 0 !important;
    padding: 0 18px !important;
    height: 38px !important;
    background: rgba(245, 158, 11, .16) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 8px !important;
    color: #fde68a !important;
    font-family: var(--fonte-titulo) !important;
    font-size: 12px !important;
    cursor: pointer !important;
}
.btn-resetar-senha:hover {
    filter: brightness(1.12);
    background: rgba(245, 158, 11, .22) !important;
}

/* --- 18.6: numero da versao no canto inferior esquerdo da sidebar --- */
.sidebar-versao {
    margin-top: auto;
    padding: 14px 18px 2px;
    font-size: 11px;
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-terciario);
}
@media (max-width: 860px) {
    .sidebar-versao { display: none; }
}

/* AJUSTE 33: aviso de direitos autorais, logo abaixo da versao. */
.sidebar-copyright {
    padding: 0 18px 14px;
    font-size: 9.5px;
    line-height: 1.4;
    color: var(--text-terciario);
    text-transform: uppercase;
}
@media (max-width: 860px) {
    .sidebar-copyright { display: none; }
}

/* --- 18.7: link "Trocar senha" na topbar, discreto, ao lado de "Sair" --- */
.link-trocar-senha {
    color: var(--text-secondary) !important;
    font-size: 13.5px;
}
.link-trocar-senha:hover { color: var(--accent-cyan) !important; }

/* ===========================================================
   AJUSTE 19 — botao "Restaurar" (Excluidas) e botao "Salvar Nova
   Senha" (Trocar Senha) no padrao Vidro Liquido.
   =========================================================== */

/* Restaurar: tom esverdeado (--success), reforca que e uma acao
   "positiva" (o oposto do link vermelho de Excluir). */
.form-restaurar { display: inline-block; }
.btn-restaurar {
    width: auto !important;
    margin: 0 !important;
    padding: 0 16px !important;
    height: 34px !important;
    background: rgba(52, 211, 153, .14) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 8px !important;
    color: #a8f3d6 !important;
    font-family: var(--fonte-titulo) !important;
    font-size: 11.5px !important;
    cursor: pointer !important;
}
.btn-restaurar:hover {
    filter: brightness(1.12);
    background: rgba(52, 211, 153, .22) !important;
}

/* Trocar Senha: botao cheio (mantem a mesma proporcao do card de
   login), so troca o azul solido antigo pelo vidro. */
.form-trocar-senha button[type="submit"] {
    width: 100% !important;
    margin-top: 16px !important;
    padding: 12px !important;
    background: var(--vidro-16) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 10px !important;
    color: var(--vidro-texto) !important;
    font-family: var(--fonte-titulo) !important;
    font-size: 13px !important;
    letter-spacing: .04em;
    cursor: pointer !important;
    box-shadow:
        0 4px 18px -8px var(--vidro-sombra),
        inset 0 1px 0 rgba(255, 255, 255, .12) !important;
}
.form-trocar-senha button[type="submit"]:hover {
    filter: brightness(1.12);
    background: var(--vidro-22) !important;
}
.link-voltar-trocar-senha {
    display: inline-block;
    margin-top: 14px;
    font-size: 12.5px;
    color: var(--accent-cyan);
}
.link-voltar-trocar-senha:hover { text-decoration: underline; }

/* ===========================================================
   AJUSTE 20 — logo com link, pagina "Configuracao" (lista de
   modulos), busca de usuario, selo "senha pendente".
   =========================================================== */

/* 20.1: logo da sidebar virou <a> (antes era <div>) -- precisa
   voltar a se comportar como bloco, sem sublinhado. */
.sidebar-brand-link {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: opacity .15s;
}
.sidebar-brand-link:hover { opacity: .85; }
@media (max-width: 860px) {
    .sidebar-brand-link { display: flex; }
}

/* 20.2: breadcrumb "← Configuração" acima das abas de Administração */
.link-voltar-config {
    display: inline-block;
    margin-bottom: 10px;
    font-size: 12.5px;
    color: var(--text-secondary);
}
.link-voltar-config:hover { color: var(--accent-cyan); }

/* 20.3 (v2): pagina /configuracao -- grade de cartoes, um por modulo.
   Layout anterior era uma linha horizontal (icone + texto lado a lado),
   com cara de item de lista/botao generico. Reformulado para cartao
   vertical, mais "clicavel": icone maior no topo, titulo, descricao e um
   indicador "Configurar →" que desliza no hover, com leve brilho/elevacao
   pra reforcar que e uma area de navegacao, nao um botao de formulario. */
.grade-modulos-config {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
    max-width: 820px;
}
.cartao-modulo-config {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 26px 24px 22px;
    background: var(--bg-panel-raised);
    border: 1px solid var(--border-steel);
    border-radius: var(--radius);
    color: var(--text-primary);
    text-decoration: none;
    transition: border-color .2s, transform .18s, box-shadow .18s;
}
.cartao-modulo-config::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(47,111,237,.07), rgba(79,209,255,.07));
    opacity: 0;
    transition: opacity .2s;
    pointer-events: none;
}
.cartao-modulo-config:hover {
    border-color: var(--accent-cyan);
    transform: translateY(-3px);
    box-shadow: 0 14px 30px -14px rgba(79,209,255,.4);
}
.cartao-modulo-config:hover::before { opacity: 1; }
.cartao-modulo-config h3 { margin: 6px 0 0; font-size: 15.5px; position: relative; z-index: 1; }
.cartao-modulo-config p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.55;
    position: relative;
    z-index: 1;
}
/* Padrao oficial de icone em caixinha da identidade BlueWolf (mesmo usado
   no site institucional): fundo em degrade azul->ciano translucido, cantos
   arredondados ~13px, hover inverte pra degrade solido com icone escuro. */
.icone-modulo-config {
    width: 52px;
    height: 52px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(47,111,237,.22), rgba(79,209,255,.22));
    border: 1px solid rgba(79,209,255,.28);
    color: var(--accent-cyan);
    flex-shrink: 0;
    transition: background .2s, color .2s, border-color .2s;
    position: relative;
    z-index: 1;
}
.icone-modulo-config svg {
    width: 24px;
    height: 24px;
}
.cartao-modulo-config:hover .icone-modulo-config {
    background: linear-gradient(135deg, var(--accent), var(--accent-cyan));
    border-color: transparent;
    color: #04101f;
}
/* Indicador "Configurar →" no rodape do cartao -- desliza levemente pra
   direita no hover, reforcando a acao de navegar sem precisar de um
   <button> extra dentro do <a>. */
.seta-modulo-config {
    position: relative;
    z-index: 1;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--accent-cyan);
    transition: transform .18s;
}
.seta-modulo-config span { display: inline-block; transition: transform .18s; }
.cartao-modulo-config:hover .seta-modulo-config span { transform: translateX(4px); }
@media (max-width: 860px) {
    .grade-modulos-config { grid-template-columns: 1fr; max-width: none; }
}

/* 20.4: busca de usuario acima da tabela de Usuarios */
.linha-busca-usuario {
    margin: 16px 0 10px;
}
.input-busca-usuario {
    width: 100% !important;
    max-width: 340px;
    height: 38px;
    box-sizing: border-box;
    padding: 0 12px;
}

/* RODADA 137 -- a caixa de busca das listas (_filtro_lista.html).
   Reusa `.input-busca-usuario` acima, que a 20.4 escreveu para UMA tela e
   agora serve dezoito. O que esta regra acrescenta e' so' a linha que junta a
   caixa ao contador: sem ela o "3 de 47" cai embaixo do campo e a pessoa nao
   liga um ao outro. */
.filtro-lista {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 14px 0 10px;
}
/* O contador nao pode empurrar a caixa quando o numero muda de largura
   ("9 de 47" -> "12 de 47"). Largura minima reservada resolve sem fonte
   monoespacada, que destoaria do resto da tela. */
.filtro-lista-conta {
    min-width: 92px;
}

/* 20.5: selo "senha pendente" na listagem de usuarios */
.badge-pendente {
    border-color: #f59e0b;
    color: #f59e0b;
    margin-left: 4px;
}

/* ===========================================================
   AJUSTE 21 — tela Grupos: botoes "+ Novo Grupo" e "Salvar"
   ainda usavam o `button{background:#24499e}` generico (as
   classes .form-novo-grupo/.form-renomear-grupo so ajustavam
   layout, nunca cor). Mesmo tratamento vidro liquido das
   outras telas de Administracao.
   =========================================================== */
.form-novo-grupo {
    align-items: center !important;
    flex-wrap: wrap;
}
.form-novo-grupo input[type="text"] {
    flex: 1 1 240px !important;
    height: 38px;
    box-sizing: border-box;
    padding: 0 12px !important;
    border-radius: 8px;
    background: var(--bg-panel-raised) !important;
    border: 1px solid var(--border-steel) !important;
    color: var(--text-primary) !important;
    font-family: 'Inter', sans-serif;
}
.form-novo-grupo button {
    height: 38px !important;
    border-radius: 8px !important;
    font-family: var(--fonte-titulo) !important;
    font-size: 12px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}
.form-novo-grupo button:hover {
    filter: brightness(1.3);
}

.form-renomear-grupo input[type="text"] {
    height: 34px;
    box-sizing: border-box;
    padding: 0 10px !important;
    border-radius: 8px;
    background: var(--bg-panel-raised) !important;
    border: 1px solid var(--border-steel) !important;
    color: var(--text-primary) !important;
    font-family: 'Inter', sans-serif;
}
.form-renomear-grupo button {
    height: 34px !important;
    border-radius: 8px !important;
    font-family: var(--fonte-titulo) !important;
    font-size: 11px !important;
    cursor: pointer !important;
}
.form-renomear-grupo button:hover {
    filter: brightness(1.3);
}

/* ===========================================================
   AJUSTE 22 — botao "Desbloquear" (card com senha) no padrao
   vidro liquido. O layout (coluna, largura total) ja existia;
   faltava so a cor -- caia no `button{background:#24499e}`
   generico igual os outros casos.
   =========================================================== */
.form-desbloquear button[type="submit"] {
    height: 44px !important;
    background: var(--vidro-16) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 10px !important;
    color: var(--vidro-texto) !important;
    font-family: var(--fonte-titulo) !important;
    font-size: 13px !important;
    letter-spacing: .04em;
    cursor: pointer !important;
    box-shadow:
        0 4px 18px -8px var(--vidro-sombra),
        inset 0 1px 0 rgba(255, 255, 255, .12) !important;
}
.form-desbloquear button[type="submit"]:hover {
    filter: brightness(1.12);
    background: var(--vidro-22) !important;
}
.form-desbloquear input[type="password"] {
    text-align: center;
    height: 42px;
}

/* ===========================================================
   AJUSTE 23 — "+ ATIVIDADE" com o filtro de tag exatamente
   abaixo dele (nao mais na mesma linha), e campos de Responsavel
   / Filtro de tag como texto+autocomplete (datalist) em vez de
   <select>, pra nao virar uma lista gigante com 100+ usuarios.
   =========================================================== */
.linha-criar-e-filtro {
    display: flex;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 16px;
    flex-wrap: wrap;
}
.linha-criar-e-filtro {
    /* Espacamento que antes vinha do "margin: 16px 0 24px" da propria
       .form-nova-atividade -- movido pro container da linha, pra nao
       empurrar so um dos dois lados (formulario x botao) pra baixo. */
    margin: 16px 0 10px;
}
.linha-criar-e-filtro .form-nova-atividade {
    flex: 1 1 480px;
    /* A regra base .form-nova-atividade (bem mais antiga, de antes dessa
       coluna existir) tem "margin: 16px 0 24px". Como align-items:flex-start
       alinha pela BORDA DA MARGEM, esse margin-top de 16px empurrava so os
       campos do formulario 16px mais pra baixo que o botao "+ATIVIDADE" --
       a causa real do desalinhamento que sobrevivia aos ajustes de altura
       dos campos (AJUSTE 25 e 27 mexeram na altura, nao na margem). */
    margin: 0 !important;
}
.coluna-criar-filtro {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 0 0 auto;
    min-width: 170px;
}
.coluna-criar-filtro button[type="submit"] {
    width: 100% !important;
    margin: 0 !important;
}
.coluna-criar-filtro .form-filtro-tag {
    width: 100%;
    margin: 0 !important;
}
.coluna-criar-filtro .form-filtro-tag input[type="text"] {
    width: 100% !important;
}

/* Input de texto com datalist (Responsavel / Filtro de tag) no lugar do
   <select> antigo -- mesmo visual, so troca o elemento. */
.form-nova-atividade input#busca-responsavel,
.form-filtro-tag input[type="text"] {
    height: 38px;
    box-sizing: border-box;
    padding: 0 10px;
    border-radius: 8px;
    background: var(--bg-panel-raised) !important;
    border: 1px solid var(--border-steel) !important;
    color: var(--text-primary) !important;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
}
.form-nova-atividade input#busca-responsavel {
    width: auto !important;
    min-width: 150px;
    max-width: 180px;
}

/* ===========================================================
   AJUSTE 24 — "Esqueci a senha" na tela de Atividade protegida:
   remove a senha do card sem precisar digitar a atual. So
   aparece para quem ja teria permissao de editar a atividade
   de qualquer forma (mesma regra do checkbox "Remover protecao
   por senha" dentro do card desbloqueado).
   =========================================================== */
.form-remover-senha-bloqueada {
    text-align: center;
    margin-top: 14px;
}
.link-remover-senha-bloqueada {
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    color: #f59e0b !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer !important;
    box-shadow: none !important;
}
.link-remover-senha-bloqueada:hover { opacity: .85; }

/* ===========================================================
   AJUSTE 25 — correcoes da rodada: botao "+ATIVIDADE" perdeu o
   estilo (ficou fora do <form> no DOM, o seletor antigo nao
   batia mais), campo Responsavel quebrando linha sozinho,
   checklist com leve desalinhamento, cadeado pequeno/apagado,
   botao de login no padrao antigo.
   =========================================================== */

/* 25.1: "+ATIVIDADE" agora vive fora do <form> (usa o atributo
   HTML form="form-nova-atividade" pra continuar submetendo),
   entao o seletor ".form-nova-atividade button" nunca mais
   alcança ele -- precisa de uma regra propria. */
.coluna-criar-filtro button[type="submit"] {
    background: var(--vidro-16) !important;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, .12) !important;
    box-shadow:
        0 4px 18px -8px var(--vidro-sombra),
        inset 0 1px 0 rgba(255, 255, 255, .12) !important;
    color: var(--vidro-texto) !important;
    font-family: var(--fonte-titulo) !important;
    font-size: 12px !important;
    text-shadow: none !important;
    transition: filter .2s, background .2s;
}
.coluna-criar-filtro button[type="submit"]:hover {
    filter: brightness(1.12);
    background: var(--vidro-22) !important;
}

/* 25.2: campo Responsavel mais estreito (era o unico item que
   sobrava largura e quebrava linha sozinho) e a coluna do botao
   um pouco mais enxuta, pra sobrar espaco pros campos. */
.form-nova-atividade input#busca-responsavel {
    min-width: 110px !important;
    max-width: 150px !important;
}
.coluna-criar-filtro {
    min-width: 150px;
    gap: 6px;
}
.linha-criar-e-filtro {
    gap: 12px;
}

/* Abaixo de ~1300px, em vez de deixar so um campo quebrar sozinho
   (feio e desalinhado), empilha tudo: formulario numa linha cheia,
   coluna do botao+filtro logo abaixo -- continuam alinhados entre
   si, so muda de ficar ao lado para ficar embaixo. */
@media (max-width: 1300px) {
    .linha-criar-e-filtro {
        flex-direction: column;
        align-items: stretch !important;
    }
    .coluna-criar-filtro {
        flex-direction: row;
        max-width: 360px;
    }
    .coluna-criar-filtro .form-filtro-tag {
        flex: 1;
    }
}

/* 25.3: checklist -- reforca o alinhamento vertical entre a
   caixinha de marcar e o texto do item (podiam ficar levemente
   descentralizados quando o texto tinha uma altura de linha
   diferente da caixinha de 18px). */
.linha-checklist-item {
    align-items: center !important;
}
.checkbox-checklist {
    box-sizing: border-box !important;
    align-self: center !important;
}
.texto-checklist-item {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1.3 !important;
}

/* 25.4: cadeado maior e colorido -- tanto o selo pequeno no card
   do quadro quanto o icone grande da tela "Atividade protegida". */
.icone-cadeado-card {
    color: #f5b942 !important;
    opacity: 1 !important;
}
.icone-cadeado-card svg {
    width: 16px !important;
    height: 16px !important;
}
.icone-cadeado svg {
    width: 40px !important;
    height: 40px !important;
    color: #f5b942 !important;
}

/* 25.5: botao "Entrar" (login) no padrao vidro liquido */
.form-login button[type="submit"] {
    width: 100% !important;
    margin-top: 16px !important;
    padding: 12px !important;
    background: var(--vidro-16) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 10px !important;
    color: var(--vidro-texto) !important;
    font-family: var(--fonte-titulo) !important;
    font-size: 13px !important;
    letter-spacing: .04em;
    cursor: pointer !important;
    box-shadow:
        0 4px 18px -8px var(--vidro-sombra),
        inset 0 1px 0 rgba(255, 255, 255, .12) !important;
}
.form-login button[type="submit"]:hover {
    filter: brightness(1.12);
    background: var(--vidro-22) !important;
}

/* ===========================================================
   AJUSTE 26 — avatar do usuario na topbar (foto ou iniciais) e
   linha de metadados (criado em / criado por / responsavel) no
   topo do card de atividade.
   =========================================================== */
.avatar-topbar {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    border-radius: 50%;
    /* "contain" em vez de "cover": a foto inteira sempre aparece dentro do
       circulo, sem cortar borda nenhuma -- ao custo de sobrar uma faixa de
       fundo nos lados/topo quando a foto nao e' quadrada (coberto pelo
       background abaixo, pra nao ficar transparente). Antes era "cover"
       (preenche o circulo todo, mas corta o que passar da borda). */
    object-fit: contain;
    object-position: center;
    background: var(--bg-panel-raised);
    border: 1px solid var(--border-steel);
    flex-shrink: 0;
}

/* Foto grande (qualquer resolucao) sempre inteira e centralizada dentro do
   circulo, sem cortar nada -- mesmo tratamento para qualquer novo avatar
   com foto que o sistema ganhar no futuro. Ver comentario em .avatar-topbar
   sobre "contain" x "cover". */
.foto-preview-usuario {
    width: 64px;
    height: 64px;
    min-width: 64px;
    min-height: 64px;
    border-radius: 50%;
    object-fit: contain;
    object-position: center;
    background: var(--bg-panel-raised);
    border: 1px solid var(--border-steel);
    margin-bottom: 12px;
    display: block;
}
span.avatar-topbar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    border: 1px solid rgba(255,255,255,.16);
}

/* Movido do topo pro final do card (pedido do usuario) -- por isso agora
   leva uma borda superior separando do resto do conteudo, em vez do
   margin negativo que so fazia sentido colado no X de fechar. */
.detalhe-meta-topo {
    text-align: right;
    margin: 14px 0 0 !important;
    padding-top: 10px;
    border-top: 1px solid var(--border-steel);
    font-size: 11px !important;
}

/* ===========================================================
   AJUSTE 27 — alinhamento vertical do "+ATIVIDADE" com os
   campos ao lado (altura explicita e igual pros dois), e
   robustez responsiva geral da linha de criar+filtro pra nao
   desconfigurar ao encolher a janela.
   =========================================================== */

/* Mesma altura explicita pros campos da linha de criar atividade
   e pro botao -- sem isso, cada um tinha uma altura "por acaso"
   vinda so do padding, quase igual mas nao identica. */
.form-nova-atividade input,
.form-nova-atividade select {
    height: 40px;
    box-sizing: border-box;
}
.coluna-criar-filtro button[type="submit"] {
    height: 40px !important;
    box-sizing: border-box !important;
}
.coluna-criar-filtro .form-filtro-tag input[type="text"] {
    height: 40px !important;
    box-sizing: border-box !important;
}

/* min-width:0 evita que um filho de flex force o pai a estourar a
   largura da tela (comportamento padrao do flexbox sem isso e o
   filho nunca encolher menos que o seu conteudo minimo, causando
   scroll horizontal / layout quebrado ao encolher a janela). */
.linha-criar-e-filtro,
.linha-criar-e-filtro .form-nova-atividade,
.coluna-criar-filtro {
    min-width: 0;
}
.form-nova-atividade { min-width: 0; }
.form-nova-atividade > * { min-width: 0; }

/* O limite de largura do campo Responsavel (pra nao ser o unico a
   sobrar espaco e quebrar linha sozinho) so faz sentido no layout
   "lado a lado" (tela larga). Na largura de celular ele deve virar
   100% como qualquer outro campo -- por isso essa regra so vale a
   partir de 861px, senao ela brigava com a regra generica de
   largura total do breakpoint mobile e o campo ficava pequeno
   demais numa tela estreita. */
@media (min-width: 861px) {
    .form-nova-atividade input#busca-responsavel {
        min-width: 110px !important;
        max-width: 150px !important;
    }
}

/* Abaixo de 861px (mobile): o grupo "+ATIVIDADE" + filtro tambem
   empilha em coluna cheia, igual todo o resto do formulario nesse
   tamanho de tela -- antes ficava lado a lado espremido dentro de
   360px, apertado e inconsistente com os outros campos. */
@media (max-width: 860px) {
    .coluna-criar-filtro {
        flex-direction: column;
        max-width: 100%;
        width: 100%;
    }
    .coluna-criar-filtro .form-filtro-tag,
    .coluna-criar-filtro button[type="submit"] {
        width: 100% !important;
    }
}

/* ===========================================================
   AJUSTE 28 —
   1) botao "OK, entendi" do popup de aviso de bypass de senha
      (estava no padrao antigo, sem o estilo Vidro Liquido);
   2) rotulo pequeno "Titulo:" acima do campo/titulo da atividade;
   3) linha "Criado por / Responsavel / data" no proprio card do
      quadro kanban (antes so aparecia depois de abrir o card).
   =========================================================== */
.btn-glass-popup {
    width: 100%;
    margin: 0 !important;
    padding: 11px !important;
    background: var(--vidro-16) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 10px !important;
    color: var(--vidro-texto) !important;
    font-family: var(--fonte-titulo) !important;
    font-size: 13px !important;
    letter-spacing: .04em;
    cursor: pointer !important;
}
.btn-glass-popup:hover {
    filter: brightness(1.12);
    background: var(--vidro-22) !important;
}

.rotulo-campo-pequeno {
    display: block;
    font-family: var(--fonte-titulo);
    font-size: 10.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.kanban-card-criacao {
    font-size: 10.5px;
    color: var(--text-terciario);
    line-height: 1.4;
    margin: 2px 0 4px;
}

.login-versao {
    text-align: center;
    margin-top: 14px;
    font-size: 10.5px;
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-terciario);
}
.login-copyright {
    text-align: center;
    margin-top: 4px;
    font-size: 9.5px;
    color: var(--text-terciario);
}

.paginacao-usuarios {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 14px;
    font-size: 12.5px;
}
.paginacao-usuarios a { color: var(--accent-cyan); }
.paginacao-usuarios a:hover { text-decoration: underline; }
.paginacao-usuarios .paginacao-desabilitado { color: var(--text-terciario); }
.paginacao-usuarios .paginacao-info { color: var(--text-secondary); }

/* Flexo normal (nao mais position:absolute) -- assim ele reserva o proprio
   espaco no topo do card e empurra o titulo pra baixo, em vez de flutuar
   por cima do texto e correr risco de sobrepor titulos longos. */
.kanban-card-topo-direita {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 6px;
    margin: 2px 0 6px;
}
.kanban-card-topo-direita .icone-cadeado-card {
    position: static;
    flex-shrink: 0;
    margin-top: 1px;
}
.kanban-card-meta-ambar {
    text-align: right;
    font-size: 9px;
    line-height: 1.4;
    /* Era ambar (#f5b942) -- trocado pela mesma cor do link "Duplicar"
       (var(--accent-cyan)), a pedido do usuario. */
    color: var(--accent-cyan);
}
.kanban-card-meta-rotulo {
    font-family: var(--fonte-titulo);
    font-weight: 700;
}

.kanban-card-titulo-bloco { margin-top: 2px; }
.kanban-card-titulo-bloco .rotulo-campo-pequeno { margin-bottom: 2px; }

.kanban-card.quase-atrasada {
    border: 1.5px solid #f5b942;
    box-shadow: 0 0 0 1px rgba(245,185,66,.18), 0 0 14px rgba(245,185,66,.22);
}
/* Removido: "background: #f5b942" sobrescrevia a fita de PRIORIDADE inteira
   com ambar, escondendo a cor real da prioridade sempre que o prazo
   estivesse perto de vencer. A borda + o selo "vence em breve" ja avisam
   sozinhos, sem precisar apagar a cor da prioridade. */
.selo-quase-atrasado {
    color: #f5b942 !important;
    background: rgba(245,185,66,.14) !important;
    font-weight: 700;
}

.avatar-responsavel-card {
    width: 32px !important;
    height: 32px !important;
    font-size: 13px !important;
}

.kanban-card-rodape-final {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    gap: 8px;
}
.kanban-card-responsavel-rodape {
    font-size: 10.5px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kanban-card-acoes-rodape {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.kanban-card-acoes-rodape .form-excluir-card,
.kanban-card-acoes-rodape .form-duplicar-card {
    margin: 0;
}
.link-duplicar {
    width: auto;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    color: var(--accent-cyan);
    font-size: 11.5px;
    cursor: pointer;
}
.link-duplicar:hover { text-decoration: underline; }

.campo-com-rotulo {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.campo-com-rotulo .rotulo-campo-pequeno { margin-bottom: 0; }

/* Rotulo "fantasma" (invisivel, mas ocupa espaco) em cima do botao
   "+ATIVIDADE" -- garante que o topo do botao alinhe exatamente com o
   topo dos campos ao lado, que agora tem um rotulo de verdade acima. */
.rotulo-fantasma {
    visibility: hidden;
    margin-bottom: 0;
}

.detalhes-historico {
    margin-top: 14px;
    border-top: 1px solid var(--border-steel);
    padding-top: 10px;
}
.detalhes-historico summary {
    cursor: pointer;
    font-size: 12px;
    color: var(--text-secondary);
    font-family: var(--fonte-titulo);
    letter-spacing: .03em;
}
.lista-historico {
    margin-top: 8px;
    max-height: 160px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.linha-historico {
    font-size: 11px;
    color: var(--text-secondary);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    padding-bottom: 4px;
}
.linha-historico-data { font-family: 'JetBrains Mono', monospace; color: var(--text-terciario); }
.linha-historico-autor { font-weight: 700; color: var(--text-primary); }

.alerta-auto-sumindo {
    transition: opacity .6s ease, transform .6s ease;
}
.alerta-auto-sumindo.alerta-oculta {
    opacity: 0;
    transform: translateY(-6px);
}

/* ===========================================================
   AJUSTE 30 — pagina de Relatorios do modulo Atividades (grafico
   por responsavel/tag, barra por status, tabela de atrasadas com
   exportacao CSV, e o log de auditoria geral).
   =========================================================== */
.linha-acoes-relatorio { display: flex; gap: 10px; margin: 10px 0; }
.btn-secundario-relatorio {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid var(--border-steel);
    background: var(--bg-panel-raised);
    color: var(--text-primary);
    font-size: 12.5px;
}
.btn-secundario-relatorio:hover { border-color: var(--accent-cyan); color: var(--accent-cyan); }

/* Botao "Carregar mais" (Excluidas e Relatorio Analitico) -- classe PROPRIA,
   separada de .btn-secundario-relatorio, com !important em tudo que o reset
   global de "button" tambem define (width, margin, padding). E' o mesmo
   raciocinio ja usado em .btn-restaurar (rolar pra ela, mais acima neste
   arquivo): o reset global e' forte o bastante que so uma classe mais
   especifica sem !important nao garante vencer em todo navegador/ordem de
   carregamento -- !important tira essa duvida de vez. */
.btn-carregar-mais {
    width: auto !important;
    margin: 0 !important;
    display: inline-block !important;
    padding: 8px 16px !important;
    border-radius: 20px !important;
    border: 1px solid var(--border-steel) !important;
    background: var(--bg-panel-raised) !important;
    color: var(--text-primary) !important;
    font-size: 12.5px !important;
    font-weight: 400 !important;
    cursor: pointer;
}
.btn-carregar-mais:hover { border-color: var(--accent-cyan) !important; color: var(--accent-cyan) !important; }

.form-filtro-relatorio { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.form-filtro-relatorio input { width: auto; margin: 0; }
.form-filtro-relatorio button { width: auto; margin: 0; padding: 8px 16px; }
.link-limpar-filtro {
    font-size: 12.5px;
    color: var(--text-secondary);
    white-space: nowrap;
}
.link-limpar-filtro:hover { color: var(--accent-cyan); }

.grade-relatorios-pizza {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}
.cartao-relatorio {
    background: var(--bg-panel-raised);
    border: 1px solid var(--border-steel);
    border-radius: var(--radius, 10px);
    padding: 16px;
    margin-bottom: 14px;
}
.cartao-relatorio h3 {
    font-family: var(--fonte-titulo);
    font-size: 12.5px;
    letter-spacing: .04em;
    color: var(--accent-cyan);
    margin: 0 0 12px;
}
.cartao-relatorio canvas { max-height: 200px; }
.legenda-relatorio { margin-top: 12px; display: flex; flex-direction: column; gap: 5px; }
.legenda-item { font-size: 11.5px; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; }
.legenda-cor { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

.titulo-relatorio-com-export { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.titulo-relatorio-com-export h3 { margin: 0; }
.badge-export-csv {
    font-size: 11px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    background: rgba(74, 222, 128, .14);
    color: var(--success, #4ade80);
    border: 1px solid rgba(74, 222, 128, .3);
}
.badge-export-csv:hover { filter: brightness(1.15); }

.linha-barra-relatorio { display: grid; grid-template-columns: 130px 1fr 90px; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 12px; }
.linha-barra-relatorio-label { color: var(--text-secondary); }
.barra-relatorio-fundo { height: 10px; border-radius: 6px; background: rgba(255,255,255,.06); overflow: hidden; }
.barra-relatorio-preenchida { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-cyan)); border-radius: 6px; }
.linha-barra-relatorio-valor { text-align: right; color: var(--text-secondary); font-family: 'JetBrains Mono', monospace; font-size: 11px; }

.texto-atraso { color: var(--danger); font-weight: 700; font-family: 'JetBrains Mono', monospace; }

.grupo-badges-export { display: flex; gap: 6px; flex-shrink: 0; }
.badge-export-pdf {
    font-size: 11px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    background: rgba(248, 113, 113, .14);
    color: var(--danger);
    border: 1px solid rgba(248, 113, 113, .3);
}
.badge-export-pdf:hover { filter: brightness(1.15); }
.badge-export-excel {
    font-size: 11px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    background: rgba(74, 222, 128, .14);
    color: var(--success, #4ade80);
    border: 1px solid rgba(74, 222, 128, .3);
}
.badge-export-excel:hover { filter: brightness(1.15); }

@media (max-width: 860px) {
    .linha-barra-relatorio { grid-template-columns: 90px 1fr 70px; }
}

/* ===========================================================
   AJUSTE 31 — busca + filtro por nucleo/modulo nas duas telas de
   permissoes (matriz por grupo e excecoes individuais), ja que a
   lista tende a crescer bastante.
   =========================================================== */
.linha-busca-permissao {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 14px 0;
    flex-wrap: wrap;
}
.linha-busca-permissao select {
    width: auto;
    margin: 0;
    height: 38px;
    box-sizing: border-box;
    padding: 0 10px;
    font-size: 12.5px;
}

/* ===========================================================
   AJUSTE 32/33 — legenda visivel de cores (prioridade/status) na
   tela inicial de Atividades, ao lado da aba Relatorios. Rotulo
   "Legenda" em cima, linha de bolinhas embaixo -- reaproveita a
   MESMA classe .bolinha do card do quadro (AJUSTE 33), pra garantir
   que a cor mostrada aqui seja sempre identica a do card.
   =========================================================== */
.legenda-cores-atividades {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-left: 10px;
    padding: 6px 12px;
    background: var(--bg-panel-raised);
    border: 1px solid var(--border-steel);
    border-radius: 8px;
}
.titulo-legenda-cores {
    font-family: var(--fonte-titulo);
    font-size: 9.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-terciario);
}
.linha-legenda-cores {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.legenda-cores-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    color: var(--text-secondary);
    white-space: nowrap;
}
/* Bolinha da legenda usa o mesmo tamanho/estilo fosco do card, sem
   herdar o "position:absolute" do cluster (aqui e so um item de lista). */
.legenda-cores-item .bolinha {
    position: static;
}

/* Legenda clicavel -- pedido explicito: clicar na bolinha (ou no texto ao
   lado) filtra o quadro so' pra aquela categoria. Mesmo destino visual
   de qualquer link/botao clicavel do sistema (leve realce + cursor). */
.legenda-cores-item.legenda-clicavel {
    cursor: pointer;
    border-radius: 20px;
    padding: 2px 8px 2px 4px;
    margin: -2px -8px -2px -4px;
    transition: background .12s ease, color .12s ease;
}
.legenda-cores-item.legenda-clicavel:hover {
    background: var(--bg-panel-raised);
    color: var(--text-primary);
}

@media (max-width: 960px) {
    .legenda-cores-atividades {
        margin-left: 0;
        width: 100%;
        order: 99;
    }
}

/* ===========================================================
   CARD CONFIDENCIAL -- v36
   Acesso restrito a quem criou o card, com criptografia real (ver
   bloco de criptografia confidencial em router.py). Trocado de roxo
   (v35) pra preto + vermelho, estilo fita de isolamento de cena de
   crime -- pedido explicito do usuario, pra ficar mais "alerta
   maxima" do que a protecao por senha comum (dourado/ambar,
   .icone-cadeado-card) ou o compartilhamento (azul/ciano,
   .selo-compartilhado). #dc2626 e' o MESMO vermelho ja usado como
   --danger no tema claro (nao um tom novo inventado sem relacao com
   a paleta existente).
   =========================================================== */

/* Kanban: contorno vermelho no card confidencial, mesmo padrao ja usado
   pra destacar "atrasada" (.kanban-card.atrasada), com outra cor. */
.kanban-card.card-confidencial {
    border: 1.5px solid #dc2626;
    background: linear-gradient(165deg, rgba(220,38,38,.12), var(--bg-panel-raised) 60%);
    box-shadow: 0 0 0 1px rgba(220,38,38,.2), 0 0 16px rgba(220,38,38,.25);
}

/* Faixa "CONFIDENCIAL", estilo fita de isolamento (preto + vermelho
   diagonal, repetindo). Fica no FLUXO NORMAL do card, no lugar exato
   onde o titulo apareceria (ver _atividades_quadro.html -- e o
   substituto do texto "Card confidencial" dentro de
   .kanban-card-titulo-bloco), em vez de position:absolute -- assim
   sempre encaixa certo entre o cabecalho e o rodape do card, nao
   importa a altura exata de cada um. Margem lateral negativa deixa a
   faixa "vazar" um pouco pra fora da area de conteudo (efeito de fita
   colada), cortada pelo "overflow:hidden" do proprio .kanban-card
   (ver regra .kanban-card mais acima no arquivo) quando ultrapassa a
   borda arredondada do card. */
.faixa-confidencial {
    margin: 4px -10px 6px;
    transform: rotate(-2deg);
    background: repeating-linear-gradient(45deg, #0a0a0a 0 8px, #dc2626 8px 16px);
    color: #fff;
    font-weight: 800;
    font-size: 10px;
    letter-spacing: .14em;
    text-align: center;
    padding: 4px 0;
    white-space: nowrap;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.55);
    text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 0 4px #000;
}

/* Bolinha "confidencial" no cluster de indicadores do card (junto da
   bolinha de prioridade, compartilhado etc.) -- metade preta, metade
   vermelha, pedido explicito do usuario. Borda clara (em vez da borda
   escura padrao de .bolinha) pra a metade preta nao "sumir" dentro do
   card, que ja tem fundo escuro no tema padrao. */
.bolinha-confidencial {
    background: linear-gradient(90deg, #0a0a0a 50%, #dc2626 50%);
    border-color: rgba(255,255,255,.55);
}

/* Icone de cadeado do card confidencial no quadro -- precisa das DUAS
   classes juntas (maior especificidade) pra vencer o dourado padrao
   de .icone-cadeado-card, que tambem usa !important (regra "25.4"
   mais acima no arquivo). */
.icone-cadeado-card.icone-cadeado-confidencial {
    color: #dc2626 !important;
}

/* Icone grande da tela "Card confidencial" (mesma ideia do cadeado da
   tela "Atividade protegida", em vermelho em vez de dourado).
   Especificidade maior (duas classes + svg) pra vencer
   ".icone-cadeado svg" por regra, nao por ordem no arquivo. */
.icone-cadeado.icone-cadeado-confidencial svg {
    color: #dc2626 !important;
}

/* Dica "🔐 Abra para excluir" no rodape do card do quadro, no lugar de
   onde ficaria o botao "Excluir" (removido pra card confidencial --
   ver comentario no template). */
.dica-confidencial-acoes {
    font-size: 10.5px;
    color: var(--text-terciario);
    white-space: nowrap;
}

/* Selo "🔐 CONFIDENCIAL" no cabecalho da tela aberta (decifrada) do card. */
.selo-confidencial-topo {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    color: #fff;
    background: linear-gradient(135deg, #1a1a1a, #dc2626);
    padding: 4px 10px;
    border-radius: 8px;
}

/* Aviso fixo na tela aberta do card, explicando que o conteudo so existe
   decifrado NESTA visualizacao (nunca fica salvo em texto puro). */
.aviso-confidencial-detalhe {
    background: rgba(220,38,38,.08);
    border: 1px solid rgba(220,38,38,.3);
    border-radius: 8px;
    padding: 10px 12px;
    margin: 10px 0 16px;
    font-size: 12.5px;
    line-height: 1.5;
}

/* Linha final da tela aberta: "Excluir card" (vermelho, precisa da
   senha ja confirmada) + "Salvar alteracoes" (padrao), um em cada
   ponta -- especificidade maior que ".linha-salvar-final" (regras
   acima, com !important) pra garantir que os dois botoes fiquem
   visualmente diferentes (excluir nao pode parecer um botao neutro
   de salvar). */
.detalhe-confidencial-aberta .linha-salvar-final.linha-salvar-final-confidencial {
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 12px;
    flex-wrap: wrap;
}
.detalhe-confidencial-aberta .linha-salvar-final-confidencial form {
    margin: 0;
    display: inline-flex;
    align-items: center;
    order: -1; /* "Excluir card" sempre antes de "Salvar alteracoes", nesta ordem visual */
}
.detalhe-confidencial-aberta .linha-salvar-final-confidencial .link-excluir {
    /* Mesma altura EXATA do botao "Salvar alteracoes" ao lado -- ver regra
       ".linha-salvar-final button" (AJUSTE FINO 4 / VIDRO LIQUIDO), que usa
       padding: 10px 34px, border 1px, font-size 13px, sem line-height
       proprio (herda o padrao do navegador). A tentativa anterior usava
       padding 9px e line-height:1 -- 1px a menos de cada lado + uma
       line-height mais apertada somavam ~4px de diferenca de altura total,
       o suficiente pra ficar visualmente desalinhado ao lado do Salvar.
       Agora os dois usam padding vertical 10px e a MESMA line-height
       (nenhum dos dois define uma, os dois herdam o padrao do navegador). */
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border: 1px solid var(--danger) !important;
    color: var(--danger) !important;
    padding: 10px 24px !important;
    border-radius: 10px;
    font-size: 13px !important;
    font-weight: 600 !important;
}
.detalhe-confidencial-aberta .linha-salvar-final-confidencial .link-excluir:hover {
    background: rgba(248,113,113,.12) !important;
    filter: none !important;
}

/* Formulario de criar atividade: checkbox + campo de senha do card
   confidencial. .form-nova-atividade e' flex-wrap (nao grid) -- por
   isso o bloco usa flex-basis:100% pra sempre cair numa linha propria,
   em vez de grid-column (que nao teria efeito aqui). */
.campo-confidencial-cca {
    flex-basis: 100%;
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px dashed var(--border-steel);
}
.check-confidencial {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    /* rodada 100: era #dc2626 cravado -- 3,36:1 nos quatro temas. */
    color: var(--danger);
    cursor: pointer;
}
.check-confidencial input { width: auto; }
.bloco-senha-confidencial { margin-top: 8px; max-width: 420px; }
.bloco-senha-confidencial input[type="password"] {
    border-color: rgba(220,38,38,.4);
}
.aviso-confidencial {
    font-size: 11.5px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 6px 0 0;
}

/* ===========================================================
   Acoes em lote no quadro kanban -- checkbox de selecao por card
   e barra flutuante no rodape (ver alternarModoSelecao e afins em
   atividades.html). Fica escondido por padrao; so aparece quando o
   quadro esta em "modo-selecao" (botao "Selecionar" no cabecalho).
   =========================================================== */
.checkbox-selecao-card {
    display: none;
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    width: 17px;
    height: 17px;
    cursor: pointer;
    accent-color: var(--accent);
}
.kanban.modo-selecao .checkbox-selecao-card {
    display: block;
}
/* Da uma folga pro titulo/cluster de bolinhas no topo do card, que senao
   ficaria coberto pela caixa de selecao no canto esquerdo. */
.kanban.modo-selecao .kanban-card {
    padding-left: 30px;
}
/* Mesmo padrao visual/tamanho do "Modo compacto" ao lado (ver
   #btn-modo-compacto acima) -- os dois sao botoes de alternar (toggle) no
   mesmo cabecalho, entao ficam com a MESMA familia (fundo neutro, borda
   sutil) em vez do azul solido generico (que so' pertence a acao
   primaria, tipo "+ Nova"/"Atualizar"/"Salvar"). Sem isso, "Selecionar"
   herdava o azul do <button> global (pensado pra botao de FORMULARIO) e
   ficava maior e destoando dos outros dois botoes do cabecalho. */
#btn-modo-selecao {
    width: auto;
    margin: 0;
    padding: 7px 12px;
    background: var(--bg-panel);
    border: 1px solid var(--border-steel);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
}
#btn-modo-selecao.ativo {
    border-color: var(--accent);
    color: var(--accent-cyan);
}

.barra-selecao-lote {
    display: none;
    position: fixed;
    left: 240px;
    right: 0;
    bottom: 0;
    z-index: 90;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 20px;
    background: var(--bg-panel-raised);
    border-top: 1px solid var(--border-steel);
    box-shadow: 0 -4px 16px rgba(0,0,0,.25);
}
.barra-selecao-lote.aberta {
    display: flex;
}
/* A regra global de "button"/"input"/"select" (topo do arquivo) forca
   width:100% + margin-top:20px, pensada pra botao de FORMULARIO (um por
   linha). Sem este reset, cada botao/campo aqui vira uma faixa inteira da
   largura da tela, empilhada -- exatamente o "tamanho estranho" reportado.
   Mesmo padrao de reset ja usado em ".form-busca button"/".form-busca-com-
   filtros select" (ver acima), agora replicado pra esta barra tambem. */
.barra-selecao-lote button,
.barra-selecao-lote select,
.barra-selecao-lote input[type="text"] {
    width: auto;
    margin: 0;
}
.barra-selecao-lote select,
.barra-selecao-lote input[type="text"] {
    padding: 8px 12px;
    font-size: 13px;
}
.barra-selecao-lote input[type="text"] {
    min-width: 180px;
}
#contagem-selecao-lote {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}
/* "Mover para"/"Atribuir" usam a MESMA familia visual do botao "Atualizar"
   (.btn-solido-azul, ja padrao em Agendamentos e no quadro) -- solido,
   sem blur, sempre a mesma cor -- ver classe aplicada direto no <button>
   em atividades.html. Only o disabled state e' proprio desta barra
   (esses dois ficam desabilitados com 0 selecionada). */
.barra-selecao-lote button:disabled {
    cursor: not-allowed;
    filter: none;
}
.separador-barra-lote {
    width: 1px;
    height: 22px;
    background: var(--border-steel);
    flex-shrink: 0;
}
.btn-cancelar-selecao {
    margin-left: auto !important;
    padding: 8px 16px;
    background: none;
    border: 1px solid var(--border-steel);
    border-radius: 10px;
    color: var(--text-secondary);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}
.btn-cancelar-selecao:hover {
    color: var(--text-primary);
    border-color: var(--text-secondary);
}

@media (max-width: 900px) {
    /* Sidebar colapsa pra largura total (ver ".sidebar" acima, mesmo
       breakpoint) -- a barra de lote acompanha, senao ficaria com uma
       faixa de 240px em branco do lado esquerdo, por cima do conteudo. */
    .barra-selecao-lote {
        left: 0;
        flex-direction: column;
        align-items: stretch;
    }
    .barra-selecao-lote button,
    .barra-selecao-lote select,
    .barra-selecao-lote input[type="text"] {
        width: 100%;
    }
    .barra-selecao-lote .separador-barra-lote {
        display: none;
    }
    .btn-cancelar-selecao {
        margin-left: 0 !important;
    }
}

/* ---------------------------------------------------------------------
   Modulo Chamados -- abas extras (Cartao/Atribuidos/Equipe/Visoes/Triagem)
   e barra de stats do topo (2 cartoes: Abertos/Atrasados). Ver
   templates/chamados.html e app/modulos/chamados/router.py. Reaproveita
   .view-switcher/.kanban/.kanban-coluna/.kanban-card/.badge/.bolinha ja
   existentes (mesmo padrao visual do quadro de Atividades), so' o que
   nao tinha equivalente pronto entra aqui.
   --------------------------------------------------------------------- */
.barra-stats-chamados {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    /* 43B-4 -- densidade: 14 -> 8 em cima e embaixo. */
    margin: 8px 0;
}
.grupo-stats-chamados-esquerda { display: flex; gap: 10px; flex-wrap: wrap; }

/* Botao "Mural e Avisos" -- pedido explicito do usuario, com print em
mao. Reaproveita 100% o sino de notificacoes ja existente (base.html +
atividades.js): so' repassa o clique pro botao real do sino, entao nao
duplica nenhuma logica de backend/JS nova, so' a aparencia do botao aqui
dentro da barra de stats do modulo Chamados. */
.btn-mural-avisos {
    width: auto;
    margin: 0;
    padding: 9px 16px;
    background: var(--bg-panel-raised);
    border: 1px solid var(--border-steel);
    border-radius: 10px;
    color: var(--text-secondary);
    font-size: 12.5px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}
.btn-mural-avisos:hover { border-color: var(--accent); color: var(--accent-cyan); }
.badge-mural-avisos {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
}

.mini-stat-chamados {
    display: flex;
    align-items: baseline;
    /* RODADA 43B-4 -- pedido: "os botoes critico, chamados aberto e
       atrasado um pouco maior, pois precisam ser vistos em evidencia".
       Cresceram: recheio 9x14 -> 11x18. O numero cresce logo abaixo. */
    gap: 9px;
    background: var(--bg-panel-raised);
    border: 2px solid var(--border-steel);
    border-radius: 10px;
    padding: 11px 18px;
    /* Rodada 29 -- os cartoes viraram <a> clicaveis (pedido explicito:
    "ao clicar no botao chamados abertos ou chamados atrasados ele filtra
    para os chamados nessas situaçoes"). Reseta o estilo padrao de link e
    da' feedback visual de que e' clicavel. */
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: filter .15s, transform .15s;
}
.mini-stat-chamados:hover { filter: brightness(1.18); transform: translateY(-1px); }
/* 43B-4 -- numero maior (18 -> 22px) e rotulo um ponto acima: sao os tres
   atalhos que o usuario quis "em evidencia". */
.mini-stat-chamados strong { font-size: 22px; font-family: "Sora", sans-serif; line-height: 1; }
.mini-stat-chamados span { font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
/* Criticos com um degrau a mais que os outros dois: e' o unico que
   interrompe o dia de alguem. */
.mini-stat-chamados-critico strong { font-size: 24px; }
.mini-stat-chamados-branco { border-color: var(--text-primary); }
.mini-stat-chamados-alerta { border-color: var(--danger); }
.mini-stat-chamados-alerta strong { color: var(--danger); }
/* Rodada 30 -- pedido explicito do usuario: "mude a cor do botao criticos
que fica embaixo do modulo chamados para vermelho com preto.. esse botao
do critico tem que chamar mais atencao que os outros.. deixe ele como
primeiro". Fundo preto solido (nao so' borda, pra se destacar dos outros
2 cartoes que usam o mesmo --bg-panel-raised) + borda/numero vermelhos.
".com-destaque" (so' aplicada quando stats.criticos > 0, ver chamados.html)
soma uma pulsacao sutil na borda -- so' pisca quando ha' algo critico de
verdade, fica parado (mas ainda vermelho+preto) quando o contador e' 0. */
.mini-stat-chamados-critico {
    /* Rodada 36: era #1a0505 cravado -- vinho quase preto que sobrava no
       tema branco (o numero, que usa a cor do tema, sumia dentro dele).
       Agora e' o vermelho de alerta com pouca opacidade: escurece no
       escuro e clareia no claro sozinho. */
    background: var(--fundo-critico);
    border-color: var(--danger);
}
.mini-stat-chamados-critico strong,
.mini-stat-chamados-critico span { color: var(--danger); }
.mini-stat-chamados-critico.com-destaque { animation: pulsar-critico 1.8s ease-in-out infinite; }
@keyframes pulsar-critico {
    0%, 100% { box-shadow: 0 0 0 0 rgba(248, 113, 113, .55); }
    50% { box-shadow: 0 0 0 6px rgba(248, 113, 113, 0); }
}

/* Rodada 30 -- "Colunas" maior + chips arredondados no lugar dos
checkboxes quadrados (pedido explicito: "aumente o botao colunas... e
quando clica nele o visual dos botoes nao gostei de quadrado"). */
.btn-colunas-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    background: var(--bg-panel-raised);
    border: 1px solid var(--border-steel);
    color: var(--text-primary);
}
.btn-colunas-toggle:hover { border-color: var(--accent); }
.chip-toggle-coluna {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid var(--border-steel);
    background: var(--bg-panel);
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
    transition: background .15s, border-color .15s, color .15s;
}
.chip-toggle-coluna input[type="checkbox"] { display: none; }
.chip-toggle-coluna:has(input:checked) {
    background: var(--accent-solido);
    border-color: var(--accent-solido);
    color: #fff;
}

/* Rodada 30 -- cronometro regressivo de SLA na Estilo Grade. */
.cronometro-sla {
    display: inline-block;
    font-family: var(--fonte-titulo);
    font-size: 11px;
    letter-spacing: .03em;
    color: var(--text-secondary);
}
.cronometro-sla.sla-alerta { color: var(--danger); }

/* Rodada 30 -- pedido explicito do usuario: "o estilo grade ta translucida
eu quero que o fundo dela seja preenchido.. igual no quadro das legendas".
Achado real: nenhum elemento da grade (table/thead/tbody/tr) tinha
background nenhum -- so' existiam bordas finas entre linhas (ver "table {
border-collapse }" mais acima), entao o fundo animado (rede de conexoes)
aparecia por baixo de tudo, dando a impressao de transparencia. Mesmo
tratamento solido/opaco de .legenda-cores-atividades (var(--bg-panel-raised)
+ borda + cantos arredondados), aplicado no container que envolve TODAS as
abas (Grade/Cartao/Atribuidos/Triagem/Equipe/Visoes) pra manter a mesma
linguagem visual em todo o modulo, nao so' na Grade. */
/* Rodada 31 -- REVERSAO deliberada (pedido explicito do usuario, com print
   riscado de vermelho): "quero fundo somente dentro das linhas.. o resto
   pode tirar o quadro e deixar tudo translucido.. e botoes fora do quadro
   como era antes". O quadro solido em volta de cada aba (rodada 29) sai;
   quem tem fundo agora sao SO os elementos de conteudo (linha da tabela,
   barrinha de chamado, card do kanban, item da triagem) -- ver classes
   logo abaixo. A barra de abas/legenda (#abas-chamados) nao muda. */
.painel-aba-chamados {
    margin-top: 6px;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
}
/* Grade: fundo so nas linhas de chamado (a area entre as linhas vermelhas
   do print do usuario) -- cabecalho/filtros/botoes ficam translucidos. */
#tabela-grade-chamados tbody tr { background: var(--bg-panel-raised); }
/* Equipe: mesmo tratamento (fundo so nas linhas de pessoa). */
.tabela-resumo-equipes-chamados tbody tr { background: var(--bg-panel-raised); }
#tabela-grade-chamados tbody tr:hover { background: rgba(255, 255, 255, .03); }

/* Rodada 29 -- linha inteira da Estilo Grade clicavel (pedido explicito:
"que ao clicar em qualquer linha da grade ela va para o chamado"). */
.linha-grade-chamado-clicavel { cursor: pointer; }
.linha-grade-chamado-clicavel:hover { background: rgba(255,255,255,.04); }

.bloco-atribuicao-chamados {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 900px) {
    .bloco-atribuicao-chamados { grid-template-columns: 1fr; }
}
.bloco-atribuicao-chamados h3 {
    margin: 0 0 10px;
    font-size: 14px;
}
.lista-chamados-compacta { display: flex; flex-direction: column; gap: 8px; }
.item-chamado-compacto {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: var(--bg-panel-raised);
    border: 1px solid var(--border-steel);
    border-radius: 10px;
    padding: 10px 12px;
}
.item-chamado-compacto.atrasado { border-color: var(--danger); }
.item-chamado-compacto-info { display: flex; flex-direction: column; gap: 2px; }
.item-chamado-compacto-info small { color: var(--text-secondary); }

/* Layout em LINHA da aba Atribuidos/Nao atribuidos -- substitui os cards
empilhados antigos (.item-chamado-compacto, mantida acima so' pra
Triagem, que ainda usa o formato antigo). Pedido explicito do usuario,
com print em mao: "botao assumir na linha... o numerador de
quantidade". */
.bloco-fila-atribuicao { margin-bottom: 22px; }
.titulo-bloco-fila {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    margin: 0 0 10px;
}
.badge-contagem-fila {
    background: var(--bg-panel-raised);
    border: 1px solid var(--border-steel);
    border-radius: 999px;
    padding: 1px 9px;
    font-size: 12px;
    color: var(--text-secondary);
}
.lista-linhas-chamados { display: flex; flex-direction: column; gap: 8px; }
.linha-chamado-fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: var(--bg-panel-raised);
    border: 1px solid var(--border-steel);
    border-radius: 10px;
    padding: 10px 14px;
}
.linha-chamado-fila.atrasado { border-color: var(--danger); }

/* Rodada 29 -- redesenho das linhas de Atribuidos/Nao atribuidos (v2).
Pedido explicito do usuario: "no texto da barrinha quero que tenha.. o
botao.. o numero do chamado.. a descricao.. nome de quem abriu.. o
setor.. em texto visivel nao muito pequeno.. a categoria.. o nome de
quem assumiu sem a inicial.. data hora de criacao e status.. que ela
tenha no canto esquerdo dela a linha da cor da prioridade". Grid (nao
flex) pra manter cada campo alinhado em coluna entre uma linha e outra,
com border-left colorido por prioridade fazendo o papel da "bolinha".
"na visao da grade nao ficar translucido" -- fundo solido (nao
--bg-panel-raised com alpha), sem rgba/opacity aqui de proposito. */
.linha-chamado-fila-v2 {
    display: grid;
    /* ATENCAO: esta declaracao NAO e' a que vale na tela. Ha' uma segunda
       `.linha-chamado-fila-v2` mais abaixo neste arquivo (a da rodada 115, que
       poe data e status em `max-content`) e, em empate de peso, quem vence e' a
       ULTIMA. A rodada 131 tentou alargar o titulo aqui primeiro e nao mudou
       nada na tela -- a suite 131 pegou. A largura das colunas mora la'. */
    grid-template-columns: auto auto minmax(160px, 1.6fr) minmax(100px, 1fr) minmax(90px, 1fr) auto minmax(110px, 1fr) 130px auto;
    align-items: center;
    gap: 12px;
    background: var(--bg-panel-raised);
    border: 1px solid var(--border-steel);
    border-left: 4px solid var(--border-steel);
    border-radius: 10px;
    padding: 10px 14px;
    cursor: pointer;
}
.linha-chamado-fila-v2:hover { border-color: var(--accent); }
.linha-chamado-fila-v2.atrasado { border-color: var(--danger); }
.linha-chamado-fila-v2[draggable="true"] { cursor: grab; }
.linha-chamado-fila-v2 form { margin: 0; }
.linha-chamado-fila-v2 .btn-vidro { padding: 6px 12px; font-size: 12px; }
.linha-v2-campo { font-size: 13px; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linha-v2-numero { color: var(--text-secondary); font-size: 12.5px; }
/* RODADA 131 -- O TITULO APARECE INTEIRO.
   Pedido dele com print: "quero que ajuste para o texto do titulo apareca
   completo". Ele herdava o `white-space: nowrap` de `.linha-v2-campo`, que
   existe para as colunas curtas (numero, equipe, atendente) nao empurrarem a
   grade -- e para o titulo, que e' o texto mais longo da linha, esse mesmo
   valor era o que o cortava.

   DUAS LINHAS, e nao ilimitado: `line-clamp` mantem a altura da linha
   previsivel quando alguem cola um assunto de e-mail inteiro no titulo. Nos
   chamados dele nenhum titulo passa de duas linhas na largura nova, entao na
   pratica ninguem ve' reticencia -- e quando ver, o `title` continua tendo o
   texto completo para o mouse. */
.linha-v2-titulo {
    font-weight: 600;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}
.linha-v2-secundario { color: var(--text-secondary); }
.borda-prioridade-baixa { border-left-color: var(--cor-prioridade-baixa) !important; }
.borda-prioridade-media { border-left-color: var(--cor-prioridade-media) !important; }
.borda-prioridade-alta { border-left-color: var(--cor-prioridade-alta) !important; }
.borda-prioridade-critica { border-left-color: #a855f7 !important; }
/* Zona de drop ativa -- feedback visual enquanto arrasta um chamado de
"Nao atribuidos" por cima de "Meus chamados atribuidos" (dragover). */
.zona-drop-ativa {
    outline: 2px dashed var(--accent);
    outline-offset: 4px;
    border-radius: 10px;
}
@media (max-width: 1100px) {
    .linha-chamado-fila-v2 { grid-template-columns: auto auto 1fr; grid-auto-flow: row; }
}
.linha-chamado-fila-info {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
}
.linha-chamado-fila-numero { color: var(--text-secondary); font-size: 12.5px; white-space: nowrap; }
.linha-chamado-fila-titulo { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.linha-chamado-fila-meta { color: var(--text-secondary); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.linha-chamado-fila-acoes { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.btn-acao-linha-chamado {
    width: auto;
    margin: 0;
    padding: 6px 14px;
    font-size: 12px;
    border-radius: 8px;
    cursor: pointer;
}
.btn-acao-linha-chamado:hover { filter: brightness(1.3); }
@media (max-width: 700px) {
    .linha-chamado-fila { flex-wrap: wrap; }
}

.tabela-resumo-equipes-chamados td, .tabela-resumo-equipes-chamados th { padding: 9px 10px; }
.tabela-resumo-equipes-chamados .num-atrasados { color: var(--danger); font-weight: 700; }

.grupo-triagem-chamados { margin-bottom: 18px; }
.grupo-triagem-chamados h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    margin: 0 0 10px;
}
.grupo-triagem-chamados h3 .contagem-triagem {
    background: var(--bg-panel-raised);
    border: 1px solid var(--border-steel);
    border-radius: 999px;
    padding: 1px 9px;
    font-size: 12px;
}
.grupo-triagem-atrasados h3 { color: var(--danger); }

/* ---------------------------------------------------------------------
   Modulo Chamados -- rodada de paridade visual com o mockup (pedido
   explicito do usuario, com print em mao: "eu quero exatamente igual o
   visual"). Ver templates/chamados.html (aba Estilo Grade). Reaproveita
   .legenda-cores-atividades/.titulo-legenda-cores/.linha-legenda-cores/
   .legenda-cores-item/.legenda-clicavel (ja existentes, usadas em
   Atividades) e .chip-tag/.avatar-iniciais (ja existentes) -- so' o que
   nao tinha equivalente pronto entra aqui.
   --------------------------------------------------------------------- */

/* Badge de status colorido na tabela -- "aberto"/"em_atendimento"/
   "aguardando_cliente" nao tinham cor propria antes (so' o badge cinza
   padrao); "solucionado"/"cancelado" continuam reaproveitando badge-ok/
   badge-erro que ja existem. */
.badge-status-aberto { border-color: var(--accent); color: var(--accent); }
.badge-status-atendimento { border-color: var(--cor-vencendo); color: var(--cor-vencendo); }
.badge-status-aguardando { border-color: var(--text-secondary); color: var(--text-secondary); }

/* Texto curto colorido da coluna SLA (ver _texto_sla em router.py) --
   substitui a data/hora crua por algo tipo "25 min"/"3h restantes"/
   "Pausado", na cor certa pra dar o alerta visual de relance. */
.sla-atrasado { color: var(--danger); font-weight: 700; }
.sla-alerta { color: var(--cor-vencendo); font-weight: 700; }
.sla-ok { color: var(--success); font-weight: 600; }
.sla-pausado { color: var(--text-secondary); font-weight: 600; }

/* Rodada 44A -- linha de apoio do congelamento de SLA no detalhe do
   chamado ("parado ha 2 dias / 5h de pausa acumulada"). Secundaria de
   proposito: o dado principal continua sendo o selo de prazo acima. */
.apoio-pausa-sla {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    line-height: 1.3;
    color: var(--text-terciario);
}

/* Rodada 27c -- pedido explicito do usuario, apos duas tentativas de
   recriar o visual "olhando" pra imagem de referencia ainda nao terem
   ficado identicas: "copie exatamente o codigo do modulo atividades...
   nao tem dificuldade nisso, copia exatamente como e' no outro modulo".
   A partir daqui a caixa de legenda NAO fica mais separada -- ela e'
   filha direta do proprio #abas-chamados/.view-switcher (exatamente como
   .legenda-cores-atividades e' filha direta de .view-switcher em
   Atividades -- ver templates/atividades.html), entao nao precisa mais de
   nenhuma correcao de margem/gap aqui: e' a mesma caixa unica, sem hack. */

/* Caixa de legenda + "status combina com a legenda" lado a lado dentro
   dela -- unico acrescimo proprio de Chamados (Atividades nao tem esse
   segundo bloco), separado por uma linha divisoria vertical. */
.linha-legenda-com-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.divisor-legenda-status {
    width: 1px;
    align-self: stretch;
    background: var(--border-steel);
    flex-shrink: 0;
}
@media (max-width: 960px) {
    .divisor-legenda-status { display: none; }
}
.bloco-status-combina-legenda {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-end;
}
.bloco-status-combina-legenda select { margin: 0; }

/* Rodada 29 -- pedido explicito do usuario: "todos esses botoes que citei
   (Meus chamados/Todos, Assumir, SLA estourado, Nao atribuido) seguir o
   padrao do botao + NOVO CHAMADO". O botao "+ Novo chamado" (.btn-nova-
   inline) usa o padrao "vidro liquido" do sistema (fundo translucido +
   backdrop-filter: blur, ver bloco "VIDRO LIQUIDO" mais acima neste
   arquivo) -- .btn-vidro abaixo e' a MESMA aparencia, generica o
   suficiente pra aplicar em <a>/<button> nesses 4 lugares sem duplicar as
   ~10 propriedades em cada selector. Substitui o experimento anterior
   (.abas-admin/.chip-filtro copiados do Atividades/Administracao) -- o
   usuario aprovou a ESTRUTURA da rodada passada (legenda numa caixa so',
   sem gap), so' pediu um visual de botao diferente agora. */
.btn-vidro {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: auto;
    margin: 0;
    padding: 8px 16px;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    background: var(--vidro-16) !important;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, .12) !important;
    box-shadow:
        0 4px 18px -8px var(--vidro-sombra),
        inset 0 1px 0 rgba(255, 255, 255, .12) !important;
    color: var(--vidro-texto) !important;
    text-shadow: none !important;
    transition: filter .2s, background .2s;
}
.btn-vidro:hover {
    filter: brightness(1.12);
    background: var(--vidro-22) !important;
}
/* Estado "selecionado" -- usado no alternador Meus chamados/Todos (so' um
   dos dois fica com esse destaque por vez, o outro fica no vidro normal
   acima). Mesmo verniz, so' um pouco mais opaco/brilhante. */
.btn-vidro.ativo {
    background: var(--vidro-28) !important;
    border-color: rgba(255, 255, 255, .28) !important;
}
/* Estado "filtro ligado" dos botoes SLA estourado/Nao atribuido -- cores
   semanticas de alerta/sucesso (mesmo par ja usado no resto do sistema),
   sobrescrevendo o vidro azul padrao so' quando o filtro correspondente
   esta ativo na querystring. */
.btn-vidro.badge-erro {
    background: var(--danger) !important;
    border-color: var(--danger) !important;
    color: var(--vidro-texto-forte) !important;
}
.btn-vidro.badge-ok {
    background: var(--success) !important;
    border-color: var(--success) !important;
    color: #04101f !important;
}
.grupo-toggle-ver {
    display: inline-flex;
    gap: 6px;
}
/* Bolinha fixa dos botoes SLA estourado (preta)/Nao atribuido (branca) --
   pedido explicito do usuario, cor FIXA (nao muda com o estado ativo/
   desativado do filtro, diferente do fundo do botao acima). */
.bolinha-toggle-vidro {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.bolinha-toggle-vidro.preta { background: #000; border: 1px solid rgba(255,255,255,.45); }
.bolinha-toggle-vidro.branca { background: #fff; border: 1px solid rgba(0,0,0,.35); }

/* Linha "texto explicativo da view + botao Colunas", alinhados nas
   pontas -- mesmo texto/posicao ja usado nas abas Cartao/Equipe
   (.rotulo-opcao-desc), so' que aqui precisa dividir espaco com o botao. */
.linha-descricao-colunas-chamados {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.linha-descricao-colunas-chamados .rotulo-opcao-desc { margin: 0; flex: 1; min-width: 240px; }
/* 43B-4 -- essa linha so' segura Exportar/Colunas na direita; nao precisa
   de uma faixa inteira de altura. */
.linha-colunas-compacta { margin: 0 0 6px; }

/* ===========================================================
   Rodada 30 -- "Cliente reestruturado": formulario de Cliente (Editar E
   Novo cliente, administracao_clientes.html) virou secoes rotuladas em
   grid, no lugar da fileira flat de N inputs sem legenda que existia
   antes (mesma familia de bug ja corrigido em Categoria/chamados: campos
   demais soltos numa .form-departamento-novo viram flex item bagunçado).
   Tambem serve de base pro botao "Cancelar" generico em forms de edicao
   (.btn-cancelar-form), pedido explicito do usuario pra Administracao. */
.form-cliente-estruturado {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 20px;
    max-width: 720px;
}
.form-cliente-estruturado fieldset {
    border: 1px solid var(--border-steel);
    border-radius: 10px;
    padding: 12px 14px 14px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px 14px;
}
.form-cliente-estruturado legend {
    font-family: var(--fonte-titulo);
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-secondary);
    padding: 0 6px;
}
.form-cliente-estruturado label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: var(--text-secondary);
}
.form-cliente-estruturado label input {
    height: 36px;
    box-sizing: border-box;
    padding: 0 10px;
    border-radius: 8px;
    background: var(--campo-fundo);
    border: 1px solid rgba(255,255,255,.12);
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
}
.form-cliente-estruturado label input[type="file"] { padding: 6px 10px; height: auto; }
.form-cliente-acoes { display: flex; gap: 10px; }

/* RODADA 96 -- o "Salvar" do cadastro do cliente vinha do `button` generico,
   que e' `width: 100%`: uma faixa atravessando os 720px do formulario, sem cor
   propria, parecendo divisoria e nao botao. Relato da Kamile: "diminuir esse
   botao de salvar e colocar em verde ou azul. Segue o padrao das plataformas".
   Largura pelo conteudo e a cor de acao que o resto do sistema ja' usa
   (--accent), em vez de mais um azul escrito a mao aqui. */
.form-cliente-estruturado > button[type="submit"] {
    align-self: flex-start;
    width: auto;
    margin-top: 4px;
    padding: 9px 26px;
    font-size: 13px;
    background: var(--accent);
    border-color: var(--accent);
    color: #f4f7fd;
}
.form-cliente-estruturado > button[type="submit"]:hover { filter: brightness(1.08); }

/* Botao "Cancelar" generico -- pedido explicito do usuario em forms de
   edicao inline (details/summary): fecha o painel sem submeter nada,
   visualmente secundario (outline) pra nao competir com o Salvar. */
.btn-cancelar-form {
    background: transparent !important;
    border: 1px solid var(--border-steel) !important;
    color: var(--text-secondary) !important;
}
.btn-cancelar-form:hover { color: var(--text-primary) !important; border-color: var(--text-secondary) !important; }

/* Rodada 30 -- barra de "Permissões em lote" (administracao_permissoes.html) */
.barra-permissoes-lote {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-panel-raised);
    border: 1px solid var(--border-steel);
    border-radius: 10px;
    padding: 10px 14px;
    margin: 10px 0 16px;
    flex-wrap: wrap;
}
.barra-permissoes-lote .detalhe-meta { margin: 0; margin-right: auto; }

/* ===========================================================
   Rodada 30 -- redesenho visual do Detalhe do chamado (chamados_detalhe.
   html): grid de 2 colunas (conteudo + sidebar de cards de resumo/acoes),
   no lugar da coluna unica com uma <table> crua no meio. */
.detalhe-chamado-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 18px;
    align-items: start;
    max-width: 1100px;
}
.painel-detalhe-chamado {
    background: var(--bg-panel-raised);
    border: 1px solid var(--border-steel);
    border-radius: 10px;
    padding: 18px;
}
.sidebar-detalhe-chamado {
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: sticky;
    top: 14px;
}
.card-resumo-chamado {
    background: var(--bg-panel-raised);
    border: 1px solid var(--border-steel);
    border-radius: 10px;
    padding: 14px;
}
.card-resumo-chamado h3 {
    margin: 0 0 10px;
    font-family: var(--fonte-titulo);
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.card-resumo-chamado dl { margin: 0; }
.card-resumo-chamado dt {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 8px;
}
.card-resumo-chamado dt:first-child { margin-top: 0; }
.card-resumo-chamado dd {
    margin: 1px 0 0;
    font-size: 13px;
}
.card-resumo-sla-atrasado { border-color: var(--danger); }
@media (max-width: 900px) {
    .detalhe-chamado-grid { grid-template-columns: 1fr; }
    .sidebar-detalhe-chamado { position: static; }
}

/* ===========================================================
   Rodada 30 -- Painel do Solicitante (chamados_painel.html /
   chamados_painel_novo.html). Grade de "icones" grandes clicaveis pro
   form de 2 passos (Equipe -> Categoria), e o botao flutuante de chat
   placeholder (canto inferior direito, mesmo espirito do botao
   flutuante global pedido pra' toda a intranet -- ver Extras 2). */
.grade-icones-selecao {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
    max-width: 760px;
}
.card-icone-selecao {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    background: var(--bg-panel-raised);
    border: 1px solid var(--border-steel);
    border-radius: 12px;
    padding: 22px 14px;
    text-decoration: none;
    color: var(--text-primary);
    transition: transform .15s, border-color .15s;
}
.card-icone-selecao:hover { transform: translateY(-2px); border-color: var(--accent); }
.card-icone-selecao-emoji { font-size: 28px; }
.botao-flutuante-chat {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--accent-solido);
    color: #fff;
    border: none;
    font-size: 22px;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0,0,0,.4);
    z-index: 50;
}
.botao-flutuante-chat:hover { filter: brightness(1.1); }

/* Rodada 30 -- ordenacao por clique no cabecalho da Estilo Grade.
   RODADA 114 -- `.preview-hover-chamado` saiu daqui: a previa ao passar o
   mouse foi retirada da grade a pedido do usuario. */
.th-ordenavel { cursor: pointer; user-select: none; }
.th-ordenavel:hover { color: var(--accent); }
/* ===========================================================================
   Rodada 31 -- Detalhe do chamado refeito COPIANDO o mockup aprovado
   (layout_modelo_chamados_escuro_revisao.html), pedido explicito do usuario:
   "tu nao fez exatamente como eu mandei nas telas... vamos revisar denovo".
   Mesmo metodo da secao 28 da documentacao: copiar o componente real do
   mockup, nao recriar de cabeca. Classes portadas 1:1 do mockup; as classes
   da versao anterior (.detalhe-chamado-grid/.card-resumo-chamado/...) ficam
   no CSS por compatibilidade, mas o template nao usa mais.
   =========================================================================== */

/* Painel externo da tela de chamado aberto (mesma "moldura" do mockup) */
.painel-detalhe-split {
    background: var(--modal-fundo);
    /* HOTFIX 100A -- PISO OPACO. A linha de cima e' um GRADIENTE, e o reset
       `body.tema-minimalista * { background-image: none !important }` apaga
       gradiente de tudo. Como `background:` e' atalho, ele tambem zera a cor
       de fundo -- e no Minimalista e no Papel Branco esta superficie ficava
       com `rgba(0,0,0,0)` e `none`: transparente de verdade, com a tela de
       tras lida por cima do texto do modal. Medido no Chromium.
       Esta longhand vem DEPOIS de proposito: o atalho define imagem e cor,
       ela substitui so' a cor. Onde o gradiente sobrevive ele cobre; onde for
       apagado, sobra painel opaco em vez de nada. */
    background-color: var(--bg-panel);
    border: 1px solid var(--border-steel);
    border-radius: var(--radius);
    padding: 22px 26px;
}
.tela-chamado-aberto { max-width: 880px; }
.tela-chamado-aberto.variante-larga { max-width: 1100px; }
.link-voltar-lista {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    margin-bottom: 14px;
}

/* Seletor "Layout da tela" -- Unico / Em abas / Painel lateral */
.seletor-variante-detalhe { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.rotulo-seletor-variante { font-size: 11.5px; color: var(--text-secondary); margin-right: 2px; }
.seletor-variante-detalhe button {
    width: auto; margin: 0; padding: 7px 14px; font-size: 11.5px; border-radius: 20px;
    background: var(--bg-panel-raised); border: 1px solid var(--border-steel); color: var(--text-secondary);
}
.seletor-variante-detalhe button.ativo { background: var(--accent); border-color: var(--accent); color: #04101f; font-weight: 600; }

/* Variante B -- abas Resumo / Conversa / Historico */
.abas-variante-b { display: none; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--border-steel); }
.abas-variante-b button {
    width: auto; margin: 0; padding: 10px 18px; font-size: 12.5px; border-radius: 0;
    background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-secondary);
}
.abas-variante-b button.ativo { color: var(--text-primary); border-bottom-color: var(--accent); font-weight: 600; }
#corpo-detalhe-chamado[data-variante="b"] .abas-variante-b { display: flex; }

/* Variante D -- painel lateral (resumo/historico no centro, chat fixo) */
#corpo-detalhe-chamado[data-variante="d"] {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 22px;
    align-items: start;
}
#corpo-detalhe-chamado[data-variante="d"] .bloco-resumo-chamado { grid-column: 1; }
#corpo-detalhe-chamado[data-variante="d"] .historico-chamado { grid-column: 1; margin-top: 0; }
#corpo-detalhe-chamado[data-variante="d"] .chat-painel {
    grid-column: 2;
    grid-row: 1 / span 2;
    border-top: none;
    padding-top: 0;
    margin-top: 0;
    position: sticky;
    top: 12px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    background: var(--bg-panel-raised);
    border: 1px solid var(--border-steel);
    border-radius: var(--radius);
    padding: 16px;
}
@media (max-width: 960px) {
    #corpo-detalhe-chamado[data-variante="d"] { grid-template-columns: 1fr; }
    #corpo-detalhe-chamado[data-variante="d"] .chat-painel { grid-column: 1; grid-row: auto; position: static; max-height: none; border-top: 1px solid var(--border-steel); padding-top: 14px; margin-top: 16px; }
}

/* Grade de campos somente-leitura do cabecalho do chamado */
/* RODADA 43B-3 -- FLEX, e nao grid.
   O grid com auto-fit fatiava a largura em colunas FIXAS: com 5 campos e
   espaco pra 4, o quinto caia sozinho e sobravam 3 colunas vazias do lado
   (o buraco que o usuario circulou no mockup). E nao era caso isolado -- a
   quantidade de campos VARIA de chamado pra chamado ("Cliente" so' existe
   em chamado externo), entao qualquer numero fixo de colunas deixa buraco
   em algum chamado.
   No flex nao ha' colunas: o espaco que sobra e' distribuido ENTRE os
   quadros da propria fileira (flex-grow), entao toda fileira fecha cheia,
   com 2, 3, 5 ou 8 campos. `flex-basis: 130px` e' so' o ponto em que ele
   decide quebrar a linha. */
.grade-campos-chamado {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}
.grade-campos-chamado > .campo-somente-leitura { flex: 1 1 130px; min-width: 0; }
/* Segunda fileira: os campos de CADASTRO. Mesma caixa, borda apagada --
   continuam na tela, so' param de disputar atencao com o SLA. */
.grade-campos-cadastro { margin-bottom: 10px; }
.campo-cadastro {
    background: transparent !important;
    border-color: rgba(122, 130, 150, .28) !important;
}
.campo-somente-leitura {
    background: var(--bg-panel-raised);
    border: 1px solid var(--border-steel);
    border-radius: 8px;
    /* 8/12 -> 5/9: corta ~18px de altura por fileira SEM encolher o texto
       que se le'. O que sai e' folga vazia, nao informacao. */
    padding: 5px 9px;
}
.campo-somente-leitura .rotulo-campo-pequeno { display: block; margin-bottom: 1px; font-size: 9px; }

/* Chip de categoria (mesma capsula colorida do mockup) */
.chip-categoria {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 10.5px;
    font-weight: 600;
    white-space: nowrap;
}

/* Numero do chamado -- mono, discreto */
.numero-chamado {
    font-family: "JetBrains Mono", monospace;
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 600;
}

.selo-sla-ok {
    font-size: 10.5px;
    color: var(--success);
    font-family: "JetBrains Mono", monospace;
    background: rgba(52,211,153,.12);
    padding: 2px 8px;
    border-radius: 8px;
}

/* Botao "Gerar atividade" no cabecalho do detalhe */
.btn-gerar-atividade {
    width: auto;
    margin: 0;
    padding: 7px 14px;
    font-size: 12px;
    background: var(--bg-panel-raised);
    border: 1px solid var(--border-steel);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.btn-gerar-atividade:hover { border-color: var(--accent); color: var(--accent-cyan); }

/* Colaborador no chamado (linha "Fulano esta ajudando") */
.bloco-colaboradores {
    display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 11.5px; color: var(--text-secondary);
}
.avatares-colaboradores { display: flex; }
.avatares-colaboradores .avatar-iniciais { margin-left: -8px; border: 2px solid var(--bg-panel); }
.avatares-colaboradores .avatar-iniciais:first-child { margin-left: 0; }

/* Chat embutido no detalhe do chamado (Conversa com o solicitante) */
.chat-painel {
    display: flex;
    flex-direction: column;
    margin-top: 16px;
    border-top: 1px solid var(--border-steel);
    padding-top: 14px;
}
.chat-titulo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.chat-titulo h4 { margin: 0; }
.chat-status-online {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    color: var(--text-secondary);
}
.chat-status-online::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 6px var(--success);
}
.chat-mensagens {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 260px;
    overflow-y: auto;
    padding: 4px 4px 8px;
}
#corpo-detalhe-chamado[data-variante="d"] .chat-mensagens { max-height: 420px; }
.chat-linha { display: flex; flex-direction: column; max-width: 78%; }
.chat-linha.recebida { align-self: flex-start; align-items: flex-start; }
.chat-linha.enviada { align-self: flex-end; align-items: flex-end; }
.chat-bolha {
    padding: 9px 13px;
    border-radius: 14px;
    font-size: 13px;
    line-height: 1.45;
    white-space: pre-wrap;
}
.chat-linha.recebida .chat-bolha {
    background: var(--bg-panel-raised);
    border: 1px solid var(--border-steel);
    border-bottom-left-radius: 4px;
    color: var(--text-primary);
}
.chat-linha.enviada .chat-bolha {
    background: linear-gradient(135deg, var(--accent), var(--accent-cyan));
    border-bottom-right-radius: 4px;
    color: #04101f;
    font-weight: 500;
}
/* Comentario interno dentro da conversa -- mesma bolha, borda de destaque */
.chat-linha .chat-bolha.bolha-interna {
    border-left: 3px solid var(--accent);
}
.chat-meta {
    font-size: 10px;
    color: var(--text-secondary);
    font-family: "JetBrains Mono", monospace;
    margin-top: 3px;
    padding: 0 4px;
}
.chat-form {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    align-items: center;
}
.chat-form input[type="text"] { flex: 1; width: auto; min-width: 0; }
.chat-anexo-btn {
    width: auto;
    margin: 0;
    padding: 9px 12px;
    background: var(--bg-panel-raised);
    border: 1px solid var(--border-steel);
    color: var(--text-secondary);
    font-size: 14px;
}
.chat-anexo-btn:hover { border-color: var(--accent); color: var(--accent-cyan); }
.chat-enviar-btn { width: auto; margin: 0; padding: 9px 18px; }

/* Respostas rapidas (macros) acima do campo de digitar no chat */
.macros-chat { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 2px; }
.macros-chat button {
    width: auto; margin: 0; padding: 5px 11px; font-size: 11px;
    background: var(--bg-panel-raised); border: 1px solid var(--border-steel); color: var(--text-secondary);
    border-radius: 20px;
}
.macros-chat button:hover { border-color: var(--accent); color: var(--accent-cyan); }

/* Historico/timeline do chamado */
.historico-chamado {
    margin-top: 16px;
    border-top: 1px solid var(--border-steel);
    padding-top: 14px;
}
.historico-chamado h4 { margin: 0 0 12px; font-size: 13px; }
.historico-lista { display: flex; flex-direction: column; }
.historico-item { display: flex; gap: 10px; padding-bottom: 14px; position: relative; }
.historico-item::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 14px;
    bottom: 0;
    width: 1px;
    background: var(--border-steel);
}
.historico-item:last-child { padding-bottom: 0; }
.historico-item:last-child::before { display: none; }
.historico-ponto {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--accent);
    margin-top: 4px;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.historico-corpo { flex: 1; font-size: 12px; line-height: 1.4; }
.historico-meta {
    color: var(--text-secondary);
    font-size: 10.5px;
    font-family: "JetBrains Mono", monospace;
    margin-top: 2px;
}

/* Painel "Possivel Resolucao" (sugestao da IA) -- por enquanto placeholder
   visual (o modulo de IA/Base de Conhecimento ainda nao existe), mas com o
   MESMO visual do mockup pra tela ja nascer no layout aprovado. */
/* RODADA 43B-3 -- a sugestao da IA deixou de ser painel e virou uma linha
   recolhida no fim do Resumo (ver o porque no comentario do template).
   .painel-ia-sugestao continua definido de proposito: no dia em que a Base
   de Conhecimento existir, o bloco volta a ser painel sem precisar
   reescrever o estilo. */
/* RODADA 136 -- O DIA CHEGOU, E A APOSTA DA 43B-3 PAGOU: o bloco voltou a ser
   `.painel-ia-sugestao` e estas regras estavam aqui, intactas, esperando. Nao
   se reescreveu uma linha de estilo -- so' se acrescentou a lista abaixo, que
   nao existia porque antes nao havia o que listar.

   `.linha-ia-sugestao` FICA, e nao vira codigo morto: e' o estado do chamado
   cuja categoria ainda nao tem artigo nenhum, e do cliente que nao contratou o
   modulo 7. */
.painel-ia-sugestao {
    background: linear-gradient(135deg, rgba(47,111,237,.09), rgba(6,182,212,.06));
    border: 1px solid rgba(47,111,237,.30);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin: 16px 0;
}
.linha-ia-sugestao {
    margin: 10px 0 0;
    border: 1px solid var(--border-steel);
    border-radius: 8px;
    background: var(--bg-panel-raised);
}
.linha-ia-sugestao > summary {
    cursor: pointer;
    padding: 7px 12px;
    font-size: 12px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
}
.linha-ia-sugestao > summary:hover { color: var(--text-primary); }
.linha-ia-sugestao[open] > summary { border-bottom: 1px solid var(--border-steel); }
.linha-ia-sugestao > p { margin: 8px 12px; }
.linha-ia-sugestao > p:last-child { margin-bottom: 10px; }
.ia-sugestao-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}
.ia-sugestao-cabecalho h4 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
}
.selo-ia-confianca {
    font-size: 10px;
    font-family: "JetBrains Mono", monospace;
    color: var(--accent-cyan);
    background: rgba(47,111,237,.14);
    padding: 2px 8px;
    border-radius: 8px;
    white-space: nowrap;
}
/* RODADA 136 -- a lista de artigos sugeridos. O titulo e' link, e o resumo
   vem embaixo em texto menor: quem esta' atendendo le' o titulo para decidir
   se abre, e o resumo so' quando o titulo nao bastou. */
.ia-sugestao-lista {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ia-sugestao-lista > li > a {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary);
    text-decoration: none;
}
.ia-sugestao-lista > li > a:hover { color: var(--accent); }
.ia-sugestao-lista .ia-sugestao-texto { display: block; margin-top: 2px; }
.ia-sugestao-texto {
    font-size: 13px;
    line-height: 1.5;
    margin: 0 0 8px;
}
.ia-fonte-citacao {
    font-size: 11px;
    color: var(--text-secondary);
    font-style: italic;
    margin: 0;
}

/* Linha de acoes reais do chamado (Finalizar/Solucionar/etc.) -- o mockup
   nao mostra essas acoes (sao funcionalidade real, nao visual); ficam numa
   linha discreta no rodape do bloco Resumo, com o mesmo estilo de capsula
   do .btn-gerar-atividade pra nao brigar com o layout copiado. */
.acoes-chamado-rodape {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border-steel);
}
.acoes-chamado-rodape form { display: inline; margin: 0; }
.acoes-chamado-rodape button,
.acoes-chamado-rodape summary.botao-acao-capsula {
    width: auto; margin: 0; padding: 7px 14px; font-size: 12px; border-radius: 20px;
    background: var(--bg-panel-raised); border: 1px solid var(--border-steel); color: var(--text-secondary);
    cursor: pointer; display: inline-flex; align-items: center; gap: 6px; list-style: none;
}
.acoes-chamado-rodape button:hover,
.acoes-chamado-rodape summary.botao-acao-capsula:hover { border-color: var(--accent); color: var(--accent-cyan); }
.acoes-chamado-rodape summary.botao-acao-capsula::-webkit-details-marker { display: none; }
.acoes-chamado-rodape summary.botao-acao-capsula::marker { content: ""; }
.acoes-chamado-rodape .acao-perigo { color: var(--danger); border-color: rgba(248,113,113,.4); }
.acoes-chamado-rodape details { display: inline-block; position: relative; }
.acoes-chamado-rodape details[open] > .painel-acao-suspenso {
    position: absolute;
    z-index: 30;
    top: calc(100% + 6px);
    left: 0;
    min-width: 280px;
    background: var(--bg-panel);
    border: 1px solid var(--border-steel);
    border-radius: 10px;
    padding: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,.45);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ===========================================================================
   Rodada 31 -- Cartao/Nao atribuidos/Triagem copiados do mockup aprovado
   (kanban-chamados / fila-triagem do layout_modelo_chamados_escuro_revisao)
   =========================================================================== */

/* --- Cards de chamado (Cartao + bloco Nao atribuidos) --- */
.kanban-chamados {
    display: grid;
    /* RODADA 131 -- QUATRO colunas: "Aguardando Cliente" ganhou a dela, porque
       chamado pausado em dia nao aparecia em quadro nenhum e ele so' notou
       contando os proprios na mao.

       Quatro colunas a 1366px dao ~320px cada, que ainda comporta o cartao
       (medido: o cartao pede 260px para o titulo nao quebrar em tres linhas).
       A quebra intermediaria abaixo existe por causa disso: entre 980px e
       1200px quatro colunas espremeriam o cartao, entao viram duas. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}
@media (max-width: 1200px) { .kanban-chamados { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 980px) { .kanban-chamados { grid-template-columns: 1fr; } }
.kanban-coluna-chamados {
    background: var(--bg-panel);
    border: 1px solid var(--border-steel);
    border-radius: var(--radius);
    padding: 14px;
    min-height: 140px;
}
.titulo-coluna-kanban { font-size: 13px; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.kanban-coluna-lista {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 60px;
    padding: 6px;
    border: 1px dashed var(--border-steel);
    border-radius: 10px;
}
.kanban-card-chamado {
    display: flex;
    flex-direction: column;
    gap: 9px;
    background: var(--bg-panel-raised);
    border: 1px solid var(--border-steel);
    border-top: 3px solid var(--border-steel);
    border-radius: 12px;
    padding: 14px 15px;
    cursor: pointer;
    transition: border-color .15s, transform .12s;
}
.kanban-card-chamado:hover { border-color: var(--accent); transform: translateY(-1px); }
.kanban-card-chamado[data-prioridade="alta"] { border-top-color: var(--cor-prioridade-alta); }
.kanban-card-chamado[data-prioridade="media"] { border-top-color: var(--cor-prioridade-media); }
.kanban-card-chamado[data-prioridade="baixa"] { border-top-color: var(--cor-prioridade-baixa); }
.kanban-card-chamado[data-prioridade="critica"] { border-top: 3px solid; border-image: linear-gradient(90deg, #0a0a0a 50%, var(--cor-prioridade-alta) 50%) 1; }
.kanban-card-topo-chamado { display: flex; align-items: center; gap: 8px; }
.kanban-card-titulo-chamado { font-size: 13px; line-height: 1.4; }
.kanban-card-chips-chamado { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kanban-card-meta-chamado { font-size: 11.5px; color: var(--text-secondary); }
.kanban-card-rodape-chamado {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 2px;
    padding-top: 10px;
    border-top: 1px solid var(--border-steel);
}
.kanban-card-rodape-chamado > *:last-child { margin-left: auto; }
.btn-assumir-chamado, .btn-concluir-chamado {
    width: auto;
    margin: 0;
    padding: 6px 14px;
    font-size: 11.5px;
    flex-shrink: 0;
    background: var(--accent);
    border: 1px solid var(--accent);
    color: #04101f;
    font-weight: 600;
    border-radius: 10px;
    cursor: pointer;
}
.btn-concluir-chamado { background: var(--bg-panel); border-color: var(--border-steel); color: var(--text-secondary); }
.btn-concluir-chamado:hover { border-color: var(--success); color: var(--success); }
.msg-lista-atribuicao-vazia { margin: 0; padding: 8px 4px; font-size: 12px; color: var(--text-secondary); }
.chip-departamento-tile { font-size: 10.5px; color: var(--text-secondary); border: 1px solid var(--border-steel); padding: 2px 9px; border-radius: 20px; }

/* RODADA 59B -- selo "equipe interna do cliente".
   Tracejado de proposito: os outros chips desta tela sao coisas DO chamado
   (categoria, rotulo, departamento). Este diz de quem e' o TRABALHO -- uma
   informacao de natureza diferente, e a borda diferente e' o que impede de
   ler os dois como a mesma coisa numa lista longa. */
.chip-destino-cliente {
    display: inline-block;
    font-size: 10.5px;
    color: var(--text-secondary);
    border: 1px dashed var(--border-steel);
    padding: 2px 9px;
    border-radius: 20px;
    margin-left: 6px;
    white-space: nowrap;
    vertical-align: middle;
}
.atendente-com-nome { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; white-space: nowrap; }
.selo-sla-atrasado-card {
    font-size: 10.5px;
    color: var(--danger);
    font-family: "JetBrains Mono", monospace;
    background: rgba(248,113,113,.12);
    padding: 2px 8px;
    border-radius: 8px;
}
/* Grid dos cards no bloco "Nao atribuidos" da aba Atribuidos (fora do
   kanban de 3 colunas -- os cards ficam lado a lado, quantos couberem). */
.grade-cards-nao-atribuidos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    padding: 6px;
}
.bloco-fila-atribuicao.caixa-nao-atribuidos {
    background: var(--bg-panel);
    border: 1px solid var(--border-steel);
    border-radius: var(--radius);
    padding: 14px;
}

/* --- Fila de Triagem (formato do mockup, com contagem grande) --- */
.resumo-triagem-sla { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.pilula-resumo-triagem {
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 12px;
    color: var(--text-secondary);
    background: var(--bg-panel-raised);
    border: 1px solid var(--border-steel);
}
.pilula-resumo-triagem strong { font-size: 14px; margin-right: 5px; }
.pilula-resumo-alto { border-color: var(--danger); color: var(--danger); }
.pilula-resumo-medio { border-color: var(--cor-vencendo); color: var(--cor-vencendo); }
.pilula-resumo-ok { border-color: var(--success); color: var(--success); }
.titulo-secao-fila-triagem {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: 18px 0 8px;
    color: var(--text-secondary);
}
.titulo-secao-fila-triagem:first-of-type { margin-top: 0; }
.titulo-secao-fila-alto { color: var(--danger); }
.titulo-secao-fila-medio { color: var(--cor-vencendo); }
.titulo-secao-fila-ok { color: var(--success); }
.fila-triagem { display: flex; flex-direction: column; gap: 8px; }
.fila-triagem-item {
    display: grid;
    grid-template-columns: 78px 1fr auto;
    align-items: center;
    gap: 16px;
    background: var(--bg-panel-raised);
    border: 1px solid var(--border-steel);
    border-left: 4px solid var(--border-steel);
    border-radius: 10px;
    padding: 12px 16px;
    cursor: pointer;
    transition: border-color .15s;
}
.fila-triagem-item:hover { border-color: var(--accent); }
.fila-triagem-item.risco-alto { border-left-color: var(--danger); }
.fila-triagem-item.risco-medio { border-left-color: var(--cor-vencendo); }
.fila-triagem-item.risco-ok { border-left-color: var(--success); }
.fila-sla-contagem { font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: 17px; text-align: center; line-height: 1.3; }
.fila-sla-contagem small { display: block; font-weight: 500; font-size: 9.5px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .03em; }
.fila-triagem-item.risco-alto .fila-sla-contagem { color: var(--danger); }
.fila-triagem-item.risco-medio .fila-sla-contagem { color: var(--cor-vencendo); }
.fila-triagem-item.risco-ok .fila-sla-contagem { color: var(--success); }
.fila-triagem-corpo { min-width: 0; }
.fila-triagem-titulo-linha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.fila-triagem-titulo-linha .numero-chamado { font-size: 14px; }
.fila-triagem-titulo-linha strong { font-size: 14px; }
.chip-categoria-fila { font-size: 12px; padding: 3px 12px; }
.fila-triagem-meta { font-size: 11.5px; color: var(--text-secondary); }
.fila-triagem-acoes { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 8px; min-width: 150px; }
/* Rodada 44C -- "Fechado" virou "Resolvido, Necessário Confirmar" (rótulo
   único, usado pela intranet E pelo portal). O nome e' 4x mais longo que o
   anterior, entao o nowrap saiu: em vez de esticar a linha da Triagem e
   empurrar o resto pra fora, o selo quebra em duas linhas dentro do proprio
   espaco. Os outros status, que sao curtos, continuam numa linha so' -- a
   quebra so' acontece quando falta largura. */
.status-grande-fila {
    font-size: 13px; font-weight: 700; padding: 4px 12px;
    white-space: normal; max-width: 190px; line-height: 1.25; text-align: center;
}

/* Mesmo motivo: o selo de status na Grade/Cartao pode ocupar duas linhas em
   vez de alargar a coluna e cortar o texto (defeito das "barrinhas" que a
   43A ja' teve de corrigir uma vez). */
.badge-status-fechado { white-space: normal; }
.link-pegar-triagem {
    background: none; border: none; padding: 0; width: auto; margin: 0;
    font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
    color: var(--text-secondary); cursor: pointer;
}
.link-pegar-triagem:hover { color: var(--accent-cyan); }

/* --- Painel "escolher visao padrao" (abre por um botao na barra de abas) --- */
.painel-visao-padrao {
    margin: 10px 0 14px;
}
.painel-visao-padrao .texto-intro-visao-padrao {
    font-size: 12.5px;
    color: var(--text-secondary);
    margin: 0 0 10px;
}
.cards-visao-padrao {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 12px;
}
.card-visao-padrao {
    display: block;
    text-align: left;
    background: var(--bg-panel-raised);
    border: 1px solid var(--border-steel);
    border-radius: 12px;
    padding: 14px 16px;
    cursor: pointer;
    width: 100%;
    margin: 0;
    color: var(--text-primary);
    transition: border-color .15s;
}
.card-visao-padrao:hover { border-color: var(--accent); }
.card-visao-padrao.atual { border-color: var(--accent); background: rgba(47,111,237,.08); }
.card-visao-padrao strong { display: block; font-size: 13.5px; margin-bottom: 6px; }
.card-visao-padrao span { font-size: 12px; color: var(--text-secondary); line-height: 1.45; display: block; }
.rodape-visao-padrao { font-size: 12px; color: var(--text-secondary); margin: 10px 0 0; }

/* --- Modal de confirmacao "Finalizar chamado" (com campo de solucao) --- */
.caixa-modal-finalizar {
    width: 100%;
    max-width: 460px;
    background: var(--bg-panel);
    border: 1px solid var(--border-steel);
    border-radius: var(--radius);
    padding: 22px 24px;
    box-shadow: 0 20px 50px rgba(0,0,0,.45);
}
.caixa-modal-finalizar h3 { margin: 0 0 10px; font-size: 15px; }
.caixa-modal-finalizar .rotulo-campo-modal { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--text-secondary); margin-bottom: 4px; }
.caixa-modal-finalizar textarea { width: 100%; resize: vertical; font-family: inherit; font-size: 13px; padding: 10px 12px; }
.acoes-modal-finalizar { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.acoes-modal-finalizar button { width: auto; margin: 0; padding: 9px 18px; font-size: 12.5px; }
.botao-primario-modal { background: var(--accent); border-color: var(--accent); color: #04101f; font-weight: 600; }
.alca-arrastar { color: var(--text-secondary); font-size: 14px; cursor: grab; flex-shrink: 0; margin-left: auto; }

/* ===========================================================================
   Rodada 32 -- ajustes pedidos no detalhe do chamado (lista do usuario)
   =========================================================================== */

/* Cabecalho com as acoes secundarias do lado do titulo (Transferir/Editar/
   Reabrir/Gerar atividade) -- "suba os botoes e deixa do lado de gerar
   atividade... quero todos os botoes dessa tela seguindo ao padrao". */
.cabecalho-chamado-com-acoes {
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
}
.acoes-topo-chamado {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: auto;
}
.acoes-topo-chamado form { margin: 0; }
.acao-suspensa-chamado { position: relative; display: inline-block; }
.acao-suspensa-chamado > summary {
    list-style: none;
    cursor: pointer;
}
.acao-suspensa-chamado > summary::-webkit-details-marker { display: none; }
.acao-suspensa-chamado > summary::marker { content: ""; }
.acao-suspensa-chamado[open] > .painel-acao-suspenso {
    position: absolute;
    z-index: 30;
    top: calc(100% + 6px);
    right: 0;
    min-width: 290px;
    background: var(--bg-panel);
    border: 1px solid var(--border-steel);
    border-radius: 10px;
    padding: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,.45);
    text-align: left;
}
.acao-suspensa-chamado[open] > .painel-acao-suspenso textarea,
.acao-suspensa-chamado[open] > .painel-acao-suspenso input,
.acao-suspensa-chamado[open] > .painel-acao-suspenso select { width: 100%; }

/* Painel da descricao -- "colocar um painel para acomodar a descricao, o
   texto ta solto.. coloquei bastante ele foi a tela toda sem quebra de
   texto". word-break/overflow-wrap resolvem texto colado sem espaco
   (URL gigante, log copiado); max-height evita empurrar a tela inteira. */
.painel-descricao-chamado {
    background: var(--bg-panel-raised);
    border: 1px solid var(--border-steel);
    border-radius: 10px;
    /* 43B-3 -- densidade: 12/14 -> 10/12, margem 14 -> 10. Multiplicado
       pelos 4 paineis empilhados do Resumo, so' isto ja' devolve meia
       dezena de linhas de rolagem. */
    padding: 10px 12px;
    margin: 10px 0;
}
.texto-descricao-chamado {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    max-height: 320px;
    overflow-y: auto;
}

/* Blocos secundarios (colaboracao, vinculos) -- mesma caixa discreta */
.bloco-secundario-chamado { margin: 14px 0; }
.cartao-colaboracao {
    background: var(--bg-panel-raised);
    border: 1px solid var(--border-steel);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 12.5px;
}
.linha-rotulos-chamado {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

/* Rodape: Base de Conhecimento colada na esquerda, Finalizar na direita
   (pedido explicito dos dois cantos). Finalizar usa o azul PADRAO do
   sistema (mesmo do "button" base -- ver topo deste arquivo). */
.rodape-acoes-chamado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--border-steel);
}
.btn-finalizar-chamado {
    width: auto;
    margin: 0;
    margin-left: auto;
    padding: 11px 24px;
    font-size: 13px;
    font-weight: 700;
    background: #24499e;
    color: #eef1f7;
    border: 1px solid #2f5cba;
    border-radius: 10px;
    cursor: pointer;
}
.btn-finalizar-chamado:hover { background: #2b57b8; }

/* Presenca do solicitante no chat (online/offline, atualiza sozinho) */
.chat-status-presenca {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-secondary);
}
.chat-status-presenca::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-secondary);
}
.chat-status-presenca.online::before { background: var(--success); box-shadow: 0 0 6px var(--success); }
.chat-status-presenca.online b { color: var(--success); }
.chat-status-presenca.offline b { color: var(--text-secondary); }
.aviso-chat-offline {
    font-size: 11px;
    color: var(--text-secondary);
    font-style: italic;
    margin: 0 0 8px;
    padding: 6px 10px;
    border: 1px dashed var(--border-steel);
    border-radius: 8px;
}

/* Anotacoes internas -- area propria, sem checkbox nenhum. Visual
   deliberadamente diferente da conversa (ambar/tracejado) pra ninguem
   confundir com o que o solicitante enxerga. */
.painel-anotacoes-internas {
    margin-top: 18px;
    padding: 14px 16px;
    border: 1px dashed var(--cor-vencendo);
    border-radius: var(--radius);
    background: rgba(245, 185, 66, .05);
}
.cabecalho-anotacoes-internas {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.cabecalho-anotacoes-internas h4 { margin: 0; font-size: 13px; color: var(--cor-vencendo); }
.selo-somente-equipe {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--cor-vencendo);
    border: 1px solid var(--cor-vencendo);
    border-radius: 8px;
    padding: 2px 8px;
}
.lista-anotacoes-internas { display: flex; flex-direction: column; gap: 8px; max-height: 240px; overflow-y: auto; }
.anotacao-interna {
    background: var(--bg-panel-raised);
    border: 1px solid var(--border-steel);
    border-left: 3px solid var(--cor-vencendo);
    border-radius: 8px;
    padding: 8px 12px;
}
.anotacao-interna-texto {
    font-size: 13px;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.form-anotacao-interna { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.form-anotacao-interna textarea { width: 100%; resize: vertical; }
.form-anotacao-interna button { align-self: flex-start; }

/* Painel lateral (variante D) -- "quero que o quadro ocupe o espaco todo
   da tela... e a telinha do chat venha ate' o final do quadro, esticando
   pra ver melhor". Sem teto de largura, e a coluna do chat estica na
   altura toda do painel (a area de mensagens cresce junto). */
.tela-chamado-aberto.variante-larga { max-width: none; }
#corpo-detalhe-chamado[data-variante="d"] { grid-template-columns: minmax(0, 1fr) minmax(360px, 30%); }
#corpo-detalhe-chamado[data-variante="d"] .chat-painel {
    align-self: stretch;
    height: 100%;
    max-height: none;
    display: flex;
    flex-direction: column;
}
#corpo-detalhe-chamado[data-variante="d"] .chat-mensagens {
    flex: 1 1 auto;
    max-height: none;
    min-height: 320px;
}
/* Na variante D as anotacoes internas ficam embaixo da coluna principal
   (nao dentro do chat), pra' nao competir com a conversa. */
#corpo-detalhe-chamado[data-variante="d"] .painel-anotacoes-internas { grid-column: 1; }

/* Rodada 32 -- na variante "Painel lateral" a coluna do chat e' estreita:
   o form (Anexar + campo + Responder) quebra em duas linhas em vez de
   espremer o campo de texto a ponto de nao caber o placeholder. */
#corpo-detalhe-chamado[data-variante="d"] .chat-form { flex-wrap: wrap; }
#corpo-detalhe-chamado[data-variante="d"] .chat-form input[type="text"] {
    flex: 1 1 100%;
    order: -1;
}
#corpo-detalhe-chamado[data-variante="d"] .chat-enviar-btn { margin-left: auto; }
/* Macros grudadas no campo de escrever, nao soltas no meio da coluna */
#corpo-detalhe-chamado[data-variante="d"] .macros-chat { margin-top: auto; }

/* ===========================================================================
   Rodada 33 -- lista de itens do usuario (bloco visual)
   =========================================================================== */

/* D1/B1 -- "tire a linha colorida e deixe so a bolinha" (Cartao e cards de
   Nao atribuidos). A prioridade continua sinalizada pela bolinha do topo
   do card, que ja existia -- some so' a barra colorida da borda. */
.kanban-card-chamado.sem-borda-prioridade {
    border-top: 1px solid var(--border-steel);
    border-image: none;
}

/* B3 -- crítico na barrinha de atribuidos estava ROXO; passa a usar o mesmo
   par preto/vermelho da bolinha de prioridade crítica (metade e metade). */
.linha-chamado-fila-v2.borda-prioridade-critica {
    border-left: 4px solid transparent;
    border-image: linear-gradient(180deg, #0a0a0a 50%, var(--cor-prioridade-alta) 50%) 1;
}

/* B4 -- rotulos dentro da barrinha ("Solicitante:", "Equipe:", ...) */
.rot-barrinha {
    font-style: normal;
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-terciario);
    margin-right: 3px;
}
.linha-chamado-fila-v2 { row-gap: 4px; }

/* C1/C2 -- Estilo Grade: bordas arredondadas suaves + respiro nas celulas.
   Reclamacao: "o grafico grade esta quadrado.. esta muito apertado as
   informacoes". Cantos so' nas pontas da linha (primeira/ultima celula),
   pra' a linha inteira virar um "cartao" arredondado. */
/* 43B-4 -- densidade da grade. O respiro entre linhas (6 -> 4) e o recheio
   da celula (14 -> 8 na vertical) sao o que decide quantos chamados cabem
   sem rolar; o tamanho do TEXTO nao mudou. Numa fila de 20 chamados isto
   sozinho devolve mais de uma tela de rolagem. */
#tabela-grade-chamados { border-collapse: separate; border-spacing: 0 4px; }
#tabela-grade-chamados thead th {
    font-size: 11px;
    letter-spacing: .03em;
    padding: 7px 10px;
    white-space: nowrap;
    border: none;
}
#tabela-grade-chamados tbody td {
    padding: 8px 10px;
    font-size: 12.5px;
    line-height: 1.45;
    vertical-align: middle;
    border-top: 1px solid var(--border-steel);
    border-bottom: 1px solid var(--border-steel);
}
#tabela-grade-chamados tbody td:first-child {
    border-left: 1px solid var(--border-steel);
    border-radius: 12px 0 0 12px;
}
#tabela-grade-chamados tbody td:last-child {
    border-right: 1px solid var(--border-steel);
    border-radius: 0 12px 12px 0;
}
#tabela-grade-chamados tbody tr { background: var(--bg-panel-raised); }
#tabela-grade-chamados .col-titulo-chamado strong { font-size: 13px; line-height: 1.4; }
#tabela-grade-chamados .col-titulo-chamado span { font-size: 11px; color: var(--text-terciario); }

/* A6 -- "quando tem filtro marcado o botao + novo chamado vai para baixo,
   nao quero isso; se nao couber so' diminui o tamanho dele um pouco".

   RODADA 125 -- O "DIMINUI UM POUCO" ESTAVA CORTANDO O ROTULO.
   Medido na tela dele em 18/09: o botao aparecia como "+ Nov...".

   A causa nao era o texto, era QUEM CEDE ESPACO. A versao anterior dava ao
   botao `flex: 0 1 auto` + `min-width: 0` + `text-overflow: ellipsis`, e as
   tres coisas juntas o elegem como o item que encolhe: o flex tira largura
   de quem PODE encolher, e so' ele podia -- o `.form-busca-com-filtros` ao
   lado nao tinha `min-width: 0`, entao o piso dele era o conteudo. Resultado:
   os <select> ficavam intactos e o botao ia sumindo ate' virar reticencia.

   E' a mesma licao da rodada 98 ("o botao nao e' o item que cede espaco") e
   da 91 (min-width: 0 em QUEM deve encolher, nao em quem nao deve). Invertido
   aqui: o botao tem piso no proprio rotulo, e quem cede e' o formulario.

   O pedido dele continua atendido -- o botao NAO quebra para a linha de
   baixo, e ainda diminui: os dois @media abaixo reduzem padding e fonte, que
   e' "diminuir um pouco" sem esconder palavra nenhuma. */
.linha-filtros { flex-wrap: nowrap; }
.linha-filtros .btn-nova-inline {
    flex: 0 0 auto;
    min-width: max-content;
    white-space: nowrap;
}
/* Quem cede. Sem isto o piso do formulario e' o conteudo dele, e o flex
   volta a procurar o espaco no unico item que pode dar -- o botao. */
.linha-filtros .form-busca-com-filtros { min-width: 0; }
@media (max-width: 1500px) {
    .linha-filtros .btn-nova-inline { padding: 8px 12px; font-size: 11.5px; }
}
@media (max-width: 1250px) {
    .linha-filtros .btn-nova-inline { padding: 7px 10px; font-size: 11px; }
}
@media (max-width: 1050px) {
    .linha-filtros { flex-wrap: wrap; }
}

/* A7 -- status "Fechado": o preto quase nao aparecia no fundo escuro. */
.badge-status-fechado {
    background: rgba(148, 163, 184, .16) !important;
    border: 1px solid #94a3b8 !important;
    color: #cbd5e1 !important;
}

/* A3 -- botoes de filtro salvo na barra de abas */
.btn-filtro-salvo { padding: 6px 14px; font-size: 11.5px; }
.btn-filtro-salvo.ativo {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
}

/* F2 -- faixa "vendo a fila de outra pessoa" */
.faixa-vendo-fila-outro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 12px;
    padding: 10px 14px;
    border: 1px solid var(--accent);
    border-radius: 10px;
    background: rgba(47, 111, 237, .10);
    font-size: 12.5px;
}

/* I2/I3 -- "solicitacao de ajuda": selo e faixa de aviso */
.faixa-pedido-ajuda {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 12px;
    padding: 10px 14px;
    border: 1px solid var(--cor-vencendo);
    border-radius: 10px;
    background: rgba(245, 185, 66, .10);
    font-size: 12.5px;
}
.selo-pedido-ajuda {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #04101f;
    background: var(--cor-vencendo);
    border-radius: 8px;
    padding: 2px 8px;
}
.linha-chamado-fila-v2.pediram-ajuda,
.kanban-card-chamado.pediram-ajuda,
.fila-triagem-item.pediram-ajuda { outline: 1px dashed var(--cor-vencendo); }

/* J -- anexos */
.lista-anexos-chamado { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip-anexo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    padding: 4px 10px;
    border: 1px solid var(--border-steel);
    border-radius: 20px;
    background: var(--bg-panel);
    color: var(--text-primary);
    text-decoration: none;
}
.chip-anexo:hover { border-color: var(--accent); }
.chip-anexo small { color: var(--text-secondary); }
.campo-anexo-chamado { font-size: 11.5px; color: var(--text-secondary); }
.campo-anexo-chamado input[type="file"] { font-size: 11.5px; margin-top: 4px; }
.aviso-limite-anexo { font-size: 10.5px; color: var(--text-secondary); font-style: italic; }

/* H -- respostas empilhadas (mesmo visual do painel de descricao) */
.fio-respostas-chamado { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.quadro-resposta-chamado {
    background: var(--bg-panel-raised);
    border: 1px solid var(--border-steel);
    border-left: 3px solid var(--accent);
    border-radius: 10px;
    padding: 12px 14px;
}
.quadro-resposta-chamado.do-solicitante { border-left-color: var(--success); }
.quadro-resposta-cabecalho {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.quadro-resposta-autor { font-size: 12.5px; font-weight: 600; }
.quadro-resposta-quando { font-size: 11px; color: var(--text-secondary); font-family: "JetBrains Mono", monospace; }
.quadro-resposta-texto {
    font-size: 13px;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    margin: 0;
}
.form-responder-chamado { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.form-responder-chamado textarea { width: 100%; resize: vertical; }

/* L -- acompanhantes */
.lista-acompanhantes { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.chip-acompanhante {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    padding: 3px 10px;
    border: 1px solid var(--border-steel);
    border-radius: 20px;
    background: var(--bg-panel);
}
.chip-acompanhante form { display: inline; margin: 0; }
.chip-acompanhante button {
    background: none; border: none; width: auto; margin: 0; padding: 0 2px;
    color: var(--text-secondary); cursor: pointer; font-size: 12px;
}
.chip-acompanhante button:hover { color: var(--danger); }

/* G10 -- histórico recolhível */
.bloco-historico-recolhivel > summary { list-style: none; cursor: pointer; display: inline-flex; }
.bloco-historico-recolhivel > summary::-webkit-details-marker { display: none; }
.bloco-historico-recolhivel > summary::marker { content: ""; }
.bloco-historico-recolhivel[open] > summary { margin-bottom: 12px; }

/* G12 -- chat cresce com a conversa em vez de altura fixa grande */
.chat-mensagens { max-height: 46vh; min-height: 120px; height: auto; }

/* M1 -- botoes de permissao em lote alinhados e menores */
.barra-permissoes-lote {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.barra-permissoes-lote button { width: auto; margin: 0; padding: 7px 14px; font-size: 11.5px; }

/* M2 -- permissoes agrupadas por modulo */
.grupo-permissoes-modulo {
    border: 1px solid var(--border-steel);
    border-radius: 10px;
    margin-bottom: 10px;
    background: var(--bg-panel-raised);
}
.grupo-permissoes-modulo > summary {
    list-style: none;
    cursor: pointer;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 13px;
}
.grupo-permissoes-modulo > summary::-webkit-details-marker { display: none; }
.grupo-permissoes-modulo > summary::marker { content: ""; }
.grupo-permissoes-modulo[open] > summary { border-bottom: 1px solid var(--border-steel); }
.contador-permissoes-modulo {
    margin-left: auto;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary);
    font-family: "JetBrains Mono", monospace;
}
.corpo-permissoes-modulo { padding: 4px 14px 12px; }
.busca-permissoes { max-width: 320px; margin-bottom: 12px; }

/* N1 (rodada 33) -- "tela cadastro de clientes esta translucida, deixar
   igual a de cadastro de usuario com os campos organizados e em um
   quadro". O form ja era estruturado em fieldsets, mas ficava solto sobre
   o fundo animado; agora vive dentro do MESMO painel do form de Usuarios
   (.form-novo-usuario), com fundo solido e largura cheia. */
.form-cliente-estruturado {
    background: var(--bg-panel-raised);
    border: 1px solid var(--border-steel);
    border-radius: var(--radius);
    padding: 16px;
    max-width: none;
}
.form-cliente-estruturado fieldset { background: var(--bg-panel); }
.form-cliente-estruturado legend {
    font-family: var(--fonte-titulo);
    font-size: 11px;
    letter-spacing: .03em;
    color: var(--text-secondary);
}
/* dentro da linha da tabela (edicao inline) o quadro seria quadro dentro
   de quadro -- ali mantem transparente */
td .form-cliente-estruturado { background: transparent; border: none; padding: 0; }

/* Rodada 33 -- rodape do detalhe: acoes da direita agrupadas */
.grupo-acoes-direita-chamado {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: auto;
}
/* Finalizar continua sendo a acao principal: .btn-vidro (padrao pedido)
   com um leve destaque azul pra' nao sumir no meio dos outros. */
.btn-vidro.btn-finalizar-destaque {
    background: rgba(47, 111, 237, .30) !important;
    border-color: rgba(120, 170, 255, .45) !important;
}
.btn-vidro.btn-aprovar-solucao {
    background: rgba(52, 211, 153, .22) !important;
    border-color: rgba(52, 211, 153, .5) !important;
}
/* H -- cabecalho do bloco de respostas */
.bloco-respostas-chamado { margin: 16px 0; }
.cabecalho-respostas-chamado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

/* ===========================================================================
   Rodada 34 -- ajustes finais pre-deploy
   =========================================================================== */

/* Chat: nasce PEQUENO e cresce com a conversa (pedido explicito: "chat
   precisa ser pequeno e ir crescendo conforme conversa"). Sem conversa, a
   caixa e' baixinha; conforme chegam mensagens ela estica ate' o teto
   (40vh) e so' entao rola. O min-height alto que existia e' o que fazia
   ela ja' nascer gigante. */
.chat-mensagens {
    height: auto;
    min-height: 0;
    max-height: 40vh;
}
#corpo-detalhe-chamado[data-variante="d"] .chat-mensagens {
    min-height: 0;
    max-height: none;   /* na variante Painel lateral continua esticando ate' o fim */
}

/* Botao "Visao padrao" na topbar (ao lado do sino), sem estrela --
   mesmo visual dos botoes que ja moram la' (tema/sinapse). */
.btn-visao-padrao-topbar {
    width: auto !important;
    height: 34px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-panel-raised) !important;
    border: 1px solid var(--border-steel) !important;
    border-radius: 8px !important;
    color: var(--text-secondary) !important;
    cursor: pointer;
    font-size: 12px;
}
.btn-visao-padrao-topbar:hover { color: var(--accent-cyan) !important; border-color: var(--accent-cyan) !important; }

/* Mural de Avisos inline -- ocupa TODO o espaco sobrando da barra de stats
   (pedido explicito, com print: o botao pequeno deixava um vazio enorme a`
   direita dos cartoes). O painel lista as mesmas notificacoes do sino,
   rolavel, na altura dos cartoes. */
.mural-avisos-inline {
    flex: 1 1 auto;
    min-width: 260px;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    background: var(--bg-panel-raised);
    border: 1px solid var(--border-steel);
    border-radius: 10px;
    padding: 8px 12px;
    max-height: 96px;
    overflow: hidden;
}
.mural-avisos-inline-titulo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-secondary);
    margin-bottom: 4px;
}
.mural-avisos-inline-lista { overflow-y: auto; flex: 1; }
.mural-avisos-inline-lista .linha-notificacao {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 11.5px;
    padding: 3px 2px;
    color: var(--text-primary);
    text-decoration: none;
    border-bottom: 1px dashed rgba(255,255,255,.06);
}
.mural-avisos-inline-lista .linha-notificacao:hover { color: var(--accent-cyan); }
.mural-avisos-inline-lista .linha-notificacao-data { color: var(--text-secondary); font-size: 10px; white-space: nowrap; }
.mural-avisos-inline-lista .notificacao-vazio { font-size: 11.5px; color: var(--text-secondary); padding: 4px 2px; }
@media (max-width: 1100px) { .mural-avisos-inline { display: none; } }

/* ===========================================================================
   Rodada 35 -- TRES TEMAS NOVOS (escolhidos do arquivo de sugestoes):
   Papel (claro v1), Escuro II (escuro v1 refinado) e Minimalista II
   (minimalista v1, botoes solidos). Os 3 temas antigos (escuro/claro/
   minimalista) ficam INTACTOS -- pedido explicito: "implemente os 3 a
   mais, ainda nao exclua os que ja tem, quero decidir depois qual tirar".
   Total: 6 temas no ciclo.
   =========================================================================== */

/* ------------------------- TEMA PAPEL (claro v1) -------------------------
   Branco de verdade com luz controlada. A correcao central e' a I1 do
   arquivo de sugestoes: os botoes-vidro deixam de ser QUASE PRETOS (como
   sao no tema claro antigo) e viram vidro CLARO -- branco translucido,
   borda visivel, TEXTO ESCURO. */
/* ===== TEMA MINIMALISTA PAPEL BRANCO (rodada 43B) ==========================
   Para sala com muita luz. Herda toda a estrutura de tema CLARO ja resolvida
   nas rodadas 35/36 (botao escuro sobre fundo branco, vidro invertido, modal
   claro, campos legiveis) -- aqui muda a paleta, e o base.html aplica junto
   a classe tema-minimalista (fonte Quicksand, sem fundo animado, sem glow).

   Branco QUENTE, nao #ffffff: monitor emite luz, papel reflete. Um branco
   puro em tela devolve mais luz que a folha que ele imita, e e' o que arde a
   vista em sala clara. Texto grafite (#33373d), nunca preto -- mesmo motivo
   do fundo nao ser preto no tema escuro. Corpo em 11,4:1.

   RODADA 131 -- O BRANCO QUENTE CAIU, A PEDIDO DELE: "mudar o tema branco
   para uma cor branca mesmo.. branco padrao". Perguntei e ele confirmou:
   trocar o Papel Branco por branco puro.

   A razao do bege continua verdadeira em fisica e nao valia aqui: o tema se
   chama Papel BRANCO, e quem o liga espera branco. Quem quer a luz mais baixa
   tem o Papel (o outro tema claro) e os quatro escuros -- havia SEIS temas e
   nenhum com branco de verdade, que e' o unico que faltava.

   O que mudou, medido contra o que havia antes:
       --bg-panel        #faf9f6 -> #ffffff
       --bg-panel-raised #f6f4f0 -> #f7f7f7
       --bg-void         #f3f1ed -> #f0f0f0   (separacao do painel: 1,07 -> 1,14)
       --border-steel    #dcd8d0 -> #d5d5d5   (contra o painel: 1,35 -> 1,47)
   As duas ultimas SOBEM: com o painel em branco puro, o fundo e a borda
   precisaram de um passo a mais de cinza para o painel nao sumir dentro da
   pagina -- que era o risco real de trocar so' o painel e parar ai'.

   O texto nao mudou nesta rodada: ele ja' e' o preto da 129, e sobre branco
   puro cada tom SOBE (primario 16,9 -> 15,6 contra o pior fundo, que agora e'
   o proprio branco; secundario 9,2; terciario 6,6). Todos acima dos pisos que
   a 129 gravou.
   ========================================================================= */
/* RODADA 100 -- O SELETOR ESTA' DOBRADO, E ISSO CONSERTA UM ACHADO DA 99.
   O Papel Branco aplica as classes `tema-papelbranco` E `tema-minimalista`
   juntas (heranca declarada no base.html). As duas valem 0-1-1, e o bloco do
   Minimalista vem DEPOIS neste arquivo -- entao, em empate, ganhava ele: TODA
   variavel que o Papel Branco define e o Minimalista tambem define nunca
   valia. A rodada 99 achou isso e deixou registrado como decisao sua; a 100
   precisou consertar porque o preco apareceu na medicao: `--vidro-texto`
   ficava #e2e2e6 (claro, do Minimalista) sobre o vidro claro do Papel
   Branco, e o botao "+ ATIVIDADE" saiu a 1,21:1 -- branco no branco.

   Dobrar a classe leva o bloco a 0-2-1 e desempata pelo peso, em vez de pela
   ordem das linhas. E' o mesmo truque que `.oculto` usa desde a 83A e a pele
   da acao desde a 99, pelo mesmo motivo: ordem de arquivo nao e' regra, e
   quem mexer no arquivo depois nao precisa saber disso. */
body.tema-papelbranco.tema-papelbranco {
    /* RODADA 131 -- branco puro, a pedido. Ver o cabecalho deste bloco: os
       quatro valores trocaram juntos, porque painel branco com fundo e borda
       beges deixaria o painel flutuando sem contorno. */
    --bg-void: #f0f0f0;
    --bg-panel: #ffffff;
    --bg-panel-raised: #f7f7f7;
    --border-steel: #d5d5d5;
    --text-primary: #33373d;   /* 11,4:1 sobre --bg-panel */
    --text-secondary: #565c63; /* 5,99:1 sobre --bg-void, o pior fundo */
    --text-terciario: #646a73; /* 4,83:1 -- era o valor do secundario */
    --accent: #2c64b3;   /* rodada 100: 4,60:1 ate' sobre o fundo do alerta de erro */
    --accent-solido: #2f6bbf;  /* 5,28:1 -- ja' passa, nao precisou mexer */
    --danger-solido: #bc443e;  /* HOTFIX 100A: dimensionado contra o texto REAL do botao (#eef1f7), nao contra branco puro */
    --accent-cyan: #2f6bbf;    /* um azul so' -- tema minimalista nao tem 2 */
    --accent-soft: rgba(47, 107, 191, .10);
    --danger: #b2403a;  /* rodada 100: piso AA como TEXTO sobre o fundo mais claro em que pousa */
    --success: #1e7850;
    --cor-vencendo: #90640c;
    --cor-prioridade-alta: #b2403a;
    --cor-prioridade-media: #98630a;
    --cor-prioridade-baixa: #2f6bbf;
    /* vidro CLARO: base do proprio papel, nao branco puro */
    --vidro-16: rgba(250, 249, 246, .80);
    --vidro-18: rgba(250, 249, 246, .84);
    --vidro-22: rgba(250, 249, 246, .90);
    --vidro-24: rgba(250, 249, 246, .94);
    --vidro-28: rgba(250, 249, 246, .97);
    --vidro-sombra: rgba(51, 55, 61, .16);
    --placeholder-cor: rgba(100, 106, 115, .72);
}
/* Botoes: o texto fixo #eaf2ff (I4) e a borda branca-translucida dos
   componentes de vidro precisam virar ESCUROS aqui -- senao texto branco
   em botao branco. Cobre .btn-vidro e os primarios que compartilham o
   visual (mesma lista de seletores que o tema claro antigo ja sobrescreve). */
body.tema-papelbranco .btn-vidro,
body.tema-papelbranco .btn-nova-inline,
body.tema-papelbranco .form-nova-atividade button,
body.tema-papelbranco .form-busca button {
    color: #2c3140 !important;
    border: 1px solid #c6cdd9 !important;
    box-shadow: 0 3px 12px -6px var(--vidro-sombra), inset 0 1px 0 rgba(255, 255, 255, .8) !important;
    text-shadow: none !important;
}
body.tema-papelbranco .btn-vidro:hover,
body.tema-papelbranco .btn-nova-inline:hover,
body.tema-papelbranco .form-nova-atividade button:hover,
body.tema-papelbranco .form-busca button:hover {
    filter: none;
    border-color: var(--accent) !important;
    color: var(--accent) !important;
}
/* Estado ativo/ligado dos botoes de vidro: azul cheio com texto branco
   (unica situacao em que texto claro e' certo neste tema). */
body.tema-papelbranco .btn-vidro.ativo,
body.tema-papelbranco .btn-vidro.badge-erro,
body.tema-papelbranco .btn-vidro.badge-ok,
body.tema-papelbranco .btn-finalizar-destaque,
body.tema-papelbranco .abas-admin a.ativo,
body.tema-papelbranco .chip-filtro.ativo {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #ffffff !important;
}
/* Botao primario (azul base do sistema) fica mais vivo no claro */
body.tema-papelbranco button[type="submit"] { background: #2563eb; border-color: #1d4ed8; color: #fff; }
body.tema-papelbranco button[type="submit"]:hover { background: #1d4ed8; }
/* Chips/badges com alpha baixa somem no claro (I2/I3): escurece o
   conteudo do chip inteiro -- truque barato que funciona inclusive nos
   chips com cor inline (que CSS nao consegue trocar um a um). */
body.tema-papelbranco .chip-tag,
body.tema-papelbranco .chip-categoria { filter: saturate(1.15) brightness(.72) contrast(1.25); }
body.tema-papelbranco .badge { filter: saturate(1.1) brightness(.8) contrast(1.2); }
body.tema-papelbranco .badge.badge-status-fechado { filter: none; background: rgba(93,102,120,.14) !important; border-color: #5d6678 !important; color: #454e5e !important; }
/* Sem fundo animado no claro-papel: rede de linhas claras sobre fundo
   claro so' vira ruido. */
body.tema-papelbranco #network-canvas, body.tema-papelbranco .marca-8anos { display: none !important; }

/* ---- Papel Branco: a logo do lobo precisa ficar escura -------------------
   Relato do usuario: "a logo do lobo la no sidebar no [tema] branco precisa
   ser preto". A arte do LOGOTIPO.png e' clara -- foi desenhada pra fundo
   escuro. Sobre o papel, ela praticamente sumia.

   `brightness(0)` zera o canal de cor de CADA pixel preservando a
   transparencia: o desenho inteiro vira uma silhueta chapada, sem halo nem
   contorno claro sobrando. Nao usei `invert(1)`, que e' o reflexo comum
   nesse caso -- inverter troca as CORES (o azul da marca viraria laranja),
   e o que se quer aqui e' a mesma forma em preto.

   O `opacity(.82)` deixa a silhueta em grafite (~#333331) em vez de preto
   absoluto -- e' o mesmo tom do texto do tema (#33373d) e segue a regra que
   vale no resto da paleta: nada de preto puro sobre papel, que e' o par que
   mais arde a vista em sala clara. Se preferir preto cravado, e' so tirar
   o `opacity(.82)` desta linha.

   Vale nas DUAS aparicoes da arte: a da sidebar e a da tela de login (as
   duas usam .logo-mark-img). */
body.tema-papelbranco .logo-mark-img,
body.tema-papelbranco .sidebar-logo,
body.tema-papelbranco .sidebar-brand img,
body.tema-papelbranco .login-brand img {
    /* !important e os seletores extras sao defensivos: este arquivo tem
       centenas de regras com !important, e a arte aparece em tres telas
       (sidebar da intranet, login e sidebar do portal). Prefiro cobrir
       demais a descobrir depois que uma das telas ficou de fora. */
    filter: brightness(0) opacity(.82) !important;
}
body.tema-papelbranco .site-bg { background: var(--bg-void); }
/* Crítica: aro escuro pra bolinha meio-preta nao sumir (I7 ao contrario:
   no claro quem some e' a metade VERMELHA clara? nao -- a metade preta
   aparece; o aro garante definicao da borda). */
body.tema-papelbranco .bolinha-critica { box-shadow: 0 0 0 1.5px #1f2430; }

/* ---------------------- TEMA ESCURO II (escuro v1) ----------------------
   Mesma identidade do escuro atual, com as inconsistencias corrigidas:
   I5 (um azul so' -- o "ciano" vira variacao do MESMO azul) e I7 (aro
   claro na bolinha critica). */
/* ===== TEMA ESCURO REPOUSO (rodada 43B) =====================================
   Para turno longo e uso noturno. Herda a estrutura do antigo "Escuro II"
   (mesmo tratamento de vidro/botao pra fundo escuro) -- o que muda e' a
   paleta.

   Por que o fundo NAO e' preto: preto puro maximiza o salto de luminancia
   entre fundo e texto, e e' esse salto -- nao o "escuro" em si -- que cansa
   a vista em jornada inteira de monitor. Base azul-ardosia dessaturada,
   texto cinza-claro (nunca branco), contraste de corpo em 11,1:1, dentro da
   faixa de conforto.

   Destaque unico e discreto de proposito: num tema de repouso, cor tem que
   significar alguma coisa. Se tudo brilha, nada chama atencao -- e o
   chamado critico se perde no meio.
   ========================================================================= */
body.tema-repouso {
    --bg-void: #1a1e24;
    --bg-panel: #20252c;
    --bg-panel-raised: #262c34;
    --border-steel: #333b45;
    --text-primary: #d6dbe1;   /* 11,1:1 sobre --bg-panel */
    --text-secondary: #a3aab3;   /* 6,00:1 sobre --bg-panel-raised */
    --text-terciario: #949ca6;   /* 5,07:1 -- era o valor do secundario */
    --accent: #6f9fc8;
    --accent-solido: #557998;  /* 4,59:1 com o branco por cima */
    --danger-solido: #975d5a;  /* HOTFIX 100A: dimensionado contra o texto REAL do botao (#eef1f7), nao contra branco puro */
    --accent-cyan: #8ab4d6;    /* variacao do MESMO azul, nao outra cor */
    --accent-soft: rgba(111, 159, 200, .14);
    --danger: #e2908d;  /* rodada 100: piso AA como TEXTO sobre o fundo mais claro em que pousa */
    --success: #6fbf95;
    --cor-vencendo: #d4ac66;
    --cor-prioridade-alta: #d97b73;
    --cor-prioridade-media: #d4ac66;
    --cor-prioridade-baixa: #6f9fc8;
    --vidro-16: rgba(111, 159, 200, .12);
    --vidro-18: rgba(111, 159, 200, .15);
    --vidro-22: rgba(111, 159, 200, .19);
    --vidro-24: rgba(111, 159, 200, .22);
    --vidro-28: rgba(111, 159, 200, .26);
    --vidro-sombra: rgba(12, 16, 22, .5);
}
body.tema-repouso .btn-vidro,
body.tema-repouso .btn-nova-inline,
body.tema-repouso .form-nova-atividade button,
body.tema-repouso .form-busca button {
    border: 1px solid rgba(150, 180, 208, .30) !important;
    color: #dde4eb !important;
    text-shadow: none !important;
}
body.tema-repouso .bolinha-critica { box-shadow: 0 0 0 1.5px var(--text-primary); }  /* I7 */

/* Papel: aba ativa do view-switcher usava vidro + texto claro fixo (mesma
   classe de bug I1/I4) -- ficava branco sobre branco. Vira azul cheio. */
body.tema-papelbranco .view-switcher a.ativo {
    background: var(--accent-solido) !important;
    border-color: var(--accent-solido) !important;
    color: #ffffff !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
}
body.tema-papelbranco .view-switcher a { color: var(--text-secondary); }
/* Escuro II e Minimalista II: aba ativa coerente com o acento de cada um */
body.tema-repouso .view-switcher a.ativo {
    background: var(--accent-solido) !important;
    border-color: var(--accent-solido) !important;
    color: #ffffff !important;
}

/* ---- TEMA PAPEL (branco) -- e' onde as coisas sumiam ---- */
/* Dobrado pelo mesmo motivo do bloco anterior (rodada 100). */
body.tema-papelbranco.tema-papelbranco {
    --vidro-texto: #33373d;
    --vidro-texto-forte: #23262b;
    --vidro-ativo-bg: #2f6bbf;
    --vidro-ativo-texto: #ffffff;
    --vidro-ativo-borda: #2a5ea8;
    /* Sem glow (tema minimalista): so' uma sombra curta pra dar relevo. */
    --vidro-ativo-brilho: 0 2px 8px -5px rgba(47, 107, 191, .5);
    /* RODADA 131 -- o modal acompanhou o branco puro do tema. */
    --modal-fundo: linear-gradient(165deg, #ffffff, #f0f0f0 78%);
    --modal-sombra: 0 18px 44px rgba(30, 30, 30, .30);
    /* RODADA 96 -- ACESSIBILIDADE, e o relato foi literal: "no modo claro
       com esse fundo transparente pra quem tem problema de visao, acaba
       forcando e mal da' pra ver a opcao de cadastrar solicitante".
       O veu estava em .38 sobre um tema CLARO: a tela inteira continuava
       legivel atras do modal, e o olho nao sabia onde parar de ler. Nos temas
       escuros o mesmo .38 basta, porque ali o fundo ja' e' escuro. Subiu para
       .55 -- o suficiente para o modal virar a unica coisa em foco, sem
       apagar o contexto. */
    --overlay-fundo: rgba(28, 28, 28, .55);
    --campo-fundo: #ffffff;
    --fundo-critico: #f8e7e5;
}

/* ---- Papel Branco: botoes SOLIDOS ----------------------------------------
   Herdado da decisao do antigo "Minimalista II": efeito de vidro (translucido
   + desfoque) contradiz a proposta de um tema minimalista, e em fundo claro
   o vidro vira uma mancha lavada sem borda definida. Aqui o botao e' chapado,
   com borda visivel -- da' pra ver onde ele comeca e termina. */
body.tema-papelbranco .btn-vidro,
body.tema-papelbranco .btn-nova-inline,
body.tema-papelbranco .form-nova-atividade button,
body.tema-papelbranco .form-busca button {
    background: var(--bg-panel-raised) !important;
    border: 1px solid #cfcabf !important;
    border-radius: 8px !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
}
body.tema-papelbranco .btn-vidro:hover,
body.tema-papelbranco .btn-nova-inline:hover,
body.tema-papelbranco .form-nova-atividade button:hover,
body.tema-papelbranco .form-busca button:hover {
    background: #efece6 !important;
    border-color: var(--accent) !important;
    color: var(--accent) !important;
}
body.tema-papelbranco .btn-vidro.ativo,
body.tema-papelbranco .btn-finalizar-destaque,
body.tema-papelbranco .chip-filtro.ativo,
body.tema-papelbranco .view-switcher a.ativo {
    background: var(--accent-solido) !important;
    border-color: var(--accent-solido) !important;
    color: #fbfbfa !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    border-radius: 8px;
}
/* Aro na bolinha de prioridade critica: no claro o roxo/vermelho sozinho
   nao se destaca o bastante contra o papel. */
body.tema-papelbranco .bolinha-critica { box-shadow: 0 0 0 1.5px #33373d; }
/* Avatar de iniciais: no Papel o "vidro" e' branco, entao a letra tem que
   ser escura -- era exatamente a inicial apagada que o usuario viu. Aqui
   ela ganha o azul do tema, com borda, pra ler como avatar e nao como
   texto solto. */
body.tema-papelbranco .avatar-iniciais,
body.tema-papelbranco .avatar-compartilhado {
    background: rgba(37, 99, 235, .12) !important;
    border: 1px solid rgba(37, 99, 235, .45) !important;
    color: #1d4ed8 !important;
}
body.tema-papelbranco .avatar-topbar {
    background: #2563eb !important;
    border-color: #1d4ed8 !important;
    color: #ffffff !important;
}
/* Badge de contagem da sidebar e sino: mesma historia do avatar. */
body.tema-papelbranco .badge-sidebar { color: #1d4ed8 !important; border-color: rgba(37,99,235,.4) !important; }
/* Campos dentro dos modais/formularios com fundo fixo escuro. */
body.tema-papelbranco input, body.tema-papelbranco textarea, body.tema-papelbranco select { color: var(--text-primary); }

/* ---- TEMA MINIMALISTA (grafite chapado) ---- */
body.tema-minimalista {
    --vidro-texto: #e2e2e6;
    --vidro-texto-forte: #ffffff;
    --vidro-ativo-bg: #33333a;
    --vidro-ativo-texto: #f0f0f3;
    --vidro-ativo-borda: #4a4a52;
    --vidro-ativo-brilho: none;
    --modal-fundo: linear-gradient(165deg, #2a2a2f, #202024 78%);
    --modal-sombra: 0 16px 40px rgba(0,0,0,.5);
    --overlay-fundo: rgba(10,10,12,.6);
    --campo-fundo: #2c2c31;
}

/* ---- TEMA ESCURO II ---- */
body.tema-repouso {
    --vidro-texto: #e2e8ef;
    --vidro-texto-forte: #f4f7fa;   /* nem aqui entra branco puro */
    --vidro-ativo-bg: rgba(111, 159, 200, .24);
    --vidro-ativo-texto: #e8eef4;
    --vidro-ativo-borda: rgba(111, 159, 200, .55);
    /* Sem glow: o brilho de neon e' o oposto do que este tema promete. */
    --vidro-ativo-brilho: inset 0 1px 0 rgba(255,255,255,.06);
    --modal-fundo: linear-gradient(165deg, #242a32, #1a1e24 78%);
    --modal-sombra: 0 20px 50px rgba(0,0,0,.42);
    --overlay-fundo: rgba(10,13,17,.6);
    --campo-fundo: #1c2128;
}

/* A caixa do modal "Finalizar/Cancelar chamado" usava var(--bg-panel) (ok em
   todos os temas) mas a sombra era fixa -- agora acompanha o tema. */
.caixa-modal-finalizar { box-shadow: var(--modal-sombra); }

/* ---------------------------------------------------------------------------
   Rodada 36 -- CONVERSA e INTERACOES viraram dois blocos distintos
   ("conversa e' uma coisa, interacoes no chamado outra"). Cada um ganha
   moldura propria pra' bater o olho e saber onde esta'.
   --------------------------------------------------------------------------- */
.painel-interacoes-chamado {
    /* 43B-3 -- densidade (ver .painel-descricao-chamado) */
    margin-top: 10px;
    padding: 10px 12px;
    background: var(--bg-panel-raised);
    border: 1px solid var(--border-steel);
    border-radius: var(--radius);
}
.cabecalho-interacoes-chamado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.cabecalho-interacoes-chamado h4 { margin: 0; }
.cabecalho-interacoes-chamado button { margin-top: 0; }
/* etiqueta que diz, em uma palavra, o que aquele bloco e' */
.etiqueta-bloco-chamado {
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-secondary);
    border: 1px solid var(--border-steel);
    background: var(--accent-soft);
    vertical-align: middle;
}
.resumo-conversa-interacoes {
    margin: 10px 0 0;
    padding: 8px 12px;
    border-left: 2px solid var(--accent);
    background: var(--accent-soft);
    border-radius: 0 8px 8px 0;
    font-size: 12px;
    color: var(--text-secondary);
}
.resumo-conversa-interacoes a { color: var(--accent); }
/* O painel Conversa tambem ganha moldura, pra' nao parecer continuacao da
   descricao. */
.chat-painel {
    padding: 14px 16px;
    background: var(--bg-panel-raised);
    border: 1px solid var(--border-steel);
    border-radius: var(--radius);
    border-top: 1px solid var(--border-steel);
}
/* Chat nasce PEQUENO de verdade: sem altura minima em lugar nenhum e com
   a area de mensagens dimensionada pelo conteudo (o teto so' entra quando
   a conversa fica longa). Este bloco e' o ultimo do arquivo de proposito
   -- as regras antigas de min-height espalhadas nas rodadas 32/33 perdem
   pra' ele. */
.chat-mensagens,
#corpo-detalhe-chamado[data-variante="a"] .chat-mensagens,
#corpo-detalhe-chamado[data-variante="b"] .chat-mensagens,
#corpo-detalhe-chamado[data-variante="d"] .chat-mensagens {
    height: auto !important;
    min-height: 0 !important;
    max-height: 40vh;
    flex: 0 1 auto !important;
    overflow-y: auto;
}
#corpo-detalhe-chamado[data-variante="d"] .chat-mensagens { max-height: 60vh; }
/* na variante Painel lateral o painel nao estica mais a coluna inteira:
   ele acompanha o tamanho da conversa */
#corpo-detalhe-chamado[data-variante="d"] .chat-painel {
    height: auto !important;
    align-self: start !important;
}


/* ===========================================================================
   PORTAL DO CLIENTE -- rodada 36
   ---------------------------------------------------------------------------
   Relato do usuario: "no portal ao abrir chamado ta dando erro.. e nao esta
   com o layout que eu pedi". O layout pedido e' o mockup aprovado
   (mockup/chamados_usuario_body.html + chamados_usuario.css, prints
   usuario_lista_dark.png / usuario_detalhe1_dark.png / usuario_novo_chamado.png):
   casca completa do sistema (sidebar + topbar), saudacao, busca de
   autoatendimento, botao grande de abrir chamado, tres pilulas de status,
   abas Em andamento/Finalizados e cards -- e nao a pagina solta que existia.

   Este bloco e' o CSS daquele mockup, trazido pro sistema com uma unica
   diferenca: as cores fixas viraram variaveis de tema, senao o portal
   quebraria nos temas claros do mesmo jeito que a intranet quebrava.
   =========================================================================== */


.tela-usuario-conteudo {
    max-width: 760px;
    margin: 0 auto;
}

.saudacao-usuario {
    font-size: 22px;
    margin: 0 0 4px;
}
.subsaudacao-usuario {
    color: var(--text-secondary);
    font-size: 13px;
    margin: 0 0 22px;
}

/* Caixa de autoatendimento -- busca de artigo de ajuda antes de abrir
   chamado (alimenta o modulo 24 do catalogo, "Portal de Autoatendimento"). */
.caixa-autoatendimento {
    background: var(--bg-panel-raised);
    border: 1px solid var(--border-steel);
    border-radius: var(--radius);
    padding: 16px 18px;
    margin-bottom: 18px;
}
.caixa-autoatendimento-rotulo {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0 0 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.caixa-autoatendimento input[type="text"] {
    width: 100%;
    font-size: 14px;
    padding: 12px 14px;
    margin: 0;
}

/* Mesma receita do ".btn-solido-azul" já usado no resto do sistema pro
   botão de ação primária: azul-marinho escuro + brilho azul (nunca
   preenchimento solido claro) -- fica igual nos dois temas, em vez de
   "estourar" quando o tema claro remapeia --accent pra cinza escuro. */
.cta-novo-chamado-grande {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin: 0 0 22px;
    padding: 16px;
    font-size: 15px;
    font-weight: 600;
    border-radius: var(--radius);
    box-shadow:
        0 0 16px -3px #2f6fed,
        inset 0 1px 0 rgba(255, 255, 255, .08);
    cursor: pointer;
}
.cta-novo-chamado-grande:hover { filter: brightness(1.25); }

.pilulas-status-usuario {
    display: flex;
    gap: 10px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}
.pilula-status {
    flex: 1;
    min-width: 150px;
    background: var(--bg-panel-raised);
    border: 1px solid var(--border-steel);
    border-radius: 12px;
    padding: 12px 14px;
    text-align: center;
}
.pilula-status strong {
    display: block;
    font-size: 22px;
    font-family: var(--fonte-titulo);
    line-height: 1.3;
}
.pilula-status span {
    font-size: 11px;
    color: var(--text-secondary);
}

.barra-pesquisa-usuario { margin-bottom: 16px; }
.barra-pesquisa-usuario input[type="text"] {
    width: 100%;
    padding: 12px 16px;
    font-size: 13.5px;
    margin: 0;
}

.abas-usuario {
    display: flex;
    gap: 18px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border-steel);
}
.abas-usuario button {
    width: auto;
    margin: 0;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 10px 2px;
    font-size: 13px;
    color: var(--text-secondary);
    border-radius: 0;
}
.abas-usuario button.ativo {
    color: var(--text-primary);
    border-bottom-color: var(--accent);
    font-weight: 600;
}

.lista-chamados-usuario {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.chamado-usuario-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--bg-panel-raised);
    border: 1px solid var(--border-steel);
    border-radius: 12px;
    padding: 14px 16px;
    cursor: pointer;
    transition: border-color .15s;
}
.chamado-usuario-card:hover { border-color: var(--accent); }
.chamado-usuario-card .corpo-usuario-card { flex: 1; min-width: 0; }
.chamado-usuario-card .corpo-usuario-card strong {
    font-size: 13.5px;
    display: block;
    margin-bottom: 3px;
}
.chamado-usuario-card .meta-usuario-card {
    font-size: 11px;
    color: var(--text-secondary);
}
.ponto-nao-lido {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-cyan);
    box-shadow: 0 0 6px var(--accent-cyan);
    flex-shrink: 0;
}

.status-usuario-badge {
    font-size: 11px;
    padding: 4px 11px;
    border-radius: 20px;
    white-space: nowrap;
    font-weight: 600;
    flex-shrink: 0;
}
.status-usuario-recebido { background: rgba(47,111,237,.14); color: var(--accent-cyan); }
.status-usuario-andamento { background: rgba(245,185,66,.15); color: var(--cor-vencendo); }
.status-usuario-aguardando-voce { background: rgba(249,115,22,.15); color: #f97316; }
.status-usuario-aguardando-confirmacao { background: rgba(52,211,153,.15); color: var(--success); }
.status-usuario-finalizado { background: rgba(148,163,184,.15); color: var(--text-secondary); }

/* Formulario de novo chamado -- simplificado */
.form-usuario-simples { display: flex; flex-direction: column; gap: 18px; }
.campo-usuario-bloco label {
    display: block;
    font-size: 12.5px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}
/* O textarea padrao do sistema usa fonte monoespacada (pensada pra colar
   log/codigo em Atividades) -- errado pro tom de conversa que a tela do
   usuario final precisa. So aqui, volta pra fonte normal. */
.form-usuario-simples textarea {
    font-family: inherit;
    width: 100%;
    line-height: 1.5;
}
.chips-categoria-usuario { display: flex; gap: 10px; flex-wrap: wrap; }
.chip-categoria-usuario {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: auto;
    margin: 0;
    padding: 14px 20px;
    min-width: 88px;
    background: var(--bg-panel-raised);
    border: 1px solid var(--border-steel);
    border-radius: 12px;
    color: var(--text-secondary);
    font-size: 11.5px;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}
.chip-categoria-usuario .emoji-categoria { font-size: 22px; }
.chip-categoria-usuario.selecionada {
    border-color: var(--accent);
    color: var(--accent-cyan);
    background: var(--accent-soft);
}

.sugestao-autoatendimento {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: linear-gradient(135deg, rgba(47,111,237,.09), rgba(6,182,212,.06));
    border: 1px solid rgba(47,111,237,.30);
    border-radius: var(--radius);
    padding: 14px 16px;
}
.sugestao-autoatendimento .corpo-sugestao { flex: 1; font-size: 12.5px; line-height: 1.5; }
.sugestao-autoatendimento a { color: var(--accent-cyan); font-weight: 600; }

.rodape-form-usuario {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.btn-enviar-chamado-usuario {
    width: auto;
    margin: 0;
    padding: 12px 26px;
    font-size: 14px;
    font-weight: 600;
}
.btn-anexar-usuario {
    width: auto;
    margin: 0;
    padding: 12px 16px;
    background: var(--bg-panel-raised);
    border: 1px solid var(--border-steel);
    color: var(--text-secondary);
}

/* Detalhe do chamado, visao usuario */
.detalhe-usuario-cabecalho { margin-bottom: 18px; }
.link-voltar-usuario {
    display: inline-block;
    color: var(--text-secondary);
    font-size: 12.5px;
    margin-bottom: 10px;
    text-decoration: none;
}
.link-voltar-usuario:hover { color: var(--accent-cyan); }
.detalhe-usuario-titulo-linha {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.detalhe-usuario-titulo-linha h2 { margin: 0; font-size: 18px; }
.detalhe-usuario-meta {
    font-size: 12px;
    color: var(--text-secondary);
}

.aprovacao-resolucao {
    background: rgba(52,211,153,.08);
    border: 1px solid rgba(52,211,153,.30);
    border-radius: var(--radius);
    padding: 16px 18px;
    margin-bottom: 18px;
    text-align: center;
}
.aprovacao-resolucao p { margin: 0 0 12px; font-size: 13.5px; }
.aprovacao-botoes { display: flex; gap: 10px; justify-content: center; }
.aprovacao-botoes button { width: auto; margin: 0; padding: 10px 18px; font-size: 13px; }
.btn-aprovar-sim { background: var(--success); border: none; color: #04150c; font-weight: 600; }
.btn-aprovar-nao {
    background: var(--bg-panel-raised);
    border: 1px solid var(--border-steel);
    color: var(--text-secondary);
}

.csat-usuario-bloco {
    text-align: center;
    background: var(--bg-panel-raised);
    border: 1px solid var(--border-steel);
    border-radius: var(--radius);
    padding: 16px 18px;
    margin-top: 18px;
}
.csat-usuario-bloco p { margin: 0 0 4px; font-size: 13px; }
.csat-usuario-bloco .csat-usuario-sub { font-size: 11px; color: var(--text-secondary); margin-bottom: 10px; }
.csat-usuario-emojis { display: flex; gap: 16px; justify-content: center; }
.csat-usuario-emojis button {
    width: auto;
    margin: 0;
    padding: 6px;
    font-size: 26px;
    background: none;
    border: none;
    cursor: pointer;
    filter: grayscale(1);
    transition: .15s;
}
.csat-usuario-emojis button:hover { filter: grayscale(0); opacity: 1; transform: scale(1.15); }

/* ---------------------------------------------------------------------
   Tela "Falar com Suporte" -- lista de tecnicos disponiveis, clica e abre
   chat (se online) ou deixa recado (se offline).
   --------------------------------------------------------------------- */
.lista-tecnicos { display: flex; flex-direction: column; gap: 10px; }
.tecnico-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--bg-panel-raised);
    border: 1px solid var(--border-steel);
    border-radius: 12px;
    padding: 14px 16px;
    cursor: pointer;
    transition: border-color .15s;
}
.tecnico-card:hover { border-color: var(--accent); }
.avatar-tecnico-wrapper { position: relative; flex-shrink: 0; }
.ponto-status-tecnico {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid var(--bg-panel-raised);
}
.ponto-status-tecnico.online { background: var(--success); box-shadow: 0 0 6px var(--success); }
.ponto-status-tecnico.offline { background: var(--text-secondary); }
.corpo-tecnico { flex: 1; min-width: 0; }
.corpo-tecnico strong { display: block; font-size: 13.5px; margin-bottom: 2px; }
.corpo-tecnico .meta-tecnico { font-size: 11px; color: var(--text-secondary); }
.selo-status-tecnico {
    font-size: 10.5px;
    font-weight: 600;
    padding: 4px 11px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}
.selo-status-tecnico.online { background: rgba(52,211,153,.14); color: var(--success); }
.selo-status-tecnico.offline { background: rgba(148,163,184,.14); color: var(--text-secondary); }

.aviso-offline-chat {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: rgba(148,163,184,.10);
    border: 1px solid var(--border-steel);
    border-radius: var(--radius);
    padding: 12px 14px;
    font-size: 12.5px;
    color: var(--text-secondary);
    margin-bottom: 16px;
}
.form-recado-usuario textarea { width: 100%; margin-bottom: 14px; }

@media (max-width: 640px) {
    .pilulas-status-usuario { flex-direction: column; }
    .chips-categoria-usuario { justify-content: space-between; }
    .chip-categoria-usuario { flex: 1; min-width: 0; padding: 12px 8px; }
}

/* Botao que FINGE ser link (Editar, Salvar da celula de SLA, Desativar,
   "Dar acesso ao portal"...) e' <button type="submit">, entao a regra de
   botao primario do tema Papel pintava ele de azul e virava um quadradinho
   ilegivel no meio da tabela. Estes continuam sendo link em qualquer tema. */body.tema-papelbranco button[type="submit"].link-editar-comentario,
body.tema-papelbranco .link-editar-comentario{
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    color: var(--accent) !important;
    font-weight: 500;
}body.tema-papelbranco .link-editar-comentario:hover{ text-decoration: underline; }

/* No sistema real as abas e os cards do portal sao <a> (navegacao de
   verdade, com URL propria), nao <button> como no mockup -- as mesmas
   regras valem pros dois. */
.abas-usuario a {
    display: inline-block;
    border-bottom: 2px solid transparent;
    padding: 10px 2px;
    font-size: 13px;
    color: var(--text-secondary);
    text-decoration: none;
}
.abas-usuario a.ativo {
    color: var(--text-primary);
    border-bottom-color: var(--accent);
    font-weight: 600;
}
a.chamado-usuario-card, a.tecnico-card { text-decoration: none; color: inherit; }
a.chamado-usuario-card .corpo-usuario-card strong { color: var(--text-primary); }
a.cta-novo-chamado-grande { text-decoration: none; }
/* o rotulo de anexo do portal e' <label>, precisa parecer botao */
.btn-anexar-usuario { display: inline-flex; align-items: center; gap: 6px; border-radius: 10px; font-size: 13px; }

/* Todos os "botoes que sao link" (Adicionar do checklist, Compartilhar,
   Enviar comentario, abas do detalhe, remover acompanhante, carinhas do
   CSAT) sao <button type="submit"> -- a regra de botao primario dos temas
   claros pintava eles de azul. Continuam link em qualquer tema. */body.tema-papelbranco .form-compartilhar button,
body.tema-papelbranco .form-checklist-novo button,
body.tema-papelbranco .abas-variante-b button,
body.tema-papelbranco .abas-usuario button,
body.tema-papelbranco .chip-acompanhante button,
body.tema-papelbranco .csat-usuario-emojis button{
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--accent) !important;
}body.tema-papelbranco .csat-usuario-emojis button{ color: inherit !important; }body.tema-papelbranco .abas-variante-b button.ativo{ color: var(--text-primary) !important; }

/* Mesma correcao dos "botoes que sao link" para as classes .link-* que
   faltaram (link-excluir do Administracao, gerenciar tags, voltar). */body.tema-papelbranco .link-excluir,
body.tema-papelbranco .link-gerenciar-tags,
body.tema-papelbranco .link-voltar-quadro{
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}body.tema-papelbranco .link-excluir{ color: var(--danger) !important; }
body.tema-papelbranco .btn-vidro.btn-aprovar-solucao {
    background: var(--success) !important;
    border-color: var(--success) !important;
    color: #ffffff !important;
}

/* No sistema o chip de categoria e' <label> (com radio escondido dentro),
   nao <button> como no mockup -- a regra generica de label sobrescrevia o
   empilhamento emoji-em-cima-do-nome. */
label.chip-categoria-usuario {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center;
    gap: 6px;
    margin-bottom: 0 !important;
}

/* ===========================================================================
   RODADA 37 -- Administracao > Servidor (disco, backup) + "x" no mural
   =========================================================================== */

.painel-servidor {
    background: var(--bg-panel-raised);
    border: 1px solid var(--border-steel);
    border-radius: var(--radius);
    padding: 16px 18px;
    margin-bottom: 16px;
}
.cabecalho-painel-servidor {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.cabecalho-painel-servidor h4 { margin: 0; }
.cabecalho-painel-servidor button { margin-top: 0; }

/* Barra de uso de disco -- a cor sai do verde no amarelo (70%) e no
   vermelho (85%), os MESMOS limites do verificar_backup.sh, pra tela e
   script nunca discordarem sobre o que e' "cheio". */
.barra-disco {
    position: relative;
    height: 26px;
    border-radius: 13px;
    background: var(--bg-panel);
    border: 1px solid var(--border-steel);
    overflow: hidden;
    margin-bottom: 14px;
}
.barra-disco-preenchida {
    height: 100%;
    background: linear-gradient(90deg, var(--success), #4ade80);
    transition: width .4s ease;
}
.barra-disco.atencao .barra-disco-preenchida {
    background: linear-gradient(90deg, var(--cor-vencendo), #f5c56b);
}
.barra-disco.critico .barra-disco-preenchida {
    background: linear-gradient(90deg, var(--danger), #f87171);
}
.barra-disco-texto {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
    text-shadow: 0 1px 2px rgba(0,0,0,.35);
}body.tema-papelbranco .barra-disco-texto{ text-shadow: none; }

.grade-servidor {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}
.cartao-servidor {
    background: var(--bg-panel);
    border: 1px solid var(--border-steel);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cartao-servidor strong { font-size: 16px; }
.cartao-servidor .detalhe-meta { font-size: 11px; }
.cartao-servidor-alerta { border-color: var(--danger); }
.cartao-servidor-alerta strong { color: var(--danger); }

.log-servidor {
    margin: 12px 0 0;
    padding: 12px 14px;
    background: var(--campo-fundo);
    border: 1px solid var(--border-steel);
    border-radius: 8px;
    font-family: "JetBrains Mono", monospace;
    font-size: 11.5px;
    line-height: 1.6;
    color: var(--text-secondary);
    max-height: 260px;
    overflow: auto;
    white-space: pre-wrap;
}

/* ---- "x" para dispensar aviso do mural ----
   A linha virou <div> com um <a> dentro (antes era o <a> inteiro), pra'
   caber o botao ao lado sem aninhar link dentro de link -- que e' HTML
   invalido e faz o clique no "x" navegar em vez de dispensar. */
.linha-notificacao {
    display: flex;
    /* flex-direction EXPLICITO: a regra antiga de .linha-notificacao (bloco
       do sino, mais acima no arquivo) usa "column". Como as duas tem a
       mesma especificidade, so' o que esta' escrito aqui vence -- omitir
       esta linha deixava o "column" antigo valendo e o "x" caia embaixo do
       texto em vez de ficar ao lado (erro observado em teste). */
    flex-direction: row;
    align-items: center;
    gap: 8px;
}
.linha-notificacao-corpo {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: inherit;
    text-decoration: none;
}
/* No mural inline a linha e' baixinha: mensagem e data ficam lado a lado
   (era o visual original, antes do "x" existir), com reticencias quando
   o texto nao cabe. */
.mural-avisos-inline-lista .linha-notificacao-corpo {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.mural-avisos-inline-lista .linha-notificacao-msg {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mural-avisos-inline-lista .btn-dispensar-notificacao { width: 18px; height: 18px; min-width: 18px; font-size: 10px; }
.btn-dispensar-notificacao {
    width: 22px;
    height: 22px;
    min-width: 22px;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    border: 1px solid transparent;
    background: none;
    color: var(--text-terciario);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    transition: opacity .15s, background .15s, color .15s;
}
.btn-dispensar-notificacao:hover {
    opacity: 1;
    background: var(--accent-soft);
    border-color: var(--danger);
    color: var(--danger);
}

/* Cabecalho do sino com o "limpar tudo" ao lado do titulo (rodada 37) */
.dropdown-notificacoes-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.link-limpar-notificacoes {
    font-size: 10.5px;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
}
.link-limpar-notificacoes:hover { color: var(--accent); text-decoration: underline; }

/* ===========================================================================
   RODADA 38 -- faixa de ambiente ("esta nao e' a base de producao")
   ---------------------------------------------------------------------------
   Regras de desenho, nesta ordem de importancia:
   1. IMPOSSIVEL DE NAO VER: listrada, no topo, largura inteira, em toda tela.
   2. NAO ATRAPALHA: o corpo do site desce a altura exata da faixa, entao
      nada fica escondido atras dela.
   3. NAO SE PARECE COM A INTERFACE: as cores nao saem das variaveis de tema
      de proposito -- em qualquer um dos 6 temas ela continua igual, porque
      "avisar" nao pode depender do tema escolhido.
   =========================================================================== */
.faixa-ambiente {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 9999;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .03em;
    color: #2b1a00;
    background: repeating-linear-gradient(
        135deg, #f5b942 0 14px, #e0a52f 14px 28px
    );
    box-shadow: 0 2px 10px -4px rgba(0,0,0,.5);
    user-select: none;
    pointer-events: none;   /* nunca rouba clique de nada que esteja embaixo */
}
.faixa-ambiente-selo {
    background: #2b1a00;
    color: #f5c56b;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 10px;
    letter-spacing: .12em;
}
.faixa-ambiente-texto { font-weight: 700; }
.faixa-ambiente-banco {
    font-family: "JetBrains Mono", monospace;
    font-weight: 500;
    font-size: 10.5px;
    opacity: .85;
}
/* Empurra o conteudo pra baixo: a faixa e' fixed, entao sem isso ela taparia
   o topo da sidebar e da topbar. */
body:has(.faixa-ambiente) .app-shell { padding-top: 26px; }
body:has(.faixa-ambiente) .portal-shell,
body:has(.faixa-ambiente) .caixa-login,
body:has(.faixa-ambiente) .portal-caixa-login { margin-top: 40px; }
@media (max-width: 720px) {
    /* Em tela estreita some o nome do banco -- o aviso principal continua. */
    .faixa-ambiente-banco { display: none; }
}

/* Painel Ambiente na tela Servidor: em homologacao ganha a borda listrada
   da faixa do topo, pra' associar as duas coisas de imediato. */
.painel-servidor-homologacao {
    border-color: #e0a52f;
    box-shadow: inset 0 0 0 1px rgba(224, 165, 47, .25);
}

/* ==========================================================================
   RODADA 40 -- ICONE DA CATEGORIA, AVISO DE CRITICO NO PORTAL E POP DE
   CHAMADO NOVO
   ========================================================================== */

/* --- Seletor de icone na tela de Categorias ----------------------------- */
.grade-icones-categoria {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-width: 640px;
}
.opcao-icone-categoria {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 34px;
    /* Rodada 43B -- o conteudo virou SVG, nao texto: a cor do TRACO e' a
       cor do texto desta caixa (currentColor no svg). Por isso o
       `color` aqui embaixo e' o que pinta o icone, e nao font-size. */
    color: var(--text-secondary);
    line-height: 1;
    cursor: pointer;
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: var(--campo-fundo);
    transition: border-color .15s ease, background .15s ease;
}
.opcao-icone-categoria:hover { border-color: var(--accent); color: var(--text-primary); }
.opcao-icone-categoria.selecionada {
    border-color: var(--accent);
    background: var(--accent-soft);
    box-shadow: 0 0 0 1px var(--accent) inset;
    /* O escolhido fica na cor de destaque -- num conjunto monocromatico,
       a COR e' o que diferencia o selecionado do resto. Com emoji isso
       era impossivel: emoji ignora `color`. */
    color: var(--accent);
}
/* Nunca deixar o SVG maior que a caixa, venha o tamanho que vier do
   template. */
.opcao-icone-categoria .icone-categoria-svg { display: block; max-width: 20px; max-height: 20px; }

/* Coluna "Ícone" da tabela de categorias. */
.celula-icone-categoria {
    text-align: center;
    color: var(--text-secondary);
    vertical-align: middle;
}
.celula-icone-categoria .icone-categoria-svg { display: inline-block; vertical-align: middle; }
.rotulo-icone-auto {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

/* --- Modal do "critico" no portal do cliente ---------------------------- */
/* Autocontido: o portal nao carrega o CSS de modal da intranet nem o
   atividades.js -- e nao deve carregar, e' tela externa. */
.overlay-modal-portal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: var(--overlay-fundo, rgba(6, 10, 20, .72));
    backdrop-filter: blur(2px);
    padding: 20px;
    overflow-y: auto;
}
.overlay-modal-portal.aberto { display: flex; align-items: center; justify-content: center; }
.caixa-modal-portal {
    width: min(520px, 100%);
    background: var(--modal-fundo, var(--surface));
    /* HOTFIX 100A -- PISO OPACO. A linha de cima e' um GRADIENTE, e o reset
       `body.tema-minimalista * { background-image: none !important }` apaga
       gradiente de tudo. Como `background:` e' atalho, ele tambem zera a cor
       de fundo -- e no Minimalista e no Papel Branco esta superficie ficava
       com `rgba(0,0,0,0)` e `none`: transparente de verdade, com a tela de
       tras lida por cima do texto do modal. Medido no Chromium.
       Esta longhand vem DEPOIS de proposito: o atalho define imagem e cor,
       ela substitui so' a cor. Onde o gradiente sobrevive ele cobre; onde for
       apagado, sobra painel opaco em vez de nada. */
    background-color: var(--bg-panel);
    border: 1px solid var(--borda);
    border-left: 4px solid var(--danger);
    border-radius: 14px;
    padding: 22px 24px;
    box-shadow: var(--modal-sombra, 0 18px 50px rgba(0, 0, 0, .45));
}
.caixa-modal-portal h3 { margin: 0 0 10px; font-size: 17px; color: var(--danger); }
.caixa-modal-portal p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.55; }
.caixa-modal-portal ul { margin: 0 0 12px 18px; padding: 0; font-size: 13.5px; line-height: 1.7; }
.observacao-modal-portal {
    font-size: 12.5px !important;
    color: var(--text-secondary);
    border-top: 1px solid var(--borda);
    padding-top: 10px;
}
.acoes-modal-portal { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 6px; }
.btn-modal-portal-primario,
.btn-modal-portal-secundario {
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 700;
    border-radius: 9px;
    cursor: pointer;
    width: auto;
    margin: 0;
}
.btn-modal-portal-primario { color: #fff; background: var(--danger); border: 1px solid var(--danger); }
.btn-modal-portal-secundario { color: var(--text-primary); background: none; border: 1px solid var(--borda); }
.btn-modal-portal-secundario:hover { border-color: var(--accent); }

/* --- Pop de chamado novo (intranet) ------------------------------------- */
#avisos-chamado-novo {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 9500;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 340px;
}
.aviso-chamado-novo {
    background: var(--modal-fundo, var(--surface));
    /* HOTFIX 100A -- PISO OPACO. A linha de cima e' um GRADIENTE, e o reset
       `body.tema-minimalista * { background-image: none !important }` apaga
       gradiente de tudo. Como `background:` e' atalho, ele tambem zera a cor
       de fundo -- e no Minimalista e no Papel Branco esta superficie ficava
       com `rgba(0,0,0,0)` e `none`: transparente de verdade, com a tela de
       tras lida por cima do texto do modal. Medido no Chromium.
       Esta longhand vem DEPOIS de proposito: o atalho define imagem e cor,
       ela substitui so' a cor. Onde o gradiente sobrevive ele cobre; onde for
       apagado, sobra painel opaco em vez de nada. */
    background-color: var(--bg-panel);
    border: 1px solid var(--borda);
    border-left: 4px solid var(--accent);
    border-radius: 12px;
    padding: 10px 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
    animation: entrada-aviso-chamado .25s ease;
}
.aviso-chamado-novo.critico {
    border-left-color: var(--danger);
    /* Fundo proprio, nao so' a barra lateral: critico tem que se distinguir
       de relance, sem o usuario precisar ler. */
    background: var(--fundo-critico, var(--surface));
}
.aviso-chamado-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 11.5px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.aviso-chamado-novo.critico .aviso-chamado-topo strong { color: var(--danger); }
.btn-fechar-aviso-chamado {
    width: auto;
    margin: 0;
    padding: 0 4px;
    font-size: 13px;
    line-height: 1;
    color: var(--text-secondary);
    background: none;
    border: none;
    cursor: pointer;
}
.btn-fechar-aviso-chamado:hover { color: var(--text-primary); background: none; }
.aviso-chamado-corpo { display: block; margin-top: 6px; text-decoration: none; }
.aviso-chamado-titulo {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.35;
}
.aviso-chamado-meta { display: block; margin-top: 3px; font-size: 11.5px; color: var(--text-secondary); }
@keyframes entrada-aviso-chamado {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 640px) {
    #avisos-chamado-novo { left: 12px; right: 12px; max-width: none; }
}

/* --- Rodada 40: complementos --------------------------------------------- */
.aviso-chamado-botoes { display: inline-flex; gap: 4px; align-items: center; }
.btn-som-aviso {
    width: auto;
    margin: 0;
    padding: 0 3px;
    font-size: 12px;
    line-height: 1;
    background: none;
    border: none;
    cursor: pointer;
}
.btn-som-aviso:hover { opacity: 1; background: none; }

/* Falar com Suporte -- blocos de "continuar" e cartao do atendente */
.bloco-continuar-conversa { margin-bottom: 18px; }
.lista-chamados-continuar { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.item-chamado-continuar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    text-decoration: none;
    color: inherit;
    background: var(--surface);
    border: 1px solid var(--borda);
    border-radius: 10px;
}
.item-chamado-continuar:hover { border-color: var(--accent); }
.titulo-chamado-continuar { flex: 1; font-size: 13.5px; font-weight: 600; }
.btn-chamar-tecnico {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 8px;
    white-space: nowrap;
}
.btn-chamar-tecnico:hover { background: var(--accent-soft); }

/* Portal: chamado encerrado nao some a caixa, oferece a saida */
.bloco-chamado-encerrado {
    margin-top: 10px;
    padding: 12px;
    background: var(--campo-fundo);
    border: 1px dashed var(--borda);
    border-radius: 10px;
}

/* ==========================================================================
   RODADA 41 -- TELA DO CLIENTE MAIS LIMPA
   ========================================================================== */

/* Pilulas viraram os filtros (antes: pilula so' contava, aba so' filtrava) */
.filtros-status-usuario .pilula-status {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.filtros-status-usuario .pilula-status:hover { border-color: var(--accent); }
.filtros-status-usuario .pilula-status.ativa {
    border-color: var(--accent);
    background: var(--accent-soft);
}
.filtros-status-usuario .pilula-status.pilula-atencao strong { color: var(--warning, #e0a33e); }

/* Passos numerados do "abrir chamado" */
.passo-numero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-right: 6px;
    font-size: 11.5px;
    font-weight: 800;
    color: var(--accent);
    background: var(--accent-soft);
    border-radius: 50%;
}

/* Chips de escolha (equipe/categoria) -- sem emoji, so' texto */
.chips-escolha-usuario { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-escolha-usuario {
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    color: var(--text-secondary);
    background: var(--campo-fundo);
    border: 1px solid var(--borda);
    border-radius: 999px;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.chip-escolha-usuario:hover { border-color: var(--accent); color: var(--text-primary); }
.chip-escolha-usuario.selecionada {
    color: var(--accent);
    background: var(--accent-soft);
    border-color: var(--accent);
}

/* Abas do detalhe (Chamado | Chat) */
.abas-chamado-usuario { margin: 14px 0 12px; }
.cadeado-aba { font-size: 11px; color: var(--text-terciario); }

.bloco-descricao-usuario {
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--borda);
    border-radius: 12px;
    margin-bottom: 14px;
}
.texto-descricao-usuario { margin: 6px 0 0; font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; }

.bloco-chat-bloqueado {
    padding: 18px;
    text-align: center;
    background: var(--campo-fundo);
    border: 1px dashed var(--borda);
    border-radius: 12px;
}
.bloco-chat-bloqueado p { margin: 0; font-size: 13.5px; }

/* ==========================================================================
   RODADA 42 -- acoes secundarias do chamado numa linha so'
   ========================================================================== */
.linha-acoes-secundarias {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-start;
    margin: 10px 0 4px;
}
.linha-acoes-secundarias > .bloco-secundario-chamado {
    flex: 1 1 210px;
    min-width: 0;
    margin: 0;
    padding: 8px 10px;
}
.linha-acoes-secundarias .rotulo-campo-pequeno { font-size: 9.5px; }
.linha-acoes-secundarias .detalhe-meta { font-size: 11px; }
.linha-acoes-secundarias .cartao-colaboracao { padding: 6px 8px; font-size: 12px; }
.linha-acoes-secundarias .acao-suspensa-chamado > summary {
    padding: 3px 9px;
    font-size: 11px;
}
/* O painel que abre nao pode ficar preso na largura estreita da coluna */
.linha-acoes-secundarias .painel-acao-suspenso {
    position: absolute;
    z-index: 30;
    min-width: 260px;
    background: var(--modal-fundo, var(--surface));
    /* HOTFIX 100A -- PISO OPACO. A linha de cima e' um GRADIENTE, e o reset
       `body.tema-minimalista * { background-image: none !important }` apaga
       gradiente de tudo. Como `background:` e' atalho, ele tambem zera a cor
       de fundo -- e no Minimalista e no Papel Branco esta superficie ficava
       com `rgba(0,0,0,0)` e `none`: transparente de verdade, com a tela de
       tras lida por cima do texto do modal. Medido no Chromium.
       Esta longhand vem DEPOIS de proposito: o atalho define imagem e cor,
       ela substitui so' a cor. Onde o gradiente sobrevive ele cobre; onde for
       apagado, sobra painel opaco em vez de nada. */
    background-color: var(--bg-panel);
    border: 1px solid var(--borda);
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
    padding: 10px;
}
.linha-acoes-secundarias .acao-suspensa-chamado { position: relative; }
.linha-acoes-secundarias .chip-acompanhante { font-size: 11px; padding: 2px 6px; }
@media (max-width: 900px) {
    .linha-acoes-secundarias > .bloco-secundario-chamado { flex: 1 1 100%; }
}

/* =========================================================================
   RODADA 43A -- interruptor de disponibilidade do chat (topbar)
   -------------------------------------------------------------------------
   Pedido: "verifique a colocar a opcao do tecnico colocar se quer estar
   online ou nao para o chat". Segue a MESMA caixa dos outros controles da
   topbar (.btn-alternar-tema / .btn-sino-notificacoes): 34px de altura,
   fundo do painel elevado, borda de aco, 8px de raio -- pra' nao virar um
   <select> de formulario perdido no meio de uma barra de botoes.

   A cor da bolinha (o "●" que vem no texto de cada <option>) e' o que
   comunica o estado de longe; o texto so' confirma. Verde/ambar/cinza em
   vez de verde/vermelho de proposito: "fora do chat" nao e' erro nem
   problema, e' uma escolha legitima -- pintar de vermelho faria parecer
   que a pessoa esta' em falta.
   ========================================================================= */
.form-disponibilidade-chat { margin: 0; display: inline-flex; }
.select-disponibilidade-chat {
    height: 34px !important;
    margin: 0 !important;
    padding: 0 26px 0 10px !important;
    width: auto !important;
    min-width: 0;
    background: var(--bg-panel-raised) !important;
    border: 1px solid var(--border-steel) !important;
    border-radius: 8px !important;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}
.select-disponibilidade-chat:hover { border-color: var(--accent-cyan) !important; }
/* A classe status-* vem do servidor (ver base.html) e pinta o texto do
   controle fechado -- o navegador nao deixa estilizar o "●" por dentro do
   <option> de forma confiavel, entao a cor vai no proprio select. */
.select-disponibilidade-chat.status-disponivel { color: #4ade80 !important; }
.select-disponibilidade-chat.status-ocupado    { color: #fbbf24 !important; }
.select-disponibilidade-chat.status-fora       { color: var(--text-secondary) !important; }
.select-disponibilidade-chat option { color: var(--text-primary); background: var(--bg-panel); }

/* Portal do cliente: o mesmo estado do outro lado. "ocupado" reaproveita a
   caixa do "online" (o cliente PODE escrever), so' muda a cor -- verde
   prometeria resposta imediata. */
.chat-status-presenca.ocupado {
    color: #b45309;
    border-color: rgba(180, 83, 9, .35);
    background: rgba(251, 191, 36, .12);
}

/* =========================================================================
   RODADA 43A -- texto cortado nas barrinhas de Atribuídos / Não atribuídos
   -------------------------------------------------------------------------
   Print do usuário: "EQUIPE: DESENVOLVI...", "12/08/20...", chip de
   categoria cortado no meio da letra ("SISTEMAS BLUEWOL") e, o pior,
   "STATUS: ..." -- o status sumia inteiro.

   Causa: as 9 colunas do grid dividiam a largura em `1fr` proporcional,
   então TODO campo encolhia junto, inclusive os que têm tamanho fixo por
   natureza (data e status nunca ficam menores que o texto deles). Quem
   pagava a conta era sempre o mesmo: o campo virava reticências.

   Correção mantendo o formato de UMA LINHA por chamado (pedido explícito:
   "o layout dele eu não quero que mude o formato"):
     - data/hora e status passam a `max-content` -- não encolhem nunca;
     - o título absorve o aperto (é o único com tooltip nativo, e é o campo
       que a pessoa consegue adivinhar pelo começo);
     - o chip de categoria ganha reticências PRÓPRIAS, em vez de ser
       decepado no meio de uma letra pelo overflow da célula.
   ========================================================================= */
.linha-chamado-fila-v2 {
    grid-template-columns:
        auto                  /* #protocolo   */
        /* RODADA 131 -- o titulo era `minmax(110px, 2.4fr)` e virava
           reticencia quase sempre. Pedido dele, com print: "quero que ajuste
           para o texto do titulo apareca completo". O minimo subiu para 240px
           e o titulo passou a QUEBRAR em duas linhas em vez de ser cortado
           (ver `.linha-v2-titulo`). Os `max-content` de data e status, que sao
           a razao desta regra existir, continuam intactos. */
        minmax(240px, 2.6fr)  /* título       */
        minmax(80px, 1fr)     /* solicitante  */
        minmax(70px, .8fr)    /* equipe       */
        minmax(80px, 1.2fr)   /* categoria    */
        minmax(80px, 1fr)     /* responsável  */
        max-content           /* data/hora    */
        max-content           /* status       */
        auto;                 /* botão        */
    column-gap: 10px;
}
/* Sem isto o chip é cortado pela célula e some meia letra -- reticências
   dentro do próprio chip deixam claro que o nome continua. */
.linha-v2-campo .chip-tag {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}
/* Telas médias: antes de espremer, o rótulo "DATA/HORA:" sai -- a data já
   se explica sozinha e devolve ~75px pros campos de texto. */
@media (max-width: 1600px) {
    .linha-v2-data .rot-barrinha { display: none; }
}

/* ===========================================================
   Rodada 45A -- tela de Expediente e Feriados (Chamados > Config).
   2a passada, pedido do Alex: "ta muito espaçado fica ruim de procurar".
   A tabela .tabela-permissoes (usada antes) tem respiro pensado para
   matriz de permissao, com poucas linhas largas. Aqui sao 7 dias e ~20
   feriados: o que ajuda e' densidade, nao respiro. Dai .tabela-densa.
   =========================================================== */
.tabela-densa {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}
.tabela-densa th {
    text-align: left;
    font-size: 10.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--text-secondary);
    padding: 4px 8px;
    border-bottom: 1px solid var(--border-steel);
    white-space: nowrap;
}
.tabela-densa td {
    padding: 1px 8px;
    border-bottom: 1px solid color-mix(in srgb, var(--border-steel) 45%, transparent);
    vertical-align: middle;
}
.tabela-densa tbody tr:last-child td { border-bottom: none; }
.tabela-densa tbody tr:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
/* Largura travada: sem isto a coluna "Adicionar" e' empurrada pra borda da
   tela e fica a metros da linha que ela pertence. */
.tabela-semana-expediente { margin-bottom: 4px; max-width: 860px; }
.tabela-semana-expediente .col-horas { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.linha-dia-fechado td { color: var(--text-terciario); }

/* Uma faixa (ou um feriado) inteira numa linha só: campos pequenos, botoes
   de um caractere. E' o que permite 7 dias + 20 feriados caberem sem
   rolagem. */
.faixa-editavel {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
}
.faixa-editavel > span { color: var(--text-secondary); font-size: 11px; }
.faixa-editavel input[type="time"],
.faixa-editavel input[type="date"],
.faixa-editavel input[type="text"] {
    height: 24px;
    box-sizing: border-box;
    padding: 0 5px;
    border-radius: 5px;
    background: var(--campo-fundo);
    border: 1px solid var(--border-steel);
    color: var(--text-primary);
    font-size: 12px;
    line-height: 1;
    /* O input nativo de hora/data traz um icone de relogio/calendario que
       estica a caixa. Sem isto a linha volta pros 50px que o Alex reclamou. */
    min-height: 0;
}
.faixa-editavel input[type="time"]::-webkit-calendar-picker-indicator,
.faixa-editavel input[type="date"]::-webkit-calendar-picker-indicator {
    padding: 0; margin-left: 2px; opacity: .5; cursor: pointer;
}
.faixa-editavel input[type="time"]:hover::-webkit-calendar-picker-indicator,
.faixa-editavel input[type="date"]:hover::-webkit-calendar-picker-indicator { opacity: .9; }
.faixa-editavel input[type="time"],
.faixa-editavel input[type="date"] { width: auto; }
.faixa-editavel .campo-desc-feriado { min-width: 190px; flex: 1 1 auto; }
.faixa-editavel label {
    display: inline-flex; align-items: center; gap: 4px; margin: 0;
    font-size: 11.5px; color: var(--text-secondary); white-space: nowrap;
}
/* Mesmo motivo do botao: o checkbox padrao do tema vem com margem e um
   tamanho pensado pra formulario, nao pra linha de tabela. */
.faixa-editavel input[type="checkbox"] {
    margin: 0; width: 14px; height: 14px; min-height: 0; flex: none;
}
.faixa-editavel button {
    /* O style.css tem uma regra global de botao com margin-top: 20px (pensada
       pra botao de formulario embaixo de um campo). Aqui ela esticava a linha
       da tabela de 26px pra 47px -- era a causa real do "muito espaçado". */
    margin: 0;
    /* RODADA 98 -- este container e' `inline-flex`, e o campo de descricao do
       feriado leva `flex: 1 1 auto`. Enquanto o botao herdava largura cheia,
       a base do flex era grande e ele aguentava o aperto; com largura pelo
       conteudo, o "Adicionar" encolheu de 79px para 44px e passou a cortar o
       proprio rotulo (62px). Foi a UNICA regressao da mudanca da largura, e
       apareceu na medicao, nao na leitura. `flex: 0 0 auto` diz o obvio: o
       botao nao e' o item que cede espaco. */
    flex: 0 0 auto;
    height: 24px;
    min-width: 24px;
    padding: 0 6px;
    border-radius: 5px;
    background: transparent;
    border: 1px solid var(--border-steel);
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
}
.faixa-editavel button:hover { border-color: var(--accent); color: var(--accent); }
.faixa-editavel .btn-remover-faixa:hover { border-color: var(--danger); color: var(--danger); }
.linha-faixas { display: flex; flex-wrap: wrap; gap: 10px; }

/* Feriados em duas colunas: ~20 registros numa lista unica viram uma tela
   de rolagem; lado a lado cabem de uma olhada, e a separacao "todo ano" x
   "data movel" e' justamente a pergunta que se faz ao procurar um. */
/* max-width evita que a coluna da direita passe por baixo do selo
   "Blue Wolf - 8 anos", que fica ancorado no canto direito da tela. */
.colunas-feriados { display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-start; max-width: 1000px; }
.coluna-feriados { flex: 1 1 420px; min-width: 360px; }
.coluna-feriados h3 {
    font-size: 11.5px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin: 0 0 4px;
    padding-bottom: 3px;
    border-bottom: 1px solid var(--border-steel);
}
.coluna-feriados h3 small { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-terciario); }

.barra-acoes-feriado {
    display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
    margin: 6px 0 12px;
}
.btn-compacto { height: 28px; padding: 0 12px; font-size: 12px; margin: 0; }
.barra-acoes-feriado form { margin: 0; }

.titulo-seccao-config {
    font-size: 13px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text-primary);
    margin: 22px 0 8px;
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.titulo-seccao-config small {
    font-size: 11.5px; font-weight: 400; text-transform: none;
    letter-spacing: 0; color: var(--text-secondary);
}

/* O texto explicativo longo fica recolhido: quem ja' entendeu a tela nao
   precisa rolar por cima dele toda vez. */
.ajuda-expediente { margin: 2px 0 14px; font-size: 12.5px; }
.ajuda-expediente > summary {
    cursor: pointer;
    color: var(--text-secondary);
    padding: 4px 0;
}
.ajuda-expediente > summary span { color: var(--accent); }
.ajuda-expediente > div {
    border-left: 2px solid var(--border-steel);
    padding: 2px 0 2px 12px;
    margin-top: 6px;
    line-height: 1.55;
    color: var(--text-secondary);
}
.ajuda-expediente p { margin: 0 0 8px; }
.ajuda-expediente p:last-child { margin-bottom: 0; }

.aviso-expediente-vazio {
    border: 1px solid var(--cor-vencendo);
    background: color-mix(in srgb, var(--cor-vencendo) 10%, transparent);
    border-radius: 8px;
    padding: 11px 14px;
    margin: 4px 0 14px;
    font-size: 12.5px;
    line-height: 1.5;
}

/* ===========================================================
   Rodada 46 -- checklist, duplicados, chat flutuante.
   =========================================================== */

/* --- 46B: checklist do chamado --- */
.bloco-checklist-chamado { margin-bottom: 14px; }
.barra-progresso-checklist {
    height: 4px; border-radius: 3px; margin: 2px 0 10px;
    background: color-mix(in srgb, var(--border-steel) 60%, transparent);
    overflow: hidden;
}
.barra-progresso-checklist span {
    display: block; height: 100%; background: var(--success);
    transition: width .25s ease;
}
.lista-checklist-chamado { list-style: none; margin: 0 0 10px; padding: 0; }
.lista-checklist-chamado li {
    display: flex; align-items: center; gap: 8px;
    padding: 3px 0; font-size: 13px;
    border-bottom: 1px solid color-mix(in srgb, var(--border-steel) 35%, transparent);
}
.lista-checklist-chamado li:last-child { border-bottom: none; }
.lista-checklist-chamado form { margin: 0; }
.lista-checklist-chamado .texto-checklist { flex: 1 1 auto; }
.lista-checklist-chamado .item-feito .texto-checklist {
    text-decoration: line-through; color: var(--text-terciario);
}
.marcador-checklist {
    margin: 0; padding: 0 4px; height: 22px; min-width: 22px;
    background: none; border: none; cursor: pointer;
    color: var(--text-secondary); font-size: 15px; line-height: 1;
}
.marcador-checklist:hover { color: var(--accent); }
.form-add-checklist { display: flex; gap: 6px; margin: 0; }
.form-add-checklist input {
    flex: 1 1 auto; height: 30px; box-sizing: border-box; padding: 0 8px;
    border-radius: 6px; background: var(--campo-fundo);
    border: 1px solid var(--border-steel); color: var(--text-primary); font-size: 13px;
}
.form-add-checklist button { margin: 0; height: 30px; }

/* --- 46D: duplicado --- */
.badge-status-duplicado {
    background: rgba(148, 163, 184, .12) !important;
    border: 1px dashed #94a3b8 !important;
    color: #cbd5e1 !important;
}
.aviso-duplicado-chamado {
    border: 1px dashed var(--border-steel);
    border-radius: 8px; padding: 10px 12px; margin-top: 10px;
    font-size: 12.5px; line-height: 1.5; color: var(--text-secondary);
}
.aviso-duplicado-chamado strong { color: var(--text-primary); }

/* --- 46C: formulario de recorrencia --- */
.form-recorrencia {
    display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end;
    margin: 0 0 16px; max-width: 1100px;
}
.campo-recorrencia { display: flex; flex-direction: column; gap: 3px; }
.campo-recorrencia.campo-largo { flex: 1 1 260px; }
.campo-recorrencia label {
    font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase;
    color: var(--text-secondary); margin: 0;
}
.campo-recorrencia input, .campo-recorrencia select {
    height: 30px; box-sizing: border-box; padding: 0 8px; margin: 0;
    border-radius: 6px; background: var(--campo-fundo);
    border: 1px solid var(--border-steel); color: var(--text-primary); font-size: 13px;
}
.campo-recorrencia button { margin: 0; height: 30px; }

/* --- 46H: painel do chat flutuante --- */
/* NAO redeclarar `position` aqui: o botao ja' e' `position: fixed` la' em
   cima, e `fixed` tambem serve de ancora para filho absoluto. Declarar
   `relative` (como fiz na primeira versao) tirava o botao do canto da tela e
   ele voltava a flutuar no meio do conteudo. */
.botao-flutuante-chat.com-pendencia {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 45%, transparent);
}
.badge-chat-flutuante {
    position: absolute; top: -4px; right: -4px;
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 9px; background: var(--danger-solido); color: #fff;
    font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}
.painel-chat-flutuante {
    position: fixed; right: 22px; bottom: 86px; z-index: 60;
    width: 340px; max-height: 62vh;
    display: flex; flex-direction: column;
    background: var(--bg-panel-raised);
    border: 1px solid var(--border-steel);
    border-radius: 12px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .45);
    overflow: hidden;
}
.cabecalho-painel-chat {
    display: flex; align-items: center; justify-content: space-between;
    padding: 9px 12px; font-size: 13px;
    border-bottom: 1px solid var(--border-steel);
}
.fechar-painel-chat {
    margin: 0; padding: 0 4px; background: none; border: none;
    color: var(--text-secondary); cursor: pointer; font-size: 13px;
}
.fechar-painel-chat:hover { color: var(--text-primary); }
.corpo-painel-chat { overflow-y: auto; }
.item-chat-pendente {
    display: block; padding: 9px 12px; text-decoration: none;
    color: var(--text-primary); font-size: 12.5px;
    border-bottom: 1px solid color-mix(in srgb, var(--border-steel) 45%, transparent);
}
.item-chat-pendente:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.item-chat-pendente .linha-topo-chat { display: flex; gap: 6px; align-items: baseline; }
.item-chat-pendente .trecho-chat {
    margin-top: 3px; color: var(--text-secondary); font-size: 12px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}


/* =====================================================================
   RODADA 52 -- Indicadores de RH (primeiro modulo importado do
   sistema-guias). Reaproveita `tabela-densa`, que ja' existia; o que entra
   aqui e' so' o que a tela tem de proprio: a grade dos quatro graficos, a
   coluna de resultado calculado e a linha de mes ainda sem dado.
   Nenhuma cor nova -- todas saem das variaveis de tema que ja' existem
   (--bg-panel-raised, --border-steel, --text-secondary, --accent), pra
   tela nascer certa nos dois temas sem ninguem precisar lembrar.
   ===================================================================== */
.grade-graficos-rh {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
    margin-bottom: 8px;
}
.cartao-grafico-rh {
    background: var(--bg-panel-raised);
    border: 1px solid var(--border-steel);
    border-radius: var(--radius);
    padding: 14px 16px 18px;
}
.cartao-grafico-rh h3 {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
}
/* O canvas precisa de altura limitada pelo pai: com maintainAspectRatio
   false, o Chart.js cresce ate' o container -- e container sem altura vira
   grafico de altura zero. */
.cartao-grafico-rh canvas { max-height: 220px; }

/* RODADA 54 -- a tabela de RH CABE, em vez de rolar.

   Antes: `input[type=number] { width: 68px }` mais uma observacao de 150px
   somavam ~1.480px em 15 colunas. Nao cabia com a barra lateral, e as quatro
   colunas de RESULTADO -- as unicas que alguem le' de relance -- ficavam
   fora da tela, atras de rolagem horizontal. Numa tela de indicador, esconder
   o indicador e' o pior lugar possivel para cortar.

   `table-layout: fixed` inverte a conta: em vez de a tabela crescer ate'
   caber o conteudo, o conteudo se ajusta a' largura disponivel. As
   porcentagens do <colgroup> (ver templates/indicadores_rh.html) somam 100,
   e o input vai a 100% da propria celula.

   Porcentagem e nao pixel: pixel resolve para o monitor de quem pediu e
   volta a rolar no proximo. */
.tabela-rh {
    table-layout: fixed;
    width: 100%;
}
.tabela-rh input[type="number"],
.tabela-rh input[type="text"] {
    width: 100%;
    box-sizing: border-box;   /* sem isto o padding estoura os 100% */
    min-width: 0;             /* input tem largura intrinseca; sem isto ele
                                 se recusa a encolher dentro do grid */
    padding-left: 4px;
    padding-right: 4px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.tabela-rh input[type="text"][name="observacao"] { text-align: left; }

/* O cabecalho pode quebrar em duas linhas -- com largura travada, `nowrap`
   faria "% Turnover" e "12h dias" vazarem por cima da coluna vizinha. */
.tabela-rh th {
    white-space: normal;
    line-height: 1.15;
    padding-left: 4px;
    padding-right: 4px;
}
.tabela-rh td { padding-left: 4px; padding-right: 4px; }

/* As larguras. Somam 100% com a coluna de acao, e a observacao absorve a
   sobra quando ela nao aparece (quem so' le' nao tem botao Salvar). */
.tabela-rh .col-mes   { width: 7%;  }
.tabela-rh .col-num   { width: 5.1%; }   /* x9 = 45,9% */
.tabela-rh .col-horas { width: 6%;  }
.tabela-rh .col-obs   { width: 12%; }
.tabela-rh .col-acao  { width: 6%;  }
.tabela-rh .col-calc  { width: 5.7%; }   /* x4 = 22,8% */

.btn-salvar-rh { width: 100%; }

/* A rede: em tela estreita de verdade (celular), espremer 15 colunas e' pior
   que rolar. Abaixo disto a tabela volta a ter largura minima e o
   overflow-x do template assume. */
@media (max-width: 900px) {
    .tabela-rh { table-layout: auto; min-width: 980px; }
    .tabela-rh input[type="number"] { width: 56px; }
    .tabela-rh input[type="text"][name="observacao"] { width: 140px; }
}
/* Resultado nao se digita. A coluna calculada fica visualmente separada do
   que e' campo, senao alguem tenta editar a % de turnover e nao entende por
   que ela volta ao valor de antes. */
.tabela-rh .celula-calculada {
    background: var(--vidro-16);
    text-align: right;
    font-variant-numeric: tabular-nums;
}
/* Mes sem nenhum dado digitado -- presente na planilha, mas apagado, pra
   quem preenche enxergar de longe o que falta. */
.tabela-rh .linha-sem-dado td:first-child { color: var(--text-terciario); }

.btn-salvar-rh {
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 6px;
    border: 1px solid var(--border-steel);
    background: var(--vidro-16);
    color: var(--text-primary);
    cursor: pointer;
}
.btn-salvar-rh:hover { border-color: var(--accent); }

/* === RODADA 83A -- utilitarias e classes de layout (geradas) === */
/* Geradas por converter_estilo_83a.py a partir da tabela dele.
 * Nao editar a mao: a suite 83A confere que cada classe usada
 * nos templates existe aqui com a MESMA declaracao. */
/* POR QUE `!important` AQUI, E POR QUE `.oculto` FICA DE FORA.
 *
 * Estas classes substituem `style=` do HTML, e estilo inline vence QUALQUER
 * classe. Medido nesta rodada, em duas etapas:
 *   - classe simples: 92 elementos de 4.917 mudaram de estilo, porque a
 *     utilitaria empatava com a classe do componente e a ordem do arquivo
 *     decidia (`.u-display-inline` perdendo para `.rotulo-campo-pequeno`);
 *   - seletor dobrado (.x.x, peso de duas classes): sobraram 68, porque
 *     regras de dois niveis vencem -- ex.:
 *     `.linha-acoes-secundarias .acao-suspensa-chamado > summary`, que o
 *     inline daquele <summary> existia justamente para sobrepor.
 * `!important` e' o unico peso equivalente ao que o inline tinha. E' o mesmo
 * caminho das utilitarias do Bootstrap (`.m-0 { margin:0!important }`), pelo
 * mesmo motivo.
 *
 * `.oculto` NAO leva `!important`, de proposito: mostrar um elemento por JS
 * (`el.style.display = "flex"`) e' inline, e inline perde para `!important`.
 * Com `!important` aqui, metade dos toggles do projeto pararia de mostrar
 * qualquer coisa. Ela fica com o seletor dobrado, e quem mostra/esconde usa
 * `window.bwVisivel`, que tira a classe em vez de brigar com ela. */
/* AS DUAS ABAIXO LEVAM `!important`, E O MOTIVO E' MEDIDO.
 * O <summary> das acoes secundarias do detalhe tem uma regra de dois niveis
 * -- `.linha-acoes-secundarias .acao-suspensa-chamado > summary` -- que pesa
 * mais que qualquer classe simples ou dobrada. O `style=` daquele elemento
 * existia EXATAMENTE para sobrepor essa regra; sem `!important` a conversao
 * devolvia o botao ao tamanho compacto (medido: 38 diferencas de estilo
 * calculado). O peso e' dado a estas duas classes SO', e nao a camada
 * inteira: aplicar `!important` em todas piorou -- 114 diferencas --, porque
 * ressuscitava `style=` que ja' estava morto (inline perdendo para regra
 * `!important` do componente). */
.oculto.oculto { display:none; }
.u-align-self-center.u-align-self-center { align-self:center; }
.u-align-self-flex-end.u-align-self-flex-end { align-self:flex-end; }
/* HOTFIX 100A -- passou a ler a versao SOLIDA. Este e' o botao
   'Confirmar' do modal de confirmacao do projeto, com texto claro em
   cima: 2,44:1 no escuro e 2,16:1 no Repouso. Ele nunca tinha sido
   medido porque a varredura da 100 nao abria `.modal-overlay` -- tirava
   `.oculto` e parava ai'. */
.u-background-danger.u-background-danger { background:var(--danger-solido); }
.u-border-color-danger.u-border-color-danger { border-color:var(--danger); }
.u-border-color-danger-forte.u-border-color-danger-forte { border-color:var(--danger) !important; }
.u-color-accent-cyan.u-color-accent-cyan { color:var(--accent-cyan); }
.u-color-danger.u-color-danger { color:var(--danger); }
.u-color-danger-forte.u-color-danger-forte { color:var(--danger) !important; }
.u-color-success.u-color-success { color:var(--success); }
.u-color-text-primary.u-color-text-primary { color:var(--text-primary); }
.u-color-text-secondary.u-color-text-secondary { color:var(--text-secondary); }
.u-color-warning.u-color-warning { color:var(--warning); }
.u-cursor-pointer.u-cursor-pointer { cursor:pointer; }
.u-display-block.u-display-block { display:block; }
.u-display-contents.u-display-contents { display:contents; }
.u-display-flex.u-display-flex { display:flex; }
.u-display-inline.u-display-inline { display:inline; }
.u-display-inline-block.u-display-inline-block { display:inline-block; }
.u-flex-1.u-flex-1 { flex:1; }
.u-flex-basis-100.u-flex-basis-100 { flex-basis:100%; }
.u-flex-wrap-wrap.u-flex-wrap-wrap { flex-wrap:wrap; }
.u-font-family-jetbrains-mono-monospace.u-font-family-jetbrains-mono-monospace { font-family:'JetBrains Mono',monospace; }
.u-font-size-11-5px.u-font-size-11-5px { font-size:11.5px; }
.u-font-size-11px.u-font-size-11px { font-size:11px !important; }
.u-font-size-12px.u-font-size-12px { font-size:12px; }
.u-font-size-13px.u-font-size-13px { font-size:13px; }
.u-font-size-14px.u-font-size-14px { font-size:14px; }
.u-font-size-16px.u-font-size-16px { font-size:16px; }
.u-font-size-22px.u-font-size-22px { font-size:22px; }
.u-font-weight-700.u-font-weight-700 { font-weight:700; }
.u-gap-10px.u-gap-10px { gap:10px; }
.u-gap-6px.u-gap-6px { gap:6px; }
.u-gap-8px.u-gap-8px { gap:8px; }
.u-grid-column-1-neg-1.u-grid-column-1-neg-1 { grid-column:1/-1; }
.u-grid-template-columns-1fr.u-grid-template-columns-1fr { grid-template-columns: 1fr; }
.u-grid-template-columns-1fr-1fr.u-grid-template-columns-1fr-1fr { grid-template-columns: 1fr 1fr; }
.u-justify-content-flex-end.u-justify-content-flex-end { justify-content:flex-end; }
.u-margin-0.u-margin-0 { margin:0; }
.u-margin-0-0-10px.u-margin-0-0-10px { margin:0 0 10px; }
.u-margin-0-0-4px.u-margin-0-0-4px { margin:0 0 4px; }
.u-margin-0-0-6px.u-margin-0-0-6px { margin:0 0 6px; }
.u-margin-0-0-8px.u-margin-0-0-8px { margin:0 0 8px; }
.u-margin-0-auto-10px.u-margin-0-auto-10px { margin:0 auto 10px; }
.u-margin-10px-0-6px.u-margin-10px-0-6px { margin:10px 0 6px; }
.u-margin-12px-0-0.u-margin-12px-0-0 { margin:12px 0 0; }
.u-margin-14px-0.u-margin-14px-0 { margin:14px 0; }
.u-margin-16px-0-24px.u-margin-16px-0-24px { margin:16px 0 24px; }
.u-margin-18px-0-8px.u-margin-18px-0-8px { margin:18px 0 8px; }
.u-margin-22px-0-6px.u-margin-22px-0-6px { margin:22px 0 6px; }
.u-margin-26px-0-6px.u-margin-26px-0-6px { margin:26px 0 6px; }
.u-margin-2px-0-8px.u-margin-2px-0-8px { margin:2px 0 8px; }
.u-margin-4px-0-0.u-margin-4px-0-0 { margin:4px 0 0; }
.u-margin-4px-0-10px.u-margin-4px-0-10px { margin:-4px 0 10px; }
.u-margin-6px-0.u-margin-6px-0 { margin:6px 0; }
.u-margin-6px-0-0.u-margin-6px-0-0 { margin:6px 0 0; }
.u-margin-8px-0-0.u-margin-8px-0-0 { margin:8px 0 0; }
.u-margin-8px-0-12px-20px.u-margin-8px-0-12px-20px { margin:8px 0 12px 20px; }
.u-margin-8px-0-16px.u-margin-8px-0-16px { margin:8px 0 16px; }
.u-margin-bottom-10px.u-margin-bottom-10px { margin-bottom:10px; }
.u-margin-bottom-12px.u-margin-bottom-12px { margin-bottom:12px; }
.u-margin-bottom-14px.u-margin-bottom-14px { margin-bottom:14px; }
.u-margin-bottom-18px.u-margin-bottom-18px { margin-bottom:18px; }
.u-margin-bottom-20px.u-margin-bottom-20px { margin-bottom:20px; }
.u-margin-bottom-2px.u-margin-bottom-2px { margin-bottom:2px; }
.u-margin-bottom-4px.u-margin-bottom-4px { margin-bottom:4px; }
.u-margin-bottom-8px.u-margin-bottom-8px { margin-bottom:8px; }
.u-margin-left-auto.u-margin-left-auto { margin-left:auto; }
.u-margin-top-0.u-margin-top-0 { margin-top:0; }
.u-margin-top-10px.u-margin-top-10px { margin-top:10px; }
.u-margin-top-12px.u-margin-top-12px { margin-top:12px; }
.u-margin-top-16px.u-margin-top-16px { margin-top:16px; }
.u-margin-top-20px.u-margin-top-20px { margin-top:20px; }
.u-margin-top-24px.u-margin-top-24px { margin-top:24px; }
.u-margin-top-26px.u-margin-top-26px { margin-top:26px; }
.u-margin-top-28px.u-margin-top-28px { margin-top:28px; }
.u-margin-top-2px.u-margin-top-2px { margin-top:2px; }
.u-margin-top-4px.u-margin-top-4px { margin-top:4px; }
.u-margin-top-6px.u-margin-top-6px { margin-top:6px; }
.u-margin-top-8px.u-margin-top-8px { margin-top:8px; }
.u-margin-top-neg-4px.u-margin-top-neg-4px { margin-top:-4px; }
.u-max-width-160px.u-max-width-160px { max-width:160px; }
.u-max-width-280px.u-max-width-280px { max-width:280px; }
.u-max-width-340px.u-max-width-340px { max-width:340px; }
.u-max-width-360px.u-max-width-360px { max-width:360px; }
.u-max-width-420px.u-max-width-420px { max-width:420px; }
.u-max-width-460px.u-max-width-460px { max-width:460px; }
.u-max-width-520px.u-max-width-520px { max-width:520px; }
.u-max-width-640px.u-max-width-640px { max-width:640px; }
.u-max-width-720px.u-max-width-720px { max-width:720px; }
.u-min-width-280px.u-min-width-280px { min-width:280px; }
.u-opacity-65.u-opacity-65 { opacity:.65; }
.u-overflow-x-auto.u-overflow-x-auto { overflow-x:auto; }
.u-padding-0-2px.u-padding-0-2px { padding:0 2px; }
.u-padding-10px-24px.u-padding-10px-24px { padding:10px 24px; }
.u-padding-12px.u-padding-12px { padding:12px; }
.u-padding-14px.u-padding-14px { padding:14px; }
.u-padding-2px.u-padding-2px { padding:2px; }
.u-padding-4px-10px.u-padding-4px-10px { padding:4px 10px !important; }
.u-padding-4px-2px.u-padding-4px-2px { padding:4px 2px; }
.u-text-align-center.u-text-align-center { text-align:center; }
.u-text-decoration-none.u-text-decoration-none { text-decoration:none; }
.u-vertical-align-middle.u-vertical-align-middle { vertical-align:middle; }
.u-vertical-align-neg-1px.u-vertical-align-neg-1px { vertical-align:-1px; }
.u-white-space-nowrap.u-white-space-nowrap { white-space:nowrap; }
.u-white-space-pre-wrap.u-white-space-pre-wrap { white-space:pre-wrap; }
.u-width-100.u-width-100 { width:100%; }
.u-width-110px.u-width-110px { width:110px; }
.u-width-230px.u-width-230px { width:230px; }
.u-width-24px.u-width-24px { width:24px; }
.u-width-28px.u-width-28px { width:28px; }
.u-width-38px.u-width-38px { width:38px; }
.u-width-56px.u-width-56px { width:56px; }
.u-width-70px.u-width-70px { width:70px; }
.u-width-auto.u-width-auto { width:auto; }
.u-width-fit-content.u-width-fit-content { width:fit-content; }
.u-word-break-break-word.u-word-break-break-word { word-break:break-word; }
.u-z-index-200.u-z-index-200 { z-index:200; }
/* classes de layout, nomeadas por funcao */
.bolinha-barra-40.bolinha-barra-40 { width:40px;height:6px;border-radius:3px; }
.bolinha-barra-fina.bolinha-barra-fina { width:100%;height:3px;border-radius:2px; }
.bolinha-barra-vertical.bolinha-barra-vertical { width:5px;height:36px;border-radius:3px; }
.botao-copiar-senha.botao-copiar-senha { width:auto; margin:0; padding:4px 12px; font-size:11.5px; font-weight:700; color:var(--success); background:none; border:1px solid var(--success); border-radius:6px; cursor:pointer; }
.botao-largo.botao-largo { display:inline-block; padding:12px 22px; font-size:14px; }
.botao-secundario-plano.botao-secundario-plano { background:var(--bg-panel-raised); color:var(--text-secondary); margin:0; }
.caixa-meta.caixa-meta { background:var(--bg-panel-raised); border-radius:8px; padding:8px 10px; margin:6px 0; }
.campo-busca-grande.campo-busca-grande { width:100%; max-width:520px; height:44px; box-sizing:border-box; padding:0 14px; border-radius:10px; background:var(--campo-fundo); border:1px solid var(--border-steel); color:var(--text-primary); font-size:14px; }
.campo-celula-52.campo-celula-52 { width:52px; height:32px; box-sizing:border-box; padding:0 6px; border-radius:6px; background:var(--campo-fundo); border:1px solid var(--border-steel); color:var(--text-primary); }
.campo-celula-56.campo-celula-56 { width:56px; height:32px; box-sizing:border-box; padding:0 6px; border-radius:6px; background:var(--campo-fundo); border:1px solid var(--border-steel); color:var(--text-primary); }
.codigo-destacado.codigo-destacado { font-size:14px; padding:2px 8px; background:var(--accent-soft); border-radius:6px; }
.faixa-opcoes-10.faixa-opcoes-10 { flex-basis:100%; display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:4px; }
.inline-centro-2.inline-centro-2 { display:inline-flex; align-items:center; gap:2px; }
.inline-centro-4.inline-centro-4 { display:inline-flex; align-items:center; gap:4px; }
.inline-centro-6.inline-centro-6 { display:inline-flex; align-items:center; gap:6px; }
.linha-6.linha-6 { display:flex; gap:6px; margin:0; }
.linha-6-acima-6.linha-6-acima-6 { display:flex; gap:6px; margin:6px 0 0; }
.linha-8-acima-8.linha-8-acima-8 { display:flex; gap:8px; margin-top:8px; }
.linha-base-10.linha-base-10 { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; margin-bottom:18px; }
.linha-centro-12.linha-centro-12 { display:flex; gap:12px; align-items:center; }
.linha-centro-4.linha-centro-4 { display:flex; align-items:center; gap:4px; }
.linha-centro-6-abaixo-10.linha-centro-6-abaixo-10 { display:flex; gap:6px; align-items:center; margin:0 0 10px; }
.linha-centro-6-abaixo-6.linha-centro-6-abaixo-6 { display:flex; gap:6px; align-items:center; margin:0 0 6px; }
.linha-centro-8.linha-centro-8 { display:flex; align-items:center; gap:8px; }
.linha-extremos-12.linha-extremos-12 { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:28px; }
.linha-quebra-14.linha-quebra-14 { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:20px; }
.linha-quebra-4.linha-quebra-4 { display:flex; gap:4px; flex-wrap:wrap; margin-bottom:4px; }
.linha-quebra-6-estreita.linha-quebra-6-estreita { display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; max-width:420px; }
.linha-quebra-8.linha-quebra-8 { margin-top:8px; display:flex; flex-wrap:wrap; gap:8px; }
.link-sucesso.link-sucesso { color:var(--success); font-size:11.5px; font-weight:700; }
.link-sucesso-firme.link-sucesso-firme { color:var(--success); font-size:11.5px; font-weight:700; white-space:nowrap; }
.logo-previa.logo-previa { max-height:60px;display:block;margin-bottom:8px; }
.nota-abaixo.nota-abaixo { display:block; font-size:11.5px; margin-top:4px; }
.pilha-4-solta.pilha-4-solta { display:flex; flex-direction:column; gap:4px; margin:6px 0; }
.pilha-6.pilha-6 { display:flex; flex-direction:column; gap:6px; margin:0; }
.pilha-6-solta.pilha-6-solta { display:flex; flex-direction:column; gap:6px; margin:6px 0 8px; }
.pilha-8-abaixo-12.pilha-8-abaixo-12 { flex-direction:column; gap:8px; margin-top:12px; }
.quebra-ajustado.quebra-ajustado { flex-basis:100%; width:fit-content; margin-top:4px; }
.quebra-ajustado-10.quebra-ajustado-10 { flex-basis:100%; width:fit-content; margin-top:4px; display:flex; gap:10px; }
.selo-20.selo-20 { width:20px; height:20px; font-size:10px; }
.selo-22.selo-22 { width:22px; height:22px; font-size:10px; }
.selo-no-fluxo.selo-no-fluxo { position:static; display:inline-flex; margin-bottom:8px; }
/* === fim das classes da rodada 83A === */

/* === RODADA 83B -- cor e largura vindas de dado (escritas por JS) === */
/* O `style=` destes elementos INTERPOLAVA dado do usuario -- cor de tag, de
 * rotulo, de categoria; largura de barra. Classe sozinha nao resolve: o valor
 * so' existe em tempo de requisicao.
 *
 * O dado agora viaja em `data-cor` / `data-largura` (atributo comum, sem
 * estilo nenhum) e quem escreve o estilo e' `window.bwPintar`, em acoes.js,
 * via CSSOM -- que o `style-src` da CSP nao governa. Ver o cabecalho do
 * pintor la' para o motivo do observador de mutacao.
 *
 * O `22` no fim da cor de fundo e' o alfa hexadecimal que estava escrito no
 * `style=` (#rrggbb + 22). Ele e' remontado em JS, digito por digito, e nao
 * calculado com `color-mix`: a regua desta trilha compara estilo calculado e
 * reprova "parecido".
 *
 * O fallback dentro de cada `var()` e' a cor neutra do projeto (a mesma que
 * `_cor_categoria` devolve sem categoria). Ele so' aparece se o pintor nao
 * tiver rodado -- e ai' o selo fica cinza legivel em vez de invisivel.
 *
 * Seletor DOBRADO pelo mesmo motivo medido na 83A: estas classes substituem
 * `style=`, e inline vence classe simples. Ver o bloco da 83A acima. */
.selo-cor.selo-cor {
    background: var(--bw-cor-fundo, #94a3b822);
    border-color: var(--bw-cor, #94a3b8);
    color: var(--bw-cor, #94a3b8);
}
.selo-cor-fraco.selo-cor-fraco {
    background: var(--bw-cor-fundo, #94a3b822);
    color: var(--bw-cor, #94a3b8);
}
.selo-cor-cheio.selo-cor-cheio {
    background: var(--bw-cor, #94a3b8);
    color: #fff;
}
/* O unico caso com tamanho proprio (um chip de rotulo no cartao do kanban).
 * Nao entra como `.u-font-size-10-5px` de proposito: o prefixo `u-` pertence
 * ao bloco GERADO por converter_estilo_83a.py, e uma classe escrita a mao
 * naquele namespace seria uma segunda fonte para o gerador sobrescrever. */
.selo-cor-menor.selo-cor-menor { font-size: 10.5px; }

/* O botao que ALTERNA um rotulo no detalhe do chamado: a mesma cor pinta a
 * borda sempre, e o fundo muda conforme o rotulo esteja aplicado ou nao.
 * Tres classes no seletor do estado ativo para vencer o dobrado acima sem
 * depender da ordem do arquivo. */
.botao-rotulo.botao-rotulo {
    cursor: pointer;
    border: 1px solid var(--bw-cor, #94a3b8);
    background: var(--bw-cor-fundo, #94a3b822);
    color: var(--bw-cor, #94a3b8);
}
.botao-rotulo.botao-rotulo.botao-rotulo-ativo {
    background: var(--bw-cor, #94a3b8);
    color: #fff;
}

/* Os dois estados que a legenda de prioridade e a lista de membros de equipe
 * marcavam com `style=` CONDICIONAL -- `{{ '...' if X else '' }}`. Nao eram
 * dado: eram DUAS declaracoes fixas escolhidas por um `if`, a mesma forma que
 * a 83A achou nas seis abas. Viraram classe condicional, sem JS nenhum. */
.filtro-prioridade-ativo.filtro-prioridade-ativo {
    color: var(--text-primary);
    background: var(--bg-panel-raised);
}
.chip-toggle-coluna-ativo.chip-toggle-coluna-ativo {
    background: var(--accent-solido);
    color: #fff;
    border-color: var(--accent-solido);
}
/* === fim das classes da rodada 83B === */

/* === RODADA 89 -- modulo 42, Conversas ===================================
   Bloco escrito A MAO, e nao pelo converter_estilo_83a.py: aquela ferramenta
   converte `style=` que ja' existia em template: ela nao inventa layout.
   Aqui nao havia `style=` nenhum para converter -- a tela nasceu sem, que e'
   a regra desde a 83C.

   Nomes fora do namespace `u-` de proposito: aquele prefixo pertence ao
   bloco gerado, e a ferramenta o le' de volta a cada execucao. Classe
   escrita a mao com prefixo dela viraria candidata a ser reescrita.

   === RODADA 91 -- O QUADRO, E POR QUE O BALAO NAO E' NOVO ================
   A 89 entregou a tela funcionando e feia: texto solto na pagina, sem
   moldura, mensagens em linhas planas. Agora a coluna da direita e' um
   PAINEL de tres partes -- cabecalho, fio rolando, barra de escrever presa
   embaixo -- que e' a gramatica de qualquer chat que a pessoa ja' usa.

   O balao NAO nasceu aqui: e' o `.chat-linha` / `.chat-bolha` / `.chat-meta`
   do chat do chamado (43D), algumas centenas de linhas acima neste arquivo.
   Reusar significa que mexer na aparencia de mensagem num lugar muda nos
   dois, e que ninguem precisa aprender duas gramaticas para a mesma coisa.

   O que este bloco NAO reusa, de proposito, e' `.chat-mensagens` -- o
   container. Ele carrega as regras de altura DAQUELA tela, com
   `min-height: 0 !important` e teto em 40vh, escritas para um chat que
   "nasce pequeno e cresce". Herda-las aqui poria a geometria deste painel
   sob o comando de um ajuste feito noutro lugar, e um `!important` alheio
   nao se discute: ganha. Balao e' aparencia compartilhada; altura de caixa
   e' decisao de cada tela. */
.conversas-tela {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 16px;
    align-items: start;
}
@media (max-width: 900px) {
    .conversas-tela { grid-template-columns: 1fr; }
}
/* ---- A COLUNA DA ESQUERDA (rodada 92) ----
   A 89 tinha aqui um <select> "Falar com..." e um botao "Abrir": dois cliques
   e uma leitura para comecar a falar com alguem, na tela em que comecar a
   falar com alguem e' a acao principal. Agora e' barra lateral de tres secoes
   -- Conversas, Salas, Pessoas -- com a pessoa e o status a um clique.

   Repare que TODO filho declara a propria largura e zera a propria margem.
   Nao e' zelo: e' a licao que a 91 pagou. O estilo base deste projeto da'
   `width: 100%` e `margin-top: 20px` a todo `button`, e a linha de pessoa sem
   conversa E' um button (um POST cria a conversa; um link GET criaria recurso
   por navegacao, o que o CSRF recusa e o prefetch do navegador dispara). */
.conversas-lista {
    border-right: 1px solid var(--borda);
    padding-right: 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 78vh;
    overflow-y: auto;
}
.conversas-busca {
    width: 100%;
    margin: 0 0 8px;
    padding: 9px 12px;
    border-radius: 20px;
    font-size: 12.5px;
}
.conversas-secao {
    margin: 12px 0 4px;
    font-size: 10.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.conversas-secao:first-of-type { margin-top: 4px; }
.conversas-secao-vazia,
.conversas-sem-resultado { margin: 2px 0 4px; padding: 0 4px; font-size: 11.5px; }
.conversa-nova-sala { margin: 0 0 4px; }
.conversa-nova-sala > summary { font-size: 11.5px; padding: 2px 4px; }

/* A linha. Vale para o <a> e para o <button>, que precisam ser
   indistinguiveis na tela -- quem clica nao sabe (nem deve saber) que uma
   navega e a outra cria. */
.conversas-lista .conversa-item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    margin: 0;
    padding: 8px 9px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: none;
    color: inherit;
    font-family: inherit;
    font-size: 13px;
    font-weight: 400;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.conversas-lista .conversa-item:hover {
    background: var(--fundo-hover, rgba(127,127,127,.12));
    opacity: 1;
}
.conversas-lista .conversa-item.conversa-aberta {
    background: var(--accent-soft);
    border-color: var(--accent);
}
.conversa-item-form { margin: 0; }

/* O circulo com a inicial. A bolinha de status e' um ::after posicionado no
   canto -- mesma leitura do indicador que o chat do chamado ja' usa, so' que
   ancorado na inicial em vez de solto ao lado do nome. */
.conversa-inicial {
    flex: 0 0 auto;
    position: relative;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bg-panel-raised);
    border: 1px solid var(--borda);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}
.conversa-inicial-sala { color: var(--accent-cyan); font-size: 15px; }
.conversa-inicial[data-presenca]::after {
    content: "";
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--bg-panel);
    background: var(--text-secondary);
}
.conversa-inicial[data-presenca="online"]::after {
    background: var(--success);
    box-shadow: 0 0 6px var(--success);
}
.conversa-inicial[data-presenca="ausente"]::after { background: var(--warning); }
.conversa-inicial[data-presenca="ocupado"]::after { background: var(--danger); }

.conversa-item-texto {
    /* `min-width: 0` e' o que permite o texto encolher e virar reticencias.
       Sem ele um nome longo empurra a hora para fora da coluna: filho de flex
       nao encolhe abaixo do conteudo por padrao. */
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.conversa-item-nome,
.conversa-item-previa {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.conversa-item-nome { font-weight: 600; }
.conversa-item-previa { font-size: 11.5px; color: var(--text-secondary); }
.conversa-item-lado {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
}
.conversa-item-hora { font-size: 10.5px; color: var(--text-secondary); }

/* O separador de dia do fio -- a linha atravessa, o rotulo fica no meio. */
.chat-dia {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 6px 0 2px;
    font-size: 10.5px;
    color: var(--text-secondary);
}
.chat-dia::before,
.chat-dia::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--borda);
}

/* ---- O painel (rodada 91) ---- */
.conversa-painel {
    display: flex;
    flex-direction: column;
    min-height: 420px;
    padding: 0;
    background: var(--surface);
    border: 1px solid var(--borda);
    border-radius: var(--radius);
    overflow: hidden;
}
.conversa-nenhuma { margin: auto; padding: 40px 16px; text-align: center; }
.conversa-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--borda);
    background: var(--bg-panel);
}
.conversa-cabecalho-texto { min-width: 0; }
.conversa-titulo {
    margin: 0;
    font-size: 15px;
    /* Nome de sala e' texto de gente: pode ser longo, e nao pode empurrar o
       cabecalho para fora do painel. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.conversa-membros {
    font-size: 11.5px;
    color: var(--text-secondary);
    margin: 3px 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.conversa-gerenciar { margin: 10px 16px 0; }
/* O estado da outra pessoa no cabecalho -- bolinha antes do texto, o mesmo
   par (cor + palavra) que a lista usa. So' a cor seria enigma para quem nao
   decorou a legenda; so' a palavra some no meio da linha de membros. */
.conversa-presenca { display: inline-flex; align-items: center; gap: 5px; }
.conversa-presenca::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--text-secondary);
}
.conversa-presenca[data-presenca="online"]::before {
    background: var(--success);
    box-shadow: 0 0 6px var(--success);
}
.conversa-presenca[data-presenca="ausente"]::before { background: var(--warning); }
.conversa-presenca[data-presenca="ocupado"]::before { background: var(--danger); }

/* ---- O fio ---- */
.conversa-fio {
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* `flex: 1` faz o fio comer a altura que sobra do painel, entao o
       cabecalho fica no topo e a barra de escrever no rodape, sempre --
       mesmo com uma mensagem so'. Sem isto os tres blocos se amontoam em
       cima e o painel fica com um vazio embaixo. */
    flex: 1;
    min-height: 220px;
    max-height: 55vh;
    overflow-y: auto;
    padding: 14px 16px;
}
.conversa-fio-vazio { margin: auto; text-align: center; }
/* RODADA 92 -- conversa curta encosta EMBAIXO, como em todo chat: a mensagem
   mais recente fica perto de onde se escreve, e nao no alto de um painel
   vazio. `margin-top: auto` no primeiro balao e nao `justify-content:
   flex-end` no fio: com o segundo, um historico maior que a caixa deixa o
   topo inalcancavel pela rolagem em parte dos navegadores. */
.conversa-fio > :first-child { margin-top: auto; }
/* O nome de quem falou, acima do balao -- so' em sala. */
.chat-autor-bolha {
    font-size: 11px;
    font-weight: 600;
    color: var(--accent-cyan);
    padding: 0 4px 2px;
}
.chat-bolha-apagada { font-style: italic; color: var(--text-terciario); }
.chat-anexo-link { display: inline-block; margin-top: 4px; word-break: break-all; }
/* "apagar" so' aparece quando o ponteiro esta' na linha: a acao precisa
   existir, mas nao precisa competir com o texto o tempo todo. O foco por
   teclado tambem revela -- senao a acao existiria so' para quem usa mouse. */
.chat-apagar { opacity: 0; margin-left: 6px; transition: opacity .12s ease; }
.chat-linha:hover .chat-apagar,
.chat-apagar:focus { opacity: 1; }

/* ---- A barra de escrever ----
   POR QUE O CAMPO COLAPSAVA (o defeito que abriu esta rodada):
   o estilo base deste projeto da' `width: 100%` a TODO `input` e a TODO
   `button` (e ao botao, `margin-top: 20px` junto). Dentro de um flex isso
   vira `flex-basis: auto` = a linha inteira -- e havia tres filhos, cada um
   pedindo a largura toda, ao lado de um textarea com `flex: 1`, que e' base
   ZERO. Soma das bases acima do container => espaco livre NEGATIVO; e com
   espaco negativo quem age nao e' o `flex-grow`, e' o `flex-shrink`,
   proporcional a base. Base zero nao cresce NEM encolhe: o campo estacionou
   na largura minima do conteudo, um risco de poucos pixels.

   O padrao certo ja' existia desde a 43D no `.chat-form`: quem entra num
   flex DESTE projeto declara a propria largura, porque a herdada e' 100%. */
.conversa-envio {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 12px 16px;
    border-top: 1px solid var(--borda);
    background: var(--bg-panel);
}
.conversa-envio textarea {
    flex: 1;
    width: auto;
    min-width: 0;
    min-height: 42px;
    max-height: 140px;
    padding: 11px 14px;
    border-radius: 22px;
    font-family: inherit;
    font-size: 13px;
    resize: none;
}
/* O input de arquivo cru mostra "Choose File / No file chosen" -- em ingles
   do navegador, com largura propria enorme e sem estilo possivel. Ele sai da
   linha e quem aparece e' o rotulo. `position: absolute` + `opacity: 0` e
   nao `display: none`: o campo escondido daquele jeito sai da ordem de
   tabulacao, e o anexo deixaria de existir para quem navega por teclado. */
/* O seletor e' longo de proposito. A regra generica `input[type="file"]`
   deste arquivo usa `!important` no padding, e com `box-sizing: border-box`
   padding vira PISO de largura: o campo "escondido" media 16px e continuava
   ocupando lugar na linha. Contra `!important` so' vale `!important` -- e
   entre dois `!important` decide a especificidade, onde `input[type=...]`
   (uma classe + um tipo) ganhava de uma classe sozinha. Dai' os dois nomes.
   Quem mediu isso foi o clique 91; ler o CSS nao mostra quem venceu. */
.conversa-envio .conversa-anexo-campo {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0 !important;
    margin: -1px;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    opacity: 0;
    pointer-events: none;
}
.conversa-anexo-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 170px;
    margin: 0;
    padding: 10px 13px;
    background: var(--bg-panel-raised);
    border: 1px solid var(--borda);
    border-radius: 22px;
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
}
.conversa-anexo-btn:hover { border-color: var(--accent); color: var(--accent-cyan); }
.conversa-anexo-campo:focus + .conversa-anexo-btn,
.conversa-anexo-btn:focus-within { border-color: var(--accent-cyan); }
.conversa-anexo-nome {
    font-size: 11px;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.conversa-anexo-btn.tem-arquivo { border-color: var(--accent); color: var(--text-primary); }
.conversa-enviar-btn {
    flex: 0 0 auto;
    width: auto;
    margin: 0;
    padding: 11px 22px;
    border-radius: 22px;
}
/* Telas estreitas: a linha unica vira coluna. Sem isto anexo e botao
   espremem o campo de novo -- agora por falta de espaco real, nao por
   heranca de largura. */
@media (max-width: 700px) {
    .conversa-envio { flex-wrap: wrap; }
    .conversa-envio textarea { flex: 1 1 100%; }
    .conversa-anexo-btn { flex: 1 1 auto; max-width: none; justify-content: center; }
    .conversa-enviar-btn { flex: 1 1 auto; }
}
/* === fim das classes da rodada 89, revistas na 91 === */

/* === RODADA 93 -- minha conta, e o aviso de mensagem nova ==================
   O aviso vive no `base.html` e aparece em QUALQUER tela: e' o ponto do
   pedido -- ser avisado justamente quando nao se esta' no modulo. Por isso
   ele e' `position: fixed` e nao mora dentro de nenhum container de tela. */
.avisos-conversas {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* Sem `pointer-events: none` aqui o container vazio cobriria o canto da
       tela e engoliria cliques que nao sao dele. Os cartoes reativam. */
    pointer-events: none;
    max-width: min(360px, calc(100vw - 36px));
}
.aviso-conversa {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 11px 12px;
    background: var(--bg-panel);
    border: 1px solid var(--accent);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
    animation: aviso-conversa-entra .18s ease-out;
}
@keyframes aviso-conversa-entra {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* Quem prefere menos movimento na tela nao ganha o deslize. */
@media (prefers-reduced-motion: reduce) {
    .aviso-conversa { animation: none; }
}
.aviso-conversa-corpo {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    flex: 1;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}
.aviso-conversa-avatar {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 50%;
    background: var(--bg-panel-raised);
    border: 1px solid var(--borda);
    font-size: 13px;
    font-weight: 600;
}
.aviso-conversa-avatar img { width: 100%; height: 100%; object-fit: cover; }
.aviso-conversa-texto { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.aviso-conversa-texto strong { font-size: 12.5px; }
.aviso-conversa-previa {
    font-size: 11.5px;
    color: var(--text-secondary);
    /* Duas linhas e reticencias: o cartao e' chamada, nao a mensagem. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.aviso-conversa-fechar {
    flex: 0 0 auto;
    width: auto;
    margin: 0;
    padding: 2px 6px;
    background: none;
    border: 0;
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
}
.aviso-conversa-fechar:hover { color: var(--text-primary); opacity: 1; }

/* ---- A tela da propria conta ---- */
.link-minha-conta { display: inline-flex; text-decoration: none; }
/* Os links da barra nao quebram em duas linhas: 'Minha conta' virava duas. */
.user-info .link-trocar-senha,
.user-info > a { white-space: nowrap; }
.conta-tela {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 18px;
    align-items: start;
}
@media (max-width: 900px) {
    .conta-tela { grid-template-columns: 1fr; }
}
.conta-form,
.conta-lado {
    padding: 16px 18px;
    background: var(--surface);
    border: 1px solid var(--borda);
    border-radius: var(--radius);
}
.conta-foto-bloco { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.conta-foto {
    flex: 0 0 auto;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--borda);
}
.conta-foto-iniciais {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-panel-raised);
    font-size: 30px;
    font-weight: 600;
}
.conta-foto-acoes {
    display: flex;
    flex-direction: column;
    /* `flex-start` e nao o `stretch` padrao: sem ele o rotulo do arquivo
       estica ate' a borda do cartao e vira uma faixa, em vez de botao. */
    align-items: flex-start;
    gap: 7px;
    min-width: 0;
}
/* Escondido, mas NAO com display:none -- isso o tiraria da ordem de tabulacao
   e a foto deixaria de existir para quem navega por teclado (licao da 91). */
.conta-form .conta-foto-campo {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0 !important;
    margin: -1px;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    opacity: 0;
    pointer-events: none;
}
.conta-foto-btn {
    display: inline-flex;
    align-items: center;
    width: auto;
    max-width: 100%;
    margin: 0;
    padding: 8px 14px;
    background: var(--bg-panel-raised);
    border: 1px solid var(--borda);
    border-radius: 20px;
    color: var(--text-primary);
    font-size: 12.5px;
    cursor: pointer;
}
.conta-foto-btn:hover { border-color: var(--accent); }
.conta-foto-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conta-remover-foto { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.conta-remover-foto input { width: auto; margin: 0; }
.conta-foto-dica,
.conta-nota { margin: 2px 0 0; font-size: 11.5px; line-height: 1.5; }
.conta-rotulo { display: block; font-size: 12.5px; }
.conta-rotulo input { margin-top: 5px; }
.conta-salvar { width: auto; margin-top: 16px; padding: 10px 24px; }
.conta-linha { margin: 10px 0 0; font-size: 13px; }
.conta-linha .detalhe-meta { display: block; font-size: 11px; }
/* === fim das classes da rodada 93 === */

/* ===========================================================================
   RODADA 99 -- A PELE DA ACAO PRINCIPAL, NUMA FONTE SO'
   ===========================================================================
   A DECISAO NAO MUDA. O botao de acao principal -- "Salvar", "Criar",
   "Aplicar" -- e' SOLIDO, nao vidro. Foi escolhido assim de proposito: um
   botao pode cair em cima da sinapse animada, e ali o vidro fica quase preto
   (foi o problema do botao "Atualizar"). Esta rodada nao reabre isso.

   O QUE MUDA E' ONDE A PELE MORA
   ------------------------------
   Ela estava escrita QUATORZE vezes, uma por classe de formulario --
   `.form-novo-usuario button`, `.form-departamento-novo button`,
   `.form-renomear-grupo button`... Lista copiada a mao envelhece em silencio,
   e esta envelheceu de quatro jeitos, todos MEDIDOS no navegador, nos quatro
   temas:

     1. NOVE botoes nunca entraram na lista -- "Salvar" (Dados cadastrais),
        "Salvar" (Minha conta), "Filtrar" (Relatorios), "Criar recorrencia",
        os dois "Aplicar horario" e os dois "Carregar feriados". Caiam na
        regra generica de `button` e saiam num azul DIFERENTE (#24499e): a
        mesma acao, dois azuis.

     2. A BORDA estava cravada como `rgba(148, 190, 255, .4)` nas quatorze,
        enquanto `--vidro-ativo-borda` existia, definida nos QUATRO temas, com
        ZERO uso no arquivo inteiro. Medido: no Repouso, 24 botoes ficavam com
        o fundo do tema e a borda do tema ESCURO; no Papel Branco, 5 ficavam.

     3. `.linha-salvar-final button` cravava `--cor-btn: #0f2354`, o valor do
        tema escuro escrito a mao: "Salvar alteracoes" nao seguia tema nenhum.

     4. No Minimalista (e no Papel Branco, que o carrega junto),
        `body.tema-minimalista button` achata TODO botao com `!important`, e o
        recorte que devolve destaque a acao primaria citava DUAS classes
        (`.btn-nova-inline`, `.btn-solido-azul`). As outras 32 acoes ficavam
        indistinguiveis de um botao comum -- nesses dois temas nao dava para
        ver qual e' o botao principal da tela.

   COMO ESTA' AGORA: QUATRO VARIAVEIS
   ----------------------------------
   A pele e' `--acao-bg`, `--acao-borda`, `--acao-texto` e `--acao-brilho`.
   Cada tema diz os valores DELE, ao lado das outras variaveis do tema; a
   regra abaixo so' le'. Nenhuma cor escrita a mao, e trocar a aparencia da
   acao principal num tema e' mexer em quatro linhas, num lugar.

   POR QUE OS SELETORES APARECEM DOBRADOS (`.btn-acao.btn-acao`)
   ------------------------------------------------------------
   Porque `body.tema-minimalista button` e' `!important` e tem peso 0-1-2.
   Entre duas declaracoes `!important`, quem decide e' a especificidade --
   uma classe sozinha (0-1-0) PERDE. Dobrar a classe leva a 0-2-0 sem inventar
   um ancestral que nao existe. Mesmo truque que `.oculto` usa desde a 83A, e
   pelo mesmo motivo.

   Os quatro seletores de formulario (`.form-departamento-novo button` e
   companhia) foram dobrados pela MESMA conta: eles valem 0-1-1 -- uma classe
   e um elemento --, e 0-1-1 perde para 0-1-2. Foi a medicao que mostrou: 18
   dos 34 botoes de acao continuavam neutros no Minimalista depois da primeira
   versao desta regra. Ler a especificidade "de olho" nao funcionou aqui.

   E `:not(.btn-cancelar-form)` esta' ai' porque a medicao achou um defeito
   ANTIGO de tabela: o "Cancelar" dos formularios inline vinha pintado como
   acao principal. A classe existe desde a rodada dos formularios justamente
   para ele ser secundario e "nao competir com o Salvar", mas ela vale 0-1-0 e
   perdia para a regra do formulario em volta. Cancelar nao e' acao principal.

   O TAMANHO NAO ENTRA AQUI, e isso e' decisao. Botao de linha de tabela e'
   menor que o CTA da tela: altura, padding, raio e fonte continuam com quem
   conhece o contexto. O que precisa ser igual e' a PELE.

   A LISTA DE SELETORES e' a cauda legada: os quatorze lugares que ja'
   pintavam certo e seguem funcionando sem tocar em template. Codigo NOVO nao
   entra nela -- usa `class="btn-acao"`. A lista so' encolhe. E ela nao e' a
   garantia: a garantia e' o clique99, que mede a assinatura de cada botao nos
   quatro temas e reprova acao principal fora do padrao.
   =========================================================================== */
/* RODADA 100 -- MUDOU DE `:root` PARA `body`, e a copia do Repouso saiu.
   A 99 declarou estas quatro em `:root` e, quando a medicao mostrou os 33
   botoes do Repouso saindo azul-marinho, consertou REPETINDO o bloco dentro
   de `body.tema-repouso`. Funcionava, e era uma copia -- a mesma coisa que a
   rodada existia para tirar do arquivo. O tema e' uma classe no `<body>`:
   declarando aqui, `var(--vidro-ativo-bg)` resolve com o valor daquele body,
   que ja' e' o do tema, e o Repouso nao precisa repetir nada. Medido antes de
   escrever -- ver o bloco `body` la' em cima, perto da rodada 91. */
body {
    --acao-bg: var(--vidro-ativo-bg);
    --acao-borda: var(--vidro-ativo-borda);
    --acao-texto: var(--vidro-ativo-texto);
    --acao-brilho: var(--vidro-ativo-brilho);
}
/* Minimalista (e Papel Branco, que carrega a classe junto): o tema ja' tinha
   decidido que acao primaria e' azul CHAPADO, sem brilho -- o que faltava era
   a lista de quem e' acao primaria. Os valores sao os mesmos que estavam no
   recorte de duas classes, agora servindo as 34. */
body.tema-minimalista {
    /* RODADA 100 -- o fundo da acao DESCOLOU do --accent, e e' de proposito.
       As duas coisas sao papeis diferentes da mesma cor: --accent e' texto
       de link sobre fundo escuro (precisa CLAREAR para passar em 4,5:1) e
       --acao-bg e' fundo com texto branco em cima (precisa ESCURECER pelo
       mesmo motivo). Enquanto foram a mesma variavel, melhorar um piorava o
       outro: medido, o botao de acao dava 3,68:1 com o branco. */
    --acao-bg: #3473d9;    /* 4,56:1 com o #ffffff de --acao-texto */
    --acao-borda: #3574db;
    --acao-texto: #ffffff;
    --acao-brilho: none;
}
/* O Repouso nao declara nada aqui: ele usa a paleta ativa dele, e as quatro
   linhas do bloco `body` acima ja' resolvem com o `--vidro-ativo-*` daquele
   tema. Ate' a rodada 99 este bloco existia repetido -- ver o comentario
   acima do `body`. */

.btn-acao.btn-acao,
.btn-solido-azul.btn-solido-azul,
.btn-acao-linha-chamado.btn-acao-linha-chamado,
.cta-novo-chamado-grande.cta-novo-chamado-grande,
.linha-salvar-final.linha-salvar-final button:not(.btn-cancelar-form),
.form-editar-atividade.form-editar-atividade button[type="submit"],
.form-licenca.form-licenca button[type="submit"],
.form-novo-usuario.form-novo-usuario button[type="submit"],
.form-departamento-novo.form-departamento-novo button:not(.btn-cancelar-form),
.form-editar-departamento.form-editar-departamento button:not(.btn-cancelar-form),
.form-novo-grupo.form-novo-grupo button:not(.btn-cancelar-form),
.form-renomear-grupo.form-renomear-grupo button:not(.btn-cancelar-form) {
    background: var(--acao-bg) !important;
    border: 1px solid var(--acao-borda) !important;
    box-shadow: var(--acao-brilho) !important;
    color: var(--acao-texto) !important;
    cursor: pointer;
}
.btn-acao.btn-acao:hover,
.btn-solido-azul.btn-solido-azul:hover,
.btn-acao-linha-chamado.btn-acao-linha-chamado:hover,
.cta-novo-chamado-grande.cta-novo-chamado-grande:hover,
.linha-salvar-final.linha-salvar-final button:not(.btn-cancelar-form):hover,
.form-editar-atividade.form-editar-atividade button[type="submit"]:hover,
.form-licenca.form-licenca button[type="submit"]:hover,
.form-novo-usuario.form-novo-usuario button[type="submit"]:hover,
.form-departamento-novo.form-departamento-novo button:not(.btn-cancelar-form):hover,
.form-editar-departamento.form-editar-departamento button:not(.btn-cancelar-form):hover,
.form-novo-grupo.form-novo-grupo button:not(.btn-cancelar-form):hover,
.form-renomear-grupo.form-renomear-grupo button:not(.btn-cancelar-form):hover {
    filter: brightness(1.18) !important;
}

/* NAO ha' bloco de geometria para `.btn-acao`, e isso e' decisao, nao
   esquecimento. Dos nove orfaos, uns sao `<button>` pelado (herdam a
   geometria da regra generica) e outros ja' carregam `.btn-primario` ou
   `.btn-compacto`, que dizem o tamanho daquele lugar. Se `.btn-acao`
   trouxesse padding e raio proprios, viria no fim do arquivo e venceria os
   dois -- o "Carregar feriados nacionais", que e' compacto de proposito,
   cresceria. Pele e tamanho sao perguntas diferentes; a classe responde
   uma so'.

   RODADA 155 -- O `<a class="btn-acao">` ERA A EXCECAO QUE NINGUEM VIU.
   O raciocinio acima vale para `<button>`: ele JA' tem geometria, vinda da
   regra generica de `button` (padding 10px, raio 10px, peso 600, fonte de
   titulo). A ancora nao tem nenhuma. Medido no navegador: `button.btn-acao`
   sai com 38px de altura, padding 10px e raio 10px; `a.btn-acao` sai com
   22px, padding ZERO e raio ZERO -- um retangulo azul de canto vivo com
   texto de paragrafo, do lado de um `.btn-vidro` que parece botao.

   Isso nao e' defeito da 155: `<a class="btn-acao">` ja' estava em
   `inventario.html` ("+ Novo equipamento"), `base_conhecimento.html`
   ("+ Novo artigo") e `area_home.html` ("Ver todos os boletos"), com a
   mesma aparencia, ha' rodadas. A sonda de clique desta rodada e' que
   olhou.

   O conserto NAO contradiz a decisao acima -- ele e' escopado em `a`, e
   nenhum `<button>` casa com este seletor. O "Carregar feriados nacionais"
   continua compacto. A geometria e' a do `.btn-vidro`, que e' o outro botao
   que vive em ancora nesta casa: ao lado um do outro, os dois tem de ser do
   mesmo tamanho. */
a.btn-acao {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: auto;
    padding: 8px 16px;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
}

/* ===========================================================================
   RODADA 101 -- O FORMULARIO DA UNIDADE (filial)
   ===========================================================================
   Dez campos num formulario que vive DENTRO de um <details> na aba Estrutura.
   Em linha unica eles ficariam ilegiveis; um por linha faria o painel rolar
   por meia tela. Tres por fileira, quebrando sozinho quando nao cabe.

   `.form-unidade input` declara a propria largura porque a regra base do
   `input` da' `width: 100%` (a metade da causa que a rodada 98 deixou de pe',
   de proposito) -- e num container flex isso brigaria com o `flex`. Mesma
   licao da barra de escrever do Conversas, na rodada 91: todo filho de flex
   declara a propria largura, senao a herdada compete.
   =========================================================================== */
.form-unidade { margin: 8px 0 14px; max-width: 720px; }
.linha-campos-unidade {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}
/* RODADA 160 -- O `>` AQUI E' O CONSERTO, E ELE VALIA 180 PIXELS DE ALTURA.
   A regra nasceu para uma linha de campos SOLTOS (ver
   `_form_unidade_campos.html`): ali o input e' filho direto de um flex em
   LINHA, e `flex-basis: 180px` e' largura. Na Conferencia o input mora dentro
   de um `.campo-com-rotulo`, que e' um flex em COLUNA -- e numa coluna o
   `flex-basis` e' ALTURA. Resultado medido na janela dele: a caixa de busca
   com 767x180px, um retangulo vazio do tamanho de um paragrafo, e a linha
   inteira com 209px de altura esticando "Filtrar" e "Limpar todos os
   filtros" em dois blocos verticais.
   Era o que ele chamou de "parte grafica que ficou ruim". Com o `>`, a regra
   volta a valer so' onde foi escrita para valer; a tela antiga nao muda uma
   linha (os tres campos dela sao filhos diretos), e os campos com rotulo
   passam a se dimensionar pelo proprio bloco. */
.linha-campos-unidade { align-items: flex-end; }
.linha-campos-unidade > input {
    flex: 1 1 180px;
    width: auto;
    min-width: 0;
    margin: 0;
}
.linha-campos-unidade > .campo-com-rotulo { flex: 1 1 200px; min-width: 0; }
.linha-campos-unidade > .campo-com-rotulo input { width: 100%; margin: 0; }
/* E OS DOIS BOTOES DA LINHA COM A MESMA ALTURA. `button.btn-acao` sai com
   38px (padding 10px, da regra generica de `button`) e `a.btn-vidro` com 33px
   (padding 8px, da propria classe) -- medido lado a lado na Conferencia, o
   "Filtrar" ficava cinco pixels mais alto que o "Limpar todos os filtros".
   E' a licao 155 pelo outro lado: la' a ancora nao tinha geometria nenhuma,
   aqui ela tem a dela e o botao tem a do navegador. O piso iguala os dois
   sem mexer na regra generica, que vale para a casa inteira. */
.linha-campos-unidade > .btn-acao,
.linha-campos-unidade > .btn-vidro { min-height: 38px; }
/* O nome ocupa a linha inteira: e' o unico obrigatorio, e e' por ele que a
   unidade e' reconhecida em toda tela de escolha. */
.form-unidade > input[name="nome"] { width: 100%; margin: 0; }

/* ===========================================================================
   RODADA 113 -- A PILULA DE EQUIPE, E A TABELA QUE NAO CORTA O CAMPO
   ---------------------------------------------------------------------------
   O PEDIDO: "ajuste o layout esta' feio... a organizacao das pilulas esta'
   feia assim, melhore o visual dessa tabela".

   O QUE ESTAVA ERRADO, E NAO ERA ESTILO SOLTO
   --------------------------------------------
   A rodada 112 pos a caixa de selecao dentro de `.chip-departamento-tile`.
   Aquela classe foi feita na 59B para um CHIP -- um nome so', sem nada
   dentro. Ela nao declara `display`, entao o <label> ficou `inline`: a caixa
   e o nome nao se alinham, o `padding` arredondado envolve os dois em
   alturas diferentes, e o nome da empresa (um <span> solto no MESMO
   flex-wrap) embaralhava no meio das pilulas em vez de titular o grupo.

   Ou seja: nao era "faltou um ajuste" -- era um componente sendo usado para
   uma coisa que ele nunca declarou saber fazer.

   O COMPONENTE NOVO tem as tres partes separadas: o GRUPO (uma empresa), o
   ROTULO do grupo e a PILULA. O rotulo e' bloco -- ele TITULA, e titulo que
   participa do mesmo flex das pilulas vira mais uma pilula sem borda.

   `:has(input:checked)` pinta a marcada. Sem suporte a `:has`, a pilula fica
   sem preenchimento e a CAIXA continua marcada e visivel -- degrada para o
   que existia antes, e nao para "nao da' para saber o que esta' marcado".

   `--accent-solido` com texto branco: e' o unico par de fundo+texto que a
   suite 100 ja' mede nos quatro temas (bloco 3). Inventar uma cor aqui
   exigiria medir de novo, e a medicao e' o caro.

   A TABELA: `table-layout: fixed` + <colgroup>, e todo campo a 100% da
   celula com `box-sizing: border-box` e `min-width: 0`. E' o MESMO conserto
   da tabela de RH na rodada 54 -- sem `fixed`, o navegador reparte a largura
   pelo conteudo, e a coluna das pilulas (a mais larga) espremia "AR
   CONDICIONADO" ate' virar "AR CONDICION/".
   =========================================================================== */
.tabela-categorias { table-layout: fixed; width: 100%; }

/* `width: 100%` vem da regra base do `input`; o que falta e' o box-sizing --
   sem ele o padding soma POR FORA dos 100% e o campo estoura a celula. */
.tabela-categorias input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
    margin: 0;
}
/* Sem isto a celula estica ate' caber a maior palavra, e o <colgroup> vira
   sugestao em vez de medida. */
.tabela-categorias td { word-break: break-word; vertical-align: top; }

.grade-equipes-categoria { display: flex; flex-direction: column; gap: 10px; }

.rotulo-grupo-equipes {
    display: block;
    margin: 0 0 5px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.pilulas-equipes { display: flex; flex-wrap: wrap; gap: 6px; }

.pilula-equipe {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border: 1px solid var(--border-steel);
    border-radius: 20px;
    background: var(--bg-panel-raised);
    color: var(--text-primary);
    font-size: 11.5px;
    line-height: 1.3;
    white-space: nowrap;
    cursor: pointer;
}
/* A regra base do `input` da' `width: 100%` (a metade da causa que a 98
   deixou de pe', de proposito). Num flex isso empurraria o nome para fora. */
.pilula-equipe input[type="checkbox"] {
    width: auto;
    margin: 0;
    flex: 0 0 auto;
    cursor: pointer;
}
.pilula-equipe:hover { border-color: var(--accent-solido); }
.pilula-equipe:has(input:checked) {
    background: var(--accent-solido);
    border-color: var(--accent-solido);
    color: #fff;
}

/* A barra do Salvar unico. `position: sticky` porque a tabela e' longa: o
   botao que so' existe no fim obriga a rolar ate' o fim para salvar o que se
   mudou no comeco -- que e' a queixa "linha por linha fica ruim" chegando
   pelo outro lado. */
.barra-salvar-categorias {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding: 10px 12px;
    background: var(--bg-panel-raised);
    border: 1px solid var(--border-steel);
    border-radius: 10px;
}

/* ===========================================================================
   RODADA 115 -- A GRADE ROLA DENTRO DELA MESMA
   ===========================================================================
   MEDIDO a 1366px, com a cadeia inteira do <table> ate' o <body>:

       table#tabela-grade-chamados  1170px  overflow-x: visible
       div.painel-aba-chamados      1078px  overflow-x: visible
       main.conteudo                1126px  overflow-x: visible
       div.area-principal           1126px  overflow-x: visible
       div.app-shell                1366px  overflow-x: visible
       body                         1366px  ->  scrollWidth 1434px

   Ninguem tinha `overflow-x`. O transbordo da tabela atravessava quatro
   conteineres e chegava no <body>, e a PAGINA INTEIRA passava a rolar de
   lado -- 68px a 1366, 154px a 1280. Rolando, o cabecalho e o menu lateral
   andavam junto com a tabela. Era isso o "desconfigurada", e nao a tabela.

   POR QUE UMA <div> NOVA, E NAO `overflow-x` NO PROPRIO PAINEL:
   pelo CSS, `overflow-x: auto` com `overflow-y: visible` nao existe -- o
   navegador promove o eixo vertical para `auto` junto. O painel guarda a
   barra de filtros e a tabela inteira; ele ganharia uma barra de rolagem
   VERTICAL propria, e a pagina passaria a ter duas. A <div> envolve so' a
   tabela, que e' exatamente o que transborda.

   `max-width: 100%` e' o que faz o conteiner PARAR na largura do painel em
   vez de crescer com a tabela -- sem ele, a <div> acompanha o filho e o
   `overflow` nunca dispara.

   NAO ha' `overflow-y` aqui de proposito: a lista cresce para baixo e quem
   rola verticalmente e' a pagina, como sempre foi. */
.rolagem-grade {
    max-width: 100%;
    overflow-x: auto;
    /* Espaco para a barra de rolagem nao cobrir a ultima linha em navegador
       que a desenha por cima do conteudo (macOS, e o Windows com barra fina). */
    padding-bottom: 2px;
}

/* ==========================================================================
   RODADA 117 -- o menu lateral e o cabecalho param de andar com a rolagem
   ==========================================================================
   O RELATO: "o menu lateral da intranet ta' movendo com a rolagem da
   pagina.. e nao quero isso".

   O QUE A MEDICAO MOSTROU (medida_rolagem.py, /chamados a 1366x600):

       peca               position    altura overflow-y   andou
       .sidebar           static         711 visible        137
       .topbar-slim       static          77 visible        137
       .area-principal    static         711 visible        137
       .conteudo          static         634 visible        137
       .app-shell         relative       737 visible        137

   TODO MUNDO ANDOU OS MESMOS 137px -- ou seja, nao ha' nada quebrado a
   consertar. Ninguem estava TENTANDO segurar e falhando: simplesmente
   ninguem segurava. `position: static` e `overflow: visible` na cadeia
   inteira, o documento rola e leva o <aside> junto, que e' o comportamento
   padrao do HTML. E' a causa (a), e nao a (b) -- se fosse um
   `position: sticky` anulado por um ancestral com `overflow`, o conserto
   seria outro (achar o ancestral), e teriamos mexido no lugar errado.

   O CONSERTO: a JANELA passa a ser o limite, e quem rola passa a ser a
   coluna do meio. Nao ha' `position: fixed` em lugar nenhum -- fixed tiraria
   o menu do fluxo e exigiria compensar com `margin-left: 240px` em toda
   tela, e qualquer lugar que esquecesse a margem desenharia conteudo POR
   BAIXO do menu, em silencio. Prendendo pela rolagem, a largura continua
   sendo negociada pelo flex, como sempre foi.

   O DEFEITO QUE SE GANHA DE GRACA SE ISTO FOR ESCRITO SEM MEDIR: o
   conteudo do menu mede 583px com os 8 itens do banco de desenvolvimento
   (medido). Em producao ha' mais modulos licenciados, e cada item pesa
   ~45px -- com 12 itens passa de 760px, mais que a area util de um
   notebook de 768px. Menu preso e mais alto que a janela = os ultimos
   itens ficam INALCANCAVEIS, sem rolagem nenhuma que os alcance. Por isso
   o `overflow-y: auto` do `.sidebar` nao e' enfeite: e' o que impede esta
   rodada de trocar um incomodo por um bloqueio.
   ========================================================================== */
.app-shell {
    /* `height`, e nao `min-height`: com min-height o shell continua crescendo
       com o conteudo, e um shell que cresce nao tem como segurar nada. */
    height: 100vh;
    /* `dvh` acompanha a barra de endereco que aparece e some no celular; onde
       a unidade nao existe, a linha e' descartada e vale o `100vh` acima. */
    height: 100dvh;
    overflow: hidden;
}

.sidebar {
    /* O menu rola DENTRO dele mesmo quando nao couber (ver acima). `auto`, e
       nao `scroll`: na maioria das telas ele cabe, e uma barra de rolagem
       permanente num menu que nao rola e' sujeira visual. */
    overflow-y: auto;
}

.area-principal {
    /* Este e' o unico elemento que rola na tela. A barra de rolagem nasce na
       BORDA DIREITA DA JANELA -- se o `overflow` estivesse no `.conteudo`,
       que tem `max-width: 1300px`, a barra apareceria no meio da tela em
       monitor largo. */
    overflow-y: auto;
    /* Item de flex nasce com `min-height: auto`, que o proibe de encolher
       abaixo do proprio conteudo. Sem esta linha o `overflow` acima nunca
       dispara: a coluna cresce e empurra o shell em vez de rolar. E' a
       mesma armadilha do `max-width: 100%` da 115, no outro eixo. */
    min-height: 0;
}

.topbar-slim {
    /* `sticky` e nao `fixed`: o cabecalho continua sendo filho da coluna que
       rola, entao ele ja' nasce com a largura certa e acompanha o menu
       lateral sem nenhuma conta de margem. */
    position: sticky;
    top: 0;
    /* ACIMA dos 30 dos paineis suspensos do conteudo (que passariam por cima
       dele ao rolar, por virem depois no documento) e ABAIXO dos 50 do sino
       de notificacoes, que mora DENTRO dele e precisa abrir por cima de
       tudo. O modal continua em 100, fora do `.app-shell`. */
    z-index: 40;
    /* SEM fundo, o conteudo desliza por baixo e aparece atraves do
       cabecalho: ate' agora ele nao precisava de fundo porque nada passava
       por tras dele. O mesmo tom do menu lateral, para os dois lerem como
       uma moldura so'. */
    background: var(--bg-panel);
}

@media (max-width: 900px) {
    /* NO CELULAR NADA DISSO VALE, de proposito. Numa tela de 600px de altura
       um cabecalho preso mais o menu preso comem metade do que sobra para
       ler o chamado -- e o relato foi sobre notebook, nao sobre telefone.
       Aqui a pagina volta a rolar inteira, como sempre rolou. */
    .app-shell { height: auto; overflow: visible; }
    .area-principal { overflow-y: visible; }
    .topbar-slim { position: static; }
    /* O `.sidebar` fica de fora desta lista: neste tamanho ele ja' e' uma
       fila horizontal com `overflow-x: auto`, e pelo CSS nao existe rolar
       num eixo so' -- o navegador promove o vertical junto (a licao da
       115). Redeclarar aqui nao mudaria nada. */
}

/* ==========================================================================
   RODADA 118 -- a tabela de categorias: largura por construcao, e pilulas
   ==========================================================================
   As duas telas de categoria viraram um fragmento so'
   (`_categorias_tabela.html`). O que esta' aqui e' o que faz ela CABER sem
   ajuste de pixel caso a caso -- a mesma licao da tabela de RH na 54.

   `table-layout: fixed` + <colgroup>: sem isso o navegador negocia a largura
   pelo CONTEUDO, e uma categoria de nome longo ou uma empresa com dez equipes
   empurra as outras colunas ate' o campo de texto virar um risco. Com a
   largura declarada, o conteudo se acomoda DENTRO dela -- que e' o que a
   decisao "as pilulas quebram em varias linhas" pede.

   As tres colunas em PIXEL (icone, status, acoes) sao as que tem tamanho
   proprio e nao dependem do texto: um desenho de 18px, um selo de uma
   palavra e dois links. Dar % a elas faria o icone crescer em monitor largo
   sem motivo. As tres de TEXTO ficam em %, que e' o que reparte o que sobra.
   ========================================================================== */
.tabela-categorias {
    table-layout: fixed;
    width: 100%;
}
/* RODADA 119 -- a coluna Empresa, e por que ela e' % e nao pixel.
   A primeira versao desta rodada deu 160px a ela, pelo raciocinio de que %
   obrigaria a mexer nas outras tres. O `clique119.py` mediu e o raciocinio
   estava errado nos dois pontos:

     1. As colunas em px sao SOMADAS antes de repartir o resto. Com 160px a
        mais no bloco fixo, a 1152 de janela o campo de Nome caiu para 99px
        -- estreito demais para ler o nome que se esta' editando, e sem erro
        nenhum que denunciasse.
     2. Mexer nas % NAO quebra a tela do cliente, que nao tem esta coluna: o
        navegador reparte as porcentagens pela RAZAO entre elas, entao as
        tres de texto mantem a proporcao entre si com a coluna ligada ou
        desligada. A soma nao precisa dar 100 nem ser a mesma nas duas telas.

   As quatro somam 100 por legibilidade, nao por exigencia. A Empresa fica
   com a menor fatia: e' a unica que nao tem campo editavel dentro. */
.col-cat-empresa   { width: 14%; }
.celula-empresa-categoria { font-size: 12px; color: var(--text-secondary); }
.col-cat-icone     { width: 56px; }
.col-cat-nome      { width: 25%; }
.col-cat-descricao { width: 23%; }
.col-cat-equipes   { width: 38%; }
.col-cat-status    { width: 86px; }
.col-cat-acoes     { width: 104px; }

/* O campo acompanha a celula em vez de ter largura propria. `box-sizing` e
   `min-width: 0` sao os dois que a 54 provou serem necessarios: sem o
   primeiro o padding estoura os 100%, e sem o segundo o input se RECUSA a
   encolher abaixo do conteudo dele e volta a empurrar a coluna. */
.tabela-categorias input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
}

/* A coluna de equipes: as pilulas quebram para baixo, e a linha cresce em
   altura. E' a decisao do Alex -- tudo visivel de uma vez, sem rolagem
   dentro de celula (que e' facil de nao perceber) e sem "+N" (que esconde
   justamente o que esta' marcado). */
.pilulas-equipe {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.pilulas-equipe-rotulo { width: 100%; }

.pilula-equipe {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--text-secondary);
    border: 1px solid var(--border-steel);
    background: var(--bg-panel);
    padding: 3px 9px;
    border-radius: 20px;
    cursor: pointer;
    /* O nome da equipe nao quebra no meio: a pilula inteira e' que vai para
       a linha de baixo. Uma pilula partida ao meio le'-se como duas. */
    white-space: nowrap;
}
.pilula-equipe:hover { border-color: var(--accent); }

/* A CAIXA CONTINUA VISIVEL DENTRO DA PILULA, de proposito. O preenchimento
   abaixo depende de `:has()`, que navegador antigo ignora em silencio -- e
   ali a caixa marcada passa a ser o UNICO sinal de estado. Escondendo a
   caixa, esse navegador mostraria a lista inteira com a mesma cara. */
.pilula-equipe input[type="checkbox"] { margin: 0; }
.pilula-equipe:has(input:checked) {
    color: var(--text-primary);
    border-color: var(--accent);
    background: var(--accent-soft);
}

/* A paleta de icone vive fechada dentro da celula: aberta em toda linha, ela
   sozinha seria mais alta que o resto da tabela. Os radios de dentro
   pertencem ao formulario grande e sao gravados pelo Salvar unico. */
.paleta-icone-linha > summary {
    cursor: pointer;
    list-style: none;
}
.paleta-icone-linha > summary::-webkit-details-marker { display: none; }
.paleta-icone-linha > summary::marker { content: ""; }
.paleta-icone-linha[open] > .grade-icones-categoria {
    position: absolute;
    z-index: 30;
    margin-top: 4px;
    padding: 8px;
    max-width: 260px;
    background: var(--bg-panel-raised);
    border: 1px solid var(--border-steel);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}
/* `relative` para a paleta absoluta acima se prender A CELULA, e nao a
   pagina inteira. Sem isto ela abre no canto superior do documento. */
.celula-icone-categoria { position: relative; }

@media (max-width: 1100px) {
    /* Apertado demais para seis colunas de largura fixa: a tabela volta a
       negociar, e quem rola e' o conteiner da 115. Melhor rolar de lado do
       que espremer o campo de texto ate' caber uma letra. */
    .tabela-categorias { table-layout: auto; }
}

/* ===========================================================================
   RODADA 127 -- A INSIGNIA DE TEMPO DE CASA (o desenho refeito)
   ===========================================================================
   A 126 pos UM lobo com o numero do ano ao lado. Depois de tres rodadas de
   aprovacao o desenho mudou inteiro: um lobo POR ANO, em aco, empilhados em
   fileiras de quatro como barra de fitas militar; do oitavo em diante, sete
   ficam no rack e o oitavo SAI da fileira -- maior, azul, com o algarismo 8
   embaixo. Acima de oito nada muda.

   O LOBO E' UMA MASCARA, NAO UMA IMAGEM COLORIDA.
   `LOGOTIPO.png` e' branco sobre transparente; em `mask-image`, o que pinta e'
   o `background` deste elemento. Uma arte so' no sistema inteiro -- a
   alternativa seria um PNG por cor. O `-webkit-mask-*` vai junto porque o
   Chrome so' dispensou o prefixo na versao 120, e a intranet roda em maquina
   de cliente.
   ========================================================================= */
:root {
    /* O AZUL DO OITAVO. Tom "D" da escada de sete que o Alex escolheu --
       mais escuro que o realce da arte (#0abbfc) e mais claro que o corpo
       dela (#033da1). Ele da' 2,4:1 contra `--bg-panel`, que e' pouco para
       uma forma pequena; e' por isso que o brilho abaixo NAO e' enfeite. Este
       tom nao sai do tema: e' o azul da ARTE, e vale igual no claro e no
       escuro. */
    --insignia-azul: #0a55ae;
    --insignia-brilho: rgba(46, 130, 230, .85);
    /* RODADA 130 -- o marco dos 16 anos. E' o REALCE da arte de 8 anos, o
       mesmo #0abbfc medido pixel a pixel na imagem que ele mandou -- so' que
       ali ele era o brilho e aqui e' a cor cheia. Mais CLARO que o do oitavo
       de proposito: o segundo marco tem que ler como um degrau acima, e azul
       que acende diz isso; azul que adensa leria como mais apagado.

       ESTE TOM TROCA COM O TEMA, e o do oitavo nao. Medido: #0abbfc da' 7,6:1
       na barra escura e 2,1:1 no tema branco -- ele SUMIRIA no claro. O oitavo
       tem o problema espelhado (2,4:1 no escuro, 6,8:1 no claro) e por isso
       leva halo; mas halo nao salva uma forma a 2,1:1 sobre branco, porque o
       halo tambem e' claro. A saida e' a honesta: mesma familia de cor, tom
       escolhido por tema. */
    --insignia-azul-16: #0abbfc;
}
.insignia-casa {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    vertical-align: middle;
    /* `flex: none` porque ela mora dentro de blocos flex (a barra de cima, a
       celula da tabela) e sem isso o navegador a elege para encolher quando o
       nome e' longo -- a licao das rodadas 98, 91 e 125. */
    flex: none;
}
.insignia-rack {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}
.insignia-fila {
    display: flex;
    gap: 3px;
}
.insignia-lobo {
    display: block;
    width: 20px;
    height: 14px;   /* 611x419 da arte, mantendo a proporcao */
    flex: none;
    -webkit-mask-image: url("/static/img/LOGOTIPO.png");
    mask-image: url("/static/img/LOGOTIPO.png");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    /* Os anos 1 a 7 sao TODOS IGUAIS -- decisao dele. E' o comportamento das
       divisas de tempo de servico de verdade: quem conta e' a quantidade, nao
       a cor. Cor por ano transformaria a insignia num calendario. */
    background: var(--text-secondary);
}

/* ---- O OITAVO ANO, que sai da fileira ---------------------------------- */
.insignia-marco {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}
.insignia-lobo-oitavo {
    width: 34px;
    height: 23px;
    background: var(--insignia-azul);
    /* O brilho NAO e' enfeite: o tom escolhido da' 2,4:1 contra o fundo da
       barra, e sem ele a forma some justamente no tema escuro, que e' o que a
       casa usa. Com ele, o tom continua o escolhido e a forma continua
       legivel. Se um dia o tom clarear, esta linha pode cair. */
    filter: drop-shadow(0 0 5px var(--insignia-brilho));
}
.insignia-oito {
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .02em;
    color: var(--insignia-azul);
    font-variant-numeric: tabular-nums;
    /* Mesmo raciocinio do lobo: como TEXTO, 2,4:1 ficaria abaixo do piso de
       leitura, entao o algarismo ganha o mesmo halo. Ele nao carrega
       informacao que so' exista ali -- o `title` diz "8 anos de casa" por
       extenso -- mas quem enxerga bem tem que conseguir le-lo. */
    text-shadow: 0 0 6px var(--insignia-brilho);
}

/* No tema claro o aco #99a0b0 quase some no branco. O token `--text-secondary`
   ja' muda sozinho com o tema, entao os SETE se resolvem; o oitavo nao muda de
   proposito -- e' o azul da arte, e no branco ele da' 7,2:1, de sobra. */

/* ===========================================================================
   RODADA 130 -- O PRIMEIRO ANO, MES A MES, E OS CICLOS DE OITO
   ===========================================================================
   "ajuste o emblema para quem tem menos de 1 ano.. que a cada mes ele vai
    completando um pedaco... e tbm crie ate' o 18 anos... que no 16 seja um
    azul especial com o numero 8 + 8"

   O que a 127 dizia -- "acima de oito nada muda" -- valia enquanto oito era o
   teto. Agora o oitavo continua sendo O marco, mas ele se REPETE: a cada ciclo
   de oito anos completos os oito viram um marco e o rack recomeca. Aos 16 sao
   dois marcos lado a lado, que e' o "8 + 8" literal.
   ========================================================================= */

/* ---- O PRIMEIRO ANO: um lobo enchendo, um doze avos por mes -------------
   O que ainda nao encheu NAO fica transparente -- fica no mesmo aco a 22%.
   Transparente mostraria meio lobo, que parece defeito de imagem; a 22% a
   silhueta inteira continua la' e da' para ver o quanto falta.

   UMA REGRA POR MES, e nao `style="--nivel:58%"` no template: o teto de
   `style=` e' ZERO desde a 83C. Doze regras e' o preco, e elas tem uma
   vantagem que o valor calculado nao teria -- da' para ajustar um mes
   sozinho se algum ficar estranho na tela. */
.insignia-enchendo {
    /* Um pouco maior que os do rack: no primeiro ano ele e' o emblema
       INTEIRO, e no tamanho do rack pareceria um lobo perdido. */
    width: 26px;
    height: 18px;
    background: linear-gradient(to top,
        var(--text-secondary) 0 var(--nivel, 0%),
        rgba(152, 163, 180, .22) var(--nivel, 0%) 100%);
}
.insignia-enchendo[data-mes="0"]  { --nivel: 0%; }
.insignia-enchendo[data-mes="1"]  { --nivel: 8.33%; }
.insignia-enchendo[data-mes="2"]  { --nivel: 16.67%; }
.insignia-enchendo[data-mes="3"]  { --nivel: 25%; }
.insignia-enchendo[data-mes="4"]  { --nivel: 33.33%; }
.insignia-enchendo[data-mes="5"]  { --nivel: 41.67%; }
.insignia-enchendo[data-mes="6"]  { --nivel: 50%; }
.insignia-enchendo[data-mes="7"]  { --nivel: 58.33%; }
.insignia-enchendo[data-mes="8"]  { --nivel: 66.67%; }
.insignia-enchendo[data-mes="9"]  { --nivel: 75%; }
.insignia-enchendo[data-mes="10"] { --nivel: 83.33%; }
.insignia-enchendo[data-mes="11"] { --nivel: 91.67%; }

/* ---- O MARCO DO SEGUNDO CICLO: os 16 anos ------------------------------
   O azul e' o REALCE da arte (#0abbfc), mais claro que o do oitavo. Foi
   escolha declarada: o segundo marco tem que ler como "um degrau acima", e
   azul que acende faz isso; azul que adensa leria como "mais apagado", que e'
   o contrario do que dezesseis anos significam.

   Ele tambem nao precisa de tanto brilho quanto o oitavo: a 7,6:1 contra o
   fundo da barra ele se sustenta sozinho. O halo fica, menor, so' para os dois
   marcos combinarem quando aparecem lado a lado. */
.insignia-marco[data-ciclo="2"] .insignia-lobo-oitavo {
    background: var(--insignia-azul-16);
    filter: drop-shadow(0 0 4px rgba(10, 187, 252, .55));
}
.insignia-marco[data-ciclo="2"] .insignia-oito {
    color: var(--insignia-azul-16);
    /* O rotulo do segundo ciclo e' "8+8" -- tres caracteres onde o primeiro
       tem um. Sem reduzir, ele fica mais largo que o proprio lobo e o marco
       deixa de parecer um objeto so'. */
    font-size: 10.5px;
    letter-spacing: -.01em;
    text-shadow: 0 0 5px rgba(10, 187, 252, .5);
}

/* Do TERCEIRO ciclo em diante (24 anos, 32...) o marco volta ao azul do
   oitavo. Nao e' desistencia: uma cor nova por ciclo viraria um arco-iris na
   barra, e a Blue Wolf tem oito anos -- inventar a cor dos 24 hoje seria
   inventar sem nada para olhar. Quando alguem chegar la', escolhe-se. */

/* ---- RODADA 131: O BLOCO DE CICLO -------------------------------------
   Os sete de aco e o marco que os coroa andam JUNTOS. O bloco existe para
   que eles nunca se separem: soltos no `.insignia-casa`, aos 16 anos o
   navegador daria quatorze lobos de aco em sequencia e dois azuis no fim, que
   e' uma leitura diferente da que ele aprovou -- "8 + 8" tem que ler como
   dois blocos de oito, nao como quatorze mais dois.

   O `gap` aqui e' menor que o do `.insignia-casa` (7px) de proposito: dentro
   do bloco as pecas sao do MESMO ciclo e tem que parecer uma coisa so'; entre
   blocos o ar maior e' o que separa um ciclo do outro. */
.insignia-ciclo {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: none;
}

/* Dois blocos lado a lado precisam de um respiro a mais, senao o marco do
   primeiro encosta no rack do segundo e os dois viram um bloco so'. */
.insignia-casa > .insignia-ciclo + .insignia-ciclo { margin-left: 3px; }

/* ===========================================================================
   RODADA 128 -- A SALA DE EMBLEMAS
   ===========================================================================
   O destino do clique na insignia. Ver templates/emblemas.html.
   ========================================================================= */
.emblemas-heroi {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    padding: 18px;
    margin-top: 6px;
    border-radius: 12px;
    background: var(--bg-panel);
    border: 1px solid var(--border-steel);
}
.emblemas-foto {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    flex: none;
    object-fit: cover;
    border: 2px solid var(--insignia-azul);
}
.emblemas-foto-iniciais {
    display: grid;
    place-items: center;
    background: var(--bg-panel-raised);
    font-size: 26px;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
}
.emblemas-identidade { flex: 1 1 220px; }
.emblemas-posto {
    display: inline-block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    /* Texto claro sobre o azul da insignia: 7,4:1. O caminho contrario --
       azul sobre fundo do tema -- daria 2,4:1, que e' o motivo de o oitavo
       precisar de halo no rack (rodada 127). Aqui ha' fundo proprio, entao
       nao precisa de brilho nenhum. */
    color: #eaf2ff;
    background: var(--insignia-azul);
    border-radius: 5px;
    padding: 4px 8px;
}
.emblemas-identidade h2 { margin: 8px 0 2px; }
.emblemas-identidade p { margin: 0; color: var(--text-secondary); }
.emblemas-rack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.emblemas-rack-rotulo {
    font-size: 9.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-terciario);
}

/* ---- a trilha e a contagem para o proximo ano ---- */
.emblemas-trilha {
    margin-top: 16px;
    padding: 16px 18px;
    border-radius: 12px;
    background: var(--bg-panel);
    border: 1px solid var(--border-steel);
}
.trilha-linha { display: flex; align-items: center; gap: 6px; }
.trilha-passo {
    display: block;
    height: 5px;
    /* `flex: 1` e nao largura fixa: sao sempre OITO passos, entao a barra
       inteira e' a jornada completa e o quanto esta' aceso e' a fracao
       cumprida. Com largura fixa, a barra de quem tem 2 anos seria curta e
       nao diria nada sobre o que falta. */
    flex: 1 1 0;
    border-radius: 3px;
    background: var(--fundo-hover, rgba(127, 127, 127, .14));
}
.trilha-passo.aceso { background: var(--insignia-azul); }
.trilha-texto { margin: 12px 0 0; color: var(--text-secondary); }
.trilha-texto strong { color: var(--text-primary); }
.trilha-completa strong { color: var(--insignia-azul); }

/* ---- os oito cartoes ---- */
.emblemas-secao {
    margin: 28px 0 4px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--text-terciario);
}
.emblemas-sub { margin: 0 0 14px; color: var(--text-secondary); font-size: 13.5px; }
.emblemas-grade {
    display: grid;
    gap: 12px;
    margin-top: 14px;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
}
.emblema {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 18px 14px 14px;
    border-radius: 12px;
    text-align: center;
    background: var(--bg-panel);
    border: 1px solid var(--border-steel);
}
.emblema-arte { height: 42px; display: grid; place-items: center; }
.emblema-lobo { width: 48px; height: 33px; }
.emblema-ano {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .14em;
    color: var(--text-terciario);
}
.emblema h4 { margin: 4px 0 0; font-size: 16px; color: var(--text-primary); }
.emblema p {
    margin: 0;
    font-size: 12.5px;
    color: var(--text-secondary);
    min-height: 34px;
}
.emblema-data {
    margin-top: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--insignia-azul);
    font-variant-numeric: tabular-nums;
}
/* O que ainda nao foi conquistado NAO some: fica apagado, de borda tracejada,
   com a data futura. E' essa metade que faz a tela ser uma evolucao e nao um
   placar -- sem ela, quem tem 2 anos veria dois cartoes e ponto. */
.emblema.futuro { opacity: .45; border-style: dashed; }
.emblema-data-futura { color: var(--text-terciario); font-weight: 500; }
.emblema-alfa { border-color: var(--insignia-azul); }
.emblema-alfa .emblema-lobo {
    background: var(--insignia-azul);
    filter: drop-shadow(0 0 5px var(--insignia-brilho));
}
.emblema-alfa.futuro .emblema-lobo { filter: none; }

/* ---- a alcateia ---- */
.alcateia { display: grid; gap: 8px; }
.alcateia-linha {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--bg-panel);
    border: 1px solid var(--border-steel);
}
.alcateia-linha strong { flex: 1 1 160px; }
.alcateia-eu { border-color: var(--insignia-azul); }
.alcateia-ordem {
    width: 24px;
    height: 24px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--bg-panel-raised);
    font-size: 11px;
    font-weight: 800;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}
.alcateia-anos {
    font-size: 13px;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}
.emblemas-voltar { margin-top: 26px; }

/* O link em volta da insignia (rodada 128). `display: inline-flex` para ele
   nao acrescentar altura de linha em volta do rack, e sem sublinhado porque o
   alvo e' um desenho -- sublinhar um emblema o faria parecer texto quebrado. */
.link-emblemas {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    flex: none;
}
.link-emblemas:hover .insignia-lobo { background: var(--text-primary); }
.link-emblemas:hover .insignia-lobo-oitavo { background: var(--insignia-azul); }

/* ===========================================================================
   RODADA 129 -- A BARRA DE CIMA: o relogio empilhado, e o grupo mais a' esquerda
   ===========================================================================
   Pedido: "ajustar o horario pra ficar acima/abaixo das caixinhas de
   funcionalidade e trazer elas mais pra esquerda".

   E o ganho que nao aparece no pedido: medido a 1150px, `.topbar-esquerda`
   ocupava 664px FIXOS e empurrava o bloco da pessoa para uma segunda fileira.
   Empilhado, o relogio devolve ~100px de largura (os 88 dele mais o gap), e o
   bloco da pessoa volta a caber na mesma linha em telas onde antes nao cabia.
   E' o item "topbar-esquerda transborda abaixo de 1152px", que estava medido e
   nao consertado desde a 115.
   ========================================================================= */
.topbar-esquerda {
    /* Passa de LINHA para COLUNA: os botoes em cima, o relogio embaixo. */
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}
.topbar-acoes {
    display: flex;
    align-items: center;
    gap: 12px;
    /* Os botoes ainda podem quebrar entre si em tela muito estreita -- o que
       eles NAO fazem mais e' empurrar o bloco da pessoa para fora. */
    flex-wrap: wrap;
}
/* O relogio alinhado com a borda esquerda dos botoes, e nao com o texto
   deles: ele e' um dado da barra, nao um rotulo de botao. */
.topbar-esquerda > .relogio-servidor { padding-left: 2px; }

/* "trazer elas mais pra esquerda": o recuo nao entra aqui, e sim na regra
   ORIGINAL do `.topbar-slim`, la' em cima. Uma regra nova no fim do arquivo
   viraria "a ultima .topbar-slim" -- e a suite 117 le' justamente a ultima
   para conferir o `sticky`, o fundo opaco e o z-index do cabecalho. Ela
   reprovou seis assercoes na primeira versao desta rodada, e estava certa:
   com a regra nova no fim, o cabecalho tinha perdido as quatro propriedades.
   Ver `padding: 14px 24px 14px 14px` na regra original. */

/* ===========================================================================
   RODADA 129 -- O TEMA PAPEL BRANCO: preto de verdade
   ===========================================================================
   "ajuste a cor da fonte do tema branco... que fique um preto mais visivel ta
   muito apagado".

   ISTO DESFAZ, DE PROPOSITO, UMA DECISAO DA 43B, que dizia "texto grafite
   (#33373d), nunca preto -- mesmo motivo do fundo nao ser preto no tema
   escuro". O raciocinio era simetria, e a simetria nao vale nos dois sentidos:
   no tema escuro o texto quase branco cansa porque EMITE luz; no tema claro o
   texto cinza nao cansa menos, so' le' pior. Ele usa a tela em sala clara e
   viu isso antes de mim.

   Medido contra `--bg-panel` (#faf9f6), o pior fundo de cada cor:
       primario    11,4:1  ->  16,9:1
       secundario   6,4:1  ->  10,0:1
       terciario    5,2:1  ->   7,2:1
   Todas SOBEM -- escurecer texto sobre fundo claro nao tem como piorar
   contraste, entao as suites de contraste (81A, 100) so' ficam mais folgadas.
   ========================================================================= */
body.tema-papelbranco.tema-papelbranco {
    /* RODADA 130 -- o marco dos 16 anos no tema claro. Mesma familia do
       #0abbfc, escurecido ate' 5,8:1 sobre o papel (era 2,1:1, que sumia). Ele
       continua ciano ao lado do azul do oitavo, entao os dois marcos seguem
       distinguiveis -- que e' a unica coisa que o tom precisa fazer. */
    --insignia-azul-16: #046a8f;
    --text-primary: #15181d;     /* 16,9:1 sobre --bg-panel */
    --text-secondary: #3a4046;   /* 10,0:1 -- era 6,4 */
    --text-terciario: #4e555d;   /* 7,2:1 -- era 5,2 */
    /* O `--vidro-texto` acompanha: ele e' o texto DENTRO dos botoes de vidro,
       e ficaria claro demais ao lado do resto escurecido. Foi um achado da
       100 que dois tons de texto no mesmo tema divergem se so' um muda. */
    --vidro-texto: #22262c;
    --vidro-texto-forte: #15181d;
}

/* RODADA 130 -- a sala de emblemas acompanhou o ciclo.
   O cartao do SEGUNDO marco (16 anos) usa o ciano, o mesmo tom que o emblema
   da barra usa -- os dois tem que dizer a mesma coisa, senao o cartao promete
   uma cor e a barra entrega outra. */
.emblema-alfa[data-ciclo="2"] { border-color: var(--insignia-azul-16); }
.emblema-alfa[data-ciclo="2"] .emblema-lobo {
    background: var(--insignia-azul-16);
    filter: drop-shadow(0 0 5px rgba(10, 187, 252, .55));
}
.emblema-alfa[data-ciclo="2"] .emblema-data { color: var(--insignia-azul-16); }
.emblema-alfa[data-ciclo="2"].futuro .emblema-lobo { filter: none; }

/* Quem ainda nao tem um ano nao tem posto. O selo continua aparecendo, em
   cinza, porque a faixa sem ele fica com um buraco do lado do nome -- e
   "Primeiro ano" e' informacao, nao enfeite. */
.emblemas-posto-vazio {
    background: var(--bg-panel-raised);
    color: var(--text-secondary);
    border: 1px solid var(--border-steel);
}

/* ===========================================================================
   RODADA 131 -- OS ANEXOS ESCOLHIDOS, COM O X PARA DESISTIR
   ===========================================================================
   "opcao de x no anexo para quando eu desistir de anexar o arquivo que ja
    anexei"

   Ate' aqui os nomes dos arquivos escolhidos saiam numa linha de texto, sem
   volta: para tirar UM era preciso fechar o modal e comecar de novo. Com o
   colar da 96 somando arquivos de proposito, quem colava o print errado em
   segundo nao tinha como tirar so' ele.

   Cada arquivo virou um chip com o seu proprio X. O chip nao usa `title` como
   unica pista do nome completo -- ele tem, para o mouse --, mas tambem nao
   deixa um nome gigante empurrar a largura do modal: `max-width` com
   reticencia, que e' o unico lugar onde reticencia e' a resposta certa (o
   arquivo continua anexado, e o nome inteiro esta' a um mouse de distancia).
   ========================================================================= */
.lista-anexos-escolhidos {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}
.lista-anexos-escolhidos:empty { display: none; }
.chip-anexo-escolhido {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 260px;
    padding: 3px 4px 3px 9px;
    border: 1px solid var(--border-steel);
    border-radius: 999px;
    background: var(--bg-panel-raised);
    font-size: 11.5px;
    color: var(--text-primary);
}
.chip-anexo-nome {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chip-anexo-x {
    /* Botao de verdade (`<button type=button>`), e nao um `<span>` clicavel:
       teclado e leitor de tela chegam nele de graca, e dentro de um <form> o
       `type` e' o que impede de ele ENVIAR o formulario. */
    flex: none;
    width: 18px;
    height: 18px;
    line-height: 1;
    padding: 0;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    background: transparent;
    color: var(--text-secondary);
    font-size: 14px;
}
.chip-anexo-x:hover {
    background: var(--danger);
    color: #ffffff;
}

/* ===========================================================================
   RODADA 131 -- O VISUALIZADOR DE ANEXO
   ===========================================================================
   A imagem ocupa o que a tela tem, e nunca mais: `max-height: 78vh` com
   `object-fit: contain` mostra o print inteiro sem cortar e sem esticar. Um
   print de 3000px de largura sem esse teto empurraria o modal para fora da
   tela e o botao de baixar iria junto -- que e' justamente a opcao que ele
   pediu para nao perder.
   ========================================================================= */
.caixa-modal-anexo {
    background: var(--bg-panel);
    border: 1px solid var(--border-steel);
    border-radius: var(--radius);
    padding: 14px;
    max-width: 92vw;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cabecalho-modal-anexo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}
.nome-do-anexo-visto {
    font-size: 13px;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}
.acoes-modal-anexo { display: flex; gap: 8px; flex: none; }
.palco-modal-anexo {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
    background: var(--bg-panel-raised);
    border-radius: 8px;
}
.imagem-do-anexo-visto {
    max-width: 100%;
    max-height: 78vh;
    object-fit: contain;
    display: block;
}
/* RODADA 132 -- o visor de documento (PDF e texto), no MESMO pop-up.
   Largura em `vw` e nao 100%: o iframe nao tem conteudo intrinseco para
   medir, entao sem uma largura declarada ele nasceria com os 300x150px que o
   navegador da' de padrao -- e o PDF abriria do tamanho de um selo. */
.documento-do-anexo-visto {
    width: 82vw;
    max-width: 900px;
    height: 78vh;
    border: 0;
    display: block;
    background: #ffffff;
}
/* O chip de anexo ganhou duas portas (rodada 131): o nome abre, a seta baixa.
   A seta precisa de alvo de clique proprio -- encostada no nome, o dedo no
   celular acertaria o link errado metade das vezes. */
.chip-anexo-abrir { color: inherit; text-decoration: none; }
.chip-anexo-abrir:hover { text-decoration: underline; }
.chip-anexo-baixar {
    flex: none;
    padding: 0 5px;
    border-left: 1px solid var(--border-steel);
    margin-left: 2px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 13px;
}
.chip-anexo-baixar:hover { color: var(--accent); }

/* ===========================================================================
   RODADA 131 -- CERTIFICACOES E CURSOS
   ===========================================================================
   O emblema tem tamanho FIXO (44px) esteja ele com arte ou com as iniciais.
   Sem isso a grade ficaria irregular conforme cada fabricante mandasse o PNG
   num formato -- e uma parede de emblemas so' parece uma parede quando as
   pecas tem o mesmo tamanho.
   ========================================================================= */
.emblema-certificacao {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    object-fit: contain;
    background: var(--bg-panel-raised);
    border: 1px solid var(--border-steel);
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.emblema-certificacao-sigla {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .02em;
    color: var(--accent);
}
.certificacoes-grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}
.cartao-certificacao {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--border-steel);
    border-radius: var(--radius);
    background: var(--bg-panel);
}
.certificacao-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.certificacao-texto h4 { margin: 0; font-size: 13px; overflow-wrap: anywhere; }
.certificacao-emissor { font-size: 11.5px; color: var(--text-secondary); }
/* Vencida NAO some da tela e nao fica cinza a ponto de nao se ler: ela fica
   marcada. A pessoa tirou aquela certificacao -- o que caducou foi o prazo, e
   apagar o feito para avisar do prazo seria cobrar duas vezes. */
.certificacao-vencida { border-color: var(--cor-vencendo); }
.certificacao-aviso { font-size: 11px; color: var(--cor-vencendo); font-weight: 600; }
.form-conceder-certificacao {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 14px;
}

/* ===========================================================================
   RODADA 133 -- OS EMBLEMAS DE CERTIFICACAO AO LADO DO NOME
   ===========================================================================
   "cadastrei os cursos e especializacao gostaria que as badges que eu
    cadastrei aparecerem tbm igual aparece os lobos de cada ano"

   Eles andam junto com a insignia de tempo de casa, nas mesmas telas. O
   TAMANHO e' o que muda: na sala de emblemas o emblema tem 44px, porque ali
   ele e' o assunto; ao lado do nome ele tem 20px, que e' a altura do rack de
   lobos (14px o lobo, 31px as duas fileiras) -- maior que isso e o emblema de
   certificacao roubaria a leitura do de tempo de casa, que e' o que a pessoa
   procura primeiro naquele canto.
   ========================================================================= */
.certificacoes-barra {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    vertical-align: middle;
    /* `flex: none` pelo mesmo motivo da insignia (licao das rodadas 98, 91 e
       125): dentro de um bloco flex, sem isto o navegador elege este conjunto
       para encolher quando o nome e' longo. */
    flex: none;
    /* Um respiro que separa os dois emblemas -- sem ele, o ultimo quadrado da
       certificacao encosta no primeiro lobo e os dois viram um bloco so'.

       RODADA 134 -- A DIVISA MUDOU DE LADO JUNTO COM O CONJUNTO.
       Pedido dele: "quero q os bagdes das certificacoes apareçam a esquerda
       dos lobos". Na 133 as certificacoes vinham DEPOIS dos lobos e a divisa
       ficava a' esquerda delas; agora elas vem ANTES, e a mesma divisa tem
       que ficar a' direita -- senao ela separaria o nome das certificacoes,
       que e' o contrario do que ela existe para fazer. A troca de lado e'
       parte da mudanca, nao um detalhe: divisa no lado errado desenha dois
       grupos onde ha' um so'.

       E o respiro do NOME nao entra aqui: ele vem do `gap` do bloco flex que
       hospeda o conjunto, e sempre veio. */
    margin-right: 8px;
    padding-right: 8px;
    border-right: 1px solid var(--border-steel);
}
/* RODADA 135 -- 20px -> 26px. "aumente um pouco o tamanho das badges.. estao
   pequenas para visualizar".

   POR QUE 26 E NAO 28, QUE ERA O OUTRO CANDIDATO. Medido no navegador, com o
   teto de QUATRO emblemas (o pior caso de largura da 133):

       20px   conjunto 175px    barra de cima 56px
       26px   conjunto 199px    barra de cima 56px
       28px   conjunto 207px    barra de cima 56px em 1400, e 48px em 1280

   Aos 28px, numa tela de 1280 a barra MUDA DE ALTURA -- o conjunto empurra a
   identidade passando o ponto em que o e-mail se esconde (a regra da 96). E'
   uma tela inteira reagindo a um emblema, e nao vale o pixel a mais. Aos 26 a
   barra nao se mexe em nenhuma das tres larguras medidas (1400, 1280, 1100), e
   nenhuma delas ganha rolagem lateral.

   O TETO DA 133 CONTINUA VALENDO, e por isso o numero pode subir: quatro
   emblemas de 26px dao 125px, ainda MENOS que o rack de lobos de oito anos
   (128px). Era essa a conta que limitava o tamanho, e ela ainda fecha.

   A sigla acompanha na mesma proporcao (8.5/20 = 11/26). Sem isso o quadrado
   cresce e a letra fica boiando dentro dele. */
.certificacoes-barra .emblema-certificacao {
    width: 26px;
    height: 26px;
    border-radius: 6px;
}
.certificacoes-barra .emblema-certificacao-sigla { font-size: 11px; }
.certificacoes-mais {
    /* Sobe junto (10.5 -> 12px): o "+N" fica ao lado de um emblema que cresceu
       30%, e deixado no tamanho antigo passaria a parecer defeito de fonte. */
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

/* ===========================================================================
   RODADA 136 -- MODULO 7: BASE DE CONHECIMENTO
   ===========================================================================
   Tudo aqui usa as variaveis que os temas ja' redefinem (--bg-panel,
   --text-secondary, --accent...). Nenhuma cor escrita a mao: a suite 91 varre
   variavel orfa, e a 100 mede contraste em 36 telas -- cor literal aqui
   passaria nas duas e quebraria no tema claro, que e' o modo de falha que a
   rodada 100A perseguiu.

   E nenhuma regra com `style=` do lado do HTML: a 83C fechou isso, e o editor
   desta tela existe do jeito que existe justamente por causa disso. */
.kb-busca {
    display: flex;
    gap: 8px;
    margin: 10px 0 6px;
}
.kb-busca input[type="search"] {
    flex: 1 1 auto;
    font-size: 15px;   /* maior que o padrao de campo: e' A tela */
    padding: 10px 12px;
}
.kb-filtros {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.kb-filtros-form {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.kb-lista {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}
.kb-cartao {
    background: var(--bg-panel);
    border: 1px solid var(--border-steel);
    border-radius: var(--radius);
    padding: 12px 14px;
}
.kb-cartao-titulo {
    font-family: var(--fonte-titulo);
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
    display: block;
}
.kb-cartao-titulo:hover { color: var(--accent); }
.kb-cartao-resumo {
    margin: 4px 0 8px;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.5;
}
/* O grifo do `ts_headline`. Fundo do acento a 22% para nao virar marca-texto
   fluorescente no tema claro -- medido junto com o veu do modal da 96. */
.kb-cartao-resumo mark {
    background: color-mix(in srgb, var(--accent) 22%, transparent);
    color: inherit;
    padding: 0 2px;
    border-radius: 3px;
}
.kb-cartao-rodape {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.kb-cartao-meta { margin-left: auto; }

.kb-selo {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    padding: 2px 7px;
    border-radius: 999px;
    border: 1px solid var(--border-steel);
    color: var(--text-secondary);
}
/* O NIVEL DE VISIBILIDADE TEM COR, e a escala e' de fora para dentro: quanto
   mais restrito, mais quente. Quem bate o olho numa lista precisa ver o
   `master` antes de ler a palavra. */
.kb-selo-master { border-color: var(--danger); color: var(--danger); }
.kb-selo-interno { border-color: var(--accent); color: var(--accent); }
.kb-selo-cliente { border-color: var(--cor-vencendo); color: var(--cor-vencendo); }
.kb-selo-publico { border-color: var(--success); color: var(--success); }
.kb-selo-rascunho { border-style: dashed; }
.kb-selo-arquivado { opacity: .7; }
.kb-selo-revisar { border-color: var(--cor-vencendo); color: var(--cor-vencendo); }
.kb-selo-categoria {
    font-size: 11px;
    color: var(--text-secondary);
    border-left: 2px solid var(--accent);
    padding-left: 6px;
}
.kb-tag {
    font-size: 11px;
    color: var(--text-terciario);
    text-decoration: none;
}
.kb-tag:hover { color: var(--accent); }
.kb-tag-ativa { color: var(--accent); }
.kb-vazio { padding: 24px 4px; max-width: 60ch; line-height: 1.6; }
.kb-paginacao {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}

/* --- o artigo --- */
.kb-artigo-titulo { margin: 2px 0 0; }
.kb-artigo-acoes { display: flex; gap: 6px; align-items: center; }
.kb-artigo-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 8px 0;
}
.kb-aviso-revisar {
    background: color-mix(in srgb, var(--cor-vencendo) 12%, transparent);
    border-left: 3px solid var(--cor-vencendo);
    padding: 8px 12px;
    border-radius: var(--radius);
    font-size: 13px;
    line-height: 1.5;
    max-width: 78ch;
}
.kb-artigo-resumo {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    max-width: 78ch;
    margin: 10px 0;
}
/* O CORPO. Estas regras sao a razao de o editor produzir TAG SEMANTICA: o
   negrito e' `<strong>` e quem o pinta e' esta folha, nao um `style=` gravado
   dentro do artigo. Trocar a aparencia de todos os artigos de uma vez e' uma
   linha aqui -- com estilo embutido seria um UPDATE em cada linha da tabela. */
.kb-artigo-corpo {
    max-width: 78ch;
    line-height: 1.7;
    font-size: 14px;
    color: var(--text-primary);
}
.kb-artigo-corpo h2 { font-size: 17px; margin: 22px 0 6px; }
.kb-artigo-corpo h3 { font-size: 15px; margin: 18px 0 4px; }
.kb-artigo-corpo h4 { font-size: 14px; margin: 14px 0 4px; }
.kb-artigo-corpo p { margin: 0 0 10px; }
.kb-artigo-corpo ul,
.kb-artigo-corpo ol { margin: 0 0 12px; padding-left: 22px; }
.kb-artigo-corpo li { margin-bottom: 4px; }
.kb-artigo-corpo blockquote {
    border-left: 3px solid var(--border-steel);
    margin: 0 0 12px;
    padding: 2px 0 2px 12px;
    color: var(--text-secondary);
}
.kb-artigo-corpo code {
    background: var(--bg-panel-raised);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 12.5px;
}
.kb-artigo-corpo pre {
    background: var(--bg-panel-raised);
    border: 1px solid var(--border-steel);
    border-radius: var(--radius);
    padding: 10px 12px;
    overflow-x: auto;
}
.kb-artigo-corpo img { max-width: 100%; border-radius: var(--radius); }
.kb-artigo-corpo table { border-collapse: collapse; margin-bottom: 12px; }
.kb-artigo-corpo th,
.kb-artigo-corpo td {
    border: 1px solid var(--border-steel);
    padding: 5px 9px;
    text-align: left;
}
.kb-anexos { margin: 14px 0; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

.kb-feedback {
    border-top: 1px solid var(--border-steel);
    margin-top: 20px;
    padding-top: 12px;
}
.kb-feedback-form { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.kb-voto-escolhido { border-color: var(--accent); color: var(--accent); }
.kb-versoes { margin-top: 16px; }
.kb-versoes-lista { margin: 8px 0 0; padding-left: 18px; font-size: 12.5px; }
.kb-versao-titulo { display: block; }
.kb-artigo-assinatura { margin-top: 18px; }

/* --- o editor --- */
.kb-editor-form { max-width: 900px; }
.kb-veio-de { max-width: 78ch; line-height: 1.5; margin-bottom: 10px; }
.kb-barra-editor {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-wrap: wrap;
    background: var(--bg-panel-raised);
    border: 1px solid var(--border-steel);
    border-bottom: none;
    border-radius: var(--radius) var(--radius) 0 0;
    padding: 6px 8px;
}
.kb-btn-editor {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 5px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 12.5px;
    padding: 3px 8px;
}
.kb-btn-editor:hover {
    border-color: var(--border-steel);
    color: var(--text-primary);
}
.kb-barra-divisa {
    width: 1px;
    height: 16px;
    background: var(--border-steel);
    margin: 0 3px;
}
.kb-campo-link { font-size: 12px; padding: 3px 6px; width: 170px; }
.kb-corpo-editavel {
    min-height: 320px;
    max-height: 60vh;
    overflow-y: auto;
    background: var(--campo-fundo);
    border: 1px solid var(--border-steel);
    border-radius: 0 0 var(--radius) var(--radius);
    padding: 12px 14px;
    line-height: 1.7;
    font-size: 14px;
    color: var(--text-primary);
}
.kb-corpo-editavel:focus { outline: 1px solid var(--accent); }
/* As MESMAS regras do corpo publicado, para o que se ve' escrevendo ser o que
   sai. Editor que mostra diferente do resultado e' a reclamacao classica de
   WYSIWYG, e ela e' evitavel de graca aqui: e' a mesma folha. */
.kb-corpo-editavel h2 { font-size: 17px; margin: 22px 0 6px; }
.kb-corpo-editavel h3 { font-size: 15px; margin: 18px 0 4px; }
.kb-corpo-editavel p { margin: 0 0 10px; }
.kb-corpo-editavel ul,
.kb-corpo-editavel ol { margin: 0 0 12px; padding-left: 22px; }
.kb-editor-lado {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 10px;
    margin-top: 12px;
}
.kb-form-categoria {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin: 10px 0 14px;
}

/* TELA PEQUENA -- a regra da 115. A barra do editor quebra em duas linhas
   sozinha (ja' e' flex-wrap); o que aperta de verdade e' a busca. */
@media (max-width: 760px) {
    .kb-busca { flex-direction: column; }
    .kb-cartao-meta { margin-left: 0; }
}


/* ===========================================================================
   RODADA 140 -- a barra da AREA DO CLIENTE numa tela de celular.

   Medido no clique, viewport de 390px: o `scrollWidth` do documento dava 412 e
   a pagina rolava para o lado. O `.user-info` ja' tem `flex-wrap: wrap` abaixo
   de 640px (rodada 115), mas envolver nao resolve quando um item SOZINHO e'
   mais largo que a tela -- e o nome de uma pessoa com `white-space: nowrap`
   e' exatamente isso.

   As regras ficam escopadas em `.topbar-area` de proposito: a intranet e o
   Portal sao usados em telas grandes, e esconder o nome da empresa la' seria
   tirar informacao de quem tem espaco de sobra.
   =========================================================================== */
.topbar-area .nome-na-barra {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 52vw;
}

@media (max-width: 640px) {
    /* O nome da empresa continua no titulo da aba e no endereco -- aqui ele
       so' disputava espaco com o botao de sair. */
    .topbar-area .empresa-na-barra { display: none; }
}

/* ===========================================================================
   RODADA 142 -- AS CREDENCIAIS DO ARTIGO
   ===========================================================================
   Nada aqui usa `display:none` para esconder valor de senha: o que esconde e'
   o TEXTO nao estar no documento (o servidor so' manda quando alguem clica).
   CSS que "esconde" conteudo presente no HTML e' esconder de quem olha a tela,
   e nao de quem olha o codigo-fonte -- que e' justamente quem preocupa. */
.kb-selo-segredo {
    background: rgba(255, 176, 32, 0.14);
    color: #ffb020;
    border: 1px solid rgba(255, 176, 32, 0.35);
}
.kb-segredos {
    margin-top: 18px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 176, 32, 0.28);
    border-radius: 10px;
    background: rgba(255, 176, 32, 0.05);
}
.kb-segredo-linha {
    display: flex;
    flex-wrap: wrap;          /* a licao da 115: em tela de 390px isto vira
                                 quatro linhas em vez de rolagem lateral */
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--borda-sutil, rgba(255, 255, 255, 0.07));
}
.kb-segredo-linha:last-of-type { border-bottom: 0; }
.kb-segredo-rotulo { font-weight: 600; min-width: 140px; }
.kb-segredo-valor {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.28);
    /* QUEBRA EM QUALQUER PONTO. Senha longa sem isto empurra o botao Esconder
       para fora da tela no celular -- e ai' o unico jeito de tirar a senha da
       tela e' recarregar. */
    word-break: break-all;
    max-width: 100%;
}
.kb-segredo-quem { margin-left: auto; }
.kb-segredo-novo {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
.kb-segredo-novo input { flex: 1 1 200px; min-width: 0; }
.btn-tirar-segredo { border-color: rgba(255, 90, 90, 0.45); color: #ff7a7a; }
.btn-tirar-segredo:hover { border-color: #ff5a5a; color: #ff5a5a; }
@media (max-width: 640px) {
    .kb-segredo-quem { margin-left: 0; flex-basis: 100%; }
    .kb-segredo-rotulo { flex-basis: 100%; }
}

/* RODADA 142 -- a linha de REVELACAO DE SEGREDO, na trilha de auditoria.
   Numa lista de downloads de anexo, uma revelacao de credencial some no meio
   -- e ela e' a unica linha da tela que alguem procura com pressa. */
.linha-segredo { background: rgba(255, 176, 32, 0.07); }
.linha-segredo td:first-child { box-shadow: inset 3px 0 0 #ffb020; }

/* ===========================================================================
   RODADA 144 -- A GRADE DO FLUXO DE CAIXA
   ===========================================================================
   Uma tabela de ~50 linhas por 33 colunas. Duas decisoes carregam a tela:

   1. A PRIMEIRA COLUNA GRUDA (`position: sticky`). Sem ela, rolar para o dia
      20 faz perder de vista QUAL item se esta' preenchendo -- e ai' a pessoa
      lanca salario na linha do aluguel. Numa grade larga isso nao e'
      acabamento, e' correcao.
   2. O CABECALHO TAMBEM GRUDA, pelo mesmo motivo do outro eixo: sem ele nao
      da' para saber em que DIA se esta' digitando.

   A rolagem e' do CONTEINER, e nao da pagina (a licao da 115 e da 117). */
/* ==========================================================================
   RODADA 145 -- UMA AREA DE ROLAGEM, E ELA OCUPA O QUE SOBRA DA TELA
   ==========================================================================
   O RELATO: "ajuste a visualizacao da planilha financeira para dar para
   visualizar melhor.. esta com rolagem.. acho que pode usar a tela toda".

   O QUE A MEDICAO MOSTROU (medida_grade_caixa.py, na janela DELE, 1658x830):

       .conteudo                  1300px   (teto global)
       a caixa da grade           1252px
       vazio a' direita            142px
       a grade inteira            2806px   -> 12 dias de 31 visiveis
       rolagem vertical INTERNA   sim      (max-height: 72vh = 598px)
       a pagina rola              NAO

   Duas coisas erradas ao mesmo tempo. A grade era uma CAIXA de 598px de
   altura dentro de uma area que nao rolava -- entao sobrava tela em branco
   embaixo e, ainda assim, ela tinha barra propria. E o teto de 1300px, que
   e' certo para texto (linha larga demais cansa), aqui so' produzia vazio.

   O CONSERTO NAO E' TIRAR A ROLAGEM INTERNA, e vale dizer por que: sem ela o
   cabecalho de dias e a coluna de itens PARAM DE GRUDAR. `position: sticky`
   gruda no ancestral que rola, e quem rola nesta casa e' a `.area-principal`
   (rodada 117) -- com a grade solta la' dentro, rolar para o dia 20 faria o
   cabecalho sumir, e digitar numa coluna sem saber que dia e' ela e' pior
   que rolar.

   Entao a caixa CONTINUA sendo quem rola, e passa a ocupar toda a altura que
   sobra, por flex -- sem numero magico de `vh`, que erraria em toda tela de
   altura diferente. O resultado e' uma barra so', na borda da grade, com o
   cabecalho e a primeira coluna congelados: e' o que o Excel faz, e e' o que
   ele ja' sabe usar. */
.conteudo-largo {
    max-width: none;
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* 24px em cima e embaixo sao uma linha da grade cada. Nas laterais o
       respiro fica: e' o que separa a primeira coluna do menu. */
    padding-top: 14px;
    padding-bottom: 12px;
}
/* TUDO QUE NAO E' A GRADE GUARDA A ALTURA NATURAL.
   Item de flex encolhe por padrao (`flex-shrink: 1`), e a primeira versao
   desta regra esqueceu disso: o formulario do saldo inicial e o rodape foram
   ESMAGADOS a quase zero e o cabecalho da tabela passou por cima do botao
   Gravar. Visto no print do "depois", que e' o motivo de tirar print. */
.conteudo-largo > * { flex: 0 0 auto; }
.conteudo-largo .caixa-rolagem {
    flex: 1 1 auto;
    /* `min-height: 0` aqui e SO' aqui: item de flex nasce com
       `min-height: auto`, que o proibe de encolher abaixo do proprio
       conteudo -- sem isto a grade cresce e o `flex: 1` nao vale nada. E' a
       mesma armadilha da 115 e da 117, no eixo vertical. */
    min-height: 0;
    /* Um piso, para a grade nao virar uma fresta em janela baixa. Abaixo
       disto quem rola volta a ser a area principal, e tudo bem. */
    height: 300px;
    overflow: auto;
}
/* SEM `max-height` em vh aqui: o flex acima ja' da' a altura certa em
   qualquer janela, e um teto em `vh` erraria em toda tela de altura
   diferente da minha. O `vh` sobrevive so' no celular, la' embaixo, onde o
   shell volta a rolar a pagina inteira e o flex nao tem de quem herdar
   altura. */
.caixa-rolagem { overflow: auto; }
/* A FONTE, MEDIDA E NAO ESCOLHIDA (rodada 145). A largura que uma coluna de
   dia precisa e' a do maior numero dele, e o maior de setembro/2026 e'
   `-25.121,58`. Medido no proprio navegador, em Inter:

       0.86rem -> 68px de texto      0.78rem -> 62px
       0.82rem -> 65px               0.74rem -> 59px

   0.78rem e' onde a conta fecha: 62 de texto + 8 de respiro = 70px por dia,
   e ai' a segunda quinzena (16 dias) cabe com o menu recolhido. Abaixo disso
   o ganho e' de 3px por coluna e o custo e' ler dinheiro apertando o olho --
   numa tela cujo trabalho e' bater com o extrato, nao compensa. */
.caixa-grade { border-collapse: separate; border-spacing: 0; font-size: 0.78rem; }
.caixa-grade th,
.caixa-grade td {
    /* 6px de cada lado somavam 12 por coluna -- em 31 dias, 372px, mais que
       cinco colunas inteiras. Com 4 a coluna de dia fica em 70px (62 de
       campo + 8), que e' o numero que faz a quinzena fechar. */
    padding: 2px 4px;
    border-bottom: 1px solid var(--borda-sutil, rgba(255, 255, 255, 0.07));
    white-space: nowrap;
}
.caixa-grade thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--bg-panel);
}
.caixa-col-item {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--bg-panel);
    text-align: left;
    font-weight: 500;
    min-width: 230px;
    max-width: 230px;
    /* RODADA 145 -- O NOME QUEBRA EM VEZ DE SER CORTADO.
       Medido: 10 dos 79 itens passavam de 230px e viravam
       "2.2.0 Mensalidade DOYON IMA...". O maior mede 317px.
       Alargar a coluna ate' 320 resolveria o nome e custaria MAIS de um dia
       de largura -- a grade mostraria 12 dias em vez de 14, ou seja, o
       conserto pioraria o que a rodada veio consertar. Quebrar em duas
       linhas nao custa coluna nenhuma, e so' as 10 linhas longas crescem. */
    line-height: 1.2;
}
/* DOIS NOMES DE CLASSE, e nao um: `.caixa-grade th` e' (0,1,1) e vencia
   `.caixa-col-item`, que e' (0,1,0) -- o `nowrap` continuava valendo e os 10
   nomes seguiam cortados. A primeira medicao do "depois" mostrou
   `nomes_cortados: 10`, igual ao "antes", e foi o que denunciou. */
.caixa-grade .caixa-col-item { white-space: normal; }
/* O CANTO precisa de z-index maior que os dois: ele e' sticky nos DOIS eixos,
   e sem isto a primeira coluna passa por cima do cabecalho ao rolar. */
.caixa-grade thead .caixa-col-item { z-index: 4; }
.caixa-col-dia { min-width: 70px; text-align: right; }
.caixa-col-total { min-width: 90px; text-align: right; font-weight: 600; }
.caixa-num { text-align: right; font-variant-numeric: tabular-nums; }
.caixa-codigo { opacity: 0.55; font-size: 0.82em; }

.caixa-entrada {
    width: 62px;
    padding: 1px 3px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    border: 1px solid transparent;   /* so' aparece no foco: 1300 caixas com
                                        borda viram um tabuleiro ilegivel */
    background: transparent;
    color: inherit;
    border-radius: 4px;
}
.caixa-entrada:focus {
    border-color: var(--accent-cyan, #35d0e0);
    background: rgba(53, 208, 224, 0.08);
    outline: none;
}
.caixa-entrada-gravando { opacity: 0.5; }
.caixa-entrada-erro { border-color: #ff5a5a; background: rgba(255, 90, 90, 0.12); }

.caixa-linha-titulo th {
    text-align: left;
    padding-top: 12px;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.75;
}
.caixa-linha-grupo { font-weight: 600; background: rgba(255, 255, 255, 0.025); }
.caixa-linha-total { font-weight: 700; background: rgba(255, 255, 255, 0.045); }
.caixa-linha-saldo { background: rgba(53, 208, 224, 0.07); font-weight: 600; }
.caixa-linha-saldo-final { background: rgba(53, 208, 224, 0.13); }
.caixa-linha-grupo .caixa-col-item,
.caixa-linha-total .caixa-col-item,
.caixa-linha-saldo .caixa-col-item,
.caixa-linha-titulo th:first-child { background: var(--bg-panel); }
.caixa-item-inativo { opacity: 0.5; }

/* A COLUNA DE HOJE, marcada. Num mes aberto no dia 17, achar a coluna 17 entre
   31 iguais e' a primeira coisa que se faz -- e a mais chata. */
.caixa-hoje { box-shadow: inset 0 0 0 1px rgba(53, 208, 224, 0.35); }

/* A CONFERENCIA -- a linha que da' sentido ao resto. */
.caixa-linha-confere { font-weight: 700; }
.caixa-bate { color: #3ddc84; }
.caixa-nao-bate { color: #ff7a7a; }
.caixa-linha-confere .caixa-nao-bate { background: rgba(255, 90, 90, 0.12); }

.caixa-cabecalho { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.caixa-navegacao { margin-left: auto; display: flex; gap: 6px; }
/* RODADA 145 -- o saldo inicial mora DENTRO do cabecalho agora, e nao numa
   faixa propria: as duas custavam 125px de altura, que numa grade sao cinco
   linhas. Sem margem vertical e com o campo mais estreito -- 160px cabiam
   "1.234.567,89", que nao e' um saldo desta empresa. */
.caixa-saldo-inicial { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; }
.caixa-saldo-inicial input { width: 120px; }
.caixa-cabecalho .titulo-seccao { margin: 0; }
.caixa-novo-mes input[type="number"] { width: 92px; }
.caixa-grupo-titulo { margin-top: 20px; font-size: 1rem; }

/* RODADA 150 -- o botao de desativar o grupo, na mesma linha do titulo.
   `flex` com `gap` em vez de `float`: o botao precisa alinhar pelo meio do
   texto, e a contagem ("3 de 10 ativos") fica entre os dois. O `margin-left:
   auto` empurra o botao para a direita sem precisar de largura fixa -- o
   rotulo troca entre "Desativar todos" e "Reativar todos", que tem tamanhos
   diferentes. */
.caixa-grupo-titulo {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.caixa-form-grupo { margin-left: auto; }
/* MENOR QUE O BOTAO DE LINHA, de proposito: e' um gesto de atacado, e botao
   grande convida clique distraido. O `title` explica, e a confirmacao traz o
   numero. */
.caixa-btn-grupo { font-size: 0.78rem; padding: 3px 10px; opacity: 0.8; }
.caixa-btn-grupo:hover { opacity: 1; }
.caixa-form-item { display: flex; gap: 6px; align-items: center; }
.caixa-campo-codigo { width: 92px; }
.caixa-campo-nome { min-width: 220px; }
.caixa-primeiro {
    padding: 12px 14px;
    border: 1px solid rgba(53, 208, 224, 0.3);
    border-radius: 10px;
    background: rgba(53, 208, 224, 0.05);
}
.caixa-rodape { margin-top: 10px; }

/* ==========================================================================
   RODADA 145 -- A BARRA DA GRADE: a metade do mes, e a tela toda
   ========================================================================== */
.caixa-barra-grade {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin: 4px 0 8px;
}
.caixa-quinzenas { display: flex; gap: 6px; }
.caixa-quinzenas .ativo,
.caixa-btn-expandir.ativo {
    border-color: var(--accent-cyan, #35d0e0);
    background: rgba(53, 208, 224, 0.14);
}
.caixa-btn-expandir { margin-left: auto; }

/* RODADA 145 -- o rodape de ajuda deixa de ser atravessado pelo selo dos 8
   anos, que mora fixo no canto inferior direito.

   `z-index` NAO resolve, e vale saber por que: a regra do selo (49E) e'
   "conteudo com fundo SOLIDO desenha por cima" -- ele ja' esta' ATRAS deste
   paragrafo, so' que o paragrafo e' transparente e os dois aparecem
   sobrepostos. Dar fundo solido ao rodape seria uma tarja onde nao ha'
   caixa nenhuma.

   Entao o texto simplesmente nao chega la': 170px de respiro a' direita, a
   largura do selo mais folga, e o canto volta a ser o "fundo vazio da
   pagina" que o comentario da 49E chama de intencao original. */
.caixa-rodape { padding-right: 170px; }

/* O MENU RECOLHIDO. `display: none` e nao largura zero: o `.sidebar` tem
   `overflow-y: auto` e padding proprios, e encolher a largura deixaria uma
   faixa de 2px com barra de rolagem -- sujeira que ninguem consegue nomear
   ao ver. A classe mora no <body> porque o `.sidebar` e' IRMAO do
   `.area-principal`, e de dentro do conteudo nenhum seletor alcanca um tio. */
body.caixa-expandida .sidebar { display: none; }

@media (max-width: 640px) {
    /* Em celular a coluna de item ocupa metade da tela se ficar com 230px. */
    .caixa-col-item { min-width: 150px; max-width: 150px; }
    /* AQUI o `vh` e' o certo: abaixo de 900px o shell da 117 volta a rolar a
       pagina inteira (`.app-shell { height: auto }`), entao a grade nao tem
       de quem herdar altura e o flex da 145 nao tem o que distribuir. */
    .conteudo-largo { display: block; }
    .caixa-rolagem, .conteudo-largo .caixa-rolagem { height: auto; max-height: 64vh; }
}

/* ==========================================================================
   RODADA 146 -- o botao de excluir item do plano de contas
   ==========================================================================
   VERMELHO SO' NA BORDA, e nao preenchido. O botao fica na mesma linha do
   Desativar, que e' o caminho normal: um bloco vermelho solido ao lado de um
   botao neutro puxa o olho para a acao errada. A cor aqui diz "pare e leia",
   nao "clique aqui".

   O aviso de verdade nao esta' na cor -- esta' na confirmacao, que diz
   quantos lancamentos e quanto dinheiro somem. */
.caixa-btn-excluir {
    border-color: rgba(255, 90, 90, 0.5);
    color: #ff9a9a;
}
.caixa-btn-excluir:hover {
    background: rgba(255, 90, 90, 0.14);
    border-color: #ff7a7a;
}

/* ==========================================================================
   RODADA 146 -- arrastar para reordenar, e gravar sem recarregar
   ========================================================================== */
.caixa-col-alca {
    width: 26px; text-align: center; cursor: grab;
    opacity: 0.45; user-select: none;
}
.caixa-linha-item:hover .caixa-col-alca { opacity: 0.9; }
.caixa-linha-arrastando { opacity: 0.4; }

/* O VERDE SOME SOZINHO (ver o `setTimeout` no acoes.js): rastro permanente em
   60 linhas vira decoracao, e decoracao nao avisa mais nada. A transicao e'
   o que faz o sumico ser percebido como "gravou" e nao como "piscou". */
.caixa-linha-gravada { background: rgba(61, 220, 132, 0.14); }
.caixa-linha-item { transition: background 0.4s ease; }

/* O VERMELHO FICA. Falha de gravacao nao pode desaparecer sozinha: a pessoa
   seguiria editando achando que gravou. */
.caixa-linha-erro { background: rgba(255, 90, 90, 0.16); }
.caixa-ordem-nao-gravou { outline: 2px solid rgba(255, 90, 90, 0.6); }

/* ==========================================================================
   RODADA 147 -- A COR DO LANCAMENTO, o nome editavel na grade, e o aviso
   ==========================================================================
   "opcao de marcar o pagamento como pago, agendado... ficando verde e
    amarelo.. quando verde ele soma no valor real.. quando amarelo.. ele
    mostre na previsao de valor"

   A COR MORA NO <td>, E NAO NO <input>. Pintar o fundo do campo brigaria com
   o destaque de foco do navegador, que e' o que diz onde voce esta' digitando
   -- e numa grade de ~1.300 celulas perder essa pista custa mais do que a cor
   informa.

   FUNDO FRACO, E NAO TARJA. Sao 31 colunas lado a lado: cor saturada em todas
   elas vira um tabuleiro, e um tabuleiro nao destaca nada. A faixa de 3px na
   base e' o que se le' de relance; o fundo e' so' o apoio dela. */
.caixa-pago { background: rgba(61, 220, 132, 0.10); box-shadow: inset 0 -3px 0 rgba(61, 220, 132, 0.55); }
.caixa-agendado { background: rgba(240, 190, 70, 0.12); box-shadow: inset 0 -3px 0 rgba(240, 190, 70, 0.65); }
/* O DIA DE HOJE CONTINUA VISIVEL por cima da cor da situacao: ele e' a unica
   referencia de "onde estou" numa grade de 31 colunas iguais. */
.caixa-celula.caixa-hoje { outline: 1px solid rgba(53, 208, 224, 0.5); outline-offset: -1px; }

/* A legenda do rodape e os selos das linhas de saldo: a mesma cor, em texto,
   para a tela nao depender so' de cor (a pessoa que nao distingue verde de
   amarelo le' a palavra). */
.caixa-legenda { padding: 0 5px; border-radius: 4px; font-weight: 600; }
.caixa-legenda.caixa-pago { color: #3ddc84; box-shadow: none; }
.caixa-legenda.caixa-agendado { color: #f0be46; box-shadow: none; }
.caixa-selo {
    font-size: 0.72em; font-weight: 600; padding: 1px 6px;
    border-radius: 999px; vertical-align: middle; white-space: nowrap;
}
.caixa-selo-pago { background: rgba(61, 220, 132, 0.18); color: #3ddc84; }
.caixa-selo-agendado { background: rgba(240, 190, 70, 0.18); color: #f0be46; }
/* A linha do previsto e' mais discreta que a do realizado DE PROPOSITO: as
   duas tem o mesmo peso visual seria convidar a ler a projecao como fato. */
.caixa-linha-previsto td, .caixa-linha-previsto th { opacity: 0.82; }

/* O NOME DO ITEM, editavel na propria grade (`caixa.gerenciar_itens`).

   EM REPOUSO E' TEXTO, e vira campo so' ao ser clicado -- e isso foi MEDIDO,
   nao escolhido. A primeira versao deixava o `<input>` na celula o tempo
   todo, e a regua de pixel do `clique147.py` acusou DOIS NOMES CORTADOS onde
   a 145 tinha deixado zero: um `<th>` quebra o texto em duas linhas (e' o que
   a 145 conquistou com `white-space: normal`), um `<input>` nao quebra nada,
   so' corta. Com a troca, a coluna em repouso e' exatamente a da 145.

   E SEM MOLDURA ATE' O FOCO: 40 linhas com borda de campo transformariam a
   coluna de nomes num formulario. */
.caixa-nome-texto { cursor: text; border-bottom: 1px dotted transparent; }
.caixa-col-item:hover .caixa-nome-texto {
    border-bottom-color: rgba(255, 255, 255, 0.28);
}
.caixa-nome-item { display: none; }
.caixa-col-item.editando .caixa-nome-texto { display: none; }
.caixa-col-item.editando .caixa-nome-item {
    display: block;
    width: 100%; min-width: 0; border: 1px solid var(--accent-cyan, #35d0e0);
    background: rgba(0, 0, 0, 0.25); color: inherit; font: inherit;
    padding: 0 2px; border-radius: 4px; outline: none;
}

/* O AVISO DE AGENDADO VENCIDO. Nao e' erro (nada quebrou) e nao e' sucesso --
   e' a unica coisa que impede o saldo realizado de ficar errado em silencio,
   entao tem cor propria em vez de pegar emprestada a do alerta de erro. */
.caixa-aviso {
    margin: 6px 0; padding: 8px 12px; border-radius: 8px;
    border: 1px solid rgba(240, 190, 70, 0.45);
    background: rgba(240, 190, 70, 0.10);
    color: #f3d08a;
}
.caixa-form-inline { display: inline-flex; margin: 0; }

/* ==========================================================================
   RODADA 148 -- CONTROLE DE BOLETOS
   ==========================================================================
   A tela e' uma LISTA DE TAREFAS, nao um relatorio: o que esta' atrasado
   precisa saltar, e o resto precisa sair da frente. */
.boleto-atrasado td { background: rgba(255, 90, 90, 0.10); }

/* O SELO DA SITUACAO. Cor E palavra, nunca so' cor -- quem nao distingue
   verde de amarelo le' o texto (a mesma regra da 147). */
.boleto-selo {
    font-size: 0.78em; font-weight: 600; padding: 1px 7px;
    border-radius: 999px; white-space: nowrap;
}
.boleto-a_gerar   { background: rgba(255, 90, 90, 0.16);  color: #ff9a9a; }
.boleto-gerado    { background: rgba(240, 190, 70, 0.18); color: #f0be46; }
.boleto-enviado   { background: rgba(61, 220, 132, 0.18); color: #3ddc84; }
.boleto-cancelado { background: rgba(255, 255, 255, 0.08); color: #9aa4ae; }

.boleto-acoes { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* ANEXAR SEM BOTAO DE ENVIAR: o <input type=file> fica escondido dentro do
   rotulo e o formulario se envia sozinho ao escolher o arquivo. Dois cliques
   (escolher e depois confirmar) numa tela de 20 linhas sao 40 cliques por
   mes para nao informar nada -- escolher o arquivo JA' E' a confirmacao. */
.boleto-form-anexo { display: inline-flex; margin: 0; }
.boleto-rotulo-arquivo { cursor: pointer; display: inline-flex; align-items: center; }
.boleto-rotulo-arquivo input[type="file"] {
    position: absolute; width: 1px; height: 1px; opacity: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* A FICHA. A linha inteira e' o formulario de edicao -- mesma forma do plano
   de contas do caixa: corrige-se onde se le', sem tela intermediaria. */
.boleto-form-ficha, .boleto-linha-form {
    display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 0;
}
.boleto-campo-dia { width: 72px; }
.boleto-campo-valor { width: 110px; }
.boleto-campo-emails { min-width: 240px; flex: 1 1 240px; }

/* ==========================================================================
   RODADA 149 -- EMPRESA | MEU CAIXA PESSOAL
   ==========================================================================
   DUAS ABAS, e nao um `<select>`. O escopo aqui nao e' um filtro: e' de quem
   e' o dinheiro na tela. Um seletor fechado mostra UM rotulo e esconde que
   existe outro lado -- e o estado errado so' aparece quando a pessoa confere
   o numero errado. Aba mostra os dois e marca onde se esta'.

   E A MARCA NAO E' SO' COR: a aba ativa tem peso de fonte e um traco embaixo.
   Quem nao distingue as duas cores precisa ver em que aba esta' -- e esta
   tela decide se o salario que a pessoa esta' lendo e' o dela ou o da folha
   da empresa. */
.caixa-seletor {
    display: inline-flex; gap: 2px; margin: 0 0 10px;
    padding: 3px; border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.caixa-aba {
    padding: 5px 14px; border-radius: 8px;
    font-size: 0.88rem; font-weight: 500; text-decoration: none;
    color: var(--texto-suave, #9aa4b2);
    border-bottom: 2px solid transparent;
    transition: background 0.15s ease, color 0.15s ease;
}
.caixa-aba:hover { background: rgba(255, 255, 255, 0.06); }
.caixa-aba-ativa {
    background: rgba(53, 208, 224, 0.12);
    border-bottom-color: #35d0e0;
    color: #cfe9ee; font-weight: 700;
}

/* O RECADO DO CAIXA PESSOAL. Aparece SO' dentro dele, e diz a unica coisa
   que a pessoa precisa saber antes de digitar o proprio salario: quem mais
   ve' isto. A resposta e' ninguem, e ela tem de estar na tela -- nao num
   manual que ninguem abre no momento em que a duvida existe. */
.caixa-aviso-pessoal { margin: -4px 0 10px; }

/* RODADA 151 -- AS DUAS COLUNAS DE REDE NA LISTA DO INVENTARIO.
   Monoespacada porque IP e nome de maquina sao valores que alguem COPIA da
   tela para colar num terminal, e fonte proporcional torna `1`, `l` e `I`
   indistinguiveis. Largura travada para as duas nao empurrarem "Onde esta'",
   que e' a coluna que mais cresce. */
.inv-col-rede {
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    white-space: nowrap; max-width: 150px; overflow: hidden;
    text-overflow: ellipsis;
}

/* ==========================================================================
   RODADA 154 -- A CONCILIACAO UNIMED MENSAL
   ==========================================================================
   O template do sistema-guias desta tela tem algumas dezenas de `style=`
   inline. Aqui eles nao podem existir: o `style=` deste projeto e' TRAVA em
   zero desde a 83C, porque a CSP passou a ignora-lo -- um `style=` novo nao
   quebra com erro, ele simplesmente nao pinta. Entao o que la' era atributo
   virou estas classes.

   Sao poucas de proposito. A maior parte do layout do original (os
   `display:flex` e os `margin` avulsos espalhados pelo HTML) foi substituida
   pelas classes que esta casa ja' tem -- `form-unidade`, `campo-com-rotulo`,
   `tabela-padrao`, `detalhe-meta`. Reproduzir o visual do guias classe por
   classe daria uma tela que parece de outro sistema dentro deste. */

/* O CHECKBOX de "isto e' uma correcao". Ele deita o rotulo ao lado da caixa,
   ao contrario dos outros campos do formulario, em que o rotulo fica em cima:
   caixa de marcar com rotulo acima deixa a marca longe do texto que ela
   confirma, e o texto aqui e' longo (ele explica o que a correcao preserva). */
.cu-correcao {
    flex-direction: row;
    align-items: flex-start;
    gap: 9px;
    margin: 2px 0 6px;
}
/* A LARGURA EXPLICITA NAO E' REDUNDANTE, e a regua de pixel da 154 achou isto
   depois de a suite passar: os campos deste formulario herdam `width: 100%`,
   e a caixa de marcar herdava junto -- 720px de caixa empurrando o texto para
   fora do formulario, que entao quebrava em uma palavra por linha. O
   `flex: 0 0 auto` sozinho nao resolve: ele respeita a largura, e a largura
   era 100%.

   Layout quebrado nao tem suite, tem print. */
.cu-correcao input[type="checkbox"] {
    width: 15px;
    min-width: 15px;
    height: 15px;
    margin: 2px 0 0;
    flex: 0 0 auto;
}
/* E o texto e' uma FRASE, nao um rotulo de campo. `rotulo-campo-pequeno` e'
   maiusculo e espacado -- certo para "MES DE REFERENCIA", ilegivel para duas
   linhas explicando o que a correcao preserva. */
.cu-correcao-texto {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

/* A BARRA DE PROGRESSO DO ENVIO.
   Ela e' real ate' 100% (bytes enviados sobre o total, pelo evento nativo) e
   INDETERMINADA depois disso, enquanto o servidor cruza os arquivos. As duas
   fases precisam ser visualmente diferentes, senao a animacao parada no fim
   parece travamento e a animacao continua parece progresso que nao existe. */
.cu-progresso { margin: 10px 0 18px; max-width: 520px; }
.cu-progresso-linha {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.78rem;
    color: var(--texto-suave, #9aa4b2);
    margin-bottom: 5px;
}
.cu-progresso-trilha {
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.cu-progresso-barra {
    height: 100%;
    width: 0;
    border-radius: 5px;
    background: #35d0e0;
    transition: width 0.15s linear;
}
/* A fase indeterminada anda de um lado para o outro em vez de crescer. O
   `transition` sai: com ele, a animacao e a transicao brigam pela largura e o
   resultado e' um tremor. */
.cu-progresso-indeterminado {
    width: 40%;
    transition: none;
    animation: cu-vai-e-vem 1.1s ease-in-out infinite;
}
@keyframes cu-vai-e-vem {
    0%   { transform: translateX(-120%); }
    100% { transform: translateX(350%); }
}
@media (prefers-reduced-motion: reduce) {
    /* Quem pediu menos movimento recebe uma barra cheia e translucida em vez
       da animacao -- o estado "estou trabalhando" continua legivel, e e' o
       unico recado que esta fase tem para dar. */
    .cu-progresso-indeterminado {
        width: 100%;
        animation: none;
        opacity: 0.45;
    }
}

/* A TABELA DE IMPACTO da tela de exclusao. Duas colunas, rotulo e numero, e o
   numero alinhado a' direita: a coluna existe para ser LIDA DE CIMA A BAIXO
   (que trabalho manual se perde), e numero desalinhado em coluna curta obriga
   o olho a procurar cada valor. */
.cu-tabela-impacto { max-width: 620px; }
.cu-tabela-impacto td:last-child { text-align: right; white-space: nowrap; }

/* OS DOIS <details> DESTA TELA -- o "Como funciona" e o "Arquivadas".

   Eles NAO reusam `.detalhes-editar-departamento`, que e' `inline-block`: essa
   classe nasceu para um "+ cadastrar" curto dentro de uma barra, e aqui o
   resultado foi o alerta de sucesso e o link de explicacao dividindo a mesma
   linha, como se fossem a mesma coisa. Foi o print que mostrou -- a regua de
   pixel conferia transbordo e largura, e dois elementos lado a lado nao sao
   nem uma coisa nem outra.

   O estilo do `summary` e' o mesmo da irma, de proposito: o que muda e' o
   fluxo, nao a aparencia do gatilho. */
.cu-explicacao { display: block; margin: 12px 0 18px; }
.cu-explicacao > summary {
    cursor: pointer;
    color: var(--accent-cyan);
    font-size: 12px;
    list-style: none;
    display: inline-block;
}
.cu-explicacao > summary::-webkit-details-marker { display: none; }
.cu-explicacao > summary::marker { content: ""; }
/* Aberto, o conteudo ganha um recuo e uma guia a' esquerda: sem isso, o texto
   explicativo encosta na margem igual ao resto da tela e nao se le' onde o
   painel comeca e termina. */
.cu-explicacao[open] > summary { margin-bottom: 8px; }
.cu-explicacao[open] {
    padding-left: 12px;
    border-left: 2px solid rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   RODADA 155 -- A TELA DE CONSOLIDAR OS CSVs DA UNIMED
   ==========================================================================
   Os quatro numeros do resumo e a tabela de arquivos. No guias isto e' uma
   dezena de `style=`; aqui nao pode ser nenhum (trava em zero desde a 83C).

   Os cartoes existem porque o resumo tem UMA funcao: a pessoa confere quatro
   numeros e um rotulo por arquivo antes de baixar. Numero que se confere
   precisa ser lido de relance, e nao garimpado num paragrafo. */
.cu-csv-numeros {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 12px 0 18px;
}
.cu-csv-stat {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    min-width: 132px;
    padding: 10px 16px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
}
.cu-csv-stat-valor {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
}
.cu-csv-stat-rotulo {
    font-size: 0.7rem;
    color: var(--texto-suave, #9aa4b2);
}

/* O nome do arquivo quebra, e o numero nao. Nome de CSV do portal da Unimed
   passa de quarenta caracteres com frequencia; se ele nao quebrar, empurra as
   quatro colunas de numero para fora da tela -- e sao elas que a pessoa veio
   conferir. */
.cu-csv-nome { word-break: break-word; max-width: 420px; }
.cu-csv-numero { text-align: right; white-space: nowrap; }

.cu-csv-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin: 18px 0 10px;
}

/* ===========================================================================
   RODADA 156 -- A CONFERENCIA DA CONCILIACAO UNIMED
   ===========================================================================
   As 425 linhas que no guias moram num `<style>` dentro do template. Aqui
   elas vem para a folha, por duas razoes: a CSP desta casa nao aceita estilo
   inline sem nonce (83C), e um `<style>` de 425 linhas dentro de um template
   de 1.600 e' o lugar onde ninguem procura.

   AS VARIAVEIS MUDARAM DE NOME, e isso nao e' escolha -- as do guias nao
   existem aqui. O mapa, uma vez, para quem comparar os dois arquivos:

       --border-steel-light  ->  --border-steel
       --accent-blue         ->  --accent
       --accent-blue-glow    ->  --accent-soft
       --text-bright         ->  --text-primary
       --text-principal      ->  --text-primary
       --text-dim            ->  --text-secondary
       --text-muted          ->  --text-secondary
       --success-bg          ->  rgba(52, 211, 153, .14)   (nao existe aqui)
       --warning-bg          ->  rgba(251, 191, 36, .14)   (idem)

   Todo o resto -- as medidas, as cores literais, as regras -- vem igual.
   =========================================================================== */

/* A TELA INTEIRA, SEM SOBRA A' DIREITA. Pedido do cliente, 19/08: "aumente a
   planilha para ocupar todo espaco... encoste ela no sidebar... so' nessa
   tela". O `:has()` escopa a mudanca a esta tela -- nenhuma outra pagina do
   sistema e' afetada. */
.conteudo:has(.cu-tabela-conferencia) { max-width: none; width: 100%; }
.painel:has(> .cu-modo-toggle) { padding: 16px 8px 20px 8px; }
.painel:has(> .cu-modo-toggle) .cu-modo-toggle { padding: 0 8px; }

.cu-tabela-conferencia { width: 100%; table-layout: fixed; font-size: 12.5px; }
/* TODA CELULA QUEBRA LINHA, e nao corta com reticencias. Medido no guias com
   a tela em 1920px: 9 dos 21 cabecalhos apareciam cortados ("Data ...",
   "Carteiri...", "Cod...", "Pago ...", "Total ...", "Difer..."). O valor
   completo so' saia no tooltip -- ou seja, passando o mouse coluna por
   coluna. Agora a altura da linha cresce o quanto precisar. */
.cu-tabela-conferencia th,
.cu-tabela-conferencia td {
    white-space: normal; overflow: visible; text-overflow: clip;
    word-break: break-word; padding: 3px 8px;
}
.cu-tabela-conferencia td { cursor: text; user-select: text; }
.cu-tabela-conferencia td.cu-col-clicavel:hover { background: var(--bg-panel-raised); }
/* A pilula de status estava VAZANDO por cima da coluna vizinha: o `<td>` ja'
   tinha `white-space: normal`, mas a `.badge` global tem `nowrap`, que vence
   a regra do pai. Aqui ela e' sobrescrita dentro desta tabela so'. */
.cu-tabela-conferencia td:has(.badge) { overflow: visible; text-overflow: clip; white-space: normal; }
.cu-tabela-conferencia .badge {
    white-space: normal; line-height: 1.25; text-align: center;
    padding: 2px 7px; font-size: 10px;
}
.cu-tabela-conferencia td.cu-col-obs-icone { text-align: center; cursor: pointer; }
.cu-tabela-conferencia td.cu-col-status-bolinha { text-align: center; }
.cu-tabela-conferencia td.cu-col-nome-completo {
    white-space: normal; overflow: visible; text-overflow: clip; word-break: break-word;
}
/* A linha de dado ganha uma borda fina embaixo. Sem ela, uma linha "normal"
   (sem conferida nem sinalizada) nao tinha marca nenhuma entre ela e a
   proxima -- com o texto quebrando em varias linhas por celula, seguir qual
   valor e' de qual linha vira trabalho. Nao vai no `<thead>` (ja' tem peso
   visual proprio) nem na ultima. */
.cu-tabela-conferencia tbody tr td { border-bottom: 1px solid var(--border-steel); }
.cu-tabela-conferencia tbody tr:last-child td { border-bottom: none; }

/* O MODO SINTETICO esconde Custo, Filme e Material -- as tres parcelas de
   "Pago Clinica", que continua visivel com a soma.
   A PRIMEIRA VERSAO USAVA `display:none` E ESTAVA ERRADA: com
   `table-layout: fixed` + `<colgroup>`, sumir com tres celulas descasa TODA
   celula seguinte da linha do `<col>` dela, e sobrava ate' 15% da tabela em
   branco no fim -- que e' exatamente o "nao usa a tela toda" relatado. Agora
   a celula CONTINUA existindo, so' com largura zero (vinda do `<col>`) e
   padding zerado; e precisa de `overflow:hidden` + `nowrap` enquanto
   escondida, senao o valor tenta quebrar linha e vaza para fora. */
.cu-tabela-conferencia.cu-tabela-sintetica td.cu-col-composicao,
.cu-tabela-conferencia.cu-tabela-sintetica th.cu-col-composicao {
    padding-left: 0; padding-right: 0;
    overflow: hidden; white-space: nowrap; text-overflow: clip;
}
.cu-th-ordenavel { color: inherit; text-decoration: none; }
.cu-th-legenda-icone {
    display: inline-block; margin-left: 3px; font-size: 11px;
    color: var(--text-secondary); cursor: help; vertical-align: middle;
}
.cu-th-legenda-icone:hover { color: var(--accent); }

.cu-modo-toggle { display: flex; gap: 6px; align-items: center; margin: 0 0 10px; }
.cu-modo-btn {
    padding: 5px 14px; border-radius: 100px; font-size: 11.5px; font-weight: 600;
    border: 1px solid var(--border-steel); background: var(--bg-panel-raised);
    color: var(--text-secondary); cursor: pointer;
}
.cu-modo-btn:hover { border-color: var(--accent); }
.cu-modo-btn.cu-modo-ativo {
    border-color: var(--accent); color: var(--accent); background: var(--accent-soft);
}

/* O POPUP DE ACOES DA LINHA. Fica FORA da tabela de proposito -- dentro de
   um `<td>` ele seria cortado, e `position: fixed` nao salva. */
.cu-menu-acoes {
    display: none; position: fixed; z-index: 500; min-width: 215px;
    background: var(--bg-panel-raised); border: 1px solid var(--border-steel);
    border-radius: 8px; box-shadow: 0 4px 18px rgba(0, 0, 0, .35); padding: 10px;
}
.cu-menu-acoes.cu-menu-aberto { display: block; }
.cu-linha-menu-aberto { outline: 1.5px solid var(--accent); outline-offset: -1.5px; }
.cu-menu-secao {
    margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-steel);
}
.cu-menu-aviso { font-size: 10.5px; color: var(--text-secondary); }
.cu-menu-vinculo { font-size: 11px; color: var(--text-primary); }

/* Sinalizada (ambar) vence conferida (verde): o amarelo e' um pedido de
   atencao, e pedido de atencao nao pode ficar escondido atras de um "ja'
   olhei". */
.cu-linha-conferida { background: rgba(52, 211, 153, .08); }
.cu-linha-conferida:hover { background: rgba(52, 211, 153, .14); }
.cu-linha-sinalizada { background: rgba(251, 191, 36, .14); box-shadow: inset 3px 0 0 var(--warning); }
.cu-linha-sinalizada:hover { background: rgba(251, 191, 36, .20); }

/* O select e o botao EMPILHADOS, e nao lado a lado: frases como "Tirar marca
   (Erro Operacional Nao Pago Unimed)" ficavam cortadas antes mesmo de abrir
   o dropdown. */
.cu-acoes-linha { display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
.cu-acoes-linha form { display: inline; margin: 0; }
.cu-select-acao {
    height: 26px; font-size: 11px; border-radius: 5px; width: 100%;
    background: var(--bg-panel-raised); color: var(--text-primary);
    border: 1px solid var(--border-steel);
    /* O padding e' menor que o global de `input, select, textarea` (10px
       12px) de proposito: com `box-sizing: border-box` e 26px de altura,
       aquele padding deixa ~4px uteis para o texto -- o que o cliente viu
       como "o texto nao aparece no quadro de selecao". */
    padding: 2px 8px;
}
.cu-btn-aplicar-acao {
    height: 24px; padding: 0 8px; border-radius: 5px; font-size: 10.5px;
    font-weight: 700; border: 1.5px solid var(--accent); background: transparent;
    color: var(--accent); cursor: pointer; white-space: nowrap; width: 100%;
}
.cu-btn-aplicar-acao:hover { background: var(--accent-soft); }

/* OS TOTALIZADORES CLICAVEIS do topo. */
/* RODADA 160 -- A GRADE DOS TOTALIZADORES VIROU `grid`, E NAO E' GOSTO.
   Pedido dele em 10/10: "ajuste os quadros botoes.. para que fique legal".
   Medido antes de mexer, na janela dele (1658x830): 26 cartoes de 150 a
   280px de largura, distribuidos em 6 linhas de 7-6-1-4-6-2, com 991px de
   buraco na ultima. O `flex-wrap` dimensiona cada cartao pelo TEXTO DELE,
   entao "Anestesia" fica estreito e "Erro Operacional Nao Pago Unimed" fica
   quase o dobro -- e a linha quebra onde calhar.
   Com `grid` e colunas iguais, a largura deixa de depender do rotulo: sao
   colunas de no minimo 188px que esticam para preencher a faixa, sempre
   alinhadas em coluna e em linha. 185 nao e' numero redondo por acaso -- e'
   o que faz caber SETE colunas nos 1370px uteis da janela dele sem corte
   (7 x 187px + 6 x 10px de respiro), e o que ainda deixa duas colunas numa
   tela de 480px. */
.cu-totalizadores {
    display: grid; gap: 10px; margin-bottom: 14px;
    grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
    align-items: stretch;
}
.cu-totalizador {
    display: flex; flex-direction: column; gap: 2px; min-width: 0;
    padding: 12px 14px; border-radius: 10px; text-decoration: none;
    border: 1.5px solid var(--border-steel); background: var(--bg-panel-raised);
    transition: border-color .15s, transform .15s;
}
.cu-totalizador:hover { transform: translateY(-1px); }
.cu-totalizador-ativo { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
/* O ROTULO PODE QUEBRAR EM DUAS LINHAS, e a altura minima garante que um
   cartao de rotulo curto ("Anestesia") fique do mesmo tamanho de um de
   rotulo longo ("Erro Operacional Nao Pago Unimed") -- sem isso a grade
   alinha as colunas e desalinha os numeros, que e' pior que o estado
   anterior. `align-items: flex-start` porque com duas linhas de texto a
   bolinha tem de ficar na PRIMEIRA, e nao centralizada no bloco. */
/* O ROTULO E' BLOCO, E NAO FLEX -- e isto foi medido, nao escolhido. Como
   flex, a bolinha e o texto sao duas CAIXAS: num rotulo de duas linhas
   ("Pacote sem correspondencia", "Erro Operacional Nao Pago Unimed") o texto
   quebrava para baixo da bolinha, que ficava sozinha numa linha so' dela --
   seis cartoes assim na janela dele. Como bloco, a bolinha e' parte do fluxo
   do texto: ela fica na primeira linha e o resto corre ao lado dela.
   A altura minima de 2.6em (duas linhas) iguala o cartao de rotulo curto ao
   de rotulo longo; sem ela a grade alinha as colunas e desalinha os numeros,
   que e' pior que o estado anterior. */
.cu-totalizador-rotulo {
    font-size: 11px; text-transform: uppercase; letter-spacing: .3px;
    line-height: 1.3; min-height: 2.6em;
    color: var(--text-secondary); display: block;
}
.cu-totalizador-rotulo .cu-bolinha {
    margin-right: 6px; vertical-align: baseline;
}
/* A nota do Porte Anestesico ("(informativo)") e' um segundo pedaco dentro do
   mesmo rotulo: em bloco ela flui junto, sem precisar de caixa propria. */
.cu-totalizador-rotulo .cu-totalizador-nota { margin-left: 4px; }
.cu-totalizador-numero {
    font-size: 22px; font-weight: 700; color: var(--text-primary);
    line-height: 1.1;
}
/* O rodape do cartao desce para a base: com o rotulo ocupando uma ou duas
   linhas, alinhar o valor pelo fluxo deixaria os de rotulo curto com o
   numero no meio do nada. `margin-top: auto` encosta os tres rodapes na
   mesma altura, em toda a linha da grade. */
.cu-totalizador-valor {
    font-size: 12px; color: var(--text-secondary); margin-top: auto;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* O SEPARADOR SAIU DA CONFERENCIA na 160 (ver o comentario no template). A
   classe fica porque ela ainda e' a unica forma de separar grupos numa faixa
   `flex` -- e a tela que precisar disso de novo nao vai ter de reinventa-la.
   Dentro de um `grid` ela nao serve: ocuparia uma celula. */
.cu-totalizador-separador {
    width: 1px; align-self: stretch; background: var(--border-steel); margin: 2px;
}
.cu-totalizador-nota { font-size: 9px; font-weight: 400; opacity: .75; }

/* A BOLINHA. O anel branco de 1px existe para a cor escura -- a preta da
   Glosa, a marrom da Guia Nao Faturada -- nao sumir contra o fundo escuro. */
.cu-bolinha {
    width: 10px; height: 10px; border-radius: 50%; display: inline-block;
    flex-shrink: 0; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25);
}
.cu-bolinha-pequena { width: 8px; height: 8px; }
/* UMA CLASSE POR COR, e nao `style="background:..."` em cada uma das 20
   bolinhas: `style=` tem teto ZERO nesta casa (83C). A cor de cada status e
   de cada marcador e' a mesma de `CORES_TAGS_SISTEMA` -- tag e status
   brigando visualmente para o mesmo caso seria uma tela que se contradiz. */
.cu-cor-ok { background: var(--success); }
.cu-cor-nao-pago { background: #f472b6; }
.cu-cor-pago-a-menor { background: var(--danger); }
.cu-cor-pago-a-maior { background: #7cb8ff; }
.cu-cor-sem-producao { background: #8b93a1; }
.cu-cor-glosa { background: #0a0a0a; }
.cu-cor-guia-nao-localizada { background: #fb923c; }
.cu-cor-pacote-sem-correspondencia { background: #e08a3c; }
.cu-cor-porte { background: #c084fc; }
.cu-cor-anestesia { background: #fb923c; }
.cu-cor-exportado { background: var(--accent-cyan); }
.cu-cor-nunca-exportado { background: #8b93a1; }
.cu-cor-regra-maior { background: #60a5fa; }
.cu-cor-regra-menor { background: #f87171; }
.cu-cor-reenviada { background: #3ad6ff; }
.cu-cor-pago-proximo-mes { background: #2dd4bf; }
.cu-cor-justificada { background: #a78bfa; }
.cu-cor-erro-operacional-pago,
.cu-cor-erro-operacional-nao-pago { background: #0a0a0a; border: 2px solid #f87171; }
.cu-cor-pagamento-indevido { background: #ea580c; }
.cu-cor-guia-nao-executada { background: #475569; }
.cu-cor-exame-nao-pago { background: #f472b6; }
.cu-cor-pacote-nao-cobrado { background: #eab308; }
.cu-cor-erro-plano { background: #2563eb; }
.cu-cor-arquivo-nao-importado { background: #c026d3; }
.cu-cor-guia-nao-faturada { background: #78350f; }
.cu-cor-nao-pago-parcial { background: #6366f1; }

/* O SELO que explica por que a linha saiu do totalizador. */
.cu-selo-linha {
    font-size: 9.5px; padding: 1px 5px; display: block; margin-top: 3px;
    white-space: normal;
}
/* A ETIQUETA do marcador, na coluna "Justif. / marca". Uma classe por
   marcador, mesma razao das bolinhas. */
.cu-marca { font-size: 9.5px; padding: 2px 6px; }
.cu-marca-reenviada { background: rgba(58, 214, 255, .14); color: #3ad6ff; }
.cu-marca-pago-proximo-mes { background: rgba(45, 212, 191, .14); color: #2dd4bf; }
.cu-marca-justificada { background: rgba(167, 139, 250, .14); color: #a78bfa; }
.cu-marca-erro-operacional-pago,
.cu-marca-erro-operacional-nao-pago { background: #0a0a0a; color: #f87171; border: 1px solid #f87171; }
.cu-marca-pagamento-indevido { background: rgba(234, 88, 12, .14); color: #ea580c; }
.cu-marca-guia-nao-executada { background: #0a0a0a; color: #94a3b8; border: 1px solid #94a3b8; }
.cu-marca-exame-nao-pago { background: rgba(244, 114, 182, .16); color: #f472b6; }
.cu-marca-pacote-nao-cobrado { background: rgba(234, 179, 8, .16); color: #eab308; }
.cu-marca-erro-plano { background: rgba(37, 99, 235, .16); color: #2563eb; }
.cu-marca-arquivo-nao-importado { background: rgba(192, 38, 211, .16); color: #c026d3; }
.cu-marca-guia-nao-faturada { background: rgba(120, 53, 15, .20); color: #b45309; }
.cu-marca-nao-pago-parcial { background: rgba(99, 102, 241, .16); color: #6366f1; }

/* A LEGENDA clicavel acima da tabela. */
.cu-legenda { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
.cu-legenda-titulo {
    font-size: 11px; text-transform: uppercase; letter-spacing: .4px;
    color: var(--text-secondary); margin-right: 4px;
}
.cu-legenda-item {
    display: flex; align-items: center; gap: 6px; font-size: 12px;
    color: var(--text-secondary); text-decoration: none; padding: 4px 9px;
    border-radius: 100px; cursor: pointer;
    transition: background-color .15s, color .15s;
}
.cu-legenda-item:hover { background: var(--bg-panel-raised); color: var(--text-primary); }
.cu-legenda-ativo {
    background: var(--bg-panel-raised); color: var(--text-primary) !important;
    font-weight: 700;
}
.cu-legenda-divisor { height: 1px; background: var(--border-steel); margin: 10px 0; }

/* AS PILULAS DE FILTRO. A cor so' aparece quando a caixa esta' marcada --
   `:has(input:checked)`, que e' o que permite a pilula inteira ser o rotulo
   da caixa e o `<input>` ficar escondido. */
.cu-filtro-pills { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* RODADA 160 -- A PILL GANHOU FUNDO. Ela era so' borda sobre transparente, e
   o selo decorativo de 8 anos (fixo no canto, z-index 0) aparecia POR DENTRO
   dela: na janela dele, metade das pills de status ficava com o lobo no meio
   do texto. Fundo solido resolve sem mexer no selo, que e' global -- e a
   leitura melhora de qualquer jeito. A regra da pill MARCADA vem depois e
   continua vencendo. */
.cu-filtro-pill {
    display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px;
    border-radius: 100px; font-size: 12px; font-weight: 600;
    border: 1.5px solid var(--border-steel); color: var(--text-secondary);
    background: var(--bg-panel-raised);
    cursor: pointer; transition: all .15s; user-select: none;
}
.cu-filtro-pill:hover { border-color: var(--text-secondary); }
.cu-filtro-pill input { display: none; }
.cu-filtro-pill-success:has(input:checked) { background: var(--success); border-color: var(--success); color: #04231a; }
.cu-filtro-pill-warning:has(input:checked) { background: var(--warning); border-color: var(--warning); color: #3a2a00; }
.cu-filtro-pill-danger:has(input:checked) { background: var(--danger); border-color: var(--danger); color: #3a0a0a; }
.cu-filtro-pill-blue:has(input:checked) { background: var(--accent); border-color: var(--accent); color: #fff; }
.cu-filtro-pill-neutro:has(input:checked) { background: #8b93a1; border-color: #8b93a1; color: #1a1d22; }
/* O nome da classe diz "roxo" e o efeito e' PRETO. A cor da Glosa trocou de
   roxo para preto num pedido do cliente, e o nome ficou para nao precisar
   cacar a string em todo lugar que ja' a referencia -- registrado aqui
   porque nome que mente e' pior que nome feio. */
.cu-filtro-pill-roxo:has(input:checked) { background: #d1d5db; border-color: #d1d5db; color: #0a0a0a; }
.cu-filtro-pill-laranja:has(input:checked) { background: #fb923c; border-color: #fb923c; color: #2b1400; }
.cu-filtro-pill-rosa:has(input:checked) { background: #f472b6; border-color: #f472b6; color: #3a0621; }
.cu-filtro-pill-erro-operacional:has(input:checked) { background: #0a0a0a; border-color: #f87171; color: #f87171; }
.cu-filtro-pill-pagamento-indevido:has(input:checked) { background: #ea580c; border-color: #ea580c; color: #fff7ed; }
.cu-filtro-pill-guia-nao-executada:has(input:checked) { background: #475569; border-color: #475569; color: #f1f5f9; }
.cu-filtro-pill-exame-nao-pago:has(input:checked) { background: #f472b6; border-color: #f472b6; color: #3a0621; }
.cu-filtro-pill-pacote-nao-cobrado:has(input:checked) { background: #eab308; border-color: #eab308; color: #241c00; }
.cu-filtro-pill-erro-plano:has(input:checked) { background: #2563eb; border-color: #2563eb; color: #eff6ff; }
.cu-filtro-pill-arquivo-nao-importado:has(input:checked) { background: #c026d3; border-color: #c026d3; color: #fdf4ff; }
.cu-filtro-pill-guia-nao-faturada:has(input:checked) { background: #78350f; border-color: #78350f; color: #fef3c7; }
.cu-filtro-pill-nao-pago-parcial:has(input:checked) { background: #6366f1; border-color: #6366f1; color: #eef2ff; }

/* O resto da tela: o cabecalho, a conta que explica a diferenca, a barra de
   paginacao e a celula de diferenca colorida. */
.cu-topo-acoes { display: flex; gap: 10px; flex-wrap: wrap; }
.cu-explica-conta { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.cu-paginacao {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 14px; font-size: 12.5px; color: var(--text-secondary);
}
.cu-paginacao-botoes { display: flex; gap: 10px; }
.cu-dif { font-weight: 700; }
.cu-dif-negativa { color: var(--danger); }
.cu-dif-positiva { color: var(--success); }
.cu-tag-travada {
    display: inline-flex; align-items: center; gap: 4px; font-size: 11px;
    color: var(--text-primary);
}
.cu-form-tag-nova { display: flex; gap: 8px; align-items: center; margin-top: 10px;
    padding-top: 10px; border-top: 1px solid var(--border-steel); }
.cu-vazio { text-align: center; color: var(--text-secondary); }

/* A CAIXA DE TEXTO do modal `pedirTexto` (base.html). Fica aqui, e nao numa
   secao propria, porque nasceu com esta rodada -- mas e' da casa, nao do
   modulo: a proxima tela que precisar pedir um texto usa a mesma. */
.campo-pedir-texto { width: 100%; margin-bottom: 10px; resize: vertical; }
.cu-acoes-tag { display: flex; gap: 8px; align-items: center; }
.cu-form-competencia { display: flex; gap: 10px; align-items: center; }
.cu-campo-busca { min-width: 260px; flex: 2; }
.cu-campo-status { margin-top: 12px; }
.cu-campo-tag { width: 180px; }
.cu-periodo { display: flex; gap: 6px; align-items: center; }
.cu-periodo-ate { color: var(--text-secondary); font-size: 12px; }
.cu-mais-filtros { margin-top: 12px; border-top: 1px solid var(--border-steel); padding-top: 10px; }
.cu-painel-legenda { padding: 12px 16px; }
.cu-input-tag-nome { width: 160px; }
.cu-input-cor { width: 44px; padding: 2px; border-radius: 6px; }
/* O aviso de "campo obrigatorio" DENTRO do modal de pedir texto. Classe
   propria, e nao a `.alerta-erro` da casa, por um motivo medido: o modal mora
   no `base.html`, entao a classe dele aparece em TODA pagina -- e a suite 138
   confere que a tela de importacao do inventario NAO tem `alerta-erro` quando
   o codigo de erro do endereco e' desconhecido. Reusar a classe fazia aquela
   regua reprovar uma tela que estava certa. */
.aviso-pedir-texto {
    padding: 8px 12px; border-radius: 6px; font-size: 13px;
    background: rgba(248, 113, 113, .1); border: 1px solid var(--danger);
    color: var(--danger);
}

/* ==========================================================================
   RODADA 157 -- AS DUAS TELAS DE REVISAO EM LOTE DA CONCILIACAO UNIMED
   ==========================================================================
   Pacotes mal atribuidos e pacotes explicados. As duas tem a mesma forma: um
   quadro que explica o que a tela faz, uma barra com o contador e o botao, e
   uma tabela de pares com o valor de hoje e o proposto lado a lado.

   No guias estas duas telas levam 23 `style=` inline, que a CSP desta casa
   ignora em silencio (teto zero da 83C) -- e o silencio e' o problema: a tela
   subiria sem erro nenhum, com a tabela de numeros alinhada a' esquerda e o
   contador do tamanho do texto normal. As classes abaixo sao esses 23.    */
.cu-painel-explica {
    margin-bottom: 16px; font-size: 12.5px;
    color: var(--text-secondary); line-height: 1.6;
}
.cu-barra-lote {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 10px; margin-bottom: 14px;
}
.cu-barra-lote-contador { font-size: 13px; color: var(--text-secondary); }
/* O botao da barra nasce `disabled`: em zero marcados ele nao tem o que
   aplicar, e um botao que responde "nada selecionado" depois do clique e' um
   clique jogado fora. `margin-top: 0` porque `.btn-acao` traz margem de cima
   para quando ele fecha um formulario, e aqui ele esta' numa barra. */
.cu-barra-lote .btn-acao { margin-top: 0; }
.cu-num { text-align: right; font-variant-numeric: tabular-nums; }
/* A coluna proposta e' a que a pessoa confere: ela vem em negrito no guias, e
   aqui tambem -- o par "atual / proposto" lado a lado so' funciona se o olho
   souber qual dos dois e' o depois. */
.cu-num-proposto {
    text-align: right; font-variant-numeric: tabular-nums; font-weight: 700;
}
.cu-sub-descricao {
    display: block; color: var(--text-secondary); font-size: 11.5px;
}
.cu-col-check { width: 34px; text-align: center; }

/* ==========================================================================
   RODADA 158 -- O PAINEL E AS DUAS TELAS DE CONFIGURAÇÃO
   ==========================================================================
   O "Painel de gráficos" do guias não tem gráfico: são barras em HTML, com
   rótulo à esquerda e valor à direita. Conferido antes de portar -- zero
   `<canvas>` e zero Chart.js no template dele -- e portado assim de
   propósito: cada linha de barra carrega um link "ver →" que abre a
   Conferência já filtrada por aquele status, e num gráfico de canvas esse
   link não existe. É ele que transforma o número em trabalho.

   AS LARGURAS SÃO DADO, e dado de requisição não cabe em classe. Quem
   escreve a largura é o pintor do `acoes.js` (83B), lendo `data-largura`; a
   cor variável de cada status vem por `data-cor`, que o mesmo pintor
   transforma em `--bw-cor`. É por isso que `.cu-barra-colorida` não tem cor
   própria: ela a recebe.

   POR QUE NÃO REUSEI `.barra-relatorio-*` (dos Relatórios de Chamados):
   aquela é uma barra de progresso de UMA cor, com gradiente fixo e rótulo de
   130px. Aqui são três formas diferentes -- a barra EMPILHADA de duas partes
   (honorário × clínica), a barra COLORIDA por status, e o par de barras
   finas por unidade --, e três larguras de rótulo. Reusar significaria
   sobrescrever a cor, a altura e a grade da classe da casa em todos os
   usos, que é a mesma coisa que uma classe nova com um nome enganoso. O
   progresso da conferência, que É uma barra de progresso de uma cor, usa a
   mesma forma das outras daqui para a coluna de rótulo bater com os blocos
   vizinhos.                                                                */

/* --- os oito cartões ---------------------------------------------------- */
.cu-kpis {
    display: grid; gap: 14px; margin-bottom: 16px;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.cu-kpi { padding: 16px 18px; }
.cu-kpi-rotulo {
    margin: 0 0 6px; font-size: 11px; text-transform: uppercase;
    letter-spacing: .4px; color: var(--text-secondary);
}
.cu-kpi-valor {
    margin: 0; font-size: 22px; font-weight: 700; color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.cu-kpi-sufixo { font-size: 13px; font-weight: 400; color: var(--text-secondary); }
.cu-kpi-nota {
    margin: 6px 0 0; font-size: 10.5px; line-height: 1.5;
    color: var(--text-secondary);
}
/* Os quatro cartões do que SAIU da conta levam uma faixa na borda esquerda,
   da cor do próprio caso -- é o que separa, de longe, "a conta" do "fora da
   conta". As cores vêm do guias. */
.cu-kpi-fora { border-left-width: 3px; border-left-style: solid; }
.cu-kpi-fora-arquivo { border-left-color: #c026d3; }
.cu-kpi-fora-nao-faturada { border-left-color: #78350f; }
.cu-kpi-fora-pacote { border-left-color: #e08a3c; }
.cu-kpi-fora-porte { border-left-color: var(--text-secondary); }
.cu-valor-arquivo { color: #c026d3; }
.cu-valor-nao-faturada { color: #b45309; }
.cu-valor-pacote { color: #e08a3c; }
.cu-valor-porte { color: var(--text-secondary); }

/* --- as barras ---------------------------------------------------------- */
.cu-bloco-painel { margin-bottom: 16px; }
.cu-barra-fundo {
    display: flex; height: 22px; overflow: hidden; border-radius: 5px;
    background: var(--bg-panel-raised);
}
.cu-barra-alta { height: 28px; }
.cu-barra-media { height: 16px; }
.cu-barra-fina { height: 14px; }
.cu-barra-fina + .cu-barra-fina { margin-top: 4px; }
.cu-barra-segmento { height: 100%; }
/* Sem cor própria DE PROPÓSITO: ela chega em `--bw-cor`, do `data-cor`. A
   neutra do fallback é a mesma que o pintor usa quando o valor não é um
   hexadecimal de seis dígitos -- barra cinza legível em vez de invisível. */
.cu-barra-colorida { background: var(--bw-cor, #94a3b8); }
.cu-cor-honorario { background: var(--accent-cyan); }
.cu-cor-clinica { background: var(--accent); }
.cu-cor-produzido { background: var(--accent); }
.cu-cor-pago { background: var(--accent-cyan); }
.cu-cor-menor { background: var(--danger); }
.cu-cor-conferido { background: var(--success); }

.cu-linha-barra {
    display: grid; gap: 10px; align-items: center; margin-bottom: 10px;
    font-size: 12.5px;
}
.cu-linha-barra-status { grid-template-columns: 220px 1fr auto; }
.cu-linha-barra-unidade { grid-template-columns: 140px 1fr auto; }
.cu-linha-barra-faixa { grid-template-columns: 150px 1fr auto; }
.cu-linha-barra-medico { grid-template-columns: 200px 1fr auto; }
.cu-linha-barra-valor {
    white-space: nowrap; text-align: right; color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}
.cu-duas-linhas { white-space: normal; font-size: 11.5px; }
.cu-legenda-repasse {
    display: flex; gap: 24px; flex-wrap: wrap; margin-top: 10px;
    font-size: 12.5px;
}

/* NA JANELA DELE (1658x830, ~1300px de conteúdo) os quatro rótulos acima
   cabem. Abaixo de 900px eles roubam a barra inteira -- a barra é o que a
   tela tem a dizer, então o rótulo encolhe primeiro. */
@media (max-width: 900px) {
    .cu-linha-barra-status,
    .cu-linha-barra-medico { grid-template-columns: 120px 1fr auto; }
    .cu-linha-barra-unidade,
    .cu-linha-barra-faixa { grid-template-columns: 100px 1fr auto; }
    .cu-legenda-repasse { gap: 10px; }
}

/* --- a tela de regras de valor ------------------------------------------ */
.cu-form-regra {
    display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap;
    margin-top: 10px;
}
.cu-campo-regra { display: flex; flex-direction: column; gap: 4px; }
.cu-campo-regra label { font-size: 12px; color: var(--text-secondary); }
.cu-campo-regra input, .cu-campo-regra select { width: 190px; }
.cu-campo-regra-largo { flex: 1; min-width: 220px; }
.cu-campo-regra-largo input { width: 100%; }
.cu-form-regra .btn-acao { margin-top: 0; }

/* ==========================================================================
   RODADA 159 -- A BARRA DAS QUATRO EXPORTAÇÕES
   ==========================================================================
   Ela fica logo abaixo do Filtrar, e isso é pedido dele ao guias: "mover o
   botao exportar o que foi filtrado do lado do botao filtrar". Fica ao
   alcance assim que a pessoa ajusta o filtro, sem rolar a tela para cima.

   O primeiro botão é `.btn-acao` e os três de recurso são `.btn-vidro`, de
   propósito: os três vão para a UNIMED, e os dois pesos visuais separam "o
   que eu exporto para mim" de "o que eu mando para o convênio". O separador
   de texto no meio diz isso em uma palavra, em vez de exigir que alguém
   adivinhe pela cor.                                                       */
/* RODADA 160 -- O PAINEL EXPLICATIVO DA CONFERÊNCIA.
   No guias cada parágrafo, lista e nota carrega o seu `style=`; aqui são
   sete classes, porque `style=` tem teto ZERO desde a 83C. Os valores são os
   mesmos -- isto é porte de aparência, não redesenho. */
.cu-ajuda { padding: 14px 16px; margin-bottom: 16px; }
/* AS VARIAVEIS SAO AS DESTA CASA, e nao as do guias -- o mapa esta' escrito
   uma vez, umas 550 linhas acima (`--accent-blue` -> `--accent`,
   `--text-principal` -> `--text-primary`). Portei este bloco com os nomes de
   la' e quem pegou foi a regua de `var()` sem destino: cor que aponta para
   variavel inexistente nao da' erro, nao aparece no console, e a tela so'
   fica sem cor. Teto ZERO, e por isso. */
.cu-ajuda-titulo {
    cursor: pointer; font-weight: 700; color: var(--accent);
    font-size: 13px; text-transform: uppercase; letter-spacing: .4px;
}
.cu-ajuda-corpo {
    margin-top: 14px; font-size: 13px; line-height: 1.6;
    color: var(--text-primary);
}
.cu-ajuda-corpo p { margin: 0 0 14px; }
.cu-ajuda-corpo p.cu-ajuda-p-fim { margin: 0; }
.cu-ajuda-lista { margin: 0 0 14px; padding-left: 20px; }
/* A nota em destaque: a barra à esquerda é o que a separa do texto corrido.
   Azul para regra de leitura; ciano para os três mecanismos automáticos
   (recurso futuro, pacote explicado, glosa repetida). */
.cu-ajuda-nota {
    padding: 8px 10px; background: var(--bg-panel-raised);
    border-left: 3px solid var(--accent);
}
.cu-ajuda-nota-ciano { border-left-color: var(--accent-cyan); }
.cu-selo-mini { font-size: 9.5px; padding: 1px 5px; }

/* RODADA 160 -- O atalho do pacote de recurso, logo abaixo da grade de
   totalizadores. No guias a cor roxa vem num `style=` na própria âncora; aqui
   ela é classe, porque `style=` tem teto ZERO desde a 83C. A cor é a mesma
   (#a78bfa sobre o roxo a 14%): ela distingue o atalho dos botões de
   exportar sem competir com eles. */
.cu-atalho-recurso { margin: -6px 0 16px; }
.cu-btn-recurso {
    text-decoration: none; height: 34px; min-width: 0; padding: 0 16px;
    font-size: 12.5px; background: rgba(167, 139, 250, .14); color: #a78bfa;
}
.cu-btn-recurso:hover { background: rgba(167, 139, 250, .24); }

.cu-barra-exportar {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
    margin-top: 12px; padding-top: 10px;
    border-top: 1px solid var(--border-steel);
}
.cu-barra-exportar .btn-acao { margin-top: 0; }
.cu-exportar-separador {
    margin-left: 6px; font-size: 11.5px; text-transform: uppercase;
    letter-spacing: .4px; color: var(--text-secondary);
}
/* A célula de ações de uma competência: cinco botões numa linha, e eles
   quebram juntos em tela estreita em vez de empurrar a tabela. */
.cu-acoes-competencia {
    display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
}

/* ===========================================================================
   RODADA 161 -- A BARRA DE EMPRESA DO MODULO DE CONCILIACAO.

   Ela e' a PRIMEIRA coisa de cada tela do modulo, antes do titulo, e e' de
   proposito: a pergunta "de qual empresa e' isto que estou vendo?" vem antes
   de qualquer resposta que a tela de'. Em 10/10 ele olhou a tela inteira sem
   nunca saber que estava na Blue Wolf.

   Fundo levantado e borda, para ela nao se confundir com o formulario de
   upload logo abaixo -- que tem um `<select>` parecido com rotulo parecido, e
   foi exatamente a confusao que criou esta rodada. */
.cu-barra-empresa {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin: 0 0 14px; padding: 8px 12px;
    background: var(--bg-panel-raised);
    border: 1px solid var(--border-steel);
    border-radius: var(--radius);
}
.cu-barra-empresa label {
    margin: 0; font-size: 11px; text-transform: uppercase; letter-spacing: .3px;
    color: var(--text-secondary); white-space: nowrap;
}
/* `width: auto` porque o `select` da casa nasce 100% -- aqui ele divide a
   linha com o rotulo e a nota, e esticado empurraria as duas para fora. */
.cu-barra-empresa select {
    width: auto; min-width: 240px; max-width: 100%; margin: 0;
}
.cu-barra-empresa-nota {
    font-size: 11.5px; color: var(--text-terciario); font-style: italic;
}
/* A lista vazia agora e' uma FRASE, com nome de empresa e links dentro, e nao
   mais meia linha cinza. Respira como paragrafo. */
.cu-lista-vazia { line-height: 1.55; margin-top: 10px; }
.cu-lista-vazia a { color: var(--accent); }

/* ===========================================================================
   RODADA 168 -- ADMINISTRACAO > PARCEIROS
   =========================================================================== */
/* O AVISO AMARELO. Existia `.alerta-sucesso` (verde) e `.alerta-erro`
   (vermelho), e faltava o do meio -- o recado que nao e' nem conquista nem
   defeito: "este parceiro esta' desativado, e salvar aqui nao concede nada".
   Pintar isso de vermelho diria que algo quebrou; de verde, que deu certo. */
.alerta-aviso {
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 14px;
    margin-bottom: 16px;
    background: rgba(251, 191, 36, .12);
    border: 1px solid var(--warning);
    color: var(--warning);
}
/* O CATALOGO. Uma coluna, porque cada item pode trazer o MOTIVO de nao ser
   revendavel embaixo -- em duas colunas as linhas de altura diferente
   desalinham as caixas, e a caixa e' o que a pessoa procura. */
.lista-catalogo-parceiro { list-style: none; padding: 0; margin: 8px 0 16px; }
.lista-catalogo-parceiro li {
    padding: 7px 0;
    border-bottom: 1px solid var(--borda);
}
.lista-catalogo-parceiro li:last-child { border-bottom: none; }
.lista-catalogo-parceiro .detalhe-meta {
    display: block;
    margin: 2px 0 0 26px;   /* alinhado com o texto do rotulo, nao com a caixa */
    line-height: 1.45;
}
/* Caixa travada tem de PARECER travada: sem isto, a unica diferenca visivel
   entre "nao marquei ainda" e "nao posso marcar" e' tentar clicar. */
.lista-catalogo-parceiro label:has(input:disabled) { opacity: .55; }