/* Painel de campo: Kanban e Mapa. Usa os tokens de painel.css.
   Três cores do chamado (card e pino): offline sem gerador, offline com gerador, técnico;
   observação (desistência) em âmbar. Ícones ⚡/🔧 além da cor, para não depender só dela. */
:root {
  /* Pinos e marcas sobre o mapa: o mapa é sempre claro, então não mudam com o tema. */
  /* Cores de sistema da Apple (HIG, variante clara): vermelho, verde, azul, índigo, laranja, cinza. */
  --pino-offline: #ff3b30;
  --pino-online: #34c759;
  --pino-tecnico: #007aff;
  --pino-gerador: #5856d6;
  --pino-alerta: #ff9500;
  --pino-sem-vpn: #8e8e93;
  --sobre-pino: #ffffff;
  --campo-equipe: #00796b;
  --campo-local: #2e7d32;
  --campo-offline: #c62828;
  --campo-gerador: #6a3fb5;
  --campo-tecnico: #1565c0;
  --campo-presenca: #00838f;
  --campo-tatico: #ad1457;
  --campo-obs: #b26a00;
  --campo-obs-fundo: #fff3d6;
  /* Prioridade: cores vivas do sistema da Apple (red, orange, yellow), variante clara. */
  --prio-urgente: #ff3b30;
  --prio-critico: #ff9500;
  --prio-prioritario: #ffcc00;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --campo-offline: #ff6b6b;
    --campo-gerador: #b49cff;
    --campo-tecnico: #6cb4ff;
    --campo-presenca: #4dd0e1;
    --campo-tatico: #f48fb1;
    --campo-obs: #f0b54a;
    --campo-obs-fundo: #3d2e0c;
    --campo-equipe: #4db6ac;
    --campo-local: #66bb6a;
    --prio-urgente: #ff453a;
    --prio-critico: #ff9f0a;
    --prio-prioritario: #ffd60a;
  }
}
:root[data-theme="dark"], body.tv {
  --prio-urgente: #ff453a;
  --prio-critico: #ff9f0a;
  --prio-prioritario: #ffd60a;
  --campo-offline: #ff6b6b;
  --campo-gerador: #b49cff;
  --campo-tecnico: #6cb4ff;
  --campo-presenca: #4dd0e1;
  --campo-tatico: #f48fb1;
  --campo-obs: #f0b54a;
  --campo-obs-fundo: #3d2e0c;
  --campo-equipe: #4db6ac;
  --campo-local: #66bb6a;
}

[hidden] { display: none !important; }

.topo-campo { flex-wrap: wrap; position: sticky; top: 0; z-index: 30; }
.abas { display: flex; gap: 4px; }
.abas button {
  padding: 6px 14px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--superficie-2);
  font-weight: 600;
  cursor: pointer;
}
.abas button[aria-selected="true"] { background: var(--destaque); border-color: var(--destaque); color: var(--superficie); }
.acoes-topo { display: flex; gap: 6px; flex-wrap: wrap; }
.acoes-topo button, .botoes-linha button, .botao, .card .acoes-campo button, .ger .acoes-campo button {
  padding: 6px 10px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--superficie);
  cursor: pointer;
  text-decoration: none;
  color: var(--texto);
  font-size: var(--t-1);
}
.card .acoes-campo button.primario, .ger .acoes-campo button.primario { background: var(--destaque); border-color: var(--destaque); color: var(--superficie); }
.card .acoes-campo button.discreto, .ger .acoes-campo button.discreto { background: none; color: var(--texto-2); }
button.perigo { color: var(--perigo); }

#kanban { padding: 12px 16px 24px; }

/* Faixa No gerador */
.faixa-gerador { margin-bottom: 12px; }
.faixa-gerador h2, .coluna-campo h2 {
  margin: 0 0 8px;
  font-size: var(--t-1);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--texto-2);
  display: flex;
  align-items: center;
  gap: 6px;
}
.lista-ger { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.ger {
  padding: 8px 10px;
  border: 1px solid var(--borda);
  border-left: 4px solid var(--campo-gerador);
  border-radius: var(--raio);
  background: var(--superficie);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ger.nivel-atencao { border-left-color: var(--atencao); background: color-mix(in srgb, var(--atencao) 14%, var(--superficie)); }
.ger.nivel-vencido { border-left-color: var(--critico); background: color-mix(in srgb, var(--critico) 18%, var(--superficie)); }
.ger.nivel-vencido strong { color: var(--critico); }

/* Colunas: no celular, rolagem lateral com uma coluna por tela */
.colunas-campo {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 1fr);
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
}
@media (max-width: 700px) {
  .colunas-campo { grid-auto-columns: 86vw; }
  #kanban { padding: 10px 10px 24px; }
}
.coluna-campo { scroll-snap-align: start; min-width: 0; }
.cards { display: flex; flex-direction: column; gap: 8px; }

.card {
  padding: 8px 10px;
  border: 1px solid var(--borda);
  --cor-card: var(--campo-offline);
  border-left: 4px solid var(--cor-card);
  border-radius: var(--raio);
  background: var(--superficie);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.card.cor-gerador { --cor-card: var(--campo-gerador); }
.card.cor-tecnico { --cor-card: var(--campo-tecnico); }
.card.com-obs { box-shadow: inset 0 0 0 2px var(--campo-obs); }
.card.feito { opacity: 0.65; }
.etapa-online .card { border-left-style: dashed; }
.card header { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.cod { font-family: var(--fonte-nome); font-weight: 600; font-size: var(--t-3); font-variant-numeric: tabular-nums; }
.nm { font-family: var(--fonte-nome); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.ic { flex: none; }
.tempo { font-size: var(--t-1); color: var(--texto-2); font-variant-numeric: tabular-nums; }
.problema { font-size: var(--t-1); }
.obs {
  padding: 4px 6px;
  border-radius: var(--raio);
  background: var(--campo-obs-fundo);
  color: var(--texto);
  font-size: var(--t-1);
}
.obs .sub, .sub { color: var(--texto-2); font-size: var(--t-0); }
.resp { font-size: var(--t-1); font-weight: 600; }
.no-ger { font-size: var(--t-0); color: var(--campo-gerador); font-weight: 600; }
.cidade { font-size: var(--t-0); color: var(--texto-2); }
.card .acoes-campo, .ger .acoes-campo { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }

/* Mapa */
.mapa { position: relative; height: 100%; }
.mapa-area { position: absolute; inset: 0; }
.mapa-lateral {
  position: absolute; top: 10px; right: 10px; z-index: 500; max-width: 260px;
  padding: 8px 10px; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
}
.mapa-lateral h3 { margin: 0 0 4px; font-size: var(--t-1); }
.mapa-lateral ul { margin: 0; padding-left: 16px; font-size: var(--t-1); }
.legenda {
  position: absolute; left: 10px; bottom: 22px; z-index: 500; display: flex; gap: 10px; flex-wrap: wrap;
  padding: 6px 10px; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); font-size: var(--t-0);
}
.bola { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: -1px; }
.bola.cor-offline { background: var(--campo-offline); }
.bola.cor-gerador { background: var(--campo-gerador); }
.bola.cor-tecnico { background: var(--campo-tecnico); }
/* Marcador do mapa: gota com a ponta na coordenada; rótulo (código, nome, quem está) logo abaixo. */
.marcador { position: relative; width: 0; height: 0; }
.marcador.apagado { opacity: 0.55; }
.pino {
  position: absolute; left: -13px; top: -31px; width: 26px; height: 26px;
  border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  display: grid; place-items: center;
  border: 2px solid var(--sobre-pino);
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.35);
}
.pino .ico { transform: rotate(45deg); }
.marcador .rot {
  position: absolute; top: 4px; left: 0; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  width: max-content; max-width: 160px; padding: 2px 6px; border-radius: 4px;
  background: color-mix(in srgb, var(--balao-fundo) 92%, transparent); color: var(--balao-texto);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.25);
  font: 500 11px/1.25 var(--fonte-texto); font-variant-numeric: tabular-nums; text-align: center;
}
.marcador .rot-1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 148px; }
.marcador .rot-2 { color: color-mix(in srgb, var(--balao-texto) 70%, transparent); white-space: nowrap; }
.marcador .q-local { color: var(--balao-local); }
.marcador .q-indo { color: var(--balao-destaque); }
.pino.cor-offline { background: var(--pino-offline); }
.pino.cor-gerador { background: var(--pino-gerador); }
.pino.cor-tecnico, .grupo.cor-tecnico { background: var(--pino-tecnico); }
.pino.cor-online, .grupo.cor-online { background: var(--pino-online); }
.pino.cor-sem_vpn, .grupo.cor-sem_vpn { background: var(--pino-sem-vpn); }
/* Balão do pino por tema: cabeçalho, uma linha por tema (ícone e cor do trilho · estado · próximo passo), rodapé.
   O balão é sempre claro: os tokens de texto do trilho são trazidos para as cores do balão. */
.balao {
  --texto: var(--balao-texto); --texto-2: #5b6878; --campo-local: var(--balao-local); --superficie: var(--balao-fundo); --superficie-2: #eef2f6; --borda: var(--balao-borda);
  display: flex; flex-direction: column; gap: 10px; min-width: 0; color: var(--balao-texto); font: 400 13px/1.35 var(--fonte-texto);
}
.balao header { display: flex; align-items: center; gap: 8px; min-width: 0; }
.balao header .cod { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.balao header .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: var(--texto-2); }
.balao .sub { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: -4px; font-size: 12px; color: var(--texto-2); }
.balao .chip { padding: 2px 8px; border-radius: 999px; background: var(--superficie-2); color: var(--texto-2); font-weight: 600; }
.balao .chip.off { background: color-mix(in srgb, var(--prio-urgente) 14%, transparent); color: var(--balao-perigo); }
.balao .chip.on { background: color-mix(in srgb, var(--balao-local) 14%, transparent); color: var(--balao-local); }
.balao .chip.func { background: color-mix(in srgb, var(--prio-critico) 16%, transparent); color: #a35a00; }
.balao .temas { display: flex; flex-direction: column; border: 1px solid var(--balao-borda); border-radius: 10px; overflow: hidden; }
.balao .tema { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 10px; }
.balao .tema + .tema { border-top: 1px solid var(--balao-borda); }
.balao .tema .ic { position: relative; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: none; }
.balao .tema .ic .ico { width: 18px; height: 18px; color: var(--cor-slot); }
.balao .tema button.ic { cursor: pointer; }
.balao .tema button.ic:hover, .balao .tema button.ic[aria-expanded="true"] { background: var(--superficie-2); }
.balao .tema .ic.cheio.laranja { background: var(--prio-critico); }
.balao .tema .ic.cheio.vermelho { background: var(--prio-urgente); }
.balao .tema .ic.cheio .ico { color: #fff; animation: none; }
.balao .tema .ic.cheio.vermelho { animation: slot-pisca 1.2s ease-in-out infinite; }
.balao .tema .ic .ger-auto { right: -3px; bottom: -3px; }
.balao .tema-txt { min-width: 0; }
.balao .tema-txt b { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--texto-2); }
.balao .tema-txt span { display: block; font-weight: 500; overflow-wrap: anywhere; }
.balao .tema > button:not(.ic) {
  min-height: 36px; padding: 0 12px; border: 1px solid var(--balao-borda); border-radius: 8px; background: var(--balao-fundo);
  color: var(--balao-destaque); font: 600 13px var(--fonte-texto); white-space: nowrap; cursor: pointer;
}
.balao .tema > button.cheio { background: var(--balao-destaque); border-color: var(--balao-destaque); color: var(--balao-fundo); }
.balao .tema > button:not(.ic):active { filter: brightness(0.92); }
.balao footer { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--texto-2); }
.balao footer .rotas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.balao footer .rota {
  display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; border: 1px solid var(--balao-borda); border-radius: 10px;
  background: var(--balao-fundo); color: var(--balao-destaque); font: 600 14px var(--fonte-texto); text-decoration: none;
}
.balao footer .rota .ico { width: 16px; height: 16px; }
.balao footer .rota:active { background: var(--superficie-2); }
.balao footer .balao-acoes { margin: 0; gap: 12px; }
.balao footer .balao-acoes button { min-height: 32px; padding: 0; border: 0; background: none; color: var(--texto-2); font: 500 12px var(--fonte-texto); text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .balao .tema .ic.cheio.vermelho { animation: none; } }
.leaflet-container { font-family: var(--fonte-texto); }

/* Diálogos */
.papeis { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0 16px; }
.papeis legend { font-size: var(--t-0); color: var(--texto-2); text-transform: uppercase; margin-bottom: 4px; }
.papeis label { text-transform: none; font-size: var(--t-2); color: var(--texto); }
.dialogo textarea {
  font: inherit; color: var(--texto); background: var(--superficie-2);
  border: 1px solid var(--borda); border-radius: var(--raio); padding: 8px;
}
.dialogo-largo { min-width: min(560px, 90vw); }
.linha-gerar { display: flex; gap: 6px; }
.linha-gerar input { flex: 1; }
.links-novo { display: flex; flex-direction: column; gap: 6px; padding: 8px; background: var(--superficie-2); border-radius: var(--raio); }
.links-lista, .log-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow: auto; }
.links-lista li { display: flex; justify-content: space-between; gap: 8px; align-items: center; flex-wrap: wrap; }
.links-lista li > div:first-child { display: flex; flex-direction: column; }
.botoes-linha { display: flex; gap: 6px; flex-wrap: wrap; }
.log-lista li { font-size: var(--t-1); }
.log-lista .quando { color: var(--texto-2); font-variant-numeric: tabular-nums; margin-right: 6px; }

#id-campo-nome, #novo-campo-problema { display: flex; flex-direction: column; gap: 4px; }
/* Abertura de card (técnico, presencial, tático, gerador): largura fixa e um campo por linha, rótulo em cima;
   os blocos de cada tipo seguem a mesma coluna. Rola dentro da janela quando não cabe. */
dialog#novo { width: 100%; max-width: min(480px, calc(100vw - 20px)); }
#novo .dialogo { max-height: calc(100dvh - 40px); overflow-y: auto; box-sizing: border-box; }
#novo-campo-prioridade, #novo-campo-presencial, #novo-campo-card, #novo-campo-horario, #novo-campo-tatico, #novo-campo-problema {
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
#novo-campo-presencial, #novo-campo-card { gap: 4px; }
#novo .dialogo label:not(.novo-horas label) { margin-top: 6px; }
#novo .dialogo input:not([type="radio"]):not([type="checkbox"]), #novo .dialogo select, #novo .dialogo textarea { width: 100%; box-sizing: border-box; min-width: 0; }
#novo .dialogo textarea { resize: vertical; }
#novo #novo-codigo { max-width: 10ch; }
#novo #novo-cond { margin-top: -2px; }
.dialogo input[type="radio"] { width: auto; }

.etapa-offline > h2 { color: var(--campo-offline); }
.etapa-tecnico > h2 { color: var(--campo-tecnico); }

/* Atalhos de coluna: só no celular, onde as colunas rolam de lado */
.saltos { display: none; }

@media (max-width: 700px) {
  .topo-campo { padding: 8px 10px; gap: 8px; }
  .abas { width: 100%; }
  .abas button { flex: 1; padding: 10px; font-size: var(--t-2); }
  .topo-campo .topo-acoes { width: 100%; flex-wrap: wrap; justify-content: space-between; }
  .acoes-topo { width: 100%; }
  .acoes-topo button { flex: 1; min-height: 42px; font-size: var(--t-1); }
  #quem { font-size: var(--t-0); }

  .saltos {
    display: flex; gap: 6px; overflow-x: auto; margin: 0 -10px 10px; padding: 0 10px 2px;
    position: sticky; top: 0; z-index: 20; background: var(--fundo); padding-top: 6px;
  }
  .salto {
    flex: none; padding: 8px 10px; border: 1px solid var(--borda); border-radius: 18px;
    background: var(--superficie); font-size: var(--t-1); font-weight: 600; white-space: nowrap;
  }
  .salto.etapa-offline { border-color: var(--campo-offline); }
  .salto.etapa-tecnico { border-color: var(--campo-tecnico); }

  .colunas-campo { grid-auto-columns: calc(100vw - 28px); gap: 8px; }
  .coluna-campo { scroll-margin-left: 10px; }
  .nm { white-space: normal; }
  .card { padding: 10px 12px; gap: 6px; }
  .card .acoes-campo button, .ger .acoes-campo button { min-height: 44px; padding: 8px 14px; font-size: var(--t-2); flex: 1 1 auto; }
  .card .acoes-campo button.discreto { flex: 0 1 auto; }
  .lista-ger { grid-template-columns: 1fr; }

  .legenda { left: 6px; right: 6px; bottom: 18px; gap: 8px; }
  .mapa-lateral { left: 6px; right: 6px; top: auto; bottom: 56px; max-width: none; font-size: var(--t-0); }

  dialog { width: calc(100vw - 20px); max-width: none; margin: auto; }
  .dialogo-largo { min-width: 0; }
  .linha-gerar { flex-direction: column; }
  .dialogo input, .dialogo textarea, .linha-gerar input { font-size: 16px; min-height: 44px; } /* 16px: iOS não dá zoom */
  .dialogo .botoes button, .botoes-linha button, .botao { min-height: 44px; }
  .papeis label { padding: 8px 0; }
}

#id-campo-escolha { display: flex; flex-direction: column; gap: 4px; }
.dialogo select, .linha-gerar select {
  font: inherit; color: var(--texto); background: var(--superficie-2);
  border: 1px solid var(--borda); border-radius: var(--raio); padding: 8px; min-height: 40px;
}
@media (max-width: 700px) { .dialogo select, .linha-gerar select { font-size: 16px; min-height: 44px; } }

/* Localização da equipe */
/* Desligado: botão grande no meio de baixo (convite). Ligado: pílula pequena no canto direito. */
.btn-local {
  position: absolute; z-index: 600; left: 50%; transform: translateX(-50%); bottom: 64px;
  padding: 14px 22px; min-height: 52px; border-radius: 26px; border: 2px solid var(--campo-equipe);
  background: var(--campo-equipe); color: var(--sobre-pino); font-weight: 700; font-size: var(--t-2);
  box-shadow: 0 3px 12px rgb(0 0 0 / 0.35); cursor: pointer;
}
.btn-local.ativo {
  left: auto; right: 10px; transform: none; bottom: 64px;
  padding: 6px 10px; min-height: 0; font-size: var(--t-0); font-weight: 600;
  background: var(--superficie); color: var(--campo-equipe); border-width: 1px;
}
.pessoa { transform: translate(-50%, -50%); display: flex; align-items: center; gap: 4px; width: max-content; }
.pessoa b {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--campo-equipe); color: var(--sobre-pino); font: 700 11px/1 var(--fonte-texto); border: 2px solid var(--sobre-pino); box-shadow: 0 1px 4px rgb(0 0 0 / 0.4);
}
.pessoa.eu b { background: var(--balao-texto); }
.pessoa span {
  padding: 1px 5px; border-radius: 4px; background: color-mix(in srgb, var(--balao-fundo) 90%, transparent); color: var(--balao-texto);
  font: 600 11px/1.3 var(--fonte-texto); box-shadow: 0 1px 3px rgb(0 0 0 / 0.25);
}
.bola.pessoa-bola { background: var(--campo-equipe); }
.balao .perto { color: var(--campo-equipe); font-weight: 600; }
.balao-acoes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0; }
.balao-acoes button {
  padding: 8px 12px; min-height: 40px; border: 1px solid var(--balao-borda); border-radius: 3px; background: var(--balao-fundo); color: var(--balao-texto); font: 600 14px var(--fonte-texto); cursor: pointer;
}
.balao-acoes button.primario { background: var(--balao-destaque); border-color: var(--balao-destaque); color: var(--balao-fundo); }
@media (max-width: 700px) {
  .btn-local { bottom: 92px; width: calc(100% - 24px); }
  .btn-local.ativo { width: auto; bottom: 92px; }
}

.grupo {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  color: var(--sobre-pino); font: 700 14px/1 var(--fonte-texto); border: 3px solid var(--sobre-pino); box-shadow: 0 1px 6px rgb(0 0 0 / 0.4);
}
.grupo.cor-offline { background: var(--pino-offline); }
.grupo.cor-gerador { background: var(--pino-gerador); }

.etapa-funcionando > h2 { color: var(--ok); }
.etapa-funcionando .card { border-left-style: dotted; }

.agindo { display: flex; align-items: center; gap: 6px; font-size: var(--t-0); color: var(--texto-2); }
.agindo select {
  font: inherit; font-size: var(--t-1); color: var(--texto); background: var(--superficie-2);
  border: 1px solid var(--borda); border-radius: var(--raio); padding: 4px 6px; max-width: 220px;
}
.agindo.ativo select { border-color: var(--campo-obs); background: var(--campo-obs-fundo); font-weight: 600; }
@media (max-width: 700px) {
  .agindo { width: 100%; }
  .agindo select { flex: 1; max-width: none; min-height: 40px; font-size: 16px; }
  .mapa-lateral { bottom: 150px; }
}
.papeis label { display: flex; align-items: center; gap: 6px; }
.papeis input[type="radio"] { width: 18px; height: 18px; min-height: 0; margin: 0; }

/* painel.css trava a rolagem do body em telas largas (>= 900px): aqui o conteúdo rola dentro de #conteudo. */
body.campo { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
body.campo > .topo-campo, body.campo > .offline { flex: none; }
body.campo > #conteudo { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }

.mapa-botoes { position: absolute; z-index: 600; top: 10px; left: 56px; right: 10px; display: flex; gap: 6px; flex-wrap: wrap; pointer-events: none; }
.btn-mapa {
  pointer-events: auto;
  padding: 8px 12px; min-height: 36px; border-radius: 18px; border: 1px solid var(--borda);
  background: var(--superficie); color: var(--texto); font-weight: 600; font-size: var(--t-1);
  box-shadow: 0 1px 5px rgb(0 0 0 / 0.2); cursor: pointer;
}
.btn-mapa.ativo { background: var(--campo-obs-fundo); border-color: var(--campo-obs); }
/* Filtro do mapa: modal com um estado por linha (marcar, cor, nome, quantidade, "Só este"). */
.filtro-lista { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 8px; }
.linha-filtro { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--borda); }
.linha-filtro:last-child { border-bottom: 0; }
.linha-filtro label { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 10px 2px; font-size: var(--t-1); cursor: pointer; }
.linha-filtro input { width: 20px; height: 20px; margin: 0; flex: none; }
.linha-filtro .contador { margin-left: auto; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.linha-filtro button { flex: none; min-height: 36px; padding: 4px 10px; border: 0; background: none; color: var(--destaque); font-size: var(--t-0); font-weight: 600; cursor: pointer; }

/* Pino com alguém no local: contorno verde grosso; a caminho: contorno tracejado */
.grupo.no-local { border-color: var(--campo-local); box-shadow: 0 0 0 3px color-mix(in srgb, var(--campo-local) 40%, transparent), 0 1px 6px rgb(0 0 0 / 0.4); }

/* Meus chamados: só no celular (no computador as colunas já aparecem todas) */
.meus { display: none; }
.card.meu { outline: 2px solid var(--destaque); outline-offset: -1px; }
@media (max-width: 700px) {
  .meus { display: block; margin-bottom: 12px; padding: 8px; border-radius: var(--raio); background: color-mix(in srgb, var(--destaque) 10%, var(--fundo)); }
  .meus h2 { margin: 0 0 8px; font-size: var(--t-1); text-transform: uppercase; letter-spacing: 0.03em; color: var(--destaque); display: flex; gap: 6px; align-items: center; }
}


/* Card compacto em todas as larguras: o resumo dá para bater o olho e o detalhe abre no toque.
   Computador/TV: duas linhas (código · nome · ícones / tempo · responsável · próxima etapa).
   Celular: uma linha só (código · nome · ícones · tempo curto · próxima etapa). */
:root { --balao-borda: #c9d1db; --balao-texto: #1a2430; --balao-destaque: #2c5a8a; --balao-fundo: #ffffff; --balao-perigo: #c62828; --balao-local: #2e7d32; }
.card { padding: 0; gap: 0; border-radius: var(--raio); }
.compacto {
  display: grid; align-items: center; gap: 2px 8px; padding: 7px 8px 7px 10px; cursor: pointer;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "cod nome marcas" "linha linha botao";
}
.compacto .cod { grid-area: cod; font-size: var(--t-2); line-height: 1.1; }
.compacto .nm-curto {
  grid-area: nome; min-width: 0; font-family: var(--fonte-nome); font-weight: 500; font-size: var(--t-1); line-height: 1.2;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}
.compacto .marcas { grid-area: marcas; display: flex; gap: 4px; align-items: center; color: var(--texto-2); }
.compacto .t-curto { display: none; }
.compacto .t-linha { grid-area: linha; font-size: var(--t-0); color: var(--texto-2); font-variant-numeric: tabular-nums; min-width: 0; }
.compacto .t-linha b { color: var(--texto); font-weight: 600; }
.compacto button {
  grid-area: botao; min-height: 32px; padding: 4px 10px; border-radius: var(--raio); border: 1px solid var(--destaque);
  background: var(--destaque); color: var(--superficie); font-weight: 600; font-size: var(--t-0); cursor: pointer;
}
.compacto button:hover { filter: brightness(1.08); }
.compacto .ini {
  display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: var(--superficie-2); border: 1px solid var(--borda); font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--texto);
}
.card .detalhe { display: none; padding: 8px 10px 10px; flex-direction: column; gap: 6px; border-top: 1px solid var(--borda); }
.card.aberto .detalhe { display: flex; }
.card.aberto .compacto { background: var(--superficie-2); }
.card .detalhe > header .cod { display: none; }
.card .detalhe > header .ic { display: none; }
.card .detalhe > header .nm { white-space: normal; }
.cards { gap: 6px; }
.coluna-campo h2 { position: sticky; top: 0; background: var(--fundo); padding: 4px 0; z-index: 1; }

.ico { width: 15px; height: 15px; flex: none; vertical-align: -2px; }
.ico-raio { color: var(--campo-gerador); }
.ico-chave { color: var(--campo-tecnico); }
.ico-alerta { color: var(--campo-obs); }
.ico-pino { color: var(--campo-local); }
.pino .ico { width: 13px; height: 13px; color: var(--sobre-pino); }
.btn-local .ico { color: currentColor; width: 18px; height: 18px; margin-right: 4px; }
.legenda .ico { width: 12px; height: 12px; margin-right: 3px; color: var(--texto-2); }
.obs .ico, .no-ger .ico { color: inherit; }

@media (max-width: 700px) {
  .compacto {
    min-height: 50px; padding: 6px 8px 6px 10px;
    grid-template-columns: auto minmax(0, 1fr) auto auto auto;
    grid-template-areas: "cod nome marcas tempo botao";
  }
  .compacto .t-linha { display: none; }
  .compacto .t-curto { display: block; grid-area: tempo; font-size: var(--t-0); color: var(--texto-2); font-variant-numeric: tabular-nums; }
  .compacto button { min-height: 40px; padding: 6px 12px; font-size: var(--t-1); }
}

/* Computador: as colunas dividem a largura (sem rolagem lateral até ~1200 px). */
@media (min-width: 701px) {
  .colunas-campo { grid-auto-flow: row; grid-template-columns: var(--cols); overflow-x: visible; }
  .coluna-campo.vazia h2 { color: var(--texto-2); }
  .compacto .nm-curto { -webkit-line-clamp: 3; }
}

/* Faixa No gerador: mesma linha compacta dos cards */
.lista-ger { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 6px; }
.ger {
  display: grid; align-items: center; gap: 2px 8px; padding: 6px 8px 6px 10px; border-radius: var(--raio);
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "cod nome acoes" "tempo tempo acoes";
}
.ger .cod { grid-area: cod; font-size: var(--t-2); }
.ger .nm-curto { grid-area: nome; min-width: 0; font-family: var(--fonte-nome); font-weight: 500; font-size: var(--t-1); overflow-wrap: anywhere; }
.ger .ger-tempo { grid-area: tempo; font-size: var(--t-0); color: var(--texto-2); font-variant-numeric: tabular-nums; }
.ger .ger-acoes { grid-area: acoes; display: flex; gap: 4px; }
.ger .ger-acoes button, .ger .ger-acoes a {
  min-height: 34px; padding: 4px 10px; border-radius: var(--raio); border: 1px solid var(--borda);
  background: var(--superficie); color: var(--texto); font-size: var(--t-0); font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
}
.ger .ger-acoes button.primario, .ger .ger-acoes a.primario { background: var(--destaque); border-color: var(--destaque); color: var(--superficie); }
@media (max-width: 700px) {
  .lista-ger { grid-template-columns: 1fr; }
  .ger .ger-acoes button, .ger .ger-acoes a { min-height: 40px; font-size: var(--t-1); }
}
.coluna-campo.vazia h2 { flex-wrap: wrap; font-size: var(--t-0); }

/* No local com a VPN de volta: o card fica na coluna, em verde, até quem está lá concluir. */
.card.vpn-ok { --cor-card: var(--ok); background: color-mix(in srgb, var(--ok) 9%, var(--superficie)); }
.card.vpn-ok .t-curto, .card.vpn-ok .t-linha, .card.vpn-ok .tempo { color: var(--ok); }

/* Equipe: formulário em grade (nome, telefone, papel, botão) e lista com telefone discreto */
dialog:has(.dialogo-largo) { max-width: min(640px, calc(100vw - 32px)); width: 100%; }
.dialogo-largo { min-width: 0; }
.equipe-form { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) auto auto; gap: 6px; align-items: stretch; }
.equipe-form input, .equipe-form select { min-width: 0; }
.eq-lista li { padding: 6px 0; border-bottom: 1px solid var(--borda); flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 4px; }
.eq-lista li.vazio { border-bottom: 0; }
#equipe-lista li.editando { background: var(--superficie-2); }
.eq-lista { max-height: none; overflow: visible; }
.eq-lista li > .eq-linha { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 8px; }
/* Link da pessoa: selos (vínculo, alcance), estado e ações numa linha só, que quebra se faltar espaço */
.eq-link-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.eq-link-linha .botoes-linha { margin-left: auto; }
.eq-link-linha .botoes-linha button { padding: 4px 8px; font-size: var(--t-0); }
.eq-selo { padding: 1px 6px; border: 1px solid var(--borda); border-radius: var(--raio); font-size: var(--t-0); color: var(--texto-2); background: var(--superficie-2); }
.eq-selo-resp { border-color: var(--destaque); color: var(--destaque); }
.eq-estado { font-variant-numeric: tabular-nums; }
.eq-vencido { font-size: var(--t-0); font-weight: 600; color: var(--perigo); }
.eq-link { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; background: var(--superficie-2); border-radius: var(--raio); }
.eq-link select { flex: 1 1 140px; min-width: 0; }
.eq-branco { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.eq-branco #branco-form-lugar { align-self: stretch; }
#branco-secao h3 { margin: 8px 0 2px; font-size: var(--t-1); }
#btn-branco[aria-expanded="true"], .eq-link-linha button[aria-expanded="true"] { border-color: var(--destaque); color: var(--destaque); }
.eq-pessoa { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; }
.eq-botoes { display: flex; gap: 4px; flex: none; }
.eq-botoes button { padding: 4px 8px; font-size: var(--t-0); }
a.tel { font-size: var(--t-0); color: var(--texto-2); font-variant-numeric: tabular-nums; text-decoration: none; margin-left: 6px; }
a.tel::before { content: "tel "; opacity: 0.7; }
a.tel:hover, a.tel:focus-visible { color: var(--destaque); text-decoration: underline; }
@media (max-width: 700px) {
  .equipe-form { grid-template-columns: 1fr 1fr; }
  .equipe-form input#equipe-nome { grid-column: 1 / -1; }
  .equipe-form button { grid-column: 1 / -1; }
  .eq-lista li > .eq-linha { flex-wrap: wrap; }
  .eq-link-linha .botoes-linha { margin-left: 0; width: 100%; }
  .eq-link-linha .botoes-linha button { min-height: 44px; flex: 1; }
}

/* Equipe (2026-11-05): topo com total e fechar; busca, + Pessoa e Link em branco; filtro por papel;
   lista agrupada por papel, um botão por pessoa (Gerar link / Link) e o ⋯; painel do link embaixo da linha. */
.eqn { display: flex; flex-direction: column; gap: 12px; }
.eqn-topo { display: flex; align-items: center; gap: 8px; }
.eqn-topo h2 { margin: 0; }
.eqn-n { color: var(--texto-2); font-weight: 500; font-variant-numeric: tabular-nums; }
.eqn-fechar { margin-left: auto; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: var(--superficie-2); color: var(--texto-2); cursor: pointer; }
.eqn-fechar .ico { width: 18px; height: 18px; }
.eqn-barra { display: flex; flex-wrap: wrap; gap: 8px; }
.eqn-barra input { flex: 1 1 180px; min-width: 0; min-height: 36px; }
/* Cores por variável: a regra base é a mais específica, cheio/perigo/aberto/menu só trocam as variáveis. */
.eqn button:not(.eqn-fechar):not(.eqn-mais):not([data-eqfiltro]) {
  min-height: 36px; padding: 0 12px; border: 1px solid var(--eqn-borda, var(--borda)); border-radius: 8px; background: var(--eqn-fundo, var(--superficie));
  color: var(--eqn-cor, var(--destaque)); font: 600 var(--t-0) var(--fonte-texto); text-transform: none; letter-spacing: 0; cursor: pointer; white-space: nowrap;
}
.eqn button.cheio { --eqn-fundo: var(--destaque); --eqn-borda: var(--destaque); --eqn-cor: var(--superficie); }
.eqn button.perigo { --eqn-cor: var(--perigo); }
.eqn button:not(.cheio)[aria-expanded="true"] { --eqn-borda: var(--destaque); --eqn-fundo: color-mix(in srgb, var(--destaque) 10%, var(--superficie)); }
.eqn-menu button { --eqn-borda: transparent; --eqn-fundo: transparent; --eqn-cor: var(--texto); }
.eqn-menu button.perigo { --eqn-cor: var(--perigo); }
.eqn button:active { filter: brightness(0.94); }
.eqn button:focus-visible { outline: 2px solid var(--destaque); outline-offset: 2px; }
.eqn .equipe-form { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) auto; gap: 8px; padding: 12px; border-radius: 10px; background: var(--superficie-2); }
.eqn .equipe-form[hidden] { display: none; }
.eqn-form-fim { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; }
.eqn-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 2px; border-radius: 9px; background: var(--superficie-2); align-self: flex-start; }
.eqn-seg button, .eqn-seg label span {
  display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border: 0; border-radius: 7px; background: none;
  color: var(--texto); font: 500 var(--t-0) var(--fonte-texto); cursor: pointer;
}
.eqn-seg .c { margin-left: 5px; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.eqn-seg button[aria-pressed="true"], .eqn-seg input:checked + span { background: var(--superficie); box-shadow: 0 1px 3px rgb(0 0 0 / 0.18); font-weight: 600; }
.eqn-seg label { position: relative; display: inline-flex; margin: 0; padding: 0; border: 0; background: none; text-transform: none; letter-spacing: 0; }
.eqn-seg label span { text-transform: none; letter-spacing: 0; }
.eqn-lin .eqn-seg { justify-self: start; }
.eqn-seg input { position: absolute; opacity: 0; pointer-events: none; }
.eqn-seg input:focus-visible + span { outline: 2px solid var(--destaque); outline-offset: 1px; }
.eqn-painel .eqn-seg { background: var(--superficie); }
.eqn-painel .eqn-seg input:checked + span { background: var(--superficie-2); box-shadow: inset 0 0 0 1px var(--borda); }
.eqn-grupos { display: flex; flex-direction: column; gap: 6px; }
.eqn-grupo { margin: 6px 0 0; font: 600 11px var(--fonte-texto); letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-2); }
.eqn-lista { display: flex; flex-direction: column; border: 1px solid var(--borda); border-radius: 10px; overflow: hidden; }
.eqn-lista > * + * { border-top: 1px solid var(--borda); }
.eqn-pes { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; }
.eqn-pes.editando { background: color-mix(in srgb, var(--destaque) 8%, transparent); }
.eqn-av { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--cor-av); color: var(--superficie); font: 700 13px var(--fonte-texto); }
.eqn-av.tec { --cor-av: var(--campo-tecnico); }
.eqn-av.tat { --cor-av: var(--campo-equipe); }
.eqn-av.age { --cor-av: color-mix(in srgb, var(--texto-2) 75%, var(--superficie)); }
.eqn-av.por { --cor-av: var(--campo-local); }
.eqn-av.cen { --cor-av: var(--texto); }
/* Pessoa digitada no card presencial: nome, celular e papel, sem entrar na Equipe. */
.novo-avulso { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.novo-avulso #novo-avulso-nome { grid-column: 1 / -1; }
.novo-avulso > * { min-width: 0; }
.eqn-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.eqn-nome { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eqn-info { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; font-size: var(--t-0); color: var(--texto-2); }
.eqn-info .tel { color: var(--destaque); font-variant-numeric: tabular-nums; }
.eqn-est { display: inline-flex; align-items: center; gap: 5px; font-weight: 500; font-variant-numeric: tabular-nums; }
.eqn-est::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--cor-est); }
.eqn-est.ok { --cor-est: var(--campo-local); }
.eqn-est.logo { --cor-est: var(--prio-critico); }
.eqn-est.venc { --cor-est: var(--prio-urgente); color: var(--perigo); }
.eqn-est.sem { --cor-est: color-mix(in srgb, var(--texto-2) 45%, transparent); }
.eqn-gps { color: var(--campo-equipe); font-weight: 600; }
.eqn-acoes { display: flex; align-items: center; gap: 6px; }
.eqn-mais { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--borda); border-radius: 8px; background: var(--superficie); color: var(--texto-2); cursor: pointer; }
.eqn-mais .ico { width: 18px; height: 18px; }
.eqn-mais[aria-expanded="true"] { border-color: var(--destaque); color: var(--destaque); }
.eqn-painel { display: flex; flex-direction: column; gap: 10px; padding: 12px; background: var(--superficie-2); }
.eqn-painel .sub { margin: 0; }
.eqn-lin { display: grid; grid-template-columns: 70px minmax(0, 1fr); align-items: center; gap: 8px; font-size: var(--t-0); color: var(--texto-2); }
.eqn-fim { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.eqn-fim .perigo { margin-right: auto; }
.eqn-painel .links-novo { display: flex; flex-direction: column; gap: 8px; }
.eqn-painel .links-novo input { min-height: 40px; font: 13px ui-monospace, SFMono-Regular, Menlo, monospace; }
.eqn-painel .links-novo .botoes-linha { display: flex; justify-content: flex-end; gap: 8px; }
.eqn-painel .links-novo .botoes-linha button, .eqn-painel .eqn-zap { min-height: 40px; padding: 0 14px; border-radius: 8px; display: inline-flex; align-items: center; font: 600 var(--t-1) var(--fonte-texto); }
.eqn-painel .eqn-zap { background: #25d366; border: 1px solid #25d366; color: #fff; text-decoration: none; }
.eqn-menu { display: flex; flex-direction: column; padding: 4px; background: var(--superficie-2); }
.eqn .eqn-menu button { display: flex; align-items: center; gap: 10px; justify-content: flex-start; min-height: 40px; border: 0; background: none; color: var(--texto); font-weight: 500; }
.eqn .eqn-menu button.perigo { color: var(--perigo); }
.eqn-menu .ico { width: 16px; height: 16px; }
.eqn-brancos summary { cursor: pointer; padding: 4px 0; font: 600 var(--t-0) var(--fonte-texto); color: var(--texto-2); }
.eqn-brancos .eqn-lista { margin-top: 6px; }
.eqn .vazio { margin: 8px 0; color: var(--texto-2); }
@media (max-width: 700px) {
  .eqn .equipe-form { grid-template-columns: 1fr 1fr; }
  .eqn .equipe-form #equipe-nome { grid-column: 1 / -1; }
  .eqn-pes { grid-template-columns: 36px minmax(0, 1fr); }
  .eqn-pes .eqn-acoes { grid-column: 1 / -1; }
  .eqn-pes .eqn-acoes button:not(.eqn-mais) { flex: 1; min-height: 44px; }
  .eqn-mais { width: 44px; height: 44px; }
  .eqn button:not(.eqn-fechar):not(.eqn-mais):not([data-eqfiltro]) { min-height: 44px; }
}

/* Concluído minimizado: só título, quantidade e o botão para mostrar */
.btn-minimizar { margin-left: auto; padding: 2px 8px; font-size: var(--t-0); font-weight: 500; text-transform: none; letter-spacing: 0; }
.coluna-campo h2:has(.btn-minimizar) { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.coluna-campo.minimizada h2 { color: var(--texto-2); }
.eq-botoes .btn-ico { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; background: none; color: var(--texto-2); border-radius: var(--raio); cursor: pointer; }
.eq-botoes .btn-ico .ico { width: 16px; height: 16px; color: currentColor; }
.eq-botoes .btn-ico:hover, .eq-botoes .btn-ico:focus-visible { background: var(--superficie-2); color: var(--destaque); }
.eq-botoes .btn-ico.perigo:hover, .eq-botoes .btn-ico.perigo:focus-visible { color: var(--campo-offline); }
@media (max-width: 700px) { .eq-botoes .btn-ico { width: 44px; height: 44px; } }

/* Filtro "só com gerador" no título da coluna Offline */
.coluna-campo h2:has(.filtro-ger) { display: flex; align-items: center; gap: 4px 6px; flex-wrap: wrap; }
.filtro-ger { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-size: var(--t-0); font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--campo-gerador); cursor: pointer; }
.filtro-ger input { width: 14px; height: 14px; margin: 0; accent-color: var(--campo-gerador); }
@media (max-width: 700px) { .filtro-ger input { width: 20px; height: 20px; } .filtro-ger { min-height: 36px; } }

/* Busca por código ou nome na barra do topo (só no Kanban) */
.busca-campo { position: relative; display: flex; align-items: center; flex: 0 1 220px; min-width: 0; }
.busca-campo[hidden] { display: none; }
.busca-campo input {
  width: 100%; min-width: 0; padding: 6px 28px 6px 10px; font: inherit; font-size: var(--t-1);
  border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); color: var(--texto);
}
.busca-campo input:focus-visible { outline: 2px solid var(--destaque); outline-offset: 0; }
.busca-campo input::-webkit-search-cancel-button { display: none; }
.busca-campo button { position: absolute; right: 2px; width: 26px; height: 26px; padding: 0; border: 0; background: none; color: var(--texto-2); font-size: var(--t-3); line-height: 1; cursor: pointer; }
@media (max-width: 700px) {
  .busca-campo { flex: 1 1 100%; order: 3; }
  .busca-campo input { font-size: 16px; min-height: 40px; }
  .busca-campo button { width: 40px; height: 40px; }
}
.btn-copiar { display: inline-flex; align-items: center; gap: 4px; }
.btn-copiar .ico { width: 14px; height: 14px; color: currentColor; }

/* Fundo do mapa por gosto (botão no mapa, salvo no aparelho): cinza claro (padrão), cinza escuro ou colorido. */
.mapa.fundo-claro .leaflet-tile-pane { filter: grayscale(0.9) contrast(0.85) brightness(1.05); }
.mapa.fundo-escuro .leaflet-tile-pane { filter: grayscale(1) invert(0.92) hue-rotate(180deg) brightness(0.9) contrast(0.85); }

/* Card técnico: [chave][código][nome] · tempo / [problema em 1 linha][botão]. */
.compacto.com-prob {
  grid-template-columns: auto auto minmax(0, 1fr) auto auto;
  grid-template-areas: "ic cod nome marcas tempo" "prob prob prob prob botao";
}
.compacto.com-prob .ic-esq { grid-area: ic; display: flex; }
.compacto.com-prob .t-linha { display: none; }
.compacto.com-prob .t-curto { display: block; grid-area: tempo; font-size: var(--t-0); color: var(--texto-2); font-variant-numeric: tabular-nums; }
.compacto .prob { grid-area: prob; min-width: 0; font-size: var(--t-0); color: var(--texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 700px) { .compacto.com-prob .nm-curto { -webkit-line-clamp: 1; } }
.compacto .abast.nivel-atencao { color: var(--atencao); font-weight: 600; }
.compacto .abast.nivel-vencido { color: var(--critico); font-weight: 700; }

/* Coluna No gerador: os itens empilham como os cards; botões embaixo quando a coluna é estreita. */
.etapa-no_gerador > h2 { color: var(--campo-gerador); }
.coluna-campo .ger, .meus .ger { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "cod nome" "tempo tempo" "acoes acoes"; }
.coluna-campo .ger .ger-acoes button, .coluna-campo .ger .ger-acoes a, .meus .ger .ger-acoes button, .meus .ger .ger-acoes a { flex: 1 1 auto; }

/* Pino no gerador: cor do evento por dentro, borda de fora pela urgência do abastecimento. */
.marcador .abast.nivel-atencao { color: var(--atencao); }
.marcador .abast.nivel-vencido { color: var(--critico); }
.ger.meu { outline: 2px solid var(--destaque); outline-offset: -1px; }
.ger .ger-tempo b { color: var(--texto); }
.ger .ger-acoes { flex-wrap: wrap; }

#filtro-painel {
  position: fixed; inset: auto; margin: 0; z-index: 1000; width: min(320px, calc(100vw - 16px));
  max-height: calc(100vh - 140px); overflow-y: auto;
  border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: 0 4px 18px rgb(0 0 0 / 0.25);
}

/* Modo TV, como no painel de alertas: só leitura e letra maior para ler de longe.
   Código em destaque (1.5rem, igual ao .cartao .codigo), nome em --t-2, linhas de apoio em --t-1. */
body.tv .compacto .cod, body.tv .ger .cod { font-size: 1.5rem; }
body.tv .compacto .nm-curto, body.tv .ger .nm-curto { font-size: var(--t-2); }
body.tv .compacto .t-linha, body.tv .compacto .t-curto, body.tv .compacto .prob, body.tv .ger .ger-tempo { font-size: var(--t-1); }
body.tv .compacto .ico { width: 18px; height: 18px; }
body.tv .marcador .rot { font-size: var(--t-0); max-width: 200px; }

/* Card compacto em duas linhas independentes: o botão da 2ª linha não espreme o nome da 1ª.
   Computador: .l1 = [ícone] código nome marcas [tempo]; .l2 = tempo/problema + botão.
   Celular: .l1/.l2 somem (display: contents) e vale o grid de uma linha acima. */
@media (min-width: 701px) {
  .compacto, .compacto.com-prob { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
  .compacto .l1, .compacto .l2 { display: flex; align-items: center; gap: 6px; min-width: 0; }
  .compacto .nm-curto { flex: 1; }
  .compacto .l2 .t-linha, .compacto .l2 .prob { flex: 1; min-width: 0; }
  .compacto .l2 button { flex: none; margin-left: auto; }
}
@media (max-width: 700px) { .compacto .l1, .compacto .l2, .compacto .texto { display: contents; } .compacto .estado { display: none; } }
.trilho-card .ic-acao { display: none; }

/* Celular: ações do topo numa linha só, com rolagem lateral, para o Kanban começar mais cedo na tela. */
@media (max-width: 700px) {
  .acoes-topo { flex-wrap: nowrap; overflow-x: auto; margin: 0 -10px; padding: 0 10px 2px; scrollbar-width: none; }
  .acoes-topo button { flex: none; white-space: nowrap; min-height: 40px; }
  .coluna-campo h2 { flex-wrap: wrap; }
}

/* ---------- Celular: cabeçalho e mapa no padrão do iPhone (Apple HIG) ----------
   Barra única de 44 px: seletor Kanban/Mapa + lupa + "mais"; ações numa folha que sobe de baixo;
   alvos de toque de 44 px; controles do mapa como botões redondos empilhados na lateral. */
.so-cel { display: none; }
.btn-mapa .ico { display: none; }
.btn-mapa .selo { display: none; }
.folha-alca { display: none; }

@media (max-width: 700px) {
  .topo-campo { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 6px; padding: 6px 12px; }
  .topo-campo .abas { width: auto; padding: 2px; border-radius: 9px; background: var(--superficie-2); gap: 2px; }
  .topo-campo .abas button { min-height: 32px; padding: 4px 8px; border: 0; border-radius: 7px; font-size: var(--t-1); font-weight: 600; background: none; color: var(--texto-2); }
  .topo-campo .abas button[aria-selected="true"] { background: var(--superficie); color: var(--texto); box-shadow: 0 1px 3px rgb(0 0 0 / 0.15); }
  .so-cel { display: grid; }
  .btn-ico-topo { place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--destaque); cursor: pointer; }
  .btn-ico-topo .ico { width: 22px; height: 22px; }
  .topo-campo .busca-campo { display: none; grid-column: 1 / -1; order: 9; width: 100%; }
  .topo-campo.busca-aberta .busca-campo:not([hidden]) { display: flex; }
  .topo-campo.busca-aberta #btn-busca { color: var(--texto); background: var(--superficie-2); }

  /* Folha que sobe de baixo, com alça (sheets do iOS). */
  dialog.folha {
    margin: auto 0 0; width: 100%; max-width: 100%; max-height: 85vh; padding: 6px 16px calc(16px + env(safe-area-inset-bottom));
    border: 0; border-radius: 14px 14px 0 0; background: var(--superficie); color: var(--texto); overflow-y: auto;
    position: fixed; inset: auto 0 0 0;
  }
  dialog.folha::backdrop { background: var(--veu); }
  dialog.folha .folha-alca, dialog.folha::before { display: block; }
  .folha-alca { width: 36px; height: 5px; margin: 2px auto 10px; border-radius: 3px; background: var(--borda); }
  #filtro-painel.folha { width: 100%; max-height: 75vh; }
  #filtro-painel.folha .dialogo { padding: 0; }

  /* Conteúdo da folha "mais": uma ação por linha, alvo de 48 px. */
  .mais-conteudo .topo-acoes { display: flex; flex-direction: column; align-items: stretch; gap: 10px; width: 100%; }
  .mais-conteudo .acoes-topo { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; overflow: visible; border: 1px solid var(--borda); border-radius: 10px; }
  .mais-conteudo .acoes-topo[hidden] { display: none; }
  .mais-conteudo .acoes-topo button {
    justify-content: flex-start; gap: 10px; min-height: 48px; padding: 0 14px; border: 0; border-radius: 0; border-bottom: 1px solid var(--borda);
    background: none; font-size: var(--t-2); font-weight: 500; text-align: left; color: var(--texto);
  }
  .mais-conteudo .acoes-topo button:last-child { border-bottom: 0; }
  .mais-conteudo .agindo { display: flex; flex-direction: column; align-items: stretch; gap: 4px; font-size: var(--t-0); color: var(--texto-2); }
  .mais-conteudo .agindo[hidden], .mais-conteudo [hidden] { display: none; }
  .mais-conteudo #link-alertas { display: flex; align-items: center; min-height: 44px; font-size: var(--t-2); }
  .mais-conteudo .operador { display: flex; align-items: center; justify-content: space-between; min-height: 44px; font-size: var(--t-1); }

  /* Mapa: controles redondos de 44 px empilhados à direita, só ícone; sem botões de zoom (pinça). */
  .mapa-botoes { left: auto; right: 10px; top: 10px; flex-direction: column; flex-wrap: nowrap; gap: 8px; }
  .btn-mapa { position: relative; display: grid; place-items: center; width: 44px; height: 44px; min-height: 0; padding: 0; border-radius: 50%; }
  .btn-mapa .rot-btn { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .btn-mapa .ico { display: block; width: 22px; height: 22px; color: var(--texto); }
  .btn-mapa.ativo .ico { color: var(--campo-obs); }
  .btn-mapa .selo {
    display: grid; place-items: center; position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 4px;
    border-radius: 9px; background: var(--destaque); color: var(--superficie); font-size: 11px; font-weight: 700;
  }
  .btn-mapa .selo[hidden] { display: none; }
  .mapa .leaflet-control-zoom { display: none; }
  .legenda { left: 10px; right: 64px; bottom: 12px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; white-space: nowrap; padding: 6px 10px; border-radius: 10px; }
  .btn-local { bottom: 56px; padding: 10px 18px; min-height: 44px; font-size: var(--t-1); }
  .btn-local.ativo { bottom: 56px; }
}

.mapa.zoom-medio .marcador .rot-2 { display: none; }
.mapa.zoom-longe .marcador .rot { display: none; }
.linha-filtro label { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--texto); font-size: var(--t-1); }
@media (max-width: 700px) {
  #filtro-painel.folha { inset: auto 0 0 0; margin: auto 0 0; width: 100%; max-width: 100%; border-radius: 14px 14px 0 0; border: 0; }
  .linha-filtro label { font-size: var(--t-2); min-height: 48px; padding: 0 2px; }
}

/* Amostra do filtro e da legenda: o mesmo código do pino. Corpo = VPN (vermelho/verde/azul),
   ícone branco = quem está lá, selo verde = funcionando sem VPN, anel = gerador e urgência. */
.amostra { display: inline-grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--sobre-pino); box-shadow: 0 0 0 1px var(--borda); vertical-align: -4px; margin-right: 4px; background: var(--texto-2); position: relative; }
.amostra .ico { width: 11px; height: 11px; margin: 0; color: var(--sobre-pino); }
.amostra.cor-offline { background: var(--pino-offline); }
.amostra.neutra { background: color-mix(in srgb, var(--texto-2) 35%, var(--superficie)); }
.amostra.com-selo::after { content: ""; position: absolute; top: -5px; left: -5px; width: 8px; height: 8px; border-radius: 50%; background: var(--pino-online); border: 1.5px solid var(--sobre-pino); }
.linha-filtro .amostra { margin-right: 0; }
.grupo-filtro { margin: 12px 0 2px; font-size: var(--t-0); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--texto-2); }
.grupo-filtro:first-child { margin-top: 0; }

/* Pino: um sinal por informação (ver htmlPino em campo.js). */
.pino.gerador { outline: 3px solid var(--pino-gerador); outline-offset: 1px; }
.pino.luz-atencao { box-shadow: 0 0 0 4px color-mix(in srgb, var(--pino-alerta) 55%, transparent), 0 0 14px 4px var(--pino-alerta); }
.pino.luz-vencido { box-shadow: 0 0 0 4px color-mix(in srgb, var(--pino-offline) 55%, transparent), 0 0 16px 6px var(--pino-offline); animation: luz-vencido 1.2s ease-in-out infinite; }
@keyframes luz-vencido { 50% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--pino-offline) 30%, transparent), 0 0 4px 1px var(--pino-offline); } }
@media (prefers-reduced-motion: reduce) { .pino.luz-vencido { animation: none; } }
/* Online e sem VPN (sem gerador): menores e atrás, para o offline e o técnico se destacarem. */
.marcador.leve .pino { left: -9px; top: -22px; width: 18px; height: 18px; border-width: 1.5px; box-shadow: 0 1px 2px rgb(0 0 0 / 0.3); }
.marcador.leve .rot { font-size: 10px; opacity: 0.85; }
.marcador.leve .rot-2 { display: none; }
/* Selos no ombro do pino: funcionando (✓ verde) à esquerda, técnico (chave azul) à direita. */
.selo {
  position: absolute; top: -40px; width: 16px; height: 16px; border-radius: 50%;
  display: grid; place-items: center; border: 2px solid var(--sobre-pino); box-shadow: 0 1px 3px rgb(0 0 0 / 0.35);
}
.selo .ico { width: 10px; height: 10px; color: var(--sobre-pino); }
.selo-func { left: -20px; background: var(--pino-online); }
.selo-tec { left: 5px; top: -43px; width: 19px; height: 19px; background: var(--pino-tecnico); }
.selo-tec .ico { width: 11px; height: 11px; }
.selo-pres { left: -20px; top: -18px; background: var(--campo-presenca); }
.marcador.leve .selo-tec, .marcador.leve .selo-func { top: -32px; }
.grupo { position: relative; }
.grupo .selo-tec { top: -8px; left: auto; right: -9px; }
.amostra.cor-online { background: var(--pino-online); }
.amostra.cor-tecnico { background: var(--pino-tecnico); }
.amostra.cor-sem_vpn { background: var(--pino-sem-vpn); }
.amostra.gerador { outline: 3px solid var(--pino-gerador); outline-offset: 1px; }
.amostra.luz-atencao { box-shadow: 0 0 6px 3px var(--pino-alerta); }
.amostra.luz-vencido { box-shadow: 0 0 6px 3px var(--pino-offline); }
/* Só ocorrências | Todos: controle segmentado no topo do filtro. */
.filtro-modo { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2px; padding: 2px; margin: 4px 0 10px; border-radius: 9px; background: color-mix(in srgb, var(--texto-2) 16%, var(--superficie)); }
.filtro-modo button { min-height: 36px; border: 0; border-radius: 7px; background: none; color: var(--texto); font: 600 var(--t-1) var(--fonte-texto); cursor: pointer; }
.filtro-modo button[aria-pressed="true"] { background: var(--destaque); color: var(--superficie); box-shadow: 0 1px 3px rgb(0 0 0 / 0.18); }
.amostra.com-selo-tec::after { content: ""; position: absolute; top: -6px; right: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--pino-tecnico); border: 1.5px solid var(--sobre-pino); }
.dica-filtro { margin: 0 0 2px; font-size: var(--t-0); color: var(--texto-2); }
.grupo.cor-online.leve, .grupo.cor-sem_vpn.leve { width: 30px; height: 30px; font-size: 12px; border-width: 2px; }
.grupo.gerador { outline: 3px solid var(--pino-gerador); outline-offset: 1px; }
.grupo.luz-atencao { box-shadow: 0 0 0 4px color-mix(in srgb, var(--pino-alerta) 55%, transparent), 0 0 14px 4px var(--pino-alerta); }
.grupo.luz-vencido { box-shadow: 0 0 0 4px color-mix(in srgb, var(--pino-offline) 55%, transparent), 0 0 16px 6px var(--pino-offline); animation: luz-vencido 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .grupo.luz-vencido { animation: none; } }

/* Celular: a folha do filtro já mostra cada sinal com a sua amostra, então a legenda flutuante sai.
   Rótulos: só o código até o zoom 15; nome e segunda linha aparecem de perto. Online/sem VPN sem rótulo. */
@media (max-width: 700px) {
  .mapa .legenda { display: none; }
  .mapa:not(.zoom-perto) .marcador .rot-nome, .mapa:not(.zoom-perto) .marcador .rot-2 { display: none; }
  .mapa:not(.zoom-perto) .marcador.leve .rot { display: none; }
  .marcador .rot { padding: 1px 5px; }
}

/* Prioridade em todo item, Normal incluído: badge redondo e cheio com a letra (U, C, P, N). Computador e TV:
   no topo do trilho, antes da ação; celular e /app: ao lado do nome. Com escrita, abre a lista das quatro. */
.selo-prio {
  flex: none; display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border: 0; border-radius: 999px;
  font: 700 12px/1 system-ui, -apple-system, sans-serif; letter-spacing: 0; text-transform: uppercase;
  color: var(--sobre-prio, #fff); background: var(--cor-prio, var(--prio-urgente)); box-shadow: 0 1px 2px rgb(0 0 0 / 0.25);
}
.selo-prio.prio-normal { background: color-mix(in srgb, var(--texto-2) 35%, var(--superficie)); color: var(--texto); box-shadow: none; }
button.selo-prio { cursor: pointer; }
button.selo-prio:hover { filter: brightness(1.1); }
button.selo-prio:focus-visible, button.selo-prio[aria-expanded="true"] { outline: 2px solid var(--destaque); outline-offset: 2px; }
.mf-item .selo-prio, .mf-cab .selo-prio { min-width: 20px; height: 20px; font-size: 11px; box-shadow: none; }
body.tv .selo-prio { min-width: 26px; height: 26px; font-size: 14px; }
.trilho-card .prio-trilho, .trilho-card .sep-prio { display: none; }
/* No trilho, o badge é um botão colorido no formato dos outros do trilho (quadrado de canto arredondado,
   cheio na cor da prioridade). A regra é mais específica que a dos botões fantasma do trilho, que
   tirariam o fundo. */
.selo-prio { --cor-prio: var(--prio-urgente); --sobre-prio: #fff; }
.selo-prio.prio-critico { --cor-prio: var(--prio-critico); --sobre-prio: #fff; }
.selo-prio.prio-prioritario { --cor-prio: var(--prio-prioritario); --sobre-prio: #1c1c1e; }
/* Normal não se destaca: sem fundo, só o "N" em cinza (no trilho e ao lado do nome). */
.selo-prio.prio-normal { --cor-prio: transparent; --sobre-prio: var(--texto-2); background: transparent; color: var(--texto-2); box-shadow: none; font-weight: 600; }
/* Celular e /app: a regra dos botões do card (.compacto button, azul) não pode tingir o selo. */
.compacto button.selo-prio, .card .detalhe button.selo-prio {
  min-width: 22px; min-height: 0; height: 22px; padding: 0 6px; border: 0; border-radius: 999px;
  background: var(--cor-prio); color: var(--sobre-prio); font: 700 12px/1 system-ui, -apple-system, sans-serif;
}
.compacto button.selo-prio:not(.prio-normal), .card .detalhe button.selo-prio:not(.prio-normal) { box-shadow: 0 1px 2px rgb(0 0 0 / 0.25); }
.compacto button.selo-prio.prio-normal, .card .detalhe button.selo-prio.prio-normal { font-weight: 600; }
@media (min-width: 701px) {
  body:not(.app) .trilho-card .prio-trilho { display: grid; place-items: center; }
  body:not(.app) .compacto > .trilho-card button.selo-prio, body:not(.app) .compacto > .trilho-card span.selo-prio {
    width: 32px; height: 28px; min-width: 0; padding: 0; border: 0; border-radius: var(--raio);
    background: var(--cor-prio); color: var(--sobre-prio); font-size: 13px; box-shadow: none;
  }
  body:not(.app) .compacto > .trilho-card button.selo-prio:hover { background: var(--cor-prio); filter: brightness(1.12); }
  body.tv .compacto > .trilho-card .selo-prio { width: 36px; height: 32px; font-size: 15px; }
  body:not(.app) .trilho-card .sep-prio { display: block; }
  body:not(.app) .compacto .l1 .selo-prio, body:not(.app) .card .detalhe > header .selo-prio { display: none; }
}
/* Celular: alvo de toque maior sem mudar o desenho (área invisível em volta). */
@media (max-width: 700px) { button.selo-prio { position: relative; } button.selo-prio::after { content: ""; position: absolute; inset: -12px; } }
.ger .nm-curto .selo-prio { margin-right: 6px; vertical-align: 1px; }
.card .retorno { color: var(--campo-obs); font-weight: 600; }
.card.retorno { border-left-style: double; }
.card .conserto { font-weight: 600; }
.marcador .prio-rot { color: var(--balao-perigo); }
#prioridade-opcoes, .conserto-opcoes { flex-direction: column; gap: 6px; }

/* Gerador no campo: ficha como os cards de alerta. Informação à esquerda; um passo por vez no trilho da direita. */
/* .ger empilha em coluna; a ficha é linha: corpo à esquerda, trilho à direita (também no celular). */
div.ger.ficha { display: flex; flex-direction: row; align-items: stretch; gap: 0; padding: 0; }
.ger.ficha .ger-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; }
.ger.ficha .ger-cabeca { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; }
.ger.ficha .ger-passo { font-size: var(--t-0); color: var(--texto-2); }
.ger.ficha .ger-rota { align-self: flex-start; font-size: var(--t-0); color: var(--destaque); }
.ger-trilho {
  flex: none; width: 136px; display: flex; flex-direction: column; justify-content: center; gap: 6px;
  padding: 6px; border-left: 1px solid var(--borda);
}
.ger-trilho button, .ger-trilho a {
  min-height: 44px; padding: 6px 8px; border-radius: var(--raio); border: 1px solid var(--borda);
  background: var(--superficie); color: var(--texto); font-size: var(--t-1); font-weight: 600; cursor: pointer;
  display: flex; align-items: center; justify-content: center; text-align: center; text-decoration: none;
}
.ger-trilho .primario { background: var(--destaque); border-color: var(--destaque); color: var(--superficie); }
.ger-trilho .secundario { background: none; border-color: var(--destaque); color: var(--destaque); }
/* Linha do passo: o estado em texto, com peso para ler de relance. */
.ger.ficha .ger-passo { color: var(--texto); font-weight: 500; }
/* Com energia: a central vê o item em verde até fechar. */
.ger.com-energia { border-left-color: var(--campo-local); background: color-mix(in srgb, var(--campo-local) 16%, var(--superficie)); }
.ger.com-energia .ger-passo b { color: var(--campo-local); }
.filtro-modo[hidden] { display: none; }

/* Apple HIG: estado de toque em todo botão; no máximo 1–2 botões preenchidos por tela (os demais matizados). */
.ger-trilho button:active, .ger-trilho a:active { transform: scale(0.97); opacity: 0.85; }
@media (prefers-reduced-motion: reduce) { .ger-trilho button:active, .ger-trilho a:active { transform: none; } }
.ger.ficha.matizado .ger-trilho .primario { background: color-mix(in srgb, var(--destaque) 16%, var(--superficie)); border-color: transparent; color: var(--destaque); }
.ger-trilho .salvando { opacity: 0.7; cursor: progress; }

/* Cards no formato dos cards do Chatwoot: informação à esquerda; ação num trilho à direita, com divisória. */
@media (min-width: 701px) {
  .compacto, .compacto.com-prob { flex-direction: row; padding: 0; gap: 0; }
  .compacto > .info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 7px 8px 7px 10px; }
  .compacto > .trilho-card { flex: none; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 4px 6px; border-left: 1px solid var(--borda); }
  .compacto > .trilho-card button { min-height: 32px; }
}
@media (max-width: 700px) { .compacto > .info, .compacto > .trilho-card { display: contents; } }
/* Gerador na central: trilho com botões fantasma, como no Chatwoot; Fechar em vermelho (perigo). */
.ger.ficha.central .ger-trilho { width: 132px; gap: 2px; padding: 4px; }
.ger.ficha.central .ger-trilho button { min-height: 32px; font-size: var(--t-0); }
.ger.ficha.central .ger-trilho .discreto { border-color: transparent; }
.ger.ficha.central .ger-trilho .discreto:hover { background: var(--superficie-2); color: var(--texto); }
.ger-trilho .perigo { background: none; border-color: transparent; color: var(--perigo, var(--campo-offline)); }
.ger-trilho .perigo:hover { background: color-mix(in srgb, var(--perigo, var(--campo-offline)) 12%, var(--superficie)); }
/* Card técnico: rotas para quem vai até lá (alvo de toque de 44 pt nos links). */
.card .rotas { font-size: var(--t-1); color: var(--texto-2); display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; }
.card .rotas a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; color: var(--destaque); font-weight: 600; }

/* Card de presença (Precisando → No local): verde-azulado, ícone de guarda (gente de boné, diferente da pessoa da equipe). */
.card.cor-presenca { --cor-card: var(--campo-presenca); }
.etapa-presenca > h2 { color: var(--campo-presenca); }
.salto.etapa-presenca { border-color: var(--campo-presenca); }
.card .ico-guarda { color: var(--campo-presenca); }
.pino .ico-guarda, .amostra .ico-guarda { color: var(--sobre-pino); }

/* Evento tático (Aceitar → Check-in → Lista → Check-out): magenta, ícone de escudo. */
.card.cor-tatico { --cor-card: var(--campo-tatico); }
.etapa-tatico > h2 { color: var(--campo-tatico); }
.salto.etapa-tatico { border-color: var(--campo-tatico); }
.card .ico-escudo { color: var(--campo-tatico); }
.selo-alerta { --cor-selo: var(--campo-obs); }
.card .checklist { display: flex; flex-direction: column; gap: 4px; font-size: var(--t-1); }
.card .checklist ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.card .checklist li { display: flex; align-items: center; gap: 6px; min-height: 28px; }
.card .checklist li > span { min-width: 0; flex: 1; }
.card .checklist .ico { width: 16px; height: 16px; flex: none; }
.card .checklist .ok .ico { color: var(--campo-local); }
.card .checklist .problema .ico { color: var(--campo-obs); }
.card .checklist .pend { width: 12px; height: 12px; margin: 0 2px; border: 1.5px solid var(--texto-2); border-radius: 50%; flex: none; }
dialog.lista-dialogo { width: 100%; max-width: min(560px, calc(100vw - 20px)); }
.lista-dialogo .dialogo { max-height: 86vh; box-sizing: border-box; }
.lista-itens { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
.lista-itens .item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 8px; padding: 10px; border: 1px solid var(--borda); border-radius: 10px; }
.lista-itens .item.ok { border-color: color-mix(in srgb, var(--campo-local) 60%, var(--borda)); }
.lista-itens .item.problema { border-color: color-mix(in srgb, var(--campo-obs) 70%, var(--borda)); }
.lista-itens .item-texto { font-weight: 600; align-self: center; min-width: 0; }
.lista-itens .seg { display: inline-flex; gap: 4px; }
.lista-itens .seg button { min-height: 44px; display: inline-flex; align-items: center; gap: 4px; }
.lista-itens .seg .ico { width: 16px; height: 16px; }
.lista-itens .seg [data-est="ok"][aria-pressed="true"] { background: var(--campo-local); border-color: var(--campo-local); color: #fff; }
.lista-itens .seg [data-est="problema"][aria-pressed="true"] { background: var(--campo-obs); border-color: var(--campo-obs); color: #fff; }
.lista-itens .item-obs { grid-column: 1 / -1; min-width: 0; }
.lista-itens .item-foto { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; }
.lista-itens .item-foto label { text-transform: none; letter-spacing: 0; font-size: var(--t-1); display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border: 1px solid var(--borda); border-radius: 8px; color: var(--destaque); cursor: pointer; }
@media (max-width: 480px) { .lista-itens .item { grid-template-columns: minmax(0, 1fr); } .lista-itens .seg button { flex: 1; justify-content: center; } .lista-itens .seg { display: flex; } }
.foto-img { max-width: min(80vw, 720px); max-height: 70vh; border-radius: 8px; object-fit: contain; background: var(--superficie-2, transparent); }

/* Cards do Kanban no padrão do painel Chatwoot (computador e TV; o /app tem o seu): cabeçalho com código grande
   e nome; linha com a faixa de cor do card à esquerda (título em negrito, detalhe embaixo); trilho de ícones
   fantasma à direita, com o rótulo no title. */
@media (min-width: 701px) {
  body:not(.app) .card { border-left: 1px solid var(--borda); }
  body:not(.app) .compacto > .info { gap: 0; padding: 0; }
  body:not(.app) .compacto .l1 { padding: 8px 10px 7px; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; }
  body:not(.app) .compacto .cod { font-size: var(--t-3); font-weight: 400; }
  body:not(.app) .compacto .nm-curto { font-weight: 400; font-size: var(--t-1); color: var(--texto-2); -webkit-line-clamp: 2; }
  body:not(.app) .compacto .t-curto { display: block; margin-left: auto; font-size: var(--t-0); color: var(--texto-2); font-variant-numeric: tabular-nums; }
  body:not(.app) .compacto .l2 {
    padding: 6px 10px 6px calc(10px + var(--faixa)); border-top: 1px solid var(--borda);
    box-shadow: inset var(--faixa) 0 0 var(--cor-card); border-bottom-left-radius: calc(var(--raio) - 1px);
  }
  body:not(.app) .compacto .texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
  body:not(.app) .compacto .estado, body:not(.app) .compacto .prob { font-weight: 500; font-size: var(--t-1); color: var(--texto); white-space: normal; overflow-wrap: anywhere; }
  body:not(.app) .compacto .t-linha, body:not(.app) .compacto.com-prob .t-linha { display: block; font-size: var(--t-0); color: var(--texto-2); }
  body:not(.app) .compacto > .trilho-card { justify-content: flex-start; gap: 2px; padding: 4px; }
  body:not(.app) .compacto > .trilho-card button {
    width: 32px; height: 32px; min-height: 32px; padding: 0; display: grid; place-items: center;
    border: 1px solid transparent; border-radius: var(--raio); background: none; color: var(--destaque);
  }
  body:not(.app) .compacto > .trilho-card button:hover { background: var(--superficie-2); filter: none; }
  body:not(.app) .compacto > .trilho-card button:active { transform: scale(0.94); }
  body:not(.app) .trilho-card .ic-acao { display: grid; }
  body:not(.app) .trilho-card .rot-acao { display: none; }
  body:not(.app) .trilho-card .ico { width: 18px; height: 18px; color: currentColor; }
  body.tv .compacto .cod { font-size: 1.5rem; }
}
@media (min-width: 701px) and (prefers-reduced-motion: reduce) { body:not(.app) .compacto > .trilho-card button:active { transform: none; } }

/* Selos do card: mesmo formato do botão do trilho (quadrado de canto arredondado), ícone na cor do assunto
   sobre um fundo levemente tingido: gerador em uso, equipe no local, presença no local. */
.selo-card {
  flex: none; width: 24px; height: 24px; border-radius: var(--raio); display: grid; place-items: center;
  background: color-mix(in srgb, var(--cor-selo) 16%, var(--superficie));
}
.selo-card .ico { width: 15px; height: 15px; color: var(--cor-selo); }
.selo-raio { --cor-selo: var(--campo-gerador); }
.selo-pessoa { --cor-selo: var(--campo-local); }
.selo-guarda { --cor-selo: var(--campo-presenca); }
body.tv .selo-card { width: 28px; height: 28px; }
body.tv .selo-card .ico { width: 18px; height: 18px; }

/* Trilho em posições fixas (computador e TV): ação · gerador · técnico · presença, de cima para baixo.
   Cor só no ícone: cinza precisa/tem, branco (texto) deslocando, verde no local; gerador laranja abastecer
   logo e vermelho piscando vencido. Celular e /app ficam com o botão de texto e os selos do cabeçalho. */
.trilho-card .slot, .trilho-card .sep, .trilho-card .acao-vazia { display: none; }
@media (min-width: 701px) {
  body:not(.app) .compacto > .trilho-card { align-items: center; gap: 2px; padding: 4px 6px; }
  body:not(.app) .trilho-card .acao-vazia { display: block; width: 32px; height: 32px; }
  body:not(.app) .trilho-card .sep { display: block; width: 20px; border-top: 1px solid var(--borda); margin: 3px 0; }
  body:not(.app) .trilho-card .slot { display: grid; place-items: center; width: 24px; height: 22px; }
  body:not(.app) .trilho-card .slot .ico { width: 17px; height: 17px; color: var(--cor-slot); }
  body:not(.app) .compacto .marcas .selo-card, body:not(.app) .compacto .marcas > .ico-raio { display: none; }
  body.tv .trilho-card .slot { width: 28px; height: 26px; }
  body.tv .trilho-card .slot .ico { width: 20px; height: 20px; }
}
.slot.cinza { --cor-slot: color-mix(in srgb, var(--texto-2) 70%, transparent); }
.slot.branco { --cor-slot: var(--texto); }
.slot.verde { --cor-slot: var(--campo-local); }
.slot.laranja { --cor-slot: var(--atencao); }
.slot.vermelho { --cor-slot: var(--critico); }
.slot.vermelho .ico { animation: slot-pisca 1.2s ease-in-out infinite; }
@keyframes slot-pisca { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .slot.vermelho .ico { animation: none; } }

/* Ícones do trilho são botões: abrem o menu de fases do assunto. Apagado = nada começado (clicável para pedir). */
@media (min-width: 701px) {
  body:not(.app) .trilho-card button.slot { padding: 0; width: 28px; height: 26px; border: 1px solid transparent; border-radius: var(--raio); background: none; cursor: pointer; }
  body:not(.app) .trilho-card button.slot:hover, body:not(.app) .trilho-card button.slot[aria-expanded="true"] { background: var(--superficie-2); }
  body:not(.app) .trilho-card button.slot:focus-visible { outline: 2px solid var(--destaque); outline-offset: -1px; }
}
.slot.apagado { --cor-slot: color-mix(in srgb, var(--texto-2) 32%, transparent); }

/* Menu de fases: fixo na tela, à direita do ícone (com a setinha); fases em ordem com a atual marcada. */
.menu-fases {
  position: fixed; z-index: 50; width: 244px; padding: 4px; display: flex; flex-direction: column; gap: 1px;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: 0 8px 22px var(--sombra-menu, rgb(0 0 0 / 0.35));
}
.menu-fases[hidden] { display: none; }
.menu-fases::before {
  content: ""; position: absolute; left: -6px; top: var(--seta, 14px); width: 10px; height: 10px; background: var(--superficie);
  border-left: 1px solid var(--borda); border-bottom: 1px solid var(--borda); transform: rotate(45deg);
}
.menu-fases.a-esquerda::before { left: auto; right: -6px; transform: rotate(225deg); }
.menu-fases hr { border: 0; border-top: 1px solid var(--borda); margin: 3px 2px; }
.mf-cab { display: flex; align-items: center; gap: 8px; padding: 6px 8px; }
.mf-cab .ico { width: 18px; height: 18px; color: var(--cor-mf); }
.mf-cab span { display: flex; flex-direction: column; min-width: 0; }
.mf-cab small { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--texto-2); }
.mf-cab b { font-size: var(--t-1); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mf-item {
  display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 8px; width: 100%; min-height: 32px;
  padding: 3px 8px; border: 0; border-radius: var(--raio); background: none; color: var(--texto); font-size: var(--t-1); text-align: left; cursor: pointer;
}
.mf-item:hover:not([disabled]) { background: var(--superficie-2); }
.mf-item:focus-visible { outline: 2px solid var(--destaque); outline-offset: -2px; }
.mf-item[disabled] { cursor: default; opacity: 0.45; }
.mf-item .ico { width: 16px; height: 16px; color: var(--texto-2); }
.mf-item small { font-size: 11px; color: var(--texto-2); font-weight: 400; }
.mf-dir { font-size: 11px; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.mf-fases { position: relative; display: flex; flex-direction: column; gap: 1px; }
.mf-fases::before { content: ""; position: absolute; left: 16px; top: 16px; bottom: 16px; border-left: 1px dashed var(--borda); }
.mf-fase .ico { position: relative; z-index: 1; background: var(--superficie); border-radius: 50%; }
.mf-fase.feito { color: var(--texto-2); }
.mf-fase.feito .ico { color: var(--campo-local); }
.mf-fase.agora { background: color-mix(in srgb, var(--cor-mf) 16%, var(--superficie)); font-weight: 600; }
.mf-fase.agora .ico { color: var(--cor-mf); background: transparent; }
.mf-fase.agora .mf-dir { color: var(--cor-mf); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.mf-fase.proximo, .mf-fase.proximo .ico { color: var(--destaque); font-weight: 600; }
.mf-fase.depois { color: color-mix(in srgb, var(--texto) 55%, transparent); }
.mf-item.perigo, .mf-item.perigo .ico { color: var(--perigo, var(--campo-offline)); }
.mf-escolha.atual { background: color-mix(in srgb, var(--cor-mf) 14%, var(--superficie)); font-weight: 600; }
.mf-escolha.atual .ico, .mf-escolha.atual .mf-dir { color: var(--cor-mf); }

/* Item No gerador da central no formato dos cards: faixa na cor do combustível (ok, abastecer logo, vencido, energia). */
.card.ger-card { --cor-card: var(--campo-gerador); }
.card.ger-card.nivel-atencao { --cor-card: var(--atencao); }
.card.ger-card.nivel-vencido { --cor-card: var(--critico); }
.card.ger-card.com-energia { --cor-card: var(--campo-local); }
.card.ger-card.nivel-vencido .estado { color: var(--critico); }
.card.ger-card .compacto { cursor: default; }

/* Aviso com Desfazer: o aviso passa a aceitar toque só quando tem o botão (alvo de 44 pt no celular). */
.aviso-acao:has(.desfazer) { pointer-events: auto; display: flex; align-items: center; gap: 12px; }
.aviso-acao:has(.desfazer)[hidden] { display: none; }
.aviso-acao .desfazer {
  min-height: 32px; padding: 4px 12px; border: 1px solid var(--destaque); border-radius: var(--raio);
  background: none; color: var(--destaque); font-weight: 600; cursor: pointer;
}
.aviso-acao .desfazer:hover { background: color-mix(in srgb, var(--destaque) 12%, var(--superficie)); }
@media (max-width: 700px) { .aviso-acao .desfazer { min-height: 44px; } }

/* Relatório (aba da central): filtros numa faixa, totais em fichas, duas tabelas densas. */
.relatorio { padding: 12px 16px 24px; overflow: auto; }
.relatorio[hidden] { display: none; }
.rel { display: flex; flex-direction: column; gap: 14px; max-width: 1400px; }
.rel-filtros { display: flex; flex-wrap: wrap; align-items: end; gap: 10px 14px; }
.rel-filtros label { display: flex; flex-direction: column; gap: 3px; font-size: var(--t-0); color: var(--texto-2); text-transform: uppercase; letter-spacing: 0.05em; }
.rel-filtros select, .rel-filtros input { min-height: 34px; padding: 4px 8px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); color: var(--texto); font-size: var(--t-1); text-transform: none; letter-spacing: 0; }
.rel-filtros #rel-codigo { width: 7ch; font-variant-numeric: tabular-nums; }
.rel-datas { display: flex; gap: 10px; }
.rel-datas[hidden] { display: none; }
.rel-botoes { display: flex; gap: 8px; margin-left: auto; }
.rel-botoes button { min-height: 34px; padding: 4px 14px; border-radius: var(--raio); font-weight: 600; cursor: pointer; }
.rel-totais { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.rel-tile { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); }
.rel-tile b { font-size: var(--t-3); font-weight: 600; font-variant-numeric: tabular-nums; }
.rel-tile span { font-size: var(--t-0); color: var(--texto-2); text-transform: uppercase; letter-spacing: 0.05em; }
.rel-bloco h2 { margin: 0 0 6px; font-size: var(--t-1); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--texto-2); display: flex; gap: 8px; align-items: baseline; }
.rel-tabela { overflow-x: auto; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); }
.rel-tabela table { width: 100%; border-collapse: collapse; font-size: var(--t-1); }
.rel-tabela th { position: sticky; top: 0; text-align: left; font-weight: 600; font-size: var(--t-0); color: var(--texto-2); text-transform: uppercase; letter-spacing: 0.04em; background: var(--superficie-2); }
.rel-tabela th, .rel-tabela td { padding: 6px 10px; border-bottom: 1px solid var(--borda); vertical-align: top; }
.rel-tabela tbody tr:last-child td { border-bottom: 0; }
.rel-tabela tbody tr:hover { background: var(--superficie-2); }
.rel-tabela .num, #rel-pessoas td:not(:first-child), #rel-pessoas th:not(:first-child) { font-variant-numeric: tabular-nums; white-space: nowrap; }
#rel-pessoas td:not(:first-child), #rel-pessoas th:not(:first-child) { text-align: right; }
.rel-tabela td.vazio { color: var(--texto-2); padding: 14px 10px; }
.rel-tipo { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: var(--t-0); font-weight: 600; white-space: nowrap; background: color-mix(in srgb, var(--cor-tipo) 16%, var(--superficie)); color: var(--cor-tipo); }
.tipo-queda { --cor-tipo: var(--campo-offline); }
.tipo-tecnico { --cor-tipo: var(--campo-tecnico); }
.tipo-presenca { --cor-tipo: var(--campo-presenca); }
.tipo-tatico { --cor-tipo: var(--campo-tatico); }
.tipo-gerador { --cor-tipo: var(--campo-gerador); }
@media (max-width: 700px) { .rel-botoes { margin-left: 0; width: 100%; } .rel-botoes button { flex: 1; min-height: 44px; } }

/* Gerador em alerta no trilho: o raio vira botão cheio, como o da prioridade (cores vivas da Apple), com o
   ícone em branco; vencido pisca o botão inteiro. Verde e cinza seguem só no ícone. */
@media (min-width: 701px) {
  body:not(.app) .trilho-card .slot.laranja, body:not(.app) .trilho-card .slot.vermelho {
    border-radius: var(--raio); background: var(--cor-alerta-ger); border-color: transparent;
  }
  body:not(.app) .trilho-card .slot.laranja { --cor-alerta-ger: var(--prio-critico); }
  body:not(.app) .trilho-card .slot.vermelho { --cor-alerta-ger: var(--prio-urgente); }
  body:not(.app) .trilho-card .slot.laranja .ico, body:not(.app) .trilho-card .slot.vermelho .ico { color: #fff; animation: none; }
  body:not(.app) .trilho-card button.slot.laranja:hover, body:not(.app) .trilho-card button.slot.vermelho:hover { background: var(--cor-alerta-ger); filter: brightness(1.12); }
  body:not(.app) .trilho-card .slot.vermelho { animation: slot-pisca 1.2s ease-in-out infinite; }
}
@media (min-width: 701px) and (prefers-reduced-motion: reduce) { body:not(.app) .trilho-card .slot.vermelho { animation: none; } }

/* Gerador automático: "A" pequeno no canto de baixo do raio do trilho (o manual fica só com o raio). */
.trilho-card .slot { position: relative; }
.ger-auto {
  position: absolute; right: -1px; bottom: -1px; min-width: 11px; height: 11px; padding: 0 2px; border-radius: 3px;
  display: grid; place-items: center; font: 800 8px/1 system-ui, -apple-system, sans-serif;
  background: var(--superficie); color: var(--texto); box-shadow: 0 0 0 1px var(--borda); pointer-events: none;
}
body.tv .ger-auto { min-width: 13px; height: 13px; font-size: 10px; }
/* "A" de gerador automático também no selo do cabeçalho (celular) e no pino do mapa (ombro de baixo, à direita). */
.selo-card { position: relative; }
.selo-card .ger-auto { right: -4px; bottom: -4px; }
.selo-auto { left: 6px; top: -18px; width: 15px; height: 15px; background: var(--superficie); color: var(--texto); font: 800 9px/1 system-ui, -apple-system, sans-serif; border-width: 1.5px; }

/* Online (VPN voltou): o Concluir do trilho é só o ✓, também no celular. */
.trilho-card button.so-icone .rot-acao { display: none; }
.trilho-card button.so-icone .ic-acao { display: grid; place-items: center; }

/* Fim do turno / da presencial: laranja nas 2 h antes, vermelho vencido. */
.turno { display: flex; align-items: center; gap: 4px; font-size: var(--t-0); color: var(--texto-2); }
.turno .ico { width: 14px; height: 14px; }
span.turno { display: inline; }
.turno.atencao { color: var(--atencao); font-weight: 600; }
.turno.vencido { color: var(--critico); font-weight: 600; }
.novo-horas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; align-items: end; }
.novo-horas label { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
/* Escala de serviço no cadastro da Equipe: sem escala, permanente (dias, horário e extras) ou temporário. */
.eqn-escala { grid-column: 1 / -1; border: 1px solid var(--borda); border-radius: 10px; margin: 0; padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.eqn-escala legend { font-size: var(--t-0); color: var(--texto-2); text-transform: uppercase; letter-spacing: 0.02em; padding: 0 4px; }
.eqn-escala label { text-transform: none; letter-spacing: 0; font-size: var(--t-1); color: var(--texto-2); }
.escala-tipo, .escala-dias { display: flex; flex-wrap: wrap; gap: 6px; }
.escala-tipo label, .escala-dias label { position: relative; }
.escala-tipo input, .escala-dias input { position: absolute; opacity: 0; pointer-events: none; }
.escala-tipo span, .escala-dias span { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid var(--borda); border-radius: 18px; background: var(--superficie); color: var(--texto); cursor: pointer; }
.escala-dias span { min-width: 44px; justify-content: center; padding: 0 8px; }
.escala-tipo input:checked + span, .escala-dias input:checked + span { background: var(--destaque); border-color: var(--destaque); color: #fff; font-weight: 600; }
.escala-tipo input:focus-visible + span, .escala-dias input:focus-visible + span { outline: 2px solid var(--destaque); outline-offset: 2px; }
#escala-corpo, #escala-semana, #escala-extras { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
#escala-corpo[hidden], #escala-semana[hidden] { display: none; }
.escala-linha { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: end; }
.escala-linha label { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.escala-linha input { width: 100%; box-sizing: border-box; min-width: 0; }
.escala-extra { grid-template-columns: 1fr 1fr auto; }
#escala-mais-extra { align-self: flex-start; }
@media (max-width: 480px) { .escala-linha, .escala-extra { grid-template-columns: 1fr; } }
/* Táticos à disposição, no topo da coluna Tático: em serviço e sem Deslocando / No local. */
.disponiveis { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px dashed color-mix(in srgb, var(--campo-tatico) 55%, var(--borda)); border-radius: 10px; background: var(--superficie); font-size: var(--t-1); }
.disponiveis h3 { margin: 0; font-size: var(--t-0); text-transform: uppercase; letter-spacing: 0.02em; color: var(--campo-tatico); display: flex; align-items: center; gap: 6px; }
.disponiveis h3 .ico { width: 14px; height: 14px; }
.disponiveis ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.disponiveis li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; min-width: 0; }
.disponiveis li b { font-weight: 600; }
.disponiveis .ate { color: var(--texto-2); font-variant-numeric: tabular-nums; }
.disponiveis .sem { color: var(--texto-2); font-size: var(--t-0); }
/* Com gente livre (parada, aguardando ocorrência): verde de estado, não o magenta do tático. */
.disponiveis.livres { border-style: solid; border-color: color-mix(in srgb, var(--ok) 45%, var(--borda)); background: color-mix(in srgb, var(--ok) 10%, var(--superficie)); }
.disponiveis.livres h3 { color: var(--ok); }
.disponiveis.livres li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; align-self: center; }
.eqn-fim-turno { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; text-transform: none; color: var(--texto-2); }
/* Funcionando sem conexão: status dentro da coluna Offline (não tem coluna própria). */
.card.func .estado { color: #a35a00; }
:root[data-theme="dark"] .card.func .estado { color: #f0b45c; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .card.func .estado { color: #f0b45c; } }
/* Card técnico composto: vários chamados técnicos do mesmo condomínio num card (selo com a quantidade e lista de itens). */
.selo-composto { display: inline-flex; align-items: center; gap: 2px; height: 20px; padding: 0 6px; border-radius: 999px; font-size: var(--t-0); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--campo-tecnico, var(--texto)); background: color-mix(in srgb, var(--campo-tecnico, var(--texto)) 14%, transparent); border: 1px solid color-mix(in srgb, var(--campo-tecnico, var(--texto)) 40%, transparent); }
.selo-composto .ico { width: 12px; height: 12px; }
.card.composto { box-shadow: 3px 3px 0 -1px var(--superficie), 3px 3px 0 0 color-mix(in srgb, var(--campo-tecnico, var(--borda)) 45%, var(--borda)); }
.composto-tit { display: flex; align-items: center; gap: 6px; font-size: var(--t-0); text-transform: uppercase; letter-spacing: 0.02em; color: var(--texto-2); }
.itens-composto { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.itens-composto li { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 6px 8px; border: 1px solid var(--borda); border-radius: 8px; background: var(--superficie); }
.itens-composto .it-prob { flex: 1; min-width: 0; font-size: var(--t-1); overflow-wrap: anywhere; }
.itens-composto button { flex: none; }
.composto-nota { display: flex; align-items: center; gap: 6px; font-size: var(--t-0); color: var(--texto-2); }

/* Card técnico composto, app (A): moldura com o comum e um card por chamado; ações comuns no rodapé. */
.card.grupo-tec { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1.5px solid color-mix(in srgb, var(--cor-card) 55%, var(--borda)); border-radius: 14px; background: color-mix(in srgb, var(--cor-card) 6%, var(--superficie)); }
.grupo-tec .gt-cab { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 2px 4px 0; }
.grupo-tec .gt-cab .cod { font-family: var(--fonte-nome); font-weight: 600; font-size: var(--t-2); font-variant-numeric: tabular-nums; }
.grupo-tec .gt-cab .nm { color: var(--texto-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grupo-tec .gt-cab .selo-composto { margin-left: auto; }
.grupo-tec .gt-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 0 4px; font-size: var(--t-0); color: var(--texto-2); }
.grupo-tec .gt-sub b { color: var(--texto); }
.grupo-tec .gt-estado { font-weight: 600; color: var(--texto); }
.grupo-tec .gt-estado.etapa-no_local { color: var(--campo-local); }
.grupo-tec .gt-itens { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.grupo-tec .gt-item { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px 8px 8px 10px; border: 1px solid var(--borda); border-left: 4px solid var(--cor-card); border-radius: 9px; background: var(--superficie); }
.grupo-tec .gt-item.prio-urgente { border-left-color: var(--prio-urgente); }
.grupo-tec .gt-item.prio-critico { border-left-color: var(--prio-critico); }
.grupo-tec .gt-item.prio-prioritario { border-left-color: var(--prio-prioritario); }
.grupo-tec .gt-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.grupo-tec .gt-p { font-size: var(--t-1); overflow-wrap: anywhere; }
.grupo-tec .gt-m { font-size: var(--t-0); color: var(--texto-2); }
.grupo-tec .gt-pe { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.grupo-tec button:not(.selo-prio), .composto-painel button.tinto { min-height: 44px; min-width: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid transparent; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-weight: 600; cursor: pointer; }
.grupo-tec button .ico { width: 15px; height: 15px; }
.grupo-tec button.primario { background: var(--destaque); border-color: var(--destaque); color: var(--superficie); }
.grupo-tec button.tinto, .composto-painel button.tinto { background: color-mix(in srgb, var(--destaque) 12%, var(--superficie)); color: var(--destaque); }
.grupo-tec button.simples { background: none; color: var(--destaque); }
.grupo-tec button:not(.selo-prio):active, .composto-painel button.tinto:active { filter: brightness(0.9); }
.grupo-tec .selo-prio { flex: none; }

/* Card técnico composto, painel (1): uma linha por chamado; "Ver os N" abre o diálogo com a moldura do app. */
.card.composto-painel { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-left: 4px solid var(--campo-tecnico); box-shadow: 3px 3px 0 -1px var(--superficie), 3px 3px 0 0 var(--borda); }
.card.composto-painel.prio-urgente { border-left-color: var(--prio-urgente); }
.card.composto-painel.prio-critico { border-left-color: var(--prio-critico); }
.card.composto-painel.prio-prioritario { border-left-color: var(--prio-prioritario); }
.composto-painel .cp-l1 { display: flex; align-items: center; gap: 6px; min-width: 0; }
.composto-painel .cp-l1 .cod { font-family: var(--fonte-nome); font-weight: 600; font-variant-numeric: tabular-nums; }
.composto-painel .cp-l1 .nm { color: var(--texto-2); font-size: var(--t-0); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.composto-painel .cp-l1 .t-curto { margin-left: auto; font-size: var(--t-0); color: var(--texto-2); white-space: nowrap; }
.composto-painel .cp-itens { list-style: none; margin: 0; padding: 0; border-top: 1px dashed var(--borda); }
.composto-painel .cp-itens li { display: flex; align-items: center; gap: 6px; padding: 5px 0; border-bottom: 1px dashed var(--borda); min-width: 0; font-size: var(--t-1); }
.composto-painel .cp-itens .selo-prio { min-width: 18px; height: 18px; font-size: 11px; }
.composto-painel .cp-p { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.composto-painel .cp-tm { font-size: var(--t-0); color: var(--texto-2); font-variant-numeric: tabular-nums; }
.composto-painel .cp-rod { display: flex; align-items: center; gap: 6px; font-size: var(--t-0); color: var(--texto-2); }
.composto-painel .cp-rod b { color: var(--texto); }
.composto-painel .cp-rod button { margin-left: auto; }
dialog.composto-dialogo { width: 100%; max-width: min(520px, calc(100vw - 20px)); }
.grupo-tec .gt-rotas a { color: var(--destaque); text-decoration: none; font-weight: 600; }
.grupo-tec .gt-sub .tel { margin-left: 4px; }
.grupo-tec .gt-tipo { margin-left: auto; display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--raio); color: var(--cor-card); background: color-mix(in srgb, var(--cor-card) 14%, var(--superficie)); }
.grupo-tec .gt-tipo .ico { width: 15px; height: 15px; }
.grupo-tec .gt-aviso { display: flex; align-items: center; gap: 6px; padding: 0 4px; font-size: var(--t-0); color: var(--texto-2); }
.grupo-tec .gt-aviso .ico { width: 14px; height: 14px; flex: none; }
.grupo-tec .gt-aviso.obs { color: var(--texto); }
.grupo-tec .gt-aviso.obs .ico { color: var(--campo-obs); }
/* Card do /app fechado: só o essencial; tocar abre (classe .aberto). */
.card.grupo-tec[data-expandir] { cursor: pointer; }
.grupo-tec .gt-alerta { display: grid; place-items: center; color: var(--campo-obs); }
.grupo-tec .gt-alerta .ico { width: 16px; height: 16px; }
.grupo-tec .gt-cab .gt-tipo + .gt-alerta, .grupo-tec .gt-cab .selo-composto + .gt-alerta { margin-left: 0; }
.grupo-tec:not(.aberto) { gap: 4px; }
.grupo-tec:not(.aberto) :is(.gt-aviso, .gt-rotas, .gt-m, .tel, .checklist) { display: none; }
.grupo-tec:not(.aberto) .gt-itens { gap: 0; }
.grupo-tec:not(.aberto) .gt-item { padding: 2px 4px; border: 0; border-radius: 0; background: none; }
.grupo-tec:not(.aberto) .gt-item :is(button, .selo-prio) { display: none; }
.grupo-tec:not(.aberto) .gt-p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grupo-tec:not(.aberto) .gt-item + .gt-item { border-top: 1px dashed var(--borda); }
.grupo-tec:not(.aberto) .gt-pe button:not(.primario, .tinto) { display: none; }
.grupo-tec:not(.aberto) .gt-pe:not(:has(button.primario, button.tinto)) { display: none; }
.grupo-tec .gt-pe [data-abrir] { display: none; }
.grupo-tec:not(.aberto) .gt-pe [data-abrir] { display: inline-flex; }
.grupo-tec:not(.aberto) { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; align-items: center; }
.grupo-tec:not(.aberto) > * { grid-column: 1; }
.grupo-tec:not(.aberto) > .gt-pe { grid-column: 2; grid-row: 1 / span 3; align-self: center; }

/* Queda: o mesmo card do /app (grupo-tec fechado), só de leitura. À direita, ícones em botões matizados de 44 px
   (chave = técnico, escudo = tático, raio = gerador): com "+" abre o card novo, na cor do conceito; com card aberto,
   a cor do passo dele (cinza na fila, branco deslocando, verde no local). Até 10 min (ou com presencial no local)
   vermelho matizado; depois, vermelho do sistema cheio; a que voltou, verde, no pé da Offline. */
.card.grupo-tec.queda { --cor-card: var(--campo-offline); }
.grupo-tec.queda .gt-estado { color: var(--campo-offline); }
.grupo-tec.queda .gt-sub .ico { width: 13px; height: 13px; vertical-align: -2px; color: var(--campo-local); }
.card.grupo-tec.q-alerta { --cor-card: var(--prio-urgente); background: var(--prio-urgente); border-color: var(--prio-urgente); color: #fff; }
.grupo-tec.q-alerta :is(.nm, .gt-estado, .gt-sub, .gt-sub .ico) { color: #fff; }
.card.grupo-tec.q-voltou { --cor-card: var(--ok); }
.grupo-tec.q-voltou .gt-estado { color: var(--ok); }
.q-separador { margin: 6px 4px 0; font-size: var(--t-0); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ok); }

.q-ic { --cor-q: var(--texto-2); }
.grupo-tec .gt-pe button.q-ic { position: relative; width: 44px; padding: 0; background: color-mix(in srgb, var(--cor-q) 14%, var(--superficie)); color: var(--cor-q); }
.grupo-tec .gt-pe button.q-ic .ico { width: 18px; height: 18px; color: inherit; }
.q-ic.cinza { --cor-q: var(--texto-2); }
.q-ic.branco { --cor-q: var(--texto); }
.q-ic.verde { --cor-q: var(--campo-local); }
.q-ic.laranja { --cor-q: var(--prio-critico); }
.q-ic.vermelho { --cor-q: var(--prio-urgente); }
.q-ic.cor-tecnico { --cor-q: var(--campo-tecnico); }
.q-ic.cor-tatico { --cor-q: var(--campo-tatico); }
.q-ic.cor-gerador { --cor-q: var(--campo-gerador); }
/* Indicador (gerador ligado): mesmo círculo, sem cara de botão. */
.grupo-tec .gt-pe span.q-ic { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; background: color-mix(in srgb, var(--cor-q) 14%, var(--superficie)); color: var(--cor-q); }
.grupo-tec .gt-pe span.q-ic .ico { width: 18px; height: 18px; color: inherit; }
/* Sobre o vermelho cheio, os círculos ficam na superfície (matiz não aparece em fundo colorido). */
.grupo-tec.q-alerta .gt-pe .q-ic { background: var(--superficie); }
.q-mais { position: absolute; top: 3px; right: 5px; font-size: 13px; font-weight: 700; line-height: 1; color: var(--cor-q); }
.grupo-tec:not(.aberto) .gt-pe:has(.q-ic) { display: flex; }
/* Queda com presencial no local: borda verde mais grossa (o condomínio não está desassistido). */
.card.grupo-tec.queda.com-pres { border: 3px solid var(--campo-local); }
/* Queda que voltou: Fechar (com observação opcional), matizado em verde. */
.grupo-tec.q-voltou .gt-pe button.q-fechar { background: color-mix(in srgb, var(--ok) 14%, var(--superficie)); color: var(--ok); }
/* Equipe: Em serviço ↔ Fora num toque (pílula; verde matizado quando em serviço). Usa as variáveis dos botões da Equipe. */
.eqn button.eqn-serv { --eqn-cor: var(--texto-2); }
.eqn button.eqn-serv.ativo { --eqn-borda: transparent; --eqn-fundo: color-mix(in srgb, var(--campo-local) 16%, var(--superficie)); --eqn-cor: var(--campo-local); }
/* Presencial com hora para acabar: 1 h antes, boné laranja piscando (e a borda da queda em laranja). */
.card.grupo-tec.queda.com-pres.vence { border-color: var(--prio-critico); }
.grupo-tec.queda .gt-sub .pres-vence, .grupo-tec.queda .gt-sub .pres-vence .ico { color: var(--prio-critico); }
.grupo-tec.queda .gt-sub .pres-vence .ico, .slot.pisca .ico { animation: slot-pisca 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .grupo-tec.queda .gt-sub .pres-vence .ico, .slot.pisca .ico { animation: none; } }
#pres-rapido #pres-rapido-limpar { margin-right: auto; color: var(--perigo); }

/* Botões da queda (2026-11-08): pílulas compactas com o "+" junto do ícone, alinhadas à direita na ordem do
   trilho. No vermelho cheio, branco translúcido (não círculos brancos sólidos); o estado de um card aberto
   continua na superfície, na cor do passo. */
.grupo-tec .gt-pe:has(.q-ic) { gap: 6px; }
.grupo-tec .gt-pe button.q-ic, .grupo-tec .gt-pe span.q-ic { width: auto; min-width: 48px; height: 40px; min-height: 40px; padding: 0 10px; gap: 1px; border-radius: 999px; }
.grupo-tec .gt-pe .q-ic .ico { width: 17px; height: 17px; }
.q-mais { position: static; font-size: 15px; font-weight: 700; line-height: 1; }
.grupo-tec.q-alerta .gt-pe .q-ic.novo { --cor-q: #fff; background: rgb(255 255 255 / 0.2); }
.grupo-tec.q-alerta .gt-pe .q-ic.novo:hover { background: rgb(255 255 255 / 0.3); }
@media (pointer: coarse) { .grupo-tec .gt-pe button.q-ic, .grupo-tec .gt-pe span.q-ic { height: 44px; min-height: 44px; } }

/* Card unificado: trocar o técnico só de um item (ícone, 44 px, matizado). */
button.troca-item, .grupo-tec button.troca-item { flex: none; min-width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: none; color: var(--destaque); cursor: pointer; }
button.troca-item .ico { width: 20px; height: 20px; }
.grupo-tec .gt-quem, .itens-composto .it-quem { display: flex; align-items: center; gap: 4px; margin-top: 2px; font-size: var(--t-1); font-weight: 600; color: var(--destaque); }
.grupo-tec .gt-quem .ico { width: 14px; height: 14px; }

/* Retorno de conserto temporário agendado (em espera): o card e a linha normais, esmaecidos; só o Retornar vivo. */
.card.espera .compacto .info, .card.espera .trilho-card > :not([data-acao="antecipar"]), .card.espera .detalhe > :not(.acoes-campo),
.card.espera .acoes-campo > :not([data-acao="antecipar"]), .card.grupo-tec.espera > :not(.gt-pe),
.card.grupo-tec.espera .gt-pe > :not([data-acao="antecipar"]), .gt-item.espera > :not(button.antecipar), .cp-itens li.espera > :not(button.antecipar) { opacity: 0.5; filter: grayscale(1); }
.card button[data-acao="antecipar"][data-acao], .card.grupo-tec button[data-acao="antecipar"][data-acao] { min-height: 44px; padding: 0 10px; border: 0; border-radius: 8px; background: none; box-shadow: none; color: var(--texto-2); font-weight: 600; font-size: var(--t-1); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; flex: none; }

/* Card técnico do cliente dividido por técnico: o meu (ou o mais antigo) em cima; cada bloco com os passos dele. */
.gt-bloco { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid var(--borda); border-radius: 12px; background: var(--superficie); }
.gt-bloco.meu { border: 1.5px solid color-mix(in srgb, var(--destaque) 45%, var(--borda)); }
.gt-bloco.sem { background: color-mix(in srgb, var(--texto-2) 5%, var(--superficie)); }
.gt-bloco .gb-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: var(--t-1); }
.gt-bloco .gb-cab b { color: var(--texto); }
.gt-bloco .gt-itens { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.gt-bloco .gb-pe { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.gt-item.feito { opacity: 0.6; }
.gt-item.feito .ico { width: 14px; height: 14px; vertical-align: -2px; color: var(--ok); }
.grupo-tec:not(.aberto) .gt-bloco { padding: 4px 6px; gap: 2px; }
.grupo-tec:not(.aberto) .gt-bloco .gb-pe button:not(.primario) { display: none; }
.grupo-tec:not(.aberto) .gt-bloco:not(:first-of-type) .gb-pe { display: none; }
.grupo-tec:not(.aberto) .gt-bloco + .gt-bloco { margin-top: 2px; }
.grupo-tec:not(.aberto) > .gt-bloco { grid-column: 1 / -1; }
.composto-painel .cp-itens li.cp-sep { padding-top: 8px; border-bottom: 0; color: var(--texto-2); }
.composto-painel .cp-itens li.cp-sep b { color: var(--texto); }
.composto-painel .cp-itens li.feito { opacity: 0.6; }
.composto-painel .cp-itens li.feito .ico { width: 14px; height: 14px; color: var(--ok); }

/* Check-out: por chamado, a lista de duas opções no padrão iOS (igual à Pausa). */
dialog#saida { width: 100%; max-width: min(420px, calc(100vw - 32px)); border-radius: 14px; }
#saida .dialogo { max-height: calc(100dvh - 40px); overflow-y: auto; box-sizing: border-box; }
.saida-itens { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.saida-itens li { display: flex; flex-direction: column; gap: 8px; }
#saida .saida-itens .opcoes-tit { font-weight: 600; text-transform: none; letter-spacing: 0; font-size: var(--t-1); color: var(--texto); overflow-wrap: anywhere; }
#saida .botoes button { min-height: 44px; border-radius: 999px; padding: 0 18px; }

/* Pausa do técnico: etiqueta com o motivo (o card fica no topo de Aguardando). */
.tag-pausa { display: inline-block; margin-right: 6px; padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--atencao) 18%, var(--superficie)); color: var(--texto); font-size: var(--t-1); font-weight: 600; white-space: nowrap; }

/* Lista de opções no padrão iOS (lista agrupada): uma linha de 44 px por opção, ✓ na escolhida. Usada na Pausa. */
.dialogo .opcoes-tit { margin: 6px 4px -4px; font-size: var(--t-0); font-weight: 600; color: var(--texto-2); text-transform: uppercase; letter-spacing: 0.02em; }
.dialogo .opcoes-tit label { font: inherit; color: inherit; }
.lista-opcoes { display: flex; flex-direction: column; border: 1px solid var(--borda); border-radius: 12px; overflow: hidden; background: var(--superficie-2, var(--superficie)); }
.lista-opcoes .opcao { position: relative; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 14px; font-size: var(--t-2); font-weight: 400; color: var(--texto); text-transform: none; letter-spacing: 0; cursor: pointer; }
.lista-opcoes .opcao + .opcao { border-top: 1px solid var(--borda); }
.lista-opcoes .opcao input { position: absolute; opacity: 0; pointer-events: none; }
.lista-opcoes .opcao span { flex: 1; min-width: 0; }
.lista-opcoes .opcao .ico { width: 18px; height: 18px; color: var(--destaque); visibility: hidden; }
.lista-opcoes .opcao:has(input:checked) { font-weight: 600; }
.lista-opcoes .opcao:has(input:checked) .ico { visibility: visible; }
.lista-opcoes .opcao:active { background: color-mix(in srgb, var(--texto) 6%, transparent); }
.lista-opcoes .opcao:has(input:focus-visible) { outline: 2px solid var(--destaque); outline-offset: -2px; }
.dialogo .campo-cheio { width: 100%; box-sizing: border-box; min-height: 44px; padding: 8px 12px; border-radius: 12px; }
.dialogo .opcoes-rod { font-size: var(--t-1); }
#saida [hidden] { display: none !important; }
.saida-passo { display: flex; flex-direction: column; gap: 10px; }
/* Escolha do Check-out: linhas que levam ao passo seguinte (título, legenda e › à direita). */
.lista-nav .opcao { width: 100%; margin: 0; border: 0; border-radius: 0; background: none; text-align: left; font: inherit; min-height: 56px; }
.lista-nav .opcao + .opcao { border-top: 1px solid var(--borda); }
.lista-nav .opcao span { display: flex; flex-direction: column; gap: 2px; }
.lista-nav .opcao b { font-size: var(--t-2); font-weight: 600; color: var(--texto); }
.lista-nav .opcao small { font-size: var(--t-1); color: var(--texto-2); }
.lista-nav .chevron { width: 8px; height: 8px; border-right: 2px solid var(--texto-2); border-top: 2px solid var(--texto-2); transform: rotate(45deg); margin-right: 4px; flex: none; }
.lista-nav .opcao:focus-visible { outline: 2px solid var(--destaque); outline-offset: -2px; }