: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;
    --text-primary: #b7bdcc;
    --text-secondary: #7a8296;
    --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);
    /* body.tema-claro .login-box abaixo sobrescreve isso -- ver comentario
       la (achado desta rodada: cartao ficava sempre escuro, tela de Login
       E de Trocar Senha, que reaproveita a mesma .login-box). */
    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; }

table { width: 100%; border-collapse: collapse; }
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;
}
.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;
    margin: 14px 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 */
}
body.tema-claro {
    --vidro-16: rgba(24, 24, 27, .85);
    --vidro-18: rgba(24, 24, 27, .88);
    --vidro-22: rgba(24, 24, 27, .92);
    --vidro-24: rgba(24, 24, 27, .94);
    --vidro-28: rgba(24, 24, 27, .96);
    --vidro-sombra: rgba(24, 24, 27, .35);
    /* Cinza-escuro (nao preto puro, pra continuar parecendo "texto de
       exemplo" e nao texto real) -- legivel sobre o fundo claro do campo. */
    --placeholder-cor: rgba(69, 73, 79, .75);
}

/* 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-claro .icone-sol,
body.tema-claro .icone-lua { display: none; }
body.tema-claro .icone-minimalista { display: inline-block; }
body.tema-minimalista .icone-sol,
body.tema-minimalista .icone-minimalista { display: none; }
body.tema-minimalista .icone-lua { display: inline-block; }

/* ===== AJUSTE 17: tema claro =====
   Como quase todo o CSS usa variaveis (--bg-void, --accent, etc.), basta
   redefinir as variaveis dentro de "body.tema-claro" que a maior parte da
   interface se adapta sozinha. So os poucos lugares com cor fixa (o
   gradiente escuro do card de detalhe, que se repete em 4 blocos deste
   arquivo por causa dos ajustes incrementais) precisam de override
   explicito abaixo. */
/* Paleta "Cinza Grafite Puro (Monocromático)" -- troca do "Preto &
   Dourado" (relatado com o fundo do quadro Kanban ainda preto e botoes
   apagados -- causas reais eram bugs em .kanban-coluna e nos botoes
   "Vidro Liquido" com cor fixa, corrigidos acima e em .kanban-coluna,
   nao a paleta em si -- mas trocando pra esta paleta como pedido).
   Quase sem cor nenhuma: estrutura (bordas, nav ativo, botoes) em tons de
   cinza/grafite, sem nenhum azul ou dourado -- so os alertas de
   sucesso/erro continuam vermelho/verde, como em qualquer tema. */
body.tema-claro {
    /* Ajuste pedido (rodada anterior): branco "puro" (#ffffff) incomodava
       a vista e os rotulos/texto secundario (--text-secondary) estavam
       claros demais, quase somem em cima do fundo claro. Painel principal
       deixou de ser branco puro, e os dois tons de texto ficaram mais
       escuros/fortes.

       AJUSTE CONFORTO VISUAL (rodada seguinte, "reduzir o brilho... pra
       nao cansar ao usar o monitor", depois refinado pra "um pouco mais
       suave"): o problema aqui e' a LUMINOSIDADE MAXIMA da tela -- um
       painel quase branco ocupando a maior parte da tela equivale a olhar
       pra uma lanterna por horas, principalmente em ambiente com pouca
       luz. Fundo saiu do "quase branco" pra um cinza-claro "papel", e o
       texto principal saiu do preto quase puro pra um cinza-grafite
       escuro (contraste ainda alto o bastante pra leitura confortavel, so'
       sem o extremo preto-no-branco). */
    --bg-void: #d2d6da;
    --bg-panel: #dadde0;
    --bg-panel-raised: #cfd3d7;
    --border-steel: #b7bcc3;
    --text-primary: #34373d;
    --text-secondary: #5f636b;
    --accent: #232427;
    --accent-cyan: #4b4e56;
    --accent-soft: rgba(35,36,39,.08);
    --danger: #dc2626;
    --success: #16a34a;
}

/* ===========================================================
   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;
}
body.tema-claro .detalhe-atividade {
    background: linear-gradient(165deg, #ffffff, #eeeeef 78%) !important;
}
body.tema-claro .kanban-card.atrasada {
    background: linear-gradient(165deg, rgba(220,38,38,.08), var(--bg-panel-raised) 60%) !important;
}
body.tema-claro .wordmark-wolf {
    color: var(--text-primary) !important;
}
/* Pedido explicito: a logo "8 anos" (lobo) continua feia no tema claro
   mesmo depois do prato/mascara/z-index ajustados -- a arte foi desenhada
   pra fundo escuro (silhueta escura com brilho azul de neon) e nao tem
   um bom equivalente visual em fundo claro. Em vez de insistir em mais
   ajuste de CSS em cima de uma arte que nao foi feita pro claro, a
   decisao agora e simplesmente nao mostrar no tema claro -- fica somente
   no tema escuro, onde ja funciona bem. */
body.tema-claro .marca-8anos {
    display: none !important;
}
body.tema-claro .site-bg {
    opacity: .4;
}
/* A rede de fundo (sinapse.js) precisa de reforco proprio no tema claro
   (o canvas inteiro herdava a opacity:.35 pensada pro tema escuro, e some
   quase por completo contra fundo claro) -- mas o primeiro valor usado
   aqui (.55) somado aos multiplicadores altos do sinapse.js exagerou pro
   lado oposto: a rede (preta) passou a brigar visualmente com o texto
   (tambem escuro no tema claro) sempre que cruzava por tras de um titulo
   ou rotulo fora de card. Reduzido nesta rodada -- ver o mesmo ajuste em
   static/sinapse.js (alpha dos nos/linhas tambem reduzido). */
body.tema-claro #network-canvas {
    opacity: .38;
}

/* Achado desta rodada: .login-box (cartao da tela de Login E da tela de
   Trocar Senha, que reaproveita a mesma classe) tinha fundo escuro FIXO,
   sempre escuro em qualquer tema -- por isso as duas telas continuavam
   com o cartao preto mesmo com o restante do sistema ja clareado. Preto
   nao aparecia sozinho: o texto "WOLF" do logo (.wordmark-wolf) ja seguia
   a variavel --text-primary, que agora e quase preta no tema claro --
   dava texto escuro sobre cartao escuro, ilegivel. Corrigindo o fundo do
   cartao pro tema claro resolve os dois (cartao Y o texto) de uma vez. */
body.tema-claro .login-box {
    background: linear-gradient(165deg, var(--bg-panel), var(--bg-panel-raised) 78%) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,.7) inset,
        0 22px 40px -22px rgba(15,17,21,.18) !important;
}
body.tema-claro .login-box::before {
    background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent) !important;
    opacity: .5;
}
body.tema-claro .login-wrapper::before {
    background: radial-gradient(circle, rgba(35,36,39,.08) 0%, transparent 70%) !important;
}

/* Icone de calendario/relogio: o invert(.65) so faz sentido em fundo escuro.
   No tema claro o icone nativo (escuro) ja contrasta bem sozinho. */
body.tema-claro input[type="date"]::-webkit-calendar-picker-indicator,
body.tema-claro input[type="time"]::-webkit-calendar-picker-indicator {
    filter: none;
}

/* Achado desta rodada: mesmo problema do "Vidro Liquido" azul (texto claro
   sobre fundo translucido claro, ilegivel em tema claro), so que nestes
   4 elementos a cor de base e diferente (ambar no aviso/selo/botao de
   resetar senha, verde no botao Restaurar, cinza-azulado no selo
   "Compartilhado") -- por isso nao entraram na troca por variavel
   --vidro-* (que so cobre a familia azul). Aqui e mais simples sobrepor
   direto: fundo um pouco mais opaco e texto escuro na mesma familia de
   cor, em vez de texto pastel claro que suma sobre fundo branco. */
body.tema-claro .btn-resetar-senha {
    background: rgba(217, 119, 6, .14) !important;
    color: #92400e !important;
}
body.tema-claro .btn-resetar-senha:hover {
    background: rgba(217, 119, 6, .22) !important;
}
body.tema-claro .btn-restaurar {
    background: rgba(5, 150, 105, .14) !important;
    color: #065f46 !important;
}
body.tema-claro .btn-restaurar:hover {
    background: rgba(5, 150, 105, .22) !important;
}
body.tema-claro .selo-compartilhado {
    background: rgba(100, 116, 139, .16) !important;
    border: 1px solid rgba(100, 116, 139, .45) !important;
    color: #334155 !important;
}
body.tema-claro .selo-permissao-perigosa {
    background: rgba(217, 119, 6, .14) !important;
    border: 1px solid rgba(217, 119, 6, .45) !important;
    color: #92400e !important;
}
body.tema-claro .icone-aviso-perigo {
    color: #b45309 !important;
}
body.tema-claro .selo-permissao-critica {
    background: rgba(220, 38, 38, .14) !important;
    border: 1px solid rgba(220, 38, 38, .5) !important;
    color: #b91c1c !important;
}
body.tema-claro .icone-aviso-critica {
    color: #b91c1c !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;
}

/* ===========================================================
   AJUSTE 29 —
   1) logo do lobo em preto no tema escuro (mantendo a cor
      original no tema claro);
   2) versao do sistema no rodape da tela de login;
   3) paginacao da tabela de usuarios;
   4) reorganizacao do card do quadro kanban: rotulo "Titulo:",
      "Criado por:"/"Data/Hora:" em ambar perto do cadeado,
      "Responsavel:" e "Duplicar" no rodape perto de "Excluir",
      selo de "quase atrasada" (prazo em menos de 24h), e avatar
      do responsavel maior (50px);
   5) rotulos dos campos do formulario de edicao da atividade
      (Descricao / Prioridade / Prazo / Hora / Responsavel);
   6) historico de auditoria dentro do card aberto.
   =========================================================== */
/* Correcao: tema escuro mantem a logo original (como sempre foi); so o
   tema claro precisa da versao em preto, porque a original clareada nao
   tinha contraste sobre fundo branco. */
body.tema-claro .logo-mark-img { filter: brightness(0) saturate(100%); }

.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;
}

/* Ajustes de contraste no tema claro -- mesmo motivo do dourado
   (#f5b942) precisar de override em tema claro: o vermelho sozinho ja
   e' o mesmo usado em --danger no tema claro, entao o contraste ja e'
   adequado -- so o fundo do card (tom bem claro) precisa de ajuste,
   mesmo padrao ja usado em ".kanban-card.atrasada" no tema claro. */
body.tema-claro .kanban-card.card-confidencial {
    background: linear-gradient(165deg, rgba(220,38,38,.08), var(--bg-panel-raised) 60%) !important;
}

/* ===========================================================
   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;
    margin: 14px 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;
    gap: 7px;
    background: var(--bg-panel-raised);
    border: 2px solid var(--border-steel);
    border-radius: 10px;
    padding: 9px 14px;
    /* 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); }
.mini-stat-chamados strong { font-size: 18px; font-family: "Sora", sans-serif; }
.mini-stat-chamados span { font-size: 11px; color: var(--text-secondary); white-space: nowrap; }
.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 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; }

/* ===========================================================
   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;
}
body.tema-claro .painel-detalhe-split {
    background: linear-gradient(165deg, #ffffff, #eeeeef 78%) !important;
}
.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 */
.grade-campos-chamado {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}
.campo-somente-leitura {
    background: var(--bg-panel-raised);
    border: 1px solid var(--border-steel);
    border-radius: 10px;
    padding: 8px 12px;
}
.campo-somente-leitura .rotulo-campo-pequeno { display: block; margin-bottom: 3px; }

/* 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. */
.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;
}
.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; }
.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; }
.status-grande-fila { font-size: 13px; font-weight: 700; white-space: nowrap; padding: 4px 12px; }
.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;
    padding: 12px 14px;
    margin: 14px 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. */
#tabela-grade-chamados { border-collapse: separate; border-spacing: 0 6px; }
#tabela-grade-chamados thead th {
    font-size: 11px;
    letter-spacing: .03em;
    padding: 10px 12px;
    white-space: nowrap;
    border: none;
}
#tabela-grade-chamados tbody td {
    padding: 14px 12px;
    font-size: 12.5px;
    line-height: 1.5;
    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. */
body.tema-papel {
    --bg-void: #f4f5f7;
    --bg-panel: #ffffff;
    --bg-panel-raised: #f8f9fb;
    --border-steel: #d7dce4;
    --text-primary: #2c3140;
    --text-secondary: #5d6678;
    --accent: #2563eb;
    --accent-cyan: #1d4ed8;
    --accent-soft: rgba(37, 99, 235, .10);
    --danger: #c23934;
    --success: #1e7d4f;
    --cor-vencendo: #b47d0e;
    --cor-prioridade-alta: #dc2626;
    --cor-prioridade-media: #e08b0b;
    --cor-prioridade-baixa: #3b82f6;
    /* vidro CLARO (I1): base branca, sombra suave */
    --vidro-16: rgba(255, 255, 255, .78);
    --vidro-18: rgba(255, 255, 255, .82);
    --vidro-22: rgba(255, 255, 255, .88);
    --vidro-24: rgba(255, 255, 255, .92);
    --vidro-28: rgba(255, 255, 255, .96);
    --vidro-sombra: rgba(44, 49, 64, .18);
    --placeholder-cor: rgba(93, 102, 120, .7);
}
/* 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-papel .btn-vidro,
body.tema-papel .btn-nova-inline,
body.tema-papel .form-nova-atividade button,
body.tema-papel .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-papel .btn-vidro:hover,
body.tema-papel .btn-nova-inline:hover,
body.tema-papel .form-nova-atividade button:hover,
body.tema-papel .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-papel .btn-vidro.ativo,
body.tema-papel .btn-vidro.badge-erro,
body.tema-papel .btn-vidro.badge-ok,
body.tema-papel .btn-finalizar-destaque,
body.tema-papel .abas-admin a.ativo,
body.tema-papel .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-papel button[type="submit"] { background: #2563eb; border-color: #1d4ed8; color: #fff; }
body.tema-papel 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-papel .chip-tag,
body.tema-papel .chip-categoria { filter: saturate(1.15) brightness(.72) contrast(1.25); }
body.tema-papel .badge { filter: saturate(1.1) brightness(.8) contrast(1.2); }
body.tema-papel .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-papel #network-canvas, body.tema-papel .marca-8anos { display: none !important; }
body.tema-papel .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-papel .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). */
body.tema-escuro2 {
    --bg-void: #10141f;
    --bg-panel: #181d29;
    --bg-panel-raised: #1d232f;
    --border-steel: #2a3244;
    --text-primary: #b7bdcc;
    --text-secondary: #7a8296;
    --accent: #4b82e8;
    --accent-cyan: #6d9bea;   /* I5: variacao do MESMO azul, nao outra cor */
    --accent-soft: rgba(75, 130, 232, .14);
    --danger: #e07f7a;
    --success: #57c48a;
    --cor-vencendo: #dcac4e;
    --cor-prioridade-alta: #d95f55;
    --cor-prioridade-media: #dcac4e;
    --cor-prioridade-baixa: #4b82e8;
    --vidro-16: rgba(75, 130, 232, .13);
    --vidro-18: rgba(75, 130, 232, .16);
    --vidro-22: rgba(75, 130, 232, .20);
    --vidro-24: rgba(75, 130, 232, .24);
    --vidro-28: rgba(75, 130, 232, .28);
    --vidro-sombra: rgba(10, 16, 30, .5);
}
body.tema-escuro2 .btn-vidro,
body.tema-escuro2 .btn-nova-inline,
body.tema-escuro2 .form-nova-atividade button,
body.tema-escuro2 .form-busca button {
    border: 1px solid rgba(148, 178, 235, .28) !important;
    color: #dbe5f5 !important;
}
body.tema-escuro2 .bolinha-critica { box-shadow: 0 0 0 1.5px var(--text-primary); }  /* I7 */

/* ------------------- TEMA MINIMALISTA II (minimalista v1) ----------------
   Herda TODA a base do minimalista atual (a classe tema-minimalista e'
   aplicada JUNTO pelo base.html -- fonte Quicksand, sem sinapse, sem
   glow). O que muda: botoes SOLIDOS (I6 -- vidro contradiz a proposta do
   tema), cantos 8px e aro na critica (I7). */
body.tema-minimal2 .btn-vidro,
body.tema-minimal2 .btn-nova-inline,
body.tema-minimal2 .form-nova-atividade button,
body.tema-minimal2 .form-busca button {
    background: #33333a !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border: 1px solid #45454d !important;
    box-shadow: none !important;
    color: #d6d6da !important;
    border-radius: 8px;
}
body.tema-minimal2 .btn-vidro:hover,
body.tema-minimal2 .btn-nova-inline:hover,
body.tema-minimal2 .form-nova-atividade button:hover,
body.tema-minimal2 .form-busca button:hover {
    filter: none;
    background: #3b3b43 !important;
    border-color: var(--accent) !important;
}
body.tema-minimal2 .btn-vidro.ativo,
body.tema-minimal2 .btn-finalizar-destaque,
body.tema-minimal2 .chip-filtro.ativo {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #ffffff !important;
}
body.tema-minimal2 .bolinha-critica { box-shadow: 0 0 0 1.5px #d6d6da; }  /* 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-papel .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-papel .view-switcher a { color: var(--text-secondary); }
/* Escuro II e Minimalista II: aba ativa coerente com o acento de cada um */
body.tema-escuro2 .view-switcher a.ativo {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #ffffff !important;
}
body.tema-minimal2 .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;
    border-radius: 8px;
}

/* ===========================================================================
   RODADA 36 -- revisao dos temas: modais, campos e "coisas que somem no branco"
   ---------------------------------------------------------------------------
   Relato do usuario: "verifique todos os modais tbm, pq vi que tem alguns que
   nao mudou o tema... a inicial ao lado do nome do tecnico ta apagada no
   branco... revise o branco pois algumas coisas estao sumindo".

   O que estava acontecendo: um punhado de componentes tinha cor CRAVADA no
   valor (o gradiente escuro do modal, o texto #eaf2ff dos botoes de vidro, o
   azul-marinho #0f2354 do estado ligado, o fundo escuro dos campos de
   formulario). Valor fixo nenhum tema consegue trocar -- por isso o modal
   continuava preto no tema claro e a inicial do avatar (texto claro sobre
   vidro que virou BRANCO no tema Papel) sumia.

   A correcao de verdade foi transformar esses valores em variaveis (ver
   bloco :root la em cima). Aqui embaixo cada tema so' diz QUAL valor quer.
   Nenhum componente novo, nenhum seletor novo -- e o tema escuro padrao
   continua com os mesmos valores de antes.
   =========================================================================== */

/* ---- TEMA CLARO (grafite sobre cinza-papel) ---- */
body.tema-claro {
    /* vidro aqui e' escuro de proposito, entao o texto continua claro */
    --vidro-texto: #eef1f4;
    --vidro-texto-forte: #ffffff;
    /* estado ligado acompanha o grafite do tema (o azul-marinho antigo era
       de outro tema e destoava) */
    --vidro-ativo-bg: #232427;
    --vidro-ativo-texto: #f2f4f6;
    --vidro-ativo-borda: #3a3c41;
    --vidro-ativo-brilho: inset 0 1px 0 rgba(255,255,255,.10);
    --modal-fundo: linear-gradient(165deg, #e6e8eb, #d2d6da 78%);
    --modal-sombra: 0 18px 44px rgba(30,32,36,.22);
    --overlay-fundo: rgba(30,32,36,.45);
    --campo-fundo: #eceef1;
    --fundo-critico: #f3dede;
}

/* ---- TEMA PAPEL (branco) -- e' onde as coisas sumiam ---- */
body.tema-papel {
    --vidro-texto: #2c3140;
    --vidro-texto-forte: #1b2230;
    --vidro-ativo-bg: #2563eb;
    --vidro-ativo-texto: #ffffff;
    --vidro-ativo-borda: #1d4ed8;
    --vidro-ativo-brilho: 0 2px 10px -4px rgba(37, 99, 235, .55);
    --modal-fundo: linear-gradient(165deg, #ffffff, #f4f5f7 78%);
    --modal-sombra: 0 18px 44px rgba(44, 49, 64, .18);
    --overlay-fundo: rgba(28, 32, 42, .38);
    --campo-fundo: #ffffff;
    --fundo-critico: #fdecec;
}
/* 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-papel .avatar-iniciais,
body.tema-papel .avatar-compartilhado {
    background: rgba(37, 99, 235, .12) !important;
    border: 1px solid rgba(37, 99, 235, .45) !important;
    color: #1d4ed8 !important;
}
body.tema-papel .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-papel .badge-sidebar { color: #1d4ed8 !important; border-color: rgba(37,99,235,.4) !important; }
/* Campos dentro dos modais/formularios com fundo fixo escuro. */
body.tema-papel input, body.tema-papel textarea, body.tema-papel 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-escuro2 {
    --vidro-texto: #e6edfb;
    --vidro-texto-forte: #ffffff;
    --vidro-ativo-bg: rgba(75, 130, 232, .26);
    --vidro-ativo-texto: #e6edfb;
    --vidro-ativo-borda: rgba(75, 130, 232, .6);
    --vidro-ativo-brilho: 0 0 16px -4px #4b82e8, inset 0 1px 0 rgba(255,255,255,.08);
    --modal-fundo: linear-gradient(165deg, #1b2130, #10141f 78%);
    --modal-sombra: 0 20px 50px rgba(0,0,0,.5);
    --overlay-fundo: rgba(6,9,16,.62);
    --campo-fundo: #161b26;
}

/* ---- TEMA MINIMALISTA II ---- */
body.tema-minimal2 {
    --vidro-texto: #e4e4e8;
    --vidro-texto-forte: #ffffff;
    --vidro-ativo-bg: #3b4250;
    --vidro-ativo-texto: #f2f3f6;
    --vidro-ativo-borda: #525a6b;
    --vidro-ativo-brilho: none;
    --modal-fundo: linear-gradient(165deg, #2b2b31, #212126 78%);
    --modal-sombra: 0 16px 40px rgba(0,0,0,.5);
    --overlay-fundo: rgba(10,10,12,.62);
    --campo-fundo: #2c2c33;
}

/* 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 {
    margin-top: 18px;
    padding: 14px 16px;
    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;
}


/* Ajuste "modo claro estourado": o fundo de rede (sinapse.js) já tinha um
   reforço de opacidade pro tema claro no style.css real (.38), mas numa
   tela com pouco conteúdo (como esta, de propósito minimalista) ele fica
   dominante demais. Reduzido só aqui, pra essa tela específica -- vale
   levar o mesmo ajuste pro style.css real quando o módulo for codificado. */
body.tema-claro #network-canvas { opacity: .15 !important; }

.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-papel button[type="submit"].link-editar-comentario,
body.tema-claro button[type="submit"].link-editar-comentario,
body.tema-papel .link-editar-comentario,
body.tema-claro .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-papel .link-editar-comentario:hover,
body.tema-claro .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-papel .form-compartilhar button,
body.tema-claro .form-compartilhar button,
body.tema-papel .form-checklist-novo button,
body.tema-claro .form-checklist-novo button,
body.tema-papel .abas-variante-b button,
body.tema-claro .abas-variante-b button,
body.tema-papel .abas-usuario button,
body.tema-claro .abas-usuario button,
body.tema-papel .chip-acompanhante button,
body.tema-claro .chip-acompanhante button,
body.tema-papel .csat-usuario-emojis button,
body.tema-claro .csat-usuario-emojis button {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--accent) !important;
}
body.tema-papel .csat-usuario-emojis button,
body.tema-claro .csat-usuario-emojis button { color: inherit !important; }
body.tema-papel .abas-variante-b button.ativo,
body.tema-claro .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-papel .link-excluir, body.tema-claro .link-excluir,
body.tema-papel .link-gerenciar-tags, body.tema-claro .link-gerenciar-tags,
body.tema-papel .link-voltar-quadro, body.tema-claro .link-voltar-quadro {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}
body.tema-papel .link-excluir, body.tema-claro .link-excluir { color: var(--danger) !important; }

/* "Finalizar chamado" / "Aprovar solucao" no tema Claro: o azul a 30% de
   opacidade em cima de um painel CLARO fica um azulzinho lavado com texto
   claro por cima -- o botao mais importante da tela virava o menos
   visivel. Nos temas de fundo claro ele fica solido. */
body.tema-claro .btn-vidro.btn-finalizar-destaque {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #f2f4f6 !important;
}
body.tema-claro .btn-vidro.btn-aprovar-solucao {
    background: var(--success) !important;
    border-color: var(--success) !important;
    color: #ffffff !important;
}
body.tema-papel .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;
}