/* Central de chamados — o que o style.css do portal não cobria.

   A base (tema, topo, cartões, formulários) vem de style.css; aqui ficam só as
   peças desta tela: login, lista de chamados, linha do tempo e o formulário de
   abertura. Mesma paleta, para o helpdesk não parecer outro produto. */

/* `hidden` precisa vencer o `display` das classes daqui.

   O atributo hidden equivale a `display: none`, mas qualquer regra de classe
   com display (e esta folha tem várias) tem especificidade maior e o anula em
   silêncio. Foi assim que o botão "Sair" apareceu na tela de login. */
[hidden] { display: none !important; }

/* O style.css do portal só estiliza text/search/url/email; sem isto o campo de
   senha do login (e a data do chamado novo) sai com a cara padrão do navegador,
   do lado de um campo de usuário estilizado. */
input[type="password"], input[type="number"], input[type="datetime-local"] {
  font: inherit;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 12px;
}

/* ------------------------------------------------------------------ topo */
.quem {
  font-size: 0.85rem;
  color: var(--muted);
  max-width: 28ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ------------------------------------------------------------- painel */
/* Os quatro números do topo, no espírito da central do GLPI: o estado da
   operação em uma olhada, antes de qualquer lista. */
.indicadores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 30px;
}
.indicador {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  /* é um <button> desde 18/08/2026 (leva à lista daquele status): sem estas
     quatro linhas o navegador o desenharia como botão de formulário, com a
     fonte dele e o texto centralizado */
  font: inherit;
  color: inherit;
  text-align: left;
  width: 100%;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.indicador:hover { background: var(--surface-2); border-color: var(--muted); }
.indicador:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.indicador .valor {
  font-size: 2.1rem;
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.indicador .rotulo {
  margin-top: 2px;
  font-size: 0.82rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.indicador .detalhe { margin-top: 6px; font-size: 0.78rem; color: var(--muted); }

.indicador.total        { border-left-color: var(--accent); }
.indicador.novo         { border-left-color: var(--info-ink); }
.indicador.novo .valor  { color: var(--info-ink); }
.indicador.atendimento  { border-left-color: var(--warning); }
.indicador.atendimento .valor { color: var(--warning); }
.indicador.solucionado  { border-left-color: var(--good); }
.indicador.solucionado .valor { color: var(--good-ink); }

/* grade de clientes: mesma linguagem dos cartões do portal, com a logo */
.grade-clientes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 16px;
}
.cartao-cliente {
  display: flex;
  flex-direction: column;
  /* explícito porque <button> vem do navegador com align-items: center: sem
     isto a placa da logo não estica e fica uma faixa branca no meio do cartão */
  align-items: stretch;
  font: inherit;
  color: inherit;
  text-align: left;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s, background 0.15s;
}
.cartao-cliente:hover, .cartao-cliente:focus-visible {
  border-color: var(--accent);
  background: var(--surface-2);
  transform: translateY(-2px);
}
.cartao-cliente .plate { height: 96px; }
.cartao-corpo {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
}
.cartao-nome { font-weight: 600; line-height: 1.25; }
.cartao-numeros { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.cartao-meta { font-size: 0.78rem; color: var(--muted); }
.cartao-acao { margin-top: auto; font-size: 0.8rem; color: var(--accent); }

/* o número que importa na varredura visual: quantos estão esperando */
.pill {
  font-size: 0.76rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.pill.ativo  { background: rgba(250, 178, 25, 0.16); color: var(--warning); }
.pill.zerado { background: var(--surface-2); color: var(--muted); }

/* o técnico vê a carteira toda, mas os clientes dele saltam à vista */
.cartao-cliente.meu { border-color: rgba(57, 135, 229, 0.55); }
.marca-meu {
  margin-left: 8px;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  border: 1px solid rgba(57, 135, 229, 0.45);
  border-radius: 999px;
  padding: 1px 7px;
  vertical-align: middle;
}

/* --------------------------------------------------------- documentação */
.abas-area { display: inline-flex; margin-bottom: 18px; }

.documentos { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.documento {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--line);
  border-radius: var(--radius);
  padding: 13px 16px;
}
/* sensível se distingue à distância: é o arquivo que pede cuidado ao abrir */
.documento.sensivel { border-left-color: var(--warning); }
.doc-info { flex: 1 1 320px; min-width: 0; }
.doc-nome { font-weight: 550; }
.marca-sensivel {
  margin-left: 8px;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--warning);
  border: 1px solid rgba(250, 178, 25, 0.45);
  border-radius: 999px;
  padding: 1px 7px;
  vertical-align: middle;
}
.doc-descricao { font-size: 0.85rem; color: var(--ink-2); margin-top: 3px; }
.doc-meta { font-size: 0.78rem; color: var(--muted); margin-top: 4px; }
.doc-acoes { display: flex; gap: 8px; margin-left: auto; }
.btn-secundario.perigoso:hover { border-color: var(--critical); color: var(--critical-ink); }

.caixa-inline { display: flex; align-items: flex-start; gap: 9px; font-size: 0.88rem; color: var(--ink-2); }
.caixa-inline input { margin-top: 3px; flex: none; }

/* ------------------------------------------------------- área técnica */
/* Na fila do técnico cabe uma coluna a mais — de qual cliente é o chamado —,
   que nas outras listas seria redundante. */
.chamado.com-cliente { grid-template-columns: 74px 1fr auto auto; }
.cliente-tag {
  font-size: 0.78rem;
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 11px;
  white-space: nowrap;
  max-width: 22ch;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chamado:disabled { cursor: default; opacity: 0.75; }
.chamado:disabled:hover { border-color: var(--border); background: var(--surface); }

@media (max-width: 720px) {
  .chamado.com-cliente { grid-template-columns: 1fr auto; }
  .chamado.com-cliente .cliente-tag { grid-row: 3; grid-column: 1; justify-self: start; }
}

.busca-cliente { width: 280px; max-width: 100%; margin-bottom: 18px; }

/* ----------------------------------------------------------------- botões */
.btn, .btn-secundario {
  font: inherit;
  font-weight: 550;
  border-radius: 10px;
  padding: 9px 16px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: filter 0.15s, border-color 0.15s, background 0.15s;
}
.btn {
  background: var(--accent);
  color: #fff;
}
.btn:hover:not(:disabled) { filter: brightness(1.1); }
.btn:disabled { opacity: 0.55; cursor: progress; }
.btn-secundario {
  background: transparent;
  color: var(--ink-2);
  border-color: var(--border);
}
.btn-secundario:hover { color: var(--ink); border-color: var(--accent); }

/* ------------------------------------------------------------------ login */
.login {
  max-width: 380px;
  margin: 8vh auto 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 26px 26px;
}
.login h2 { margin: 0 0 4px; font-size: 1.2rem; }
/* nome próprio: ".ajuda" já existe no style.css (modo apresentação) e é
   centralizada e meio transparente — herdar aquilo aqui ficava torto */
.login .login-ajuda { margin: 0 0 20px; color: var(--muted); font-size: 0.88rem; }
.login label {
  display: block;
  font-size: 0.82rem;
  color: var(--ink-2);
  margin: 0 0 6px;
}
.login input { width: 100%; margin-bottom: 14px; }
.login .btn { width: 100%; }

/* ------------------------------------------------------------- barra da lista */
.barra {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.barra .titulo-cliente {
  margin: 0;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
}
.barra .direita { margin-left: auto; display: flex; gap: 10px; align-items: center; }

.abas { display: flex; gap: 4px; background: var(--surface); border-radius: 10px; padding: 3px; }
.abas button {
  font: inherit;
  font-size: 0.86rem;
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
}
.abas button[aria-pressed="true"] { background: var(--surface-2); color: var(--ink); }

/* -------------------------------------------------------------- lista */
.chamados { display: flex; flex-direction: column; gap: 10px; }

.chamado {
  display: grid;
  grid-template-columns: 74px 1fr auto;
  gap: 14px;
  align-items: center;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 13px 16px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.chamado:hover { border-color: var(--accent); background: var(--surface-2); }
.chamado .numero {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  font-size: 0.9rem;
}
.chamado .assunto { min-width: 0; }
.chamado .assunto .t {
  font-weight: 550;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chamado .assunto .m { font-size: 0.8rem; color: var(--muted); margin-top: 2px; }

/* A cor diz o estado sem precisar ler: a mesma convenção das dashboards. */
.selo {
  font-size: 0.76rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
  border: 1px solid transparent;
}
.selo.novo         { background: rgba(57, 135, 229, 0.16); color: var(--info-ink); border-color: rgba(57,135,229,.35); }
.selo.atendimento  { background: rgba(250, 178, 25, 0.14); color: var(--warning); border-color: rgba(250,178,25,.35); }
.selo.pendente     { background: rgba(208, 59, 59, 0.14);  color: var(--critical-ink); border-color: rgba(208,59,59,.35); }
.selo.solucionado,
.selo.fechado      { background: rgba(12, 163, 12, 0.14);  color: var(--good-ink); border-color: rgba(12,163,12,.3); }

/* ------------------------------------------------------------ formulário */
.painel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px 24px;
  max-width: 760px;
}
.painel h2 { margin: 0 0 18px; font-size: 1.15rem; }
.campo { margin-bottom: 16px; }
.campo label {
  display: block;
  font-size: 0.82rem;
  color: var(--ink-2);
  margin-bottom: 6px;
}
.campo input[type="text"], .campo textarea, .campo select { width: 100%; }
.campo textarea { min-height: 150px; resize: vertical; line-height: 1.5; }
/* data não estica: o campo tem tamanho próprio e uma linha inteira de largura
   só faria o calendário ficar perdido no canto */
.campo input[type="datetime-local"] { max-width: 100%; }
.campo .dica { font-size: 0.78rem; color: var(--muted); margin-top: 5px; }
.dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.acoes { display: flex; gap: 10px; align-items: center; margin-top: 20px; }

input[type="file"] {
  font: inherit;
  font-size: 0.86rem;
  color: var(--ink-2);
  max-width: 100%;
}
input[type="file"]::file-selector-button {
  font: inherit;
  font-size: 0.84rem;
  margin-right: 10px;
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--ink-2);
  cursor: pointer;
}

/* ---------------------------------------------------------------- detalhe */
.detalhe-topo {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.detalhe-topo h2 {
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  flex: 1 1 300px;
  min-width: 0;
}
.detalhe-meta {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0 0 10px;
}

/* de quem é o chamado: linha própria, porque é o que se procura primeiro ao
   abrir um chamado que não é o seu */
.detalhe-tecnico {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.9rem;
  margin: 0 0 22px;
}
.detalhe-tecnico .r {
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.detalhe-tecnico strong { font-weight: 600; }
.detalhe-tecnico .sem-dono { color: var(--warning); font-weight: 500; }

.linha { display: flex; flex-direction: column; gap: 12px; margin-bottom: 26px; }
.evento {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--line);
  border-radius: 10px;
  padding: 13px 16px;
}
.evento.abertura { border-left-color: var(--accent); }
.evento.solucao  { border-left-color: var(--good); }
.evento .cabeca {
  display: flex;
  gap: 10px;
  align-items: baseline;
  flex-wrap: wrap;
  margin-bottom: 7px;
  font-size: 0.82rem;
  color: var(--muted);
}
.evento .cabeca strong { color: var(--ink-2); font-weight: 600; }
.evento .texto { white-space: pre-line; color: var(--ink-2); }

.anexos { display: flex; flex-wrap: wrap; gap: 8px; margin: -12px 0 24px; }
.anexos a {
  font-size: 0.82rem;
  color: var(--ink-2);
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 13px;
}
.anexos a:hover { border-color: var(--accent); color: var(--ink); }

/* ------------------------------------------------------------------ avisos */
.erro, .ok {
  padding: 11px 15px;
  border-radius: 10px;
  font-size: 0.88rem;
  margin: 0 0 16px;
  border: 1px solid;
}
.erro { background: rgba(208, 59, 59, 0.12); border-color: rgba(208,59,59,.4); color: var(--critical-ink); }
.ok   { background: rgba(12, 163, 12, 0.12); border-color: rgba(12,163,12,.4); color: var(--good-ink); }
.carregando { color: var(--muted); }

@media (max-width: 620px) {
  .chamado { grid-template-columns: 1fr auto; }
  .chamado .numero { grid-column: 1; font-size: 0.8rem; }
  .chamado .assunto { grid-column: 1 / -1; grid-row: 2; }
  .dupla { grid-template-columns: 1fr; }
  .barra .direita { margin-left: 0; width: 100%; }
}

/* ------------------------------------------------------------- projetos */
/* Quadro kanban da Área Técnica. As colunas vêm dos estados de projeto do
   GLPI (app/projetos.py), inclusive a cor do pontinho — por isso nada de cor
   de coluna fixa aqui. */

.area-quadro { margin-top: 6px; }

.kanban {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  /* o quadro rola sozinho na horizontal; a página nunca rola de lado */
  overflow-x: auto;
  padding-bottom: 10px;
}

.coluna-kanban {
  flex: 0 0 290px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
}
.coluna-kanban.alvo {
  border-color: var(--accent);
  background: var(--surface-2);
}

.coluna-topo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 0 2px;
}
.coluna-topo .ponto {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
}
.coluna-nome {
  font-weight: 600;
  font-size: 0.94rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.coluna-conta {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.8rem;
  background: var(--surface-2);
  border-radius: 20px;
  padding: 1px 9px;
}

.coluna-corpo { min-height: 90px; display: flex; flex-direction: column; gap: 10px; }
.coluna-vazia {
  margin: 0;
  padding: 18px 0;
  text-align: center;
  color: var(--muted);
  font-size: 0.82rem;
}

.cartao-projeto {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: 10px;
  padding: 11px 12px;
  cursor: grab;
}
.cartao-projeto:hover { border-color: var(--border); }
.cartao-projeto.arrastando { opacity: 0.4; cursor: grabbing; }
.cartao-projeto.atrasado { border-left-color: var(--critical); }

.cartao-nome { font-weight: 600; font-size: 0.9rem; line-height: 1.3; }
.cartao-cliente { color: var(--muted); font-size: 0.8rem; margin-top: 3px; }

.cartao-prazo {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
  font-size: 0.78rem;
  color: var(--ink-2);
}
.cartao-prazo .etiqueta {
  border-radius: 20px;
  padding: 1px 8px;
  font-size: 0.72rem;
}
.cartao-prazo .atraso { background: rgba(208, 59, 59, 0.18); color: var(--critical-ink); }
.cartao-prazo .perto  { background: rgba(250, 178, 25, 0.16); color: var(--warning-ink); }

.progresso {
  margin-top: 9px;
  height: 4px;
  border-radius: 4px;
  background: var(--line);
  overflow: hidden;
}
.progresso-feito { height: 100%; background: var(--accent); }

.aviso-quadro {
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  font-size: 0.86rem;
}
.aviso-quadro.ok   { border-color: var(--good); }
.aviso-quadro.ruim { border-color: var(--critical); }

/* -------------------------------------------------- formulário do projeto */

.painel-projeto { max-width: 620px; }
.form-projeto { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.campo-projeto { display: block; }
.campo-projeto > span {
  display: block;
  font-size: 0.82rem;
  color: var(--ink-2);
  margin-bottom: 6px;
}
.campo-projeto input,
.campo-projeto select,
.campo-projeto textarea { width: 100%; }
.campo-projeto .dica { display: block; margin-top: 5px; }

.acoes-projeto { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.acoes-projeto .perigo { margin-left: auto; color: var(--critical); }

/* ------------------------------------------------ tarefas (checklist) */

.tarefas-bloco {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.tarefas-titulo { margin: 0 0 12px; font-size: 1rem; }
.tarefas-lista { display: flex; flex-direction: column; gap: 2px; }

.tarefa {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 6px;
  border-radius: 8px;
}
.tarefa:hover { background: var(--surface-2); }
.tarefa input[type="checkbox"] { flex: none; margin: 0; }
.tarefa-nome { flex: 1; font-size: 0.9rem; min-width: 0; }
.tarefa.feita .tarefa-nome { color: var(--muted); text-decoration: line-through; }

.tarefa-prazo {
  flex: none;
  font-size: 0.78rem;
  color: var(--muted);
  background: var(--surface-2);
  border-radius: 20px;
  padding: 1px 9px;
}
.tarefa-prazo.vencida { background: rgba(208, 59, 59, 0.18); color: var(--critical-ink); }
.tarefa.feita .tarefa-prazo { opacity: 0.55; }

.tarefa-remover {
  flex: none;
  appearance: none;
  background: none;
  border: 0;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
  padding: 2px 6px;
  cursor: pointer;
  border-radius: 6px;
}
.tarefa-remover:hover { color: var(--critical); background: var(--surface); }

.tarefa-nova {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.tarefa-nova input[type="text"] { flex: 1; min-width: 180px; }

.chamado-numero {
  flex: none;
  font-size: 0.8rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------- "norte" do técnico */
/* Blocos abaixo da fila na área técnica: projetos em andamento e atalho para
   as dashboards dos clientes. Complemento — se falharem, a fila continua. */

.norte { margin-top: 30px; }

.bloco-norte {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.bloco-titulo { margin: 0 0 12px; font-size: 1rem; }

.norte-lista { display: flex; flex-direction: column; gap: 6px; }

.norte-item {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  text-decoration: none;
  color: inherit;
}
.norte-item:hover { border-color: var(--border); background: var(--surface-2); }
.norte-nome { font-weight: 600; font-size: 0.9rem; }
.norte-meta { color: var(--muted); font-size: 0.82rem; }
.norte-pct {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

.norte-link {
  display: inline-block;
  margin-top: 12px;
  font-size: 0.85rem;
  color: var(--accent);
  text-decoration: none;
}
.norte-link:hover { text-decoration: underline; }

.norte-botoes { display: flex; gap: 10px; flex-wrap: wrap; }
.norte-botoes .btn-secundario { text-decoration: none; }

/* ------------------------------------------------------- sala da equipe */
/* Mapa 2D com presença, chat e áudio por proximidade (ver sala.js). O
   desenho da planta está no JS; aqui é só o enquadramento. */

.sala-palco {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-top: 8px;
}

.sala-mapa {
  /* o canvas tem tamanho fixo em pixels; o CSS reduz em tela estreita e o
     clique converte a escala (ver desenharSala) */
  max-width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #151514;   /* o mapa da sala é desenhado para fundo escuro */
  cursor: pointer;
  outline: none;
}
.sala-mapa:focus { border-color: var(--accent); }

.sala-status {
  max-width: 220px;
  font-size: 0.85rem;
}

.sala-chat {
  flex: 1;
  min-width: 260px;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  /* acompanha a altura do mapa: 20 células de 28px mais a moldura */
  height: 566px;
}
.chat-lista {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-right: 4px;
}
.chat-linha { font-size: 0.86rem; line-height: 1.35; }
.chat-linha.sistema { color: var(--muted); font-style: italic; font-size: 0.8rem; }
.chat-quem { font-weight: 650; margin-right: 6px; }
.chat-hora { color: var(--muted); font-size: 0.72rem; margin-right: 6px; }
.chat-texto { color: var(--ink-2); }

.chat-form { display: flex; gap: 8px; margin-top: 10px; }
.chat-form input { flex: 1; }

/* Controle de áudio: entrar é uma decisão, o microfone é outra. Os dois
   botões de estado ficam juntos e só aparecem com o áudio ligado. */
.sala-audio { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sala-audio-controles { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.btn-audio {
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--ink-2);
  cursor: pointer;
  white-space: nowrap;
}
.btn-audio:hover { border-color: var(--accent); }
/* verde é "está passando som", vermelho é "está cortado" — a cor precisa ser
   lida de relance, no meio de uma conversa */
.btn-audio.ativo   { color: var(--good-ink); border-color: rgba(12,163,12,.4);  background: rgba(12,163,12,.10); }
.btn-audio.cortado { color: var(--critical-ink); border-color: rgba(208,59,59,.45); background: rgba(208,59,59,.12); }

.sala-microfone {
  font-size: 0.78rem;
  max-width: 190px;
  padding: 6px 8px;
}

/* selo de mensagem nova do chat, nos botões que levam à sala */
.selo-sala {
  display: inline-block;
  min-width: 17px;
  margin-left: 6px;
  padding: 1px 5px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

/* --------------------------------------------------- tela de monitoramento */
/* Um cartão por instância de Zabbix. A leitura é ao vivo e a coleta continua
   sendo de cada cliente (ver zabbix.panorama). */

.monitor-cartao { max-width: none; margin-bottom: 16px; }

.monitor-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.monitor-topo h2 { margin: 0 0 2px; }

.monitor-numeros { display: flex; gap: 18px; flex-wrap: wrap; }
.monitor-numero { text-align: center; min-width: 62px; }
.monitor-numero .v { font-size: 1.3rem; font-weight: 700; line-height: 1.1; }
.monitor-numero .r { font-size: 0.72rem; color: var(--muted); margin-top: 2px; }
.monitor-numero.bom .v { color: var(--good-ink); }
.monitor-numero.ruim .v { color: var(--critical-ink); }

.monitor-fora {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  font-size: 0.8rem;
}
.monitor-fora .r { color: var(--muted); }
.chip-fora {
  background: rgba(208, 59, 59, 0.14);
  border: 1px solid rgba(208, 59, 59, 0.35);
  color: var(--critical-ink);
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 0.76rem;
}

.problemas { display: flex; flex-direction: column; gap: 8px; }
.problema {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 12px;
}
.problema-texto { flex: 1; min-width: 0; }
.problema-texto .t {
  font-size: 0.86rem;
  /* nome de gatilho é comprido; uma linha por problema mantém a lista legível */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.problema-texto .m { font-size: 0.74rem; color: var(--muted); margin-top: 2px; }
.etiqueta-queda {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--critical-ink);
  white-space: nowrap;
}

/* --------------------------------------------------------------- Trello */
/* O quadro reusa .kanban/.coluna-kanban/.cartao-projeto da aba Projetos de
   propósito: são dois quadros no mesmo portal e pareceriam dois produtos se
   cada um tivesse a sua caixa. O que muda aqui é o que só o Trello tem —
   etiqueta colorida, responsável, selo de prazo e checklist no cartão. */

.seletor-quadro { max-width: 260px; }
/* o "Abrir no Trello" é um <a> com cara de botão: sem isto vem sublinhado */
a.btn-secundario { text-decoration: none; }

/* "Prazo cumprido" não pode herdar o .campo-projeto (display: block), senão a
   caixa de marcar sobe para cima do texto em vez de ficar ao lado */
.caixa-trello { margin: -4px 0 2px; }

.coluna-nova { background: none; border-style: dashed; }
.coluna-mais {
  appearance: none;
  width: 100%;
  margin-top: 8px;
  padding: 7px 8px;
  background: none;
  border: 0;
  border-radius: 8px;
  color: var(--muted);
  font: inherit;
  font-size: 0.82rem;
  text-align: left;
  cursor: pointer;
}
.coluna-mais:hover { background: var(--surface-2); color: var(--ink); }

.etiquetas-trello { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 7px; }
.marca-trello {
  /* com nome, a etiqueta mostra o nome: as da equipe dizem cliente e
     prioridade ("AGROBOMBAS", "Prioridade Alta"), e só a cor obrigaria a
     decorar a legenda. Sem nome — que no Trello é comum — vira o traço de
     cor de sempre (regra :empty abaixo) */
  max-width: 100%;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1.5;
  /* as cores de etiqueta do Trello são claras; texto escuro é o que lê nelas */
  color: #17202b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.marca-trello:empty { min-width: 34px; height: 8px; padding: 0; }

.cartao-rodape {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  font-size: 0.74rem;
  color: var(--muted);
}
.selo-prazo {
  background: var(--surface-2);
  border-radius: 20px;
  padding: 1px 8px;
  font-variant-numeric: tabular-nums;
}
.selo-prazo.vencido { background: rgba(208, 59, 59, 0.18); color: var(--critical-ink); }
.selo-prazo.perto   { background: rgba(250, 178, 25, 0.16); color: var(--warning-ink); }
.selo-prazo.feito   { background: rgba(60, 170, 110, 0.18); color: var(--good-ink); }
.selo-mudo { white-space: nowrap; }
.selo-mudo.completo { color: var(--good-ink); }

.membros-trello { display: flex; gap: 4px; margin-left: auto; }
.avatar-trello {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--ink-2);
}

/* editor do cartão */
.painel-cartao { max-width: 680px; }
.escolha-trello {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 6px;
}
.opcao-trello {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-size: 0.86rem;
  color: var(--ink-2);
}
.ponto-etiqueta {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex: none;
}
.checklist-nome {
  margin: 16px 0 6px;
  font-size: 0.88rem;
  color: var(--ink-2);
}
.tarefa-nova.comentar textarea { flex: 1; min-width: 200px; }
.comentario-trello {
  padding: 9px 0;
  border-top: 1px solid var(--line);
}
.comentario-quem { font-size: 0.76rem; color: var(--muted); }
.comentario-texto { font-size: 0.88rem; white-space: pre-wrap; margin-top: 3px; }

/* --------------------------------------------------------------- backups */
/* A tela reusa a linha do chamado (.chamado) porque é a mesma leitura: uma
   lista de coisas com estado, ordenada pelo que precisa de atenção. O que muda
   é o selo à esquerda e a fitinha das últimas execuções. */

.selo-backup {
  flex: none;
  min-width: 104px;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 3px 8px;
  border-radius: 20px;
  background: var(--surface-2);
  color: var(--muted);
}
.selo-backup.b-ok       { background: rgba(60, 170, 110, 0.18); color: var(--good-ink); }
.selo-backup.b-aviso    { background: rgba(250, 178, 25, 0.16); color: var(--warning-ink); }
.selo-backup.b-erro     { background: rgba(208, 59, 59, 0.18); color: var(--critical-ink); }
/* "sem notícias" não é neutro: servidor desligado não manda erro, só silencia,
   e essa é a falha mais fácil de não perceber. Por isso tem cor de alerta */
.selo-backup.b-atrasado { background: rgba(208, 59, 59, 0.14); color: var(--critical-ink); }

.backup-linha.b-erro     { border-left: 3px solid var(--critical); }
.backup-linha.b-atrasado { border-left: 3px solid var(--critical); }
.backup-linha.b-aviso    { border-left: 3px solid var(--warning); }
.backup-linha.b-ok       { border-left: 3px solid var(--good); }

.fita-backup { display: inline-flex; gap: 2px; flex: none; align-items: center; }
.fita-backup .tick {
  width: 6px;
  height: 16px;
  border-radius: 2px;
  background: var(--muted);
}
.fita-backup .tick.success { background: var(--good); }
.fita-backup .tick.warning { background: var(--warning); }
.fita-backup .tick.error,
.fita-backup .tick.fatal   { background: var(--critical); }

.indicador.backup-erro     { border-left-color: var(--critical); }
.indicador.backup-erro .valor { color: var(--critical-ink); }
.indicador.backup-atrasado { border-left-color: var(--critical); }
.indicador.backup-aviso    { border-left-color: var(--warning); }
.indicador.backup-ok       { border-left-color: var(--good); }

/* no detalhe os "números" são texto (data, duração): 2.1rem não cabe */
.indicador .valor-pequeno {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
}

.mensagem-backup {
  font-size: 0.84rem;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--surface-2);
  margin: 6px 0;
  word-break: break-word;
}
.mensagem-backup.b-erro  { border-left: 3px solid var(--critical); }
.mensagem-backup.b-aviso { border-left: 3px solid var(--warning); }

/* ------------------------------------------------------ diálogo do relatório

   `<dialog>` nativo: o navegador cuida de foco, Esc e da camada por cima de
   tudo — não há motivo para reimplementar isso. O ::backdrop precisa de cor
   explícita porque o padrão do Chrome é quase transparente em tema escuro, e
   o cartão sumiria dentro da página. */
.dialogo {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  padding: 0;
  width: min(400px, calc(100vw - 32px));
}
.dialogo::backdrop { background: rgba(0, 0, 0, 0.6); }

.dialogo-corpo { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.dialogo-corpo h3 { margin: 0; font-size: 1.05rem; }

.dialogo-campo { display: flex; flex-direction: column; gap: 5px; }
.dialogo-campo span { font-size: 0.8rem; color: var(--ink-2); }
.dialogo-campo select,
.dialogo-campo input {
  width: 100%;
  padding: 9px 10px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
}
/* o ícone do seletor de mês nasce preto sobre fundo escuro */
.dialogo-campo input[type="month"]::-webkit-calendar-picker-indicator {
  filter: invert(1) opacity(0.7);
}

.dialogo-acoes { display: flex; justify-content: flex-end; gap: 8px; margin-top: 2px; }

/* ------------------------------------- abrir chamado sem conta (/abrir-chamado) */
.publico-form { margin: 0 auto; }
.publico-ajuda { color: var(--muted); font-size: 0.9rem; margin: -6px 0 18px; }
.publico-form .publico-ajuda { margin: 12px 0 18px; }
.publico-empresa {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.publico-empresa .plate { width: 110px; height: 60px; flex: none; border-radius: 10px; padding: 6px 10px; border: 0; }
.publico-empresa .plate .iniciais { font-size: 1.2rem; }
.publico-empresa > div:nth-child(2) { flex: 1; min-width: 0; }
.publico-empresa .btn-secundario { flex: none; }
.campo input[type="email"] { width: 100%; }
/* isca de robô: fora da tela, não display:none (alguns robôs pulam o que está oculto) */
.isca { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 600px) {
  .publico-form .dupla { grid-template-columns: 1fr; gap: 0; }
}
.login .login-sem-conta { margin: 18px 0 0; text-align: center; }

/* mover chamado para outro cliente (equipe) */
.painel-mover { margin-top: 18px; }
.painel-mover h2 { font-size: 1rem; margin-bottom: 12px; }
.mover-linha { display: flex; gap: 10px; flex-wrap: wrap; }
.mover-linha select { flex: 1 1 240px; min-width: 0; }
.painel-mover .dica { font-size: 0.78rem; color: var(--muted); margin-top: 8px; }