/* Casamax · Frota — base visual do sistema. CSS puro, sem framework nem build.
 *
 * Direção (docs/design-referencias.md, seção 6): utilitária (Carbon, GOV.UK) com a marca
 * Casamax. Grafite como base; o vermelho é assinatura (logo e barra do topo), nunca cor de
 * ação nem de status. Cor só para status e seleção. Linhas de 32px nas tabelas e 24px na grade.
 * Grade de 4/8px. Texto 14px na fonte do sistema; Montserrat só no logo e no título da página.
 */

/* ------------------------------------------------------------------ tokens */

:root {
  /* marca */
  --marca: #A60101;
  --marca-viva: #E3000F;
  --topo-fundo: #1A1A1A;
  --topo-texto: #F1F2F3;
  --topo-suave: #A9AFB7;

  /* neutros: grafite com leve viés frio */
  --fundo: #F3F4F5;
  --superficie: #FFFFFF;
  --superficie-2: #F7F8F9;
  --superficie-3: #ECEEF0;
  --texto: #1A1A1A;
  --texto-2: #454C54;
  --texto-3: #626A74;
  --borda: #DCDFE3;
  --borda-forte: #B7BCC3;

  /* ação e interação: grafite para o botão principal, azul só para foco e seleção */
  --acao: #1F2226;
  --acao-hover: #3A3F45;
  --acao-texto: #FFFFFF;
  --foco: #0B5FD9;
  --selecao: #DCE8FB;
  --selecao-forte: #B7D0F6;
  --link: #0A55C4;

  /* status: bom · atenção · crítico (a lógica dos relatórios aceitos) */
  --bom: #1B7338;
  --bom-fundo: #E5F3E9;
  --atencao: #7F5300;
  --atencao-fundo: #FFF3D4;
  --atencao-traco: #D99A17;
  --critico: #B3261E;
  --critico-fundo: #FCE8E6;
  --neutro: #4F5660;
  --neutro-fundo: #ECEEF0;

  /* grade placa × dia */
  --cel-foco: #CDD2D8;
  --cel-outra: #E4E7EB;
  --cal-aqui: #4F5660;
  --cal-fora: #C3C8CF;

  /* séries dos gráficos: ordem fixa, validada para daltonismo nos pares vizinhos */
  --s1: #2A78D6;
  --s2: #EB6834;
  --s3: #1BAF7A;
  --s4: #EDA100;
  --s5: #E87BA4;
  --s6: #4A3AA7;
  --cel-fds: #F7F8F9;
  --cel-fechada: repeating-linear-gradient(0deg, transparent 0 3px, rgba(26, 26, 26, .035) 3px 4px);
  --cel-lacuna: repeating-linear-gradient(135deg, var(--atencao-fundo) 0 3px, transparent 3px 6px);

  /* tipografia */
  --fonte: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --fonte-marca: "Montserrat", "Segoe UI Black", "Arial Black", var(--fonte);
  --fonte-mono: "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
  --t-12: 12px;
  --t-13: 13px;
  --t-14: 14px;
  --t-16: 16px;
  --t-20: 20px;

  /* espaço (grade de 4/8) e medidas */
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 24px;
  --e-6: 32px;
  --linha: 32px;         /* tabela */
  --linha-grade: 24px;   /* grade de alocação */
  --controle: 32px;      /* altura de campo e botão no computador */
  --raio: 3px;
  --topo-altura: 48px;
  --painel-largura: 520px;
  --sombra-painel: -8px 0 24px rgba(20, 22, 25, .10);
}

:root[data-theme="dark"] {
  --topo-fundo: #0C0D0E;
  --fundo: #121416;
  --superficie: #1A1D20;
  --superficie-2: #1F2326;
  --superficie-3: #272B30;
  --texto: #E9EBEE;
  --texto-2: #B9BFC7;
  --texto-3: #959DA7;
  --borda: #30353B;
  --borda-forte: #4A5159;
  --acao: #E9EBEE;
  --acao-hover: #C9CED4;
  --acao-texto: #121416;
  --foco: #6AA5FF;
  --selecao: #1C3252;
  --selecao-forte: #28497A;
  --link: #8AB8FF;
  --bom: #6CCB8A;
  --bom-fundo: #16301F;
  --atencao: #F0C060;
  --atencao-fundo: #3A2D0E;
  --atencao-traco: #C99A2E;
  --critico: #FF9187;
  --critico-fundo: #3F1714;
  --neutro: #B9BFC7;
  --neutro-fundo: #272B30;
  --cel-foco: #3E454D;
  --cel-outra: #2B3035;
  --cal-aqui: #B9BFC7;
  --cal-fora: #454C54;
  --s1: #3987E5;
  --s2: #D95926;
  --s3: #199E70;
  --s4: #C98500;
  --s5: #D55181;
  --s6: #9085E9;
  --cel-fds: #1D2024;
  --cel-fechada: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255, 255, 255, .03) 3px 4px);
  --sombra-painel: -8px 0 24px rgba(0, 0, 0, .45);
  color-scheme: dark;
}

/* ------------------------------------------------------------------ base */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font: var(--t-14)/20px var(--fonte);
  color: var(--texto);
  background: var(--fundo);
}

h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }

a { color: var(--link); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 1px;
}

.num, td.num, th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.cod {
  font-family: var(--fonte-mono);
  font-size: var(--t-13);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

.suave { color: var(--texto-3); }
.fraco { color: var(--texto-2); }
.oculto-visual {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

kbd, .kbd {
  display: inline-block;
  min-width: 20px;
  padding: 0 5px;
  font: 600 var(--t-12)/18px var(--fonte-mono);
  text-align: center;
  color: var(--texto-2);
  background: var(--superficie);
  border: 1px solid var(--borda-forte);
  border-bottom-width: 2px;
  border-radius: var(--raio);
}

/* a navegação mora em menu.css (menu lateral); o topo deixou de existir no computador */

/* ------------------------------------------------------------------ página */

.pagina {
  padding: var(--e-5) var(--e-5) var(--e-6);
  max-width: 1680px;
  margin: 0 auto;
}

.cabecalho-pagina {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--e-3) var(--e-5);
  margin-bottom: var(--e-4);
}
.cabecalho-pagina > div:first-child { min-width: 0; flex: 1 1 360px; }
.cabecalho-pagina h1 {
  font: 700 var(--t-20)/28px var(--fonte-marca);
  letter-spacing: -.005em;
}
.cabecalho-pagina p {
  margin-top: 2px;
  color: var(--texto-2);
  max-width: 80ch;
}
.acoes { display: flex; flex-wrap: wrap; gap: var(--e-2); }

h2.secao {
  font-size: var(--t-14);
  font-weight: 600;
  line-height: 20px;
  margin: var(--e-5) 0 var(--e-2);
}
h2.secao .suave { font-weight: 400; }

/* ------------------------------------------------------------------ botões e campos */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  height: var(--controle);
  padding: 0 var(--e-3);
  font: 600 var(--t-14)/1 var(--fonte);
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}
.btn:hover { background: var(--superficie-3); }
.btn:disabled, .btn[aria-disabled="true"] {
  color: var(--texto-3);
  background: var(--superficie-2);
  border-color: var(--borda);
  cursor: not-allowed;
}
.btn-primario {
  color: var(--acao-texto);
  background: var(--acao);
  border-color: var(--acao);
}
.btn-primario:hover { background: var(--acao-hover); border-color: var(--acao-hover); }
.btn-fantasma { background: transparent; border-color: transparent; }
.btn-fantasma:hover { background: var(--superficie-3); }
.btn .kbd { margin-right: -4px; }
.btn-primario .kbd { color: inherit; background: transparent; border-color: currentColor; opacity: .7; }

.link-botao {
  padding: 0;
  font: inherit;
  color: var(--link);
  background: none;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.campo { display: grid; gap: var(--e-1); min-width: 0; }
.campo > label, .campo > .rotulo {
  font-size: var(--t-13);
  font-weight: 600;
  color: var(--texto-2);
}
.campo .dica { font-size: var(--t-12); color: var(--texto-3); }
.campo .erro-campo { font-size: var(--t-13); font-weight: 600; color: var(--critico); }
/* TRV-03: o campo obrigatório se anuncia antes do envio; o leitor de tela já lê o required */
.campo:has(:is(input, select, textarea)[required]) > label::after {
  content: "obrigatório"; margin-left: var(--e-2); font-size: var(--t-12); font-weight: 500; font-style: italic;
  letter-spacing: normal; text-transform: none; color: var(--texto-3);
}
/* TRV-02: o texto de "Outro" no Motivo (_motivo.html). Sem JS fica à vista; com JS, só aparece com "Outro" escolhido */
.campo .motivo-outro { margin-top: var(--e-1); }
.com-js .campo .motivo-outro, .com-js .motivo-sem-js { display: none; }
.com-js .campo:has(> select[data-motivo] option[value="Outro"]:checked) > .motivo-outro { display: grid; }

input[type="text"], input[type="search"], input[type="date"], input[type="number"], input[type="password"], input[type="tel"], input[type="url"],
input[type="email"], select, textarea {
  width: 100%;
  min-width: 0;
  height: var(--controle);
  padding: 0 var(--e-2);
  font: var(--t-14)/1 var(--fonte);
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
}
textarea { height: auto; min-height: 72px; padding: 6px var(--e-2); line-height: 20px; resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: var(--texto-3); }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: -1px;
  border-color: var(--foco);
}
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--critico); box-shadow: inset 3px 0 0 var(--critico); }
input[type="checkbox"], input[type="radio"] {
  width: 16px; height: 16px; margin: 0;
  accent-color: var(--acao);
  vertical-align: middle;
}

.opcao { display: flex; align-items: flex-start; gap: var(--e-2); line-height: 20px; }
.opcao input { margin-top: 2px; }

.formulario { display: grid; gap: var(--e-4); }
.formulario .linha-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--e-3); }
.formulario .rodape-form {
  display: flex; flex-wrap: wrap; gap: var(--e-2);
  padding-top: var(--e-4);
  border-top: 1px solid var(--borda);
}

/* ------------------------------------------------------------------ barra de ferramentas e de lote */

.barra-ferramentas {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--e-2) var(--e-3);
  padding: var(--e-3);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-bottom: 0;
  border-radius: var(--raio) var(--raio) 0 0;
}
.barra-ferramentas .campo { flex: 0 1 200px; }
.barra-ferramentas .campo.largo { flex: 1 1 260px; }
.barra-ferramentas .opcao { align-self: center; height: var(--controle); align-items: center; }
.barra-ferramentas .opcao input { margin-top: 0; }
.barra-ferramentas .direita { margin-left: auto; display: flex; gap: var(--e-2); align-items: center; }

/* Com seleção, a barra de lote substitui a de ferramentas (Polaris, Carbon). */
.barra-lote {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2) var(--e-4);
  min-height: 58px;
  padding: var(--e-2) var(--e-3);
  color: var(--acao-texto);
  background: var(--acao);
  border-radius: var(--raio) var(--raio) 0 0;
}
.barra-lote strong { font-weight: 600; }
.barra-lote .btn { background: transparent; color: var(--acao-texto); border-color: rgba(255, 255, 255, .45); }
:root[data-theme="dark"] .barra-lote .btn { border-color: rgba(0, 0, 0, .35); }
.barra-lote .btn:hover { background: rgba(127, 127, 127, .2); }
.barra-lote .direita { margin-left: auto; display: flex; gap: var(--e-2); }

.contagem {
  padding: var(--e-2) var(--e-3);
  font-size: var(--t-13);
  color: var(--texto-2);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-bottom: 0;
}

/* ------------------------------------------------------------------ tabela densa */

.tabela-caixa {
  overflow-x: auto;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 0 0 var(--raio) var(--raio);
}
.tabela-caixa.solta { border-radius: var(--raio); }

.tabela {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--t-14);
}
.tabela th, .tabela td {
  height: var(--linha);
  padding: 0 var(--e-3);
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--borda);
  vertical-align: middle;
}
.tabela thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  font-size: var(--t-13);
  font-weight: 600;
  color: var(--texto-2);
  background: var(--superficie-2);
  border-bottom-color: var(--borda-forte);
}
.tabela thead th.num { text-align: right; }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover td { background: var(--superficie-2); }
.tabela tbody tr.clicavel { cursor: pointer; }
.tabela tbody tr[aria-selected="true"] td { background: var(--selecao); }
.tabela tbody tr.aberta td { background: var(--selecao); box-shadow: inset 0 1px 0 var(--foco), inset 0 -1px 0 var(--foco); }
.tabela tbody tr.aberta td:first-child { box-shadow: inset 3px 0 0 var(--foco), inset 0 1px 0 var(--foco), inset 0 -1px 0 var(--foco); }
.tabela td.marcar, .tabela th.marcar { width: 40px; padding-right: 0; }
.tabela .sub { display: block; font-size: var(--t-12); line-height: 14px; color: var(--texto-3); }
.tabela.compacta th, .tabela.compacta td { height: 28px; padding: 0 var(--e-2); }
.tabela.compacta td:first-child, .tabela.compacta th:first-child { padding-left: 0; }
.tabela.compacta td:last-child, .tabela.compacta th:last-child { padding-right: 0; }

.rolagem-x { overflow-x: auto; overflow-y: hidden; }

.mais-linhas {
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-3);
  border-top: 1px solid var(--borda);
  font-size: var(--t-13);
  color: var(--texto-2);
}

.vazio {
  padding: var(--e-6) var(--e-4);
  color: var(--texto-2);
  text-align: left;
}
.vazio strong { display: block; color: var(--texto); margin-bottom: var(--e-1); }

/* ------------------------------------------------------------------ selo de status: cor + forma + texto */

.selo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 var(--e-2);
  font-size: var(--t-13);
  font-weight: 600;
  line-height: 1;
  border-radius: 2px;
  white-space: nowrap;
  color: var(--neutro);
  background: var(--neutro-fundo);
}
.selo::before { font-size: 10px; line-height: 1; content: "●"; }
.selo-bom { color: var(--bom); background: var(--bom-fundo); }
.selo-atencao { color: var(--atencao); background: var(--atencao-fundo); }
.selo-atencao::before { content: "▲"; font-size: 9px; }
.selo-critico { color: var(--critico); background: var(--critico-fundo); }
.selo-critico::before { content: "■"; font-size: 9px; }
.selo-neutro::before { content: "●"; }
.selo-simples { background: transparent; padding: 0; font-weight: 400; color: var(--texto-2); }

/* ------------------------------------------------------------------ avisos e mensagens (texto de aviso do GOV.UK) */

.aviso {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: var(--e-2);
  padding: var(--e-3);
  font-size: var(--t-14);
  color: var(--texto);
  background: var(--atencao-fundo);
  border-left: 4px solid var(--atencao-traco);
}
.aviso::before { content: "▲"; color: var(--atencao); font-size: 13px; line-height: 20px; }
.aviso strong { font-weight: 600; }
.aviso-critico { background: var(--critico-fundo); border-left-color: var(--critico); }
.aviso-critico::before { content: "■"; color: var(--critico); }
.aviso-info { background: var(--superficie-2); border-left-color: var(--borda-forte); }
.aviso-info::before { content: "i"; font: 700 13px/20px Georgia, serif; color: var(--texto-2); text-align: center; }
.aviso-bom { background: var(--bom-fundo); border-left-color: var(--bom); }
.aviso-bom::before { content: "✓"; color: var(--bom); }
.aviso .acoes-aviso { display: flex; gap: var(--e-3); margin-top: var(--e-1); }

.lista-avisos { display: grid; gap: var(--e-2); margin: 0; padding: 0; list-style: none; }

/* ------------------------------------------------------------------ ficha: campo, valor e "Alterar" (summary list) */

.ficha { margin: 0; border-top: 1px solid var(--borda); }
.ficha > div {
  display: grid;
  grid-template-columns: minmax(120px, 34%) 1fr auto;
  gap: var(--e-3);
  padding: 6px 0;
  border-bottom: 1px solid var(--borda);
  align-items: baseline;
}
.ficha dt { color: var(--texto-2); font-size: var(--t-13); }
.ficha dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.ficha .alterar { font-size: var(--t-13); }

/* ------------------------------------------------------------------ painel lateral de detalhe (Stripe, Linear) */

.painel {
  position: fixed;
  top: calc(var(--topo-altura) + env(safe-area-inset-top, 0px));
  right: 0;
  bottom: 0;
  z-index: 25;
  display: flex;
  flex-direction: column;
  width: min(var(--painel-largura), 100vw);
  background: var(--superficie);
  border-left: 1px solid var(--borda-forte);
  box-shadow: var(--sombra-painel);
}
.painel-cabecalho {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  padding: var(--e-4) var(--e-4) var(--e-3);
  border-bottom: 1px solid var(--borda);
}
.painel-cabecalho > div:first-child { flex: 1; min-width: 0; }
.painel-cabecalho .rotulo-painel {
  font-size: var(--t-12);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texto-3);
}
.painel-cabecalho h1, .painel-cabecalho h2 { font-size: var(--t-16); font-weight: 600; line-height: 24px; }
.painel-cabecalho .cod { font-size: var(--t-16); }
.painel-navegar { display: flex; gap: var(--e-1); flex: none; }
.painel-navegar .btn { width: var(--controle); padding: 0; }
.painel-navegar .btn.btn-texto { width: auto; padding: 0 var(--e-3); }
.painel-corpo {
  flex: 1;
  overflow-y: auto;
  padding: var(--e-4);
  display: grid;
  align-content: start;
  gap: var(--e-5);
}
.painel-corpo section { display: grid; gap: var(--e-2); min-width: 0; }
.painel-corpo h3 {
  font-size: var(--t-13);
  font-weight: 600;
  color: var(--texto-2);
  display: flex; align-items: baseline; gap: var(--e-2);
}
.painel-corpo h3 .direita { margin-left: auto; font-weight: 400; }
.painel-rodape {
  display: flex; flex-wrap: wrap; gap: var(--e-2);
  padding: var(--e-3) var(--e-4);
  border-top: 1px solid var(--borda);
  background: var(--superficie-2);
}

/* a mesma ficha numa página só (link direto e celular) */
.painel.painel-pagina {
  position: static; width: auto; max-width: 860px;
  border: 1px solid var(--borda); box-shadow: none; animation: none;
}
.voltar { margin-bottom: var(--e-3); font-size: var(--t-13); }

/* Ficha do ativo e da obra: aberta a partir da lista, é uma janela grande sobre ela, em duas
 * colunas (pedido de 07/10/2026: o painel lateral de 520px era pequeno para tanta informação).
 * Fecha na hora com ✕, Esc ou clique fora: a lista continua atrás, na mesma rolagem. */
.painel-fundo { position: fixed; inset: 0; z-index: 24; background: rgba(15, 17, 19, .5); cursor: default; }
body:has(.painel-fundo) { overflow: hidden; }
.painel:not(.painel-pagina):not(.painel-largo) {
  top: calc(var(--topo-altura) + env(safe-area-inset-top, 0px) + 16px);
  bottom: 16px;
  left: 0;
  right: 0;
  margin-inline: auto;
  width: min(1360px, calc(100vw - 32px));
  border: 1px solid var(--borda-forte);
  border-radius: 6px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .35);
  overflow: hidden;
}
.painel:not(.painel-pagina):not(.painel-largo) .painel-cabecalho { padding: var(--e-4) var(--e-5); align-items: center; }
.painel:not(.painel-largo) .painel-cabecalho :is(h1, h2) { font-size: var(--t-20); line-height: 28px; }
.painel:not(.painel-largo) .painel-cabecalho .cod { font-size: inherit; }
.painel:not(.painel-pagina):not(.painel-largo) .painel-corpo { padding: var(--e-5); }
.painel.painel-pagina:not(.painel-largo) { max-width: 1360px; }
.ficha-colunas { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--e-6); align-items: start; }
.ficha-colunas > div { display: grid; gap: var(--e-5); align-content: start; min-width: 0; }
.ficha-colunas .mapa-vivo { height: min(46vh, 460px); }
/* canto do polígono no mapa: dá para arrastar */
.canto-area { background: #fff; border: 2.5px solid var(--s1); border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); cursor: grab; }
.canto-area:active { cursor: grabbing; }
.destaque-linha { font-size: var(--t-16); line-height: 24px; }
@media (max-width: 1000px) { .ficha-colunas { grid-template-columns: 1fr; gap: var(--e-5); } }

/* Ficha da área: o mapa ocupa a esquerda e fica na tela enquanto a direita rola; a cobertura
 * (que o mapa recalcula a cada ajuste) vem em destaque, antes do formulário. */
.ficha-colunas.ficha-mapa { grid-template-columns: minmax(0, 1.8fr) minmax(360px, 1fr); }
.painel:not(.painel-pagina) .ficha-mapa .coluna-mapa { position: sticky; top: 0; }
.ficha-mapa .mapa-vivo { height: calc(100vh - 340px); min-height: 360px; }
/* crédito do Google sobre o mapa (exigência de uso dos azulejos): sem nada por cima nem encostado */
.credito-google { margin: 0 0 5px 10px !important; padding: 0; font: 600 14px/18px var(--fonte); color: #fff; text-shadow: 0 0 3px rgba(0, 0, 0, .9), 0 1px 2px rgba(0, 0, 0, .8); pointer-events: none; }
.leaflet-control-layers { border-radius: 8px !important; font: 13px/1.4 var(--fonte); }
.busca-lugar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e-2) var(--e-3); }
.busca-lugar .campo { flex: 1 1 240px; }
.acoes-mapa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-2) var(--e-4); }
.medida-grande { display: flex; align-items: center; gap: var(--e-3); }
.medida-grande strong { flex: none; font: 700 40px/44px var(--fonte-marca); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.medida-grande > span { color: var(--texto-2); }
@media (max-width: 1000px) {
  .ficha-colunas.ficha-mapa { grid-template-columns: 1fr; }
  .painel .ficha-mapa .coluna-mapa { position: static; }
  .ficha-mapa .mapa-vivo { height: 360px; }
}

/* ficha com mapa (Geofences): painel mais largo e o mapa do Leaflet */
.painel.painel-largo { width: min(720px, 100vw); }
.painel.painel-largo.painel-pagina { width: auto; max-width: 1080px; }
.mapa-vivo { height: 340px; border: 1px solid var(--borda); background: var(--superficie-2); z-index: 0; }
/* Cores dos contornos e do marcador no mapa (OBR-01, MAQ-08). Fixas, sem versão escura: o fundo (mapa claro ou
 * satélite) não muda com o tema da tela. Conferidas pelo validador de dataviz: área × a aprovar com ΔE 21,8 (visão
 * normal e daltonismo); as duas acima de 3:1 sobre o mapa claro e sobre o halo branco. Sobre o satélite ficam abaixo de
 * 3:1 (2,7:1 e 1,4:1), por isso o halo branco, mais espesso no satélite. O estado não depende da cor: aprovada em traço
 * cheio, a aprovar tracejada, com legenda. */
:root { --mapa-area: #2A78D6; --mapa-outra: #454C54; --mapa-halo: #FFFFFF; }
.painel-pagina .mapa-vivo { height: min(62vh, 560px); }
.mapa-vivo.mapa-fora { height: auto; padding: var(--e-3); color: var(--texto-2); font-size: var(--t-13); }
.legenda-mapa { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-4); margin: 0; padding: 0; list-style: none; font-size: var(--t-12); color: var(--texto-2); }
.legenda-mapa li { display: inline-flex; align-items: center; gap: 6px; }
.marca-mapa { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--s3); }
.marca-mapa.mm-ligou { background: var(--s3); }
.marca-mapa.mm-area { border-color: var(--s1); background: color-mix(in srgb, var(--s1) 18%, transparent); }
.marca-mapa.mm-outra { border: 2px dashed var(--texto-2); }
.mapa-vivo.mapa-geral { height: min(72vh, 720px); }
.forma-area { display: grid; gap: var(--e-2); margin: 0; padding: var(--e-3); border: 1px solid var(--borda); min-width: 0; }
.forma-area legend { padding: 0 var(--e-1); font-size: var(--t-13); font-weight: 600; color: var(--texto-2); }
.forma-area [hidden] { display: none; }
.alternar-forma { display: flex; gap: var(--e-4); }
#area-coordenadas { font-family: var(--fonte-mono); font-size: var(--t-13); }
.formulario-linha { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e-2) var(--e-3); margin-top: var(--e-2); }
.formulario-linha .campo { flex: 1 1 140px; }

/* ------------------------------------------------------------------ revisão antes de confirmar */

.revisao { display: grid; gap: var(--e-4); }
.revisao-pagina { max-width: 720px; }
.revisao .resumo {
  padding: var(--e-3) var(--e-4);
  font-size: var(--t-16);
  line-height: 24px;
  background: var(--superficie-2);
  border: 1px solid var(--borda);
}
.revisao .de-para { white-space: nowrap; }
.revisao .de-para .seta { color: var(--texto-3); padding: 0 4px; }

.fichas { display: flex; flex-wrap: wrap; gap: var(--e-1); }
.ficha-item {
  display: inline-flex; align-items: center; height: 24px; padding: 0 var(--e-2);
  font: var(--t-13)/1 var(--fonte-mono);
  background: var(--superficie-3);
  border-radius: 2px;
}

/* ------------------------------------------------------------------ abas */

.abas {
  display: flex;
  gap: var(--e-1);
  margin-bottom: var(--e-3);
  border-bottom: 1px solid var(--borda-forte);
  overflow-x: auto;
  overflow-y: hidden;
}
.abas button, .abas a {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 var(--e-3);
  margin-bottom: -1px;
  font: 600 var(--t-14)/1 var(--fonte);
  color: var(--texto-2);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}
.abas button:hover, .abas a:hover { color: var(--texto); }
.abas button[aria-selected="true"], .abas a[aria-current="page"] { color: var(--texto); border-bottom-color: var(--texto); }

/* Formulário que só abre quando se pede (nova obra, alterar um projeto). */
.recolhe > summary { cursor: pointer; color: var(--texto-2); font-size: var(--t-13); width: fit-content; }
.recolhe > summary:hover { color: var(--texto); }
.recolhe[open] > summary { margin-bottom: var(--e-2); }
.abas .contador { font-weight: 400; color: var(--texto-3); margin-left: 4px; }

/* ------------------------------------------------------------------ grade placa × dia (Alocação) */

.grade-caixa {
  position: relative;
  overflow: auto;
  max-height: calc(100vh - 290px);
  min-height: 320px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 0 0 var(--raio) var(--raio);
  outline: none;
}
.grade-caixa:focus-visible { box-shadow: inset 0 0 0 2px var(--foco); }

.grade {
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--t-12);
  user-select: none;
  -webkit-user-select: none;
}
.grade th, .grade td {
  height: var(--linha-grade);
  padding: 0;
  border-right: 1px solid var(--borda);
  border-bottom: 1px solid var(--borda);
  white-space: nowrap;
}
.grade thead th {
  position: sticky;
  top: 0;
  z-index: 4;
  height: 40px;
  font-weight: 600;
  color: var(--texto-2);
  background: var(--superficie-2);
  border-bottom-color: var(--borda-forte);
  text-align: center;
  line-height: 14px;
}
.grade thead th .dia-semana { display: block; font-weight: 400; color: var(--texto-3); font-size: 11px; }
.grade thead th.fds { background: var(--superficie-3); }
.grade thead th.hoje { color: var(--foco); box-shadow: inset 0 -3px 0 var(--foco); }
.grade thead th.hoje .dia-semana { color: var(--foco); }

/* colunas fixas: código, placa e equipamento */
.grade .fixa {
  position: sticky;
  z-index: 3;
  padding: 0 var(--e-2);
  text-align: left;
  background: var(--superficie);
}
.grade thead .fixa { z-index: 5; background: var(--superficie-2); text-align: left; vertical-align: bottom; padding-bottom: 6px; }
.grade .f1 { left: 0; width: 96px; min-width: 96px; }
.grade .f2 { left: 96px; width: 80px; min-width: 80px; }
.grade .f3 { left: 176px; width: 168px; min-width: 168px; max-width: 168px; overflow: hidden; text-overflow: ellipsis; border-right: 1px solid var(--borda-forte); }
.grade td.fixa { font-size: var(--t-13); }
.grade td.f1, .grade td.f2 { font-family: var(--fonte-mono); font-size: var(--t-12); }
.grade td.f3 { color: var(--texto-2); }
.grade tr.linha-foco td.fixa { background: var(--selecao); }

.grade td.dia {
  position: relative;
  width: 30px;
  min-width: 30px;
  max-width: 30px;
  cursor: cell;
  background: var(--superficie);
}
.grade td.dia.fds { background: var(--cel-fds); }
.grade td.dia.a-outro { background: var(--cel-outra); }
.grade td.dia.a-foco { background: var(--cel-foco); }
.grade td.dia.lacuna { background: var(--cel-lacuna); }
.grade td.dia.fechado::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--cel-fechada);
}
.grade td.dia.inicio { box-shadow: inset 2px 0 0 var(--texto-3); }
.grade td.dia .rotulo {
  position: absolute;
  z-index: 1;
  left: 4px;
  top: 0;
  overflow: hidden;
  font: 600 11px/23px var(--fonte-mono);
  color: var(--texto);
  pointer-events: none;
  white-space: nowrap;
}
.grade td.dia.a-outro .rotulo { color: var(--texto-2); font-weight: 400; }

/* avisos que persistem na célula: 1 dia, ida e volta, 5+ trocas, contestação */
.grade td.dia.suspeito { box-shadow: inset 0 -3px 0 var(--atencao-traco); }
.grade td.dia.suspeito.inicio { box-shadow: inset 2px 0 0 var(--texto-3), inset 0 -3px 0 var(--atencao-traco); }
.grade td.dia.contestado::before {
  content: ""; position: absolute; right: 0; top: 0; z-index: 1;
  border-style: solid; border-width: 0 8px 8px 0;
  border-color: transparent var(--critico) transparent transparent;
}
.grade td.dia.novo { box-shadow: inset 0 0 0 1px var(--bom); }

/* foco e seleção */
.grade td.dia.sel { background: var(--selecao); }
.grade td.dia.sel.a-foco, .grade td.dia.sel.a-outro { background: var(--selecao-forte); }
.grade td.dia.focada { outline: 2px solid var(--foco); outline-offset: -2px; z-index: 2; }

.grade tr.grupo th {
  position: sticky;
  left: 0;
  z-index: 3;
  height: 28px;
  padding: 0 var(--e-2);
  text-align: left;
  font-size: var(--t-13);
  font-weight: 600;
  color: var(--texto);
  background: var(--superficie-3);
  border-bottom-color: var(--borda-forte);
}
.grade tr.grupo th .suave { font-weight: 400; }
.grade tr.grupo td { background: var(--superficie-3); border-bottom-color: var(--borda-forte); }

.legenda {
  display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4);
  padding: var(--e-2) 0;
  font-size: var(--t-12);
  color: var(--texto-2);
}
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.legenda i {
  display: inline-block; width: 18px; height: 14px; position: relative;
  border: 1px solid var(--borda-forte); background: var(--superficie);
}
.legenda i.l-foco { background: var(--cel-foco); }
.legenda i.l-outro { background: var(--cel-outra); }
.legenda i.l-lacuna { background: var(--cel-lacuna); }
.legenda i.l-suspeito { box-shadow: inset 0 -3px 0 var(--atencao-traco); }
.legenda i.l-fechado { background: var(--cel-fechada), var(--superficie); }
.legenda i.l-contestado::before {
  content: ""; position: absolute; right: 0; top: 0;
  border-style: solid; border-width: 0 7px 7px 0;
  border-color: transparent var(--critico) transparent transparent;
}

.barra-selecao {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2) var(--e-4);
  padding: var(--e-2) var(--e-3);
  font-size: var(--t-14);
  background: var(--superficie);
  border: 1px solid var(--borda-forte);
  border-top: 2px solid var(--foco);
}
.barra-selecao .direita { margin-left: auto; display: flex; gap: var(--e-2); flex-wrap: wrap; }

/* ------------------------------------------------------------------ alternar visão (botões agrupados) */

.alternar {
  display: inline-flex;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  overflow: hidden;
}
.alternar button {
  height: calc(var(--controle) - 2px);
  padding: 0 var(--e-3);
  font: 600 var(--t-13)/1 var(--fonte);
  color: var(--texto-2);
  background: var(--superficie);
  border: 0;
  cursor: pointer;
  white-space: nowrap;
}
.alternar button + button { border-left: 1px solid var(--borda-forte); }
.alternar button:hover { background: var(--superficie-3); }
.alternar button[aria-pressed="true"] { color: var(--acao-texto); background: var(--acao); }

/* linha de grupo dentro da tabela (ex.: família) */
.tabela tr.grupo-linha th {
  height: 28px;
  font-size: var(--t-13);
  font-weight: 600;
  color: var(--texto);
  background: var(--superficie-3);
  border-bottom-color: var(--borda-forte);
}
.tabela tr.grupo-linha th .suave { font-weight: 400; }
.tabela tbody tr.grupo-linha:hover th { background: var(--superficie-3); }

/* calendário do mês por máquina: um quadradinho por dia */
.faixa-mes {
  display: grid;
  grid-template-columns: repeat(var(--dias, 30), minmax(9px, 1fr));
  gap: 2px;
  min-width: 330px;
}
.faixa-mes i {
  height: 16px;
  border-radius: 1px;
  background: var(--superficie);
  box-shadow: inset 0 0 0 1px var(--borda);
}
.faixa-mes i.aqui { background: var(--cal-aqui); box-shadow: none; }
.faixa-mes i.fora { background: var(--cal-fora); box-shadow: none; }
.faixa-mes i.futuro { opacity: .4; }
.faixa-mes i.hoje { outline: 2px solid var(--foco); outline-offset: 1px; }
.faixa-mes i.contest { box-shadow: inset 0 -4px 0 var(--critico); }
.faixa-mes.cabecalho span { font: 400 11px/14px var(--fonte); color: var(--texto-3); text-align: center; }
.faixa-mes.cabecalho span.hoje { color: var(--foco); font-weight: 700; }
.tabela.calendario td:last-child, .tabela.calendario th:last-child { width: 100%; }
.legenda i.l-aqui { background: var(--cal-aqui); border-color: var(--cal-aqui); }
.legenda i.l-fora { background: var(--cal-fora); border-color: var(--cal-fora); }
.legenda i.l-futuro { opacity: .4; }
.legenda i.l-contest { box-shadow: inset 0 -4px 0 var(--critico); }

/* página de tela futura */
.futura-corpo { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--e-6); align-items: start; }
.lista-simples { margin: 0; padding-left: 20px; display: grid; gap: var(--e-2); max-width: 70ch; }

/* ------------------------------------------------------------------ gráficos simples (barras em HTML) */

.c1 { background: var(--s1); } .c2 { background: var(--s2); } .c3 { background: var(--s3); }
.c4 { background: var(--s4); } .c5 { background: var(--s5); } .c6 { background: var(--s6); }
.cz { background: var(--borda-forte); } .cg { background: var(--cal-aqui); }
.st-bom { background: var(--bom); } .st-atencao { background: var(--atencao-traco); }
.st-critico { background: repeating-linear-gradient(45deg, var(--critico) 0 3px, var(--critico-fundo) 3px 6px); }   /* hachura: não depender de vermelho x verde */
.st-critico2 { background: repeating-linear-gradient(135deg, var(--critico) 0 3px, var(--critico-fundo) 3px 6px); }
.st-neutro { background: var(--borda-forte); }
.st-neutro2 { background: repeating-linear-gradient(135deg, var(--borda-forte) 0 2px, var(--superficie-3) 2px 5px); }

.barra-comp { display: flex; gap: 2px; height: 14px; min-width: 120px; }
.barra-comp i { display: block; min-width: 2px; border-radius: 2px; }
.barra-simples { display: inline-block; width: 100%; min-width: 60px; height: 8px; vertical-align: middle; background: var(--superficie-3); border-radius: 2px; }
.barra-simples i { display: block; height: 100%; border-radius: 2px; }
td .barra-simples { width: calc(100% - 4px); }
.marca-cor { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 2px; vertical-align: -1px; }
/* a legenda usa a mesma cor da série (o seletor precisa vencer o fundo padrão de .legenda i) */
.legenda i.c1 { background: var(--s1); border-color: transparent; }
.legenda i.c2 { background: var(--s2); border-color: transparent; }
.legenda i.c3 { background: var(--s3); border-color: transparent; }
.legenda i.c4 { background: var(--s4); border-color: transparent; }
.legenda i.c5 { background: var(--s5); border-color: transparent; }
.legenda i.c6 { background: var(--s6); border-color: transparent; }
.legenda i.cz { background: var(--borda-forte); border-color: transparent; }
.legenda i.cg { background: var(--cal-aqui); border-color: transparent; }
.legenda i.l-ponto { width: 10px; height: 10px; border-radius: 50%; background: var(--texto-2); border-color: var(--texto-2); }
.legenda i.l-ponto-vazio { width: 10px; height: 10px; border-radius: 50%; background: transparent; border: 1.5px solid var(--texto-2); }
.legenda i.l-proposta { background: transparent; border: 2px dashed var(--texto); }
.legenda i.l-celula { background: var(--s1); opacity: .6; border-color: transparent; }

.bloco { padding: var(--e-4); }
.sobre-aba { margin: calc(var(--e-2) * -1) 0 var(--e-3); max-width: 90ch; }
.destaque-num { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--e-2); margin-bottom: var(--e-3); }
.destaque-num strong { font: 700 28px/32px var(--fonte-marca); font-variant-numeric: tabular-nums; }
.tabela-meses { max-width: 640px; }

.pergunta { padding-top: var(--e-5); margin-top: var(--e-5); border-top: 1px solid var(--borda); display: grid; gap: var(--e-2); min-width: 0; }
.pergunta h2 { display: flex; gap: var(--e-3); align-items: baseline; font-size: var(--t-16); line-height: 24px; font-weight: 600; }
.num-pergunta {
  flex: none; width: 24px; height: 24px; display: inline-grid; place-items: center;
  font: 700 var(--t-13)/1 var(--fonte); color: var(--acao-texto); background: var(--acao); border-radius: 2px;
}
.pergunta > p.fraco { max-width: 90ch; }

/* árvore de oportunidades */
.arvore { margin-top: var(--e-4); display: grid; gap: var(--e-3); }
.arvore-raiz {
  justify-self: center; display: grid; justify-items: center; gap: 2px; padding: var(--e-3) var(--e-5);
  background: var(--superficie); border: 1px solid var(--borda-forte); position: relative;
}
.arvore-raiz strong { font: 700 var(--t-20)/28px var(--fonte-marca); }
.arvore-raiz::after { content: ""; position: absolute; left: 50%; bottom: -13px; height: 12px; border-left: 1px solid var(--borda-forte); }
.arvore-ramos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--e-2); padding-top: var(--e-3); border-top: 1px solid var(--borda-forte); }
.no {
  display: grid; gap: 6px; align-content: start; padding: var(--e-3); text-align: left;
  font: inherit; color: var(--texto); background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); cursor: pointer;
}
.no:hover { border-color: var(--borda-forte); background: var(--superficie-2); }
.no[aria-pressed="true"] { border-color: var(--foco); box-shadow: inset 0 0 0 1px var(--foco); }
.no-producao { background: var(--superficie-2); }
.no-nome { font-size: var(--t-13); font-weight: 600; color: var(--texto-2); }
.no-valor { font: 700 var(--t-20)/24px var(--fonte-marca); font-variant-numeric: tabular-nums; }
.no-sub { font-size: var(--t-12); line-height: 16px; color: var(--texto-3); }
.no-sub strong { color: var(--texto); }
.oportunidades-grade { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--e-6); margin-top: var(--e-5); }
.ranking { margin: 0; padding: 0; list-style: none; counter-reset: r; display: grid; }
.ranking li { counter-increment: r; display: grid; grid-template-columns: 24px 1fr auto; gap: 2px var(--e-2); padding: var(--e-2) 0; border-bottom: 1px solid var(--borda); align-items: baseline; }
.ranking li::before { content: counter(r); color: var(--texto-3); font-variant-numeric: tabular-nums; }
.ranking li .fraco { grid-column: 2 / -1; font-size: var(--t-13); }
.ranking .num { font-weight: 600; }
.ranking .link-botao { justify-self: start; text-align: left; }
.subtitulo-bloco { font-size: var(--t-13); font-weight: 600; color: var(--texto-2); margin: var(--e-4) 0 var(--e-1); }
.colunas { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; height: 150px; align-items: end; }
.coluna { display: grid; grid-template-rows: 16px 1fr 18px; height: 100%; text-align: center; font-size: var(--t-12); }
.coluna i { align-self: end; border-radius: 3px 3px 0 0; min-height: 2px; }
.coluna-valor { color: var(--texto-2); font-variant-numeric: tabular-nums; }
.coluna-rotulo { color: var(--texto-3); padding-top: 4px; border-top: 1px solid var(--borda-forte); }

/* mapa em SVG */
.mapa { display: block; width: 100%; height: auto; }
.mapa-fundo { fill: var(--superficie-2); stroke: var(--borda); }
.mapa-celula { fill: var(--s1); }
.mapa-area { fill-opacity: .16; stroke-width: 1.5; }
.mapa-area.c1 { fill: var(--s1); stroke: var(--s1); } .mapa-area.c2 { fill: var(--s2); stroke: var(--s2); }
.mapa-area.c3 { fill: var(--s3); stroke: var(--s3); } .mapa-area.c4 { fill: var(--s4); stroke: var(--s4); }
.mapa-ponto { fill: var(--texto-2); stroke: var(--superficie); stroke-width: 1; }
.mapa-ponto.vazio { fill: var(--superficie); stroke: var(--texto-2); stroke-width: 1.5; }
.mapa-proposta { fill: var(--texto); fill-opacity: .05; stroke: var(--texto); stroke-width: 2; stroke-dasharray: 6 4; }
.mapa-centro { stroke: var(--texto); stroke-width: 2; }
.mapa-escala path { fill: none; stroke: var(--texto); stroke-width: 1.5; }
.mapa-escala text { fill: var(--texto-2); font: 12px var(--fonte); }
input[type="range"] { width: 100%; accent-color: var(--acao); }

/* ------------------------------------------------------------------ lista do celular */

.lista-movel { display: grid; margin: 0; padding: 0; list-style: none; background: var(--superficie); border: 1px solid var(--borda); }
.lista-movel li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px var(--e-3);
  padding: var(--e-3) var(--e-4);
  border-bottom: 1px solid var(--borda);
  min-height: 44px;
}
.lista-movel li:last-child { border-bottom: 0; }
.lista-movel .primario { font-weight: 600; }
.lista-movel .secundario { grid-column: 1; font-size: var(--t-13); color: var(--texto-2); }
.lista-movel .acao-item { grid-column: 2; grid-row: 1 / span 3; align-self: center; }

/* ------------------------------------------------------------------ sobreposição de atalhos */

.atalhos {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center;
  padding: var(--e-4);
  background: rgba(15, 17, 19, .45);
}
.atalhos > div {
  width: min(560px, 100%);
  max-height: 100%;
  overflow: auto;
  padding: var(--e-5);
  background: var(--superficie);
  border: 1px solid var(--borda-forte);
}
.atalhos h2 { font-size: var(--t-16); margin-bottom: var(--e-3); }
.atalhos dl { display: grid; grid-template-columns: auto 1fr; gap: var(--e-2) var(--e-4); margin: 0 0 var(--e-4); }
.atalhos dt { white-space: nowrap; }
.atalhos dd { margin: 0; color: var(--texto-2); }
.atalhos h3 { font-size: var(--t-13); color: var(--texto-3); text-transform: uppercase; letter-spacing: .06em; margin: var(--e-4) 0 var(--e-2); }

/* ------------------------------------------------------------------ larguras: narrow < 768 ≤ regular < 1400 ≤ wide (Primer) */

.so-celular { display: none; }

@media (max-width: 1100px) {
  .grade .f3 { display: none; }
  .arvore-ramos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  :root { --controle: 44px; }
  .so-celular { display: revert; }
  .so-computador { display: none !important; }

  .pagina { padding: var(--e-4) var(--e-4) var(--e-6); }

  .barra-ferramentas .campo, .barra-ferramentas .campo.largo { flex: 1 1 100%; }

  /* tabela vira lista de 2 linhas por item (Polaris) */
  .tabela.responsiva thead { display: none; }
  .tabela.responsiva tbody tr {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px var(--e-3);
    padding: var(--e-3) var(--e-4);
    border-bottom: 1px solid var(--borda);
  }
  .tabela.responsiva tbody td { height: auto; padding: 0; border: 0; white-space: normal; background: none !important; }
  .tabela.responsiva td.marcar, .tabela.responsiva td.movel-oculta { display: none; }
  .tabela.responsiva td.movel-1 { grid-column: 1; font-weight: 600; }
  .tabela.responsiva td.movel-1d { grid-column: 2; grid-row: 1; justify-self: end; }
  .tabela.responsiva td.movel-2 { grid-column: 1 / -1; color: var(--texto-2); font-size: var(--t-13); }
  .tabela.responsiva td.num { text-align: left; }

  .tabela.responsiva tr.grupo-linha { display: block; padding: 0; }
  .tabela.responsiva tr.grupo-linha th { display: block; padding: 6px var(--e-4); }
  .tabela.responsiva .so-celular { display: inline; }
  .tabela.calendario thead { display: table-header-group; }
  .tabela.calendario thead th:first-child { display: none; }
  .tabela.calendario .faixa-mes { min-width: 0; }
  .futura-corpo { grid-template-columns: 1fr; gap: var(--e-4); }
  .arvore-ramos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oportunidades-grade { grid-template-columns: 1fr; gap: var(--e-4); }

  .painel { top: calc(var(--topo-altura) + env(safe-area-inset-top, 0px)); width: 100vw; border-left: 0; box-shadow: none; }
  .painel:not(.painel-pagina):not(.painel-largo) {
    top: calc(var(--topo-altura) + env(safe-area-inset-top, 0px)); bottom: 0; width: 100vw;
    border: 0; border-radius: 0; box-shadow: none;
  }
  .painel-fundo { display: none; }
  .ficha > div { grid-template-columns: 1fr auto; }
  .ficha dt { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: no-preference) {
  .painel { animation: painel-entra .14s ease-out; }
  @keyframes painel-entra { from { transform: translateX(16px); opacity: .6; } }
  .painel:not(.painel-pagina):not(.painel-largo) { animation: janela-entra .12s ease-out; }
  @keyframes janela-entra { from { transform: translateY(8px); opacity: .5; } }
}