/* =====================================================================================
   SMART COMANDO — console da central

   Linguagem visual: fundo claro levemente acinzentado, superfícies brancas em cartões
   arredondados com sombra curta, azul-marinho como cor de ação e coral como cor de dado, e
   tipografia com números grandes. Nada de fonte externa, nada de biblioteca: o arquivo abre
   sem rede.

   A separação entre ação e dado é o que mantém o painel legível: o marinho é botão e menu
   ativo, o coral é gráfico e ênfase. Nenhum dos dois substitui o vermelho de atraso — num
   painel de emergência, vermelho precisa continuar querendo dizer uma coisa só.

   A cor semântica dos estados é mantida — num painel de emergência, vermelho e âmbar
   precisam continuar significando atraso e atenção, e não decoração.
   ===================================================================================== */

:root {
  --fundo:        #f1f2f5;
  --fundo-2:      #e9ebef;
  --superficie:   #ffffff;
  --superficie-2: #f7f8fa;
  --borda:        #e8eaf0;
  --borda-forte:  #d6dae3;

  --texto:        #12141a;
  --texto-fraco:  #5f6672;
  --texto-tenue:  #8d94a1;

  /* Acento de ação: azul-marinho quase preto.
     É a cor do botão primário e do item de menu ativo — a mesma lógica da referência, onde
     quem age é escuro e o colorido é dado, não interface. */
  --marca:        #1b2431;
  --marca-forte:  #0d141d;
  --marca-fraca:  #eceff4;

  /* Destaque e dados.
     O coral é o acento da referência, e ele NÃO substitui o vermelho de atraso: num painel de
     emergência, vermelho precisa continuar querendo dizer uma coisa só. Por isso o coral
     aparece em gráfico e ênfase de leitura, nunca em prazo vencido — que segue em --perigo. */
  --acento:       #f4553d;
  --acento-fraca: #ffe8e2;
  --dados-2:      #7aa8d8;
  --dados-3:      #1b2431;

  /* Semântica */
  --perigo:       #dc2626;
  --perigo-fraca: #fee7e7;
  --atencao:      #b45309;
  --atencao-fraca:#fdf0dc;
  --sucesso:      #15803d;
  --sucesso-fraca:#e6f6ec;
  --neutro:       #9aa1ae;

  --raio:    20px;
  --raio-md: 14px;
  --raio-peq: 10px;

  --sombra-cartao: 0 1px 2px rgba(18, 20, 26, .04), 0 12px 28px -18px rgba(18, 20, 26, .18);
  --sombra-alta:   0 24px 60px -20px rgba(18, 20, 26, .28);

  /* Véu das caixas que flutuam sobre o mapa. Vira variável porque no tema escuro o branco
     translúcido vira uma mancha clara no meio do mapa escuro. */
  --veu:          rgba(255, 255, 255, .94);
  --veu-forte:    rgba(255, 255, 255, .90);

  --fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
           Arial, "Noto Sans", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -.02em; }
h1 { font-size: 26px; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }

p { margin: 0; }
button { font-family: inherit; font-size: inherit; color: inherit; }

/* ── Marca ──────────────────────────────────────────────────────────────────────────── */

.marca { display: flex; align-items: center; gap: 10px; }

.marca-selo {
  width: 34px; height: 34px;
  border-radius: 11px;
  background: linear-gradient(160deg, var(--marca), #9b7bff);
  color: #fff;
  display: grid; place-items: center;
  flex: none;
  box-shadow: 0 6px 14px -6px rgba(108, 76, 241, .8);
}
.marca-selo svg { width: 18px; height: 18px; }

.marca-texto { display: flex; flex-direction: column; line-height: 1.2; }
.marca-texto strong { font-size: 14px; letter-spacing: .04em; }
.marca-texto span { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-tenue); }

/* ── Botões ─────────────────────────────────────────────────────────────────────────── */

.botao {
  appearance: none;
  border: 1px solid var(--borda);
  background: var(--superficie);
  color: var(--texto);
  padding: 9px 16px;
  border-radius: var(--raio-peq);
  cursor: pointer;
  font-weight: 500;
  transition: background .14s, border-color .14s, box-shadow .14s, transform .06s;
  white-space: nowrap;
}
.botao:hover { border-color: var(--borda-forte); background: var(--superficie-2); }
.botao:active { transform: translateY(1px); }
.botao:disabled { opacity: .5; cursor: not-allowed; }
.botao:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }

.botao.primario {
  background: var(--marca);
  border-color: var(--marca);
  color: #fff;
  box-shadow: 0 8px 18px -10px rgba(18, 20, 26, .8);
}
.botao.primario:hover { background: var(--marca-forte); border-color: var(--marca-forte); }

.botao.perigo { background: var(--perigo-fraca); border-color: #f6c9c9; color: #b91c1c; }
.botao.perigo:hover { background: #fddcdc; }

.botao.pequeno { padding: 6px 12px; font-size: 12.5px; border-radius: 9px; }
.botao.largo { width: 100%; justify-content: center; }
.botao.icone {
  padding: 0; width: 34px; height: 34px;
  display: grid; place-items: center;
  background: transparent; border-color: transparent; color: var(--texto-fraco);
}
.botao.icone:hover { background: var(--fundo-2); color: var(--texto); }

/* ── Entrada ──────────────────────────────────────────────────────────────────────────── */

/* Painel escuro à esquerda, formulário sobre superfície lisa à direita, separados por um fio
   de 1px. Sem onda, sem brilho radial, sem selo arredondado grande: enfeite macio é
   exatamente o que faz uma tela de sistema parecer página de vendas. O que dá o peso aqui é
   o contraste entre o painel e a superfície, e a tipografia — não a decoração. */
.login {
  --login-tinta: #0a0d14;
  --login-fio: rgba(255, 255, 255, .10);
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  min-height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
  background: var(--superficie);
}

/* ── Coluna da foto ─────────────────────────────────────────────────────────────────── */

.login-foto {
  position: relative;
  overflow: hidden;
  min-height: 260px;
  background: var(--login-tinta);
  /* Reserva o lugar antes de a primeira foto chegar: sem isto a coluna nasce vazia e a
     página inteira pula quando a imagem carrega. */
  isolation: isolate;
}

/* Duas camadas sobrepostas. A troca é um cruzamento — carrega na camada de baixo, espera
   o `load` e só então inverte a opacidade. Com uma camada só, haveria um instante de fundo
   vazio a cada troca, justamente quando a pessoa está olhando para a tela. */
.login-foto-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--foco, center);
  opacity: 0;
  /* Duotone. As fotos vieram de origens e de assuntos diferentes; dessaturar e puxar para o
     azul-tinta é o que as transforma numa família só, em vez de um carrossel de banco de
     imagem. Continuam girando — só deixam de ser papel de parede. */
  filter: grayscale(1) contrast(1.06) brightness(.86);
  transform: scale(1.03);
  transition: opacity .9s ease, transform 16s ease-out;
}
.login-foto-img.acesa { opacity: 1; transform: scale(1); }

/* O tingimento. Mistura `color` pega a matiz e a saturação daqui e a luminosidade da foto —
   é isso que faz um duotone de verdade, em vez de uma foto em preto e branco com um véu
   lilás por cima. Sem ele, fotos de origens diferentes nunca parecem do mesmo sistema. */
.login-foto-cor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: #3b2f86;
  mix-blend-mode: color;
  opacity: .80;
}

/* O escuro não é enfeite: é o que garante contraste ao texto do painel sobre qualquer foto,
   inclusive as claras. A faixa de cima existe para o rótulo, que fica sobre o céu. */
.login-foto-tom {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(8, 10, 16, .48) 0%,
    rgba(8, 10, 16, .10) 24%,
    rgba(8, 10, 16, .26) 52%,
    rgba(8, 10, 16, .86) 100%);
}

.login-painel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 34px 36px 30px;
  color: rgba(255, 255, 255, .74);
}
.login-painel-linha {
  margin: 0;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.login-painel-base { display: flex; align-items: center; gap: 12px; }
.login-painel-traco {
  width: 28px; height: 1px; flex: none;
  background: rgba(255, 255, 255, .38);
}

/* ── Coluna do formulário ───────────────────────────────────────────────────────────── */

.login-lado {
  display: grid;
  place-items: center;
  padding: 44px 40px;
  background: var(--superficie);
  border-left: 1px solid var(--borda);
}

/* Sem cartão: a coluna já é a superfície. Uma caixa com sombra aqui só criaria uma moldura
   dentro de outra. */
.login-caixa {
  width: 100%;
  max-width: 368px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.login-topo { display: flex; align-items: center; gap: 11px; margin-bottom: 26px; }
.login-selo {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  border-radius: 7px;
  background: var(--marca);
  color: #fff;
}
.login-selo svg { width: 17px; height: 17px; }
.login-assinatura {
  font-size: 12px; font-weight: 700;
  letter-spacing: .17em;
  color: var(--texto);
}

.login-titulo { display: flex; flex-direction: column; gap: 7px; margin-bottom: 20px; }
.login-eyebrow {
  margin: 0;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}
.login-titulo h1 {
  margin: 0;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.022em;
  color: var(--texto);
}

.login-campo { display: flex; flex-direction: column; gap: 7px; }
.login-rotulo {
  font-size: 12px; font-weight: 600;
  letter-spacing: .02em;
  color: var(--texto-fraco);
}

.login-caixa input[type="email"],
.login-caixa input[type="password"] {
  height: 44px;
  padding: 0 14px;
  font-size: 14.5px;
  border-radius: 6px;
  border-color: var(--borda-forte);
  background: var(--superficie);
}
.login-caixa input::placeholder { color: var(--texto-tenue); }

/* Campo da senha com o botão do olho por dentro. O botão só muda o `type` do input —
   nada é copiado para lugar nenhum, e o valor continua fora do alcance do HTML. */
.login-senha { position: relative; display: block; }
.login-senha input { padding-right: 48px; }
.login-olho {
  position: absolute; right: 4px; top: 50%;
  transform: translateY(-50%);
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 0; border-radius: 5px;
  background: transparent;
  color: var(--texto-tenue);
  cursor: pointer;
  transition: background .14s, color .14s;
}
.login-olho:hover { background: var(--fundo-2); color: var(--texto); }
.login-olho:focus-visible { outline: 2px solid var(--marca); outline-offset: 0; }
.login-olho[aria-pressed="true"] { color: var(--marca); }
.login-olho svg { width: 18px; height: 18px; }

/* Sem sombra e sem ícone. Um botão com sombra colorida e seta é o clichê que mais entrega
   "feito por gerador"; um retângulo sólido de 46px diz a mesma coisa e para em pé. */
.botao.login-enviar {
  display: flex; align-items: center; justify-content: center;
  margin-top: 10px;
  height: 46px;
  font-size: 14.5px; font-weight: 600;
  letter-spacing: .004em;
  border-radius: 6px;
  box-shadow: none;
}

input[type="email"], input[type="password"], input[type="text"],
input[type="number"], input[type="date"], select, textarea {
  width: 100%;
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio-peq);
  color: var(--texto);
  padding: 11px 13px;
  font-family: inherit;
  font-size: 14px;
  transition: border-color .14s, box-shadow .14s, background .14s;
}
textarea { resize: vertical; min-height: 82px; }
input:focus, select:focus, textarea:focus {
  outline: none;
  background: var(--superficie);
  border-color: var(--marca);
  box-shadow: 0 0 0 4px rgba(108, 76, 241, .13);
}

.login-erro {
  color: #b91c1c;
  background: var(--perigo-fraca);
  border: 1px solid #f6c9c9;
  border-radius: 6px;
  padding: 9px 12px;
  font-size: 12.5px;
}

/* Alinhado à esquerda e em mono, como rodapé de instrumento — centralizado ele vira letra
   miúda de propaganda. */
.login-nota {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--borda);
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.65;
  letter-spacing: .03em;
  color: var(--texto-tenue);
  text-align: left;
}

/* Em tela estreita a foto deixa de ser coluna e vira faixa: quem está entrando precisa do
   formulário, não do enfeite. E em celular a foto sai de cena de vez — 168px de foto
   empurram o botão Entrar para fora da tela, que é o oposto de ajudar. */
@media (max-width: 900px) {
  .login {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 132px auto;
  }
  /* A faixa manda na altura. Sem zerar o `min-height` da coluna, a foto fica mais alta que a
     linha da grade e transborda por cima do formulário. */
  .login-foto { min-height: 0; }
  .login-foto-img { object-position: var(--foco-faixa, center 36%); }
  .login-painel { justify-content: center; padding: 0 22px; }
  .login-painel-base { display: none; }
  .login-lado {
    border-left: 0;
    border-top: 1px solid var(--borda);
    padding: 30px 22px 40px;
  }
}
@media (max-width: 560px) {
  .login-foto { display: none; }
  .login { grid-template-rows: auto; }
  .login-lado { border-top: 0; padding-top: 36px; }
}

/* ── Estrutura ──────────────────────────────────────────────────────────────────────── */

.app {
  display: grid;
  grid-template-columns: 232px 1fr;
  gap: 16px;
  height: 100%;
  padding: 16px;
}

.barra {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  box-shadow: var(--sombra-cartao);
}

.menu { display: flex; flex-direction: column; gap: 3px; }

.menu button {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  text-align: left;
  padding: 11px 12px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--texto-fraco);
  cursor: pointer;
  font-weight: 500;
  transition: background .14s, color .14s, transform .14s;
}
.menu button:hover { background: var(--superficie-2); color: var(--texto); }
.menu button:active { transform: scale(.985); }
.menu button.ativo {
  background: var(--texto);
  color: #fff;
  box-shadow: 0 10px 20px -14px rgba(18, 20, 26, .9);
}
.menu button:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }

.menu-icone { width: 18px; height: 18px; flex: none; opacity: .9; }
.menu-rotulo { flex: 1; }

.contador {
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: var(--marca-fraca);
  color: var(--marca-forte);
  border-radius: 999px;
  padding: 2px 8px;
  min-width: 24px;
  text-align: center;
}
.menu button.ativo .contador { background: rgba(255, 255, 255, .18); color: #fff; }
.contador:empty { display: none; }

.usuario {
  margin-top: auto;
  border-top: 1px solid var(--borda);
  padding-top: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.usuario-avatar {
  width: 34px; height: 34px; flex: none;
  border-radius: 50%;
  background: var(--marca-fraca);
  color: var(--marca-forte);
  display: grid; place-items: center;
  font-weight: 650; font-size: 13px;
}
.usuario-quem { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.usuario-quem strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
.usuario-quem span { font-size: 11px; color: var(--texto-tenue); }

/* ── Menu recolhível ────────────────────────────────────────────────────────────────── */

/* A coluna existe para navegar, e o plantão passa quase todo no mapa. Recolhida ela vira uma
   faixa de ícones e o mapa recupera os 244px — que num notebook de secretaria são a
   diferença entre enxergar dois bairros e enxergar um. */
.app { transition: grid-template-columns .18s ease; }

.menu-recolher {
  margin-left: auto;
  width: 28px; height: 28px;
  flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--borda);
  border-radius: 9px;
  background: var(--superficie-2);
  color: var(--texto-fraco);
  cursor: pointer;
  transition: background .14s, color .14s;
}
.menu-recolher:hover { background: var(--superficie); color: var(--texto); }
.menu-recolher:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.menu-recolher svg { width: 16px; height: 16px; transition: transform .18s ease; }

/* Só em tela larga: abaixo de 980px o menu já é uma faixa de ícones na horizontal e recolher
   não devolveria mapa nenhum — só sumiria com o caminho de volta. */
@media (min-width: 981px) {
  .app.recolhido { grid-template-columns: 80px 1fr; }

  /* A seta aponta para onde o clique leva: à esquerda ao recolher, à direita ao abrir.
     Girada, ela evita um segundo ícone só para o estado contrário. */
  .recolhido .menu-recolher { margin-left: 0; }
  .recolhido .menu-recolher svg { transform: rotate(180deg); }

  /* O selo não cabe ao lado do botão: 80px de faixa, menos 28px de padding, dão 52px. */
  .recolhido .marca { justify-content: center; }
  .recolhido .marca-selo,
  .recolhido .marca-texto,
  .recolhido .menu-rotulo,
  .recolhido .contador,
  .recolhido .usuario-quem { display: none; }

  .recolhido .menu button { justify-content: center; padding: 11px 0; gap: 0; }
  .recolhido .menu-icone { width: 20px; height: 20px; }

  /* Empilhado: lado a lado, avatar e "Sair" passam dos 52px úteis da faixa. */
  .recolhido .usuario { flex-direction: column; gap: 8px; }
  .recolhido #sair { width: 100%; padding-left: 0; padding-right: 0; }
}

.conteudo { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }

.cabecalho {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 6px 18px;
}
.subtitulo { font-size: 13px; color: var(--texto-tenue); margin-top: 4px; }
.cabecalho-acoes { display: flex; gap: 10px; align-items: center; }

.painel { flex: 1; overflow: auto; padding: 0 6px 26px; }

/* ── Superfície de conteúdo ─────────────────────────────────────────────────────────── */

.cartao-painel {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra-cartao);
  overflow: hidden;
}

/* ── Tabelas ────────────────────────────────────────────────────────────────────────── */

.tabela { width: 100%; border-collapse: collapse; font-size: 13.5px; }

.tabela thead th {
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  padding: 14px 16px 10px;
  background: var(--superficie);
  position: sticky;
  top: 0;
  z-index: 1;
}

.tabela tbody tr {
  cursor: pointer;
  transition: background .12s;
  border-top: 1px solid var(--borda);
}
.tabela tbody tr:hover { background: var(--superficie-2); }
.tabela tbody tr:focus-visible { outline: 2px solid var(--marca); outline-offset: -2px; }
.tabela td { padding: 13px 16px; vertical-align: middle; }
.tabela td.numero { font-variant-numeric: tabular-nums; text-align: right; }

.protocolo {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--texto-fraco);
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 3px 8px;
  white-space: nowrap;
}
.titulo-linha { display: flex; flex-direction: column; gap: 2px; }
.titulo-linha strong { font-weight: 600; }
.titulo-linha small { color: var(--texto-tenue); font-size: 11.5px; }

/* ── Chips e selos ──────────────────────────────────────────────────────────────────── */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px 4px 8px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  white-space: nowrap;
}
.chip::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--cor, var(--neutro));
  flex: none;
}

.selo {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
}
.selo.novo            { background: var(--marca-fraca); color: var(--marca-forte); }
.selo.triado          { background: #eef0f4; color: #4b5563; }
.selo.em_atendimento  { background: var(--atencao-fraca); color: var(--atencao); }
.selo.encaminhado     { background: #e8e6fd; color: #4f46b8; }
.selo.aguardando      { background: #f3e8fb; color: #7e3fa8; }
.selo.resolvido       { background: var(--sucesso-fraca); color: var(--sucesso); }
.selo.encerrado       { background: #eef0f4; color: #6b7280; }
.selo.descartado,
.selo.falso,
.selo.duplicado       { background: #f0eeee; color: #8a7f7f; }
.selo.enviado         { background: var(--marca-fraca); color: var(--marca-forte); }
.selo.aceito          { background: #e8e6fd; color: #4f46b8; }
.selo.recusado,
.selo.cancelado       { background: #f0eeee; color: #8a7f7f; }

.prazo { font-variant-numeric: tabular-nums; font-size: 12.5px; font-weight: 500; }
.prazo.ok      { color: var(--sucesso); }
.prazo.atencao { color: var(--atencao); }
.prazo.vencido { color: var(--perigo); }

.prio { font-family: var(--mono); font-size: 12px; font-weight: 700; }
.prio.P0 { color: var(--perigo); }
.prio.P1 { color: var(--atencao); }
.prio.P2 { color: var(--texto-fraco); }
.prio.P3 { color: var(--texto-tenue); }

/* ── Cartões de indicador ───────────────────────────────────────────────────────────── */

.grade-cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 20px 22px;
  box-shadow: var(--sombra-cartao);
}
.cartao .rotulo {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--texto-fraco);
}
.cartao .valor {
  font-size: 34px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-top: 10px;
  letter-spacing: -.03em;
  line-height: 1.05;
}
.cartao .valor.pequeno { font-size: 22px; }
.cartao .nota { font-size: 11.5px; color: var(--texto-tenue); margin-top: 8px; }

/* O que o cidadão escreveu. Fica separado do resto por um fio, e não em itálico nem em
   cinza claro: é o dado que decide a triagem, não comentário de rodapé. */
.cartao-acoes { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }

/* O pedido de motivo nasce no lugar do botão: o operador não sai do cartão que estava lendo. */
.descarte-caixa { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.descarte-caixa input { width: 100%; }
.descarte-acoes { display: flex; gap: 8px; }

.cartao-relato {
  margin: 10px 0 0;
  padding: 9px 11px;
  border-left: 2px solid var(--borda-forte);
  background: var(--superficie-2);
  border-radius: 0 6px 6px 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--texto);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Cartão do cartão de entrada de relatos */
.cartao-entrada { display: flex; flex-direction: column; gap: 2px; }

.bloco {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 20px 22px;
  margin-bottom: 16px;
  box-shadow: var(--sombra-cartao);
}
.bloco > h3 { margin-bottom: 6px; }
.bloco > .bloco-nota { font-size: 12.5px; color: var(--texto-tenue); margin-bottom: 16px; }

.ressalva {
  font-size: 12.5px;
  color: var(--texto-fraco);
  background: #fffaf0;
  border: 1px solid #f5e6c8;
  border-radius: var(--raio-md);
  padding: 12px 15px;
  margin-bottom: 16px;
}

/* ── Mapa ao vivo ───────────────────────────────────────────────────────────────────── */

/* A tela do mapa ocupa a área toda: é a primeira tela da central, não um relatório que se
   abre. O `overflow: hidden` é do Leaflet — o painel com rolagem faria o mapa arrastar a
   página em vez de mover o mapa. */
.painel[data-tela="mapa"] { padding: 0; overflow: hidden; display: flex; }

.mapa-cheio {
  position: relative;
  flex: 1;
  min-height: 0;
  border-radius: var(--raio);
  overflow: hidden;
  border: 1px solid var(--borda);
  box-shadow: var(--sombra-cartao);
  background: var(--fundo-2);
  /* `isolation` fecha um contexto de empilhamento aqui dentro. Os cartões sobrepostos
     precisam de z-index acima de 700 para vencer os painéis do Leaflet — e sem esta linha
     eles vencem também a gaveta (50) e o véu dela (40), que vivem fora do mapa. O sintoma
     era o cartão dos números e a legenda desenhados por cima do detalhe da ocorrência. */
  isolation: isolate;
}

.mapa-real { position: absolute; inset: 0; }

/* Sobreposições: acima dos painéis do Leaflet (que vão até 700) e clicáveis só onde têm
   conteúdo — senão a camada inteira engoliria o arrasto do mapa. */
.mapa-numeros,
.mapa-postos,
.mapa-legenda,
.mapa-aviso { position: absolute; z-index: 800; pointer-events: none; }
.mapa-numeros > *, .mapa-postos > *, .mapa-legenda > * { pointer-events: auto; }

.mapa-numeros {
  top: 14px;
  left: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  background: var(--veu);
  border: 1px solid var(--borda);
  border-radius: var(--raio-md);
  box-shadow: var(--sombra-cartao);
  padding: 4px;
  max-width: calc(100% - 28px);
}

.numero {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 14px;
  min-width: 92px;
  border-right: 1px solid var(--borda);
}
.numero:last-child { border-right: 0; }
.numero strong { font-size: 22px; line-height: 1.1; letter-spacing: -.02em; }
.numero span { font-size: 11px; color: var(--texto-tenue); white-space: nowrap; }
.numero[data-tom="perigo"] strong { color: var(--perigo); }
.numero[data-tom="atencao"] strong { color: var(--atencao); }
.numero[data-tom="ok"] strong { color: var(--sucesso); }

.mapa-postos {
  top: 14px;
  right: 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  /* Sem largura máxima, a pastilha do órgão com nome longo vaza para fora do mapa e o
     `overflow: hidden` do contêiner corta justamente a situação do posto. */
  max-width: min(220px, calc(100% - 28px));
  /* Com muitos órgãos descobertos a coluna cresce até encostar no zoom e na atribuição, que
     ficam no canto inferior direito do Leaflet. O limite a mantém acima deles; o resto rola
     dentro da própria coluna. A roda do mouse continua funcionando porque o evento nasce
     numa pastilha, que recebe ponteiro. */
  max-height: calc(100% - 104px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mapa-postos .postos { flex-direction: column; align-items: flex-end; margin: 0; max-width: 100%; }
.mapa-postos .posto { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

.mapa-legenda {
  left: 14px;
  bottom: 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  background: var(--veu);
  border: 1px solid var(--borda);
  border-radius: var(--raio-md);
  box-shadow: var(--sombra-cartao);
  padding: 10px 12px;
  max-width: 320px;
}
.mapa-legenda .rotulo { font-size: 11px; color: var(--texto-tenue); margin: 0; }
.mapa-legenda .nota { flex-basis: 100%; font-size: 10.5px; margin: 0; }
.legenda-categorias { display: flex; flex-wrap: wrap; gap: 8px; flex-basis: 100%; }
.mapa-calor {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--texto-fraco);
  border-left: 1px solid var(--borda);
  padding-left: 10px;
  cursor: pointer;
}

.mapa-aviso {
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  background: var(--perigo-fraca);
  border: 1px solid #f6c9c9;
  color: #b91c1c;
  border-radius: var(--raio-peq);
  padding: 8px 12px;
  font-size: 12px;
  max-width: min(520px, calc(100% - 28px));
  text-align: center;
}

/* Aviso de relato fora da vista. É um botão, não um letreiro: quem clica reenquadra, quem
   não clica continua trabalhando de onde estava. Cinza e não vermelho — não é emergência,
   é coisa que existe e a tela não está mostrando. */
.mapa-fora {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 800;
  pointer-events: auto;
  max-width: min(520px, calc(100% - 28px));
  padding: 9px 14px;
  border-radius: var(--raio-peq);
  border: 1px solid var(--borda-forte);
  background: var(--veu-forte);
  color: var(--texto);
  font-family: inherit;
  font-size: 12.5px;
  cursor: pointer;
  box-shadow: var(--sombra-cartao);
}
.mapa-fora:hover { background: var(--superficie); }
.mapa-fora:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }

/* P0 pisca: no mapa, um ponto vermelho parado se confunde com qualquer outra coisa. */
/* O pino é o símbolo da categoria que o cidadão viu no celular, dentro de um disco branco
   com anel na cor da prioridade. Assim as duas informações convivem: o desenho diz do que
   se trata, o anel diz o quanto urgente — e a central não perde a leitura de prioridade
   que já usava quando o pino era só uma bolinha colorida. */
.pino-caixa { background: none; border: 0; }
.pino { display: block; cursor: pointer; }
/* O pino é o ícone, e só. É assim que o aplicativo desenha: o desenho da categoria direto
   sobre o mapa, sem disco nem moldura. A moldura branca que existia aqui era invenção da
   central, e fazia o mesmo símbolo parecer outro entre as duas telas. */
.pino-bola {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  background: transparent;
  border: 0;
  transition: transform .12s ease;
}
.pino:hover .pino-bola { transform: scale(1.1); }
.pino-simbolo {
  width: 42px; height: 42px;
  display: block;
  pointer-events: none;
  /* Sem disco atrás, o contorno escuro do ícone pode se perder no mapa claro em alguns
     trechos. A sombra é fraca de propósito: separa do fundo sem virar moldura. */
  filter: drop-shadow(0 1px 2px rgba(10, 13, 20, .45));
}

/* P0 pulsa: um pino parado no mapa se confunde com qualquer outra coisa. Pulsa o halo em
   volta, não o símbolo — o desenho precisa continuar legível justamente no P0. */
/* Relato aguardando triagem: um pouco menor e de anel tracejado. Não usa cor de prioridade
   porque ainda não há prioridade — quem define é a triagem, não o app.
   O símbolo fica em opacidade cheia: o tracejado já diz o que é. Esmaecer por cima disso só
   deixava o pino difícil de achar num mapa cheio, que é o oposto do que ele serve. */
.pino-pendente .pino-bola {
  width: 40px; height: 40px;
  border: 2.5px dashed var(--texto-fraco);
  border-radius: 50%;
  background: transparent;
}
.pino-pendente .pino-simbolo { width: 30px; height: 30px; }

.popup-pendente { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; }
.popup-pendente strong { font-size: 13.5px; }
.popup-pendente-nota { color: var(--texto-tenue); font-size: 11.5px; }

/* P0 pulsa com um halo vermelho em volta do próprio ícone. Antes o pulso era no disco, que
   não existe mais; e piscar o desenho inteiro o deixaria ilegível justamente no caso mais
   grave, que é quando alguém precisa reconhecê-lo rápido. */
.pino-p0 .pino-simbolo { animation: pulsar-pino 1.7s ease-in-out infinite; }
@keyframes pulsar-pino {
  0%, 100% {
    filter: drop-shadow(0 1px 2px rgba(10, 13, 20, .45)) drop-shadow(0 0 0 rgba(220, 38, 38, 0));
  }
  50% {
    filter: drop-shadow(0 1px 2px rgba(10, 13, 20, .45)) drop-shadow(0 0 8px rgba(220, 38, 38, .95));
  }
}

/* O Leaflet é claro por natureza; o rodapé de atribuição precisa ser legível sobre o mapa. */
.leaflet-control-attribution {
  font-size: 10.5px !important;
  background: var(--veu-forte) !important;
}
.leaflet-container { font: inherit; }

.legenda { display: flex; flex-direction: column; gap: 9px; }
.legenda-item { display: flex; align-items: center; gap: 9px; font-size: 12.5px; }
.legenda-bola { width: 10px; height: 10px; border-radius: 50%; flex: none; }
/* A mesma bola, vazada e tracejada: é assim que o pino sem triagem aparece no mapa. */
.legenda-bola-pendente {
  background: transparent;
  border: 1.5px dashed var(--texto-tenue);
}

.controle { display: flex; flex-direction: column; gap: 7px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--borda); }
.controle label { font-size: 12px; font-weight: 500; color: var(--texto-fraco); }
.controle output { font-variant-numeric: tabular-nums; color: var(--texto); font-weight: 600; }

input[type="range"] { width: 100%; accent-color: var(--marca); }

/* ── Gaveta de detalhe ──────────────────────────────────────────────────────────────── */

.gaveta-fundo {
  position: fixed;
  inset: 0;
  background: rgba(18, 20, 26, .32);
  z-index: 40;
  backdrop-filter: blur(2px);
}

.gaveta {
  position: fixed;
  top: 12px; right: 12px; bottom: 12px;
  width: min(580px, 94vw);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  z-index: 50;
  display: flex;
  flex-direction: column;
  box-shadow: var(--sombra-alta);
  animation: desliza .2s ease-out;
  overflow: hidden;
}
@keyframes desliza { from { transform: translateX(20px); opacity: .5; } }

.gaveta-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 22px 16px;
}
.gaveta-protocolo {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--texto-fraco);
  margin-bottom: 6px;
}
.gaveta-corpo { overflow: auto; padding: 0 22px 26px; }

.dados-grade {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 16px;
  background: var(--superficie-2);
  border-radius: var(--raio-md);
  margin-bottom: 6px;
}
.dado .rotulo {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--texto-tenue);
  margin-bottom: 3px;
}
.dado .valor { font-size: 13px; display: flex; align-items: center; }

.secao-titulo {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--texto-tenue);
  font-weight: 600;
  margin: 22px 0 12px;
}

.acoes { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── Linha do tempo ─────────────────────────────────────────────────────────────────── */

.linha-tempo { list-style: none; margin: 0; padding: 0; }

.linha-tempo li {
  position: relative;
  padding: 0 0 18px 22px;
  border-left: 2px solid var(--borda);
}
.linha-tempo li:last-child { border-left-color: transparent; padding-bottom: 0; }
.linha-tempo li::before {
  content: "";
  position: absolute;
  left: -6px; top: 5px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #d7dbe4;
  border: 2px solid var(--superficie);
}
.linha-tempo li.destaque::before { background: var(--marca); }

.evento-topo { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.evento-tipo { font-weight: 600; font-size: 13px; }
.evento-quando { font-size: 11.5px; color: var(--texto-tenue); font-variant-numeric: tabular-nums; }
.evento-texto { font-size: 12.5px; color: var(--texto-fraco); margin-top: 3px; }
.evento-transicao { font-size: 11px; color: var(--texto-tenue); font-family: var(--mono); margin-top: 2px; }

/* ── Encaminhamentos ────────────────────────────────────────────────────────────────── */

.encaminhamento {
  border: 1px solid var(--borda);
  border-radius: var(--raio-md);
  padding: 14px 16px;
  margin-bottom: 10px;
  background: var(--superficie);
}
.encaminhamento-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.encaminhamento-orgao { font-weight: 600; }
.encaminhamento-acoes { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 12px; }
.encaminhamento-sla { font-size: 12.5px; color: var(--texto-fraco); }
.encaminhamento-sla strong { font-weight: 600; }

/* ── Modal ──────────────────────────────────────────────────────────────────────────── */

.modal-fundo {
  position: fixed;
  inset: 0;
  background: rgba(18, 20, 26, .38);
  display: grid;
  place-items: safe center;  /* sem o "safe", um modal mais alto que a tela tem o topo cortado e inalcançável */
  overflow-y: auto;
  z-index: 60;
  padding: 20px;
  backdrop-filter: blur(3px);
}

.modal {
  width: min(470px, 100%);
  background: var(--superficie);
  border-radius: var(--raio);
  padding: 24px;
  box-shadow: var(--sombra-alta);
  /* Numa janela baixa (o formulário de usuário passa de 700px) o rodapé com
     "Confirmar" ficava fora da tela sem rolagem possível: o modal agora é
     limitado à altura visível e rola por dentro. */
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
}
.modal-descricao { font-size: 12.5px; color: var(--texto-fraco); margin: 6px 0 16px; }
.modal form { display: flex; flex-direction: column; gap: 14px; }
.modal form label { display: flex; flex-direction: column; gap: 7px; font-size: 12px; font-weight: 500; color: var(--texto-fraco); }
/* O rodapé fica preso na base do modal: em formulários altos o "Confirmar"
   continua à vista sem precisar rolar até o fim. */
.modal-acoes {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  position: sticky;
  bottom: 0;
  margin: 20px -24px 0;
  padding: 12px 24px 20px;
  background: var(--superficie);
  border-radius: 0 0 var(--raio) var(--raio);
}
.modal-erro {
  margin-top: 14px;
  color: #b91c1c;
  background: var(--perigo-fraca);
  border: 1px solid #f6c9c9;
  border-radius: var(--raio-peq);
  padding: 9px 12px;
  font-size: 12.5px;
}

.opcoes { display: flex; flex-wrap: wrap; gap: 8px; }
.opcao {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border: 1px solid var(--borda);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  transition: border-color .12s, background .12s;
}
.opcao input { accent-color: var(--marca); margin: 0; }
.opcao:has(input:checked) { border-color: var(--marca); background: var(--marca-fraca); color: var(--marca-forte); }

/* ── Aviso flutuante ────────────────────────────────────────────────────────────────── */

.aviso {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  background: var(--texto);
  color: #fff;
  padding: 11px 20px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  box-shadow: var(--sombra-alta);
  z-index: 70;
}
.aviso.erro { background: var(--perigo); }
.aviso.ok { background: var(--sucesso); }

/* ── Vazio e carregando ─────────────────────────────────────────────────────────────── */

.vazio {
  display: grid;
  place-items: center;
  gap: 6px;
  padding: 64px 20px;
  color: var(--texto-tenue);
  text-align: center;
  background: var(--superficie);
  border: 1px dashed var(--borda-forte);
  border-radius: var(--raio);
}
.vazio strong { color: var(--texto-fraco); font-weight: 600; }

.carregando { padding: 44px; text-align: center; color: var(--texto-tenue); }

@media (max-width: 980px) {
  /* Duas linhas explícitas em vez de `height: auto`: o mapa precisa de altura definida para
     existir. Com altura automática, o Leaflet recebia zero e a tela abria em branco numa
     janela de 980px — que é a largura de metade dos notebooks de secretaria. */
  .app {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    height: 100%;
  }
  .conteudo { min-height: 0; }
  .barra { flex-direction: row; align-items: center; gap: 14px; overflow-x: auto; }
  .menu { flex-direction: row; }
  .menu-rotulo { display: none; }
  .menu-recolher { display: none; }
  .usuario { margin: 0; border: 0; padding: 0; }
  /* Numa tela estreita, os números rolam na horizontal e os postos descem para baixo.
     `right: 56px` desvia do zoom do Leaflet, que fica a 10px do canto; e o limite de altura
     impede que a coluna desça até a atribuição. Sem os dois, a lista de órgãos descobertos
     cobria o +/− e o crédito do mapa — que é justamente o que a licença exige que apareça. */
  .mapa-numeros { overflow-x: auto; flex-wrap: nowrap; max-width: calc(100% - 28px); }
  .mapa-postos {
    top: auto;
    /* 100px deixa a coluna acima da legenda, que tem 76px de altura mais 14 de margem. */
    bottom: 100px;
    right: 56px;
    max-height: calc(100% - 190px);
  }
  /* `min()` e não `calc()` puro: em tela larga a legenda continua com 320px; em tela muito
     estreita ela encolhe o bastante para não vazar do mapa. Com a largura inteira ela se
     esticava por baixo da coluna dos postos. */
  .mapa-legenda { max-width: min(320px, calc(100% - 28px)); bottom: 14px; }
  .dados-grade { grid-template-columns: 1fr 1fr; }
}

/* ── Ao vivo e alerta prioritário ────────────────────────────────────────────────────── */

.cabecalho-direita { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }

/* O estado do canal fica à vista o tempo todo. Um operador que acha que está conectado
   quando não está é pior que um operador sem canal nenhum: ele confia no silêncio. */
.ao-vivo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  font-size: 12px;
  font-weight: 500;
  color: var(--texto-fraco);
  white-space: nowrap;
}
.ao-vivo-ponto {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--neutro);
  flex: none;
}
.ao-vivo[data-estado="on"] .ao-vivo-ponto { background: var(--sucesso); box-shadow: 0 0 0 3px var(--sucesso-fraca); }
.ao-vivo[data-estado="on"] { color: var(--sucesso); }
.ao-vivo[data-estado="erro"] .ao-vivo-ponto { background: var(--perigo); box-shadow: 0 0 0 3px var(--perigo-fraca); }
.ao-vivo[data-estado="erro"] { color: var(--perigo); }
.ao-vivo[data-estado="off"] .ao-vivo-ponto { animation: pulsar 1.6s ease-in-out infinite; }

@keyframes pulsar { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

#tema-toggle,
#som-toggle { display: inline-flex; align-items: center; gap: 6px; }
#tema-toggle .icone-lua { display: none; }
#tema-toggle[aria-pressed="true"] .icone-sol { display: none; }
#tema-toggle[aria-pressed="true"] .icone-lua { display: inline; }
#som-toggle[aria-pressed="true"] { border-color: var(--sucesso); color: var(--sucesso); }
#som-toggle[aria-pressed="true"] #som-onda { opacity: 1; }
#som-toggle[aria-pressed="false"] #som-onda { opacity: .25; }

.alerta-camada {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: safe center;
  background: rgba(18, 20, 26, .55);
  padding: 20px;
  backdrop-filter: blur(2px);
  overflow-y: auto;
}

.alerta-caixa {
  width: min(460px, 100%);
  background: var(--superficie);
  border-radius: var(--raio);
  padding: 24px;
  box-shadow: var(--sombra-alta);
  border-top: 4px solid var(--perigo);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  animation: entrar-alerta .18s ease-out;
}

@keyframes entrar-alerta {
  from { transform: translateY(-8px) scale(.98); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.alerta-topo { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.alerta-topo h2 { font-size: 17px; margin: 0; }
.alerta-selo {
  background: var(--perigo);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 3px 8px;
  border-radius: 999px;
}
.alerta-texto { font-size: 15px; margin: 8px 0 4px; color: var(--texto); }
.alerta-hora { font-size: 12px; color: var(--texto-tenue); margin: 0; }
.alerta-acoes { display: flex; justify-content: flex-end; gap: 9px; margin-top: 20px; }

/* Postos — quem está de plantão agora, e quem não está */
.postos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.posto {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border-radius: 999px;
  font-size: 12px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  color: var(--texto-fraco);
}
.posto[data-ativo="true"] { border-color: #bfe6cd; color: var(--sucesso); background: var(--sucesso-fraca); }
.posto[data-ativo="false"] { border-color: #f6c9c9; color: var(--perigo); background: var(--perigo-fraca); }
.posto-hora { color: var(--texto-tenue); font-size: 11.5px; }

/* ── Tema escuro ────────────────────────────────────────────────────────────────────── */

/* Um bloco só, e só com o que muda. O tema claro continua sendo o padrão do `:root`, então
   nada aqui pode "vazar" para ele: seletor com atributo, e atributo só é escrito quando
   alguém escolhe o escuro. */
[data-tema="escuro"] {
  color-scheme: dark;

  --fundo:        #0f1117;
  --fundo-2:      #151821;
  --superficie:   #171a23;
  --superficie-2: #1e222d;
  --borda:        #262b38;
  --borda-forte:  #333a4a;

  --texto:        #e8eaf0;
  --texto-fraco:  #a8b0c0;
  --texto-tenue:  #7d8697;

  /* O marinho do tema claro viraria um buraco no fundo escuro. Sobe para um ardosia que
     ainda aceita texto branco em cima — que é como o item de menu ativo e o botão primário
     são desenhados. */
  --marca:        #2f3c52;
  --marca-forte:  #405275;
  --marca-fraca:  #202836;

  --acento:       #ff6a52;
  --acento-fraca: #3a221d;
  --dados-2:      #7aa8d8;
  --dados-3:      #cfd8e6;

  --perigo:       #f87171;
  --perigo-fraca: #3a1f22;
  --atencao:      #fbbf24;
  --atencao-fraca:#3a2e18;
  --sucesso:      #4ade80;
  --sucesso-fraca:#17301f;
  --neutro:       #6b7280;

  --sombra-cartao: 0 1px 2px rgba(0, 0, 0, .4), 0 14px 30px -18px rgba(0, 0, 0, .8);
  --sombra-alta:   0 24px 60px -20px rgba(0, 0, 0, .9);

  --veu:          rgba(23, 26, 35, .94);
  --veu-forte:    rgba(23, 26, 35, .92);
}

[data-tema="escuro"] .login { background: var(--superficie); }

/* No escuro o painel da foto perde o contraste que fazia o trabalho no tema claro — ele fica
   quase da cor da superfície. A tinta desce, e o fio da divisória clareia um degrau para a
   separação continuar legível. */
[data-tema="escuro"] .login { --login-tinta: #06080d; }
[data-tema="escuro"] .login-lado { border-left-color: #262b36; }
[data-tema="escuro"] .login-caixa input[type="email"],
[data-tema="escuro"] .login-caixa input[type="password"] { border-color: #333a48; }
[data-tema="escuro"] .login-nota { border-top-color: #262b36; }
[data-tema="escuro"] .login-selo { background: var(--marca-forte); }

/* Item de menu ativo usa `--texto` como fundo no tema claro. No escuro isso daria fundo
   quase branco com texto branco — some o rótulo. Vira o acento da marca. */
[data-tema="escuro"] .menu button.ativo {
  background: var(--marca);
  color: #fff;
  box-shadow: 0 10px 22px -14px rgba(0, 0, 0, .95);
}

[data-tema="escuro"] .botao.perigo { border-color: #5c2a2e; color: #fca5a5; }
[data-tema="escuro"] .botao.perigo:hover { background: #4a2427; }
[data-tema="escuro"] .login-erro,
[data-tema="escuro"] .modal-erro,
[data-tema="escuro"] .mapa-aviso { border-color: #5c2a2e; color: #fca5a5; }

[data-tema="escuro"] .ressalva { background: #2a2317; border-color: #4a3d24; }

/* Selos: as tintas claras (#eef0f4, #e8e6fd...) viram blocos brancos no escuro. */
[data-tema="escuro"] .selo.triado,
[data-tema="escuro"] .selo.encerrado    { background: #232834; color: #b6bfd0; }
[data-tema="escuro"] .selo.encaminhado,
[data-tema="escuro"] .selo.aceito       { background: #241f3d; color: #b9a6ff; }
[data-tema="escuro"] .selo.aguardando   { background: #2f2144; color: #d5a8ff; }
[data-tema="escuro"] .selo.descartado,
[data-tema="escuro"] .selo.falso,
[data-tema="escuro"] .selo.duplicado,
[data-tema="escuro"] .selo.recusado,
[data-tema="escuro"] .selo.cancelado    { background: #2a2530; color: #a99fae; }

[data-tema="escuro"] .linha-tempo li::before { background: #414959; }

/* O aviso flutuante usa `--texto` como fundo: no escuro ficaria branco com texto branco. */
[data-tema="escuro"] .aviso {
  background: #2a3040;
  color: var(--texto);
  border: 1px solid var(--borda-forte);
}

[data-tema="escuro"] .alerta-caixa { border-top-color: var(--perigo); }

/* Controles do Leaflet são brancos por padrão e ficam como um recorte no mapa escuro. */
[data-tema="escuro"] .leaflet-bar a,
[data-tema="escuro"] .leaflet-bar a:hover {
  background: var(--superficie);
  color: var(--texto);
  border-bottom-color: var(--borda);
}
[data-tema="escuro"] .leaflet-control-attribution { color: var(--texto-tenue); }
[data-tema="escuro"] .leaflet-control-attribution a { color: var(--marca-forte); }

[data-tema="escuro"] .mapa-cheio { background: #0b0d12; }

/* O mapa escuro é o MESMO mapa claro, invertido. A alternativa era um provedor com basemap
   escuro pronto (o CARTO tem um bom), mas ele passou a exigir chave e a responder 200 com um
   PNG escrito "API KEY REQUIRED" — 200 engana, não quer dizer ladrilho válido.
   O filtro só alcança a camada de ladrilhos: os pinos ficam noutro painel do Leaflet e
   mantêm as cores de prioridade verdadeiras, que é o que precisa saltar aos olhos no escuro.
   `hue-rotate(180deg)` desfaz a troca de cor da inversão: água volta a ser água, vegetação
   volta a ser vegetação, em vez de tudo virar roxo. */
[data-tema="escuro"] .leaflet-tile-pane {
  filter: invert(1) hue-rotate(180deg) brightness(.95) contrast(.88) saturate(.72);
}

/* A troca é do mapa inteiro; sem transição o piscar de ladrilhos fica agressivo. */
.mapa-real { transition: background-color .2s ease; }
.leaflet-tile-pane { transition: filter .25s ease; }

/* =====================================================================================
   Códigos de verificação e assinantes
   ===================================================================================== */

/* Aviso de que não há SMS saindo. Fica no corpo da tela, e não como o toast `.aviso`, que
   some em 4 s: esta informação precisa continuar na frente de quem está lendo o código. */
.aviso-caixa {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: baseline;
  padding: 13px 16px;
  margin-bottom: 14px;
  border-radius: var(--raio-md);
  background: var(--atencao-fraca);
  color: var(--atencao);
  font-size: 13px;
  line-height: 1.5;
}
.aviso-caixa strong { font-weight: 600; }

.aviso-linha {
  margin: 10px 2px 0;
  font-size: 12.5px;
  color: var(--texto-tenue);
}

/* O código precisa ser lido em voz alta e copiado sem erro. Tabular e monoespaçado é o que
   separa "1" de "l" e "0" de "O" na hora de ditar por telefone. */
.codigo-linha { display: flex; align-items: center; gap: 10px; }

.codigo-numero {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .13em;
  font-variant-numeric: tabular-nums;
  color: var(--texto);
  background: var(--marca-fraca);
  border-radius: var(--raio-peq);
  padding: 5px 10px;
}

.acoes-linha { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }

/* ---------------------------------- financeiro ---------------------------------- */

.cartoes-numero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.cartao-numero {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 15px 17px;
  border-radius: var(--raio-md);
  background: var(--superficie);
  border: 1px solid var(--borda);
  box-shadow: var(--sombra-cartao);
}

.cartao-rotulo { font-size: 12px; color: var(--texto-fraco); }
.cartao-valor {
  font-size: 22px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--texto);
  letter-spacing: -.01em;
}
.cartao-detalhe { font-size: 11.5px; color: var(--texto-tenue); }

.cartao-titulo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 15px 17px 6px;
}
.cartao-titulo strong { font-size: 13.5px; font-weight: 600; }

.grafico {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 168px;
  padding: 8px 17px 15px;
}

.grafico-coluna {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  height: 100%;
  min-width: 0;
}

.grafico-area {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.grafico-barra {
  width: 100%;
  max-width: 34px;
  border-radius: 6px 6px 3px 3px;
  background: linear-gradient(180deg, var(--acento) 0%, #d8412b 100%);
  transition: height .25s ease;
}

/* Mês sem receita vira uma linha fina na base, e não um vão: um buraco no gráfico some, e
   "não vendi nada" precisa continuar visível. */
.grafico-barra.vazia {
  height: 2px !important;
  background: var(--borda-forte);
  border-radius: 2px;
}

.grafico-rotulo {
  font-size: 10px;
  color: var(--texto-tenue);
  white-space: nowrap;
  transform: rotate(-32deg);
  transform-origin: center;
}

.filtros { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 12px; }

.campo-busca,
.campo-filtro {
  padding: 8px 12px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-peq);
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
  font-size: 13px;
}
.campo-busca { flex: 1 1 190px; max-width: 300px; }
.campo-busca:focus,
.campo-filtro:focus { outline: 2px solid var(--marca); outline-offset: -1px; }

/* =====================================================================================
   Composição da referência — cartão com ícone, cabeçalho com pílula, área com gradiente
   ===================================================================================== */

/* O cartão de número ganha ícone no canto e passa a respirar mais. Sem `position:
   relative` o ícone absoluto escaparia do cartão. */
.cartao-numero { position: relative; padding: 18px 18px 16px; }
.cartao-numero .cartao-icone {
  position: absolute;
  top: 16px; right: 16px;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  color: var(--texto-tenue);
}
.cartao-numero .cartao-valor { font-size: 30px; line-height: 1.1; letter-spacing: -.035em; }
.cartao-numero .cartao-rotulo { margin-top: 2px; font-weight: 600; color: var(--texto); }
.cartao-numero.indisponivel .cartao-valor { color: var(--texto-tenue); }
.icone-tempo { width: 26px; height: 26px; }

/* Cabeçalho de cartão com título à esquerda e pílula à direita — como o "See Detail" da
   referência. A pílula informa, não promete clique: por isso é `span`, não `button`. */
.cartao-titulo { align-items: center; padding: 16px 18px 10px; }
.selo-pill {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--texto-fraco);
  background: var(--fundo-2);
  border-radius: 999px;
  padding: 5px 12px;
  white-space: nowrap;
}

/* Assimetria deliberada: o gráfico ocupa mais que a lista. Dois blocos de mesmo peso lado a
   lado não têm hierarquia — e é a hierarquia que separa painel de grade de cartões. */
.grade-clima {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  gap: 14px;
  margin-top: 14px;
}
@media (max-width: 1080px) { .grade-clima { grid-template-columns: 1fr; } }

.area-chuva { padding: 6px 18px 16px; position: relative; }
.grafico-area-svg { width: 100%; height: 150px; display: block; overflow: visible; }

.grafico-eixo {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  color: var(--texto-tenue);
  font-variant-numeric: tabular-nums;
  margin-top: 6px;
}

.grafico-pico {
  position: absolute;
  top: 10px; right: 18px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--acento);
}

.lista-riscos { padding: 4px 18px 18px; display: flex; flex-direction: column; gap: 14px; }

.risco-item { display: flex; flex-direction: column; gap: 3px; }
.risco-linha { display: flex; align-items: center; gap: 9px; }
.risco-linha strong { font-size: 13.5px; font-weight: 600; }

/* A marca é um traço curto à esquerda, não um ícone colorido: numa lista de quatro itens,
   ícone vira ruído; traço dá o ritmo sem competir com o texto. */
.risco-marca {
  width: 3px; height: 16px;
  border-radius: 2px;
  background: var(--acento);
  flex: none;
}
.risco-motivo { margin: 0; font-size: 12px; color: var(--texto-fraco); line-height: 1.45; }

.risco-vazio { padding: 6px 18px 20px; display: flex; flex-direction: column; gap: 4px; }
.risco-vazio strong { font-size: 13.5px; font-weight: 600; color: var(--texto-fraco); }
.risco-vazio span { font-size: 12px; color: var(--texto-tenue); line-height: 1.5; }

/* =====================================================================================
   Painel inicial — a composição da referência aplicada à operação.

   Quatro indicadores em cima, e abaixo uma grade assimétrica: série larga com medidor
   estreito ao lado, tabela larga com alertas estreitos ao lado. A assimetria é o que
   separa painel de grade de cartões — dois blocos de mesmo peso não têm hierarquia.
   ===================================================================================== */

.grade-painel {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  grid-template-areas:
    "grafico medidor"
    "tabela  alertas";
  gap: 14px;
  margin-top: 14px;
  align-items: start;
}
.area-grafico { grid-area: grafico; }
.area-medidor { grid-area: medidor; }
.area-tabela  { grid-area: tabela; }
.area-alertas { grid-area: alertas; }

@media (max-width: 1100px) {
  .grade-painel {
    grid-template-columns: 1fr;
    grid-template-areas: "grafico" "medidor" "tabela" "alertas";
  }
}

/* Vermelho é o único indicador de estouro no painel. Se ele aparecer em mais de um lugar,
   deixa de significar alguma coisa. */
.cartao-numero.critico .cartao-valor { color: var(--perigo); }
.cartao-numero.critico .cartao-icone { color: var(--perigo); }

/* O arco é o gráfico; o número no centro é o dado. O centro é sobreposto ao arco, no
   ponto onde o olho já está. */
.medidor { position: relative; display: grid; place-items: center; padding: 4px 18px 22px; }
.medidor-svg { width: 100%; max-width: 230px; height: auto; display: block; }
.medidor-centro {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -46%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  pointer-events: none;
}
.medidor-centro strong { font-size: 31px; font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.medidor-centro span { font-size: 11.5px; color: var(--texto-fraco); }

/* Cada alerta tem uma ação. Aviso sem ação é decoração, e decoração num painel de
   plantão ocupa o espaço de quem está com pressa. */
.lista-alertas { display: flex; flex-direction: column; gap: 9px; padding: 4px 18px 18px; }
.alerta-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--fundo-2);
}
.alerta-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.alerta-texto strong {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.alerta-texto span { font-size: 11.5px; color: var(--texto-fraco); white-space: nowrap; }

.area-tabela .tabela { margin: 0; }

.medidor-centro.bom strong { color: var(--sucesso); }
.medidor-centro.medio strong { color: var(--atencao); }
.medidor-centro.ruim strong { color: var(--perigo); }

/* =====================================================================================
   Refino premium — a linguagem visual da referência, não só a composição.

   Três coisas separam um painel de administração de um produto desenhado, e nenhuma delas
   é a paleta (que já estava certa):

     1. o menu é uma trilha de ícones que abre no hover, e não uma coluna de texto;
     2. os cartões não têm borda visível — a separação vem de sombra difusa. Borda de 1px em
        tudo é o que dá aparência de tabela dentro de tabela;
     3. os gráficos têm grade pontilhada e o valor flutuando sobre o pico, em vez de só uma
        linha e um rótulo embaixo.
   ===================================================================================== */

/* ── 1. Trilha de ícones ────────────────────────────────────────────────────────────── */

@media (min-width: 981px) {
  /* No estado recolhido a barra continua ocupando a coluna de 80px, mas ao passar o mouse ela
     cresce por cima do conteúdo em vez de empurrá-lo. Empurrar reposicionaria a tabela inteira
     a cada passada de mouse — que é o tipo de movimento que faz a tela parecer instável. */
  .app.recolhido .barra {
    transition: width .16s ease, box-shadow .16s ease;
    overflow: hidden;
    position: relative;
    z-index: 30;
  }
  .app.recolhido .barra:hover {
    width: 226px;
    box-shadow: var(--sombra-alta);
    z-index: 60;
  }
  .app.recolhido .barra:hover .marca { justify-content: flex-start; }
  .app.recolhido .barra:hover .marca-texto { display: flex; }
  .app.recolhido .barra:hover .menu-rotulo { display: block; }
  .app.recolhido .barra:hover .contador { display: inline-block; }
  .app.recolhido .barra:hover .usuario-quem { display: flex; }
  .app.recolhido .barra:hover .menu button {
    justify-content: flex-start;
    padding: 11px 12px;
    gap: 11px;
  }
  .app.recolhido .barra:hover .usuario { flex-direction: row; gap: 10px; }
  .app.recolhido .barra:hover #sair { width: auto; padding-left: 12px; padding-right: 12px; }
}

/* ── 2. Superfície dos cartões ──────────────────────────────────────────────────────── */

/* A borda não some: ela vira um fio quase invisível. Removê-la de vez faria os cartões
   flutuarem sem limite em telas claras; mantê-la em #e8eaf0 desenha uma caixa. */
.cartao-painel,
.cartao,
.cartao-numero,
.barra,
.cartao-painel .cartao-painel {
  border-color: rgba(18, 20, 26, .055);
  box-shadow:
    0 1px 2px rgba(16, 24, 40, .04),
    0 12px 32px -20px rgba(16, 24, 40, .22);
}

.cartao-numero .cartao-valor {
  font-size: 34px;
  letter-spacing: -.045em;
}
.cartao-titulo strong { letter-spacing: -.015em; }

/* ── 3. Grade pontilhada dos gráficos ───────────────────────────────────────────────── */

.grafico-area-svg { overflow: visible; }
.grade-pontilhada { stroke: var(--borda); stroke-width: 1; stroke-dasharray: 2 5; opacity: .9; }
.grafico-marca { stroke: var(--texto-tenue); stroke-width: 1; stroke-dasharray: 3 4; opacity: .55; }

/* O balão do pico: fundo escuro, duas linhas, canto arredondado. É o elemento que a
   referência usa para dar leitura exata sem eixo — o olho vai direto nele. */
.grafico-balao {
  position: absolute;
  transform: translate(-50%, -100%);
  background: var(--texto);
  color: #fff;
  border-radius: 10px;
  padding: 7px 10px;
  font-size: 10.5px;
  line-height: 1.45;
  white-space: nowrap;
  box-shadow: 0 10px 24px -12px rgba(18, 20, 26, .8);
  pointer-events: none;
  z-index: 3;
}
.grafico-balao strong { display: block; font-size: 11.5px; font-weight: 650; }
.grafico-balao::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 8px;
  height: 8px;
  background: var(--texto);
  transform: translateX(-50%) rotate(45deg);
  border-radius: 1px;
}

/* ── 4. Medidor com marcações ───────────────────────────────────────────────────────── */

/* As marcações finas em volta do arco são o que faz o medidor parecer instrumento em vez de
   gráfico de rosca. São 48 traços, e cada um some quando o arco não chegou nele. */
.medidor-marcas { stroke: var(--borda-forte); stroke-width: 1.4; stroke-linecap: round; }
.medidor-marcas.acesa { stroke: var(--texto-tenue); opacity: .45; }

/* Caixa do tamanho exato do desenho: é o referencial do balão do pico. */
.grafico-caixa { position: relative; height: 150px; }
.grafico-caixa .grafico-area-svg { height: 150px; }

/* =====================================================================================
   Central de clima
   ===================================================================================== */

/* Faixa de risco. Vermelho só no topo, âmbar no moderado e verde no baixo: se tudo fosse
   colorido, a cor deixaria de ordenar a atenção — que é a única função dela aqui. */
.nivel-chip {
  display: inline-block;
  align-self: flex-start;
  margin-top: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: .02em;
  text-transform: capitalize;
  background: var(--fundo-2);
  color: var(--texto-fraco);
}
.nivel-chip.baixo    { background: var(--sucesso-fraca); color: var(--sucesso); }
.nivel-chip.moderado { background: var(--atencao-fraca); color: var(--atencao); }
.nivel-chip.alto     { background: var(--acento-fraca);  color: var(--acento); }
.nivel-chip.critico  { background: var(--perigo-fraca);  color: var(--perigo); }

/* Fatores que compõem o índice: cada linha mostra de onde veio o número. Um índice sem
   memória de cálculo é um palpite com duas casas decimais. */
.risco-fatores { display: flex; flex-direction: column; gap: 8px; padding: 0 18px 18px; }
.fator {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "rotulo peso" "detalhe peso";
  align-items: center;
  gap: 2px 10px;
  padding: 9px 11px;
  border-radius: 11px;
  background: var(--fundo-2);
}
.fator-rotulo { grid-area: rotulo; font-size: 12.5px; font-weight: 600; }
.fator-detalhe { grid-area: detalhe; font-size: 11px; color: var(--texto-fraco); }
.fator-peso {
  grid-area: peso;
  font-size: 12px;
  font-weight: 700;
  color: var(--acento);
  font-variant-numeric: tabular-nums;
}

/* Ação recomendada. O risco sem ação é informação que não muda decisão nenhuma. */
.risco-acao {
  font-size: 11.5px;
  color: var(--texto-fraco);
  margin-top: 2px;
  padding-left: 15px;
  border-left: 2px solid var(--borda-forte);
}
.risco-marca.baixo    { background: var(--sucesso); }
.risco-marca.moderado { background: var(--atencao); }
.risco-marca.alto     { background: var(--acento); }
.risco-marca.critico  { background: var(--perigo); }

/* ── Semana: barras por dia ────────────────────────────────────────────────────────── */

.semana-grade {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  padding: 4px 18px 18px;
}
.semana-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 4px 6px;
  border-radius: 12px;
}
.semana-col.hoje { background: var(--fundo-2); }
.semana-dia { font-size: 10.5px; font-weight: 600; color: var(--texto-fraco); text-transform: lowercase; }
.semana-icone { color: var(--texto-fraco); display: flex; }
.semana-icone svg { width: 16px; height: 16px; }
.semana-trilho {
  height: 76px;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.semana-barra {
  width: 60%;
  max-width: 26px;
  border-radius: 7px 7px 3px 3px;
  background: linear-gradient(180deg, var(--acento), var(--acento-fraca));
}
.semana-mm { font-size: 11.5px; font-weight: 650; font-variant-numeric: tabular-nums; }
.semana-temp { font-size: 10.5px; color: var(--texto-tenue); }

/* ── Comparativo entre regiões ─────────────────────────────────────────────────────── */

.comparativo { display: flex; flex-direction: column; gap: 12px; padding: 4px 18px 20px; }
.comparativo-linha {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr) 34px auto auto auto;
  align-items: center;
  gap: 12px;
}
.comparativo-nome { font-size: 12.5px; font-weight: 600; }
.comparativo-trilho { height: 9px; border-radius: 999px; background: var(--fundo-2); overflow: hidden; }
.comparativo-barra { height: 100%; border-radius: 999px; background: var(--texto-tenue); }
.comparativo-barra.baixo    { background: var(--sucesso); }
.comparativo-barra.moderado { background: var(--atencao); }
.comparativo-barra.alto     { background: var(--acento); }
.comparativo-barra.critico  { background: var(--perigo); }
.comparativo-valor {
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.comparativo-extra {
  font-size: 11px;
  color: var(--texto-tenue);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .comparativo-linha { grid-template-columns: 100px minmax(0, 1fr) 30px; }
  .comparativo-extra { display: none; }
  .semana-grade { gap: 4px; padding: 4px 10px 14px; }
  .semana-trilho { height: 56px; }
}

/* ── Central de avisos ─────────────────────────────────────────────────────────────── */

.lista-avisos { display: flex; flex-direction: column; gap: 12px; padding: 4px 18px 20px; }
.aviso-item {
  padding: 14px 16px;
  border-radius: 13px;
  background: var(--fundo-2);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.aviso-topo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.aviso-topo strong { font-size: 13px; }
.aviso-texto { font-size: 12.5px; color: var(--texto-fraco); line-height: 1.55; }
.aviso-acoes {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 2px;
}
/* A lacuna escrita onde ela está: é mais honesto do que um botão que não entrega nada. */
.aviso-falta { font-size: 11px; color: var(--texto-tenue); }

/* Faixas do medidor quando a escala é de risco (maior é pior). */
.medidor-centro.baixo    strong { color: var(--sucesso); }
.medidor-centro.moderado strong { color: var(--atencao); }
.medidor-centro.alto     strong { color: var(--acento); }
.medidor-centro.critico  strong { color: var(--perigo); }

/* =====================================================================================
   Mapa de calor
   ===================================================================================== */

.grupo-acoes { display: flex; gap: 6px; }

/* A matriz tem 24 colunas e não cabe em tela pequena sem espremer. Rolar na horizontal é
   melhor que reduzir a célula até ela virar um traço ilegível. */
.matriz-area { overflow-x: auto; padding: 4px 18px 6px; }

.matriz-calor { display: flex; flex-direction: column; gap: 3px; min-width: 560px; }
.matriz-linha {
  display: grid;
  grid-template-columns: 38px repeat(24, minmax(0, 1fr));
  gap: 3px;
  align-items: center;
}
.matriz-topo { margin-bottom: 2px; }
.matriz-rotulo {
  font-size: 10.5px;
  color: var(--texto-fraco);
  text-transform: lowercase;
  text-align: right;
  padding-right: 4px;
}
.matriz-hora {
  font-size: 9px;
  color: var(--texto-tenue);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.matriz-celula {
  aspect-ratio: 1;
  border-radius: 3px;
  background: transparent;
  /* Sem valor a célula é um contorno quase invisível: o vazio também é informação —
     mostra que naquela hora não abriu nada. */
  box-shadow: inset 0 0 0 1px rgba(18, 20, 26, .045);
  transition: transform .1s ease;
}
.matriz-celula:hover { transform: scale(1.35); }

.matriz-legenda {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 18px 18px;
  font-size: 10.5px;
  color: var(--texto-tenue);
  justify-content: flex-end;
}
.matriz-amostra { width: 14px; height: 9px; border-radius: 2px; }

/* ── Pontos quentes ────────────────────────────────────────────────────────────────── */

.pontos-quentes { display: flex; flex-direction: column; gap: 10px; padding: 4px 18px 20px; }
.ponto-linha {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 30px 118px auto;
  align-items: center;
  gap: 10px;
}
.ponto-ordem {
  font-size: 10.5px;
  color: var(--texto-tenue);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.ponto-trilho { height: 9px; border-radius: 999px; background: var(--fundo-2); overflow: hidden; }
.ponto-barra { height: 100%; border-radius: 999px; }
.ponto-total {
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.ponto-local {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--texto-tenue);
  white-space: nowrap;
}

@media (max-width: 900px) {
  .ponto-linha { grid-template-columns: 16px minmax(0, 1fr) 28px; }
  .ponto-local, .ponto-linha .chip { display: none; }
}

/* ── Camada de calor desenhada no canvas ───────────────────────────────────────────── */

/* O canvas entra no overlayPane do Leaflet e é redesenhado a cada movimento. `will-change`
   evita que o navegador recompõe a mancha a cada quadro do arrasto. */
.calor-canvas { will-change: transform; }

/* ── Relatório por categoria ───────────────────────────────────────────────────────── */

.relatorio-categorias { display: flex; flex-direction: column; gap: 12px; padding: 4px 18px 20px; }
.relatorio-linha { display: flex; align-items: center; gap: 12px; }
.relatorio-icone {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--cor, var(--texto-fraco));
  background: color-mix(in srgb, var(--cor, #6e7c8b) 13%, transparent);
}
.relatorio-icone svg { width: 17px; height: 17px; }
.relatorio-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.relatorio-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.relatorio-topo strong {
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.relatorio-numeros {
  font-size: 11.5px;
  color: var(--texto-fraco);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.relatorio-trilho { height: 6px; border-radius: 999px; background: var(--fundo-2); overflow: hidden; }
.relatorio-barra { height: 100%; border-radius: 999px; }

/* Mapa da aba de calor. Altura fixa porque o Leaflet precisa de um pai com altura
   resolvida: dentro de um flex sem altura ele desenha com 0 px e some. */
.mapa-calor-real {
  height: 420px;
  border-radius: 0 0 var(--raio) var(--raio);
  overflow: hidden;
  background: var(--fundo-2);
}
@media (max-width: 900px) { .mapa-calor-real { height: 280px; } }

/* ── Formulário de aviso ───────────────────────────────────────────────────────────── */

.aviso-form { display: flex; flex-direction: column; gap: 12px; padding: 4px 18px 18px; }
.aviso-form-linha { display: grid; grid-template-columns: 1.3fr 1.3fr 1.2fr .8fr; gap: 10px; }
.campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.campo-rotulo { font-size: 11px; color: var(--texto-fraco); font-weight: 600; }
.campo-entrada {
  font: inherit;
  font-size: 12.5px;
  padding: 9px 11px;
  border: 1px solid var(--borda);
  border-radius: 10px;
  background: var(--superficie);
  color: var(--texto);
  width: 100%;
}
.campo-entrada:focus { outline: 2px solid var(--marca); outline-offset: -1px; }
.campo-area { resize: vertical; min-height: 62px; line-height: 1.5; }
.aviso-form-acoes { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.aviso-selo {
  font-size: 10px;
  font-weight: 600;
  color: var(--texto-tenue);
  margin-left: auto;
  text-transform: lowercase;
}
.aviso-meta { font-size: 11px; color: var(--texto-tenue); }
.aviso-item.apagado { opacity: .55; }

@media (max-width: 900px) {
  .aviso-form-linha { grid-template-columns: 1fr 1fr; }
}

/* Título do bloco de histórico, dentro da Central de avisos. */
.historico-titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 18px 6px;
  border-top: 1px solid var(--borda);
  margin-top: 8px;
}
.historico-titulo strong { font-size: 13px; }

/* ── Ritmo da central ──────────────────────────────────────────────────────────────── */

.ritmo { display: flex; flex-direction: column; gap: 18px; padding: 4px 18px 20px; }

.ritmo-numeros {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.ritmo-numero {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 11px 13px;
  border-radius: 12px;
  background: var(--fundo-2);
}
.ritmo-numero strong { font-size: 19px; font-weight: 700; letter-spacing: -.03em; }
.ritmo-numero span { font-size: 11px; color: var(--texto-fraco); }

.ritmo-titulo { font-size: 11px; color: var(--texto-fraco); font-weight: 600; }

.ritmo-dias {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 120px;
  margin-top: 8px;
  overflow-x: auto;
}
.ritmo-dia {
  flex: 1 0 18px;
  min-width: 18px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 5px;
}
.ritmo-barra {
  width: 70%;
  max-width: 26px;
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, var(--acento), var(--acento-fraca));
  min-height: 4px;
}
.ritmo-rotulo { font-size: 9px; color: var(--texto-tenue); white-space: nowrap; }

.ritmo-horas {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 62px;
  margin-top: 8px;
}
.ritmo-hora {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: flex-end;
}
.ritmo-hora-barra {
  width: 100%;
  border-radius: 3px 3px 1px 1px;
  background: var(--dados-2);
  min-height: 3px;
}

@media (max-width: 900px) {
  .ritmo-numeros { grid-template-columns: 1fr 1fr; }
  .ritmo-dias { height: 90px; }
  .ritmo-rotulo { display: none; }
}

/* Camada de alerta prioritário: pulsa para ser vista com o canto do olho.
   A animação é lenta de propósito — piscar rápido cansa em 30 segundos e o operador
   deixa de olhar. Um ciclo de 1,6 s chama atenção sem virar estroboscópio. */
@keyframes pulso-alerta {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .55), var(--sombra-alta); }
  50%      { box-shadow: 0 0 0 10px rgba(220, 38, 38, 0), var(--sombra-alta); }
}
.alerta-camada .alerta-caixa,
.alerta-camada > div {
  animation: pulso-alerta 1.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .alerta-camada .alerta-caixa,
  .alerta-camada > div { animation: none; }
}