: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 */
    --text-secondary: #838b9f; /* 4,9:1  sobre --bg-panel */
    --accent: #3f74e0;
    --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;
}

* { 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, .brand, .logo-word, .login-brand .brand-name {
    font-family: "Orbitron", sans-serif;
    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: "Orbitron", sans-serif;
    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);
    /* 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: "Orbitron", sans-serif;
    font-weight: 700;
    font-size: 22px;
    letter-spacing: 1.5px;
}
.wordmark-blue { color: #2f8fff; }
.wordmark-wolf { color: var(--text-primary); }
.wordmark-sub {
    margin-top: 8px;
    font-family: "Orbitron", sans-serif;
    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: "Orbitron", sans-serif;
    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;
}
button {
    margin-top: 20px;
    width: 100%;
    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 */
.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;
    padding: 14px 24px;
    border-bottom: 1px solid var(--border-steel);
}
.user-info { display: flex; gap: 12px; align-items: center; color: var(--text-secondary); font-size: 13.5px; }

.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;
    color: var(--vidro-ativo-texto);
    background: var(--vidro-ativo-bg);
    border: 1px solid rgba(148, 190, 255, .4);
    border-radius: 10px;
    box-shadow: var(--vidro-ativo-brilho);
    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-secondary);
    font-size: 12.5px;
    opacity: .7;
}

/* ===========================================================
   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-secondary);
    opacity: .7;
    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);
    border: 1px solid var(--border-steel);
    border-radius: var(--radius);
    padding: 20px 22px;
    width: 100%;
    max-width: 420px;
    max-height: 82vh;
    overflow-y: auto;
}
.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; }

.link-editar-comentario {
    width: auto;
    margin: 4px 0 0;
    padding: 0;
    background: none;
    border: none;
    color: var(--accent);
    font-size: 11px;
    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-secondary);
    font-size: 12.5px;
    opacity: .7;
}

.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-secondary);
    opacity: .7;
}

/* ===========================================================
   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;
    color: var(--vidro-ativo-texto);
    background: var(--vidro-ativo-bg);
    border: 1px solid rgba(148, 190, 255, .4);
    box-shadow: var(--vidro-ativo-brilho);
    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;
    color: var(--vidro-ativo-texto) !important;
    background: var(--vidro-ativo-bg) !important;
    border: 1px solid rgba(148, 190, 255, .4) !important;
    box-shadow: var(--vidro-ativo-brilho) !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) !important;
    color: #fff !important;
    border: none !important;
    font-weight: 700;
}
.detalhe-fechar:hover { opacity: .85; background: var(--danger) !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"] {
    background: var(--vidro-ativo-bg) !important;
    border: 1px solid rgba(148, 190, 255, .4) !important;
    color: var(--vidro-ativo-texto) !important;
    font-weight: 700 !important;
    box-shadow: var(--vidro-ativo-brilho) !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"] {
    background: var(--vidro-ativo-bg) !important;
    border: 1px solid rgba(148, 190, 255, .4) !important;
    color: var(--vidro-ativo-texto) !important;
    font-weight: 600 !important;
    box-shadow: var(--vidro-ativo-brilho) !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;
    background: var(--cor-btn) !important;
    border: 1px solid rgba(148, 190, 255, .4) !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 */
}

/* 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;
    opacity: .6;
    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: 'Orbitron', sans-serif !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: 'Orbitron', sans-serif !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: 'Orbitron', sans-serif !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;
    background: var(--vidro-ativo-bg) !important;
    border: 1px solid rgba(148, 190, 255, .4) !important;
    box-shadow: var(--vidro-ativo-brilho);
    border-radius: 8px !important;
    color: var(--vidro-ativo-texto) !important;
    font-family: 'Orbitron', sans-serif !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: "Orbitron", sans-serif;
    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;
    background: var(--vidro-ativo-bg) !important;
    border: 1px solid rgba(148, 190, 255, .4) !important;
    box-shadow: var(--vidro-ativo-brilho);
    border-radius: 8px !important;
    color: var(--vidro-ativo-texto) !important;
    font-family: 'Orbitron', sans-serif !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;
}
.form-departamento-novo input[name="nome"] {
    flex: 1 1 200px !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-departamento-novo input[name="descricao"] {
    flex: 2 1 280px !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-departamento-novo button {
    flex: 0 0 auto !important;
    width: auto !important;
    height: 38px !important;
    padding: 0 18px !important;
    background: var(--vidro-ativo-bg) !important;
    border: 1px solid rgba(148, 190, 255, .4) !important;
    box-shadow: var(--vidro-ativo-brilho);
    border-radius: 8px !important;
    color: var(--vidro-ativo-texto) !important;
    font-family: 'Orbitron', sans-serif !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;
    background: var(--vidro-ativo-bg) !important;
    border: 1px solid rgba(148, 190, 255, .4) !important;
    box-shadow: var(--vidro-ativo-brilho);
    border-radius: 8px !important;
    color: var(--vidro-ativo-texto) !important;
    font-family: 'Orbitron', sans-serif !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;
}
.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: #8c8c92;
    --accent: #3b82f6;
    --accent-cyan: #3b82f6;
    --accent-soft: rgba(59,130,246,.14);
    --danger: #f2726f;
    --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;
}

/* 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. */
body.tema-minimalista .btn-nova-inline,
body.tema-minimalista .btn-solido-azul {
    background: var(--accent) !important;
    border: 1px solid var(--accent) !important;
    color: #ffffff !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: 'Orbitron', sans-serif !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-secondary);
    opacity: .7;
}
@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-secondary);
    opacity: .55;
    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: 'Orbitron', sans-serif !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: 'Orbitron', sans-serif !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;
}

/* 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;
    background: var(--vidro-ativo-bg) !important;
    border: 1px solid rgba(148, 190, 255, .4) !important;
    box-shadow: var(--vidro-ativo-brilho);
    border-radius: 8px !important;
    color: var(--vidro-ativo-texto) !important;
    font-family: 'Orbitron', sans-serif !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;
    background: var(--vidro-ativo-bg) !important;
    border: 1px solid rgba(148, 190, 255, .4) !important;
    box-shadow: var(--vidro-ativo-brilho);
    border-radius: 8px !important;
    color: var(--vidro-ativo-texto) !important;
    font-family: 'Orbitron', sans-serif !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: 'Orbitron', sans-serif !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: 'Orbitron', sans-serif !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: 'Orbitron', sans-serif !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: 'Orbitron', sans-serif !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: 'Orbitron', sans-serif;
    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-secondary);
    line-height: 1.4;
    margin: 2px 0 4px;
    opacity: .85;
}

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

.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-secondary); opacity: .4; }
.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);
    opacity: .9;
}
.kanban-card-meta-rotulo {
    font-family: 'Orbitron', sans-serif;
    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: 'Orbitron', sans-serif;
    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; opacity: .7; }
.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: 'Orbitron', sans-serif;
    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: 'Orbitron', sans-serif;
    font-size: 9.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    opacity: .8;
}
.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-secondary);
    opacity: .8;
    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;
    color: #dc2626;
    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 {
    opacity: .4;
    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);
    border-color: var(--accent);
    color: #fff;
}

/* Rodada 30 -- cronometro regressivo de SLA na Estilo Grade. */
.cronometro-sla {
    display: inline-block;
    font-family: 'Orbitron', sans-serif;
    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;
    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; }
.linha-v2-titulo { font-weight: 600; }
.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;
    background: var(--vidro-ativo-bg);
    color: var(--vidro-ativo-texto);
    border: 1px solid rgba(148, 190, 255, .4);
    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-secondary);
    opacity: .85;
}

/* 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: "Orbitron", sans-serif;
    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; }

/* 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: "Orbitron", sans-serif;
    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);
    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 -- balao de "preview hover" nas linhas da Estilo Grade
   (ver previewChamadoHover() em chamados.html). */
.th-ordenavel { cursor: pointer; user-select: none; }
.th-ordenavel:hover { color: var(--accent); }
.preview-hover-chamado {
    display: none;
    position: absolute;
    z-index: 200;
    max-width: 280px;
    background: var(--bg-panel-raised);
    border: 1px solid var(--border-steel);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 12.5px;
    color: var(--text-secondary);
    box-shadow: 0 6px 20px rgba(0,0,0,.4);
    pointer-events: none;
}
/* ===========================================================================
   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);
    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. */
.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;
}
.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;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}
@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-secondary);
    opacity: .75;
    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; opacity: .8; }

/* 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". */
.linha-filtros { flex-wrap: nowrap; }
.linha-filtros .btn-nova-inline {
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@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: "Orbitron", sans-serif;
    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.
   ========================================================================= */
body.tema-papelbranco {
    --bg-void: #f3f1ed;
    --bg-panel: #faf9f6;
    --bg-panel-raised: #f6f4f0;
    --border-steel: #dcd8d0;
    --text-primary: #33373d;   /* 11,4:1 sobre --bg-panel */
    --text-secondary: #646a73; /* 5,2:1  sobre --bg-panel */
    --accent: #2f6bbf;
    --accent-cyan: #2f6bbf;    /* um azul so' -- tema minimalista nao tem 2 */
    --accent-soft: rgba(47, 107, 191, .10);
    --danger: #c0453f;
    --success: #1f7a52;
    --cor-vencendo: #9a6b0d;
    --cor-prioridade-alta: #c0453f;
    --cor-prioridade-media: #b5760c;
    --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: #949ca6; /* 5,6:1  sobre --bg-panel */
    --accent: #6f9fc8;
    --accent-cyan: #8ab4d6;    /* variacao do MESMO azul, nao outra cor */
    --accent-soft: rgba(111, 159, 200, .14);
    --danger: #e08a86;
    --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) !important;
    border-color: var(--accent) !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) !important;
    border-color: var(--accent) !important;
    color: #ffffff !important;
}

/* ---- TEMA PAPEL (branco) -- e' onde as coisas sumiam ---- */
body.tema-papelbranco {
    --vidro-texto: #33373d;
    --vidro-texto-forte: #23262b;
    --vidro-ativo-bg: #2f6bbf;
    --vidro-ativo-texto: #fbfbfa;
    --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);
    --modal-fundo: linear-gradient(165deg, #fdfcfa, #f3f1ed 78%);
    --modal-sombra: 0 18px 44px rgba(51, 55, 61, .16);
    --overlay-fundo: rgba(40, 38, 34, .38);
    --campo-fundo: #fdfcfa;
    --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) !important;
    border-color: var(--accent) !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;
    color: var(--vidro-ativo-texto);
    background: var(--vidro-ativo-bg);
    border: 1px solid rgba(148, 190, 255, .4);
    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: "Orbitron", sans-serif;
    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);
    opacity: .55;
    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-secondary);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    opacity: .55;
    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));
    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));
    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;
    opacity: .75;
}
.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; opacity: .8; }

.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));
    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   */
        minmax(110px, 2.4fr)  /* 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 { opacity: .55; }

/* 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;
    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; opacity: .8; }

.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; opacity: .6;
}
.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); 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 { opacity: .55; }

.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; }
.u-background-danger.u-background-danger { background:var(--danger); }
.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);
    color: #fff;
    border-color: var(--accent);
}
/* === 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. */
.conversas-tela {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 16px;
    align-items: start;
}
@media (max-width: 900px) {
    .conversas-tela { grid-template-columns: 1fr; }
}
.conversas-lista { border-right: 1px solid var(--borda); padding-right: 12px; }
.conversas-lista a {
    display: block;
    padding: 8px 10px;
    border-radius: 6px;
    text-decoration: none;
    color: inherit;
}
.conversas-lista a:hover { background: var(--fundo-hover, rgba(127,127,127,.12)); }
.conversas-lista a.conversa-aberta {
    background: var(--fundo-hover, rgba(127,127,127,.18));
    font-weight: 600;
}
.conversa-fio {
    max-height: 55vh;
    overflow-y: auto;
    padding: 8px;
    border: 1px solid var(--borda);
    border-radius: 8px;
}
.conversa-msg { margin-bottom: 10px; }
.conversa-msg-autor { font-size: 12px; opacity: .75; }
.conversa-msg-texto { white-space: pre-wrap; word-break: break-word; }
.conversa-msg-excluida { font-style: italic; opacity: .6; }
.conversa-msg-minha .conversa-msg-autor { color: var(--accent); }
.conversa-envio { display: flex; gap: 8px; margin-top: 10px; align-items: flex-end; }
.conversa-envio textarea { flex: 1; min-height: 46px; resize: vertical; }
.conversa-membros { font-size: 12px; opacity: .8; margin-bottom: 8px; }
/* === fim das classes da rodada 89 === */