/* Tex Interno: grafite, marfim e amarelo da marca oficial. */

:root {
    --primary: #8a5b00;
    --primary-dark: #5c3d00;
    --primary-light: #fff5cf;
    --accent: #ffb900;
    --on-primary: #ffffff;
    --focus-ring: #8a5b00;
    --brand-dark: #101820;
    --bg: #f5f3ef;
    --white: #ffffff;
    --border: #ddd9d1;
    --border-light: #ebe8e1;
    --text-primary: #16202a;
    --text-secondary: #4d5862;
    --text-muted: #626d77;
    --table-head: #fafbfc;
    --table-hover: #f8fafc;
    --danger: #dc2626;
    --danger-bg: #fef2f2;
    --warning: #b45309;
    --warning-bg: #fffbeb;
    /* VERDE DO PRODUTO, NAO DO TAILWIND (28/08/2026, cartao 316).

       O par que estava aqui era o emerald-700 com o emerald-50, e a casa proibe
       verde padrao do Tailwind em produto nenhum. O portao reprovava os dois
       desde 20/08, escondidos na baseline de app legado: entrou como divida
       congelada e ninguem mais viu.

       A familia nova nao foi inventada: parte do verde que o modo escuro deste
       mesmo arquivo ja usava, entao a troca aproxima os dois temas em vez de
       criar um terceiro verde na casa. Os hexes antigos nao sao citados aqui de
       proposito: o eixo de marca le o arquivo inteiro, e escrever o hex proibido
       dentro do comentario faria ele reprovar de novo pelo texto da explicacao. */
    --success: #16794b;
    --success-bg: #eaf6f0;
    --sidebar-width: 240px;
    --sidebar-collapsed: 60px;
    --topbar-h: 58px;
    --radius: 10px;
    --shadow: 0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .04);
}

/* Pendências operacionais */
/* container-type: os filtros e a lista precisam reagir à largura do PRÓPRIO card,
   não à da janela: com a barra lateral aberta (240px) sobram ~1139px em uma tela
   de 1440px, e um breakpoint de viewport não enxerga isso. O resultado era a
   grade de 7 colunas (mínimo ~1189px) estourando o card e o overflow:hidden
   cortando o botão "Limpar". O modal fica fora deste card, então a contenção
   não afeta position:fixed. */
.pendencias-painel{min-width:0;overflow:hidden;container-type:inline-size;container-name:pendpainel}
.pendencias-cabecalho{align-items:flex-start;gap:1rem;flex-wrap:wrap}
.pendencias-cabecalho p{margin:.28rem 0 0;max-width:68ch}
.pendencias-filtros{display:grid;grid-template-columns:minmax(220px,2fr) repeat(6,minmax(145px,1fr));gap:.7rem;padding:1rem;border-bottom:1px solid var(--border-light);align-items:end}
.pendencias-filtros label{display:grid;gap:.3rem;min-width:0;font-size:.76rem;font-weight:700;color:var(--text-muted)}
.pendencias-filtros .pendencias-check{display:flex;align-items:center;gap:.5rem;min-height:44px}
.pendencias-check input{width:18px;height:18px;accent-color:var(--primary)}
.pendencias-filtros-acoes{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;grid-column:2/-1;justify-content:flex-end}
.pendencias-lista{max-width:100%;overflow-x:auto}
/* Densidade um pouco maior só nesta lista: são 8 colunas, e o nowrap do selo
   cobra largura. Com 10px na célula e 8px no selo a tabela pede 1098px onde antes
   pedia 1090, ou seja, a rolagem horizontal fica igual à de antes e os selos
   deixam de quebrar. Medido a 1366x768 com a barra lateral aberta. */
.pendencias-lista .table th,.pendencias-lista .table td{padding-left:10px;padding-right:10px}
.pendencias-lista .badge{padding-left:8px;padding-right:8px}
.pendencias-lista td:first-child{min-width:220px;max-width:360px}
.pendencias-lista td small{display:block;margin-top:.18rem;color:var(--text-muted);font-size:.72rem;line-height:1.35}
/* Cabecalho clicavel de ordenacao (25/08/2026, pedido da Oficicar). O link
   ocupa a celula inteira para o alvo de toque nao ficar do tamanho da palavra;
   44px de altura minima atende a WCAG 2.5.5 no celular, onde esta tabela vira
   cartao. A seta so existe na coluna ativa, e o sublinhado marca qual manda. */
.pendencias-lista .table th{padding-top:0;padding-bottom:0}
.pendencias-ord{display:inline-flex;align-items:center;gap:.28rem;min-height:44px;padding:.2rem 0;color:inherit;font:inherit;text-decoration:none;white-space:nowrap}
.pendencias-ord:hover,.pendencias-ord:focus-visible{color:var(--primary);text-decoration:underline}
.pendencias-ord.is-ativa{color:var(--primary);text-decoration:underline}
.pendencias-ord-seta{font-size:.62em;line-height:1}
/* Segundo criterio da coluna Pendencia (numero do protocolo), discreto ao lado
   do rotulo: a celula mostra titulo E protocolo, entao ordenar pelos dois faz
   sentido no mesmo cabecalho. */
.pendencias-ord-alt{margin-left:.45rem;font-size:.82em;font-weight:600;opacity:.72}
.pendencias-ord-alt.is-ativa,.pendencias-ord-alt:hover,.pendencias-ord-alt:focus-visible{opacity:1}
.pendencia-acoes{display:flex;gap:.35rem;justify-content:flex-end;align-items:center;flex-wrap:nowrap;white-space:nowrap}
.pendencia-arquivada{opacity:.78;background:color-mix(in srgb,var(--table-head) 75%,transparent)}
/* .modal (0,1,0) é declarado depois e vencia por ordem, anulando a largura de
   760px e o max-height. Qualificar com .modal empata a especificidade e resolve. */
.modal.modal-pendencia{width:min(760px,calc(100vw - 2rem));max-width:none;max-height:min(88vh,820px)}
.pendencia-descricao{font-size:.88rem;white-space:pre-wrap;overflow-wrap:anywhere}
.pendencia-historico{max-height:280px;overflow:auto;overscroll-behavior:contain;font-size:.83rem;border:1px solid var(--border-light);border-radius:8px;padding:0 .75rem}
.pendencia-evento{padding:.65rem 0;border-bottom:1px solid var(--border-light);overflow-wrap:anywhere}
.pendencia-evento:last-child{border-bottom:0}
.pendencia-evento time{display:block;color:var(--text-muted);font-size:.72rem;margin-top:.18rem}
/* Origem da pendência: de qual canal veio a mensagem que a abriu. Filete em
   --primary como a citação de resposta do chat, para ler como "isto veio de
   outro lugar" e não como mais um campo do formulário. */
.pendencia-origem{margin:.9rem 0 1.1rem;padding:.7rem .85rem;border-left:3px solid var(--primary);border-radius:8px;background:var(--bg)}
.pendencia-origem h4{margin:0 0 .35rem;font-size:.82rem}
.pendencia-origem-linha{font-size:.82rem;overflow-wrap:anywhere}
.pendencia-origem-trecho{margin:.45rem 0;padding-left:.6rem;border-left:2px solid var(--border);color:var(--text-secondary);font-size:.82rem;white-space:pre-wrap;overflow-wrap:anywhere}
.pendencia-origem-imagem{display:block;max-width:min(260px,100%);margin:.5rem 0}
.pendencia-origem-imagem img{display:block;max-width:100%;max-height:230px;border:1px solid var(--border-light);border-radius:9px;background:var(--white);cursor:zoom-in}
.pendencia-origem-anexo{display:inline-block;margin:.35rem 0;font-size:.82rem}
.pendencia-origem .btn{margin-top:.4rem}
/* Selo na lista: leva direto à mensagem, sem abrir o detalhe antes. */
.pendencia-origem-selo{display:inline-flex;align-items:center;gap:4px;margin-top:.25rem;font-size:.72rem;font-weight:700;color:var(--primary-dark)}
.pendencia-origem-selo svg{flex:0 0 auto}
.pendencia-comentario{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.5rem}
.pendencia-arquivo-acoes{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border-light)}
/* O :not([hidden]) preserva o display:none nativo do atributo hidden: sem ele, o
   bloco de confirmação ("Confirma esta ação?") aparecia sempre aberto e os botões
   Confirmar/Cancelar pareciam não executar nada. */
.pendencia-arquivo-acoes>div:not([hidden]){display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}
.setores-multiplos{border:1px solid var(--border-light);border-radius:8px;padding:.75rem}
.setores-multiplos legend{padding:0 .3rem}
.setores-opcoes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem .75rem;margin-top:.55rem;max-height:150px;overflow:auto}
.setores-opcoes label{display:flex;align-items:center;gap:.45rem;min-width:0;min-height:38px;font-size:.85rem}
.setores-opcoes input{width:17px;height:17px;accent-color:var(--primary);flex:0 0 auto}
.setores-opcoes span{overflow-wrap:anywhere}

@container pendpainel (max-width:1200px){
  .pendencias-filtros{grid-template-columns:repeat(4,minmax(150px,1fr))}
  .pendencias-filtros>label:first-child{grid-column:span 2}
  /* Sem esta redução a tabela pede 1167px em um espaço de 1139px e a coluna
     Ações fica cortada na borda do card, exigindo rolagem horizontal. */
  .pendencias-lista td:first-child{min-width:190px}
}

/* A GRADE DOS FILTROS PRECISA DE UM TERCEIRO PASSO, E ELE TEM DE SER DE
   CONTEINER (medido em 28/08/2026, cartao 316).

   O passo de 4 colunas pergunta ao CONTEINER e o passo de 2 colunas, logo
   abaixo, pergunta a JANELA. Em tablet de 820px a janela nao e estreita, mas o
   conteiner e: a barra lateral fica aberta acima de 768px e come 240px, entao
   sobram cerca de 530px. Resultado medido: a grade de 4 colunas pedia 913px
   nesse espaco e os rotulos e o bloco de acoes passavam 93px alem da janela.

   O conserto e perguntar ao conteiner tambem aqui, e nao baixar o minimo das
   colunas: com minmax(150px,1fr) quatro colunas nunca cabem em 530px, e
   encolher o minimo so faria o campo ficar pequeno demais para digitar. */
@container pendpainel (max-width:700px){
  .pendencias-filtros{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pendencias-filtros>label:first-child{grid-column:1/-1}
  .pendencias-filtros .pendencias-check{grid-column:1/-1;min-height:44px}
  .pendencias-filtros-acoes{grid-column:1/-1;justify-content:stretch}
}

/* 768px e não 760px: o resto do sistema usa 768 e, na faixa de 761 a 768, a
   tabela já estava em modo card enquanto .pendencia-acoes seguia com nowrap. */
@media (max-width:768px){
  /* 2 colunas no telefone (10/08): empilhados, os 8 filtros empurravam a
     lista para baixo de uma tela inteira de rolagem. Buscar e a marcação de
     atraso seguem em linha cheia. */
  .pendencias-filtros{grid-template-columns:repeat(2,minmax(0,1fr));padding:.85rem;gap:.55rem .6rem}
  .pendencias-filtros>label:first-child{grid-column:1/-1}
  /* 34px era o alvo de toque REDUZIDO justamente no celular, e a regra especifica
   vencia a regra geral de 44px. O rotulo inteiro e o alvo desta marcacao. */
  .pendencias-filtros .pendencias-check{grid-column:1/-1;min-height:44px}
  .pendencias-filtros-acoes{grid-column:1/-1;justify-content:stretch}
  .pendencias-filtros-acoes .btn{flex:1}
  .pendencia-acoes{flex-wrap:wrap;white-space:normal}
  .pendencias-lista{overflow:visible}
  .pendencias-lista td:first-child{min-width:0;max-width:none}
  .pendencia-acoes{justify-content:flex-end}
  .modal.modal-pendencia{width:calc(100vw - 1rem);max-height:calc(100vh - 1rem);max-height:calc(100dvh - 1rem)}
  .modal-pendencia .form-row{grid-template-columns:1fr}
  .pendencia-comentario{grid-template-columns:1fr}.pendencia-comentario .btn{width:100%}
  .setores-opcoes{grid-template-columns:1fr}
}
@media (max-width:360px){.pendencias-cabecalho .btn{width:100%}.pendencias-filtros-acoes{display:grid;grid-template-columns:1fr}.pendencia-acoes{justify-content:stretch}.pendencia-acoes .btn{flex:1}}

html[data-theme="escuro"] {
    --primary: #d8a82f;
    --primary-dark: #f2ca69;
    --primary-light: #2d281c;
    --accent: #ffc340;
    --on-primary: #18130a;
    --focus-ring: #ffc340;
    --brand-dark: #080d12;
    --bg: #0b1117;
    --white: #17212a;
    --border: #34414c;
    --border-light: #2a3640;
    --text-primary: #eef2f5;
    --text-secondary: #c8d0d6;
    --text-muted: #a5afb8;
    --table-head: #202a33;
    --table-hover: #1d2831;
    --danger: #ff9187;
    --danger-bg: #351e20;
    --warning: #f1bd54;
    --warning-bg: #342a18;
    --success: #68d4a0;
    --success-bg: #173127;
    --shadow: 0 1px 3px rgba(0,0,0,.28), 0 1px 2px rgba(0,0,0,.18);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* Shell travado no viewport: a PÁGINA nunca rola. O conteúdo rola por dentro da
   própria região (padrão de ERP: Gmail, Slack, Linear). O que não existe é
   conteúdo que não rola em lugar nenhum: tabela longa rola dentro do painel dela. */
html, body { height: 100vh; height: 100dvh; overflow: hidden; }
/* O travamento acima vale para o SHELL, que rola por dentro. Página solta (login,
   recuperação de senha e, sobretudo, o cadastro do Google Authenticator, a tela
   mais alta do fluxo) é documento normal e PRECISA rolar: com height fixo em
   100dvh e overflow hidden no html, o cartão de 933px numa janela de 720px ficava
   cortado em cima E embaixo, sem barra de rolagem nenhuma, e o topo era
   inalcançável. Chaveado pela ausência do shell para não depender de uma classe
   que a próxima página avulsa esqueceria de declarar. */
html:not(:has(.app-shell)), html:not(:has(.app-shell)) > body { height: auto; min-height: 100vh; min-height: 100dvh; overflow: visible; }
/* text-size-adjust sem prefixo junto do -webkit-: o Firefox DESCARTA a versao
   so com prefixo e escreve "Declaracao descartada" no console (visto no relato
   da Oficicar em 20/08/2026). Sem ela, o Firefox do celular fica livre para
   reajustar o corpo do texto por conta propria. */
html { max-width: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
    /* Face original por ordem explícita do dono: escala, peso e espaçamento podem
       mudar, a família não. Não trocar, não importar webfont. */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--bg);
    color: var(--text-primary);
    font-size: 15px;
    line-height: 1.5;
}
body { max-width: 100%; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.skip-link { position: fixed; z-index: 999; left: 12px; top: -100px; padding: 10px 14px; border-radius: 8px; background: var(--white); color: var(--text-primary); font-weight: 700; box-shadow: var(--shadow); }
.skip-link:focus { top: 12px; }

/* ---------------------------------------------------------------- Shell */
/* position:fixed e não só height+overflow:hidden: overflow hidden ainda permite
   rolagem PROGRAMÁTICA (só `clip` não permite), e com isso um foco em campo fora
   da dobra empurrava o shell inteiro para cima sem volta. Fixando o shell, o body
   fica sem conteúdo em fluxo e a janela não tem o que rolar.
   min-height:0 em toda a cadeia é obrigatório: item de flex/grid nasce
   min-height:auto e, sem isso, o filho ESTOURA a altura em vez de rolar. */
.app-shell { position: fixed; inset: 0; display: flex; min-height: 0; overflow: hidden; }
.app-main { flex: 1; min-width: 0; min-height: 0; margin-left: var(--sidebar-width); display: flex; flex-direction: column; overflow: hidden; transition: margin-left .2s ease; }
body.sidebar-recolhida .app-main { margin-left: var(--sidebar-collapsed); }
/* Único scroller da área principal. O padding lateral em max() centra o conteúdo
   em 1440px SEM tirar a barra de rolagem da borda da janela: com max-width +
   margin auto no scroller, a barra flutuaria no meio da tela em 1920. */
.conteudo { flex: 1; min-height: 0; width: 100%; overflow-y: auto; overflow-x: hidden; padding: 22px max(22px, calc((100% - 1440px) / 2)); scrollbar-gutter: stable; }

/* ---------------------------------------------------------------- Sidebar */
.sidebar {
    position: fixed; inset: 0 auto 0 0; width: var(--sidebar-width); z-index: 60;
    background: linear-gradient(180deg, #101820 0%, #1b2732 100%);
    color: #eeeae2; display: flex; flex-direction: column;
    transition: width .2s ease, transform .2s ease;
}
body.sidebar-recolhida .sidebar { width: var(--sidebar-collapsed); }
body.sidebar-recolhida .nav-label,
body.sidebar-recolhida .brand-nome,
body.sidebar-recolhida .sidebar-empresa .nav-label { display: none; }
body.sidebar-recolhida .nav-badge { position: absolute; top: 6px; right: 8px; }

/* Altura fixa igual à topbar: as duas divisórias horizontais formam uma linha única. */
.sidebar-brand { position: relative; display: flex; align-items: center; justify-content: space-between; height: var(--topbar-h); padding: 0 14px; border-bottom: 1px solid rgba(255,255,255,.12); }
.brand-link { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; min-width: 0; }
.brand-link:hover { text-decoration: none; }
.brand-logo { width: 34px; height: 34px; flex: 0 0 auto; object-fit: contain; }
/* Nomes longos de tenant quebram em até 2 linhas com reticências, sem estourar a sidebar. */
.brand-nome { font-weight: 700; font-size: .92rem; line-height: 1.22; letter-spacing: .2px; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.sidebar-collapse { background: transparent; border: none; color: rgba(255,255,255,.7); cursor: pointer; padding: 4px; border-radius: 6px; }
.sidebar-collapse:hover { background: rgba(255,255,255,.12); color: #fff; }
body.sidebar-recolhida .sidebar-collapse svg { transform: rotate(180deg); }
body.sidebar-recolhida .sidebar-brand { padding-inline: 10px; }
body.sidebar-recolhida .brand-link { width: 100%; justify-content: center; }
body.sidebar-recolhida .brand-logo { width: 32px; height: 32px; }
body.sidebar-recolhida .sidebar-collapse { position: absolute; right: -13px; top: 18px; width: 27px; height: 27px; display: grid; place-items: center; padding: 0; background: #24313d; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; box-shadow: 0 4px 12px rgba(0,0,0,.22); }
body.sidebar-recolhida .nav-item { justify-content: center; padding-inline: 8px; }

.sidebar-nav { flex: 1; overflow-y: auto; padding: 10px 8px; display: flex; flex-direction: column; gap: 2px; }
.nav-item {
    position: relative; display: flex; align-items: center; gap: 11px;
    padding: 10px 12px; border-radius: 8px; color: #ddd9d1; font-size: .92rem;
    text-decoration: none; white-space: nowrap;
}
.nav-item:hover { background: rgba(255,255,255,.1); color: #fff; text-decoration: none; }
.nav-item.active { background: rgba(255,185,0,.13); color: #fff; font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); }
.nav-item svg { flex: 0 0 auto; }
.nav-badge {
    margin-left: auto; background: var(--accent); color: var(--brand-dark); font-size: .68rem; font-weight: 700;
    min-width: 19px; height: 19px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px;
}
.sidebar-footer { padding: 10px 14px; border-top: 1px solid rgba(255,255,255,.12); }
.sidebar-empresa { display: flex; align-items: center; gap: 8px; font-size: .78rem; color: rgba(255,255,255,.75); overflow: hidden; }
.sidebar-empresa .nav-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 55; }

/* ---------------------------------------------------------------- Topbar */
.topbar {
    height: var(--topbar-h); background: var(--white); border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 12px; padding: 0 18px; position: sticky; top: 0; z-index: 40;
}
.topbar-menu { display: none; background: transparent; border: none; cursor: pointer; color: var(--text-secondary); padding: 6px; border-radius: 8px; }
.topbar-menu:hover { background: var(--primary-light); color: var(--primary); }
.topbar-titulo { font-size: 1.05rem; font-weight: 700; color: var(--text-primary); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-acoes { display: flex; align-items: center; gap: 6px; }
.topbar-btn { background: transparent; border: none; cursor: pointer; color: var(--text-secondary); padding: 8px; border-radius: 8px; display: inline-flex; align-items: center; gap: 8px; position: relative; }
.topbar-btn:hover { background: var(--primary-light); color: var(--primary); }
.tema-icone { display: inline-grid; place-items: center; }
.tema-icone-sol { display: none; }
html[data-theme="escuro"] .tema-icone-lua { display: none; }
html[data-theme="escuro"] .tema-icone-sol { display: inline-grid; }
.notif-dot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; background: var(--danger); border-radius: 50%; }

.topbar-notif, .topbar-user { position: relative; }
.notif-painel, .user-menu {
    display: none; position: absolute; right: 0; top: calc(100% + 8px); background: var(--white);
    border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 10px 30px rgba(15,23,42,.14);
    min-width: 280px; z-index: 70; overflow: hidden;
}
.notif-painel.aberto, .user-menu.aberto { display: block; }
.notif-header { padding: 10px 14px; font-weight: 700; font-size: .85rem; border-bottom: 1px solid var(--border-light); }
.notif-lista { max-height: 320px; overflow-y: auto; }
.notif-item { display: block; padding: 10px 14px; border-bottom: 1px solid var(--border-light); font-size: .84rem; color: var(--text-secondary); }
.notif-item:hover { background: var(--primary-light); text-decoration: none; }
.notif-item .notif-hora { display: block; font-size: .72rem; color: var(--text-muted); margin-top: 2px; }
.notif-item.nao-lida { background: #fff5cf; font-weight: 600; color: var(--text-primary); }
.notif-vazio { padding: 16px 14px; font-size: .84rem; color: var(--text-muted); text-align: center; }

.user-btn { padding: 5px 8px; }
.user-avatar {
    width: 32px; height: 32px; border-radius: 50%; background: var(--primary); color: var(--on-primary);
    display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .9rem; flex: 0 0 auto;
}
.user-info { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.user-nome { font-size: .84rem; font-weight: 600; color: var(--text-primary); }
.user-papel { font-size: .7rem; color: var(--text-muted); }
.user-menu { min-width: 190px; }
.user-menu-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 10px 14px; font-size: .87rem; color: var(--text-secondary); background: none; border: none; cursor: pointer; text-align: left; }
.user-menu-item:hover { background: var(--primary-light); color: var(--primary); text-decoration: none; }
.user-menu-sair { color: var(--danger); }
.user-menu-sair:hover { background: var(--danger-bg); color: var(--danger); }

/* ---------------------------------------------------------------- Cards */
.card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.card + .card, .mt-3 { margin-top: 18px; }
.card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border-light); flex-wrap: wrap; }
.card-title { display: flex; align-items: center; gap: 9px; font-size: .98rem; font-weight: 700; color: var(--text-primary); }
.card-title svg { color: var(--primary); }
.card-body { padding: 18px; }

/* --------------------------------------------------- Recolher e expandir */
/* Componente do app.js (ver "Recolher e expandir" la). Existe SO no modo
   cartao: no desktop a tabela e uma tabela de verdade e o JS remove os botoes.
   Por isso o estado neutro aqui e display:none, e tudo que liga o componente
   mora dentro da media query de 768px, mais abaixo. */
/* Seletor com `button` de proposito: `.btn` e declarado MAIS ABAIXO neste
   arquivo com `display:inline-flex`, e com a mesma especificidade a regra
   posterior venceria, deixando "Recolher todos" visivel no desktop. O par
   `button.` sobe para (0,1,1) e resolve sem !important. As regras que LIGAM o
   componente, na media query, carregam o mesmo prefixo pelo mesmo motivo. */
button.tex-recolher-btn, button.tex-recolher-bloco, button.tex-recolher-tudo { display: none; }
.card-footer { padding: 13px 18px; border-top: 1px solid var(--border-light); display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

/* ALTURA IGUAL E OPCAO, E ELA JA TEM NOME: .grid-2-igual (medido em
   28/08/2026, cartao 316, relato do Marcos sobre "espaco vazio nos blocos").
   O .grid-2 esticava por padrao, entao em Configuracoes o card "Trocar senha"
   era puxado a altura do "Meu perfil" e sobravam cerca de 170px de branco
   embaixo do botao. Quem quer os quatro blocos do mesmo tamanho pede pelo
   modificador, que existe justamente para isso e so o dashboard usa. */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.grid-2-igual { align-items: stretch; }
/* Dashboard: as duas linhas de cards dividem a mesma altura, então os quatro
   blocos ficam do mesmo tamanho no desktop (no empilhado mobile cada um é livre). */
@media (min-width: 1025px) { .grid-2-igual { grid-auto-rows: 1fr; } }
/* Cards lado a lado no grid: o gap já separa, então zera a margem de empilhamento
   (.card + .card) que desalinhava as alturas; o corpo estica para altura igual. */
/* min-width:0 é obrigatório: item de grid nasce com min-width:auto e não encolhe
   abaixo do conteúdo. Como .table tem min-width:680px, o card inflava para 682px
   numa tela de 390px; com overflow-x:clip no body a página não rola e o
   .table-container ficava do tamanho do card, sem rolagem própria. Resultado: as
   últimas colunas ficavam inalcançáveis no celular. */
.grid-2 > .card { margin-top: 0; height: auto; display: flex; flex-direction: column; min-width: 0; }
/* O height:100% e o outro lado da altura igual: sem ele o card nao preenche a
   linha esticada. Fica junto do modificador, pelo mesmo motivo. */
.grid-2-igual > .card { height: 100%; }
.grid-2 > .card > .table-container, .grid-2 > .card > .card-body { flex: 1 1 auto; }
.grid-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }

/* Chips compactos de KPI */
.chip-kpi { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 13px 16px; display: flex; align-items: center; gap: 12px; box-shadow: var(--shadow); }
.chip-kpi .chip-icone { width: 38px; height: 38px; border-radius: 9px; background: var(--primary-light); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.chip-kpi .chip-valor { font-size: 1.22rem; font-weight: 800; line-height: 1.15; }
.chip-kpi .chip-label { font-size: .76rem; color: var(--text-muted); }
.chip-kpi.alerta .chip-icone { background: var(--warning-bg); color: var(--warning); }
.chip-kpi.perigo .chip-icone { background: var(--danger-bg); color: var(--danger); }

/* ---------------------------------------------------------------- Formulários */
.form-row { display: flex; gap: 14px; flex-wrap: wrap; }
.form-row .form-group { flex: 1; min-width: 180px; }
.form-group { margin-bottom: 14px; }
.form-label { display: block; font-size: .82rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 5px; }
/* Asterisco de obrigatório colado ao rótulo: sem espaço no HTML, respiro de 2px aqui. */
.form-label .required { color: var(--danger); margin-left: 2px; }
.form-control {
    width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px;
    font-size: 16px; font-family: inherit; color: var(--text-primary); background: var(--white);
}
.form-control:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(255,185,0,.22); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
textarea.form-control { resize: vertical; min-height: 74px; min-width: 0; }
.form-hint { font-size: .76rem; color: var(--text-muted); margin-top: 4px; display: block; }
.form-hint-erro { color: var(--danger); }
.form-hint-ok { color: var(--success); }
.acoes-inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.termo-pendencias { margin: 8px 0 0; font-size: .74rem; color: var(--danger); min-height: 1em; }
.termo-pendencias:empty { display: none; }
.form-check { display: flex; align-items: center; gap: 8px; font-size: .88rem; cursor: pointer; }
.form-check input { accent-color: var(--primary); width: 16px; height: 16px; }

/* ---------------------------------------------------------------- Botões */
.btn {
    display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 8px;
    font-size: .88rem; font-weight: 600; border: 1px solid transparent; cursor: pointer; text-decoration: none;
    background: var(--white); color: var(--text-secondary); transition: background .12s ease;
}
.btn:hover { text-decoration: none; }

/* Alvo de toque: 44px de altura em apontador GROSSO.
   Medido em 02/09/2026 pelo eixo de layout do portao: o botao de entrar do
   login media 364x41px, tres pixels abaixo do minimo da WCAG 2.5.5, e o toque
   a 21px do centro nao chegava nele. Tres pixels parecem nada e sao a
   diferenca entre acertar e errar o botao com o polegar.
   So no dedo: no mouse o desenho fica identico, porque o ponteiro acerta 41px
   sem esforco e crescer todo botao do sistema mudaria a densidade das telas
   sem resolver problema nenhum.
   .btn-sm fica de fora de proposito: ele vive dentro de linha de tabela, onde
   crescer 14px empurraria a linha inteira. Quando alguma tela de toque depender
   de um .btn-sm, ela ganha a regra dela, com o motivo escrito ao lado. */
@media (any-pointer: coarse) {
    .btn:not(.btn-sm) { min-height: 44px; }
}
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover { background: var(--primary-dark); }
html[data-theme="escuro"] .btn-primary { background:#8a5b00 !important; color:#fff !important; }
html[data-theme="escuro"] .btn-primary:hover,
html[data-theme="escuro"] .btn-primary:focus-visible { background:#5c3d00 !important; color:#fff !important; }
.btn-secondary { background: var(--white); border-color: var(--border); color: var(--text-secondary); }
.btn-secondary:hover { background: var(--bg); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #b91c1c; }
.btn-outline { background: transparent; border-color: var(--primary); color: var(--primary); }
.btn-outline:hover { background: var(--primary-light); }
.btn-sm { padding: 6px 10px; font-size: .78rem; min-height: 30px; justify-content: center; }
.btn-icon { padding: 6px; }
/* Ações de linha: sempre lado a lado, alinhadas à direita da célula, com alturas iguais. */
.tbl-acoes { display: flex; gap: 5px; flex-wrap: nowrap; justify-content: flex-end; align-items: center; }
.table th.text-right, .table td.text-right { text-align: right; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ---------------------------------------------------------------- Tabelas */
.table-container { overflow-x: auto; }
.table caption { text-align: left; }
.table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.table th { text-align: left; padding: 10px 14px; background: var(--table-head); color: var(--text-secondary); font-size: .76rem; text-transform: uppercase; letter-spacing: .4px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.table td { padding: 11px 14px; border-bottom: 1px solid var(--border-light); vertical-align: middle; }
.table tbody tr:hover { background: var(--table-hover); }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-muted { color: var(--text-muted); }

/* ---------------------------------------------------------------- Badges */
/* white-space:nowrap: o selo é uma pílula de um rótulo só e nunca quebra no meio.
   Sem isto, "Contato com cliente" e "Pedido a fornecedor" viravam duas ou três
   linhas quando a coluna apertava (58px contra 23px), e a linha inteira da tabela
   crescia junto. O que cede na falta de espaço é a LARGURA da tabela, que já tem
   rolagem própria no painel, não a altura de cada linha. */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: .72rem; font-weight: 700; white-space: nowrap; }
/* Dois selos na mesma célula (Status + Arquivada) saem colados: o HTML não tem
   espaço entre eles e inline-flex não gera um. */
.badge + .badge { margin-left: 4px; }
.badge-teal { background: var(--primary-light); color: var(--primary); }
.badge-cinza { background: #f1f5f9; color: var(--text-secondary); }
.badge-verde { background: var(--success-bg); color: var(--success); }
.badge-amarelo { background: var(--warning-bg); color: var(--warning); }
.badge-vermelho { background: var(--danger-bg); color: var(--danger); }

/* ------------------------------------------------ Participantes da conversa */
.thread-participantes { display: inline-flex; align-items: center; gap: 5px; margin-left: 10px; padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--text-secondary); font-size: .74rem; font-weight: 600; cursor: pointer; font-family: inherit; white-space: nowrap; }
.thread-participantes:hover, .thread-participantes:focus-visible { border-color: var(--primary); color: var(--primary); }
.plist { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 55vh; overflow-y: auto; }
.plist-item { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 9px; }
.plist-item:hover { background: var(--table-hover); }
.plist-avatar { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 999px; background: var(--primary-light); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .9rem; overflow: hidden; }
.plist-avatar img { width: 100%; height: 100%; object-fit: cover; }
.plist-info { display: grid; gap: 1px; min-width: 0; }
.plist-nome { font-weight: 650; font-size: .88rem; overflow-wrap: anywhere; }
.plist-papel { font-size: .75rem; color: var(--text-muted); }
.plist-carregando { padding: 14px 10px; color: var(--text-muted); font-size: .85rem; }

/* ------------------------------------------------ Acesso por IP (Configurações) */
.card-subtitulo { display: flex; align-items: center; gap: 7px; font-size: .93rem; font-weight: 700; margin: 18px 0 6px; color: var(--text-primary); }
/* Destaque de chegada por aviso de bloqueio: guia o olho direto ao painel. */
.card-destacado { outline: 2px solid var(--warning); outline-offset: 2px; }
.ip-liberar-linha { display: flex; gap: 9px; align-items: stretch; }
.ip-liberar-linha .form-control { flex: 1 1 auto; min-width: 0; }
.ip-liberar-linha .btn { flex: 0 0 auto; white-space: nowrap; }
.ip-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 4px 0 0; }
.ip-chip { display: inline-flex; align-items: center; gap: 7px; background: var(--tint, #fbf0d2); border: 1px solid var(--border); border-radius: 999px; padding: 5px 6px 5px 12px; font-size: .82rem; }
.ip-chip code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8rem; word-break: break-all; }
.ip-chip-remover { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 0; border-radius: 999px; background: transparent; color: var(--text-muted); cursor: pointer; padding: 0; }
.ip-chip-remover:hover, .ip-chip-remover:focus-visible { background: var(--danger-bg); color: var(--danger); }
.tabela-acessos td code { font-size: .8rem; word-break: break-all; }
.tabela-acessos-papel { display: block; font-size: .74rem; }
html[data-theme="escuro"] .ip-chip { background: #22303c; }

/* ---------------------------------------------------------------- Alertas */
.alert { display: flex; align-items: flex-start; gap: 10px; padding: 12px 15px; border-radius: 9px; font-size: .87rem; margin-bottom: 15px; }
.alert-info { background: var(--primary-light); color: var(--primary-dark); border: 1px solid #eadcb5; }
.alert-warning { background: var(--warning-bg); color: var(--warning); border: 1px solid #fde68a; }
.alert-danger { background: var(--danger-bg); color: var(--danger); border: 1px solid #fecaca; }
.alert-success { background: var(--success-bg); color: var(--success); border: 1px solid #b7e0c9; }

/* ---------------------------------------------------------------- Modal */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(15,23,42,.5); z-index: 90; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; }
.modal-overlay.aberto { display: flex; }
body.modal-aberto { overflow: hidden; }
.modal { background: var(--white); border-radius: 12px; width: 100%; max-width: 560px; box-shadow: 0 20px 50px rgba(15,23,42,.25); max-height: calc(100dvh - 32px); overflow-y: auto; }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; border-bottom: 1px solid var(--border-light); }
.modal-header h3 { font-size: .98rem; display: flex; align-items: center; gap: 8px; }
.modal-close { min-width: 32px; min-height: 32px; background: none; border: none; font-size: 1.4rem; line-height: 1; cursor: pointer; color: var(--text-muted); padding: 2px 6px; border-radius: 6px; }
.modal-close:hover { background: var(--bg); color: var(--text-primary); }
.modal-body { padding: 18px; }
.modal-footer { padding: 13px 18px; border-top: 1px solid var(--border-light); display: flex; justify-content: flex-end; gap: 9px; }

/* ---------------------------------------------------------------- Visualizador de imagem
   Acima do modal (z-index 200 contra 90) porque ele abre tanto da bolha do chat
   quanto de dentro do detalhe da pendência. Fundo escuro fixo nos dois temas: é
   uma superfície de leitura de imagem, não uma superfície do sistema.
   A marca d'água é irmã do palco, não filha: dentro do palco ela rolaria junto
   com a imagem ampliada e deixaria a borda limpa. */
.tex-visualizador { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; background: rgba(8,12,18,.94); }
.tex-visualizador-barra { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; padding-top: calc(10px + env(safe-area-inset-top)); background: rgba(8,12,18,.55); position: relative; z-index: 2; }
.tex-visualizador-nome { color: #f1f5f9; font-size: .84rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tex-visualizador-acoes { display: flex; gap: 8px; flex: 0 0 auto; }
.tex-visualizador-palco { position: relative; z-index: 1; flex: 1; min-height: 0; display: grid; place-items: center; padding: 14px; padding-bottom: calc(14px + env(safe-area-inset-bottom)); overflow: auto; overscroll-behavior: contain; }
.tex-visualizador-palco img { display: block; max-width: 100%; max-height: 100%; cursor: zoom-in; }
.tex-visualizador-palco.zoom { place-items: start; }
.tex-visualizador-palco.zoom img { max-width: none; max-height: none; cursor: zoom-out; }
.tex-visualizador-marca { position: absolute; inset: 0; z-index: 3; pointer-events: none; user-select: none; background-repeat: repeat; }
@media (max-width: 640px) {
    .tex-visualizador-barra { flex-wrap: wrap; }
    .tex-visualizador-nome { flex: 1 1 100%; }
}

/* ---------------------------------------------------------------- Login */
.login-body { min-height: 100vh; min-height:100dvh; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 76% 12%, #654700 0%, transparent 32%), radial-gradient(circle at 10% 92%, #293846 0%, transparent 34%), linear-gradient(145deg,#101820,#080d12); padding: 20px; }
/* margin:auto e NÃO align-items:center no pai: margem automática só absorve folga
   POSITIVA. Quando o cartão passa da altura da janela ela vira zero e o cartão
   encosta no topo, rolável até o fim. Com a centralização do flex, o excedente
   saía metade para cima, e o que passa da borda superior não entra na área de
   rolagem: ficava perdido. Sobra espaço: continua centralizado igual. */
.login-card { position:relative; overflow:hidden; margin: auto; background: linear-gradient(155deg,rgba(31,44,55,.98),rgba(13,21,28,.98)); color:#fff; border:1px solid rgba(255,185,0,.3); border-radius: 18px; box-shadow: 0 25px 60px rgba(0,0,0,.45); width: 100%; max-width: 430px; padding: 34px 32px; }
.login-card::before { content:""; position:absolute; width:180px; height:180px; right:-110px; top:-105px; border-radius:50%; background:rgba(255,185,0,.08); pointer-events:none; }
.login-logo { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 22px; }
.login-logo img { width: 112px; height: 90px; object-fit:contain; filter:drop-shadow(0 8px 18px rgba(0,0,0,.25)); }
.login-logo h1 { font-size: 1.35rem; color: #fff; }
.login-logo p { font-size: .82rem; color: #d6dce1; text-align:center; }
.login-logo .login-eyebrow { margin-bottom:-5px; color:var(--accent); font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.09em; }
.login-card .form-label { color:#f3f5f6; }
.login-card .form-control { border-color:#5c6974; background:rgba(255,255,255,.08); color:#fff; }
.login-card .form-control::placeholder { color:#aeb8c0; opacity:1; }
.login-card .form-control:focus { border-color:var(--accent); background:rgba(255,255,255,.12); }
.login-card .btn-primary { background:var(--accent); color:#18130a; }
.login-card .btn-primary:hover { background:#ffd05a; }
.login-card .alert-danger { color:#fecaca; background:rgba(127,29,29,.36); border-color:#9f4545; }
.login-card .alert-success { color:#7be0ad; background:rgba(17,94,59,.42); border-color:#238066; }
.login-card .btn { width: 100%; justify-content: center; padding: 11px; font-size: .95rem; }
.login-links { margin-top: 16px; text-align: center; font-size: .82rem; }
.login-links a { color:#ffd45f; }
.login-seguranca { display:flex; align-items:center; justify-content:center; gap:6px; margin:19px 0 0; padding-top:15px; border-top:1px solid rgba(255,255,255,.12); color:#b8c1c8; font-size:.7rem; text-align:center; }

/* ---------------------------------------------------------------- Chat */
/* Item de flex e NÃO altura calculada: o chat divide a altura de .conteudo com a
   faixa de permissão de notificação, que é injetada por JavaScript e, em telefone
   estreito, empilha os botões e passa de 170px. Toda conta fechada (100dvh menos
   topbar menos padding, ou 100%) ignorava essa faixa, e o compositor com o campo
   de digitação caía para fora da tela: era o "campo cortado na parte inferior"
   relatado por Marcos em 31/07/2026. Como item de flex ele fica com o que sobra,
   qualquer que seja a altura da faixa, em qualquer largura. O min-height segura
   um chat utilizável em tela muito baixa: aí quem rola é .conteudo, e nada some. */
.conteudo:has(> .chat-wrap) { display: flex; flex-direction: column; }
.conteudo:has(> .chat-wrap) > .faixa-avisos { flex: 0 0 auto; }
.chat-wrap { display: grid; grid-template-columns: 320px minmax(0,1fr); grid-template-rows: minmax(0,1fr); gap: 0; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); flex: 1 1 auto; height: auto; min-height: 260px; }
.chat-lista { border-right: 1px solid var(--border); display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.chat-lista-header { padding: 12px 14px; border-bottom: 1px solid var(--border-light); display: flex; gap: 8px; align-items: center; }
.chat-lista-header .form-control { font-size: .85rem; padding: 7px 10px; }
.chat-convs { flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.conv-item { display: grid; grid-template-columns: 36px minmax(0,1fr) auto; align-items: center; gap: 10px; width: 100%; min-width:0; padding: 11px 14px; border: none; background: none; cursor: pointer; text-align: left; border-bottom: 1px solid var(--border-light); }
.conv-item:hover { background: #f8fafc; }
.conv-item.ativa { background: var(--primary-light); }
.conv-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--primary-light); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex: 0 0 auto; }
.conv-avatar.setor { border-radius: 9px; }
.conv-info { flex: 1; min-width: 0; overflow: hidden; display: flex; flex-direction: column; align-items: stretch; gap: 2px; }
.conv-titulo-linha { display:flex; align-items:center; gap:7px; min-width:0; overflow:hidden; }
/* Três níveis de verdade: o nome do canal domina, a prévia é claramente
   secundária e hora/contador são terciários. Antes tudo tinha quase o mesmo peso. */
.conv-nome { display: block; max-width: 100%; font-size: .875rem; font-weight: 650; line-height: 1.3; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-previa { display: block; max-width: 100%; font-size: .73rem; line-height: 1.35; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-item.nao-lida .conv-nome { font-weight: 800; }
.conv-item.nao-lida .conv-previa { color: var(--text-secondary); }
.conv-presenca,.thread-presenca { display:flex;align-items:center;gap:5px;color:var(--text-muted);font-size:.68rem;line-height:1.25; }
.conv-presenca { flex:0 0 auto; white-space:nowrap; }
.conv-presenca i,.thread-presenca i { width:7px;height:7px;flex:0 0 auto;border-radius:50%;background:#7b8490; }
.conv-presenca.presenca-online i,.thread-presenca.presenca-online i { background:var(--success); }
.conv-presenca.presenca-ausente i,.thread-presenca.presenca-ausente i { background:var(--warning); }
.thread-presenca { margin-top:2px; }
.conv-naolidas { background: var(--primary); color: var(--on-primary); font-size: .68rem; font-weight: 700; min-width: 19px; height: 19px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; }

.chat-thread { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.chat-thread-header { padding: 12px 16px; border-bottom: 1px solid var(--border-light); display: flex; align-items: center; gap: 10px; }
.chat-thread-header .conv-nome { font-size: .95rem; }
/* Busca dentro da conversa: barra entre o cabeçalho e o histórico. A lista de
   resultados tem teto de altura e rola sozinha, para não engolir o chat. */
.chat-busca { border-bottom: 1px solid var(--border-light); padding: 8px 16px; display: flex; flex-direction: column; gap: 6px; background: var(--white); }
.chat-busca-linha { display: flex; align-items: center; gap: 8px; }
.chat-busca-linha .form-control { flex: 1 1 auto; min-width: 0; font-size: .85rem; padding: 7px 10px; }
.chat-busca-total { flex: 0 0 auto; font-size: .72rem; color: var(--text-muted); white-space: nowrap; }
.chat-busca-resultados { max-height: 240px; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; }
.busca-msg-item { display: flex; flex-direction: column; align-items: stretch; gap: 2px; width: 100%; padding: 8px 10px; border: none; border-bottom: 1px solid var(--border-light); background: none; cursor: pointer; text-align: left; font: inherit; }
.busca-msg-item:hover, .busca-msg-item:focus-visible { background: var(--primary-light); }
.busca-msg-meta { font-size: .7rem; font-weight: 700; color: var(--text-secondary); }
.busca-msg-trecho { font-size: .8rem; color: var(--text-primary); overflow-wrap: anywhere; }
/* Quebra de linha digitada no compositor aparece na bolha (10/08). pre-line
   preserva o \n e colapsa espaços repetidos; sem isto o navegador achatava
   a mensagem em uma linha só. */
.msg-texto { white-space: pre-line; overflow-wrap: anywhere; }
/* Dourado literal com texto escuro fixo: --warning-bg claro é quase branco e o
   destaque sumia; o par fixo continua legível também no modo noturno. */
.busca-msg-trecho mark { background: #ffd75e; color: #101820; font-weight: 700; border-radius: 3px; padding: 0 1px; }
.busca-msg-estado { padding: 10px; font-size: .8rem; color: var(--text-muted); text-align: center; }
.busca-msg-mais { align-self: center; margin: 8px 0 4px; }
/* Busca GLOBAL de mensagens (25/08/2026): painel que desce sob o campo de busca
   da lista de conversas. Divide o visual com a busca de dentro do chat de
   proposito, para as duas se lerem como a mesma funcao em escopos diferentes.
   O teto de altura evita empurrar a lista de conversas para fora da tela. */
.chat-busca-global { border-bottom: 1px solid var(--border-light); background: var(--white); display: flex; flex-direction: column; }
.chat-busca-global-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px 6px 16px; font-size: .72rem; font-weight: 700; color: var(--text-secondary); }
.chat-busca-global-lista { max-height: 46vh; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; }
/* Nome do canal em que a mensagem esta: e a informacao que a busca global
   acrescenta sobre a local, entao vem primeiro e com a cor da marca. */
.busca-msg-canal { font-size: .72rem; font-weight: 800; color: var(--primary); overflow-wrap: anywhere; }
/* Resumo "em quais chats esta": chips clicaveis, cada um abrindo o chat com a
   busca local ja preenchida. 44px de altura para o alvo de toque no celular. */
.busca-msg-canais { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--border-light); }
.busca-msg-chip { display: inline-flex; align-items: center; min-height: 44px; padding: 4px 11px; border: 1px solid var(--border-light); border-radius: 999px; background: var(--white); color: var(--text-secondary); font: inherit; font-size: .74rem; font-weight: 700; cursor: pointer; text-align: left; }
.busca-msg-chip:hover, .busca-msg-chip:focus-visible { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }

.chat-msgs { flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px; display: flex; flex-direction: column; gap: 9px; background: #f8fafc; }
.msg { max-width: 74%; padding: 9px 13px; border-radius: 12px; font-size: .89rem; position: relative; }
.msg .msg-autor { font-size: .72rem; font-weight: 700; color: var(--primary); margin-bottom: 2px; }
.msg .msg-hora { display: block; font-size: .66rem; color: var(--text-muted); margin-top: 3px; text-align: right; }
.msg-recebida { background: var(--white); border: 1px solid var(--border-light); align-self: flex-start; border-bottom-left-radius: 4px; }
.msg-enviada { background: #fff1bd; align-self: flex-end; border-bottom-right-radius: 4px; }
.msg-encaminhada { border-left: 3px solid var(--primary); }
/* Destaque temporário de quem chega direto de /avisos (deep link até a
   mensagem, não só até a conversa). Mesma receita de .card-destacado
   (outline em --warning), classe removida pelo JS depois de alguns segundos. */
.msg-destaque { outline: 2px solid var(--warning); outline-offset: 2px; transition: outline-color .4s ease; }
/* Divisor "Mensagens não lidas": onde a conversa abre quando existe mensagem
   nova. Item de flex como as bolhas, ocupando a largura toda, e some sozinho
   ao trocar de conversa (o JS limpa o histórico). */
.chat-divisor-naolidas { display: flex; align-items: center; gap: 10px; margin: 5px 0; color: var(--warning); font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.chat-divisor-naolidas::before, .chat-divisor-naolidas::after { content: ''; flex: 1 1 0; height: 1px; background: currentColor; opacity: .4; }
.chat-divisor-naolidas span { flex: 0 0 auto; }
.msg-encaminhada .msg-encaminho { font-size: .7rem; color: var(--primary-dark); font-weight: 600; margin-bottom: 3px; display: flex; align-items: center; gap: 5px; }
.msg-acoes { display: flex; gap: 8px; margin-top: 5px; }
.msg-acao { min-height: 28px; background: none; border: none; color: var(--primary); font-size: .7rem; font-weight: 600; cursor: pointer; padding: 4px 2px; display: inline-flex; align-items: center; gap: 4px; }
.msg-acao:hover { text-decoration: underline; }
/* "Visualizar pendência" é um link de verdade (abre a pendência), então precisa
   perder o sublinhado e a cor de link herdados para ficar igual aos botões
   irmãos da mesma linha de ações. */
a.msg-acao, a.msg-acao:visited { text-decoration: none; color: var(--primary); }
.msg-anexo { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,185,0,.14); border-radius: 7px; padding: 6px 9px; font-size: .8rem; margin-top: 4px; color: var(--primary-dark); }
/* Prévia de imagem na bolha: limitada em altura para não dominar a conversa;
   o clique baixa o arquivo original, como no anexo comum. */
.msg-anexo-imagem { display: block; margin-top: 5px; max-width: min(280px, 100%); }
.msg-anexo-imagem img { display: block; max-width: 100%; max-height: 320px; border-radius: 9px; border: 1px solid var(--border-light); background: var(--white); cursor: zoom-in; }
/* Citação da mensagem respondida (reply): mesma família visual do encaminhado
   (filete em --primary), clicável para voltar à original. */
.msg-citacao { display: block; width: 100%; text-align: left; border: none; border-left: 3px solid var(--primary); background: rgba(0,0,0,.05); border-radius: 6px; padding: 5px 9px; margin-bottom: 5px; cursor: pointer; font: inherit; color: inherit; }
.msg-citacao:hover { background: rgba(0,0,0,.09); }
.msg-citacao-autor { display: block; font-size: .7rem; font-weight: 700; color: var(--primary-dark); }
.msg-citacao-trecho { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .76rem; color: var(--text-secondary); }

/* ---------------------------------------------------------------- Aviso com ciente (bolha)
   O selo reusa a receita de .badge/.badge-amarelo (mesmo padding, radius 999px,
   par de cores warning/warning-bg) para ler como alerta, não como primeira frase
   da mensagem. O contador reusa a receita de link discreto de .msg-acao (sem
   fundo nem borda, cor var(--primary), sublinhado) em vez do reset padrão de
   button, que é o que o deixava com cara de campo de formulário. */
.aviso-selo { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; padding: 3px 9px; margin-bottom: 6px; border-radius: 999px; background: var(--warning-bg); color: var(--warning); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; }
.aviso-ciente-linha { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; }
.aviso-contador { border: none; background: none; padding: 2px 0; margin: 0; font: inherit; font-size: .74rem; font-weight: 700; color: var(--primary); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.aviso-contador:hover, .aviso-contador:focus-visible, .aviso-contador[aria-expanded="true"] { color: var(--primary-dark); }
.aviso-prazo { font-size: .7rem; color: var(--text-muted); }
/* Separação do bloco de nomes: mesma ideia de divisor tracejado de .termo-fim,
   só que com a cor em variável (o original ali usa hex cru). */
.aviso-cientes-lista { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border-light); display: grid; gap: 4px; font-size: .78rem; }
.aviso-cientes-msg { color: var(--text-muted); }
.aviso-ciente-item { display: flex; align-items: center; gap: 6px; color: var(--text-secondary); }
.aviso-ciente-item::before { content: ""; width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: var(--text-muted); }
.aviso-ciente-item.deu { color: var(--success); }
.aviso-ciente-item.deu::before { background: var(--success); }
.aviso-ciente-item.inativo { opacity: .7; font-style: italic; }
.composer-aviso { flex: 1 1 100%; order: -1; display: flex; align-items: center; flex-wrap: wrap; column-gap: 16px; row-gap: 6px; padding-bottom: 8px; margin-bottom: 2px; border-bottom: 1px dashed var(--border-light); }
.composer-aviso-prazo { display: flex; align-items: center; gap: 8px; flex: 1 1 240px; min-width: 220px; }
.composer-aviso-prazo .form-label { margin: 0; white-space: nowrap; }
.composer-aviso-prazo .form-control { width: auto; flex: 1 1 auto; min-height: 34px; padding: 6px 9px; font-size: .82rem; }
.composer-aviso-previa { flex: 1 1 200px; font-size: .74rem; color: var(--text-muted); }
.chat-composer { padding: 12px 14px; border-top: 1px solid var(--border-light); display: flex; flex-wrap: wrap; gap: 9px; align-items: flex-end; min-width: 0; background: var(--white); }
.chat-composer textarea { flex: 1; min-width: 0; min-height: 44px; max-height: 130px; }
.chat-vazio { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-muted); gap: 10px; padding: 30px; text-align: center; }
.chat-carregar-antigas { align-self: center; flex: 0 0 auto; }
.msg-status { font-size: .66rem; color: var(--text-muted); margin-left: 6px; }
.msg-falhou { border: 1px solid #fecaca; background: #fff1f2; }
.msg-retry { color: var(--danger); }
/* Barra "Respondendo a": mesma receita da barra de anexo, acima do composer. */
.resposta-preview { display: none; align-items: center; gap: 9px; padding: 7px 12px; border-top: 1px solid var(--border-light); background: #f8fafc; font-size: .78rem; }
.resposta-preview.ativo { display: flex; }
.resposta-preview .resposta-dados { min-width: 0; flex: 1; border-left: 3px solid var(--primary); padding-left: 8px; }
.resposta-preview .resposta-para { display: block; font-weight: 700; color: var(--primary-dark); font-size: .72rem; }
.resposta-preview .resposta-trecho { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); }
.anexo-preview { display: none; align-items: center; gap: 9px; padding: 7px 12px; border-top: 1px solid var(--border-light); background: #f8fafc; font-size: .78rem; }
.anexo-preview.ativo { display: flex; }
.anexo-preview img { width: 38px; height: 38px; border-radius: 6px; object-fit: cover; }
.anexo-preview .anexo-dados { min-width: 0; flex: 1; }
.anexo-preview .anexo-nome { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-progresso { height: 3px; border-radius: 3px; background: var(--border); overflow: hidden; margin-top: 4px; }
.upload-progresso span { display: block; height: 100%; width: 0; background: var(--primary); transition: width .15s linear; }
.conv-meta { display: flex; min-width:0; flex-direction: column; align-items: flex-end; gap: 4px; }
.conv-hora { font-size: .66rem; color: var(--text-muted); white-space: nowrap; }

/* ---------------------------------------------------------------- Feedback */
.toast-area { position: fixed; right: 18px; bottom: 18px; z-index: 150; display: flex; flex-direction: column; gap: 8px; width: min(380px,calc(100vw - 32px)); pointer-events: none; }
.toast { opacity: 0; transform: translateY(8px); transition: opacity .2s,transform .2s; padding: 11px 14px; border-radius: 9px; background: #0f172a; color: #fff; box-shadow: 0 10px 30px rgba(15,23,42,.24); font-size: .84rem; }
.toast.visivel { opacity: 1; transform: translateY(0); }
/* Faixa de ativação dos avisos do navegador, no topo do conteúdo. Sem a
   permissão do navegador nenhum aviso cobre outra tela, então ela precisa ser
   vista: fica no fluxo do conteúdo, não flutuando num canto. */
.faixa-avisos { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; padding: 12px 16px; border: 1px solid var(--primary); border-left-width: 4px; border-radius: 10px; background: var(--primary-light); }
.faixa-avisos-texto { margin: 0; flex: 1 1 320px; min-width: 0; font-size: .84rem; line-height: 1.5; color: var(--text-primary); }
.faixa-avisos-acoes { display: flex; gap: 8px; flex-shrink: 0; }
.faixa-avisos-btn { border: 1px solid var(--primary); border-radius: 8px; background: var(--primary); color: var(--on-primary); padding: 8px 16px; min-height: 44px; font-size: .8rem; font-weight: 700; font-family: inherit; cursor: pointer; }
.faixa-avisos-btn:hover { filter: brightness(1.06); }
.faixa-avisos-btn[disabled] { opacity: .6; cursor: progress; }
.faixa-avisos-btn-claro { background: transparent; color: var(--text-secondary); border-color: var(--border); }
.faixa-avisos-btn-claro:hover { border-color: var(--primary); color: var(--primary); filter: none; }
.faixa-avisos-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
/* Estado bloqueado: só a borda muda. Um fundo claro fixo aqui ficaria ilegível
   no modo noturno, e não existe token de fundo de perigo nesta paleta. */
.faixa-avisos-bloqueada { border-color: var(--danger); }
@media (max-width: 600px) { .faixa-avisos-acoes { width: 100%; } .faixa-avisos-btn { flex: 1; } }

/* Aviso com botão (convite dos avisos do navegador). A área de toasts é
   pointer-events:none para não roubar clique da tela; o botão reativa o evento
   só nele, senão o convite ficaria bonito e inclicável. */
.toast { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.toast-acao { pointer-events: auto; flex-shrink: 0; border: 1px solid rgba(255,255,255,.5); border-radius: 7px; background: transparent; color: #fff; padding: 5px 12px; min-height: 32px; font-size: .78rem; font-weight: 700; font-family: inherit; cursor: pointer; }
.toast-acao:hover { background: rgba(255,255,255,.14); }
.toast-acao:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.toast.erro { background: #991b1b; }
.toast.sucesso { background: #115e3b; }
.toast.aviso { background: #92600a; }
.toast-com-acao { pointer-events:auto;display:flex;align-items:center;justify-content:space-between;gap:12px; }
.toast-com-acao a { color:#fff;text-decoration:underline;font-weight:750;white-space:nowrap; }
.politica-mensagens-admin { margin-top:18px;padding-top:16px;border-top:1px solid var(--border); }
.politica-mensagens-admin h3 { margin-bottom:10px;font-size:.95rem; }

/* ---------------------------------------------------------------- Avisos em popup */
/* Canto superior direito e não o inferior: o rodapé já é dos toasts, e um aviso
   sobre o outro faria as duas coisas serem ignoradas. */
.notif-popups { position: fixed; top: calc(var(--topbar-h) + 10px); right: 18px; z-index: 160; display: flex; flex-direction: column; gap: 9px; width: min(360px, calc(100vw - 32px)); pointer-events: none; }
.notif-popup { pointer-events: auto; display: flex; align-items: flex-start; gap: 8px; min-width: 0; padding: 11px 10px 11px 13px; border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: var(--radius); background: var(--white); color: var(--text-primary); box-shadow: 0 12px 32px rgba(15,23,42,.24); opacity: 0; transform: translateX(12px); transition: opacity .18s, transform .18s; }
.notif-popup.visivel { opacity: 1; transform: none; }
.notif-popup-mencao { border-left-color: var(--accent); }
.notif-popup-pendencia { border-left-color: var(--warning); }
.notif-popup-corpo { display: grid; gap: 2px; flex: 1; min-width: 0; color: inherit; text-decoration: none; }
a.notif-popup-corpo:hover .notif-popup-titulo { text-decoration: underline; }
.notif-popup-tipo { font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--primary); }
.notif-popup-titulo { font-size: .85rem; font-weight: 650; line-height: 1.35; overflow-wrap: anywhere; }
.notif-popup-hora { font-size: .69rem; color: var(--text-muted); }
.notif-popup-fechar { flex: 0 0 auto; border: 0; background: transparent; color: var(--text-muted); font-size: 1.05rem; line-height: 1; padding: 4px 7px; border-radius: 6px; cursor: pointer; font-family: inherit; }
.notif-popup-fechar:hover { background: var(--border-light); color: var(--text-primary); }
.notif-popup-corpo:focus-visible, .notif-popup-fechar:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.notif-config { display: grid; gap: 5px; padding: 7px 12px; border-bottom: 1px solid var(--border-light); }
.notif-config-btn { width: 100%; text-align: left; border: 1px solid var(--border); border-radius: 7px; background: transparent; color: var(--text-secondary); padding: 6px 9px; font-size: .74rem; font-weight: 700; font-family: inherit; cursor: pointer; }
.notif-config-btn[disabled] { opacity: .55; cursor: not-allowed; }
.notif-config-btn[aria-pressed="true"] { border-color: var(--primary); background: var(--primary-light); color: var(--primary); }
.notif-config-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
@media (max-width: 480px) { .notif-popups { top: calc(var(--topbar-h) + 6px); right: 10px; left: 10px; width: auto; } }

/* ---------------------------------------------------------------- Atalhos de prazo */
.prazo-atalhos { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; min-width: 0; }
.prazo-chip { border: 1px solid var(--border); border-radius: 999px; background: var(--white); color: var(--text-secondary); padding: 5px 11px; min-height: 32px; font-size: .74rem; font-weight: 700; font-family: inherit; cursor: pointer; }
.prazo-chip:hover { border-color: var(--primary); color: var(--primary); }
.prazo-chip[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.prazo-chip-limpar { color: var(--text-muted); }
.prazo-chip-limpar:hover { border-color: var(--danger); color: var(--danger); }
.prazo-chip:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
@media (max-width: 768px) { .prazo-chip { min-height: 38px; padding: 7px 13px; } }

/* ---------------------------------------------------------------- Relatórios */
/* A página é uma coluna travada: filtros e chips ficam parados e só o painel da
   aba rola. Antes eram 8 seções empilhadas, 2017px de rolo em uma tela de 900. */
.rel-pagina { display: flex; flex-direction: column; height: 100%; min-height: 0; gap: 12px; }
/* Bloco próprio: filtros e chips moram em um card, não soltos sobre o fundo. */
.rel-topo { display: flex; flex-direction: column; gap: 10px; flex: 0 0 auto; min-width: 0; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 13px 16px; }
.rel-filtros { display: flex; gap: 9px; align-items: end; flex-wrap: wrap; min-width: 0; }
.rel-filtros .form-control { min-width: 132px; font-size: .84rem; padding: 7px 10px; }
.rel-filtros .btn { padding: 8px 13px; line-height: 1.5; }
.rel-pdf { position: relative; margin-left: auto; }
.rel-pdf-menu { display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 210px; padding: 6px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 12px 30px rgba(15,23,42,.24); }
.rel-pdf-menu.aberto { display: block; }
.rel-pdf-titulo { display: block; padding: 5px 9px; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.rel-pdf-menu a { display: block; padding: 8px 9px; min-height: 38px; border-radius: 7px; font-size: .82rem; color: var(--text-primary); text-decoration: none; }
.rel-pdf-menu a:hover { background: var(--primary-light); color: var(--primary); text-decoration: none; }
.rel-pdf-menu a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }

/* KPI é chip compacto, nunca número em corpo de display: número gigante para um
   zero é o retrato do "parece IA" que o dono apontou no print. */
.rel-chips { display: flex; flex-wrap: wrap; gap: 7px; min-width: 0; }
.rel-chips-interno { margin-bottom: 12px; }
.chip-fino { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border: 1px solid var(--border-light); border-radius: 999px; background: var(--white); min-width: 0; }
.chip-fino-icone { display: inline-flex; color: var(--primary); flex: 0 0 auto; }
.chip-fino-valor { font-size: .95rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.chip-fino-rotulo { font-size: .73rem; color: var(--text-muted); white-space: nowrap; }
.chip-fino.vazio { background: transparent; }
.chip-fino.vazio .chip-fino-icone { color: var(--text-muted); }
.chip-fino.vazio .chip-fino-valor { font-weight: 600; color: var(--text-muted); }
.chip-fino.alerta { border-color: color-mix(in srgb, var(--danger) 42%, transparent); background: var(--danger-bg); }
.chip-fino.alerta .chip-fino-icone, .chip-fino.alerta .chip-fino-valor { color: var(--danger); }

/* Abas segmentadas com underline. O padrão pílula já foi rejeitado neste
   ecossistema por "cara de IA"; o underline foi o que passou. */
.rel-abas { display: flex; gap: 2px; flex: 0 0 auto; min-width: 0; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.rel-abas::-webkit-scrollbar { display: none; }
.rel-aba { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; min-height: 40px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; font: inherit; font-size: .83rem; font-weight: 650; color: var(--text-muted); white-space: nowrap; cursor: pointer; }
.rel-aba svg { color: currentColor; }
.rel-aba:hover { color: var(--text-primary); }
.rel-aba[aria-selected="true"] { color: var(--primary); border-bottom-color: var(--primary); }
.rel-aba:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; border-radius: 6px 6px 0 0; }

/* O painel é o único scroller da página: tabela longa rola aqui dentro em vez de
   esticar a tela. */
.rel-painel { display: none; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding-right: 2px; }
.rel-painel.ativo { display: flex; flex-direction: column; gap: 14px; }
.rel-painel:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 8px; }
/* Estrutura por espaço e tom, não por moldura em tudo: o bloco principal tem
   superfície, os secundários só respiram. */
.rel-bloco { background: var(--white); border: 1px solid var(--border-light); border-radius: var(--radius); padding: 13px 15px; min-width: 0; }
/* flex:0 1 auto e não flex:1: esticar o bloco deixava um card branco enorme com
   quatro linhas dentro. O bloco tem o tamanho do conteúdo; quem rola é o painel. */
.rel-bloco-principal { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; box-shadow: var(--shadow); }
.rel-bloco-risco { border-left: 3px solid var(--danger); }
.rel-bloco-titulo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; font-size: .88rem; font-weight: 700; color: var(--text-primary); }
.rel-bloco-titulo svg { color: var(--primary); flex: 0 0 auto; }
.rel-bloco-risco .rel-bloco-titulo svg { color: var(--danger); }
.rel-bloco-nota { font-size: .74rem; font-weight: 400; color: var(--text-muted); }
.rel-nota-topo { margin-bottom: 2px; }
.rel-contagem { font-variant-numeric: tabular-nums; color: var(--text-muted); }
.rel-rolagem { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.rel-rolagem-curta { max-height: 208px; }
.rel-duas-colunas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.rel-link-acao { display: inline-flex; align-items: center; gap: 6px; margin-top: 9px; font-size: .76rem; font-weight: 700; }
.rel-adesao { font-size: .86rem; color: var(--text-secondary); }
.rel-adesao .num { font-weight: 800; color: var(--text-primary); }
/* Cabeçalho fixo: quem rola a tabela não pode perder o rótulo da coluna. */
.rel-rolagem .table thead th { position: sticky; top: 0; z-index: 2; background: var(--table-head); }
.table-densa th, .table-densa td { padding: 7px 10px; font-size: .81rem; }
.num, .table td.num, .barra-valor { font-variant-numeric: tabular-nums; }
.setor-nome { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.setor-ponto { width: 9px; height: 9px; border-radius: 3px; flex: 0 0 auto; background: var(--canal-cor, var(--text-muted)); }
/* A barra mora dentro da linha do ranking: a seção de gráfico separada mostrava
   exatamente esta coluna de novo. */
.col-barra { width: 34%; min-width: 132px; }
.barra-linha { display: flex; align-items: center; gap: 9px; min-width: 0; }
.barra-trilha { flex: 1; min-width: 0; height: 7px; border-radius: 5px; background: var(--border-light); overflow: hidden; }
.barra-fill { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--primary), var(--accent)); }
.barra-fill.zerada { background: transparent; }
.barra-valor { flex: 0 0 auto; min-width: 18px; text-align: right; font-size: .8rem; font-weight: 700; }
.lista-pessoas { list-style: none; margin: 0; padding: 0; }
.lista-pessoa { display: flex; align-items: center; gap: 9px; padding: 7px 0; min-width: 0; border-bottom: 1px solid var(--border-light); }
.lista-pessoa:last-child { border-bottom: 0; }
.lista-pessoa-nome { font-size: .82rem; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.lista-pessoa-papel { font-size: .72rem; font-weight: 400; color: var(--text-muted); }
.lista-pessoa-meta { margin-left: auto; flex: 0 0 auto; font-size: .73rem; color: var(--text-muted); white-space: nowrap; }
.lista-pessoa-meta.alerta { color: var(--danger); font-weight: 700; }
@media (max-width: 1024px) { .rel-duas-colunas { grid-template-columns: 1fr; } }
@media (max-width: 768px) {
    .rel-filtros { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); }
    /* Sem estes dois zeros a grade NAO encolhe: `.rel-filtros .form-control`
       pede 132px e `.filtro-campo .form-control` pede 145px, e mais abaixo a
       fonte sobe para 16px (anti-zoom do iOS). Numa tela de 360px cada coluna
       tem cerca de 158px, entao o `select` de "Todos os setores" estourava a
       trilha e a pagina ganhava rolagem lateral. Uma faixa `1fr` nunca fica
       menor que o min-width do conteudo. Relatado em 13/08/2026. */
    .rel-filtros .form-control, .rel-filtros .filtro-campo { min-width: 0; width: 100%; }
    .rel-filtros .filtro-campo { min-width: 0; }
    /* "Filtrar" e "Gerar PDF" na mesma linha e do MESMO tamanho: o de PDF ja
       tinha width:100% e o de filtrar nao, entao saiam desalinhados. */
    .rel-filtros .btn { grid-column: 1; width: 100%; }
    .rel-pdf { margin-left: 0; grid-column: 2; justify-self: stretch; }
    .rel-pdf .btn { width: 100%; }
    .rel-bloco { padding: 11px 12px; }
    .col-barra { width: auto; min-width: 0; }
    /* O rotulo do chip era `nowrap`: "documentos aprovados" nao quebrava e
       empurrava a faixa de indicadores para fora da tela. */
    .rel-chips { gap: 6px; }
    .chip-fino { flex: 1 1 calc(50% - 6px); min-width: 0; }
    .chip-fino-rotulo { white-space: normal; line-height: 1.2; }

    /* --- Configuracoes: rotulo AO LADO do campo curto --- */
    /* O pedido de 13/08/2026 e sobre espaco vago: empilhado, "Sexo:" ocupava
       uma linha inteira para um campo de dois valores. Lado a lado, a mesma
       linha serve rotulo e campo. Vale para todo .form-group-curto, nao so
       para este. */
    .form-group-curto { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 10px; }
    .form-group-curto .form-label { margin: 0; white-space: nowrap; }
    .form-group-curto .form-control { min-width: 0; }
    .form-group-curto .form-hint { grid-column: 1 / -1; margin-top: 2px; }

    /* --- Colaboradores: coluna de acessos --- */
    /* Tres botoes com rotulo longo ("App autorizado", "Pode exigir ciente") num
       cartao estreito. `white-space: nowrap` fazia cada um pedir mais largura
       do que o cartao tem, e a celula transbordava. */
    .colab-acessos { display: grid; grid-template-columns: 1fr; gap: 6px; width: 100%; }
    .colab-acessos .btn { justify-content: center; white-space: normal; text-align: center; }
    .table-card-mobile .table td .colab-acessos .btn { justify-self: stretch; }
    .table-colab td[data-label="Contato"] { max-width: none; }
}
@media (min-width: 769px) {
    /* No desktop o campo curto continua curto: a largura fixa que estava no
       atributo style migrou para ca, onde da para sobrescrever. */
    .form-group-curto { max-width: 200px; }
}

/* ---------------------------------------------------------------- Identidade: canal e pessoa */
/* Marca cromática pequena e nítida: o ícone diz o TIPO (setor, grupo, pessoa) e a
   cor diz QUAL canal, num elemento só. Isso libera o nome inteiro, que antes
   perdia espaço para o prefixo "Setor: ".
   A paleta é calculada como objeto gráfico (3:1, WCAG 1.4.11): tinge o ÍCONE, e
   nunca o texto miúdo nem um fundo atrás de texto. */
.canal-marca { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    background: color-mix(in srgb, var(--canal-cor, var(--text-muted)) 13%, transparent);
    color: var(--canal-cor, var(--text-muted)); }
.canal-marca svg { display: block; }
/* Pessoa não é canal: identidade dela é a foto, com ícone neutro no fallback. */
.avatar { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; background: var(--border-light); color: var(--text-muted); }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar svg { display: block; }
.avatar-sm { width: 30px; height: 30px; }

/* ---------------------------------------------------------------- Menções (@fulano) */
/* Sem atributo hidden e sem [hidden] no seletor: .aberta (0,2,0) venceria
   [hidden] (0,1,0) e o seletor nasceria aberto. O estado é só de classe. */
.chat-composer { position: relative; }
.mencao-box { position: absolute; left: 12px; right: 12px; bottom: calc(100% + 6px); z-index: 20; display: none; max-height: 220px; overflow-y: auto; overscroll-behavior: contain; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 12px 30px rgba(15,23,42,.24); }
.mencao-box.aberta { display: block; }
.mencao-item { display: flex; align-items: baseline; gap: 9px; min-width: 0; min-height: 38px; padding: 8px 11px; cursor: pointer; }
.mencao-item + .mencao-item { border-top: 1px solid var(--border-light); }
.mencao-item[aria-selected="true"] { background: var(--primary-light); }
.mencao-nome { min-width: 0; font-size: .85rem; font-weight: 650; color: var(--text-primary); overflow-wrap: anywhere; }
.mencao-cargo { margin-left: auto; font-size: .7rem; color: var(--text-muted); white-space: nowrap; }
.msg-mencao { font-weight: 750; color: var(--primary); background: color-mix(in srgb, var(--primary) 14%, transparent); border-radius: 5px; padding: 0 3px; }
.msg-mencao-eu { color: var(--on-primary); background: var(--primary); }

/* ---------------------------------------------------------------- Rastreabilidade da tela */
/* A marca d'água é background-image do próprio painel de mensagens (montada em JS):
   não existe elemento nem classe dedicada para um display:none ingênuo derrubar, e
   como é fundo não é selecionável nem intercepta clique. Não bloqueia print: nenhum
   navegador permite isso. Serve para identificar a origem de um vazamento. */
.chat-wrap { position: relative; }
.chat-wrap.sem-foco .chat-lista,
.chat-wrap.sem-foco .chat-thread { filter: blur(9px); }
.chat-foco-aviso { position: absolute; inset: 0; z-index: 4; display: none; align-items: center; justify-content: center; padding: 16px; text-align: center; background: color-mix(in srgb, var(--white) 62%, transparent); color: var(--text-secondary); font-size: .84rem; font-weight: 700; pointer-events: none; }
.chat-wrap.sem-foco .chat-foco-aviso { display: flex; }

/* ---------------------------------------------------------------- Barras (gráficos CSS) */
.graf-barras { display: flex; flex-direction: column; gap: 9px; }
.graf-linha { display: grid; grid-template-columns: 170px 1fr 74px; align-items: center; gap: 10px; font-size: .84rem; }
@media (min-width: 769px) { .graf-linha.graf-linha-larga { grid-template-columns: 170px 1fr 110px; } }
.graf-linha .graf-nome { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.graf-trilha { background: var(--border-light); border-radius: 6px; height: 16px; overflow: hidden; }
.graf-fill { background: linear-gradient(90deg, var(--primary), var(--accent)); height: 100%; border-radius: 6px; min-width: 2px; }
.graf-valor { text-align: right; font-weight: 700; color: var(--text-secondary); font-size: .8rem; }

/* Medidor de armazenamento */
.medidor { background: var(--border-light); border-radius: 8px; height: 12px; overflow: hidden; }
.medidor-fill { height: 100%; background: var(--primary); border-radius: 8px; }
.medidor-fill.alerta { background: #d97706; }
.medidor-fill.critico { background: var(--danger); }

/* ---------------------------------------------------------------- Prioridades e status */
.prio-alta { color: var(--danger); font-weight: 700; }
.prio-media { color: var(--warning); font-weight: 600; }
.prio-baixa { color: var(--text-muted); }

.empty-state { text-align: center; padding: 34px 20px; color: var(--text-muted); font-size: .9rem; }
.empty-state svg { color: var(--border); margin-bottom: 8px; }

.filtros-linha { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }
.filtros-linha .form-control { width: auto; min-width: 140px; font-size: .85rem; padding: 7px 10px; }
.relatorio-filtros { margin: 0; align-items: end; }
/* Botões do filtro de relatórios com a mesma altura dos campos e dos botões de PDF.
   O line-height explícito iguala <button> (Filtrar) e <a> (PDF) na mesma linha. */
.relatorio-filtros .btn { padding: 9px 14px; font-size: .85rem; line-height: 1.5; font-family: inherit; }
.filtro-campo { display: grid; gap: 4px; color: var(--text-muted); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.filtro-campo .form-control { min-width: 145px; }
.relatorio-escopo { margin: -2px 0 16px; padding: 9px 12px; border-left: 3px solid var(--accent); background: var(--primary-light); color: var(--text-secondary); font-size: .82rem; }

/* Aparência escura: as superfícies funcionais seguem os mesmos tokens do modo claro. */
html[data-theme="escuro"] .form-control,
html[data-theme="escuro"] .modal,
html[data-theme="escuro"] .toast,
html[data-theme="escuro"] .chat-composer,
html[data-theme="escuro"] .msg-recebida,
html[data-theme="escuro"] .resposta-preview,
html[data-theme="escuro"] .anexo-preview { background: var(--white); color: var(--text-primary); }
html[data-theme="escuro"] .form-control:disabled,
html[data-theme="escuro"] .form-control[readonly] { background: #111920; color: var(--text-muted); }
html[data-theme="escuro"] .conv-item:hover,
html[data-theme="escuro"] .notif-item:hover { background: #202b34; }
html[data-theme="escuro"] .notif-item.nao-lida,
html[data-theme="escuro"] .conv-item.ativa { background: #302a1d; }
html[data-theme="escuro"] .chat-msgs,
html[data-theme="escuro"] .resposta-preview,
html[data-theme="escuro"] .anexo-preview { background: #0f171e; }
html[data-theme="escuro"] .msg-citacao { background: rgba(255,255,255,.07); }
html[data-theme="escuro"] .msg-citacao:hover { background: rgba(255,255,255,.12); }
html[data-theme="escuro"] .msg-enviada { background: #3a301b; border: 1px solid #66552d; }
html[data-theme="escuro"] .msg-falhou { background: #351e20; border-color: #714147; }
html[data-theme="escuro"] .badge-cinza { background: #2a3540; color: #d5dce1; }
html[data-theme="escuro"] .table tbody tr:hover { background: var(--table-hover); }
html[data-theme="escuro"] .graf-trilha,
html[data-theme="escuro"] .medidor { background: #2a3540; }
/* O color-scheme dark (definido pelo JS no :root) já entrega o indicador do date
   picker em branco; o filter:invert(1) antigo devolvia o ícone para preto. */
html[data-theme="escuro"] .termo-modal,
html[data-theme="escuro"] .termo-intro,
html[data-theme="escuro"] .termo-documento,
html[data-theme="escuro"] .termo-assinatura { background: var(--white); color: var(--text-primary); border-color: var(--border); }
html[data-theme="escuro"] .termo-documento p { color: var(--text-secondary); }
html[data-theme="escuro"] .termo-resumo span { background: #202a32; border-color: #4b4430; color: var(--text-secondary); }
html[data-theme="escuro"] .termo-resumo b { color: var(--primary-dark); }
html[data-theme="escuro"] .termo-campos .form-control[readonly] { background: #111920; color: var(--text-muted); }
html[data-theme="escuro"] .termo-leitura { background: #302a1d; color: var(--primary-dark); }

/* A barra estável mudou de dono: o html não rola mais, quem rola é .conteudo
   (declarado na regra dele). */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------------------------------------------------------------- Responsivo */
@media (max-width: 1024px) {
    .grid-2 { grid-template-columns: 1fr; }
    .chat-wrap { grid-template-columns: 260px 1fr; }
}

@media (max-width: 768px) {
    .app-main { margin-left: 0 !important; }
    .sidebar { transform: translateX(-100%); width: var(--sidebar-width) !important; }
    body.drawer-aberto .sidebar { transform: translateX(0); }
    body.drawer-aberto .sidebar-overlay { display: block; }
    .sidebar-collapse { display: none; }
    body.sidebar-recolhida .nav-label, body.sidebar-recolhida .brand-nome { display: inline; }
    .topbar-menu { display: inline-flex; }
    .tema-btn { min-width: 42px; min-height: 42px; justify-content: center; }
    .user-info { display: none; }
    .conteudo { padding: 14px; }
    .card-header, .card-body, .card-footer { padding-left: 14px; padding-right: 14px; }
    .card-header { align-items: stretch; }
    .card-header > .filtros-linha, .card-header > .filtros-linha form { width: 100%; }
    .filtros-linha { align-items: stretch; }
    .filtros-linha .form-control, .filtros-linha button { flex: 1 1 150px; width: 100%; min-width: 0; }
    .relatorio-filtros { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
    .relatorio-filtros .filtro-campo, .relatorio-filtros select { width: 100%; }
    .relatorio-filtros .form-control, .relatorio-filtros .btn { width: 100%; min-width: 0; }
    .form-row { gap: 0; }
    .form-row .form-group { flex-basis: 100%; min-width: 0; }
    .table-container { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .table { min-width: 680px; }
    .ip-liberar-linha { flex-direction: column; }
    .ip-liberar-linha .btn { width: 100%; justify-content: center; }
    /* Tabela de chave/valor com 2 colunas e sem cabeçalho: o mínimo de 680px só
       criava 340px de rolagem horizontal para ler "10 GB". Não usar
       .table-card-mobile aqui, que sem data-label renderiza rótulo vazio. */
    .tabela-plano { min-width: 0; }
    .table-card-mobile { overflow: visible; padding: 10px; background: var(--bg); }
    .table-card-mobile .table { display: block; min-width: 0; }
    .table-card-mobile .table thead { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
    .table-card-mobile .table tbody { display: grid; gap: 10px; }
    .table-card-mobile .table tr { display: block; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--white); box-shadow: var(--shadow); }
    .table-card-mobile .table td { display: grid; grid-template-columns: minmax(92px,34%) minmax(0,1fr); gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border-light); text-align: left; overflow-wrap: anywhere; }
    .table-card-mobile .table td:last-child { border-bottom: 0; }
    .table-card-mobile .table td::before { content: attr(data-label) ":"; grid-column: 1; grid-row: 1; align-self: start; color: var(--text-muted); font-size: .7rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
    .table-card-mobile .table td > * { grid-column: 2; }
    .table-card-mobile .table td .btn { justify-self: start; }
    /* Link do cartao: e a acao PRIMARIA da linha (abrir a pendencia, o documento,
       o colaborador) e media 21px de altura, metade da regua de toque. Vale para
       as 10 telas que usam esta tabela empilhada, nao so o dashboard. */
    .table-card-mobile .table td > a { display: inline-flex; align-items: center; min-height: 44px; }
    /* Mesmo motivo do .btn acima: item de grade estica por padrão, e o selo
       esticado até a borda do cartão vira barra, não pílula (181px medidos para
       um rótulo de 70px). Empilhado, a margem lateral entre selos não se aplica. */
    .table-card-mobile .table td .badge { justify-self: start; }
    .table-card-mobile .table td .badge + .badge { margin-left: 0; }
    .table-card-mobile .table td > div[style*="inline-flex"] { display: flex !important; justify-content: flex-start !important; }
    .table-card-mobile .table td > .tbl-acoes { justify-content: flex-start; flex-wrap: wrap; }

    /* --- Recolher e expandir (pedido de 13/08/2026) --- */
    /* O botao vira alvo absoluto no canto do cartao, e nao mais um item da
       grade da celula: dentro da grade ele empurraria o titulo para baixo e
       criaria uma terceira linha so para si. A folga a direita e reservada no
       cartao inteiro, e nao no titulo, senao a celula de acoes passa por baixo. */
    [data-cards-recolhiveis] .table tr { position: relative; padding-right: 46px; }
    button.tex-recolher-btn {
        display: inline-flex; align-items: center; justify-content: center;
        position: absolute; top: 6px; right: 8px;
        /* 34px e o minimo confortavel no toque sem roubar largura do titulo. */
        width: 34px; height: 34px; padding: 0;
        border: 1px solid var(--border); border-radius: 9px;
        background: var(--white); color: var(--text-muted); cursor: pointer;
        transition: transform .16s ease, color .16s ease;
    }
    .tex-recolher-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
    .tex-recolher-btn[aria-expanded="true"] { transform: rotate(180deg); color: var(--primary); border-color: var(--primary); }
    /* O :not([data-resumo]) e o coracao do componente: some tudo que nao foi
       declarado como resumo na pagina. Especificidade (0,4,2) contra os (0,2,1)
       de `.table-card-mobile .table td{display:grid}`, entao vence sem
       !important. Classe, e nao o atributo `hidden`, porque `display` de autor
       ganha do `hidden` do agente do usuario. */
    .table-card-mobile .table tr.tex-recolhido td:not([data-resumo]) { display: none; }
    /* Recolhido, o cartao e uma linha so: rotulo da coluna e divisor viram ruido. */
    .table-card-mobile .table tr.tex-recolhido td[data-resumo] { border-bottom: 0; padding-bottom: 2px; }
    .table-card-mobile .table tr.tex-recolhido td[data-resumo]::before { display: none; }
    .table-card-mobile .table tr.tex-recolhido td[data-resumo] > * { grid-column: 1 / -1; }
    button.tex-recolher-tudo { display: inline-flex; }

    /* Bloco inteiro: sobra o cabecalho, que continua dizendo o que ha ali. */
    button.tex-recolher-bloco {
        display: inline-flex; align-items: center; justify-content: center;
        width: 36px; height: 36px; padding: 0; flex: 0 0 auto;
        border: 1px solid var(--border); border-radius: 9px;
        background: var(--white); color: var(--text-muted); cursor: pointer;
        transition: transform .16s ease, color .16s ease;
    }
    .tex-recolher-bloco:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
    .tex-recolher-bloco[aria-expanded="true"] { transform: rotate(180deg); color: var(--primary); border-color: var(--primary); }
    .card.tex-bloco-recolhido > *:not(.card-header) { display: none; }
    .card.tex-bloco-recolhido > .card-header { border-bottom: 0; }
    .grid-chips { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .graf-linha { grid-template-columns: minmax(90px,130px) 1fr 58px; gap: 7px; }
    .notif-painel { position: fixed; top: var(--topbar-h); left: 10px; right: 10px; min-width: 0; max-height: calc(100dvh - var(--topbar-h) - 20px); }
    .modal-overlay { padding: 18px 10px; align-items: flex-start; }
    .modal { max-height: calc(100dvh - 36px); overflow-y: auto; }

    /* Chat mobile: lista OU thread */
    .chat-wrap { grid-template-columns: 1fr; min-height: 0; }
    .chat-thread { display: none; }
    .chat-wrap.thread-aberta .chat-lista { display: none; }
    .chat-wrap.thread-aberta .chat-thread { display: flex; }
    /* Único caminho de volta para a lista de conversas no celular: 26x26 era
       alvo pequeno demais e .chat-voltar não é .btn, então não pega o 44px. */
    .chat-voltar { display: inline-flex !important; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }

    /* iOS: inputs 16px evitam zoom automático no foco.
       .chat-lista-header .form-control e .filtros-linha .form-control (0,2,0)
       vencem o .form-control puro (0,1,0): media query não soma especificidade,
       então precisam ser repetidos aqui ou continuam em 13,6px e o iOS dá zoom. */
    .form-control, .chat-composer textarea { font-size: 16px; }
    .chat-lista-header .form-control, .filtros-linha .form-control, .rel-filtros .form-control, .cal-filtros .form-control { font-size: 16px; }
    /* min-width JUNTO do min-height. Com so a altura, o Enviar do compositor
       media 40x44 e o buscar da conversa 39x44 no celular: o bloco de 480px
       esconde o rotulo (.chat-composer .btn span) e sobra o icone, que nao
       chega aos 44px de largura sozinho. Foi medido assim em 20/08/2026, e e
       o mesmo caso que .chat-voltar logo acima ja tratava a mao. */
    .btn { min-height: 44px; min-width: 44px; }
    .btn-sm { padding: 8px 11px; }
    /* Campo de formulario no celular media 41px (texto) e 43px (lista suspensa):
       o bloco acima ja subia a FONTE para 16px por causa do zoom do iOS, mas a
       ALTURA continuava abaixo da regua de toque. */
    .form-control { min-height: 44px; }
    /* Recolher/expandir bloco e item: 34x34 e 36x36 medidos na tela de
       pendencias, onde sao o unico jeito de abrir o detalhe da linha. */
    .tex-recolher-btn, .tex-recolher-bloco { min-width: 44px; min-height: 44px; }
    /* Rotulo que embrulha caixa de marcacao: o alvo real e o rotulo, nao a
       caixinha de 18px. Medido em 326x34 em "Somente atrasadas". */
    label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) { min-height: 44px; align-items: center; }
    .modal-close { min-width: 44px; min-height: 44px; }
    /* O hambúrguer é o controle primário de navegação no celular e media 28x28;
       o min-height sobrevive à redução de padding do bloco de 480px. */
    .topbar-menu, .topbar-btn, .user-btn { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
    /* Card da conversa no celular: a HORA sobe para a linha do nome.

       Antes ela ficava numa terceira coluna, empilhada sobre o contador, e essa
       coluna roubava largura do nome e da previa justamente onde a tela e mais
       estreita. Com a hora na linha do nome, sobra so o contador a direita e o
       card fica mais baixo e mais legivel.

       Sem tocar no HTML: `.conv-item` JA e grid, entao `display: contents` nos
       dois agrupadores promove os filhos (.conv-titulo-linha, .conv-previa,
       .conv-hora, .conv-naolidas) a itens do proprio grid, e cada um vai para a
       sua area. O `.sr-only` do tipo do canal e position:absolute, fica fora do
       fluxo e nao ocupa celula. O desktop segue exatamente como estava. */
    .conv-item {
        grid-template-areas: "marca nome hora" "marca previa contador";
        row-gap: 2px;
    }
    .conv-item > .avatar, .conv-item > .canal-marca { grid-area: marca; }
    .conv-info, .conv-meta { display: contents; }
    .conv-titulo-linha { grid-area: nome; }
    .conv-previa { grid-area: previa; }
    .conv-hora { grid-area: hora; justify-self: end; align-self: center; }
    .conv-naolidas { grid-area: contador; justify-self: end; align-self: center; }

    /* Itens do menu lateral: no celular o menu vira gaveta de TOQUE, e 42px
       ficava 2px abaixo da regua da casa. */
    .sidebar .nav-item, .sidebar .brand-link { min-height: 44px; }

    .msg { max-width: 88%; }
    .msg-acao { min-height: 44px; padding-block: 10px; }
    /* Dois alvos que escapavam da regua por nao serem .btn: o de participantes
       media 32x28 (o bloco de 480px esconde o rotulo e deixa so o icone) e o
       rotulo de "Exigir ciente" media 99x21. */
    .thread-participantes { min-width: 44px; min-height: 44px; justify-content: center; }
    .composer-aviso .form-check { min-height: 44px; align-items: center; }
    .chat-composer { padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
}
@media (max-width: 480px) {
    .conteudo { padding: 10px; }
    .topbar { gap:6px; padding: 0 10px; }
    .topbar-menu { padding:4px; }
    .topbar-acoes { gap:1px; }
    .topbar-btn { padding:6px; }
    .user-btn { padding:3px; }
    .user-btn > svg { display:none; }
    .user-avatar { width:30px; height:30px; }
    .card { border-radius: 8px; }
    .grid-chips { grid-template-columns: 1fr; }
    .chat-composer { padding: 8px; gap: 6px; }
    .chat-composer .btn { padding-left: 11px; padding-right: 11px; }
    .chat-composer .btn span { display: none; }
    /* No celular só o ícone: o rótulo roubava espaço do nome da conversa. */
    .thread-participantes span { display: none; }
    .thread-participantes { padding: 6px 8px; }
    .msg { max-width: 94%; }
    .login-body { padding:12px; }
    .login-card { padding: 25px 18px; border-radius:15px; }
    .login-logo img { width:100px; height:76px; }
    .toast-area { right: 10px; bottom: 10px; width: calc(100vw - 20px); }
    .graf-linha { grid-template-columns: 1fr 54px; }
    .graf-linha .graf-trilha { grid-column: 1 / -1; grid-row: 2; }
    .relatorio-filtros { grid-template-columns: 1fr; }
}

@media (max-height: 520px) and (orientation: landscape) and (min-width: 700px) {
    .login-body { align-items: flex-start; padding: 8px; }
    /* margin-block:0 preserva o alinhamento ao topo pedido aqui: a margem
       automática do cartão venceria o align-items do pai e recentralizaria. */
    .login-card { max-width: 760px; padding: 15px 22px; margin-block: 0; }
    .login-logo { display: grid; grid-template-columns: 96px minmax(0,1fr); column-gap: 18px; row-gap: 3px; align-items: center; margin-bottom: 10px; text-align: left; }
    .login-logo img { grid-column: 1; grid-row: 1 / span 3; width: 92px; height: 68px; }
    .login-logo h1, .login-logo p { grid-column: 2; text-align: left; }
    .login-card form { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) 130px; gap: 12px; align-items: end; }
    .login-card .form-group { margin-bottom: 0; }
    .login-card form .btn { height: 44px; }
    .login-links { margin-top: 9px; }
    .login-seguranca { margin-top: 9px; padding-top: 8px; }
}

@media (max-height: 600px) {
    /* Tela muito baixa (paisagem no celular): o chat cede o mínimo para caber
       junto da faixa de avisos, em vez de forçar rolagem no container. */
    .chat-wrap { min-height: 200px; }
}

/* Termo individual em modal obrigatório, com leitura e assinatura separadas. */
.termo-body{min-height:100vh;min-height:100dvh;margin:0;display:grid;place-items:center;padding:clamp(12px,2.5vw,28px);overflow:hidden;background:radial-gradient(circle at 15% 15%,#3b4651 0,#18232d 36%,#090e13 100%)}
.termo-cenario{position:fixed;inset:0;opacity:.16;pointer-events:none;padding:6vh 6vw;display:grid;grid-template-columns:220px 1fr 1fr;grid-template-rows:58px 1fr;gap:20px}.termo-cenario-barra{grid-column:1/-1;border-radius:14px;background:#fff}.termo-cenario-card{border-radius:22px;background:#fff}.termo-cenario-card:last-child{grid-column:2/-1}
.termo-modal{position:relative;z-index:2;width:min(1080px,100%);height:min(920px,calc(100dvh - clamp(24px,5vw,56px)));min-height:560px;background:#f8f6f0;border:1px solid rgba(255,255,255,.18);border-radius:20px;box-shadow:0 34px 90px rgba(0,0,0,.48);overflow:hidden;display:grid;grid-template-rows:auto auto minmax(120px,1fr) auto;outline:none}
.termo-topo{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 20px;color:#fff;background:#101820;border-bottom:3px solid var(--accent)}.termo-marca{display:flex;align-items:center;gap:11px;min-width:0}.termo-marca img{width:42px;height:42px;object-fit:contain;flex:0 0 auto}.termo-marca span,.termo-marca strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.termo-marca span{font-weight:800}.termo-marca strong{font-size:.7rem;color:#d8caa4;text-transform:uppercase;letter-spacing:.07em}.termo-sair{margin:0}.termo-sair button{border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;border-radius:8px;padding:7px 10px;cursor:pointer;font:inherit;font-size:.76rem}.termo-sair button:hover{background:rgba(255,255,255,.1)}
.termo-intro{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:22px;padding:17px 24px 15px;background:#fff;border-bottom:1px solid var(--border)}.termo-etapa{display:inline-block;color:#805600;font-size:.7rem;font-weight:850;text-transform:uppercase;letter-spacing:.06em;margin-bottom:3px}.termo-intro h1{font-size:clamp(1.15rem,2.3vw,1.55rem);line-height:1.18;color:var(--primary-dark);margin:0}.termo-intro p{margin:5px 0 0;color:var(--text-muted);font-size:.82rem}.termo-resumo{display:grid;grid-template-columns:repeat(3,minmax(100px,1fr));gap:7px}.termo-resumo span{padding:8px 10px;border:1px solid #eadcb5;border-radius:9px;background:#fffaf0;color:#5c5140;font-size:.67rem;line-height:1.25}.termo-resumo b{display:block;color:#6f4c00;font-size:.74rem}
.termo-documento{min-height:0;overflow-y:auto;overscroll-behavior:contain;background:#fff;padding:24px clamp(22px,5vw,56px);scrollbar-gutter:stable;border-bottom:1px solid var(--border)}.termo-documento:focus-visible{box-shadow:inset 0 0 0 3px rgba(138,91,0,.25)}.termo-documento h1{color:var(--primary-dark);font-size:1.28rem;line-height:1.25;margin:0 0 8px}.termo-documento h2{color:var(--primary-dark);font-size:.96rem;margin:20px 0 6px;padding-bottom:4px;border-bottom:1px solid #eadcb5}.termo-documento p{color:#333b43;text-align:justify;margin:7px 0;line-height:1.55;font-size:.86rem}.termo-fim{text-align:center;color:#8b806c;font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;border-top:1px dashed #d7cdb9;margin-top:24px;padding-top:12px}
.termo-assinatura{background:#fffaf0;padding:15px 22px 17px;border-top:1px solid #e4cd8b}.termo-assinatura-titulo{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:10px}.termo-assinatura h2{font-size:1rem;margin:0;color:var(--primary-dark)}.termo-assinatura-titulo p{margin:2px 0 0;color:var(--text-muted);font-size:.73rem}.termo-leitura{flex:0 0 auto;border-radius:999px;background:#f0e7d0;color:#755e28;padding:5px 9px;font-size:.7rem;font-weight:750}.termo-leitura.concluida{background:var(--success-bg);color:var(--success)}.termo-campos{display:grid;grid-template-columns:minmax(240px,1.35fr) minmax(260px,1fr);gap:12px}.termo-campos .form-group{margin-bottom:8px}.termo-campos .form-control[readonly]{background:#f0eee8;color:#555}.termo-check{align-items:flex-start;margin-top:2px;font-size:.78rem;line-height:1.35}.termo-check-bloqueado{opacity:.55}.termo-acoes{display:flex;justify-content:flex-end;gap:9px;flex-wrap:wrap;margin-top:11px}.termo-assinado{padding-block:22px}
@media(max-width:820px){.termo-intro{grid-template-columns:1fr}.termo-resumo{display:none}.termo-modal{height:calc(100vh - 20px);height:calc(100dvh - 20px)}.termo-campos{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.termo-body{padding:0}.termo-modal{width:100%;height:100vh;height:100dvh;min-height:0;border:0;border-radius:0;grid-template-rows:auto auto minmax(90px,1fr) auto}.termo-topo{padding:10px 12px}.termo-marca img{width:36px;height:36px}.termo-marca strong{display:none}.termo-sair button{padding:6px 8px}.termo-intro{padding:12px 14px}.termo-intro h1{font-size:1.08rem}.termo-intro p{font-size:.74rem}.termo-documento{padding:18px 15px}.termo-documento p{text-align:left;font-size:.82rem}.termo-assinatura{padding:11px 13px calc(12px + env(safe-area-inset-bottom))}.termo-assinatura-titulo p{display:none}.termo-leitura{font-size:.64rem}.termo-campos{grid-template-columns:1fr;gap:0}.termo-campos .form-hint{display:none}.termo-check{font-size:.72rem}.termo-acoes{display:grid;grid-template-columns:1fr 1.3fr;margin-top:8px}.termo-acoes .btn{width:100%;padding-inline:8px;font-size:.76rem}}
@media(max-width:370px){.termo-intro p{display:none}.termo-assinatura-titulo{margin-bottom:6px}.termo-check span{line-height:1.2}.termo-acoes{grid-template-columns:1fr}.termo-acoes .btn-secondary{display:none}}
@media(max-height:650px){.termo-body{padding:4px}.termo-modal{height:calc(100vh - 8px);height:calc(100dvh - 8px);min-height:0;border-radius:12px;grid-template-rows:auto auto minmax(72px,1fr) auto}.termo-topo{padding-block:7px}.termo-marca img{width:34px;height:34px}.termo-intro{padding:8px 14px}.termo-intro p,.termo-resumo{display:none}.termo-intro h1{font-size:1rem}.termo-documento{padding-block:12px}.termo-assinatura{padding:8px 12px}.termo-assinatura-titulo{margin-bottom:5px}.termo-assinatura-titulo p,.termo-cpf-grupo .form-hint{display:none}.termo-campos .form-group{margin-bottom:4px}.termo-check{font-size:.7rem;line-height:1.2}.termo-acoes{margin-top:6px}.termo-acoes .btn{padding-block:7px}}
@media(max-height:520px){.termo-etapa,.termo-assinatura-titulo>div{display:none}.termo-assinatura-titulo{justify-content:flex-end}.termo-campos{grid-template-columns:1fr 1fr;gap:8px}.termo-campos .form-label{font-size:.7rem}.termo-campos .form-control{min-height:36px;padding-block:6px}.termo-acoes .btn-secondary{display:none}.termo-acoes{display:block}.termo-leitura{font-size:.62rem}}
.termo-campos .form-hint.form-hint-erro,.termo-campos .form-hint.form-hint-ok{display:block}
@media(max-width:600px){.termo-acoes{grid-template-columns:1fr 1fr}.termo-acoes .btn-primary{grid-column:1/-1}}

/* TELA PEQUENA OU BAIXA: o termo passa a correr NA PÁGINA.
   -------------------------------------------------------
   O desenho de cima prende o texto do termo numa linha `minmax(90px,1fr)` de
   uma grade de altura fixa (100dvh), com `.termo-body{overflow:hidden}`. No
   telefone sobravam cerca de 90px de janela para o documento inteiro, e a
   página em volta não rolava. Como o botão de assinar só destrava quando a
   leitura chega ao FIM, quem não conseguia varrer aquela fresta até o final
   simplesmente não tinha como assinar: foi o "não consigo assinar pelo app"
   relatado em 13/08/2026.
   Aqui a grade vira fluxo normal e existe uma rolagem só, a da página. O portão
   de leitura continua valendo: quem decide agora é a posição do marcador
   `.termo-fim` na viewport (ver conferirLeitura em pages/termo.php).
   A faixa inclui altura, e não só largura, porque telefone deitado tem largura
   de desktop e altura menor ainda. */
@media (max-width: 768px), (max-height: 700px) {
    .termo-body { display: block; overflow: auto; min-height: 100dvh; padding: 0; }
    .termo-modal { display: block; width: 100%; height: auto; min-height: 100dvh; border: 0; border-radius: 0; overflow: visible; }
    .termo-documento { max-height: none; overflow: visible; border-bottom: 0; }
    /* O bloco de assinatura acompanha o fim do texto, em vez de ficar preso ao
       rodapé da janela cobrindo o que ainda falta ler. */
    .termo-assinatura { position: static; border-top: 1px solid #e4cd8b; }
    /* Voltam a aparecer: sumiram só para caber na grade de altura fixa, e no
       fluxo da página o espaço deixou de ser disputado. */
    .termo-assinatura-titulo p, .termo-campos .form-hint, .termo-intro p { display: block; }
}
html[data-theme="escuro"] .termo-etapa{color:var(--primary)}
html[data-theme="escuro"] .termo-fim{color:var(--text-muted);border-top-color:var(--border)}
.chat-voltar { display: none; background: none; border: none; cursor: pointer; color: var(--text-secondary); padding: 4px; }

/* Colaboradores: lista compacta sem rolagem lateral e modal de cadastro que
   cabe na tela sem rolagem interna (pedido do dono em 2026-07-21). */
.table-colab th, .table-colab td { padding: 9px 10px; font-size: .84rem; }
.table-colab th { white-space: normal; }
.table-colab td[data-label="Contato"] { overflow-wrap: break-word; max-width: 300px; }
.table-colab .colab-ultimo { font-size: .72rem; margin-top: 3px; }
.colab-acessos { display: inline-flex; flex-direction: column; gap: 4px; align-items: stretch; }
.colab-acessos .btn { justify-content: flex-start; white-space: nowrap; font-size: .74rem; padding: 4px 9px; }
.modal.modal-colab { width: min(720px, calc(100vw - 2rem)); max-width: none; }
.modal-colab .form-group { margin-bottom: 10px; }
.modal-colab .form-hint { font-size: .72rem; }
.modal-colab .setores-opcoes { max-height: 118px; }
.modal-colab .modal-body { padding-bottom: 8px; }

/* ---------------------------------------------------------------- Calendário interno */
/* Tudo com prefixo .cal- para não vazar em outras telas. Cores por tipo:
   reunião no dourado da marca; pendência segue a prioridade (alta vermelho,
   média âmbar, baixa cinza) e atrasada ganha contorno vermelho. */
.cal-painel { min-width: 0; overflow: hidden; }
.cal-cabecalho { align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.cal-cabecalho p { margin: .28rem 0 0; max-width: 68ch; }

.cal-filtros { display: flex; align-items: end; gap: .7rem 1rem; flex-wrap: wrap; padding: .85rem 1rem; border-bottom: 1px solid var(--border-light); }
.cal-filtros label { display: grid; gap: .3rem; min-width: 0; font-size: .76rem; font-weight: 700; color: var(--text-muted); }
.cal-filtros .form-control { width: auto; min-width: 160px; font-size: .85rem; padding: 7px 10px; }

/* O 16px DO CELULAR PRECISA VIR DEPOIS DESTA LINHA (medido em 28/08/2026,
   cartao 316). Ja existe, la em cima, um bloco @media (max-width:768px) que
   poe .cal-filtros .form-control em 16px para o iOS nao dar zoom ao focar. So
   que ele esta ESCRITO ANTES da regra base acima, e media query nao acrescenta
   especificidade: entre dois seletores de mesmo peso quem vence e o ultimo do
   arquivo. Resultado medido pelo portao: os dois selects do filtro do
   calendario saiam com 13.6px em 430px de largura, que e 0.85rem, ou seja, a
   regra base ganhando da regra do celular. Os outros seletores daquele mesmo
   bloco (chat, filtros-linha, rel-filtros) nao tem o problema porque as bases
   deles ficam antes dele. */
@media (max-width: 768px) {
    .cal-filtros .form-control { font-size: 16px; }
}
.cal-filtros .cal-check { display: flex; align-items: center; gap: .5rem; min-height: 38px; }
.cal-check input { width: 18px; height: 18px; accent-color: var(--primary); }
.cal-filtros-acoes { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-left: auto; }

.cal-toolbar { display: flex; align-items: center; gap: .75rem 1rem; flex-wrap: wrap; padding: .8rem 1rem; }
.cal-nav { display: flex; gap: .35rem; align-items: center; }
.cal-titulo-mes { font-size: 1.02rem; font-weight: 800; color: var(--text-primary); }
.cal-legenda { display: flex; align-items: center; gap: .35rem .85rem; flex-wrap: wrap; margin-left: auto; }
.cal-leg-item { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; color: var(--text-muted); }
.cal-leg-cor { width: 11px; height: 11px; border-radius: 4px; flex: 0 0 auto; border: 1px solid transparent; }
.cal-leg-reuniao { background: #fbf0d2; border-color: #8a5b00; }
.cal-leg-alta { background: var(--danger-bg); border-color: var(--danger); }
.cal-leg-media { background: var(--warning-bg); border-color: var(--warning); }
.cal-leg-baixa { background: #f1f5f9; border-color: var(--border); }
.cal-leg-atrasada { background: transparent; border: 2px solid var(--danger); }

.cal-grade { border-top: 1px solid var(--border-light); }
.cal-semana-cab { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: var(--table-head); border-bottom: 1px solid var(--border); }
.cal-semana-cab span { padding: 7px 8px; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--text-secondary); text-align: left; }
.cal-celulas { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-dia { min-height: 112px; min-width: 0; padding: 5px 6px 7px; border-right: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); display: flex; flex-direction: column; gap: 3px; align-items: stretch; }
.cal-celulas .cal-dia:nth-child(7n) { border-right: 0; }
.cal-fora { background: color-mix(in srgb, var(--table-head) 68%, transparent); }
.cal-fora .cal-dia-num { color: var(--text-muted); opacity: .55; }
.cal-dia-num { align-self: flex-start; display: inline-flex; align-items: center; justify-content: center; min-width: 26px; min-height: 26px; padding: 0 4px; border: none; border-radius: 8px; background: transparent; font: inherit; font-size: .8rem; font-weight: 700; color: var(--text-secondary); }
button.cal-dia-num { cursor: pointer; }
button.cal-dia-num:hover { background: var(--primary-light); color: var(--primary); }
/* Hoje: anel dourado no número do dia. */
.cal-hoje .cal-dia-num { background: var(--primary-light); color: var(--primary); box-shadow: 0 0 0 2px var(--accent); font-weight: 800; }
.cal-hoje { background: color-mix(in srgb, var(--primary-light) 34%, transparent); }

.cal-chip { display: flex; align-items: baseline; gap: 4px; min-width: 0; width: 100%; padding: 2px 6px; border-radius: 6px; border: 1px solid transparent; font: inherit; font-size: .7rem; font-weight: 650; line-height: 1.35; text-align: left; text-decoration: none; cursor: pointer; overflow: hidden; }
.cal-chip:hover { text-decoration: none; filter: brightness(.96); }
.cal-chip-hora { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-weight: 800; }
.cal-chip-titulo { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-chip-reuniao { background: #fbf0d2; border-color: #8a5b00; color: #8a5b00; }
.cal-chip-prio-alta { background: var(--danger-bg); border-color: color-mix(in srgb, var(--danger) 45%, transparent); color: var(--danger); }
.cal-chip-prio-media { background: var(--warning-bg); border-color: color-mix(in srgb, var(--warning) 45%, transparent); color: var(--warning); }
.cal-chip-prio-baixa { background: #f1f5f9; border-color: var(--border); color: var(--text-secondary); }
.cal-chip-atrasada { border: 2px solid var(--danger); }
.cal-mais { align-self: flex-start; border: none; background: transparent; padding: 1px 6px; border-radius: 6px; font: inherit; font-size: .7rem; font-weight: 800; color: var(--primary); cursor: pointer; }
.cal-mais:hover { background: var(--primary-light); }

/* Painel do dia (modal) */
.cal-dia-lista { display: flex; flex-direction: column; gap: 6px; }
.cal-item { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 10px; width: 100%; padding: 9px 10px; border: 1px solid var(--border-light); border-radius: 9px; background: var(--white); font: inherit; text-align: left; text-decoration: none; color: var(--text-primary); cursor: pointer; }
.cal-item:hover { background: var(--table-hover); text-decoration: none; }
.cal-item-hora { font-size: .76rem; font-weight: 800; color: var(--text-secondary); font-variant-numeric: tabular-nums; padding-top: 2px; }
.cal-item-corpo { min-width: 0; display: grid; gap: 2px; }
.cal-item-corpo strong { font-size: .86rem; overflow-wrap: anywhere; }
.cal-item-corpo small { font-size: .72rem; color: var(--text-muted); overflow-wrap: anywhere; }
.cal-item-tipo { justify-self: start; font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 1px 7px; border-radius: 999px; }
.cal-item-tipo-reuniao { background: #fbf0d2; color: #8a5b00; }
.cal-item-tipo-alta { background: var(--danger-bg); color: var(--danger); }
.cal-item-tipo-media { background: var(--warning-bg); color: var(--warning); }
.cal-item-tipo-baixa { background: #f1f5f9; color: var(--text-secondary); }

/* Detalhe da reunião */
.cal-detalhe-campos { display: grid; gap: 8px; margin: 0; }
.cal-detalhe-campos div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px; }
.cal-detalhe-campos dt { font-size: .78rem; font-weight: 700; color: var(--text-muted); }
.cal-detalhe-campos dd { margin: 0; font-size: .87rem; overflow-wrap: anywhere; }
.cal-detalhe h4 { margin: 12px 0 4px; font-size: .84rem; }
.cal-detalhe-descricao { font-size: .86rem; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-secondary); }
.cal-detalhe-cancelada { margin: 0 0 10px; font-size: .8rem; color: var(--text-muted); }
.cal-detalhe-acoes { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 12px; }
.cal-detalhe-acoes:empty { display: none; }

/* Presença (RSVP) na reunião */
.cal-rsvp-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.cal-rsvp-item { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.cal-rsvp-nome { font-weight: 600; }
.cal-rsvp-badge { font-size: .68rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--bg); color: var(--text-muted); }
.cal-rsvp-status-confirmado .cal-rsvp-badge { background: var(--success-bg); color: var(--success); }
.cal-rsvp-status-recusado .cal-rsvp-badge { background: var(--danger-bg); color: var(--danger); }
.cal-rsvp-status-sem_resposta .cal-rsvp-badge { background: var(--warning-bg); color: var(--warning); }
.cal-rsvp-motivo-texto { color: var(--text-muted); font-size: .82rem; }
.cal-rsvp { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.cal-rsvp-botoes { display: flex; gap: 8px; flex-wrap: wrap; }
.cal-rsvp-motivo-campo { display: flex; flex-direction: column; gap: 6px; }
.cal-rsvp-motivo-acoes { display: flex; gap: 8px; }
.cal-rsvp-atual { margin: 0; font-size: .86rem; font-weight: 600; }

/* Nova reunião */
.cal-participantes { margin-bottom: 14px; }
.cal-participantes .form-control { margin-top: .35rem; }
.cal-participantes-lista { max-height: 168px; }
.cal-participantes-topo { display: flex; gap: 8px; align-items: flex-end; }
.cal-participantes-topo .form-control { flex: 1 1 auto; min-width: 0; }
.cal-participantes-topo .btn { flex: 0 0 auto; margin-top: .35rem; white-space: nowrap; }
.cal-participantes-contagem { margin: .45rem 0 0; font-size: .74rem; color: var(--text-muted); }
.cal-participantes-contagem span { font-weight: 700; color: var(--primary); }
.cal-participantes-vazio { margin: .5rem 0 0; font-size: .78rem; color: var(--text-muted); }
/* Telefone: a lista DEIXA de ser um quadro rolante.
   Em 168px de altura, com uma coluna e itens de 38px, apareciam quatro nomes de
   doze, dentro de um modal que também rola. Duas rolagens aninhadas no toque
   fazem a lista parecer truncada, e o relato de 13/08/2026 leu isso como
   colaborador ativo faltando. Sem o teto, existe uma rolagem só: a do modal. */
@media (max-width: 768px) {
    .cal-participantes-lista { max-height: none; overflow: visible; }
    .cal-participantes-topo { flex-direction: column; align-items: stretch; }
    .cal-participantes-topo .btn { width: 100%; margin-top: 0; }
}

/* Agenda do mês: a grade vira lista empilhada, sem rolagem lateral.

   O CORTE ERA 760px E ISSO DEIXAVA O TABLET DE FORA (medido em 28/08/2026,
   cartão 316, relato do Marcos em tablet Android). A barra lateral ocupa 240px
   fixos acima de 768px, então de 761px até cerca de 1100px sobrava pouco mais
   de 500px para SETE colunas: cada célula ficava com cerca de 75px e o título
   do chip, com 15px úteis, mostrava TRÊS de trinta caracteres. "10:00 R..." não
   diz qual é a reunião, então a grade estava lá sem informar nada.

   Medido antes: a 820px, span.cal-chip-titulo com 15px mostrando 3 de 30
   caracteres; a 768px, 44px mostrando 7 de 27.

   CORRECAO de 29/08/2026: uma versao anterior deste comentario afirmava que
   "a 1440px o chip cabe inteiro". E falso em qualquer largura. Medido com os
   titulos reais do banco (179 pendencias, media de 23,6 caracteres, 123 delas
   acima de 18; 13 reunioes, media de 30,6) e ate 2560px: a coluna satura em
   1440px por causa do padding centralizado do .conteudo, entao a celula trava
   em 203px e nenhum titulo de 30 caracteres cabe. O que este corte resolve e
   a faixa de tablet, e faz todo titulo cruzar o piso de 8 caracteres que a
   bancada cobra. Ler a grade mensal com titulo inteiro exigiria mudar o
   desenho do chip, e isso e decisao do dono, nao deste corte.

   Rolagem lateral com célula de largura mínima resolveria a leitura, mas o
   comentário original desta faixa recusa rolagem lateral de propósito, e a
   lista empilhada que a casa já escreveu funciona: o que faltava era ela valer
   onde a grade não cabe. Por isso o corte subiu para 1180px, e não uma segunda
   solução para o mesmo problema. */
.cal-agenda { display: none; }
@media (max-width: 1180px) {
    .cal-grade { display: none; }
    .cal-agenda { display: block; padding: 10px 12px 14px; border-top: 1px solid var(--border-light); }
    .cal-agenda-dia { padding: 9px 0; border-bottom: 1px solid var(--border-light); }
    .cal-agenda-dia:last-child { border-bottom: 0; }
    .cal-agenda-data { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: .8rem; font-weight: 700; color: var(--text-secondary); }
    .cal-agenda-num { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; min-height: 26px; border-radius: 8px; background: var(--table-head); font-size: .82rem; font-weight: 800; color: var(--text-primary); }
    .cal-agenda-dia.cal-hoje { background: transparent; }
    .cal-agenda-dia.cal-hoje .cal-agenda-num { background: var(--primary-light); color: var(--primary); box-shadow: 0 0 0 2px var(--accent); }
    .cal-agenda-itens { display: flex; flex-direction: column; gap: 5px; }
    .cal-agenda .cal-chip { min-height: 40px; align-items: center; padding: 7px 10px; font-size: .8rem; border-radius: 8px; }
    .cal-agenda .cal-chip-titulo { white-space: normal; overflow: visible; }
    .cal-chip-meta { flex: 0 0 auto; margin-left: auto; font-size: .68rem; font-weight: 700; opacity: .85; white-space: nowrap; }
    .cal-toolbar { gap: .5rem; }
    .cal-legenda { margin-left: 0; width: 100%; }
    .cal-filtros .form-control { flex: 1 1 140px; width: 100%; min-width: 0; }
    .cal-filtros label { flex: 1 1 140px; }
    .cal-filtros-acoes { margin-left: 0; width: 100%; }
    .cal-filtros-acoes .btn { flex: 1; }
    .cal-item { grid-template-columns: 58px minmax(0, 1fr); }
}

/* Aparência escura: os pares de cor fixos do dourado e do cinza precisam de tons próprios. */
html[data-theme="escuro"] .cal-chip-reuniao,
html[data-theme="escuro"] .cal-leg-reuniao,
html[data-theme="escuro"] .cal-item-tipo-reuniao { background: #3a301b; border-color: #66552d; color: #f2ca69; }
html[data-theme="escuro"] .cal-chip-prio-baixa,
html[data-theme="escuro"] .cal-leg-baixa,
html[data-theme="escuro"] .cal-item-tipo-baixa { background: #2a3540; border-color: var(--border); color: #d5dce1; }
html[data-theme="escuro"] .cal-item { background: var(--white); }
html[data-theme="escuro"] .cal-item:hover { background: var(--table-hover); }
html[data-theme="escuro"] .cal-hoje { background: color-mix(in srgb, var(--primary-light) 55%, transparent); }

/* ============================================================
   Revisão de layout e responsividade 20260721h
   ============================================================ */

/* O atributo hidden precisa vencer o display dos componentes. Sem esta regra,
   .btn/.card/.badge (display:inline-flex/block) sobrepunham o display:none nativo
   do atributo [hidden] (0,1,0) e botões/painéis marcados como ocultos continuavam
   aparecendo: os botões de push "Desativar"/"Enviar teste", o compositor do chat e
   o avatar da conversa vazavam antes de qualquer interação. */
[hidden] { display: none !important; }

/* Barra de progresso dos "Primeiros passos": o <progress> nativo pintava a barra
   de azul do sistema operacional, fora da paleta. Repintado com o dourado da marca
   nos dois motores (WebKit/Blink e Firefox). */
progress { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0; border-radius: 999px; background: var(--border-light); overflow: hidden; accent-color: var(--accent); }
progress::-webkit-progress-bar { background: var(--border-light); border-radius: 999px; }
progress::-webkit-progress-value { background: linear-gradient(90deg, var(--accent), var(--primary)); border-radius: 999px; }
progress::-moz-progress-bar { background: var(--primary); border-radius: 999px; }
html[data-theme="escuro"] progress { background: #2a3540; }
html[data-theme="escuro"] progress::-webkit-progress-bar { background: #2a3540; }

/* Card "Instalar o aplicativo": dois blocos de passos lado a lado no desktop,
   empilhados no celular. Sem rolagem lateral. */
.instalar-passos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.instalar-bloco { min-width: 0; padding: 14px 15px; border: 1px solid var(--border); border-radius: 11px; background: var(--table-head); }
.instalar-bloco h3 { display: flex; align-items: center; gap: 7px; margin: 0 0 8px; font-size: .9rem; color: var(--primary-dark); }
.instalar-bloco ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.instalar-bloco li { font-size: .84rem; color: var(--text-secondary); line-height: 1.45; }
.instalar-bloco.instalar-atual { border-color: var(--accent); background: var(--primary-light); box-shadow: 0 0 0 1px var(--accent); }
.instalar-atual-selo { display: inline-block; margin-top: 9px; font-size: .64rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--primary-dark); }
.instalar-app-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-weight: 700; }
@media (max-width: 640px) { .instalar-passos { grid-template-columns: 1fr; } }
html[data-theme="escuro"] .instalar-bloco { background: #101820; border-color: var(--border); }
html[data-theme="escuro"] .instalar-bloco.instalar-atual { background: #302b1e; }