/* Tipografia própria (vendorizada em static/vendor/fonts/, sem depender de
   internet em tempo de execução — mesmo padrão do Font Awesome já usado no
   projeto): Inter para texto corrido/UI e Manrope (mais forte/geométrica)
   para títulos e a marca no topo — troca a fonte padrão do sistema
   operacional por uma identidade visual própria e mais nítida em telas. */
@font-face{font-family:"Inter";src:url("../vendor/fonts/inter-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Inter";src:url("../vendor/fonts/inter-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"Inter";src:url("../vendor/fonts/inter-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:"Inter";src:url("../vendor/fonts/inter-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:"Manrope";src:url("../vendor/fonts/manrope-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:"Manrope";src:url("../vendor/fonts/manrope-800.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap;}

:root{
  --font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-heading:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  /* Altura real da faixa de "modo suporte" (.support-mode-banner, mais
     abaixo — azul clarinho, era âmbar) quando ela está visível — 0px
     quando não está. Um script em base.html mede `.support-mode-banner`
     com JS (offsetHeight, porque a faixa pode quebrar em duas linhas em
     telas estreitas) e escreve o valor aqui a cada carregamento/resize.
     Existe pra que os ícones fixos do canto superior direito
     (.notif-bell-wrap/.chat-bell-wrap, "position:fixed", calculados a
     partir do TOPO DA JANELA) somem essa altura ao próprio "top" e
     continuem caindo dentro da barra azul (.app-nav) — sem isso, quando a
     faixa de modo suporte empurra a barra pra baixo, o sino fica "preso"
     boiando sobre a própria faixa (fora do lugar, parecendo
     cortado/truncado). Ver comentário completo junto de .notif-bell-wrap. */
  --support-banner-h:0px;
  /* Cor de marca: azul de novo como principal, verde como secundário —
     voltando atrás de uma troca pra verde-principal que durou poucos
     minutos. Depois de ver o verde principal aplicado (pedido anterior:
     "não quero mais o site todo azul"), o usuário comparou lado a lado no
     Word um fundo verde e um azul clarinho atrás da MESMA logo e preferiu o
     azul: "eu acho melhor ser um azul assim clarinho olha como destaca o
     logo e não o verde" — faz sentido, a logo em si é majoritariamente
     azul (só o "i" e as barrinhas do ícone são verdes), então um fundo
     azul reforça a logo em vez de competir com ela. --primary volta a ser
     azul (um tom mais claro/fresco que o azul-marinho original, pedido
     explícito de "clarinho") e --accent (cor secundária — bordas de foco,
     links, detalhes) passa a ser o verde da logo, no lugar do azul que era
     --accent antes.
     --primary-light é #DCEAF7 — não um tom aproximado: o usuário mandou o
     valor exato (print do seletor de cor, RGB 220/234/247) depois de ver a
     primeira tentativa e dizer "acho que voce esta gerando o azul errado...
     o que sugeri foi esse que o logo se destaca mais". É o fundo do painel
     do login (abaixo, .marketing-panel/.form-panel/.auth-wrap) — um azul
     bem claro, quase branco, pensado como FUNDO por trás da logo (não como
     cor de botão/cabeçalho, que continuam com --primary de cima pra manter
     contraste de texto branco). */
  --primary:#2557B8;
  --primary-dark:#0B3D91;
  --primary-light:#DCEAF7;
  --accent:#17864A;
  /* Fundo do balão de mensagem ENVIADA no chat — passou por três cores.
     Começou no --primary (azul forte, achado "muito forte"), virou
     --primary-light (azul suave). Depois o usuário pediu um amarelo
     clarinho no lugar do azul. Vendo a tela de verdade de novo, voltou
     atrás: "ao invés de ambar ser um azulzinho... o azul vai combinar com
     o chat" (o resto do chat já usa esse mesmo azul claro no fundo
     degradê, ver --chat-tint-1 logo abaixo — o amarelo destoava). De volta
     ao mesmo tom de --primary-light — variável própria (em vez de
     reaproveitar --primary-light direto) só pra não acoplar a cor do balão
     a nenhuma outra tela que também usa --primary-light (destaques, foco
     de campo, badges...): se um dia uma mudar, a outra não muda junto. */
  --chat-mine-bg:#DCEAF7;
  /* Fundo decorativo do .chat-thread (ver comentário lá) — variáveis
     próprias em vez de reaproveitar --primary-light/--grey-50 direto,
     porque no tema escuro esses dois já são cores de SUPERFÍCIE fortes
     (fundo de cartão/menu ativo), então o degradê pensado pra ficar "quase
     imperceptível" no tema claro virava um borrão azul bem visível em cima
     do fundo escuro (pedido do usuário: "o fundo do chat está meio
     degradê"). Aqui no tema claro os valores continuam iguais aos
     antigos — só o tema escuro (:root[data-theme="escuro"] abaixo) ganha
     valores próprios, translúcidos, pra manter a mesma sutileza. */
  --chat-tint-1:var(--primary-light);
  --chat-tint-2:var(--grey-50);
  --white:#FFFFFF;
  --grey-50:#F6F8FC;
  --grey-100:#E7ECF5;
  --grey-200:#DCE3F0;
  --grey-300:#C7CFDB;
  --grey-400:#8CA0C2;
  --grey-500:#6F81A0;
  --grey-600:#5B6B85;
  --grey-900:#1B2333;
  --text:#1B2333;
  --danger:#D64545;
  --warning:#E0A426;
  --success:#2E9E5B;
  --radius:14px;
  --shadow:0 2px 10px rgba(37,87,184,0.08);
  --shadow-lg:0 12px 32px rgba(37,87,184,0.14);
  /* Barra de topo (.app-nav no computador, .topbar no celular) — cor de
     MARCA fixa, de propósito NÃO redefinida dentro de
     :root[data-theme="escuro"] abaixo. --primary/--primary-dark clareiam
     no tema escuro (pra funcionar como texto/link legível sobre um fundo
     ESCURO em outras telas), mas a barra de topo é o inverso — um
     preenchimento sólido de cor com TEXTO BRANCO em cima — então herdar
     essas variáveis fazia a barra clarear junto e destoar do resto do
     tema escuro (pedido do usuário: "o topo também ficou muito claro").
     Mantendo fixas, a barra fica com a mesma cor de marca nos dois temas. */
  --chrome-1:#082a66;
  --chrome-2:#2557B8;
  --chrome-3:#3B7DE0;
  color-scheme:light;
}

/* =========================================================
   TEMAS — trocam só as VARIÁVEIS de cor acima; o resto do CSS
   inteiro já usa var(--...) pra cor de fundo/texto/borda em
   praticamente toda tela (cartões, formulários, tabelas, botões,
   modais...), então a troca já "cai em cascata" sem precisar
   reescrever regra por regra. Ligado por data-theme="X" na tag
   <html> (ver base.html), calculado a partir de User.theme (ver
   profile.html/rota profile_theme() em app.py). Cada tema abaixo é
   uma escolha salva na CONTA da pessoa (funciona em qualquer
   aparelho que ela usar pra entrar) — a única exceção é "auto"
   (ver bloco @media mais abaixo), que também olha pra preferência
   de claro/escuro do sistema operacional/navegador de cada aparelho.
   Alguns detalhes pontuais (ex.: emblemas de status coloridos, como
   os "badges" de risco/situação) continuam com a MESMA cor
   pastel-clara em qualquer tema de propósito — é um "chip" colorido
   por natureza, funciona igual bem numa tela clara ou escura.
   Pedido do usuário, depois de ver um menu de temas parecido num
   site de um amigo (SVXReflector): "sera que conseguimos implementar
   tambem?" — escolhendo OLED Black, Navy Blue, Auto (segue o
   sistema) e um quarto tema rosa/roxo (deixado sem nome de gênero
   no menu — é uma opção de cor pra quem quiser, não um tema
   marcado como "de mulher"). */
:root[data-theme="escuro"]{
  --primary:#5B93FF;
  --primary-dark:#3E6FCC;
  --primary-light:#152A4D;
  --accent:#4ADE80;
  --chat-mine-bg:#152A4D;
  --chat-tint-1:rgba(91,147,255,.07);
  --chat-tint-2:rgba(255,255,255,.025);
  --white:#1A2132;
  --grey-50:#0F1420;
  --grey-100:#2A3346;
  --grey-200:#333F57;
  --grey-300:#455167;
  --grey-400:#7C8AA8;
  --grey-500:#98A4BE;
  --grey-600:#B7C0D6;
  --text:#EDF1FA;
  --danger:#F1685E;
  --warning:#F0B84A;
  --success:#3FBE7B;
  --shadow:0 2px 10px rgba(0,0,0,.35);
  --shadow-lg:0 14px 34px rgba(0,0,0,.5);
  color-scheme:dark;
}

/* OLED Black — igual ao Escuro acima, só com as duas cores de SUPERFÍCIE
   (fundo da página e fundo dos cartões) trocadas por preto/quase-preto de
   verdade, pensado pra tela OLED (os pixels desligam de vez, economiza
   bateria) e pro preto ficar "puro" em vez de um cinza-azulado. O resto
   (texto, azul de marca, verde secundário, cores de status) é o mesmo do
   Escuro — inclusive a barra de topo, que ganha seu próprio degradê quase
   preto (--chrome-1/2/3) só pra este tema. */
:root[data-theme="oled"]{
  --primary:#5B93FF;
  --primary-dark:#3E6FCC;
  --primary-light:#0F1A2E;
  --accent:#4ADE80;
  --chat-mine-bg:#0F1A2E;
  --chat-tint-1:rgba(91,147,255,.07);
  --chat-tint-2:rgba(255,255,255,.025);
  --white:#0A0A0A;
  --grey-50:#000000;
  --grey-100:#1A1A1A;
  --grey-200:#242424;
  --grey-300:#333333;
  --grey-400:#7C8AA8;
  --grey-500:#98A4BE;
  --grey-600:#B7C0D6;
  --text:#EDF1FA;
  --danger:#F1685E;
  --warning:#F0B84A;
  --success:#3FBE7B;
  --shadow:0 2px 10px rgba(0,0,0,.6);
  --shadow-lg:0 14px 34px rgba(0,0,0,.75);
  --chrome-1:#000000;
  --chrome-2:#0A0F1A;
  --chrome-3:#111827;
  color-scheme:dark;
}

/* Navy Blue — outro escuro, mas com as superfícies claramente azul-marinho
   (em vez do cinza-azulado neutro do Escuro) e a barra de topo também
   nesse azul mais forte, só pra este tema. */
:root[data-theme="navy"]{
  --primary:#5B93FF;
  --primary-dark:#3E6FCC;
  --primary-light:#193A66;
  --accent:#4ADE80;
  --chat-mine-bg:#193A66;
  --chat-tint-1:rgba(91,147,255,.07);
  --chat-tint-2:rgba(255,255,255,.025);
  --white:#123157;
  --grey-50:#0A1B33;
  --grey-100:#1C4576;
  --grey-200:#26538A;
  --grey-300:#3568A0;
  --grey-400:#7C9CC9;
  --grey-500:#9AB4D9;
  --grey-600:#BFD3EC;
  --text:#EDF1FA;
  --danger:#F1685E;
  --warning:#F0B84A;
  --success:#3FBE7B;
  --shadow:0 2px 10px rgba(0,0,0,.4);
  --shadow-lg:0 14px 34px rgba(0,0,0,.55);
  --chrome-1:#0A1B33;
  --chrome-2:#173F73;
  --chrome-3:#2557B8;
  color-scheme:dark;
}

/* Rosé — ao contrário dos três de cima, este é um tema CLARO (fundo
   branco, texto escuro, igual o Claro padrão) só com a cor de marca
   trocada de azul pra um rosa/roxo. Por isso só as variáveis de cor de
   marca são redefinidas aqui — fundo, texto e cores de status continuam
   vindo do :root claro no topo do arquivo. */
:root[data-theme="rose"]{
  --primary:#C2367B;
  --primary-dark:#8F225A;
  --primary-light:#FBE6F0;
  --accent:#7C3AED;
  --shadow:0 2px 10px rgba(194,54,123,0.08);
  --shadow-lg:0 12px 32px rgba(194,54,123,0.14);
  --chrome-1:#8F225A;
  --chrome-2:#C2367B;
  --chrome-3:#7C3AED;
  color-scheme:light;
}

/* Auto (segue o sistema) — não tem paleta própria: por padrão usa o tema
   Claro normalmente, e só troca pra exatamente a mesma paleta do Escuro
   quando o SISTEMA OPERACIONAL/navegador do aparelho está configurado
   pra escuro (@media prefers-color-scheme, a única situação em que este
   arquivo usa essa media query — todos os outros temas são escolha fixa
   salva na conta, não dependem do aparelho). */
@media (prefers-color-scheme:dark){
  :root[data-theme="auto"]{
    --primary:#5B93FF;
    --primary-dark:#3E6FCC;
    --primary-light:#152A4D;
    --accent:#4ADE80;
    --chat-mine-bg:#152A4D;
    --chat-tint-1:rgba(91,147,255,.07);
    --chat-tint-2:rgba(255,255,255,.025);
    --white:#1A2132;
    --grey-50:#0F1420;
    --grey-100:#2A3346;
    --grey-200:#333F57;
    --grey-300:#455167;
    --grey-400:#7C8AA8;
    --grey-500:#98A4BE;
    --grey-600:#B7C0D6;
    --text:#EDF1FA;
    --danger:#F1685E;
    --warning:#F0B84A;
    --success:#3FBE7B;
    --shadow:0 2px 10px rgba(0,0,0,.35);
    --shadow-lg:0 14px 34px rgba(0,0,0,.5);
    color-scheme:dark;
  }
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font-body);
  background:var(--grey-50);
  color:var(--text);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--primary);text-decoration:none;}
h1,h2,h3,h4{font-family:var(--font-heading);font-weight:800;letter-spacing:-0.01em;}
.app-nav-brand .brand-text .name,
.topbar .brand-text .name,
.split-brand-name,
.rti-num-h{font-family:var(--font-heading);}

@keyframes fadeInUp{
  from{opacity:0;transform:translateY(10px);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}

/* =========================================================
   APP SHELL — barra de navegação no TOPO (sem menu lateral),
   igual em espírito ao app original: topo + abas + navegação
   inferior no celular. "É pra parecer um app mesmo."
   ========================================================= */
.app-shell{
  display:flex;
  flex-direction:column;
  min-height:100vh;
  width:100%;
}

/* ---------- Navegação de topo (somente desktop >=900px) ---------- */
.app-nav{
  display:none;
  background:linear-gradient(100deg,var(--chrome-1),var(--chrome-2) 55%,var(--chrome-3));
  position:sticky;top:0;z-index:30;
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 4px 20px rgba(8,42,102,.22);
}
.app-nav-inner{
  max-width:1240px;margin:0 auto;width:100%;
  display:flex;align-items:center;gap:14px;
  padding:0 40px;height:68px;
}
.app-nav-divider{width:1px;align-self:stretch;margin:16px 2px;background:rgba(255,255,255,.16);flex-shrink:0;}

.app-nav-brand{display:flex;align-items:center;gap:11px;color:#fff;flex-shrink:0;}
.app-nav-brand .brand-logo{
  width:41px;height:41px;border-radius:10px;background:rgba(255,255,255,.14);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;flex-shrink:0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
}
.app-nav-brand .brand-text{display:flex;flex-direction:column;line-height:1.3;}
/* Pedido do usuário: "aonde esta escrito EGI esta muito pequeno quase não
   da pra ver" — num monitor grande/tela de alta resolução (ver comentário
   do sino logo acima, mesma causa: os elementos do topo não crescem junto
   com a tela), 14px ficava pequeno demais pro nome da marca. Subiu pra
   17px (e a caixinha do logo, de 37px pra 41px, na mesma proporção) —
   ainda discreto no conjunto da barra, só mais legível. */
.app-nav-brand .name{font-weight:800;font-size:17px;letter-spacing:-.01em;}
.app-nav-brand .slogan{font-size:11px;opacity:.68;font-weight:500;}

.app-nav-tabs{display:flex;align-items:center;gap:3px;flex:1;height:100%;}
/* Ícones apenas, sem rótulo de texto visível — o nome de cada aba aparece
   como um "tooltip" ao passar o mouse (ver [data-tooltip] abaixo), pra
   manter a barra do topo enxuta e com aparência de app. O texto continua
   presente pra leitor de tela (.app-nav-tab-text, visualmente oculto). */
.app-nav-tab{
  display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.68);
  width:40px;height:40px;border-radius:10px;position:relative;
  transition:background .18s ease,color .18s ease;
}
.app-nav-tab i{font-size:15px;transition:transform .15s ease;}
.app-nav-tab:hover{background:rgba(255,255,255,.08);color:#fff;}
.app-nav-tab:hover i{transform:scale(1.12);}
.app-nav-tab.active{color:var(--primary-dark);background:#fff;box-shadow:0 2px 8px rgba(8,42,102,.25);}
/* "Novo Relatório" na barra do topo — chegou a ganhar um preenchimento
   dourado sempre visível (pedido antigo: "la no menu ele esta muito
   apagado e ele é a porta chave da nosso site"), mas o usuário voltou
   atrás depois de ver a cor de perto: "não gostei muito da cor do botão
   la no topo menu acho que la pode ficar normal". Volta a se comportar
   igual aos outros ícones da barra (.app-nav-tab): discreto por padrão,
   branco só no hover/.active — sem cor de destaque própria. O card grande
   "Começar um novo relatório" do Painel (.report-cta-icon, mais abaixo)
   continua sendo o ponto de destaque de verdade dessa ação. */
/* (sem overrides — .app-nav-tab-cta herda toda a aparência de .app-nav-tab
   acima; a classe continua no HTML só como "gancho" pra achar esse botão
   específico, se precisar de novo no futuro.) */
.app-nav-tab-cta.active{background:#fff;color:var(--primary-dark);}
.app-nav-tab-text{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Tooltip discreto abaixo do ícone — aparece ao passar o mouse ou focar
   (teclado), some ao tirar o mouse. Usado na barra do topo e em qualquer
   outro botão só-de-ícone que tenha [data-tooltip]. */
[data-tooltip]{position:relative;}
[data-tooltip]::after{
  content:attr(data-tooltip);position:absolute;top:calc(100% + 8px);left:50%;
  transform:translate(-50%,-4px);background:var(--primary-dark);color:#fff;
  font-size:11.5px;font-weight:600;font-family:var(--font-body);letter-spacing:0;
  padding:5px 10px;border-radius:7px;white-space:nowrap;pointer-events:none;
  opacity:0;visibility:hidden;transition:opacity .15s ease,transform .15s ease;
  box-shadow:var(--shadow-lg);z-index:80;
}
[data-tooltip]::before{
  content:"";position:absolute;top:100%;left:50%;transform:translate(-50%,0);
  border:5px solid transparent;border-bottom-color:var(--primary-dark);
  opacity:0;visibility:hidden;transition:opacity .15s ease;pointer-events:none;z-index:80;
}
[data-tooltip]:hover::after,[data-tooltip]:focus-visible::after{opacity:1;visibility:visible;transform:translate(-50%,0);}
[data-tooltip]:hover::before,[data-tooltip]:focus-visible::before{opacity:1;visibility:visible;}
.app-nav-badge{
  background:var(--danger);color:#fff;font-size:10px;font-weight:800;min-width:16px;height:16px;
  border-radius:20px;display:inline-flex;align-items:center;justify-content:center;padding:0 4px;
  position:absolute;top:3px;right:3px;box-shadow:0 0 0 2px var(--primary);pointer-events:none;
}

.app-nav-user{display:flex;align-items:center;gap:6px;flex-shrink:0;}
.app-nav-profile-link{
  display:flex;align-items:center;gap:10px;padding:6px 12px 6px 6px;border-radius:30px;
  color:#fff;transition:background .15s ease;
}
.app-nav-profile-link:hover{background:rgba(255,255,255,.1);}
.app-nav-avatar{
  width:34px;height:34px;border-radius:50%;overflow:hidden;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.18);color:#fff;
  font-weight:700;font-size:13px;box-shadow:0 0 0 2px rgba(255,255,255,.28);
}
.app-nav-avatar img{width:100%;height:100%;object-fit:cover;}
.app-nav-username{display:flex;flex-direction:column;line-height:1.25;}
.app-nav-username .uname{font-size:12.5px;font-weight:700;}
.app-nav-username .urole{font-size:10px;opacity:.68;font-weight:500;}
/* Base de ".icon-btn" — botão circular só com ícone, usado em dezenas de
   telas (baixar, editar, excluir, "novo item", etc.). Antes só existiam
   variações "encaixadas" (.topbar .icon-btn, .chat-search-bar .icon-btn),
   então qualquer uso fora dessas duas barras específicas — como o "Sair" no
   menu do usuário no computador, ou os ícones de ação nas linhas de
   Documentos/Modelos/Categorias/Dashboard — ficava sem formato nenhum
   (achatado, sem fundo, sem tamanho — o "ícone de sair muito feio" do
   pedido do usuário). Agora todo ".icon-btn" já nasce com essa aparência
   padrão (pensada pra ficar sobre fundo claro/cartão, mesmo padrão do botão
   da Equipe em ".team-icon-btn"), e ".icon-btn.ghost" continua sendo só a
   variação de cor pra usar em cima de barra colorida (barra de marca no
   celular/computador), sobrescrevendo o fundo/cor abaixo. */
.icon-btn{
  width:32px;height:32px;border-radius:50%;border:none;
  background:var(--grey-50);color:var(--grey-600);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:13px;cursor:pointer;flex-shrink:0;text-decoration:none;
  transition:background .15s ease,color .15s ease;
}
.icon-btn:hover{background:var(--grey-100);color:var(--text);}
.icon-btn.ghost{background:rgba(255,255,255,.1);color:#fff;flex-shrink:0;}
.icon-btn.ghost:hover{background:rgba(255,255,255,.2);}

/* ---------- Mobile topbar (visível < 900px) ---------- */
.mobile-topbar{display:block;}
.topbar{
  display:flex;align-items:center;gap:10px;
  padding:16px 18px;
  background:linear-gradient(120deg,var(--chrome-2),var(--chrome-1));
  color:var(--white);
  position:sticky;top:0;z-index:20;
}
.topbar .brand{display:flex;align-items:center;gap:10px;flex:1;}
.topbar .brand-logo{
  width:34px;height:34px;border-radius:9px;background:var(--white);
  display:flex;align-items:center;justify-content:center;
  font-weight:800;color:var(--primary);font-size:15px;flex-shrink:0;
}
.topbar .brand-text .name{font-weight:700;font-size:15px;line-height:1.2;}
.topbar .brand-text .slogan{font-size:10.5px;opacity:.85;}
.topbar .back-link{color:var(--white);font-size:20px;line-height:1;display:flex;}
/* min-width:0 é o que permite o texto truncar dentro de um item flex (por
   padrão um item flex nunca fica menor que o próprio conteúdo, mesmo com
   overflow:hidden) — sem isso, um título longo (ex.: nome de grupo do chat
   gerado automaticamente, "Ana, Beto e Carla") empurra a caixa e fica
   embaixo dos ícones flutuantes de sino/chat (position:fixed, sempre por
   cima — ver .notif-bell-wrap/.chat-bell-wrap abaixo), parecendo "cortado".
   padding-right reserva o espaço desses dois ícones flutuantes (34px cada +
   respiro), pra o texto nunca entrar visualmente debaixo deles, mesmo
   quando a tela também tem um terceiro ícone de verdade no canto (ex.:
   "ver participantes" na conversa de grupo). */
.topbar-title{
  font-weight:700;font-size:17px;flex:1;text-align:center;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0;
  padding-right:92px;
}
@media (min-width:900px){.topbar-title{padding-right:0;}}
.topbar .icon-btn{
  color:var(--white);background:rgba(255,255,255,.14);
  border:none;width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:15px;cursor:pointer;overflow:hidden;
  transition:background .15s ease;
}
.topbar .icon-btn:hover{background:rgba(255,255,255,.26);}
.topbar-avatar{width:100%;height:100%;object-fit:cover;border-radius:50%;}

/* ---------- Desktop header (visível >= 900px) ---------- */
.desktop-header{
  display:none;
  align-items:flex-start;
  justify-content:space-between;
  padding:30px 40px 0;
  gap:16px;
  animation:fadeInUp .35s ease both;
}
.desktop-header h1{margin:0;font-size:24px;font-weight:800;letter-spacing:-.01em;}
.desktop-header-sub{color:var(--grey-600);font-size:13.5px;margin-top:4px;}
.desktop-header-actions{display:flex;gap:10px;flex-shrink:0;}

/* "Voltar" no computador (bloco opcional `desktop_back` em base.html) —
   pedido do usuário: "quando voce entra em administração qualquer item...
   depois não tem uma tela de voltar". Vazio na maioria das páginas
   (`.mobile-topbar .back-link` já resolve isso no celular), então fica
   escondido por padrão via `:empty` e só aparece nas telas que preenchem
   o bloco. */
.desktop-back-row:empty{display:none;}
.desktop-back-row:not(:empty){margin-bottom:14px;}
/* Pedido do usuário: "esse voltar ta de matar ne muito pequeno e nada
   interativo" — texto pequeno em cinza claro, sem nenhuma pista visual de
   que é clicável além da cor mudando no hover. Virou uma pílula de
   verdade: fundo e borda próprios, mais respiro, ícone e texto maiores, e
   o hover agora troca o FUNDO também (não só a cor do texto), pra parecer
   um botão de fato — o mesmo tratamento que qualquer outro botão
   secundário da tela já recebe. */
.desktop-back-link{
  display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;
  color:var(--grey-600);text-decoration:none;transition:all .15s ease;
  background:var(--grey-50);border:1px solid var(--grey-200);border-radius:20px;
  padding:8px 16px 8px 12px;
}
.desktop-back-link:hover{color:var(--primary);background:var(--primary-light);border-color:var(--primary-light);}
.desktop-back-link i{font-size:13px;}
.mobile-only-title{display:block;margin:0 0 14px;font-size:19px;}
.mobile-only{display:block;}

/* ---------- Content ---------- */
.content{
  flex:1;
  width:100%;
  padding:18px;
  padding-bottom:100px;
  animation:fadeInUp .35s ease both;
}

.narrow{max-width:640px;margin:0 auto;}
.narrow-wide{max-width:760px;margin:0 auto;}
/* Container mais largo para telas de configuração com duas colunas (form +
   prévia) — ex.: Configurações do Relatório. No celular (abaixo do
   breakpoint do .rb-grid) vira uma coluna só, igual às demais telas. */
.rb-wide{max-width:1180px;margin:0 auto;}

.flash{
  padding:10px 14px;border-radius:10px;font-size:13.5px;margin-bottom:12px;
  animation:fadeIn .25s ease both;
}
.flash-success{background:#E6F6ED;color:var(--success);}
.flash-error{background:#FCEAEA;color:var(--danger);}
.flash-info{background:var(--primary-light);color:var(--primary);}

/* ---------- Confirmação de "salvar" (toast fixo no topo da tela) ----------
   Usado só pelas mensagens de flash() de verdade (ver .flash-toast-wrap em
   base.html) — os usos de .flash/.flash-error como aviso fixo dentro do
   conteúdo da página (ex.: company_billing.html, "código Pix ainda não
   disponível") continuam exatamente como antes, sem position:fixed nem
   auto-esconder, porque não passam por aqui (não têm a classe .flash-toast). */
.flash-toast-wrap{
  /* top:74px fica logo abaixo da barra do topo do celular (.topbar, ~66px de
     altura) — sem isso, o toast (z-index mais alto, de propósito, pra nunca
     ficar escondido atrás de nada) tampava o botão de voltar/título. No PC
     (.app-nav, 68px), o ajuste equivalente vem no media query abaixo. */
  position:fixed;top:74px;left:50%;transform:translateX(-50%);
  z-index:500;display:flex;flex-direction:column;gap:8px;
  width:calc(100% - 32px);max-width:420px;pointer-events:none;
}
@media (min-width:900px){.flash-toast-wrap{top:84px;}}
.flash.flash-toast{
  pointer-events:auto;display:flex;align-items:center;gap:10px;
  margin-bottom:0;box-shadow:var(--shadow-lg);font-weight:600;
  animation:flashToastIn .22s ease both;
}
.flash.flash-toast > i{font-size:15px;flex-shrink:0;}
.flash.flash-toast > span{flex:1;line-height:1.4;}
.flash-toast-close{
  background:none;border:none;padding:3px;margin:-3px;cursor:pointer;
  opacity:.55;color:inherit;font-size:12px;flex-shrink:0;line-height:1;
}
.flash-toast-close:hover{opacity:1;}
.flash.flash-toast.flash-toast-hide{animation:flashToastOut .2s ease both;}
@keyframes flashToastIn{from{opacity:0;transform:translateY(-10px);}to{opacity:1;transform:translateY(0);}}
@keyframes flashToastOut{from{opacity:1;transform:translateY(0);}to{opacity:0;transform:translateY(-8px);}}

/* Faixa fixa de "modo suporte" (administrador da plataforma acessando os
   dados de outra empresa pra dar suporte — ver base.html/support_mode_enter
   em app.py). Era âmbar (cor de alerta) — pedido do usuário: "esse amarelo
   ta muito feio não combina com a plataforma". Uma primeira tentativa trocou
   pra azul, mas o usuário corrigiu: "falei pra tirar o ambar colocar um
   verdinho bem claro" — então é um verde bem suave/claro (tom próprio,
   independente de --primary, pra não competir com a cor de marca do site),
   com texto/ícone num verde mais escuro só pra manter contraste de leitura.
   Continua se destacando por ficar fixa no topo (nunca passa desapercebida),
   só não parece mais um alerta de erro — é um AVISO informativo, não um
   problema. */
.support-mode-banner{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:#E6F6EC;color:#1F7A4D;border-bottom:2px solid #8FD9AE;
  padding:9px 16px;font-size:13px;font-weight:600;
}
.support-mode-banner i{font-size:15px;}
.support-mode-banner span{flex:1;min-width:200px;}
.support-mode-banner form{margin:0;}
.support-mode-banner button{
  border:1px solid #8FD9AE;background:#fff;color:#1F7A4D;
  border-radius:8px;padding:5px 12px;font-size:12.5px;font-weight:700;cursor:pointer;
}
.support-mode-banner button:hover{background:#1F7A4D;border-color:#1F7A4D;color:#fff;}

/* ---------- Stepper ---------- */
.stepper{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;}
.step{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1;position:relative;}
.step .dot{
  width:32px;height:32px;border-radius:50%;background:var(--grey-100);color:var(--grey-600);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;
  border:2px solid var(--grey-100);transition:all .25s ease;
}
.step.done .dot{background:var(--success);border-color:var(--success);color:var(--white);}
.step.active .dot{background:var(--primary);border-color:var(--primary);color:var(--white);box-shadow:0 0 0 5px var(--primary-light);}
.step .label{font-size:11px;color:var(--grey-600);text-align:center;}
.step.active .label{color:var(--primary);font-weight:700;}
.step:not(:last-child)::after{
  content:"";position:absolute;top:16px;left:60%;width:80%;height:2px;background:var(--grey-100);z-index:0;transition:background .25s ease;
}
.step.done:not(:last-child)::after{background:var(--success);}

.stepper-wrap{margin-bottom:24px;}
.stepper-progress{height:5px;border-radius:3px;background:var(--grey-100);overflow:hidden;margin-top:2px;}
.stepper-progress-fill{
  height:100%;border-radius:3px;background:linear-gradient(90deg,var(--primary),var(--accent));
  transition:width .5s cubic-bezier(.4,0,.2,1);
}
.stepper-pct{font-size:11px;color:var(--grey-600);font-weight:600;margin-top:7px;text-align:right;}

/* ---------- Forms ---------- */
.card-form{background:var(--white);}

/* ---------- Logo real da empresa (upload em Configurações) ---------- */
/* Quando há uma logo enviada, essas mesmas caixas (que antes só mostravam a
   letra inicial) passam a mostrar a imagem, mantendo o tamanho/formato
   original de cada contexto (topbar, tela de login, cabeçalho do laudo). */
.brand-logo img, .auth-logo img, .rti-header .brand .box img{
  width:100%;height:100%;object-fit:contain;border-radius:inherit;
}
/* Ícone de prancheta (fallback sem logo enviada) — um pouco maior que o
   texto do próprio contêiner, pra preencher melhor a caixa como a letra
   antiga fazia. */
.brand-logo i, .auth-logo i, .rti-header .brand .box i, .logo-settings-fallback i, .topbar .brand-logo i{
  font-size:1.35em;
}

/* ---------- Configurações — logo da empresa ---------- */
.logo-settings-preview{
  width:100%;height:120px;border-radius:14px;background:var(--grey-50);border:1.5px dashed var(--grey-100);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;overflow:hidden;
}
.logo-settings-preview img{max-width:80%;max-height:80%;object-fit:contain;}
.logo-settings-fallback{
  width:56px;height:56px;border-radius:14px;background:var(--primary);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:900;font-size:22px;
}
.field{margin-bottom:16px;}
.field label{display:block;font-size:12.5px;font-weight:700;color:var(--grey-600);margin-bottom:6px;text-transform:uppercase;letter-spacing:.03em;}
/* Ícone de ajuda contextual ("?") ao lado de um rótulo de campo — pensado
   para o técnico que não conhece o jargão/norma citada. Funciona por
   hover (desktop) e por toque/clique (mobile), alternado via JS em
   base.html; Escape ou clicar fora fecha. */
.field-help{
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;border-radius:50%;background:var(--grey-200);color:var(--grey-600);
  font-size:10px;font-weight:800;margin-left:6px;cursor:help;position:relative;
  vertical-align:middle;text-transform:none;letter-spacing:normal;
}
.field-help:hover,.field-help:focus,.field-help.show{background:var(--primary);color:#fff;outline:none;}
.field-help-tip{
  display:none;position:absolute;left:0;top:22px;z-index:40;
  width:250px;max-width:min(70vw,250px);background:var(--grey-900,#1f2937);color:#fff;
  font-size:11.5px;line-height:1.5;font-weight:400;text-transform:none;letter-spacing:normal;
  padding:9px 11px;border-radius:8px;box-shadow:0 6px 20px rgba(0,0,0,.28);cursor:auto;
}
.field-help:hover .field-help-tip,.field-help:focus .field-help-tip,.field-help.show .field-help-tip{display:block;}

/* Modo guiado ("quiz") para seções de campos técnicos densas em jargão —
   mostra uma pergunta (ou par de perguntas relacionadas) por vez, com
   progresso e navegação, e um botão para ver tudo de uma vez a qualquer
   momento (ver initWizard() no script no fim de report_step3_descricao.html). */
.wiz-container{border:1px solid var(--grey-100);border-radius:14px;padding:16px;background:var(--grey-50);margin-bottom:6px;}
.wiz-topbar{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.wiz-progress{flex:1;height:6px;border-radius:99px;background:var(--grey-200);overflow:hidden;}
.wiz-progress-fill{height:100%;width:0;background:var(--primary);border-radius:99px;transition:width .25s ease;}
.wiz-toggle-mode{background:none;border:none;color:var(--primary);font-size:11.5px;font-weight:700;cursor:pointer;white-space:nowrap;padding:0;}
.wiz-screen{display:none;}
.wiz-screen.active{display:block;animation:wizFadeIn .18s ease;}
.wiz-screen .field:last-child,.wiz-screen .field-row:last-child{margin-bottom:0;}
@keyframes wizFadeIn{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:translateY(0);}}
.wiz-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;padding-top:14px;border-top:1px solid var(--grey-100);}
.wiz-nav[hidden]{display:none;}
.wiz-step-label{font-size:11.5px;color:var(--grey-400);font-weight:700;}
.wiz-back:disabled{opacity:.4;cursor:not-allowed;}
.field input[type=text],.field input[type=email],.field input[type=password],
.field input[type=tel],.field input[type=number],.field select,.field textarea{
  width:100%;padding:12px 13px;border-radius:11px;border:1.5px solid var(--grey-100);
  background:var(--grey-50);font-size:14.5px;color:var(--text);font-family:inherit;
  transition:border-color .15s ease,background .15s ease,box-shadow .15s ease;
}
.field textarea{min-height:96px;resize:vertical;}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);background:var(--white);box-shadow:0 0 0 4px var(--primary-light);
}
.field-row{display:flex;gap:10px;}
.field-hint{display:block;font-size:11px;color:var(--primary);margin-top:5px;min-height:14px;}

/* Campo obrigatório não preenchido, sinalizado pelo listener global de
   "data-friendly-validation" (ver base.html) — pedido do usuário: "quando
   faltar algum campo sem preencher deve acusar em vermelho ficar
   profissional", no lugar do balão nativo do navegador ("Please fill out
   this field"), sem estilo e sem tradução. A classe ".field-invalid" pode
   cair tanto num ".field" (daí a borda vermelha nos inputs/textarea/select
   de dentro) quanto direto num grupo de chips/rádios sem input visível
   (".kind-grid"/".type-grid"/".chip-row" — ex.: "Tipo de relatório", "Grau
   de risco"), que nesse caso ganha um contorno vermelho nele mesmo. */
.field-invalid input[type=text],.field-invalid input[type=email],.field-invalid input[type=password],
.field-invalid input[type=tel],.field-invalid input[type=number],.field-invalid select,.field-invalid textarea{
  border-color:var(--danger);background:#FCEAEA;
}
.field-invalid.chip-row,.field-invalid.type-grid,.field-invalid.kind-grid,
.field-invalid .chip-row,.field-invalid .type-grid,.field-invalid .kind-grid{
  outline:1.5px solid var(--danger);outline-offset:4px;border-radius:12px;
}
/* ".rb-drop" é a área de upload de arquivo (ex.: certificado digital na
   assinatura) — sem input de texto visível pra pintar a borda, então o
   contorno vermelho vai no próprio quadro, igual chip-row/kind-grid. */
.field-invalid.rb-drop{
  outline:1.5px solid var(--danger);outline-offset:2px;border-radius:12px;
}
/* ".chat-grupo-add-form" (select "Adicionar alguém...") é um <form> flex
   compacto (select + botão lado a lado) sem nenhum ".field" em volta —
   marca o próprio form, e força a mensagem de erro pra uma linha nova
   embaixo (senão ela entraria como 3º item da mesma linha, ao lado do
   botão). */
.field-invalid.chat-grupo-add-form{
  outline:1.5px solid var(--danger);outline-offset:3px;border-radius:10px;flex-wrap:wrap;
}
.field-invalid.chat-grupo-add-form .field-error-msg{width:100%;}
.field-error-msg{display:none;align-items:center;gap:5px;font-size:11.5px;font-weight:700;color:var(--danger);margin-top:6px;}
.field-error-msg i{font-size:11px;}
/* A mensagem só aparece enquanto o campo/grupo continuar marcado como
   inválido — ela fica no DOM depois de corrigido (criar de novo a cada vez
   seria trabalho a mais sem motivo), então quem esconde é o CSS. */
.field-invalid .field-error-msg{display:flex;}
/* ---------- Mapa de localização (Passo 1 e tela do relatório) ---------- */
.location-map-wrap{
  border-radius:14px;overflow:hidden;border:1.5px solid var(--grey-100);background:var(--grey-50);
  margin-bottom:16px;animation:fadeIn .25s ease both;
}
.location-map-wrap img{display:block;width:100%;height:auto;aspect-ratio:600/280;object-fit:cover;background:var(--grey-100);}
.location-map-wrap img[hidden]{display:none;}
.location-map-caption{
  font-size:10.5px;color:var(--grey-600);padding:7px 12px;display:flex;align-items:center;gap:6px;
  background:var(--white);border-top:1px solid var(--grey-100);justify-content:space-between;
}
.location-map-caption a{color:var(--primary);font-weight:700;white-space:nowrap;}
.rti-body .location-map-wrap{margin:10px 0 0;}
/* Quando o mapa embutido (gerado pelo servidor via OpenStreetMap) não pôde
   ser criado — sem internet no servidor, endereço não encontrado etc. — um
   link direto pro Google Maps sempre funciona, pois quem busca o local é o
   navegador de quem abre o link, não este servidor. */
.location-map-fallback{padding:18px 16px;text-align:center;}
.location-map-fallback-link{display:inline-flex;align-items:center;gap:8px;color:var(--primary);font-weight:700;font-size:13px;}
.location-map-fallback-link:hover{text-decoration:underline;}
.check-row{
  display:flex;align-items:flex-start;gap:10px;font-size:12.5px;color:var(--grey-600);
  background:var(--grey-50);border:1.5px solid var(--grey-100);border-radius:11px;padding:12px 13px;
  margin-bottom:16px;cursor:pointer;line-height:1.45;
}
.check-row input{margin-top:2px;flex-shrink:0;width:16px;height:16px;accent-color:var(--primary);cursor:pointer;}
.field-row .field{flex:1;}
.hint{font-size:11.5px;color:var(--grey-400);margin-top:5px;}

/* ---------- Autocomplete de cliente já cadastrado ---------- */
.autocomplete-wrap{position:relative;}
.autocomplete-menu{
  position:absolute;top:calc(100% + 2px);left:0;right:0;background:var(--white);
  border:1px solid var(--grey-100);border-radius:12px;box-shadow:var(--shadow-lg);
  z-index:30;max-height:240px;overflow-y:auto;display:none;
}
.autocomplete-menu.open{display:block;animation:fadeIn .12s ease both;}
.autocomplete-item{padding:10px 14px;cursor:pointer;border-bottom:1px solid var(--grey-50);transition:background .12s ease;}
.autocomplete-item:last-child{border-bottom:none;}
.autocomplete-item:hover{background:var(--grey-50);}
.autocomplete-item .ac-name{font-weight:700;font-size:13px;color:var(--text);}
.autocomplete-item .ac-sub{font-size:11px;color:var(--grey-600);margin-top:1px;}
.autocomplete-hint{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  font-size:11px;color:var(--success);margin-top:6px;
}
.autocomplete-hint[hidden]{display:none;}
.ac-clear{
  margin-left:auto;background:none;border:none;color:var(--primary);font-size:11px;font-weight:700;
  cursor:pointer;text-decoration:underline;padding:0;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 18px;border-radius:12px;font-weight:700;font-size:14.5px;
  border:none;cursor:pointer;text-decoration:none;width:100%;
  transition:background .15s ease,box-shadow .15s ease,transform .1s ease,border-color .15s ease;
}
.btn:active{transform:scale(.98);}
.btn-primary{background:var(--primary);color:var(--white);box-shadow:0 4px 14px rgba(37,87,184,.25);}
.btn-primary:hover{background:var(--primary-dark);box-shadow:0 6px 18px rgba(37,87,184,.32);}
.btn-outline{background:var(--white);color:var(--primary);border:1.5px solid var(--primary);}
.btn-outline:hover{background:var(--primary-light);}
.btn-ghost{background:var(--grey-100);color:var(--text);}
.btn-ghost:hover{background:#dde5f3;}
.btn-danger{background:var(--danger);color:var(--white);}
.btn-sm{padding:8px 12px;font-size:12.5px;width:auto;}
.btn-inline{width:auto;padding:10px 16px;font-size:13px;}
.btn-row{display:flex;gap:10px;}
.btn-row .btn{flex:1;}

.fixed-actions{
  position:sticky;bottom:0;background:var(--white);
  padding:14px 18px;border-top:1px solid var(--grey-100);
  display:flex;gap:10px;
  box-shadow:0 -6px 20px rgba(37,87,184,.06);
}

/* ---------- Inspection type grid ---------- */
.type-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:6px;}
.type-card{
  border:1.5px solid var(--grey-100);border-radius:13px;padding:16px 6px;
  display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;
  background:var(--grey-50);text-align:center;
  transition:border-color .15s ease,background .15s ease,transform .12s ease,box-shadow .15s ease;
}
.type-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--grey-400);}
.type-card:hover .type-icon{transform:scale(1.1);}
.type-card .type-icon{
  width:38px;height:38px;border-radius:50%;
  background:var(--tc-bg,var(--grey-100));color:var(--tc,var(--grey-600));
  display:flex;align-items:center;justify-content:center;font-size:15px;
  transition:background .15s ease,color .15s ease,transform .15s ease;
}
.type-card span.label{font-size:11px;font-weight:700;letter-spacing:.01em;}
.type-card.selected{border-color:var(--primary);background:var(--primary-light);color:var(--primary);}
.type-card.selected .type-icon{background:var(--primary);color:#fff;}
.type-grid input{display:none;}
.kind-grid{grid-template-columns:repeat(2,1fr);}
.type-card.disabled{cursor:default;opacity:.75;}
.type-card.disabled:hover{transform:none;box-shadow:none;}

/* ---------- Module theme cards ("Ativar por tema") ---------- */
.theme-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:26px;}
.theme-card{
  border:1.5px solid var(--grey-100);border-radius:13px;padding:14px 16px;
  display:flex;align-items:center;gap:12px;background:var(--grey-50);
  transition:border-color .15s ease,box-shadow .15s ease;
}
.theme-card:hover{box-shadow:var(--shadow);border-color:var(--grey-400);}
.theme-icon{
  flex:none;width:38px;height:38px;border-radius:50%;
  background:var(--tc-bg,var(--grey-100));color:var(--tc,var(--grey-600));
  display:flex;align-items:center;justify-content:center;font-size:15px;
}
.theme-body{flex:1;min-width:0;}
.theme-label{font-size:13px;font-weight:700;}
.theme-desc{font-size:11.5px;color:var(--grey-500);margin-top:2px;line-height:1.35;}
.theme-status-full{
  flex:none;font-size:11.5px;font-weight:700;color:#15803d;
  display:flex;align-items:center;gap:5px;white-space:nowrap;
}
.theme-apply-btn{flex:none;padding:8px 14px;font-size:12px;white-space:nowrap;}
.theme-card.theme-partial{border-color:var(--tc,var(--grey-400));}
@media (max-width:640px){.theme-grid{grid-template-columns:1fr;}}

/* ---------- Evidence upload ---------- */
.evi-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:10px;}
.evi-actions-2{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:18px;}
.evi-btn{
  border:1.5px solid var(--grey-100);border-radius:13px;padding:18px 6px;
  display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;
  background:var(--white);text-align:center;font-size:12.5px;font-weight:700;color:var(--text);
  transition:border-color .15s ease,transform .12s ease,box-shadow .15s ease;
}
.evi-btn:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow);}
.evi-btn .circle{
  width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:17px;
}
.evi-btn.foto .circle{background:#E5F8EE;color:#1f8a4c;}
.evi-btn.video .circle{background:#E7F1FE;color:#1d5fc4;}
.evi-btn.audio .circle{background:#F1EAFB;color:#7b3fd1;}
.evi-btn.galeria .circle{background:#FEEFE3;color:#c26a1d;}
.evi-btn.arquivo .circle{background:#E9F4EE;color:#2e7d52;}
.evi-btn.documento .circle{background:#EFEAFB;color:#5b3fae;}
.evi-btn input{display:none;}

/* Documentos complementares (ART assinada, plantas, memorial descritivo
   etc.) — Evidence.kind == "documento", categoria própria, deliberadamente
   fora do evi-grid de evidências de campo (ver Report.general_documents em
   models.py). Lista simples (não grade de miniaturas): o que importa aqui é
   o nome do arquivo + uma descrição, não uma pré-visualização visual. */
.doc-list{display:flex;flex-direction:column;gap:8px;}
.doc-item{
  display:flex;align-items:center;gap:10px;border:1px solid var(--grey-100);border-radius:12px;
  padding:10px 12px;background:var(--white);animation:fadeIn .25s ease both;
}
.doc-item-icon{
  width:36px;height:36px;border-radius:10px;background:#EFEAFB;color:#5b3fae;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:15px;
}
.doc-item-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;}
.doc-item-info b{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;}
.doc-desc-input{
  width:100%;border:1px solid var(--grey-100);border-radius:8px;background:var(--grey-50);
  font-size:11.5px;padding:6px 8px;outline:none;color:var(--text);font-family:inherit;
}
.doc-desc-input:focus{background:var(--white);border-color:var(--accent);}
.doc-remove{
  border:none;background:var(--white);color:var(--danger);border-radius:50%;width:26px;height:26px;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;cursor:pointer;
  box-shadow:0 1px 4px rgba(0,0,0,.15);flex-shrink:0;
}
.doc-remove:hover{transform:scale(1.08);}

.evi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.evi-item{
  position:relative;border-radius:12px;overflow:hidden;background:var(--white);
  border:1px solid var(--grey-100);animation:fadeIn .25s ease both;display:flex;flex-direction:column;
}
.evi-thumb{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--grey-100);}
.evi-thumb img,.evi-thumb video{width:100%;height:100%;object-fit:cover;display:block;}
.evi-thumb .audio-tile{
  width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--primary-light);color:var(--primary);gap:6px;font-size:10.5px;font-weight:700;
}
.evi-thumb .audio-tile i{font-size:20px;}
.evi-thumb .file-tile{
  width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--grey-100);color:var(--grey-600);gap:6px;font-size:10px;font-weight:700;padding:6px;text-align:center;
}
.evi-thumb .file-tile i{font-size:20px;}
.evi-thumb .badge-kind{
  position:absolute;bottom:5px;right:5px;background:rgba(0,0,0,.55);color:#fff;
  font-size:11px;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;
}
.evi-remove{
  position:absolute;top:5px;right:5px;width:22px;height:22px;border-radius:50%;
  background:#fff;color:var(--danger);border:none;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:13px;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.2);transition:transform .12s ease;
  z-index:2;
}
.evi-remove:hover{transform:scale(1.1);}
.evi-move{
  position:absolute;top:5px;width:22px;height:22px;border-radius:50%;
  background:rgba(0,0,0,.5);color:#fff;border:none;display:flex;align-items:center;justify-content:center;
  font-size:11px;cursor:pointer;transition:background .12s ease;z-index:2;
}
.evi-move:hover{background:rgba(0,0,0,.72);}
.evi-move:disabled{opacity:.35;cursor:default;}
.evi-move.left{left:5px;}
.evi-move.right{left:31px;}
.evi-caption-input{
  width:100%;border:none;border-top:1px solid var(--grey-100);background:var(--white);
  font-size:10.5px;padding:6px 8px;outline:none;color:var(--text);font-family:inherit;
}
.evi-caption-input::placeholder{color:var(--grey-400);}
.evi-caption-input:focus{background:var(--primary-light);}
.section-title{font-size:13px;font-weight:800;color:var(--text);margin:18px 0 10px;display:flex;justify-content:space-between;align-items:center;}

.recorder-bar{
  display:none;align-items:center;gap:10px;background:var(--primary-light);
  border-radius:12px;padding:12px;margin-bottom:14px;
}
.recorder-bar.active{display:flex;animation:fadeIn .2s ease both;}
.rec-dot{width:10px;height:10px;border-radius:50%;background:var(--danger);animation:pulse 1s infinite;}
@keyframes pulse{0%{opacity:1;}50%{opacity:.3;}100%{opacity:1;}}
.rec-time{font-weight:700;font-size:13px;color:var(--primary);flex:1;}

/* ---------- Gravidade chips ---------- */
.chip-row{display:flex;gap:10px;margin-bottom:6px;}
.chip{
  flex:1;text-align:center;padding:11px 4px;border-radius:11px;border:1.5px solid var(--grey-100);
  font-weight:700;font-size:13px;cursor:pointer;background:var(--grey-50);
  transition:all .15s ease;
}
.chip:hover{transform:translateY(-2px);}
.chip input{display:none;}
.chip.alta.selected{background:#FCEAEA;border-color:var(--danger);color:var(--danger);}
.chip.media.selected{background:#FBF2E1;border-color:var(--warning);color:#8a6413;}
.chip.baixa.selected{background:#E6F6ED;border-color:var(--success);color:var(--success);}
.chip-row{flex-wrap:wrap;}
.chip.prazo-chip{flex:0 0 auto;padding:9px 14px;}
.chip.prazo-chip.selected{background:var(--primary-light);border-color:var(--primary);color:var(--primary);}

/* Situação de checklist (Regular/Irregular/N.P.) — mesma linguagem visual
   dos chips de gravidade acima, paleta própria (ver CHECKLIST_STATUS_CHOICES). */
.chip.regular.selected{background:#E6F6ED;border-color:var(--success);color:var(--success);}
.chip.irregular.selected{background:#FCEAEA;border-color:var(--danger);color:var(--danger);}
.chip.nao_aplicavel.selected{background:var(--grey-100);border-color:var(--grey-400);color:var(--grey-600);}
.badge-concluido{background:#E6F6ED;color:var(--success);}
.badge-regular{background:#E6F6ED;color:var(--success);}
.badge-irregular{background:#FCEAEA;color:var(--danger);}
.badge-nao_aplicavel{background:var(--grey-100);color:var(--grey-600);}

/* ---------- Chamada pra "Novo Relatório" no topo do painel ---------- */
/* Card de destaque bem visível logo na entrada do painel principal —
   pedido do usuário: "tem como por um botão do relatório na pagina inicial
   ou algum icone porque la no menu ele esta muito apagado e ele é a porta
   chave da nosso site ali ele escolhe tudo o que sugere". Fundo em
   degradê na cor de marca (mesmas --primary/--primary-dark de sempre) pra
   se destacar de todo o resto da tela, que é branco/neutro. O ícone por
   dentro usava --warning (dourado) pra reforçar visualmente que era o
   mesmo botão/ação do destaque que existia no menu do topo — mas o
   usuário não gostou do dourado/laranja ali ("nesse azul acho que ele
   poderia ser amarelo ou verde e não laranja") depois de ver de perto, e
   como o destaque do menu do topo foi removido (ver .app-nav-tab-cta
   acima), não faz mais sentido manter os dois emparelhados mesmo. Ícone
   passou a usar --accent (o verde secundário da marca, já usado em outros
   lugares do site) — dá bastante contraste com o azul de fundo sem cair
   no laranja que o usuário rejeitou. */
.report-cta-card{
  display:flex;align-items:center;gap:16px;background:linear-gradient(120deg,var(--primary),var(--primary-dark));
  color:#fff;border-radius:18px;padding:20px 22px;margin-bottom:18px;text-decoration:none;
  box-shadow:var(--shadow-lg);transition:transform .15s ease,box-shadow .15s ease;
}
.report-cta-card:hover{transform:translateY(-2px);}
.report-cta-icon{
  width:52px;height:52px;border-radius:14px;background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;
}
.report-cta-text{flex:1;min-width:0;}
.report-cta-title{font-size:16px;font-weight:800;}
.report-cta-desc{font-size:12.5px;opacity:.85;margin-top:3px;line-height:1.45;}
.report-cta-arrow{font-size:16px;opacity:.85;flex-shrink:0;}
@media (max-width:600px){
  .report-cta-card{padding:14px 16px;}
  .report-cta-desc{display:none;}
}

/* ---------- Dashboard stats ---------- */
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:18px;}
.stat-card{
  position:relative;overflow:hidden;
  border:1px solid var(--grey-100);border-radius:16px;padding:16px;background:var(--white);
  box-shadow:var(--shadow);
  animation:fadeInUp .4s ease both;
}
.stat-card::after{
  content:"";position:absolute;top:-30px;right:-30px;width:90px;height:90px;border-radius:50%;
  background:currentColor;opacity:.07;
}
.stat-icon{
  width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-size:14px;margin-bottom:12px;background:currentColor;
}
.stat-icon i{color:var(--white);}
.stat-num{font-size:26px;font-weight:800;line-height:1;letter-spacing:-.02em;}
.stat-label{font-size:11.5px;color:var(--grey-600);font-weight:600;margin-top:4px;}
.stat-total{color:var(--primary);}
.stat-done{color:var(--success);}
.stat-draft{color:var(--grey-600);}
.stat-alta{color:var(--danger);}
.stat-card:nth-child(1){animation-delay:.02s;}
.stat-card:nth-child(2){animation-delay:.08s;}
.stat-card:nth-child(3){animation-delay:.14s;}
.stat-card:nth-child(4){animation-delay:.2s;}

/* Aviso de relatórios aguardando revisão do engenheiro logado */
.review-alert{
  display:flex;align-items:center;gap:12px;background:linear-gradient(100deg,#FBF2E1,#FEF8ED);
  border:1.5px solid #F3DFAF;border-radius:14px;padding:12px 16px;margin-bottom:14px;
  text-decoration:none;color:var(--text);transition:box-shadow .15s ease,transform .15s ease;
}
.review-alert:hover{box-shadow:var(--shadow-lg);transform:translateY(-1px);}
.review-alert-icon{
  width:36px;height:36px;border-radius:50%;background:#F3DFAF;color:#8a6413;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:15px;
}
.review-alert-text{flex:1;font-size:13px;color:#6b4e12;}
.review-alert-text b{color:#8a6413;}
.review-alert > i{color:#8a6413;font-size:12px;}

/* ---------- Dashboard / list ---------- */
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;}
.dot-alta{background:var(--danger);}
.dot-media{background:var(--warning);}
.dot-baixa{background:var(--success);}

/* Busca por cliente/condomínio/endereço */
.search-bar{
  display:flex;align-items:center;gap:10px;background:var(--white);border:1.5px solid var(--grey-100);
  border-radius:14px;padding:4px 6px 4px 16px;margin-bottom:14px;transition:border-color .15s ease,box-shadow .15s ease;
}
.search-bar:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px var(--primary-light);}
.search-bar i.fa-magnifying-glass{color:var(--grey-400);font-size:14px;flex-shrink:0;}
.search-bar input{
  flex:1;border:none;outline:none;background:transparent;font-size:14px;color:var(--text);
  font-family:inherit;padding:9px 0;min-width:0;
}
.search-clear{
  width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:var(--grey-400);font-size:12px;flex-shrink:0;transition:background .15s ease,color .15s ease;
}
.search-clear:hover{background:var(--grey-100);color:var(--text);}
.search-submit{
  width:34px;height:34px;border-radius:10px;border:none;background:var(--primary);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:13px;cursor:pointer;flex-shrink:0;
  transition:background .15s ease;
}
.search-submit:hover{background:var(--primary-dark);}

/* Barra de filtros: grupos segmentados (Status / Gravidade) + dropdown (Tipo) */
.filter-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:18px;}

/* ---------- Interruptor de aparência (6 opções) — ver Perfil ----------
   Cresceu de 2 opções (claro/escuro) pra 6 (+ OLED Black, Navy Blue, Rosé,
   Auto — pedido do usuário ao ver os temas do site de um amigo). Por isso
   trocou de inline-flex fixo pra flex-wrap: em telas largas os 6 botões
   ficam numa linha só, em telas estreitas quebram em 2-3 linhas em vez de
   espremer ou vazar da tela. */
.theme-switch{display:flex;flex-wrap:wrap;background:var(--grey-100);border-radius:12px;padding:3px;gap:3px;width:100%;}
.theme-switch-opt{
  display:flex;align-items:center;justify-content:center;gap:7px;padding:9px 14px;border-radius:9px;
  font-size:12.5px;font-weight:700;color:var(--grey-600);background:none;border:none;cursor:pointer;
  font-family:inherit;transition:background .15s ease,color .15s ease;flex:1 1 auto;min-width:104px;
  white-space:nowrap;
}
.theme-switch-opt:hover{color:var(--text);}
.theme-switch-opt.selected{background:var(--white);color:var(--primary);box-shadow:0 1px 5px rgba(37,87,184,.16);}
.theme-switch-opt i{font-size:13px;}
/* O botão de cada tema mostra o próprio ícone com a cor do tema quando
   selecionado, pra dar uma prévia da cor mesmo antes de trocar de fato. */
.theme-switch-opt[data-tema="oled"].selected i{color:#000;}
.theme-switch-opt[data-tema="navy"].selected i{color:#173F73;}
.theme-switch-opt[data-tema="rose"].selected i{color:#C2367B;}

.seg{display:inline-flex;align-items:center;background:var(--grey-100);border-radius:12px;padding:3px;gap:1px;max-width:100%;overflow-x:auto;scrollbar-width:none;}
.seg::-webkit-scrollbar{display:none;height:0;}
.seg-item{
  white-space:nowrap;padding:7px 13px;border-radius:9px;font-size:12px;font-weight:700;
  color:var(--grey-600);display:inline-flex;align-items:center;gap:6px;
  transition:all .15s ease;
}
.seg-item:hover{color:var(--text);}
.seg-item.active{background:var(--white);color:var(--primary);box-shadow:0 1px 5px rgba(37,87,184,.16);}
.seg-grav .seg-item.grav-alta.active{color:var(--danger);}
.seg-grav .seg-item.grav-media.active{color:#8a6413;}
.seg-grav .seg-item.grav-baixa.active{color:var(--success);}

.type-filter{position:relative;}
.type-filter-btn{
  display:inline-flex;align-items:center;gap:8px;background:var(--grey-100);border:none;
  padding:9px 14px;border-radius:12px;font-size:12px;font-weight:700;color:var(--grey-600);
  cursor:pointer;transition:background .15s ease,color .15s ease;font-family:inherit;
}
.type-filter-btn:hover{background:var(--grey-200);color:var(--text);}
.type-filter-btn.has-value{background:var(--primary-light);color:var(--primary);}
.type-filter-btn .chev{font-size:9px;margin-left:1px;transition:transform .18s ease;}
.type-filter-btn.menu-open .chev{transform:rotate(180deg);}

.type-filter-menu{
  position:absolute;top:calc(100% + 8px);right:0;left:auto;background:var(--white);border-radius:16px;
  box-shadow:var(--shadow-lg);border:1px solid var(--grey-100);padding:10px;z-index:40;
  display:none;width:min(320px,86vw);max-height:340px;overflow-y:auto;
}
.type-filter-menu.open{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;animation:fadeInUp .16s ease both;}
.type-filter-item{
  display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 4px;border-radius:12px;
  cursor:pointer;font-size:10px;font-weight:700;text-align:center;color:var(--text);
  transition:background .15s ease,transform .12s ease;
}
.type-filter-item:hover{background:var(--grey-50);transform:translateY(-1px);}
.type-filter-item.active{background:var(--tc-bg,var(--primary-light));color:var(--tc,var(--primary));}
.type-filter-item .ic{
  width:32px;height:32px;border-radius:50%;background:var(--tc-bg,var(--grey-100));color:var(--tc,var(--grey-600));
  display:flex;align-items:center;justify-content:center;font-size:13px;
}
.type-filter-item.active .ic{background:var(--white);box-shadow:0 1px 4px rgba(0,0,0,.1);}

.clear-filters{
  display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--grey-600);
  padding:9px 10px;border-radius:12px;transition:background .15s ease,color .15s ease;
}
.clear-filters:hover{background:var(--grey-100);color:var(--danger);}

.reports-grid{display:grid;grid-template-columns:1fr;gap:12px;}

.report-card-link{text-decoration:none;color:inherit;display:block;animation:fadeInUp .4s ease both;}
.report-card{
  position:relative;
  border:1px solid var(--grey-100);border-left:4px solid var(--grey-100);border-radius:14px;padding:16px;
  box-shadow:var(--shadow);background:var(--white);
  transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease;
  overflow:hidden;
}
.report-card.sev-alta{border-left-color:var(--danger);}
.report-card.sev-media{border-left-color:var(--warning);}
.report-card.sev-baixa{border-left-color:var(--success);}
.report-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px);border-color:var(--grey-100);}
.report-card-icon{
  width:38px;height:38px;border-radius:10px;
  background:var(--tc-bg,var(--primary-light));color:var(--tc,var(--primary));
  display:flex;align-items:center;justify-content:center;font-size:16px;margin-bottom:10px;
  transition:transform .15s ease;
}
.report-card-link:hover .report-card-icon{transform:scale(1.08) rotate(-4deg);}
.report-card .top-row{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;}
.report-card .client{font-weight:800;font-size:14.5px;}
.report-card .meta{font-size:12px;color:var(--grey-600);margin-top:3px;}
.card-badges{display:flex;flex-direction:column;gap:6px;align-items:flex-end;flex-shrink:0;}
.badge{
  padding:3px 10px;border-radius:20px;font-size:10.5px;font-weight:800;text-transform:uppercase;
  letter-spacing:.02em;white-space:nowrap;
}
.badge-alta{background:#FCEAEA;color:var(--danger);}
.badge-media{background:#FBF2E1;color:#8a6413;}
.badge-baixa{background:#E6F6ED;color:var(--success);}
.badge-rascunho{background:var(--grey-100);color:var(--grey-600);}
.badge-aguardando_revisao{background:#FBF2E1;color:#8a6413;}
.badge-aprovado{background:var(--primary-light);color:var(--primary);}
/* Status de cobrança (Cobranca.status — ver models.py/COBRANCA_STATUS_CHOICES) */
.badge-pendente{background:#FBF2E1;color:#8a6413;}
.badge-pago{background:#E6F6ED;color:var(--success);}
.badge-atrasado{background:#FCEAEA;color:var(--danger);}
.badge-cancelado{background:var(--grey-100);color:var(--grey-600);}
.badge-kind-rti{background:#dbeafe;color:#1d4ed8;}
.badge-kind-raeo{background:#ccfbf1;color:#0f766e;}
.badge-kind-dedetizacao{background:#ede9fe;color:#7c3aed;}
.badge-kind-caixa_dagua{background:#cffafe;color:#0891b2;}
.badge-kind-spda{background:#fef9c3;color:#ca8a04;}
.badge-kind-termografico{background:#fee2e2;color:#dc2626;}
.badge-kind-locacao{background:#d1fae5;color:#059669;}
.badge-kind-pgr{background:#ffedd5;color:#ea580c;}
.badge-kind-insalubridade{background:#ffe4e6;color:#9f1239;}
.badge-kind-ltcat{background:#e0e7ff;color:#4f46e5;}
.badge-kind-ergonomico{background:#fae8ff;color:#c026d3;}
.badge-kind-vistoria_cautelar{background:#e0f2fe;color:#0369a1;}
.badge-kind-acessibilidade{background:#dcfce7;color:#15803d;}
.badge-kind-elevadores{background:#fef3c7;color:#b45309;}
.badge-kind-estabilidade{background:#fee2e2;color:#991b1b;}

/* ---------- Painel dinâmico (filtros/busca sem recarregar) ---------- */
#dashboardDynamic{transition:opacity .12s ease;}
#dashboardDynamic.loading{opacity:.45;pointer-events:none;}

/* ---------- Gráficos do painel ---------- */
.charts-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px;}
.chart-card{
  background:var(--white);border:1px solid var(--grey-100);border-radius:14px;padding:16px;
}
.chart-card-wide{grid-column:1 / -1;}
.chart-card-title{font-size:12.5px;font-weight:800;color:var(--text);margin-bottom:10px;}
.chart-card-body{position:relative;height:200px;}
@media (max-width:760px){
  .charts-grid{grid-template-columns:1fr;}
  .chart-card-body{height:220px;}
}

/* ---------- Hub de cards (ícone + título grandes) ---------- */
/* Pedido do usuário: "eu ainda acho que voce pode deixar mais interativo
   isto... acho que daria pra implmentar isto em nosso site tambem" — o
   exemplo enviado foi o portal de serviços da Prefeitura de Porto Ferreira
   (grade de cards com ícone grande + nome, fácil de escanear visualmente).
   Componente genérico reaproveitado em 2 lugares: a página-hub de
   "Administração" (.hub-card cheio, com descrição e às vezes um número/
   estatística) e o atalho rápido do painel principal (.hub-card-compact,
   mais enxuto — só ícone + rótulo, sem descrição, pra não competir com os
   KPIs/gráficos que já ocupam o topo do dashboard). Cores herdadas das
   mesmas variáveis de :root (--white/--grey-100/--shadow/--primary...) —
   por isso funciona nos dois temas sem nenhuma regra extra em
   :root[data-theme="escuro"]. */
.hub-grid{
  /* auto-fit (não auto-fill) — pedido do usuário: "parece que ta muito
     apertado sendo que tem espaço pra melhor distribuir" ao trocar o
     container de Administração pro padrão largo (.rb-wide, 1180px). Com
     auto-fill sobrariam colunas vazias à direita quando há só 2-4 cards
     (Financeiro puro só vê 2); auto-fit deixa os cards existentes
     esticarem e ocuparem o espaço todo, sem coluna fantasma. */
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-bottom:18px;
}
.hub-card{
  display:flex;flex-direction:column;gap:10px;background:var(--white);border:1px solid var(--grey-100);
  border-radius:16px;padding:18px;text-decoration:none;color:var(--text);box-shadow:var(--shadow);
  transition:box-shadow .15s ease,transform .15s ease;position:relative;overflow:hidden;
}
.hub-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px);}
.hub-card::after{
  content:"";position:absolute;top:-30px;right:-30px;width:90px;height:90px;border-radius:50%;
  background:currentColor;opacity:.06;pointer-events:none;
}
.hub-card-icon{
  width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-size:17px;background:currentColor;flex-shrink:0;
}
.hub-card-icon i{color:var(--white);}
.hub-card-title{font-size:14.5px;font-weight:800;color:var(--text);}
.hub-card-desc{font-size:12px;color:var(--grey-600);line-height:1.45;}
/* Selo numérico opcional no canto (ex.: "12 empresas", "3 pendentes") —
   pensado pra dar aquela sensação "viva"/interativa que o usuário pediu,
   sem depender só do ícone estático como no exemplo de referência. Cor
   neutra (mesmo padrão do .team-count já usado na Equipe) em vez de
   currentColor — o card já herda a cor temática no ícone, e aqui um selo
   com fundo/texto fixos evita o problema de "fundo e texto com a mesma
   cor" que currentColor causaria num elemento só. */
.hub-card-stat{
  font-size:11px;font-weight:700;color:var(--primary);background:var(--primary-light);
  display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;
  align-self:flex-start;
}
.hub-card-arrow{
  position:absolute;top:16px;right:16px;color:var(--grey-300);font-size:12px;
}
/* Cores temáticas por destino (mesma ideia de currentColor já usada em
   .stat-card/.stat-icon acima — troca o ícone/selo/circulo decorativo de
   uma vez só, sem repetir a cor em cada propriedade). */
.hub-card-empresas{color:var(--primary);}
.hub-card-cobranca{color:#0E7C6B;}
.hub-card-checklists{color:#7b3fd1;}
.hub-card-config{color:var(--grey-600);}

/* Variante compacta pro painel principal — só ícone + rótulo curto, cards
   bem menores lado a lado (mais parecido com a grade densa do exemplo da
   Prefeitura, que tinha ~23 tiles pequenos numa tela só). */
.hub-grid-compact{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;margin-bottom:18px;
}
.hub-card-compact{
  display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;
  background:var(--white);border:1px solid var(--grey-100);border-radius:14px;padding:14px 8px;
  text-decoration:none;color:var(--text);box-shadow:var(--shadow);
  transition:box-shadow .15s ease,transform .15s ease;
}
.hub-card-compact:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px);}
.hub-card-compact .hub-card-icon{width:36px;height:36px;font-size:14px;border-radius:10px;}
.hub-card-compact .hub-card-title{font-size:11px;font-weight:700;line-height:1.25;}
@media (max-width:760px){
  .hub-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));}
  .hub-grid-compact{grid-template-columns:repeat(auto-fill,minmax(84px,1fr));}
}

/* ---------- Sino de notificações ---------- */
/* No mobile o topbar de cada tela já tem um ícone à direita (perfil, ou um
   espaçador) em right:18px/34px de largura — o sino fica fixo um pouco mais
   à esquerda dele, na mesma faixa vertical, para nunca sobrepor. No desktop
   (>=900px, ver media query abaixo) ele volta para o canto superior direito,
   onde não há mais nada naquela posição exata. */
.notif-bell-wrap{position:fixed;top:calc(16px + var(--support-banner-h));right:60px;z-index:200;}
.notif-bell-btn{
  position:relative;width:34px;height:34px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(255,255,255,.16);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:14px;transition:background .15s ease;
}
.notif-bell-btn:hover{background:rgba(255,255,255,.28);}
.notif-badge{
  position:absolute;top:-3px;right:-3px;min-width:16px;height:16px;padding:0 4px;border-radius:9px;
  background:var(--danger,#D64545);color:#fff;font-size:9.5px;font-weight:800;line-height:16px;text-align:center;
  box-shadow:0 0 0 2px var(--primary,#2557B8);
}
.notif-panel{
  position:absolute;top:calc(100% + 10px);right:0;width:320px;max-width:calc(100vw - 28px);
  background:var(--white);border-radius:14px;box-shadow:0 12px 34px rgba(20,30,60,.22);
  border:1px solid var(--grey-100);opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .15s ease,transform .15s ease,visibility .15s;overflow:hidden;
}
@media (min-width:900px){
  /* Pedido do usuário ("o sino ta la na ponta toda hora ele desregula") —
     causa: o sino é `position:fixed` relativo à JANELA inteira, mas o
     conteúdo da barra do topo (.app-nav-inner) tem `max-width:1240px` e
     fica CENTRALIZADO (`margin:0 auto`) — numa tela larga (monitor grande,
     ou acessando via um desktop remoto com resolução alta, como é o caso
     aqui), sobra um respiro à direita da barra antes da borda real da
     janela, e o sino (fixo na borda da janela) acaba "flutuando" longe dos
     outros ícones do canto direito (avatar/sair), parecendo fora do lugar.
     Em vez de mover o sino pra dentro do HTML da barra (ele também precisa
     aparecer sozinho, sem barra nenhuma, em cada tela do celular — ver
     comentário no topo desta seção), o cálculo abaixo soma esse respiro
     ao "right" sempre que a tela é mais larga que 1240px, pra ele
     acompanhar a borda de verdade do conteúdo da barra em vez da borda da
     janela. Em telas até 1240px o resultado é idêntico ao valor fixo de
     antes (right:14px). */
  /* Reaproveita --support-banner-h (ver :root, no topo do arquivo) pelo
     mesmo motivo do bloco mobile acima: com a faixa de "modo suporte"
     visível, a barra azul (.app-nav) é empurrada pra baixo, mas o sino
     ("position:fixed") não acompanha isso por conta própria.

     Faltava também respiro HORIZONTAL: o sino fica a 14px da borda direita
     do conteúdo (.app-nav-inner), mas o bloco do usuário (.app-nav-user —
     avatar/nome/sair) enche o espaço até a borda do padding da barra
     (40px), sem saber que o sino flutua por cima — sino e avatar ficavam
     sobrepostos em ~12px em qualquer largura de tela testada (1366/1536/
     1852/1920px, sempre a mesma sobreposição via getBoundingClientRect).
     O margin-right extra em .app-nav-user abre espaço pra isso nunca mais
     acontecer. */
  .notif-bell-wrap{top:calc(14px + var(--support-banner-h));right:max(14px, calc((100vw - 1240px) / 2 + 14px));}
  .notif-bell-btn{width:38px;height:38px;font-size:15px;}
  .app-nav-user{margin-right:24px;}
}

/* ---------- Ícone flutuante de chat (mobile) ---------- */
/* Mesma lógica de posicionamento do sino de notificações acima, só que mais
   um degrau à esquerda (right:104px = os 60px do sino + a largura do botão
   do sino + respiro), pra nunca sobrepor nem o sino nem o ícone de perfil
   do topbar mobile. No desktop (>=900px) este ícone flutuante desaparece
   de propósito — lá o Chat já tem sua própria aba na barra do topo (ver
   .app-nav-tabs em base.html), então mostrar os dois seria repetir a mesma
   informação duas vezes. */
.chat-bell-wrap{position:fixed;top:calc(16px + var(--support-banner-h));right:104px;z-index:200;display:block;}
.chat-bell-btn{
  position:relative;width:34px;height:34px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(255,255,255,.16);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:14px;
}
@media (min-width:900px){
  .chat-bell-wrap{display:none;}
}
.notif-panel.open{opacity:1;visibility:visible;transform:translateY(0);}
.notif-panel-head{
  display:flex;align-items:center;justify-content:space-between;padding:12px 14px;
  border-bottom:1px solid var(--grey-100);font-weight:800;font-size:13px;color:var(--text,#1B2430);
}
.notif-mark-all{background:none;border:none;color:var(--primary,#2557B8);font-size:11px;font-weight:700;cursor:pointer;padding:0;}
.notif-list{max-height:360px;overflow-y:auto;}
.notif-empty{padding:24px 14px;text-align:center;color:var(--grey-600);font-size:12.5px;}
.notif-item{
  display:flex;gap:10px;padding:11px 14px;text-decoration:none;color:inherit;
  border-bottom:1px solid var(--grey-50);transition:background .1s ease;
}
.notif-item:last-child{border-bottom:none;}
.notif-item:hover{background:var(--grey-50);}
.notif-item.unread{background:var(--primary-light,#EAF1FD);}
.notif-item.unread:hover{background:#DDE9FB;}
.notif-item-icon{
  flex-shrink:0;width:30px;height:30px;border-radius:50%;background:var(--grey-100);color:var(--primary,#2557B8);
  display:flex;align-items:center;justify-content:center;font-size:12.5px;
}
.notif-item-body{display:flex;flex-direction:column;gap:2px;min-width:0;}
.notif-item-msg{font-size:12.5px;line-height:1.4;color:var(--text,#1B2430);}
.notif-item.unread .notif-item-msg{font-weight:700;}
.notif-item-time{font-size:10.5px;color:var(--grey-600);}

/* ---------- Autosave ---------- */
.autosave-hint{
  display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--grey-600);
  margin-bottom:10px;transition:color .15s ease;
}
.autosave-hint.saving{color:var(--grey-600);}
.autosave-hint.saving i{animation:autosave-pulse 1s ease-in-out infinite;}
.autosave-hint.saved{color:var(--success);}
@keyframes autosave-pulse{0%,100%{opacity:.5;}50%{opacity:1;}}

.fab{
  position:fixed;bottom:88px;right:22px;
  background:var(--primary);color:#fff;width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:26px;box-shadow:0 6px 16px rgba(37,87,184,.35);
  border:none;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;
  z-index:15;
}
.fab:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 10px 22px rgba(37,87,184,.4);}

.empty-state{
  text-align:center;padding:52px 20px 36px;color:var(--grey-600);
  border:1.5px dashed var(--grey-100);border-radius:20px;background:var(--grey-50);
}
.empty-icon{
  width:72px;height:72px;border-radius:50%;margin:0 auto 18px;
  background:linear-gradient(135deg,var(--primary-light),var(--grey-100));color:var(--primary);
  display:flex;align-items:center;justify-content:center;font-size:28px;
}
.empty-state h3{margin:0 0 6px;font-size:18px;color:var(--text);}
.empty-state .hint{font-size:13px;max-width:340px;margin:0 auto;}
.empty-state .btn-inline{width:auto;}
.empty-state-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}

.how-it-works{
  display:flex;align-items:flex-start;justify-content:center;gap:10px;
  margin:38px auto 0;max-width:640px;flex-wrap:wrap;
}
.how-step{
  flex:1;min-width:130px;max-width:170px;background:var(--white);border:1px solid var(--grey-100);
  border-radius:14px;padding:16px 12px;position:relative;box-shadow:var(--shadow);
}
.how-num{
  position:absolute;top:-10px;left:12px;width:22px;height:22px;border-radius:50%;
  background:var(--primary);color:#fff;font-size:11px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
}
.how-icon{
  width:36px;height:36px;border-radius:10px;background:var(--primary-light);color:var(--primary);
  display:flex;align-items:center;justify-content:center;font-size:15px;margin:6px 0 10px;
}
.how-title{font-size:13px;font-weight:800;color:var(--text);margin-bottom:3px;}
.how-desc{font-size:11px;color:var(--grey-600);line-height:1.4;}
.how-arrow{color:var(--grey-400);font-size:14px;align-self:center;margin-top:36px;}
@media (max-width:640px){.how-arrow{display:none;} .how-it-works{gap:14px;}}

/* ---------- Bottom nav (mobile) ---------- */
.bottom-nav{
  display:flex;align-items:center;justify-content:space-around;
  position:sticky;bottom:0;background:var(--white);
  border-top:1px solid var(--grey-100);padding:8px 10px calc(8px + env(safe-area-inset-bottom));
  z-index:20;
}
.bn-item{
  display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--grey-600);
  font-size:10.5px;font-weight:700;padding:4px 14px;border-radius:10px;transition:color .15s ease,background .15s ease;
}
.bn-item span:first-child{font-size:18px;}
.bn-item.active{color:var(--primary);background:var(--primary-light);}
.bn-fab{
  background:var(--primary);color:#fff;width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;margin-top:-26px;box-shadow:0 6px 16px rgba(37,87,184,.35);
  padding:0;
}
.bn-fab span{font-size:24px;}
.bn-fab.active{background:var(--primary);color:#fff;}
/* A barra ganhou um 5º item (antes eram 4: Início/Checklists/Novo/Perfil —
   agora Início/Relatórios/Novo/Checklists/Perfil, ver base.html) — em
   telas bem estreitas (celulares de entrada) reduz o respiro horizontal e
   o tamanho da letra/ícone pra continuar cabendo tudo numa linha, sem
   quebrar o texto do rótulo. */
@media (max-width:380px){
  .bn-item{padding:4px 6px;font-size:9.5px;}
  .bn-item span:first-child{font-size:16px;}
}

/* ---------- Report view (RTI card) — documento formal ---------- */
.rti-card{border:1px solid var(--grey-100);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-lg);background:var(--white);}
/* Estilo "Clássico" (ver Configurações do Relatório > Estilo do laudo) — troca
   os títulos/nome da empresa para uma fonte serifada na tela, ecoando a
   fonte Times usada no PDF quando esse estilo está selecionado (ver
   utils.FONT_PRESETS). Fontes do sistema — sem precisar vendorizar arquivo. */
.rti-card.font-classico h1, .rti-card.font-classico h2, .rti-card.font-classico h3, .rti-card.font-classico h4,
.rti-card.font-classico .rti-num-h{
  font-family:Georgia,'Times New Roman',serif;
}
.rti-header{
  /* Preenchimento sólido (sem gradiente) — mesmo critério do PDF, que
     desenha a faixa como um retângulo de cor única. Evita que uma cor
     clara/neutra (ex.: branco) vire um degradê acinzentado no meio, bem
     diferente da cor que a pessoa escolheu. */
  background:var(--primary);color:var(--on-primary,#fff);padding:20px 22px;
  display:flex;justify-content:space-between;align-items:flex-start;gap:10px;position:relative;overflow:hidden;
}
.rti-header::after{
  content:"";position:absolute;top:-40px;right:-40px;width:140px;height:140px;border-radius:50%;
  background:rgba(255,255,255,.06);pointer-events:none;
}
.rti-header .brand{display:flex;align-items:center;gap:12px;position:relative;}
.rti-header .brand .box{width:38px;height:38px;background:#fff;border-radius:10px;color:var(--heading,var(--primary));display:flex;align-items:center;justify-content:center;font-weight:900;font-size:16px;flex-shrink:0;}
.rti-header h2{margin:0;font-size:15px;letter-spacing:.01em;}
.rti-header-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px;position:relative;}
.rti-doc-no{font-size:11px;font-weight:700;color:var(--on-primary-soft,rgba(255,255,255,.85));letter-spacing:.02em;}
.rti-body{padding:26px;}

.rti-num-h{
  display:flex;align-items:center;gap:9px;font-size:12px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--text);margin:34px 0 12px;font-weight:800;
}
.rti-num-h:first-child{margin-top:0;}
.rti-num{
  width:22px;height:22px;border-radius:50%;background:var(--primary);color:var(--on-primary,#fff);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;
}
.rti-p{margin:0;font-size:13.5px;line-height:1.6;white-space:pre-line;color:var(--text);}
.rti-normas-list{margin:8px 0 0;padding-left:20px;font-size:13.5px;line-height:1.7;color:var(--text);}
.rti-normas-list li{margin-bottom:2px;}
.rti-note{
  margin:24px 0 0;padding:12px 14px;background:var(--grey-50);border-radius:12px;
  font-size:11.5px;line-height:1.55;color:var(--grey-600);border:1px solid var(--grey-100);
}

.audit-log-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.audit-log-item{display:flex;align-items:flex-start;gap:10px;}
.audit-log-icon{
  width:26px;height:26px;border-radius:50%;background:var(--grey-100);color:var(--grey-600);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:11px;margin-top:1px;
}
.audit-log-body{display:flex;flex-direction:column;gap:1px;}
.audit-log-desc{font-size:13px;color:var(--text);line-height:1.4;}
.audit-log-when{font-size:11px;color:var(--grey-500,var(--grey-600));}

.text-template-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;}
.text-template-item{border-bottom:1px solid var(--grey-100);padding-bottom:12px;}
.text-template-item:last-child{border-bottom:none;padding-bottom:0;}
.text-template-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px;}
.text-template-actions{display:flex;gap:12px;flex-shrink:0;}

/* Menu de inserção rápida de texto-modelo (report_step3_descricao.html /
   report_step_itens.html) — botão pequeno + dropdown simples ao lado do
   textarea correspondente. */
.tpl-insert-row{display:flex;align-items:center;gap:8px;margin-top:6px;}
.tpl-insert-row select{max-width:260px;font-size:12px;padding:4px 8px;}

.kv-table{width:100%;border-collapse:collapse;font-size:12.5px;background:var(--grey-50);border-radius:12px;overflow:hidden;}
.kv-table tr{border-bottom:1px solid var(--white);}
.kv-table tr:last-child{border-bottom:none;}
.kv-table td{padding:9px 12px;vertical-align:top;}
.kv-table td.k{color:var(--grey-600);font-weight:700;width:38%;font-size:11px;text-transform:uppercase;letter-spacing:.02em;}

.grav-box{
  display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:12px;
  background:var(--grey-50);border:1px solid var(--grey-100);border-left:4px solid var(--grey-400);
}
.grav-box p{margin:0;font-size:12.5px;line-height:1.55;color:var(--grey-600);padding-top:1px;}
.grav-box-alta{border-left-color:var(--danger);}
.grav-box-media{border-left-color:var(--warning);}
.grav-box-baixa{border-left-color:var(--success);}

.rti-section{margin-bottom:16px;}
.rti-section h4{font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--heading,var(--primary));margin:0 0 6px;}

/* Resumo executivo — cartão condensado logo após a identificação, com os
   números principais do laudo de relance (tela e PDF). */
.exec-summary-box{
  margin:16px 0 0;padding:16px 0 4px;border-top:1px solid var(--grey-100);border-bottom:1px solid var(--grey-100);
}
.exec-summary-title{
  font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--grey-600);
  margin-bottom:12px;display:flex;align-items:center;gap:8px;
}
.exec-summary-grid{display:flex;flex-wrap:wrap;gap:16px 30px;}
.exec-summary-grid > div{display:flex;flex-direction:column;gap:4px;min-width:88px;}
.exec-summary-label{font-size:10px;text-transform:uppercase;letter-spacing:.03em;color:var(--grey-600);font-weight:700;}
.exec-summary-value{font-size:19px;font-weight:800;color:var(--text);line-height:1.1;}
.exec-summary-value.sev-alta{color:var(--danger);}
.exec-summary-value.sev-media{color:#8a6413;}
.exec-summary-value.sev-baixa{color:var(--success);}
.exec-summary-score-label{font-size:12px;font-weight:700;margin:10px 0 4px;}

/* Legenda rápida de graus de risco, mostrada antes da lista de itens para
   dar contexto aos badges Crítico/Regular/Mínimo. */
.severity-legend{display:flex;flex-wrap:wrap;gap:6px 20px;margin:0 0 16px;}
.severity-legend-item{
  flex:1 1 220px;font-size:11px;line-height:1.4;padding:2px 0 2px 10px;
  border-left:2px solid var(--grey-400);color:var(--grey-600);
}
.severity-legend-item.sev-alta{border-left-color:var(--danger);}
.severity-legend-item.sev-media{border-left-color:var(--warning);}
.severity-legend-item.sev-baixa{border-left-color:var(--success);}
.severity-legend-item b{color:var(--text);}
.rti-section p{margin:0;font-size:13.5px;line-height:1.5;white-space:pre-line;}
.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.photo-grid img,.photo-grid video{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:8px;display:block;}
.photo-figure{margin:0;}
.photo-caption{font-size:11px;color:var(--grey-600);margin-top:4px;line-height:1.35;}

.sig-row{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;border-top:1px solid var(--grey-100);padding-top:20px;margin-top:6px;}
.sig-row .who{font-size:12.5px;max-width:380px;flex:1;}
.sig-row .who b{display:block;font-size:13.5px;}
.sig-line{width:180px;border-top:1.3px solid var(--text);margin-bottom:8px;}
.sig-role{font-size:9.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--grey-400);font-weight:700;margin-bottom:2px;}
.sig-cred{color:var(--grey-600);font-size:11px;margin-top:3px;}
.sig-pending{
  display:flex;align-items:center;gap:7px;font-size:11.5px;color:#8a6413;background:#FBF2E1;
  border-radius:9px;padding:8px 12px;
}
.qr-box img{width:70px;height:70px;}
.qr-box{text-align:center;font-size:9px;color:var(--grey-600);flex-shrink:0;}

/* ---------- Painel de revisão do engenheiro responsável ---------- */
.review-panel{
  background:var(--white);border:1.5px solid var(--grey-100);border-radius:16px;padding:18px;margin-bottom:18px;
}
.review-panel-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px;}
.review-panel-head i{
  width:36px;height:36px;border-radius:50%;background:var(--primary-light);color:var(--primary);
  display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;
}
.review-panel-head b{font-size:14px;color:var(--text);}
.review-actions{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.review-form{display:flex;flex-direction:column;gap:8px;background:var(--grey-50);border-radius:12px;padding:14px;}
.review-form label{font-size:11px;font-weight:700;color:var(--grey-600);text-transform:uppercase;letter-spacing:.02em;}
.review-form input,.review-form textarea{
  width:100%;padding:10px 11px;border-radius:9px;border:1.5px solid var(--grey-100);
  background:var(--white);font-size:13px;color:var(--text);font-family:inherit;
}
.review-form textarea{min-height:70px;resize:vertical;}
.review-form .btn{margin-top:4px;}
@media (max-width:760px){.review-actions{grid-template-columns:1fr;}}

/* ---------- Avisos de status do relatório ---------- */
.status-alert{
  display:flex;align-items:center;gap:10px;border-radius:12px;padding:12px 16px;margin-bottom:16px;font-size:13px;
}
.status-alert i{font-size:14px;flex-shrink:0;}
.status-alert-info{background:var(--primary-light);color:var(--primary-dark);}
.status-alert-warning{background:#FBF2E1;color:#8a6413;}
.status-alert-success{background:#E4F7EC;color:#1c6b41;}
.status-alert-error{background:#FDECEC;color:#96281B;}
.status-alert a{color:inherit;font-weight:700;text-decoration:underline;}
.status-alert.checklist-completude{align-items:flex-start;}
.checklist-completude-list{margin:6px 0 8px;padding-left:18px;}
.checklist-completude-list li{margin-bottom:2px;}

/* ---------- Badge de lembrete de revistoria (ver Report.revistoria_status) ---------- */
.badge-revistoria-vencido{background:#FDECEC;color:#96281B;}
.badge-revistoria-vencendo{background:#FFF6E5;color:#8a6413;}

@media print{
  .app-nav,.mobile-topbar,.bottom-nav,.desktop-header-actions,.share-row,.hint{display:none!important;}
  body,.content{background:#fff;padding:0;}
  .rti-card{box-shadow:none;border:none;}
}

.share-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px;}
.share-btn{
  display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 4px;
  border-radius:12px;background:var(--grey-50);border:1px solid var(--grey-100);font-size:11.5px;font-weight:700;color:var(--text);
  transition:all .15s ease;
}
.share-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--accent);}
.share-btn .circle{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;background:var(--white);box-shadow:0 1px 4px rgba(37,87,184,.12);}
.share-btn .circle.pdf{color:#D64545;}
.share-btn .circle.whatsapp{color:#25D366;}
.share-btn .circle.email{color:var(--accent);}

/* ---------- Equipe (múltiplos técnicos) ---------- */
.team-list{display:flex;flex-direction:column;gap:10px;margin-top:18px;}
.team-card{
  display:flex;align-items:center;gap:12px;background:var(--white);border:1px solid var(--grey-100);
  border-radius:14px;padding:12px 14px;
}
.team-avatar{
  width:42px;height:42px;border-radius:50%;background:var(--primary-light);color:var(--primary);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;flex-shrink:0;overflow:visible;
  position:relative;
}
.team-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
/* Bolinha de "on-line agora" (ver User.is_online em models.py e o hook
   _touch_last_seen em app.py) — verde recente, vermelha quando a última
   atividade já passou da janela de 5 minutos (mostrada só pra quem está
   ativo; técnico desativado nunca mostra a bolinha). Pedido do usuário:
   "não precisa estar escrito online agora pois ja tem a bolinha verde os
   off lines poderia deixar a bolinha vermelho" — o texto "On-line agora"
   que ficava do lado do nome (.team-online-label) foi removido, e o
   offline (antes cinza) passou pra vermelho. */
.team-online-dot{
  position:absolute;bottom:-1px;right:-1px;width:12px;height:12px;border-radius:50%;
  background:var(--success);border:2px solid var(--white);
}
.team-online-dot-off{background:var(--danger);}
/* Terceiro estado "ausente" (ver User.presence_status em models.py) —
   comparação com o status do ICQ antigo (on-line/ausente/off-line em vez
   de só dois estados): amarelo entre a janela "on-line" e a janela
   "ausente" — pessoa logada mas sem nenhuma atividade há um tempo. */
.team-online-dot-away{background:var(--warning);}
.team-info{flex:1;min-width:0;}
.team-name{font-weight:800;font-size:13.5px;color:var(--text);}
/* Só na lista de conversas do chat (não na Equipe, onde o nome pode vir
   acompanhado de selos como "Admin"/"Inativo" que não devem ser cortados)
   — nomes de grupo auto-gerados podem ficar bem longos ("Ana, Beto e
   Carla"), então aqui sim truncamos com "...". */
.chat-inbox-item .team-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.team-meta{font-size:11.5px;color:var(--grey-600);margin-top:1px;}
/* Selos de e-mail/telefone/registro profissional (CREA/CFT/CAU) — pedido
   do usuário: "os cards da equipes estão tudo embolado as vezes o crea
   sai em cima outros embaixo... e-mail e telefone [tem que] ficar tudo
   arrumadinho". Antes cargo/e-mail/telefone/registro formavam uma única
   linha de texto corrido com "·", que quebrava de um jeito diferente em
   cada card dependendo do tamanho de cada parte. Agora cada informação
   (fora o cargo, que fica só em .team-meta) é um selo pequeno próprio
   numa fileira que quebra sozinha (flex-wrap) — mesmo visual em todo
   card, não importa o tamanho de cada parte. */
.team-chip-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px;}
.team-chip{
  display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;
  color:var(--grey-600);background:var(--grey-50);border:1px solid var(--grey-100);
  padding:2px 9px;border-radius:20px;
}
.team-count{
  font-size:11px;font-weight:700;color:var(--primary);background:var(--primary-light);
  padding:4px 10px;border-radius:20px;flex-shrink:0;white-space:nowrap;
}
.team-you{
  font-size:10px;font-weight:700;color:var(--success);background:#E4F7EC;
  padding:2px 8px;border-radius:20px;margin-left:6px;
}
.team-engineer{
  font-size:10px;font-weight:700;color:var(--primary);background:var(--primary-light);
  padding:2px 8px;border-radius:20px;margin-left:6px;display:inline-flex;align-items:center;gap:4px;
}
.team-admin{
  font-size:10px;font-weight:700;color:#7b3fd1;background:#F1EAFB;
  padding:2px 8px;border-radius:20px;margin-left:6px;display:inline-flex;align-items:center;gap:4px;
}
.team-inactive{
  font-size:10px;font-weight:700;color:var(--danger);background:#FCEAEA;
  padding:2px 8px;border-radius:20px;margin-left:6px;display:inline-flex;align-items:center;gap:4px;
}
.team-finance{
  font-size:10px;font-weight:700;color:#0E7C6B;background:#E1F5EF;
  padding:2px 8px;border-radius:20px;margin-left:6px;display:inline-flex;align-items:center;gap:4px;
}
.team-card-inactive{opacity:.65;}
.team-card{flex-wrap:wrap;}
/* Reaproveitado por Empresas (platform_companies.html) e Modelos de
   Checklist da plataforma (platform_checklist_templates.html) — não usado
   mais em team.html (ver .team-footer abaixo), que tinha esse mesmo
   problema de coluna alta de botões de texto e ganhou um tratamento
   próprio; mantido aqui intacto pras outras duas telas. */
.team-role-actions{display:flex;flex-direction:column;gap:4px;flex-shrink:0;align-items:flex-end;}
.team-role-actions .btn-text-action{padding:4px 8px;}

/* Rodapé de ações do card da Equipe — pedido do usuário ("quando eu for
   ver a equipe... não está muito bom"): antes disso eram até 5 botões de
   texto (Editar/Tornar-Remover engenheiro/Tornar-Remover admin/Reativar-
   Desativar/Excluir) empilhados numa coluna à direita, ficando bem mais
   alto que o resto do card e, no celular, uma lista de links soltos sem
   parecer botão nenhum. Agora só sobra o contador de relatórios e dois
   ícones soltos (Mensagem e "⋮ mais opções", mesma ideia do menu de
   balão do chat) — o resto mora dentro do menu. */
.team-footer{display:flex;align-items:center;gap:8px;flex-shrink:0;margin-left:auto;position:relative;}
.team-icon-btn{
  width:30px;height:30px;border-radius:50%;border:none;background:var(--grey-50);color:var(--grey-600);
  display:flex;align-items:center;justify-content:center;font-size:12.5px;cursor:pointer;flex-shrink:0;
  text-decoration:none;
}
.team-icon-btn:hover{background:var(--grey-100);color:var(--text);}
.team-more-wrap{position:relative;flex-shrink:0;}
.team-more-btn{
  width:30px;height:30px;border-radius:50%;border:none;background:var(--grey-50);color:var(--grey-600);
  display:flex;align-items:center;justify-content:center;font-size:13px;cursor:pointer;
}
.team-more-btn:hover,.team-more-btn.team-more-menu-open{background:var(--grey-100);color:var(--text);}
.team-more-menu{
  position:absolute;top:36px;right:0;z-index:6;display:flex;flex-direction:column;min-width:200px;
  background:var(--white);border:1px solid var(--grey-100);border-radius:10px;padding:4px;
  box-shadow:0 8px 24px rgba(0,0,0,.14);
}
/* Mesma pegadinha do [hidden] já documentada neste projeto (ver
   .chat-more-menu/.chat-attach-preview) — uma regra de autor com a mesma
   especificidade do `[hidden]` nativo sempre ganha, então sem esta regra
   própria o menu voltaria a aparecer mesmo com o atributo hidden ligado. */
.team-more-menu[hidden]{display:none;}
.team-more-menu-form{width:100%;}
.team-more-menu-item{
  display:flex;align-items:center;gap:9px;border:none;background:transparent;text-align:left;
  font-family:inherit;font-size:12px;font-weight:600;color:var(--text);padding:8px 10px;
  border-radius:7px;cursor:pointer;white-space:nowrap;width:100%;text-decoration:none;
}
.team-more-menu-item:hover{background:var(--grey-50);}
.team-more-menu-item i{width:14px;text-align:center;color:var(--grey-500);flex-shrink:0;}
.team-more-menu-item.danger{color:var(--danger);}
.team-more-menu-item.danger i{color:var(--danger);}
/* No celular a linha de nome+badges já ocupa a largura toda — o rodapé
   (contador + Mensagem + "⋮") desce pra própria linha, alinhado à
   direita, em vez de espremer o nome/e-mail/telefone num espaço bem menor
   só pra ficar tudo numa linha só. */
@media (max-width:600px){
  .team-footer{width:100%;margin-left:0;justify-content:flex-end;padding-top:8px;margin-top:2px;border-top:1px solid var(--grey-100);}
}

/* ---------- Cards visuais de Empresas / Cobrança da plataforma ---------- */
/* Pedido do usuário (Round F): "cadastrar empresa e cobranças está muito
   desconfigurada tem que deixar mais interativo tipo os relatorios que ta
   bem intuitivo" — e depois, junto com o exemplo da Prefeitura de Porto
   Ferreira, confirmado pra essas 2 telas especificamente. Componente NOVO
   e próprio (não é .team-list/.team-card, que continua intacto na tela de
   Equipe) — aqui os cards vão em GRADE (várias colunas, verticais) em vez
   da lista de linhas horizontais da Equipe, o que dá mais "respiro" visual
   pra cada empresa. .team-avatar/.team-role-actions/.team-more-menu (etc.)
   continuam sendo reaproveitados dentro do card novo — só o contêiner e o
   arranjo interno do card mudam. */
.company-card-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-top:18px;
}
.company-card{
  display:flex;flex-direction:column;gap:10px;background:var(--white);border:1px solid var(--grey-100);
  border-radius:16px;padding:16px;box-shadow:var(--shadow);transition:box-shadow .15s ease;
}
.company-card:hover{box-shadow:var(--shadow-lg);}
.company-card-inactive{opacity:.65;}
.company-card-head{display:flex;align-items:flex-start;gap:12px;}
.company-card-head .team-avatar{width:46px;height:46px;font-size:17px;}
.company-card-info{flex:1;min-width:0;}
.company-card-name{font-weight:800;font-size:14.5px;color:var(--text);line-height:1.3;}
.company-card-badges{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px;}
.company-card-meta{font-size:11.5px;color:var(--grey-600);line-height:1.5;}
.company-card-meta i{width:13px;text-align:center;color:var(--grey-400);margin-right:3px;}
/* Card 100% "clicável" — usado na Cobrança, onde o card inteiro é um link
   e não há botões de ação por dentro (ver platform_billing_overview.html);
   em Empresas o card fica sem esta classe pois precisa manter cliques
   independentes nos links de ação de dentro (Editar/Módulos/Cobrança...). */
a.company-card{text-decoration:none;color:inherit;cursor:pointer;}
a.company-card:hover{transform:translateY(-2px);}
.company-card-actions{
  display:flex;flex-wrap:wrap;gap:6px;padding-top:10px;margin-top:auto;border-top:1px solid var(--grey-100);
}
.company-card-actions .btn-text-action{padding:5px 9px;font-size:11.5px;}
@media (max-width:600px){
  .company-card-grid{grid-template-columns:1fr;}
}

/* ---------- Chat (mensagens diretas entre a equipe) ---------- */
/* Lista de conversas reaproveita .team-card/.team-avatar/.team-online-dot
   (ver acima) — cada linha é um link pra abrir a conversa com aquela
   pessoa, em vez de um card estático. */
.chat-inbox-item{cursor:pointer;text-decoration:none;}
.chat-inbox-preview{
  font-size:11.5px;color:var(--grey-600);margin-top:1px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:100%;
}
.chat-inbox-preview-unread{color:var(--text);font-weight:700;}
.chat-inbox-you{color:var(--grey-500);font-weight:600;margin-right:3px;}
.chat-inbox-empty{color:var(--grey-500);font-style:italic;}
.chat-unread-badge{
  background:var(--danger);color:#fff;font-size:11px;font-weight:800;min-width:20px;height:20px;
  border-radius:20px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px;
  flex-shrink:0;
}
.chat-inbox-side{
  display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0;min-width:20px;
}
.chat-inbox-time{font-size:10.5px;color:var(--grey-500);white-space:nowrap;}

/* Cabeçalho da conversa (avatar + nome + on-line/off-line da pessoa) */
.chat-thread-head{
  display:flex;align-items:center;gap:12px;padding:4px 2px 16px;border-bottom:1px solid var(--grey-100);
  margin-bottom:14px;
}

/* Balões de mensagem — .mine (quem está vendo a tela mandou) alinha à
   direita em azul; .theirs (a outra pessoa) alinha à esquerda em cinza
   claro. white-space:pre-wrap em .chat-bubble-body preserva quebras de
   linha digitadas sem precisar de HTML na mensagem (seria risco de XSS —
   o texto é sempre inserido como texto puro, nunca como HTML). */
.chat-conversation-page{
  /* Empilha cabeçalho + conversa + caixa de escrever numa coluna que
     preenche a altura disponível — combinado com min-height:0 + flex:1 no
     .chat-thread abaixo, é isso que deixa a caixa de escrever SEMPRE
     ancorada embaixo (mesmo numa conversa nova, sem mensagem nenhuma, ver
     pedido do usuário "quando começa um chat a barra de digitar tem que
     ficar lá embaixo"), em vez de position:sticky sozinho — que só
     funciona quando existe uma coluna alta o bastante pra "sobrar" espaço
     pra rolar, o que não era o caso com poucas mensagens. */
  display:flex;flex-direction:column;min-height:calc(100vh - 230px);
}
.chat-thread{
  display:flex;flex-direction:column;gap:3px;min-height:160px;max-height:calc(100vh - 340px);
  flex:1 1 auto;overflow-y:auto;padding:4px 6px 10px;
  /* Fundo bem sutil (quase imperceptível) só pra tirar a sensação de "lista
     em branco" — pedido do usuário ("visual mais bonito e de app de
     mensagens"), sem exigir nenhuma imagem/asset externo. */
  background:
    radial-gradient(circle at 20% 15%, var(--chat-tint-1) 0%, transparent 45%),
    radial-gradient(circle at 85% 75%, var(--chat-tint-2) 0%, transparent 40%);
  border-radius:14px;
}
.chat-thread-empty{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  text-align:center;color:var(--grey-500);font-size:12.5px;padding:40px 10px;margin:auto;
}
.chat-thread-empty i{font-size:26px;opacity:.5;}
/* Bug relatado pelo usuário: mandou a primeira mensagem e "Nenhuma mensagem
   ainda..." continuou aparecendo em cima da conversa. Causa: o JS já fazia
   `empty.hidden = true` certinho, mas o atributo `hidden` do navegador só
   vale "display:none" quando NENHUMA outra regra do CSS define `display`
   pro mesmo elemento com a mesma especificidade — e a regra acima
   (`.chat-thread-empty{display:flex;...}`) é uma regra de autor, que vence
   o estilo nativo do atributo `hidden` mesmo com a mesma especificidade
   (0,0,1,0 nos dois casos), simplesmente por vir depois na folha de
   estilo. Por isso o balão de "vazio" nunca desaparecia de verdade, só
   ficava marcado como hidden sem efeito visual nenhum. Precisa de uma
   regra própria pro estado [hidden] pra realmente vencer o display:flex. */
.chat-thread-empty[hidden]{display:none;}

/* Separador de data ("Hoje" / "Ontem" / dd/mm/aaaa) — uma vez por dia na
   conversa, nunca em cada balão (ver thread_items em app.py). */
.chat-date-sep{display:flex;justify-content:center;margin:10px 0 4px;}
.chat-date-sep span{
  font-size:10.5px;font-weight:700;color:var(--grey-600);background:var(--grey-50);
  padding:4px 12px;border-radius:20px;
}

.chat-bubble-row{display:flex;margin-top:10px;}
.chat-bubble-row.grouped{margin-top:2px;}
.chat-bubble-row.mine{justify-content:flex-end;}
.chat-bubble-row.theirs{justify-content:flex-start;}
/* Coluna que empilha o balão + os "pills" de reação embaixo dele (ver
   .chat-bubble-reactions mais abaixo) — o max-width:75% que antes ficava
   direto em .chat-bubble mudou pra cá, pra balão e reações ficarem sempre
   do mesmo lado (mine à direita, theirs à esquerda) e com a mesma largura
   máxima. */
.chat-bubble-stack{display:flex;flex-direction:column;max-width:75%;}
.chat-bubble{
  padding:9px 13px;border-radius:16px;box-shadow:var(--shadow);
}
/* Balão "mine": já passou por três trocas de cor (ver comentário completo
   junto de --chat-mine-bg no :root, no topo do arquivo) — azul forte
   demais, depois amarelo clarinho, e de volta a um azul clarinho (mesmo
   tom de --primary-light), que é o que fica hoje: "combina com o chat"
   porque é o mesmo azul do fundo degradê do próprio chat (--chat-tint-1).
   Texto continua em --text (escuro no tema claro, claro no tema escuro,
   nunca branco fixo) — os dois tons são claros o bastante pra isso
   funcionar nos dois temas. */
.chat-bubble-row.mine .chat-bubble{background:var(--chat-mine-bg);color:var(--text);border-bottom-right-radius:4px;}
.chat-bubble-row.theirs .chat-bubble{background:var(--grey-50);color:var(--text);border-bottom-left-radius:4px;}
.chat-bubble-row.mine.grouped .chat-bubble{border-top-right-radius:4px;}
.chat-bubble-row.theirs.grouped .chat-bubble{border-top-left-radius:4px;}
.chat-bubble-body{display:block;font-size:13.5px;line-height:1.4;white-space:pre-wrap;word-break:break-word;}
.chat-bubble-time{display:block;font-size:9.5px;opacity:.72;margin-top:4px;text-align:right;}
/* Confirmação de leitura (✓✓) — pedido do usuário. Só aparece nos balões
   "mine" (ver can_delete/read em _message_to_dict, app.py): um "✓" simples
   e apagado enquanto a mensagem só foi ENVIADA, "✓✓" mais destacado quando
   já foi LIDA (direta: Message.read_at; grupo: só quando TODOS os outros
   membros já leram — ver _mensagem_lida_por_todos em app.py). Uma cor só
   (var(--primary)) já basta pros dois lados agora que o balão "mine"
   também tem fundo claro (ver acima) — antes precisava de uma variante
   clara (#BEEBFF) só pra aparecer sobre o azul forte de antes. */
.chat-read-tick{font-size:9px;margin-left:3px;}
.chat-read-tick-sent{opacity:.6;}
.chat-read-tick-read{opacity:1;color:var(--primary);}

/* Anexo de foto — miniatura clicável (abre o tamanho real numa aba nova),
   com a legenda (se houver) embaixo dentro do mesmo balão. */
.chat-bubble-img-link{display:block;margin:-9px -13px 6px;border-radius:16px 16px 4px 4px;overflow:hidden;}
.chat-bubble-row.theirs .chat-bubble-img-link{border-radius:16px 16px 4px 16px;}
.chat-bubble-img{display:block;width:100%;max-height:260px;object-fit:cover;}
/* Anexo de arquivo qualquer (não-imagem) — um "chip" de baixar, dentro do
   mesmo balão, acima do texto (se houver). Um fundo branco só basta pros
   dois lados agora que "mine" também tem fundo claro (antes era um branco
   translúcido, pensado pra flutuar sobre o azul forte de antes). */
.chat-bubble-file{
  display:flex;align-items:center;gap:8px;background:var(--white);border-radius:10px;
  padding:8px 10px;margin-bottom:6px;color:inherit;text-decoration:none;font-size:12.5px;font-weight:600;
}
.chat-bubble-file i{flex-shrink:0;}
.chat-bubble-file span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* Pré-visualização do arquivo escolhido antes de enviar */
.chat-attach-preview{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--primary-light);border-radius:10px;padding:8px 12px;margin:0 2px 6px;font-size:12px;
  color:var(--primary-dark);
}
/* Regra own-goal já documentada antes neste projeto (ver .app-nav-badge):
   uma regra de autor com `display` sempre vence a regra padrão do
   navegador `[hidden]{display:none}`, mesmo com o atributo `hidden`
   presente no HTML — sem isto, o painel aparecia sempre visível, mesmo
   vazio, antes de qualquer arquivo ser escolhido. */
.chat-attach-preview[hidden]{display:none;}
.chat-attach-preview-info{display:flex;align-items:center;gap:8px;overflow:hidden;}
.chat-attach-preview-info span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* Caixa de escrever — sticky no fim da tela, textarea de uma linha que
   cresce um pouco conforme o CSS abaixo, botão de anexo + botão circular
   de enviar. */
.chat-compose{
  display:flex;align-items:flex-end;gap:8px;position:sticky;bottom:0;background:var(--white);
  padding:10px 2px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--grey-100);
}
.chat-attach-btn{
  width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;font-size:16px;color:var(--grey-600);cursor:pointer;transition:background .15s ease,color .15s ease;
  /* O clipe é um <label> (sem estilo nativo de formulário); o de emoji é um
     <button> de verdade — sem resetar border/padding/background aqui, o
     navegador aplica o próprio "chrome" padrão de botão (borda + padding)
     por cima do círculo âmbar do emoji, fazendo ele parecer bem maior que
     o clipe mesmo os dois tendo exatamente os mesmos 42px (visto pelo
     usuário, "essa carinha ta muito grande, tira e deixa proporcional com
     o clipe"). */
  border:none;background:none;padding:0;font-family:inherit;
}
.chat-attach-btn:hover{background:var(--grey-100);color:var(--primary);}
/* Botão de emoji — passou por duas rodadas: primeiro ficava "apagado"
   (mesmo cinza claro do clipe, quase invisível), ganhou uma bolinha âmbar
   de fundo pra aparecer; depois o usuário pediu pra tirar essa bolinha
   ("não quero essa bola junto com o emoji, só o emoji, sem bola envolta")
   e reclamou que o ícone tava pequeno. Solução final: sem nenhum fundo/
   círculo (igual ao botão do clipe, só um ícone "flutuando"), mas com cor
   âmbar própria (em vez do cinza do clipe) e fonte maior, pra continuar
   fácil de notar como botão sem precisar de uma bola por trás. */
.chat-emoji-toggle-btn{background:none;color:#B9791F;font-size:23px;}
.chat-emoji-toggle-btn:hover{background:var(--grey-100);color:#8A5A10;}
.chat-emoji-toggle-btn.chat-emoji-toggle-open{background:var(--grey-100);color:#6b4308;}
/* Referência de posicionamento do painel de emoji (ver .chat-emoji-panel
   acima, position:absolute + bottom:100% relativo a este wrapper). */
.chat-compose-wrap{position:relative;}
.chat-compose-input{
  flex:1;resize:none;border:1px solid var(--grey-100);border-radius:18px;padding:10px 16px;
  font-family:inherit;font-size:13.5px;line-height:1.35;max-height:110px;background:var(--white);
  color:var(--text);
  /* "hidden" por padrão — o JS (ajustarAlturaDaCaixa) troca pra "auto" só
     quando o texto realmente passa do limite de 110px; ver comentário lá
     sobre por que copiar scrollHeight direto pra height deixava uma
     rolagem residual mesmo com uma linha só de texto. */
  overflow-y:hidden;
}
.chat-compose-input:focus{outline:none;border-color:var(--primary);}
.chat-send-btn{
  width:42px;height:42px;border-radius:50%;padding:0;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;font-size:15px;
}

/* ---------- Chat em grupo (várias pessoas da equipe) ---------- */
/* Avatar genérico (ícone, sem foto) pro grupo — tanto na lista de
   conversas quanto no cabeçalho da própria conversa (ver .team-avatar,
   reaproveitado como base). */
.chat-group-avatar{background:var(--grey-100);color:var(--grey-600);font-size:16px;}
/* Nome de quem mandou, mostrado só na primeira mensagem de uma sequência
   de "theirs" (nunca em mensagens "mine" nem nas agrupadas — ver
   thread_items em app.py) já que num grupo várias pessoas mandam mensagem
   na mesma conversa, diferente do chat 1-para-1. */
.chat-bubble-sender{
  display:block;font-size:10.5px;font-weight:800;color:var(--primary);margin-bottom:2px;
}
/* Mensagem mandada em Modo suporte (administrador da plataforma "vestindo"
   um usuário real da empresa) — pedido do usuário, depois de notar que a
   mensagem saía com o nome de quem foi vestido em vez do seu: "eu deveria
   entrar como meu nome mas quando entro aparece davi". Aparece SEMPRE
   (mesmo em conversa 1-para-1, que normalmente não mostra nome nenhum, e
   mesmo em mensagem "mine"/agrupada no grupo — ver os templates de chat).
   Redesenhado a partir de novo feedback: tinha um ícone genérico de escudo
   e saía do MESMO tamanho/peso do nome normal (só que amarelo), o que
   ficou "muito grande" / desproporcional perto do texto da mensagem.
   Agora: avatarzinho de verdade (foto de perfil de quem está por trás do
   teclado, configurada em Configurações > Perfil — nunca a logo da
   empresa nem um ícone genérico) + nome com destaque + um complemento
   MENOR e mais leve nomeando a pessoa e a plataforma (ver
   .chat-bubble-sender-support-tag), no mesmo verde suave da faixa de Modo
   Suporte (ver .support-mode-banner), não mais o amarelo de alerta. */
.chat-bubble-sender.support{color:#1F7A4D;display:flex;align-items:center;gap:4px;font-weight:700;}
.chat-bubble-sender-avatar{
  width:14px;height:14px;border-radius:50%;flex:0 0 auto;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:#E6F6EC;color:#1F7A4D;font-size:8px;font-weight:800;line-height:1;
}
.chat-bubble-sender-avatar img{width:100%;height:100%;object-fit:cover;display:block;}
/* O complemento "(suporte na EGI)" — de propósito mais fraco que o nome
   (peso normal, cinza, uma categoria de fonte menor) pra não competir com
   ele nem com o texto da mensagem; nomeia a pessoa (já no nome ao lado) e
   a plataforma explicitamente, pensando em quando houver mais de um
   atendente de suporte no futuro. */
.chat-bubble-sender-support-tag{font-weight:500;color:var(--grey-600);font-size:9.5px;}
.chat-grupo-membros-checklist{
  display:flex;flex-direction:column;gap:2px;max-height:220px;overflow-y:auto;
  border:1px solid var(--grey-100);border-radius:10px;padding:4px 10px;
}
/* Painel de participantes — escondido por padrão, abre ao clicar no ícone
   de grupo na topbar (ver chatGrupoMembrosBtn no JS de
   chat_grupo_conversation.html). */
.chat-grupo-membros-panel{
  background:var(--white);border:1px solid var(--grey-100);border-radius:14px;padding:14px;margin-bottom:14px;
}
.chat-grupo-membros-lista{display:flex;flex-direction:column;gap:8px;margin-bottom:10px;}
.chat-grupo-membro-item{
  display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12.5px;color:var(--text);
}
.chat-grupo-membro-item i{color:var(--grey-500);margin-right:4px;}
.chat-grupo-add-form{display:flex;gap:8px;align-items:center;margin-top:6px;}
.chat-grupo-add-form select{
  flex:1;border:1px solid var(--grey-100);border-radius:10px;padding:9px 10px;font-size:12.5px;
  background:var(--white);color:var(--text);
}

/* Item da lista de conversas atualmente aberto — só visível de verdade no
   computador (ver .chat-split abaixo), onde a lista e a conversa ficam
   lado a lado, então faz sentido destacar qual delas está aberta agora
   (pedido do usuário, "tipo Microsoft Teams"). */
.chat-inbox-item-active{background:var(--primary-light);}

/* ---------- Layout "tipo Teams" (lista + conversa lado a lado) ----------
   Combinado com o usuário: só no computador/tablet largo (>=900px, mesmo
   ponto de corte usado em todo o resto do site pra desktop) — no celular
   cada tela continua abrindo em cheio, como sempre foi (a lista OU a
   conversa, nunca as duas juntas, tela pequena não tem espaço). As TRÊS
   telas (chat_inbox, chat_conversation, chat_grupo_conversation) incluem o
   mesmo parcial (_chat_lista_conversas.html) dentro de `.chat-split-list`;
   a diferença entre elas é só qual das duas colunas aparece no celular —
   controlado pela classe modificadora `.chat-split-mode-detail` (a
   conversa é o conteúdo principal no celular) vs. sem modificador (a lista
   é o conteúdo principal, ver chat_inbox.html). */
.chat-split-list{display:block;}
.chat-split-detail{display:none;}
.chat-split-mode-detail .chat-split-list{display:none;}
.chat-split-mode-detail .chat-split-detail{display:block;}
@media (min-width:900px){
  .chat-split{
    display:grid;grid-template-columns:320px 1fr;align-items:stretch;
    /* 68px do .app-nav + os ~82px de padding vertical que .content ganha
       no computador (ver @media min-width:900px mais abaixo) — sobra um
       pouco de margem de segurança pra não cortar nada em telas baixas. */
    height:calc(100vh - 150px);min-height:420px;
  }
  .chat-split-list,.chat-split-mode-detail .chat-split-list{
    display:block;border-right:1px solid var(--grey-100);overflow-y:auto;padding:24px 20px;
  }
  .chat-split-detail,.chat-split-mode-detail .chat-split-detail{display:block;overflow-y:auto;padding:24px 32px;}
  /* Dentro do painel do computador o conteúdo já tem a largura da coluna —
     as mesmas classes .narrow (max-width:640px) ficariam apertadas sem
     necessidade dentro de uma coluna já estreita o bastante. */
  .chat-split-list .narrow,.chat-split-detail .narrow{max-width:none;margin:0;}
  /* No celular o "cabeçalho" de cada tela já mostra com quem é a conversa
     (topbar-title) — no computador, dentro da coluna da lista, isso seria
     redundante, então o card de "criar grupo" e a lista ficam soltos sem
     repetir título nenhum. */
  /* No computador a coluna (.chat-split-detail) já tem altura definida
     (ver .chat-split acima) — em vez de recalcular outro "100vh - Xpx" pro
     .chat-thread, a página de conversa preenche 100% dessa coluna e o
     próprio flex (ver .chat-conversation-page/.chat-thread na regra base)
     resolve sozinho, sem precisar de outro número mágico. */
  .chat-split-detail .chat-conversation-page{height:100%;min-height:0;}
  .chat-split-detail .chat-conversation-page .chat-thread{max-height:none;min-height:0;}
}
/* "Selecione uma conversa" — só existe (e só é visível) na tela /chat no
   computador; no celular a coluna de detalhe inteira já fica escondida
   pela regra .chat-split-detail{display:none} acima. */
.chat-split-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  height:100%;min-height:300px;text-align:center;color:var(--grey-500);gap:8px;
}
.chat-split-empty i{font-size:34px;opacity:.4;margin-bottom:6px;}
.chat-split-empty h3{margin:0;color:var(--grey-600);}

/* ---------- Apagar mensagem ---------- */
/* Ícone discreto que só aparece nos balões "mine" (a própria pessoa é
   sempre quem pode apagar a própria mensagem — ver can_delete no JSON de
   _message_to_dict em app.py). Fica dentro do próprio balão, no canto,
   sem ocupar espaço extra na tela. */
.chat-bubble{position:relative;}
/* Espaço reservado no canto superior direito pro único botãozinho de ação
   que sobra agora (ver comentário grande junto de .chat-bubble-more-btn,
   mais abaixo — responder/reagir/editar/encaminhar/fixar/apagar, que antes
   eram vários ícones soltos no balão, viraram itens de UM SÓ menu). */
.chat-bubble:has(.chat-bubble-more-btn){padding-right:30px;}
/* Aviso no lugar da mensagem apagada — nunca mostra o conteúdo original,
   só que "existiu algo ali" (mesmo estilo WhatsApp/Telegram), tanto pra
   quem apagou quanto pra quem recebeu (delete "pra todos", combinado com
   o usuário). */
.chat-bubble-deleted{
  display:flex;align-items:center;gap:6px;font-size:12.5px;font-style:italic;opacity:.7;
}

/* ---------- Responder citando uma mensagem ---------- */
/* Trechinho da mensagem citada, mostrado ACIMA do conteúdo do próprio
   balão (mesma ideia visual de WhatsApp/Telegram) — clicável, pra rolar
   até a mensagem original se ela ainda estiver carregada na tela (ver JS
   em chat_conversation.html/chat_grupo_conversation.html). Se a mensagem
   citada foi apagada depois, mostra "Mensagem apagada" no lugar (nunca
   escondida — ver _reply_to_info em app.py). */
/* Um estilo só basta pros dois lados agora que "mine" também tem fundo
   claro (ver .chat-bubble-row.mine .chat-bubble acima) — antes precisava
   de uma variante translúcida branca só pra aparecer sobre o azul forte
   de antes; era por isso que "mine"/"theirs" tinham regras diferentes. */
.chat-bubble-quote{
  display:block;border-left:3px solid var(--primary);padding:4px 8px;margin-bottom:6px;
  border-radius:6px;background:var(--white);font-size:11.5px;cursor:pointer;
}
.chat-bubble-quote-name{display:block;font-weight:800;font-size:10.5px;color:var(--primary);}
.chat-bubble-quote-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.85;}
.chat-bubble-quote-deleted{font-style:italic;opacity:.75;}
/* Destaque breve na mensagem original quando alguém clica numa citação pra
   ir até ela (ver JS) — só um "flash" temporário, removido via setTimeout. */
.chat-bubble-flash .chat-bubble{animation:chatBubbleFlash 1.1s ease;}
@keyframes chatBubbleFlash{
  0%{box-shadow:0 0 0 3px var(--primary-light);}
  100%{box-shadow:var(--shadow);}
}

/* ---------- Ações da mensagem (responder/reagir/editar/encaminhar/fixar/apagar) ---------- */
/* Pedido do usuário depois de ver a tela de verdade: "ficou muito
   informação na mensagem" — até aqui cada balão podia mostrar até QUATRO
   ícones soltos ao mesmo tempo (responder, reagir, "mais opções", apagar).
   Agora é só UM botão (⋮), sempre no canto superior direito do balão,
   "mine" ou "theirs" — clicar nele abre um menuzinho só com TODAS as
   ações, na ordem que mais se usa primeiro: Responder, Reagir, Editar (só
   a própria mensagem), Encaminhar, Fixar/Desafixar e, separada por uma
   linha, Apagar (só a própria, em vermelho — é destrutiva, fica por
   último de propósito). */
.chat-bubble-more-btn{
  position:absolute;top:4px;right:6px;width:20px;height:20px;border:none;border-radius:50%;
  background:rgba(0,0,0,.12);color:inherit;display:flex;align-items:center;justify-content:center;
  font-size:10px;cursor:pointer;opacity:.5;transition:opacity .15s ease,background .15s ease;
}
.chat-bubble-more-btn:hover,.chat-bubble-more-btn.chat-more-menu-open{opacity:1;background:rgba(0,0,0,.22);}
.chat-more-menu{
  position:absolute;top:26px;right:0;z-index:6;display:flex;flex-direction:column;min-width:170px;
  background:var(--white);border:1px solid var(--grey-100);border-radius:10px;padding:4px;
  box-shadow:0 8px 20px rgba(20,30,60,.18);
}
/* "theirs" fica do lado esquerdo da tela — abrir o menu pela direita
   arriscaria vazar pra fora da área de conversa em telas estreitas (mesma
   ideia já usada no picker de reação abaixo). */
.chat-bubble-row.theirs .chat-more-menu{right:auto;left:0;}
/* Mesma pegadinha do [hidden] já documentada antes neste projeto (ver
   .chat-attach-preview/.chat-emoji-panel) — sem esta regra o menu
   apareceria sempre aberto em toda mensagem. */
.chat-more-menu[hidden]{display:none;}
.chat-more-menu-item{
  display:flex;align-items:center;gap:9px;border:none;background:transparent;text-align:left;
  font-family:inherit;font-size:13px;font-weight:600;color:var(--text);padding:9px 11px;
  border-radius:7px;cursor:pointer;white-space:nowrap;width:100%;
}
.chat-more-menu-item:hover{background:var(--grey-50);}
.chat-more-menu-item i{width:14px;text-align:center;color:var(--grey-500);flex-shrink:0;}
.chat-more-menu-divider{height:1px;background:var(--grey-100);margin:4px 6px;}
.chat-more-menu-item-danger{color:var(--danger);}
.chat-more-menu-item-danger i{color:var(--danger);}
.chat-more-menu-item-danger:hover{background:rgba(214,69,69,.08);}

/* ---------- Reagir com emoji na mensagem ---------- */
/* O picker de emoji (6 fixos, ver REACTION_EMOJIS em app.py) não é mais um
   botão próprio no balão — abre a partir do item "Reagir" dentro do mesmo
   menu (⋮) acima, ancorado no mesmo canto. */
.chat-reaction-picker{
  position:absolute;top:26px;right:0;z-index:6;display:flex;gap:2px;
  background:var(--white);border:1px solid var(--grey-100);border-radius:20px;
  padding:4px 6px;box-shadow:0 8px 20px rgba(20,30,60,.18);
}
.chat-bubble-row.theirs .chat-reaction-picker{right:auto;left:0;}
/* Mesma pegadinha do [hidden] já documentada antes neste projeto (ver
   .chat-attach-preview/.chat-emoji-panel) — sem esta regra o picker
   apareceria sempre aberto em toda mensagem. */
.chat-reaction-picker[hidden]{display:none;}
.chat-reaction-picker-item{border:none;background:transparent;font-size:17px;line-height:1;padding:3px;border-radius:8px;cursor:pointer;}
.chat-reaction-picker-item:hover{background:var(--grey-50);}
/* "Pills" com as reações já registradas na mensagem — ficam FORA do balão
   (não usam a cor de fundo dele), alinhados do mesmo lado que o balão
   (mine à direita, theirs à esquerda, ver .chat-bubble-stack acima).
   Clicar num pill é o mesmo que reagir com aquele emoji outra vez (reage/
   troca/remove — mesma regra de MessageReaction.__table_args__). */
.chat-bubble-reactions{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px;}
.chat-bubble-row.theirs .chat-bubble-reactions{justify-content:flex-start;}
.chat-bubble-row.mine .chat-bubble-reactions{justify-content:flex-end;}
.chat-bubble-reactions:empty{margin:0;}
.chat-reaction-pill{
  display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:700;
  background:var(--white);border:1px solid var(--grey-100);border-radius:20px;
  padding:2px 8px;cursor:pointer;color:var(--text);box-shadow:var(--shadow);
}
.chat-reaction-pill.mine{background:var(--primary-light);border-color:var(--primary);color:var(--primary-dark);}
.chat-reaction-pill:hover{background:var(--grey-50);}

/* ---------- Editar mensagem enviada ---------- */
/* "(editada)" discreto ao lado do horário — nunca mostra o que era antes,
   só avisa que mudou (mesmo espírito de WhatsApp/Telegram, sem histórico
   de versões — ver Message.edited_at em models.py). */
.chat-bubble-edited{font-size:9.5px;font-style:italic;opacity:.65;margin-left:2px;}

/* ---------- Encaminhar mensagem ---------- */
/* Tag pequena ACIMA do conteúdo do balão avisando que a mensagem foi
   encaminhada de outra conversa — nunca escondida, mesmo espírito de
   "Mensagem apagada"/"citação apagada" já usados neste chat: quem recebe
   sempre sabe a origem real do que está lendo. */
.chat-bubble-forwarded{
  display:flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;opacity:.68;
  font-style:italic;margin-bottom:4px;
}
/* O painel de escolher destino é um modal centralizado (pedido do
   usuário, "encaminhar mensagem") — precisa aparecer por cima de TUDO
   (inclusive da lista de conversas no computador), então usa
   position:fixed em vez de ancorado num balão específico como os outros
   painéis deste chat. */
.chat-forward-modal{
  position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
  background:rgba(15,20,32,.45);padding:20px;
}
.chat-forward-modal[hidden]{display:none;}
.chat-forward-modal-card{
  background:var(--white);border-radius:16px;max-width:360px;width:100%;max-height:70vh;
  display:flex;flex-direction:column;box-shadow:var(--shadow-lg);overflow:hidden;
}
.chat-forward-modal-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;
  border-bottom:1px solid var(--grey-100);font-size:14px;color:var(--text);
}
.chat-forward-modal-list{overflow-y:auto;padding:8px;}
.chat-forward-target{
  display:flex;align-items:center;gap:10px;width:100%;border:none;background:transparent;
  text-align:left;font-family:inherit;font-size:13px;font-weight:600;color:var(--text);
  padding:10px 12px;border-radius:10px;cursor:pointer;
}
.chat-forward-target:hover{background:var(--grey-50);}
.chat-forward-target i{color:var(--primary);width:16px;text-align:center;flex-shrink:0;}

/* ---------- Fixar mensagem importante ---------- */
/* Faixa no topo da conversa (abaixo do cabeçalho) com as mensagens
   fixadas — pedido do usuário. Permite mais de uma ao mesmo tempo
   (ver Message.pinned_at em models.py), por isso é uma lista pequena com
   rolagem própria, não só uma linha única. */
.chat-pinned-bar{
  display:flex;flex-direction:column;gap:2px;max-height:104px;overflow-y:auto;
  background:var(--grey-50);border-radius:10px;margin:0 2px 8px;padding:4px;
}
.chat-pinned-bar[hidden]{display:none;}
.chat-pinned-item{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;cursor:pointer;font-size:11.5px;}
.chat-pinned-item:hover{background:var(--grey-100);}
.chat-pinned-item i.fa-thumbtack{color:var(--primary);font-size:11px;flex-shrink:0;}
.chat-pinned-item-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);}
.chat-pinned-item-text b{font-weight:800;}
.chat-pinned-unpin-btn{border:none;background:transparent;color:var(--grey-500);cursor:pointer;padding:2px 4px;flex-shrink:0;}
.chat-pinned-unpin-btn:hover{color:var(--danger);}

/* ---------- Buscar dentro da conversa ---------- */
/* Tudo client-side: a conversa inteira já vem renderizada de uma vez (sem
   paginação, ver chat_conversation() em app.py), e cada balão já carrega
   seu próprio texto em data-snippet (usado também pra "responder citando"
   — ver JS) — então buscar é só filtrar o que já está na tela, sem
   precisar de mais uma rota no servidor. */
/* Agrupa os botões de ação do cabeçalho da conversa (som/buscar) — o
   agrupador leva a margem automática (empurra os dois pra direita juntos);
   sem isso, dar margin-left:auto em CADA botão faria o espaço sobrar
   também ENTRE eles (cada margem automática reparte o espaço livre por
   conta própria), afastando os ícones um do outro. */
.chat-thread-head-actions{margin-left:auto;display:flex;align-items:center;gap:2px;flex-shrink:0;}
.chat-thread-head-search-btn{
  width:34px;height:34px;border-radius:50%;border:none;background:none;
  color:var(--grey-600);display:flex;align-items:center;justify-content:center;font-size:15px;
  cursor:pointer;flex-shrink:0;
}
.chat-thread-head-search-btn:hover,.chat-thread-head-search-btn.chat-search-btn-open{background:var(--grey-100);color:var(--primary);}
.chat-search-bar{
  display:flex;align-items:center;gap:8px;background:var(--grey-50);border-radius:10px;
  margin:0 2px 8px;padding:8px 12px;font-size:12.5px;
}
.chat-search-bar[hidden]{display:none;}
.chat-search-bar input{flex:1;border:none;background:transparent;font-family:inherit;font-size:12.5px;color:var(--text);outline:none;min-width:0;}
.chat-search-count{color:var(--grey-500);font-size:11px;white-space:nowrap;}
.chat-search-bar .icon-btn{width:26px;height:26px;font-size:11px;}
/* Destaque nos balões que batem com a busca — outline em vez de mudar o
   fundo, pra não conflitar com a cor de fundo normal de "mine"/"theirs". */
.chat-search-match .chat-bubble{outline:2px solid var(--warning);outline-offset:1px;}

/* ---------- "Digitando..." (indicador de digitando) ---------- */
/* Substitui o texto normal de status (ver #chatStatusNormal no HTML)
   enquanto alguém do outro lado está escrevendo — pedido do usuário
   ("indicador de digitando"). Nunca some "de repente": ou o JS troca de
   volta ao ler que o aviso expirou (ver LIMIAR_DIGITANDO em app.py), ou a
   própria mensagem chega e substitui a necessidade do aviso. */
.chat-typing-indicator{color:var(--primary);font-weight:700;}

/* ---------- Responder — pré-visualização na caixa de escrever ---------- */
/* Mesmo estilo visual de .chat-attach-preview (barra acima da caixa de
   escrever), mostrando quem/o que está sendo respondido, com um X pra
   cancelar — pedido do usuário ("responder citando uma mensagem"). */
.chat-reply-preview{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--grey-50);border-left:3px solid var(--primary);border-radius:10px;
  padding:8px 12px;margin:0 2px 6px;font-size:12px;color:var(--text);
}
/* Mesma pegadinha do [hidden] já documentada antes neste projeto (ver
   .chat-attach-preview/.chat-emoji-panel/.chat-reaction-picker acima). */
.chat-reply-preview[hidden]{display:none;}
.chat-reply-preview-info{display:flex;align-items:flex-start;gap:8px;overflow:hidden;}
.chat-reply-preview-info>div{display:flex;flex-direction:column;overflow:hidden;min-width:0;}
.chat-reply-preview-name{font-weight:800;font-size:11px;color:var(--primary);}
.chat-reply-preview-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--grey-600);}

/* ---------- Emoji simples no chat ---------- */
/* Painel pequeno com um punhado de emojis comuns (pedido do usuário,
   "enviar algum emoji também, coisa simples") — só caracteres Unicode
   normais (o navegador já sabe desenhar), sem nenhuma biblioteca externa
   pra baixar/hospedar. Clicar insere na posição do cursor da caixa de
   escrever (ver JS em chat_conversation.html/chat_grupo_conversation.html). */
/* Flutua ANCORADO em cima da caixa de escrever (como um popover — mesma
   ideia do Slack/Teams/WhatsApp Web), em vez de empurrar a conversa pra
   cima como um bloco fixo na página — precisa de `.chat-compose-wrap`
   (position:relative) como referência, ver chat_conversation.html/
   chat_grupo_conversation.html. */
.chat-emoji-panel{
  position:absolute;bottom:calc(100% + 10px);left:0;z-index:5;
  display:grid;grid-template-columns:repeat(6,1fr);gap:2px;
  width:248px;max-width:calc(100vw - 40px);
  background:var(--white);border:1px solid var(--grey-100);border-radius:14px;
  padding:10px;box-shadow:0 12px 30px rgba(20,30,60,.18);
}
/* Regra own-goal já documentada antes neste projeto (ver .app-nav-badge /
   .chat-attach-preview acima): uma regra de autor com `display` sempre
   vence a regra padrão do navegador `[hidden]{display:none}` — sem isto,
   o painel de emoji aparecia sempre aberto, mesmo sem ninguém ter clicado
   no botão de carinha. */
.chat-emoji-panel[hidden]{display:none;}
.chat-emoji-item{
  border:none;background:transparent;font-size:21px;line-height:1;padding:7px 0;border-radius:9px;
  cursor:pointer;transition:background .15s ease;
}
.chat-emoji-item:hover{background:var(--grey-50);}

.report-actions-row{display:flex;justify-content:center;gap:18px;margin-top:20px;flex-wrap:wrap;}
.report-actions-row form{margin:0;}
.btn-text-action{
  background:none;border:none;color:var(--grey-600);font-size:12px;font-weight:700;
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;padding:8px 12px;border-radius:9px;
  transition:background .15s ease,color .15s ease;font-family:inherit;
}
.btn-text-action:hover{background:var(--grey-100);color:var(--text);}
.btn-text-action.danger:hover{background:#FCEAEA;color:var(--danger);}

.status-icon{font-size:44px;margin-bottom:6px;}
.status-icon.success{color:var(--success);}
.status-icon.danger{color:var(--danger);}

/* ---------- Auth (login / verify) ---------- */
.auth-wrap{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  /* Fundo trocado do degradê médio/escuro pro azul bem claro (--primary-light,
     #DCEAF7) — pedido do usuário pra fazer a logo se destacar mais em cima
     de um fundo claro, em vez de competir com um degradê forte. Os blobs
     decorativos abaixo continuam num azul mais saturado, só como um toque
     de profundidade por cima do claro. */
  background:var(--primary-light);
  padding:20px;position:relative;overflow:hidden;
}
.auth-blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.35;pointer-events:none;}
.blob-1{width:420px;height:420px;background:#5C8DF6;top:-140px;left:-120px;}
.blob-2{width:360px;height:360px;background:#2557B8;bottom:-140px;right:-100px;}
.auth-card{
  position:relative;background:#fff;border-radius:22px;padding:34px 28px;width:100%;max-width:400px;
  box-shadow:0 24px 60px rgba(0,0,0,.28);animation:fadeInUp .4s ease both;
}
.auth-card.wide{max-width:460px;}
.auth-logo{width:56px;height:56px;border-radius:14px;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:22px;margin:0 auto 14px;}
.auth-card h1{text-align:center;font-size:19px;margin:0 0 4px;}
.auth-card p.sub{text-align:center;color:var(--grey-600);font-size:12.5px;margin:0 0 22px;}
.auth-hint{background:var(--primary-light);color:var(--primary);border-radius:10px;padding:10px 12px;font-size:11.5px;margin-top:14px;display:flex;align-items:flex-start;gap:7px;}
.auth-hint i{margin-top:1px;}

/* ---------- Login: ícones dentro dos campos, mostrar/ocultar senha, "lembrar de mim" ---------- */
.auth-panel-stack{display:flex;flex-direction:column;align-items:center;width:100%;max-width:400px;}
.input-icon-wrap{position:relative;}
.input-icon-wrap input{padding-left:38px !important;}
.input-icon-wrap input[type=password]{padding-right:40px !important;}
.input-icon{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--grey-400);font-size:13px;pointer-events:none;}
.password-toggle{
  position:absolute;right:4px;top:50%;transform:translateY(-50%);background:none;border:none;
  color:var(--grey-400);cursor:pointer;padding:8px 9px;font-size:13px;border-radius:8px;
  transition:color .15s ease,background .15s ease;
}
.password-toggle:hover{color:var(--primary);background:var(--grey-50);}
.auth-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:-4px 0 18px;}
.auth-remember{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--grey-600);cursor:pointer;user-select:none;}
.auth-remember input{width:15px;height:15px;accent-color:var(--primary);cursor:pointer;}
.auth-forgot-link{font-size:12.5px;font-weight:700;color:var(--primary);text-decoration:none;}
.auth-forgot-link:hover{text-decoration:underline;}
.auth-footer{
  position:relative;text-align:center;margin-top:22px;font-size:11px;color:rgba(255,255,255,.85);
  display:flex;align-items:center;justify-content:center;gap:6px;max-width:400px;
}
.verify-wrap .auth-card{text-align:left;}
/* ---------- Recuperação de senha: links simples de navegação no auth-card ---------- */
.auth-links{text-align:center;margin-top:16px;font-size:12.5px;}
.auth-links a{color:var(--primary);font-weight:700;text-decoration:none;}
.auth-links a:hover{text-decoration:underline;}
.auth-links a i{margin-right:4px;}

/* ---------- Login: painel dividido (impacto no desktop) ---------- */
.split-auth{min-height:100vh;display:flex;flex-direction:column;}
.split-panel{flex:1;display:flex;align-items:center;justify-content:center;padding:32px 20px;position:relative;overflow:hidden;}
/* Fundo bem claro (--primary-light, #DCEAF7) no lugar do degradê médio/
   escuro — mesmo pedido do .auth-wrap acima: "acho que voce esta gerando o
   azul errado... o que sugeri foi esse que o logo se destaca mais". Como o
   painel deixou de ser escuro, os textos/ícones dentro dele (mais abaixo)
   também passaram de branco pra escuro. */
.marketing-panel{
  display:none;
  background:var(--primary-light);
}
.form-panel{
  background:var(--primary-light);
}
.auth-logo.light{background:rgba(11,61,145,.08);color:var(--primary-dark);margin:0;}
.split-brand{display:flex;align-items:center;gap:12px;margin-bottom:34px;color:var(--text);}
.split-brand-name{font-weight:800;font-size:15px;}
.split-brand-slogan{font-size:11.5px;opacity:.7;}
/* Logo cheia (ícone + "EGI" + slogan já desenhados na imagem, versão simples
   sem brilho/neon) — só usada aqui, no painel do login, pedido do usuário
   pra "ficar impactante" em vez do ícone pequeno + texto ao lado. */
.split-brand-full{margin-bottom:30px;}
.split-brand-full-logo{display:block;width:78%;max-width:340px;height:auto;}
.split-headline{color:var(--primary-dark);font-size:27px;font-weight:800;line-height:1.28;margin:0 0 12px;max-width:420px;letter-spacing:-.01em;}
.split-sub{color:var(--grey-600);font-size:13.5px;line-height:1.6;max-width:400px;margin:0 0 30px;}
.split-features{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px;max-width:400px;}
.split-features li{display:flex;align-items:flex-start;gap:12px;color:var(--text);font-size:13px;line-height:1.5;}
.split-feature-icon{
  width:32px;height:32px;border-radius:10px;background:rgba(37,87,184,.12);color:var(--primary);
  display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;
}
.split-panel-inner{position:relative;max-width:440px;animation:fadeInUp .5s ease both;}

@media (min-width:900px){
  .split-auth{flex-direction:row;}
  .marketing-panel{display:flex;}
  .form-panel{background:var(--grey-50);}
  .form-panel .auth-footer{color:var(--grey-400);}
  .auth-logo.mobile-only{display:none;}
}

/* ---------- Profile ---------- */
.profile-photo-wrap{display:flex;flex-direction:column;align-items:center;margin-bottom:22px;}
.profile-photo{
  width:96px;height:96px;border-radius:50%;background:var(--grey-100);object-fit:cover;
  border:3px solid var(--primary-light);
}
.profile-photo-edit{margin-top:-22px;background:var(--primary);color:#fff;border:3px solid #fff;
  width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;cursor:pointer;}

/* ---------- Itens de inspeção (checklist por sistema) ---------- */
.item-card{
  border:1px solid var(--grey-100);border-radius:16px;background:var(--white);
  box-shadow:var(--shadow);margin-bottom:14px;overflow:hidden;animation:fadeInUp .3s ease both;
}
.item-card-head{
  display:flex;align-items:center;gap:8px;padding:12px 12px 12px 16px;
  background:var(--grey-50);border-bottom:1px solid var(--grey-100);
}
.item-name-input{
  flex:1;border:none;background:transparent;font-weight:800;font-size:14.5px;color:var(--text);
  padding:4px 2px;outline:none;font-family:inherit;
}
.item-name-input:focus{background:var(--white);border-radius:8px;}
.item-delete-btn{
  width:32px;height:32px;border-radius:9px;border:none;background:#FCEAEA;color:var(--danger);
  display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:transform .12s ease;
}
.item-delete-btn:hover{transform:scale(1.06);}
.item-move-col{display:flex;flex-direction:column;gap:2px;flex-shrink:0;}
.item-move-btn{
  width:22px;height:17px;border-radius:5px;border:none;background:var(--white);color:var(--grey-600);
  display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:9px;
  border:1px solid var(--grey-100);transition:all .12s ease;
}
.item-move-btn:hover{background:var(--primary-light);color:var(--primary);border-color:var(--primary);}
.item-card-body{padding:14px 16px 16px;}
.item-photo-grid{grid-template-columns:repeat(3,1fr);margin-bottom:10px;}
.item-photo-grid:empty{display:none;}
.item-photo-add{
  display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:10px;
  border:1.5px dashed var(--grey-200);color:var(--primary);font-weight:700;font-size:12.5px;
  cursor:pointer;background:var(--primary-light);transition:transform .12s ease;
}
.item-photo-add:hover{transform:translateY(-1px);}
.item-photo-add input{display:none;}

.item-suggest-box{
  border:1px dashed var(--grey-200);border-radius:14px;padding:14px 16px;margin-bottom:16px;
  background:var(--grey-50);
}
.item-suggest-title{font-size:12.5px;font-weight:800;color:var(--grey-600);margin-bottom:10px;}
.item-suggest-title i{color:var(--warning);margin-right:4px;}
.chip.suggest-chip{
  flex:0 0 auto;padding:9px 14px;background:var(--white);border-color:var(--grey-100);
  display:flex;align-items:center;gap:6px;font-size:12.5px;
}
.chip.suggest-chip i{color:var(--primary);font-size:11px;}
.chip.suggest-chip:hover{border-color:var(--primary);color:var(--primary);}

.item-add-row{display:flex;gap:8px;margin-bottom:18px;}
.item-add-row input{
  flex:1;border:1.5px solid var(--grey-100);border-radius:10px;padding:11px 14px;
  font-size:13.5px;outline:none;font-family:inherit;
}
.item-add-row input:focus{border-color:var(--primary);}

/* Indicador de progresso do preenchimento dos itens (Passo 2) */
.items-progress-box{margin-bottom:16px;}
.items-progress-label{
  font-size:12.5px;font-weight:700;color:var(--grey-600);margin-bottom:6px;
  display:flex;justify-content:space-between;gap:8px;
}
.items-progress-label .items-progress-pct{color:var(--primary);}
.items-progress-track{height:8px;border-radius:999px;background:var(--grey-100);overflow:hidden;}
.items-progress-fill{
  height:100%;border-radius:999px;background:linear-gradient(90deg,var(--primary),var(--success));
  transition:width .3s ease;
}

/* Bolinha de status no cabeçalho do item: cinza = pendente, verde = completo
   (diagnóstico e grau de risco preenchidos) */
.item-status-dot{
  width:10px;height:10px;border-radius:50%;background:var(--grey-100);flex-shrink:0;
  transition:background .2s ease,box-shadow .2s ease;
}
.item-status-dot.complete{background:var(--success);box-shadow:0 0 0 3px #E6F6ED;}

/* Linha de botões "Sugestão de texto/recomendação: Crítico/Regular/Mínimo"
   — SEMPRE visíveis (não dependem de nenhum grau "selecionado" no item, que
   deixou de existir na tela — pedido do usuário: "tem que tirar esse grau
   de risco e deixar so no final do relatorio"). Clicar num deles abre o
   menu (.item-suggestion-menu, embaixo) com o texto sugerido daquele grau
   especificamente — nunca sobrescreve nada sozinho. */
.item-suggest-grade-row{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:8px;}
.item-suggest-grade-label{
  display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--grey-600);
}
.item-suggest-grade-label i{color:var(--primary);font-size:11px;}
.item-suggest-grade-btn{
  border:1px solid var(--grey-100);background:var(--grey-50);border-radius:8px;padding:6px 11px;
  font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;color:var(--grey-600);
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.item-suggest-grade-btn:hover{background:var(--grey-100);}
.item-suggest-grade-btn.alta:hover{background:#FCEAEA;border-color:var(--danger);color:var(--danger);}
.item-suggest-grade-btn.media:hover{background:#FBF2E1;border-color:var(--warning);color:#8a6413;}
.item-suggest-grade-btn.baixa:hover{background:#E6F6ED;border-color:var(--success);color:var(--success);}

/* Wrapper da linha de botões + menu de opções (mais de uma variação de
   texto por item/grau — o técnico escolhe qual aplicar). */
.item-suggestion-wrap{position:relative;}
.item-suggestion-menu{
  position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:5;
  background:var(--white);border:1px solid var(--grey-100);border-radius:10px;
  box-shadow:0 8px 24px rgba(20,30,60,.14);padding:6px;display:flex;flex-direction:column;gap:4px;
  max-height:260px;overflow-y:auto;
}
.item-suggestion-menu[hidden]{display:none;}
.item-suggestion-option{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;
  background:var(--grey-50);border:1px solid transparent;border-radius:8px;
  padding:8px 10px;cursor:pointer;font-family:inherit;width:100%;
}
.item-suggestion-option:hover{background:var(--primary-light);border-color:var(--primary);}
.item-suggestion-option-tag{font-size:11px;font-weight:800;color:var(--primary);text-transform:uppercase;letter-spacing:.02em;}
.item-suggestion-option-preview{font-size:12px;color:var(--grey-600);line-height:1.4;font-weight:400;}

/* ---------- Assistente de IA de redação (ver ai_assist.py) — barra de
   botões (Sugerir/Melhorar/Mais técnico/Resumir) sob um campo de texto do
   laudo, com um menu de opções por baixo — mesmo padrão visual da sugestão
   de texto-padrão acima (.item-suggestion-*), só que a lista vem de uma
   chamada ao assistente de IA em vez de um texto fixo da empresa. ---------- */
.ai-assist-row{position:relative;display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.ai-assist-btn{
  display:flex;align-items:center;gap:6px;background:var(--grey-50);color:var(--grey-600);
  border:1px solid var(--grey-100);border-radius:8px;padding:7px 10px;font-size:11.5px;font-weight:700;
  cursor:pointer;font-family:inherit;
}
.ai-assist-btn:hover{background:var(--primary-light);color:var(--primary);border-color:var(--primary);}
.ai-assist-btn:disabled{opacity:.6;cursor:default;}
.ai-assist-btn i{font-size:11px;}
.ai-assist-btn[data-action="sugerir"]{background:var(--primary-light);color:var(--primary);border-color:transparent;}
.ai-assist-menu{
  position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:6;
  background:var(--white);border:1px solid var(--grey-100);border-radius:10px;
  box-shadow:0 8px 24px rgba(20,30,60,.14);padding:8px;display:flex;flex-direction:column;gap:6px;
  max-height:280px;overflow-y:auto;
}
.ai-assist-menu[hidden]{display:none;}
.ai-assist-option{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;
  background:var(--grey-50);border:1px solid transparent;border-radius:8px;
  padding:8px 10px;cursor:pointer;font-family:inherit;width:100%;
}
.ai-assist-option:hover{background:var(--primary-light);border-color:var(--primary);}
.ai-assist-option-tag{font-size:11px;font-weight:800;color:var(--primary);text-transform:uppercase;letter-spacing:.02em;}
.ai-assist-option-preview{font-size:12px;color:var(--grey-600);line-height:1.4;font-weight:400;}
.ai-assist-msg{font-size:12px;color:var(--grey-600);padding:6px 4px;}
.ai-assist-msg.ai-assist-err{color:#b42318;}
.ai-assist-hint{font-size:11px;color:var(--grey-400);padding:2px 4px;}

/* ---------- Correção ortográfica (ver spellcheck.py) — SEM IA, um
   dicionário local só aponta palavra errada + sugestão de grafia. Um botão
   só (não quatro, como o assistente de IA acima, que está desligado das
   telas) e o menu lista cada palavra suspeita com chips de sugestão. ---------- */
.spell-check-row{position:relative;margin-top:8px;}
.spell-check-btn{
  display:flex;align-items:center;gap:6px;background:var(--grey-50);color:var(--grey-600);
  border:1px solid var(--grey-100);border-radius:8px;padding:7px 10px;font-size:11.5px;font-weight:700;
  cursor:pointer;font-family:inherit;
}
.spell-check-btn:hover{background:var(--primary-light);color:var(--primary);border-color:var(--primary);}
.spell-check-btn:disabled{opacity:.6;cursor:default;}
.spell-check-btn i{font-size:11px;}
.spell-check-menu{
  position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:6;
  background:var(--white);border:1px solid var(--grey-100);border-radius:10px;
  box-shadow:0 8px 24px rgba(20,30,60,.14);padding:8px;display:flex;flex-direction:column;gap:6px;
  max-height:280px;overflow-y:auto;
}
.spell-check-menu[hidden]{display:none;}
.spell-check-msg{font-size:12px;color:var(--grey-600);padding:6px 4px;}
.spell-check-msg.spell-check-err{color:#b42318;}
.spell-check-msg.spell-check-ok{color:#1a7f4e;}
.spell-check-error{
  display:flex;align-items:center;flex-wrap:wrap;gap:6px;background:var(--grey-50);
  border-radius:8px;padding:8px 10px;
}
.spell-check-word{font-size:12px;font-weight:700;color:#b42318;text-decoration:line-through wavy;}
.spell-check-suggestion{
  background:var(--primary-light);color:var(--primary);border:none;border-radius:6px;
  padding:4px 8px;font-size:11.5px;font-weight:700;cursor:pointer;font-family:inherit;
}
.spell-check-suggestion:hover{background:var(--primary);color:#fff;}
.spell-check-nosugg{font-size:11.5px;color:var(--grey-400);}

/* Calculadora rápida de insalubridade (item-calc-wrap, ver
   report_step_itens.html) — aparece só nos itens de agente de risco de um
   laudo de insalubridade/periculosidade, ajudando quem não decora as
   tabelas de limite de tolerância da NR-15/NR-16. */
.item-calc-box{
  background:var(--primary-light);border:1px solid var(--primary);border-radius:12px;
  padding:12px 14px;margin-bottom:10px;
}
.item-calc-title{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:800;color:var(--primary);margin-bottom:8px;}
.item-calc-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px;}
.item-calc-row > div{flex:1;min-width:140px;}
.item-calc-row label{display:block;font-size:11px;font-weight:700;color:var(--grey-600);margin-bottom:4px;text-transform:uppercase;letter-spacing:.02em;}
.item-calc-input{width:100%;padding:8px 10px;border-radius:8px;border:1px solid var(--grey-100);font-size:13px;font-family:inherit;background:var(--white);}
.item-calc-result{margin-top:8px;font-size:12.5px;line-height:1.5;}
.item-calc-ok{color:var(--text);}
.item-calc-warn{color:var(--danger,#c0392b);}

/* ---------- Assinatura pessoal (canvas + upload) ---------- */
.sig-pad-wrap{
  border:1.5px dashed var(--grey-200);border-radius:14px;background:var(--grey-50);
  padding:10px;margin-bottom:10px;
}
.sig-pad-canvas{
  width:100%;height:160px;background:var(--white);border-radius:10px;border:1px solid var(--grey-100);
  touch-action:none;cursor:crosshair;
}
.sig-pad-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;}
.sig-current{
  display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;
  background:var(--grey-50);border:1px solid var(--grey-100);margin-bottom:12px;
}
.sig-current img{max-height:52px;max-width:180px;object-fit:contain;background:#fff;border-radius:6px;}
.sig-current .txt{font-size:12px;color:var(--grey-600);flex:1;}
.sig-image{max-height:44px;max-width:170px;object-fit:contain;display:block;margin-bottom:4px;}

/* ---------- Itens vistoriados (tela do relatório) ---------- */
.item-view-block{
  border-left:3px solid var(--grey-100);padding:4px 0 14px 14px;margin-bottom:14px;
}
.item-view-head{display:flex;align-items:center;gap:10px;margin-bottom:6px;flex-wrap:wrap;}
.item-view-ref{
  width:24px;height:24px;border-radius:7px;background:var(--primary-light);color:var(--primary);
  font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.item-view-head b{font-size:13.5px;}

/* Comentário do revisor por item — caixa de entrada (lado do revisor,
   enquanto o laudo está aguardando_revisao) e balão de exibição/dispensa
   (lado do técnico, quando o laudo volta pra rascunho). Ver
   item_comentario_revisor em app.py. */
.item-review-comment-box{
  background:var(--grey-50);border:1.5px solid var(--grey-100);border-radius:10px;padding:10px 12px;margin:8px 0;
}
.item-review-comment-box label{
  display:block;font-size:10.5px;font-weight:700;color:var(--grey-600);text-transform:uppercase;
  letter-spacing:.02em;margin-bottom:6px;
}
.item-review-comment-input{
  width:100%;min-height:52px;resize:vertical;padding:8px 10px;border-radius:8px;border:1.5px solid var(--grey-100);
  background:var(--white);font-size:13px;color:var(--text);font-family:inherit;margin-bottom:8px;
}
.item-review-comment-saved{margin-left:8px;font-size:12px;color:#1c6b41;}
.item-review-comment-view{
  display:flex;align-items:flex-start;gap:8px;background:#FBF2E1;color:#8a6413;border-radius:10px;
  padding:9px 12px;margin:8px 0;font-size:13px;flex-wrap:wrap;
}
.item-review-comment-view i{margin-top:1px;}
.item-review-comment-dismiss{
  margin-left:auto;border:none;background:var(--white);color:#8a6413;border-radius:7px;padding:5px 10px;
  font-size:11.5px;font-weight:700;cursor:pointer;flex-shrink:0;
}
.item-review-comment-dismiss:hover{background:#f2e6c8;}
.item-summary-table{margin-top:6px;}
.item-summary-table tr:first-child td{font-size:10px;text-transform:uppercase;letter-spacing:.03em;color:var(--grey-600);font-weight:700;background:var(--grey-50);}

/* =========================================================
   DESKTOP (>= 900px): navegação no topo, header amplo, grids largos
   ========================================================= */
@media (min-width:900px){
  .app-nav{display:block;}
  .mobile-topbar{display:none;}
  .bottom-nav{display:none;}
  .desktop-header{display:flex;}
  /* .desktop-header-hidden vem do base.html só nas telas de conversa
     (chat_conversation/chat_grupo_conversation) — ver comentário lá.
     Duas classes = specificity maior que a regra de cima, então esta
     vence mesmo aparecendo antes na cascata. */
  .desktop-header.desktop-header-hidden{display:none;}
  .mobile-only-title{display:none;}
  .mobile-only{display:none;}

  .content{padding:26px 40px 56px;max-width:1200px;margin:0 auto;}
  .desktop-header{max-width:1200px;margin:0 auto;width:100%;}
  .fixed-actions{padding:16px 40px;}
  .fixed-actions .narrow{max-width:640px;}
  .fixed-actions .narrow-wide{max-width:760px;}
  .item-photo-grid{grid-template-columns:repeat(5,1fr);}

  .filters{flex-wrap:wrap;overflow:visible;row-gap:8px;}

  .stats-grid{grid-template-columns:repeat(4,1fr);}

  .reports-grid{grid-template-columns:repeat(2,1fr);}
  .fab{display:none;}

  .type-grid{grid-template-columns:repeat(5,1fr);}
  .evi-actions{grid-template-columns:repeat(5,1fr);}
  .evi-actions-2{grid-template-columns:repeat(2,1fr);max-width:420px;}
  .evi-grid{grid-template-columns:repeat(5,1fr);}
  .photo-grid{grid-template-columns:repeat(4,1fr);}
}

@media (min-width:1200px){
  .reports-grid{grid-template-columns:repeat(3,1fr);}
}

@media (max-width:640px){
  .type-grid{grid-template-columns:repeat(3,1fr);}
  .kv-table td.k{width:44%;}
}

/* =========================================================
   CONFIGURAÇÕES DO RELATÓRIO — marca própria (logo/nome/slogan)
   usada na capa/cabeçalho dos laudos de um técnico/empresa,
   independente da marca do site (CompanySettings/"DSM"). Ver
   report_branding.html e _report_brand() em app.py.
   ========================================================= */
.rb-intro{
  display:flex;gap:14px;align-items:flex-start;background:var(--primary-light);
  border:1px solid #d6e2f8;border-radius:var(--radius);padding:16px 18px;margin-bottom:20px;
}
.rb-intro i{color:var(--primary);font-size:20px;margin-top:2px;}
.rb-intro p{margin:0;font-size:13px;color:var(--grey-600);line-height:1.55;}
.rb-intro b{color:var(--text);}

/* ---------- Controle de Documentos no celular ----------
   No celular a ideia é o app ficar portátil (fazer/consultar laudos) —
   Controle de Documentos é uma tela de apoio, então no celular ela troca a
   tabela larga (8 colunas, obrigava rolar pros lados) por uma lista de
   cartões, um documento por vez, sem rolagem horizontal nenhuma. Mesmo
   ponto de corte (899px) usado no resto do app para "celular vs. PC". */
.docs-mobile-list{display:none;}
@media (max-width:899px){
  .docs-table-wrap{display:none;}
  .docs-mobile-list{display:flex;flex-direction:column;gap:10px;}
  .docs-filter-row{flex-wrap:wrap;}
  .docs-filter-row .field{flex:1 1 100%;}
  .docs-filter-btn{flex:1 1 100% !important;}
  .docs-filter-btn .btn{width:100%;}
}
.doc-card{
  background:var(--white);border:1px solid var(--grey-100);border-radius:14px;padding:12px 14px;
}
.doc-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px;}
.doc-card-codigo{font-weight:800;font-size:12.5px;color:var(--text);}
.doc-card-assunto{font-size:13.5px;color:var(--text);}
.doc-card-meta{
  display:flex;flex-wrap:wrap;gap:6px 10px;font-size:11.5px;color:var(--grey-600);margin-top:6px;
}
.doc-card-actions{display:flex;gap:6px;margin-top:10px;padding-top:10px;border-top:1px solid var(--grey-100);}

/* ---------- "Começar em branco" — toggle visível no Passo 1 de Novo
   Relatório, pra dar liberdade de montar o relatório do zero sem
   precisar achar um botão escondido antes (ver report_step1_dados.html) --- */
.blank-start-card{
  display:flex;align-items:center;gap:12px;cursor:pointer;
  border:1.5px solid var(--grey-100);border-radius:var(--radius);
  padding:14px 16px;margin-bottom:14px;background:var(--grey-50);
  transition:border-color .15s,background .15s;
}
.blank-start-card:hover{border-color:var(--grey-400);}
.blank-start-card input{display:none;}
.blank-start-card .bs-icon{
  width:36px;height:36px;border-radius:50%;flex:none;
  background:var(--grey-100);color:var(--grey-600);
  display:flex;align-items:center;justify-content:center;font-size:15px;
}
.blank-start-card .bs-text{flex:1;display:flex;flex-direction:column;gap:2px;}
.blank-start-card .bs-text b{font-size:13.5px;}
.blank-start-card .bs-text small{color:var(--grey-600);font-size:12px;line-height:1.4;}
.blank-start-card .bs-check{
  width:22px;height:22px;border-radius:50%;flex:none;border:1.5px solid var(--grey-200);
  display:flex;align-items:center;justify-content:center;color:transparent;font-size:11px;
}
.blank-start-card.selected{border-color:var(--primary);background:var(--primary-light);}
.blank-start-card.selected .bs-icon{background:var(--primary);color:#fff;}
.blank-start-card.selected .bs-check{background:var(--primary);border-color:var(--primary);color:#fff;}

/* align-items no valor padrão (stretch) de propósito: cada coluna do grid
   precisa ocupar a altura inteira da linha (mesmo que o conteúdo dela seja
   mais baixo) para a prévia grudenta (.rb-preview-sticky) ter espaço pra
   "andar" dentro da coluna direita conforme rola a página — com
   align-items:start a caixa da coluna encolhia pro tamanho do próprio
   conteúdo e o sticky não tinha pra onde ir. */
.rb-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:24px;}
@media (max-width:899px){.rb-grid{grid-template-columns:1fr;}}
/* Na tela cheia (PC — mesmo ponto de corte em que o app troca pra navegação
   de topo, ver "DESKTOP (>= 900px)" abaixo), a prévia acompanha a rolagem
   do formulário — assim o técnico/admin vê o resultado mudar sem perder o
   lugar em formulários longos. No celular (.rb-grid vira 1 coluna) isso é
   desligado: a prévia simplesmente aparece depois dos cards, na ordem
   natural da página. */
@media (min-width:900px){
  .rb-preview-sticky{position:sticky;top:20px;}
  /* Mesma ideia do .rb-preview-sticky acima, só que pra qualquer coluna
     lateral "resumo" que fica mais baixa que a coluna principal (ex.:
     Equipe — ver team.html) — nome genérico porque não é uma prévia. */
  .rb-sticky-col{position:sticky;top:20px;}
}

/* overflow:hidden foi removido daqui de propósito: cortava a bolha do
   tooltip (position:absolute, ver [data-tooltip]::after) dos swatches de
   cor mais próximos da borda do card, deixando o texto truncado/cortado ao
   passar o mouse. Nenhum elemento interno depende do clipping do card —
   cada um que precisa de cantos arredondados (.rb-logo-current .thumb,
   .rb-preview-cover etc.) já tem seu próprio overflow:hidden. */
.rb-card{background:var(--white);border:1px solid var(--grey-100);border-radius:var(--radius);box-shadow:var(--shadow);}
.rb-card-head{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--grey-100);}
.rb-card-head .ico{
  width:36px;height:36px;border-radius:10px;background:var(--primary-light);color:var(--primary);
  display:flex;align-items:center;justify-content:center;font-size:15px;flex:none;
}
.rb-card-head h4{margin:0;font-size:14.5px;}
.rb-card-head .sub{font-size:11.5px;color:var(--grey-600);margin-top:1px;}
.rb-card-body{padding:18px;}

/* Status (marca própria ativa / usando a padrão) */
.rb-status-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px;}
.rb-status-pill{
  display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;
  padding:5px 11px;border-radius:99px;letter-spacing:.01em;
}
.rb-status-pill.on{background:#E4F6EB;color:var(--success);}
.rb-status-pill.off{background:var(--grey-100);color:var(--grey-600);}
.rb-status-pill i{font-size:10px;}

/* Zona de upload com arrastar-e-soltar — display:block é essencial aqui: é
   um <label>, inline por padrão, e sem isso a borda tracejada só abraça o
   ícone (inline) e o texto (divs em bloco) vaza pra fora dela. */
.rb-drop{
  display:block;border:2px dashed var(--grey-100);border-radius:12px;padding:22px 16px;text-align:center;
  cursor:pointer;transition:border-color .15s,background .15s;background:var(--grey-50);
}
.rb-drop:hover,.rb-drop.dragover{border-color:var(--primary);background:var(--primary-light);}
.rb-drop i{font-size:22px;color:var(--primary);margin-bottom:8px;display:block;}
.rb-drop .t1{font-size:13px;font-weight:700;color:var(--text);}
.rb-drop .t2{font-size:11.5px;color:var(--grey-600);margin-top:2px;}
.rb-drop input[type=file]{display:none;}

.rb-logo-current{
  display:flex;align-items:center;gap:12px;background:var(--grey-50);border:1px solid var(--grey-100);
  border-radius:12px;padding:10px 12px;margin-bottom:12px;
}
.rb-logo-current .thumb{
  width:44px;height:44px;border-radius:9px;background:var(--white);border:1px solid var(--grey-100);
  display:flex;align-items:center;justify-content:center;overflow:hidden;flex:none;
}
.rb-logo-current .thumb img{max-width:100%;max-height:100%;object-fit:contain;}
.rb-logo-current .txt{font-size:12px;color:var(--grey-600);flex:1;}
.rb-logo-current .txt b{display:block;font-size:12.5px;color:var(--text);}

/* Mockup ao vivo da capa do laudo */
.rb-preview-cover{
  border-radius:12px;overflow:hidden;border:1px solid var(--grey-100);box-shadow:var(--shadow);
}
.rb-preview-band{
  background:var(--primary);
  padding:26px 18px 20px;text-align:center;position:relative;
}
/* Caixa branca opaca — igual à caixa da logo real (PDF e tela do laudo,
   ver .rti-header .brand .box / _draw_logo_box), não um círculo translúcido:
   um círculo semitransparente branco fica invisível quando a cor do laudo
   também é branca/clara, e a pré-visualização precisa continuar fiel à cor
   escolhida nesse caso. A cor do ícone (JS, ver onColor/headingColor) segue
   o mesmo critério de contraste do PDF. */
.rb-preview-logo{
  width:56px;height:56px;border-radius:14px;background:#fff;
  display:flex;align-items:center;justify-content:center;margin:0 auto 10px;overflow:hidden;
  border:1px solid rgba(0,0,0,.06);
}
.rb-preview-logo img{max-width:100%;max-height:100%;object-fit:contain;}
.rb-preview-logo i{color:var(--primary);font-size:24px;}
.rb-preview-name{color:#fff;font-family:var(--font-heading);font-weight:800;font-size:14.5px;line-height:1.25;}
.rb-preview-slogan{color:#D7E2F7;font-size:10.5px;margin-top:3px;}
.rb-preview-footer{color:#D7E2F7;font-size:9px;margin-top:6px;opacity:.85;}
.rb-preview-body{padding:14px 16px;background:var(--white);}
.rb-preview-body .line{height:7px;border-radius:4px;background:var(--grey-100);margin-bottom:7px;}
.rb-preview-body .line.w60{width:60%;}
.rb-preview-body .line.w80{width:80%;}
.rb-preview-label{
  display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--grey-600);
  text-transform:uppercase;letter-spacing:.03em;margin-bottom:10px;
}

/* Mini pré-visualização do CABEÇALHO da tela do laudo (.rti-header) — deixa
   explícito, ao lado da capa, que a mesma cor escolhida também governa o
   cabeçalho, não só a capa do PDF. */
.rb-preview-header-label{
  display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--grey-600);
  text-transform:uppercase;letter-spacing:.03em;margin:16px 0 8px;
}
.rb-preview-header{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  border-radius:10px;padding:12px 14px;overflow:hidden;
}
.rb-preview-header-brand{display:flex;align-items:center;gap:9px;min-width:0;}
.rb-preview-header-box{
  width:26px;height:26px;border-radius:7px;background:#fff;flex:none;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.rb-preview-header-box img{max-width:75%;max-height:75%;object-fit:contain;}
.rb-preview-header-box i{color:var(--primary);font-size:12px;}
.rb-preview-header-brand span{
  color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.02em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}
.rb-preview-header-badge{
  background:rgba(255,255,255,.92);color:var(--grey-600);font-size:9.5px;font-weight:800;
  padding:3px 9px;border-radius:20px;letter-spacing:.03em;flex:none;
}

.rb-link-card{
  display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:12px;
  background:var(--grey-50);border:1px solid var(--grey-100);text-decoration:none;
  transition:border-color .15s,background .15s;
}
.rb-link-card:hover{border-color:var(--primary);background:var(--primary-light);}
.rb-link-card .ico{
  width:38px;height:38px;border-radius:10px;background:var(--white);border:1px solid var(--grey-100);
  display:flex;align-items:center;justify-content:center;color:var(--primary);font-size:15px;flex:none;
}
.rb-link-card .txt b{display:block;font-size:13px;color:var(--text);}
.rb-link-card .txt span{font-size:11.5px;color:var(--grey-600);}
.rb-link-card .arrow{margin-left:auto;color:var(--grey-400);}

/* Variante "empilhada" — usada pelo card de Aparência (#themeCard), que
   tem um interruptor de 6 opções e não cabe mais numa fileira ao lado do
   texto (cabia com só claro/escuro). Ícone+texto ficam na fileira de cima,
   o interruptor vai por baixo ocupando a largura toda. */
.rb-link-card--stack{flex-wrap:wrap;row-gap:12px;}
.rb-link-card--stack .txt{flex:1 1 auto;}
.rb-link-card--stack .theme-switch{order:3;flex-basis:100%;}

/* Fileira de atalhos/preferências no topo de telas largas (Meu Perfil) —
   pedido do usuário: aproveitar melhor o espaço nas telas "apertadas",
   igual "Configurações do Relatório" já fazia. Reaproveita .rb-link-card
   pros itens (link OU, no caso de "Aparência", um <div> com o interruptor
   de tema embutido no lugar da setinha). */
.profile-shortcuts-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin-bottom:18px;
}
/* Aparência (#themeCard) tem 6 botões agora — precisa da largura toda da
   grade, não só de 1 coluna, senão o interruptor fica espremido. */
.profile-shortcuts-grid #themeCard{grid-column:1/-1;}

/* Cor principal do laudo — paleta de tons prontos + seletor personalizado */
.rb-color-section{margin-top:18px;padding-top:16px;border-top:1px solid var(--grey-100);}
.rb-color-label{
  display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--grey-600);
  text-transform:uppercase;letter-spacing:.03em;margin-bottom:6px;
}
.rb-color-label i{color:var(--primary);font-size:12px;}
.rb-swatch-row{display:flex;flex-wrap:wrap;gap:10px;}
.rb-swatch{
  width:34px;height:34px;border-radius:10px;border:2px solid transparent;cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);transition:transform .12s ease,border-color .12s ease;
  padding:0;position:relative;
}
.rb-swatch:hover{transform:scale(1.08);}
.rb-swatch.active{border-color:var(--text);}
.rb-swatch.active::after{
  content:"\f00c";font-family:"Font Awesome 6 Free";font-weight:900;color:#fff;font-size:11px;
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}
.rb-swatch-custom{
  background:conic-gradient(from 180deg,#D64545,#E0A426,#2E9E5B,#0E7C86,#2F6FED,#5B3A9E,#D64545);
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}
.rb-swatch-custom input[type=color]{
  position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:none;padding:0;
}

/* ---------- Contato/empresa, cor de destaque, estilo e perfis extras
   (Round B da "Marca do Relatório" — mais opções, mais didático) ---------- */
.rb-section-title{
  display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--grey-600);
  text-transform:uppercase;letter-spacing:.03em;margin:20px 0 12px;padding-top:18px;border-top:1px solid var(--grey-100);
}
.rb-section-title:first-child{margin-top:0;padding-top:0;border-top:none;}
.rb-section-title i{color:var(--primary);font-size:12px;}

/* Cor de destaque: opcional — por padrão o sistema deriva uma cor de apoio
   automaticamente a partir da cor principal (ver utils.derive_report_theme),
   então o controle começa "desligado" (auto) e só mostra o seletor de cor
   quando o usuário decide personalizar. */
.rb-accent-row{display:flex;align-items:center;gap:12px;margin-top:10px;}
.rb-accent-swatch{
  width:38px;height:38px;border-radius:10px;border:2px solid var(--grey-100);position:relative;flex-shrink:0;
  overflow:hidden;cursor:pointer;
}
.rb-accent-swatch input[type=color]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:none;padding:0;}
.rb-accent-auto-note{font-size:11.5px;color:var(--grey-400);}

/* Estilo do laudo (fonte): dois "chips" grandes, igual ao seletor de
   gravidade do Passo 4 — mas cada um mostra uma amostra da fonte real. */
.rb-font-row{display:flex;gap:10px;margin-top:10px;}
.chip.font-chip{flex:1;flex-direction:column;align-items:flex-start;gap:3px;padding:12px 14px;}
.chip.font-chip .fc-label{font-weight:800;font-size:12.5px;}
.chip.font-chip .fc-sample{font-size:16px;color:var(--grey-600);line-height:1.2;}
.chip.font-chip.font-classico .fc-sample{font-family:Georgia,'Times New Roman',serif;}
.chip.font-chip.selected{background:var(--primary-light);border-color:var(--primary);color:var(--primary);}
.chip.font-chip.selected .fc-sample{color:var(--primary);}

/* Perfis de marca nomeados (BrandProfile) — lista simples, mesmo espírito
   visual da lista de Equipe (.team-list/.team-card). */
.rb-profile-list{display:flex;flex-direction:column;gap:10px;margin-top:14px;}
.rb-profile-card{
  display:flex;align-items:center;gap:12px;background:var(--grey-50);border:1.5px solid var(--grey-100);
  border-radius:12px;padding:11px 13px;
}
.rb-profile-swatch{
  width:34px;height:34px;border-radius:9px;flex-shrink:0;border:1.5px solid rgba(0,0,0,.06);
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:13px;
}
.rb-profile-info{flex:1;min-width:0;}
.rb-profile-name{font-weight:800;font-size:13px;color:var(--text);}
.rb-profile-meta{font-size:11px;color:var(--grey-600);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rb-profile-actions{display:flex;gap:2px;flex-shrink:0;}

/* Linha extra na pré-visualização da capa (CNPJ/endereço) */
.rb-preview-cnpj{color:#D7E2F7;font-size:9px;margin-top:2px;opacity:.85;}
.rb-preview-cover.font-classico .rb-preview-name,
.rb-preview-cover.font-classico .rb-preview-slogan{font-family:Georgia,'Times New Roman',serif;}
.rb-preview-cover.font-classico .rb-preview-label{font-family:Georgia,'Times New Roman',serif;}

/* Abas de "Configurações do Relatório" (Identidade/Contato/Cores e estilo) —
   mesmo espírito visual do .seg usado nos filtros do painel, mas esticado
   pra ocupar a largura toda e com só uma seção visível por vez. Isso evita
   que a coluna do formulário fique muito mais alta que a da prévia ao lado
   no PC (sobrava um vão em branco enorme) e reduz a rolagem no celular. */
.rb-tabs{
  display:flex;background:var(--grey-100);border-radius:12px;padding:3px;gap:2px;margin-bottom:18px;
}
.rb-tab{
  flex:1;border:none;background:transparent;padding:10px 8px;border-radius:9px;
  font-size:12.5px;font-weight:700;color:var(--grey-600);cursor:pointer;font-family:inherit;
  text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:all .15s ease;
}
.rb-tab:hover{color:var(--text);}
.rb-tab.active{background:var(--white);color:var(--primary);box-shadow:0 1px 5px rgba(37,87,184,.16);}
@media (max-width:480px){.rb-tab{font-size:11px;padding:9px 4px;}}

/* ---------- Checklists (módulo independente — ver models.Checklist) ---------- */
.chk-list-grid{display:grid;grid-template-columns:1fr;gap:12px;}
@media (min-width:700px){.chk-list-grid{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1100px){.chk-list-grid{grid-template-columns:repeat(3,1fr);}}
.chk-card{
  background:var(--white);border:1px solid var(--grey-100);border-left:4px solid var(--primary);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;display:block;
  text-decoration:none;color:inherit;animation:fadeInUp .4s ease both;
}
.chk-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px);}
.chk-card.status-concluido{border-left-color:var(--success);}
.chk-card .chk-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;}
.chk-card .client{font-weight:800;font-size:14.5px;}
.chk-card .meta{font-size:12px;color:var(--grey-600);margin-top:3px;}
.chk-card .chk-card-progress{margin-top:12px;}

.chk-section-card{background:var(--white);border:1px solid var(--grey-100);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:14px;overflow:hidden;}
.chk-section-head{padding:12px 16px;background:var(--primary-light);color:var(--primary-dark);font-weight:800;font-size:13px;letter-spacing:.01em;}
.chk-item-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 16px;border-bottom:1px solid var(--grey-50);
}
.chk-item-row:last-child{border-bottom:none;}
.chk-item-label{font-size:13px;color:var(--text);flex:1;line-height:1.35;min-width:0;overflow-wrap:anywhere;}
.chk-item-code{color:var(--grey-400);font-weight:700;margin-right:4px;}
.chk-item-status{display:flex;gap:5px;flex:none;}
.chk-status-btn{
  width:38px;height:38px;border-radius:9px;border:1.5px solid var(--grey-100);background:var(--grey-50);
  display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--grey-400);
  cursor:pointer;transition:all .12s ease;flex:none;
}
.chk-status-btn:hover{transform:translateY(-1px);}
.chk-status-btn.regular.selected{background:#E6F6ED;border-color:var(--success);color:var(--success);}
.chk-status-btn.irregular.selected{background:#FCEAEA;border-color:var(--danger);color:var(--danger);}
.chk-status-btn.nao_aplicavel.selected{background:var(--grey-100);border-color:var(--grey-400);color:var(--grey-600);}
.chk-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--grey-600);margin-bottom:14px;}
.chk-legend span{display:inline-flex;align-items:center;gap:5px;}
.chk-legend .dot{width:9px;height:9px;border-radius:50%;display:inline-block;}
.chk-legend .dot.regular{background:var(--success);}
.chk-legend .dot.irregular{background:var(--danger);}
.chk-legend .dot.nao_aplicavel{background:var(--grey-400);}

/* ---------- Fase 5: prioridade/prazo e custo estimado por item ---------- */
.hint-inline{font-weight:400;color:var(--grey-400);font-size:11.5px;}
/* Selo "Gerado do laudo" no Controle de Documentos (ver documentos_list.html)
   — passou por duas versões antes desta: primeiro um texto cinza-clarinho
   discreto demais ("eu não entendi muito bem principalmente esse ícone de
   corrente"), depois um texto azul com ícone de link no meio do Assunto,
   que ficou parecendo um link clicável ("não gostei dessa parte Gerado do
   laudo, tinha que ter algum status igual no final"). Agora é um `.badge`
   igual aos de status (RASCUNHO/APROVADO etc.), empilhado junto com o
   badge de status na mesma coluna — mesma linguagem visual do resto da
   tela, sem ícone de link. Cinza neutro (não é bem um "status" de
   progresso, é a origem do documento) — `cursor:help` continua porque tem
   um `title` com a explicação completa por trás do texto. */
.badge-doc-auto{background:var(--grey-100);color:var(--grey-600);cursor:help;}
.item-prior-row .chip{flex:1 1 auto;font-size:12px;padding:9px 6px;}
.chip.prior-imediato.selected{background:#FCEAEA;border-color:#b91c1c;color:#b91c1c;}
.chip.prior-curto_prazo.selected{background:#FDEEE4;border-color:#c2410c;color:#c2410c;}
.chip.prior-medio_prazo.selected{background:#FBF2E1;border-color:#a16207;color:#a16207;}
.chip.prior-preventivo.selected{background:#E4F5F2;border-color:#0f766e;color:#0f766e;}
.item-cost-row{display:flex;gap:10px;}
.item-cost-row > div{flex:1;}
.item-cost-row label{display:block;font-size:11px;color:var(--grey-600);margin-bottom:4px;}
.item-cost-input{
  width:100%;border:1.5px solid var(--grey-100);border-radius:9px;padding:9px 10px;
  font-size:13px;font-family:inherit;color:var(--text);background:var(--grey-50);
}
.item-cost-input:focus{border-color:var(--primary);background:var(--white);outline:none;}

/* ---------- Fase 5: legendas rápidas e anotação de fotos ---------- */
.evi-caption-chips{display:flex;flex-wrap:wrap;gap:4px;padding:0 6px 6px;}
.evi-caption-chip{
  border:1px solid var(--grey-100);background:var(--grey-50);color:var(--grey-600);
  border-radius:7px;padding:3px 7px;font-size:10px;font-weight:600;cursor:pointer;
}
.evi-caption-chip:hover{border-color:var(--primary);color:var(--primary);}
.evi-annotate{
  position:absolute;bottom:5px;left:5px;width:22px;height:22px;border-radius:50%;
  background:#fff;color:var(--primary);border:none;display:flex;align-items:center;justify-content:center;
  font-size:11px;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.2);transition:transform .12s ease;
  z-index:2;
}
.evi-annotate:hover{transform:scale(1.1);}

/* ---------- Diálogo de confirmação próprio ---------- */
/* Substitui o confirm() nativo do navegador em toda ação destrutiva do
   sistema (pedido do usuário — ver comentário no markup, em base.html).
   z-index mais alto que o .annotate-modal logo abaixo (maior chance de
   precisar confirmar algo EM CIMA de outro modal já aberto, ex.: excluir
   uma foto de dentro do modal de anotação, do que o contrário). */
.confirm-modal{
  position:fixed;inset:0;background:rgba(15,20,32,.5);z-index:1100;
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.confirm-modal[hidden]{display:none;}
.confirm-modal-card{
  background:var(--white);border-radius:18px;max-width:360px;width:100%;
  box-shadow:var(--shadow-lg);padding:28px 24px 22px;text-align:center;
}
.confirm-modal-icon{
  width:52px;height:52px;border-radius:50%;margin:0 auto 16px;
  /* #FCEAEA é o mesmo "chip" rosa pastel usado nos badges de gravidade
     (.badge-alta, .chip.alta.selected...) — de propósito igual nos dois
     temas, mesmo padrão documentado em :root[data-theme="escuro"] acima. */
  background:#FCEAEA;color:var(--danger);
  display:flex;align-items:center;justify-content:center;font-size:21px;flex-shrink:0;
}
/* Variante usada para ações não-destrutivas (poucas — ex.: sobrescrever
   texto já digitado com sugestão da IA) — troca só a cor do ícone, pedida
   na hora pelo JS (ver window.confirmDialog em confirm-dialog.js). */
.confirm-modal-icon.confirm-modal-icon-info{background:var(--primary-light);color:var(--primary);}
.confirm-modal-title{font-family:var(--font-heading);font-weight:800;font-size:17px;color:var(--text);margin-bottom:8px;}
.confirm-modal-text{font-size:13.5px;color:var(--grey-600);line-height:1.5;margin-bottom:22px;}
.confirm-modal-actions{display:flex;gap:10px;}
.confirm-modal-actions .btn{flex:1;justify-content:center;}

.annotate-modal{
  position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:1000;
  display:flex;align-items:center;justify-content:center;padding:16px;
}
/* O atributo `hidden` empata em especificidade com `.annotate-modal{display:flex}`
   acima (0-1-0 nos dois) — sem esta regra, o navegador aplica a última do
   cascata (a nossa, que vem depois do estilo padrão do navegador) e o modal
   fica visível em TODA página autenticada assim que carrega, com o canvas em
   branco (nenhuma foto carregada ainda). Precisa vencer explicitamente. */
.annotate-modal[hidden]{display:none;}
.annotate-modal-box{
  background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow-lg);
  padding:16px;width:100%;max-width:560px;max-height:92vh;overflow:auto;
}
.annotate-modal-head{
  display:flex;justify-content:space-between;align-items:center;font-weight:800;
  font-size:15px;margin-bottom:12px;
}
.annotate-close{border:none;background:var(--grey-50);width:30px;height:30px;border-radius:50%;color:var(--grey-600);cursor:pointer;}
.annotate-toolbar{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap;}
.annotate-tool{flex:0 0 auto;padding:8px 12px;}
.annotate-tool.selected{background:var(--primary-light);border-color:var(--primary);color:var(--primary);}
.annotate-canvas-wrap{
  width:100%;background:var(--grey-100);border-radius:10px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
#annotateCanvas{width:100%;height:auto;display:block;cursor:crosshair;touch-action:none;}

/* ---------- Modal genérico de formulário ---------- */
/* Reaproveitado por "Adicionar técnico" e "Redefinir senha" em Equipe
   (pedido do usuário: a tela de Equipe tinha o formulário inteiro de
   cadastro sempre visível empilhado ACIMA da lista de técnicos, "parece que
   esta em tabela o visual"; "fazer o cadastro e embaixo ter os tecnicos...
   mostar a equipe e se for cadastar os tecnicos abre uma nova janelinha").
   Mesmo padrão visual do .confirm-modal/.annotate-modal (overlay + cartão
   central), só que mais largo e com o próprio conteúdo rolando (max-height),
   pra caber um formulário inteiro sem estourar a tela. */
.form-modal{
  position:fixed;inset:0;background:rgba(15,20,32,.5);z-index:1100;
  display:flex;align-items:center;justify-content:center;padding:16px;
}
.form-modal[hidden]{display:none;}
.form-modal-box{
  background:var(--white);border-radius:18px;box-shadow:var(--shadow-lg);
  width:100%;max-width:520px;max-height:92vh;overflow:auto;padding:22px 22px 18px;
}
.form-modal-head{
  display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:4px;
}
.form-modal-head h3{margin:0;}
.form-modal-close{
  border:none;background:var(--grey-50);color:var(--grey-600);width:30px;height:30px;
  border-radius:50%;flex-shrink:0;cursor:pointer;font-size:14px;
}
.form-modal-close:hover{background:var(--grey-100);color:var(--text);}

/* Botão "+ Adicionar técnico" que abre o modal — mesma altura/estilo dos
   demais .btn-primary, só que no cabeçalho da lista em vez de dentro de um
   card-form. */
.team-list-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:26px 0 4px;flex-wrap:wrap;
}
.team-list-head h3{margin:0;}

/* "Resumo da equipe" na coluna lateral da tela de Equipe (.rb-grid) —
   contagem por papel, um selo (reaproveita .team-admin/.team-engineer/
   .team-finance/.team-inactive já usados nos cards da lista) de um lado e
   o número do outro. */
.team-summary-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 0;border-bottom:1px solid var(--grey-100);
}
.team-summary-row:last-child{border-bottom:none;padding-bottom:0;}
.team-summary-row b{font-size:15px;color:var(--text);}

/* Campo "senha temporária" com botão de gerar/mostrar (Redefinir senha) —
   mesma ideia de "olhinho" de mostrar senha, só que junto de um botão que já
   preenche uma senha aleatória pronta pra copiar e repassar pro técnico. */
.password-gen-row{display:flex;gap:8px;}
.password-gen-row input{flex:1;}
.password-gen-btn{
  flex-shrink:0;white-space:nowrap;padding:0 14px;border-radius:10px;
  border:1px solid var(--border);background:var(--grey-50);color:var(--text);
  font-size:12.5px;font-weight:700;cursor:pointer;
}
.password-gen-btn:hover{background:var(--grey-100);}