/* TodaRota · tela de lista */

.lista { display: flex; flex-direction: column; min-height: 100%; }

/* Cabeçalho da tela */

.lista__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);

  padding-right: max(var(--s7), calc(100% - var(--tabela-max, 1360px) + var(--s7)));
}
.lista__head h1 {
  font-size: var(--t-title);
  font-weight: 600;
  letter-spacing: -.02em;
}

.lista__acoes { display: flex; gap: var(--s2); }

/* A LINHA DE COMANDO */

.lista__cmd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s4);

  container-type: inline-size;
}

.recorte-drop { display: none; }
@container (max-width: 500px) {
  .key--resp:not(.key--primary) .key__rot { display: none; }
  .key--resp:not(.key--primary) .key__curto { display: inline; }

  .lista__recorte:has(+ .recorte-drop) { display: none; }
  .recorte-drop { display: block; }
}

.lista__fim {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
}

.chip {
  height: 34px;
  padding: 0 var(--s3);
  font-size: 13px;
  font-weight: 400;
  color: var(--text-3);
}
.chip__n {
  font-variant-numeric: tabular-nums;
  color: var(--text-6);
}

.chip.is-on {
  background: var(--aceso-bg);
  border-color: var(--aceso-line);
  color: var(--aceso-text);
  font-weight: 500;
}
.chip.is-on:hover { background: var(--aceso-bg-hover); }
.chip.is-on .chip__n { color: var(--aceso-text); opacity: .65; }

.lista__busca {
  position: relative;
  width: 300px;
  flex: none;
}

.lista__fim.is-solto { margin-left: 0; }

.lista__acoes--ponta { margin-left: auto; }
.lista__busca svg {
  position: absolute;
  left: var(--s3);
  top: 11px;
  pointer-events: none;
}
.lista__busca .field { padding-left: 34px; }

/* A tabela */

.tabela {
  min-width: 0;
}

.tabela__head,
.tabela__row {
  display: grid;
  grid-template-columns: var(--grade,
    minmax(210px, 340px) 116px minmax(130px, 210px) 148px 120px 1fr);
  align-items: center;
  gap: var(--s4);
  padding: 0 var(--s5);

  max-width: var(--tabela-max, 1360px);
}

.lista__cmd, .pag, .tabela__vazio, .tabela__filha { max-width: var(--tabela-max, 1360px); }

.tabela__head {
  /* A altura é PISO, nunca valor cravado: o rótulo de uma coluna pode ter mais de uma linha
     (o indicador do Ranking vira "Excesso RPM veículo parado/km" quando se escolhe o evento),
     e com height fixo o texto vazava 5px por cima da primeira linha da tabela. Com min-height
     e recuo vertical o cabeçalho cresce e o rótulo fica inteiro dentro dele, com respiro. */
  min-height: 40px;
  padding-block: 5px;
  border-bottom: 1px solid var(--line-row);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-5);
}

.th {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: color .12s ease;
}
.th:hover { color: var(--text-3); }
.th.is-sort { color: var(--text-2); }
.th__seta { opacity: 0; transition: transform .12s ease, opacity .12s ease; }
.th.is-sort .th__seta { opacity: 1; }
.th.is-sort.is-desc .th__seta { transform: rotate(180deg); }

.tabela__row {

  min-height: 46px;
  padding-top: 5px;
  padding-bottom: 5px;
  border-top: 1px solid var(--line-row);
  color: inherit;
  cursor: pointer;
  transition: background .12s ease;

  /* A TINTA da linha é uma variável, e cada estado escreve nela em vez de no background: é o
     que deixa a célula fixa (abaixo) repetir o mesmo véu por cima de um fundo opaco. Quem
     escrever background direto num estado novo pinta a linha e deixa a célula fixa de fora. */
  --tinta: transparent;
  background: var(--tinta);
}
.tabela__row:first-of-type { border-top: 0; }
.tabela__row:hover { --tinta: var(--row-hover); }

/* O véu de estado */

.tabela__row.lin--aviso        { --tinta: rgba(255, 255, 255, .035); }
.tabela__row.lin--aviso:hover  { --tinta: rgba(255, 255, 255, .06); }

.tabela__row.lin--alerta {
  --tinta: var(--alert-bg);

  color: var(--text);
  --text:   #EFD9C6;
  --text-2: var(--alert-text);
  --text-3: var(--alert-text);
  --text-4: #C9A183;
  --text-5: #C9A183;
  --text-6: var(--alert-text-2);
  --text-7: var(--alert-arrow);
}
.tabela__row.lin--alerta:hover { --tinta: var(--alert-bg-hover); }
.tabela__row.lin--inativo      { --tinta: rgba(0, 0, 0, .16); color: var(--text-5); }
.tabela__row.lin--inativo:hover{ --tinta: rgba(0, 0, 0, .10); }

/* A IDENTIFICAÇÃO FIXA (Alertas e Ranking, quando a tabela rola e há espaço: js/lista.js,
   aplicarFixa). A célula gruda na borda esquerda por cima do que rola, e o fundo dela é a
   tinta da linha sobre o fundo opaco da superfície, o que reproduz repouso, hover, severidade
   e linha aberta sem uma regra por estado. A sombra só existe com conteúdo por baixo. */
.tabela.tabela--fixa > .tabela__head > .cel-fixa,
.tabela.tabela--fixa > .tabela__row > .cel-fixa,
.tabela.tabela--fixa .tabela__filha > .cel-fixa {
  position: sticky;
  left: 0;
  z-index: 1;
  background: linear-gradient(var(--tinta, transparent), var(--tinta, transparent)), var(--fundo-fixa, var(--bg-page));
  transition: box-shadow .12s ease;
}
.tabela.tabela--fixa .filhas { --fundo-fixa: var(--bg-inset); }
.tabela.tabela--fixa.is-rolada .cel-fixa { box-shadow: 10px 0 12px -8px rgba(0, 0, 0, .55); }
.tabela__row.is-novo > .cel-fixa { animation: al-novo-fixa 2.4s ease-out; }
@keyframes al-novo-fixa {
  from { background-color: var(--ativo-bg); }
  to   { background-color: var(--bg-page); }
}

/* Células */

.cel-principal { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cel-principal b {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cel-principal span { font-size: var(--t-sm); color: var(--text-6); }
.cel-principal .sem-nome { font-weight: 400; color: var(--text-5); font-style: italic; }
.tabela__row.lin--inativo .cel-principal b { font-weight: 400; }

.cel-placa {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  color: var(--text-2);
}
.cel-placa__id { white-space: nowrap; }
.cel-filial {
  font-size: 13px;
  color: var(--text-4);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cel-quando { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--text-2); }
.txt--aviso   { color: var(--text-4); }
.txt--alerta  { color: var(--accent); }
.txt--inativo { color: var(--text-6); }

.txt--vivo    { color: var(--vivo); }

.fantasma {
  display: inline-block;
  width: 18px;
  border-bottom: 1px dashed var(--text-7);
  height: 8px;
}

.cel-num {
  text-align: right;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
}

.tabela__head .cel-num { font-size: inherit; color: inherit; }

/* Coluna de ações: o cabeçalho alinha ao fim, onde os botões da célula estão. */
.tabela__head > span:has(> .th[data-col="acoes"]) { justify-self: end; }
.tabela__row.lin--inativo .cel-num { color: var(--text-6); }

.cel-mais {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  justify-self: end;
  border-radius: var(--r-micro);
  color: var(--text-6);
  transition: background .12s ease, color .12s ease;
}
.tabela__row:hover .cel-mais { color: var(--text-3); }
.cel-mais:hover { background: var(--ghost-hover); color: var(--text); }

/* Rodapé e paginação */

.pag {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s5);
  border-top: 1px solid var(--line-row);
}
.pag__conta {
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--text-6);
  font-variant-numeric: tabular-nums;
}
.pag__nav { margin-left: auto; display: flex; align-items: center; gap: var(--s1); }

.pag__n {
  min-width: 32px;
  height: 32px;
  padding: 0 var(--s2);
  font-size: 13px;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}
.pag__n.is-on {
  background: var(--aceso-bg);
  border-color: var(--aceso-line);
  color: var(--aceso-text);
}
.pag__n:disabled {
  opacity: .4;
  cursor: default;
  box-shadow: none;
}
.pag__n:disabled:hover { background: var(--control-bg); border-color: var(--hairline); }
.pag__gap { color: var(--text-7); padding: 0 2px; }

/* Painel lateral — LEITURA */

.veu {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .42);
  z-index: 960;
  animation: fade .16s ease;
}
.veu[hidden] { display: none; }

@keyframes entra { from { transform: translateX(16px); opacity: 0 } to { transform: none; opacity: 1 } }

@keyframes entra-centro {
  from { transform: translate(-50%, calc(-50% + 10px)); opacity: 0 }
  to   { transform: translate(-50%, -50%); opacity: 1 }
}

.drawer {
  position: fixed;
  top: var(--s3);
  right: var(--s3);
  bottom: var(--s3);
  width: 420px;
  max-width: calc(100vw - var(--s6));
  z-index: 970;
  display: flex;
  flex-direction: column;
  background: var(--bg-chrome);
  border-radius: var(--r-panel);
  box-shadow: var(--sombra-drawer);
  animation: entra .18s ease;
}
.drawer[hidden] { display: none; }

.drawer__head {
  flex: none;
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s5) var(--s5) var(--s4);
  border-bottom: 1px solid var(--line-chrome);
}
.drawer__head h2 { font-size: 17px; letter-spacing: -.01em; }
.drawer__sub { margin-top: 3px; font-size: var(--t-sm); color: var(--text-6); }

.drawer__sub:has(.rel__selo) {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

.drawer__sub:has(.rel__selo)[hidden] { display: none; }

.drawer__sub .rel__selo { margin: 0; }
.drawer__x { flex: none; margin-left: auto; }

.drawer__body { flex: 1; overflow-y: auto; padding: var(--s5); }

.grupo + .grupo { margin-top: var(--s6); }
.grupo__t {
  font-size: var(--t-xs);
  font-weight: 600;
  font-family: var(--font-mono); letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-6);
  margin-bottom: var(--s3);

  position: relative;
}

.grupo__nota {
  margin: var(--s3) 0 0;
  padding: var(--s3);
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line-control);
  border-radius: var(--r-control);
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--text-4);
  text-wrap: pretty;
}

.grupo__nota + .key { margin-top: var(--s3); }

.grupo__linha {
  margin: var(--s3) 0 0;
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--text-6);
  text-wrap: pretty;
}
.grupo__linha + .key { margin-top: var(--s3); }

.dica { display: inline-flex; vertical-align: middle; margin-left: 6px; }
.dica__b {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; padding: 0;
  border: 0; border-radius: var(--r-micro);
  background: transparent; color: var(--text-6);
  cursor: help; line-height: 0;
}
.dica__b:hover, .dica__b:focus-visible { background: var(--ghost-hover); color: var(--text); }

.dica__balao {
  position: absolute; right: 0; top: calc(100% + 6px);
  width: 224px; max-width: 70vw;
  padding: 8px 10px;
  background: var(--bg-app);
  border: 1px solid var(--hairline);
  border-radius: var(--r-control);
  box-shadow: var(--sombra-balao);
  font-family: var(--font); font-size: var(--t-sm); font-weight: 400;
  letter-spacing: 0; text-transform: none; line-height: 1.45;
  color: var(--text-3);
  white-space: normal; text-wrap: pretty;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .12s ease;
  z-index: 20;
}
.dica:hover .dica__balao, .dica:focus-within .dica__balao { opacity: 1; visibility: visible; }

.campo {
  display: grid;
  grid-template-columns: 152px 1fr;
  gap: var(--s3);
  padding: 7px 0;
  font-size: 13px;
  border-top: 1px solid var(--line-row);
}
.campo:first-of-type { border-top: 0; }
.campo dt { color: var(--text-5); }
.campo dd { margin: 0; color: var(--text-2); }
.campo dd small { font-size: var(--t-xs); }

.campos--estreito .campo { grid-template-columns: 100px 1fr; }

.drawer__foot {
  flex: none;
  padding: var(--s4) var(--s5);
  border-top: 1px solid var(--line-chrome);
  font-size: var(--t-sm);
  color: var(--text-6);
  line-height: 1.45;
}

.drawer__foot:has(> .key),
.drawer__foot:has(> .loc__pergunta),
.drawer__foot:has(> .gr__acoes),
.drawer__foot:has(> .rel__pe) {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s2);

  flex-wrap: wrap;
}
.drawer__foot .key { white-space: nowrap; }
.drawer__foot > .gr__acoes,
.drawer__foot > .rel__pe { justify-content: flex-end; flex: 1; }

/* O botão de AÇÃO de uma linha (`.fa`) */

.fa {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  padding: 0;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--r-micro);
  color: var(--text-6);
  cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.tabela__filha:hover .fa,
.tabela__row:hover .fa { color: var(--text-5); }
.fa:hover { background: var(--ghost-hover); color: var(--text); }
.fa:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.fa.is-on,
.tabela__filha:hover .fa.is-on,
.tabela__row:hover .fa.is-on {
  background: var(--aceso-bg);
  border-color: var(--aceso-line);
  color: var(--aceso-text);
}
.fa.is-on:hover { background: var(--aceso-bg-hover); color: var(--aceso-text); }

/* A PERGUNTA NA PRÓPRIA LINHA (`lin--confirma`) */

.tabela__row.lin--confirma {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);

  cursor: default;
  --tinta: var(--row-hover);
}
.tabela__row.lin--confirma[hidden] { display: none; }
.tabela__row.lin--confirma:hover { --tinta: var(--row-hover); }

.loc__pergunta {
  min-width: 0;
  font-size: var(--t-sm);
  color: var(--text-3);
  line-height: 1.4;
}
.loc__pergunta[hidden] { display: none; }

.tabela__row.lin--confirma .loc__acoes {
  display: flex;
  align-items: center;
  flex: none;
  gap: var(--s2);
}
.tabela__row.lin--confirma .key {
  height: 28px;
  padding: 0 var(--s3);
  font-size: var(--t-xs);
}

.loc__sim { color: var(--accent); }

.atalhos { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s4); }

.atalhos > .atalho,
.atalhos > .key { width: 100%; justify-content: center; }
.atalhos > .key { text-decoration: none; }
.atalho {
  gap: 7px;
  height: 34px;
  padding: 0 var(--s3);
  font-size: 13px;
  color: var(--text-5);
  cursor: default;
  opacity: .72;
}
.atalho:hover {
  background: var(--control-bg);
  border-color: var(--hairline);
  box-shadow: var(--key);
}
.atalho:active { box-shadow: var(--key); }
.atalho small {
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-6);
}

/* Estados da tabela */

.tabela__vazio { padding: var(--s6); }
.tabela__vazio .empty { border: 0; background: none; padding: 40px 24px; }

.sk-linha { pointer-events: none; }
.sk-linha .skeleton { height: 11px; }

/* Linha expansível — só o Histórico usa hoje */

.cel-abre svg { transition: transform .16s ease; }
.cel-abre.is-on svg { transform: rotate(90deg); }
.cel-abre.is-on { color: var(--aceso-text); }

.tabela__row.is-aberta { --tinta: rgba(255, 255, 255, .045); }
.tabela__row.is-aberta:hover { --tinta: rgba(255, 255, 255, .06); }

.filhas {
  background: var(--bg-inset);
  border-top: 1px solid var(--line-row);

  box-shadow: inset 2px 0 0 var(--accent-solid-line);
}

.tabela__filha {
  display: grid;

  grid-template-columns: var(--grade-filha, var(--grade));
  align-items: center;
  gap: var(--s4);
  padding: 0 var(--s5) 0 calc(var(--s5) + 20px);
  height: 42px;
  font-size: var(--t-sm);
  color: var(--text-3);
  cursor: pointer;
  border-top: 1px solid rgba(255, 255, 255, .03);
  transition: background .12s ease, color .12s ease;
  --tinta: transparent;
  background: var(--tinta);
}
.tabela__filha:first-child { border-top: 0; }
.tabela__filha:hover { --tinta: var(--row-hover); color: var(--text); }
.tabela__filha.is-no-mapa { --tinta: var(--veu-accent); color: var(--text); }

.tabela__filha--vazia {
  display: block;
  height: auto;
  padding: var(--s4) var(--s5) var(--s4) calc(var(--s5) + 20px);
  color: var(--text-6);
  cursor: default;
}
.tabela__filha--vazia:hover { background: none; color: var(--text-6); }

/* Tabela ao lado de um painel (o mapa do Histórico) */

.lista__corpo { display: flex; flex-direction: column; gap: var(--s5); min-width: 0; }

.lista--painel .lista__corpo {
  display: grid;
  grid-template-columns: max(var(--split, 42%), 430px) 12px minmax(0, 1fr);
  align-items: start;
}

.lista--painel .lista__corpo > .tabela { min-width: 0; }

@media (max-width: 1180px) {
  .lista--painel .lista__corpo { display: flex; align-items: stretch; }

  .lista--painel .divisor { display: none; }
}

/* Filtros de multi-seleção (a bandeirinha e as localizações) */

.ev { position: relative; flex: none; }
.ev .ev__rot { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ev__menu { min-width: 234px; left: auto; right: 0; }

/* Menu de localizações */

.cercas__menu { min-width: 288px; max-height: 60vh; overflow-y: auto; }
.cercas__g + .cercas__g { margin-top: var(--s2); }

.cercas__t {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  width: 100%;
  padding: 6px 10px;
  background: none;
  border: 0;
  border-radius: var(--r-item);
  font-family: inherit;
  font-size: var(--t-xs);
  font-weight: 600;
  font-family: var(--font-mono); letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-6);
  cursor: pointer;
}
.cercas__t:hover { background: var(--item-hover); color: var(--text-4); }

.cercas__t.is-on { color: var(--aceso-text); }
.cercas__t span { font-variant-numeric: tabular-nums; letter-spacing: 0; }

.cercas .cercas__t.is-on { color: var(--cerca); }

/* Criar localização, dentro do próprio menu */

.cercas__criar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 0 10px 2px;
}

.cercas__criar[hidden] { display: none; }
.cercas__criar > span {
  grid-column: 1 / -1;
  padding: 2px 0 4px;
  font-size: var(--t-xs);
  font-weight: 600;
  font-family: var(--font-mono); letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-6);
}

.cercas__criar > .dropdown__opt {
  width: auto;
  text-align: center;
  border: 1px solid var(--line-control);
  color: var(--text-3);
}

.ev__n {
  margin-left: auto;
  font-size: var(--t-sm);
  color: var(--text-6);
  font-variant-numeric: tabular-nums;
}

.ev__vazio {
  padding: var(--s5) var(--s3);
  text-align: center;
  font-size: var(--t-sm);
  color: var(--text-6);
}

.avfiltro {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: var(--s1) var(--s1) var(--s2);
  background: var(--bg-menu);
}
.avfiltro .field { width: 100%; height: 32px; }

.ev__op {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) 10px;
  border-radius: var(--r-item);
  color: var(--text-3);
  cursor: pointer;
}
.ev__op:hover { background: var(--item-hover); color: var(--text); }

.ev__op--todos .ev__nome { font-weight: 600; color: var(--text-3); }

.caixa:disabled { opacity: .5; cursor: not-allowed; }
.ev__op input[type="checkbox"]:focus-visible, .caixa:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.key--caixa { gap: 9px; padding-left: 12px; cursor: pointer; user-select: none; }
.key--caixa .caixa { margin: 0; width: 16px; height: 16px; }
.key--caixa .caixa:checked::after { left: 5px; top: 2px; }
.key--caixa .caixa:indeterminate::after { left: 3.5px; top: 6.5px; }

.key--caixa .key__n {
  margin-left: 6px;
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-6);
  background: var(--bg-inset);
  border-radius: 5px;
  padding: 1px 6px;
}
.key--caixa:has(.caixa:disabled) { opacity: .5; cursor: default; }

.ev__cor { width: 8px; height: 8px; border-radius: 50%; flex: none; }

.ev__badge {
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .08);
  color: var(--text-3);
  font-size: 10.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.key.is-on .ev__badge { background: var(--aceso-bg-hover); color: var(--aceso-text); }
.ev__nome { font-size: 13px; }

.ev__todos:disabled { opacity: .4; cursor: default; }
.ev__todos:disabled:hover { background: none; color: var(--text-3); }

/* ESCOLHA ÚNICA — o `<select>` do sistema */

.escolha__rot {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.escolha__menu {
  min-width: 100%;
  max-height: 60vh;
  overflow-y: auto;
}

.escolha__op { justify-content: space-between; outline: none; }
.escolha__op:focus-visible,
.escolha__op:focus { background: var(--ghost-hover); color: var(--text); }
.escolha__op[aria-selected="true"] { color: var(--text); }

.ponto {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: middle;
}

.atalho--vivo {
  color: var(--text-2);
  text-decoration: none;
  cursor: pointer;
}
.atalho--vivo:hover { color: var(--text); }

.alerta__texto {
  margin-bottom: var(--s3);
  font-size: var(--t-md);
  line-height: 1.5;
  color: var(--text-2);
}

/* O POP-UP MODAL DE SELEÇÃO (`.selveic`) */

.selveic {
  position: fixed;

  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 970;

  width: min(var(--modal-g), calc(100vw - var(--s7) * 2));
  max-height: min(620px, calc(100dvh - var(--s7) * 2));
  display: flex;
  flex-direction: column;
  background: var(--bg-chrome);
  border: 1px solid var(--line-control);
  border-radius: var(--r-panel);
  box-shadow: var(--sombra-modal);
  overflow: hidden;

  animation: entra-centro .18s ease;
}

.selveic__topo {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s4) var(--s4) var(--s3);
  border-bottom: 1px solid var(--line-chrome);
}
.selveic__topo b { font-size: var(--t-md); font-weight: 600; }
.selveic__n {
  margin-left: auto;
  font-size: var(--t-sm);
  color: var(--text-6);
  font-variant-numeric: tabular-nums;
}

.selveic__busca { display: flex; align-items: center; gap: var(--s2); padding: var(--s3) var(--s4); }
.selveic__busca .field { flex: 1; min-width: 0; height: 34px; }
.selveic__busca .escolha > .key { height: 34px; }

.selveic__rolo { overflow-y: auto; padding: 0 var(--s4) var(--s4); }

.selveic__lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
  gap: 0 var(--s4);
}
.selveic__lista > .cercas__t,
.selveic__lista > .sobre__cab { grid-column: 1 / -1; }

.selveic__l {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: 5px 10px;
  border-radius: var(--r-item);
  color: var(--text-3);
  cursor: pointer;
}
.selveic__l:hover { background: var(--item-hover); color: var(--text); }
.selveic__l input { accent-color: var(--accent); cursor: pointer; flex: none; }
.selveic__l b { font-size: 13px; font-weight: 600; flex: none; }
.selveic__p { font-size: var(--t-sm); color: var(--text-5); flex: none; }

.selveic__m {
  font-size: var(--t-sm);
  color: var(--text-6);
  margin-left: auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
}

.selveic__vazio {
  padding: var(--s5) var(--s3);
  text-align: center;
  font-size: var(--t-sm);
  color: var(--text-6);
}

.selveic__pe {
  display: flex;
  gap: var(--s2);
  padding: var(--s3) var(--s4);
  border-top: 1px solid var(--line-chrome);
}

.selveic__pe .key { justify-content: center; }

.selveic__pe [data-sel-todos] { margin-left: auto; }
.selveic__pe .key:first-child { margin-left: auto; }

/* A variante FORMULÁRIO do pop-up */

.selveic--form { width: min(var(--modal-p), calc(100vw - var(--s7) * 2)); }

.selveic--form-largo { width: min(var(--modal-m), calc(100vw - var(--s7) * 2)); }
.selveic--form .selveic__corpo {
  padding: var(--s4); display: flex; flex-direction: column; gap: var(--s3);

  flex: 1 1 auto; min-height: 0; overflow-y: auto;
}
.selveic--form .selveic__pe { flex: none; }
.selveic--form .campo { border-top: 0; padding: 4px 0; }
.selveic--form textarea.field { width: 100%; min-height: 64px; resize: vertical; padding: var(--s2) var(--s3); }

/* Os campos de um formulário */

.formgrade { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.formcampo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.formcampo:first-child,
.formcampo--largo { grid-column: 1 / -1; }
.formcampo__rot {
  font-size: var(--t-xs);
  font-weight: 600;
  font-family: var(--font-mono); letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-6);
}

.formcampo > .field { width: 100%; }
.formcampo > .escolha,
.formcampo > .seg { width: 100%; }

.formcampo > .escolha > [data-escolha-btn] { width: 100%; justify-content: space-between; }
.formcampo > .seg { justify-content: stretch; }
.formcampo > .seg > .seg__op { flex: 1; }

/* Campo de senha com alternância de visibilidade */

.campo-senha { position: relative; display: flex; min-width: 0; }
.campo-senha > .field {
  width: 100%;

  padding-right: 40px;
}

.campo-senha__olho {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--r-micro);
  background: none;
  color: var(--text-6);
  cursor: pointer;
  transition: color .12s ease, background .12s ease;
}
.campo-senha__olho:hover { color: var(--text-3); background: var(--ghost-hover); }
.campo-senha__olho[aria-pressed="true"] { color: var(--accent); }

.selveic--form .aviso { margin-bottom: 0; }

/* O divisor entre a lista e o mapa (peça do padrão lista + painel) */

.divisor {
  position: relative;
  align-self: stretch;
  cursor: col-resize;
  display: grid;
  place-items: center;
}
.divisor span {
  width: 1px;
  height: 100%;
  background: var(--line-card);
  transition: background .12s ease, width .12s ease;
}
.divisor:hover span { width: 3px; background: var(--accent); }

.divisor::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 3px;
  height: 26px;
  margin-top: -13px;
  border-radius: 2px;
  background: var(--line-control);
  opacity: .55;
  transition: opacity .12s ease, background .12s ease;
}
.divisor:hover::after { opacity: 1; background: var(--accent); }

body.arrastando { cursor: col-resize; user-select: none; }
body.arrastando .mapa,
body.arrastando .tabela { pointer-events: none; }
/* O PADRÃO LISTA + PAINEL (o layout de `cfg.aoLado`) */

.mapabox {
  position: sticky;
  top: var(--s5);
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--line-card);
  border-radius: var(--r-card);
  overflow: hidden;
}

/* Os controles FLUTUAM sobre o mapa */

.mapa__flut {
  position: absolute;
  top: var(--s4);

  left: calc(56px + var(--s4));
  right: var(--s4);
  z-index: 500;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: var(--s2);

  pointer-events: none;
}
.mapa__flut > * { pointer-events: auto; }

.mapa__flut--fixa { flex-wrap: nowrap; }

.mapa__flut .dropdown__menu { left: 0; right: auto; }

.mapa__flut .key:not(.dropdown__menu *) {
  height: 36px;
  flex: none;
  background: var(--vidro-bg);
  backdrop-filter: var(--vidro-blur);
  -webkit-backdrop-filter: var(--vidro-blur);
  box-shadow: var(--sombra-controle);
}

/* O pé do mapa: o que está no mapa agora, e o selo */

.mapa { background: var(--bg-inset); }

.mapa__vazio {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 6px;
  padding: var(--s5);
  text-align: center;
  pointer-events: none;
  z-index: 400;
  background: rgba(11, 13, 16, .72);
  color: var(--text-5);
  font-size: var(--t-sm);
}
.mapa__vazio b { color: var(--text-3); font-weight: 500; font-size: var(--t-md); }
.mapa__vazio[hidden] { display: none; }

.mapa__wrap { position: relative; z-index: 0; }

@media (min-width: 1181px) {

  .page--painel { overflow: hidden; }

  .page--painel .lista--painel {
    display: grid;
    grid-template-columns: max(var(--split, 42%), 430px) 12px minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    height: calc(100dvh - var(--s7) * 2 - var(--calha-v));
  }

  .page--painel .lista__head  { grid-area: 1 / 1; margin-right: 0; padding-right: var(--s3); }

  .page--painel .lista__cmd   { grid-area: 2 / 1; padding-right: var(--s3); }

  .page--painel .lista--painel:has(> .abas) {
    grid-template-rows: auto auto auto minmax(0, 1fr);
  }
  .page--painel .abas { grid-area: 2 / 1; }
  .page--painel .lista--painel:has(> .abas) .lista__cmd { grid-area: 3 / 1; }
  .page--painel .lista--painel:has(> .abas) .tabela     { grid-area: 4 / 1; }

  .page--painel .lista__head  { container-type: inline-size; }
  .page--painel .lista__busca { flex: 1 1 120px; min-width: 120px; width: auto; max-width: 300px; }
  .page--painel .lista__head h1 { white-space: nowrap; }

  .page--painel .lista__cmd > .lista__fim:first-child { margin-left: 0; flex: 1; }
  .page--painel .lista__corpo { display: contents; }

  .page--painel .tabela {
    grid-area: 3 / 1;
    overflow-y: auto;
    min-height: 0;
  }

  .page--painel .locform {
    grid-area: 2 / 1 / 4 / 2;
    overflow-y: auto;
    min-height: 0;
    padding-right: var(--s3);
  }

  .page--painel .tabela__head {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--bg-page);
  }

  .page--painel .divisor,
  .page--painel .mapabox {
    grid-row: 1 / -1;
    height: calc(100dvh - var(--calha-v));
    margin-top: calc(var(--s7) * -1);
    margin-bottom: calc(var(--s7) * -1);
  }
  .page--painel .divisor { grid-column: 2; }

  .page--painel .mapabox {
    grid-column: 3;
    margin-right: calc(var(--s7) * -1);
    border-radius: 0;
    border: 0;
  }

  .page--painel .mapa__wrap { flex: 1; min-height: 0; }
  .page--painel .mapa { height: 100%; }
}

@media (max-width: 1180px) { .mapa { height: 340px; } }

.formcampo > .field[readonly] {
  color: var(--text-5);
  background: transparent;
  cursor: default;
}
.formcampo > .field[readonly]:focus { border-color: var(--line-control); box-shadow: none; }

/* A lista de membros com caixas por grupo (`.sobre`) */

.sobre { display: flex; flex-direction: column; gap: var(--s3); }
.sobre__eixo { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.sobre__eixo > .grupo__t { margin-bottom: 0; }
.sobre__agrupar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.sobre__rot { font-size: var(--t-sm); color: var(--text-6); margin-right: var(--s1); }
/* A busca, o resumo e o par Todos/Nenhum somam 480px de largura fixa. Num modal de 334px
   (janela de 390) isso rolava na horizontal e levava junto o resto da etapa; a linha quebra e a
   busca cede — ela é a única peça cujo encolhimento não custa leitura. Onde tudo cabe (o modal
   de 940 do desktop) nada muda: a busca continua com os 280px de sempre. */
.sobre__linha { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2); }
.sobre__linha .sobre__busca { flex: 0 1 280px; width: auto; min-width: 140px; }
.sobre__linha .field { width: 100%; height: 34px; }
.sobre__resumo { margin-left: auto; font-size: var(--t-sm); color: var(--text-5); font-variant-numeric: tabular-nums; }

.sobre__lista { display: flex; flex-direction: column; }
.sobre__grupo { border-top: 1px solid var(--line-row); }
.sobre__grupo:last-child { border-bottom: 1px solid var(--line-row); }
.sobre__cab { display: flex; align-items: center; gap: 2px; }
.sobre__cx { padding: 8px 6px 8px 8px; }

.sobre__abrir {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-height: 40px;
  padding: 0 10px 0 4px;
  background: none;
  border: 0;
  border-radius: var(--r-item);
  font: inherit;
  color: var(--text-2);
  text-align: left;
  cursor: pointer;
}
.sobre__abrir:hover { background: var(--item-hover); color: var(--text); }
.sobre__abrir > svg { margin-left: auto; color: var(--text-6); transition: transform .12s ease; }
.is-aberto > .sobre__cab > .sobre__abrir > svg { transform: rotate(180deg); }
.sobre__nome { font-size: var(--t-md); font-weight: 500; }
.sobre__n { font-size: var(--t-sm); color: var(--text-6); font-variant-numeric: tabular-nums; }
.sobre__n i { font-style: normal; opacity: .7; }
.sobre__itens {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
  gap: 0 var(--s4);
  padding: 0 var(--s2) var(--s2) 34px;
}
.sobre__item { padding: 5px 10px; }
.sobre__item b { font-size: 13px; font-weight: 600; flex: none; }

.sobre__itens--uma { grid-template-columns: 1fr; }

/* Modal de grupo: campos à esquerda, membros à direita */

.selveic--grupo {
  width: min(var(--modal-g), calc(100vw - var(--s7) * 2));
  max-height: min(720px, calc(100dvh - var(--s7) * 2));
}
.selveic--grupo .selveic__corpo {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: var(--s5);
  align-items: start;
  min-height: 0;
  overflow: hidden;
}
.grupoform__campos { display: flex; flex-direction: column; gap: var(--s3); }
.grupoform__campos > .formcampo { grid-column: auto; }
.grupoform__membros { min-height: 0; max-height: calc(min(720px, 100dvh - var(--s7) * 2) - 150px); display: flex; flex-direction: column; }
.grupoform__membros .sobre__busca { flex: 1; width: auto; }
.grupoform__lista { overflow: auto; min-height: 0; }
.gr__membros { display: flex; flex-direction: column; }
.gr__membro { cursor: default; }
.gr__acoes { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }

.gr__acoes .loc__pergunta { color: var(--text-4); }
.gr__acoes .loc__acoes { display: flex; gap: var(--s2); }

.drawer__foot > .loc__pergunta { flex: 1 1 100%; color: var(--text-4); }
.drawer__foot > .loc__acoes { display: flex; align-items: center; gap: var(--s2); }

/* O cadastro de VEÍCULO: foto à esquerda, blocos à direita */

.selveic--veic {
  width: min(var(--modal-g), calc(100vw - var(--s7) * 2));

  max-height: min(720px, calc(100dvh - var(--s7) * 2));
}
.selveic--veic .selveic__corpo {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: var(--s5);
  align-items: start;
  overflow: auto;
}
.formfoto { display: flex; flex-direction: column; gap: var(--s3); }
.formfoto__quadro {
  aspect-ratio: 4 / 3;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  border-radius: var(--r-control);
  border: 1px dashed var(--line-control);
  background: var(--bg-app);
  color: var(--text-6);
}
.formfoto__quadro > img { width: 100%; height: 100%; object-fit: cover; }
.formfoto__quadro > svg { width: 56px; height: 56px; }
.formfoto > .key { justify-content: center; }
.formfoto > .key[hidden] { display: none; }
.formblocos { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }
.formbloco__t {
  font-size: var(--t-xs);
  font-weight: 600;
  font-family: var(--font-mono); letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-6);
  margin-bottom: var(--s3);
}

.formgrade--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.formgrade--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.formgrade--2 > .formcampo:first-child,
.formgrade--3 > .formcampo:first-child { grid-column: auto; }

.ficha__foto {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r-control);
  margin-bottom: var(--s4);
}

.gm__nota { margin: 0; font-size: var(--t-sm); color: var(--text-6); line-height: 1.4; }

.selveic--form textarea.field { font: inherit; }

.ficha__foto--vazia {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s2);
  background: var(--bg-app);
  border: 1px dashed var(--line-control);
  color: var(--text-6);
  font-size: var(--t-sm);
}
.ficha__foto--vazia > svg { width: 64px; height: 64px; }

/* A faixa de identidade NÃO quebra: a busca encolhe, a trilha encurta */

.lista__head { flex-wrap: nowrap; }
.lista__head > h1 { white-space: nowrap; flex: none; }
.lista__head > .lista__busca { flex: 1 1 120px; min-width: 100px; width: auto; max-width: 300px; }
.lista__head > .trilha { flex: 0 1 auto; min-width: 0; overflow: hidden; }
.lista__head > .trilha > .trilha__n { min-width: 0; overflow: hidden; text-overflow: ellipsis; flex: 0 10 auto; }
.lista__head > .trilha > .trilha__n--fim { flex: 0 1 auto; }
.lista__head > .trilha > .trilha__n:last-of-type { flex-shrink: 1; }

.lista__head > .dropdown { flex: none; }

.lista__head { container-type: inline-size; }
@container (max-width: 440px) { .lista__head > .trilha { display: none; } }

.alerta__esperado {

  margin-left: 6px;
  font-style: normal;
  font-size: var(--t-xs);
  padding: 1px 6px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline);
  color: var(--text-4);
  white-space: nowrap;
}
.alerta__link { color: var(--accent); }

/* Caixa de entrada de alertas */

.al__acoes { display: flex; gap: 2px; align-items: center; justify-content: flex-end; }

.al__acoes .fa.is-on { color: var(--aceso-text); border-color: var(--aceso-line); background: var(--aceso-bg); }

.al__desfazer {
  position: fixed;
  left: 50%;
  bottom: var(--s5);
  transform: translateX(-50%);
  z-index: 600;
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 8px 8px 8px var(--s4);
  background: var(--bg-chrome);
  border: 1px solid var(--line-control);
  border-radius: var(--r-control);
  box-shadow: var(--sombra-menu);
  font-size: var(--t-sm);
  color: var(--text-2);
  animation: entra .18s ease;
}

@keyframes al-novo {
  from { background: var(--ativo-bg); }
  to   { background: transparent; }
}
.tabela__row.is-novo { animation: al-novo 2.4s ease-out; }

.recorte__sep { margin: 0 2px; }

/* O modal de Avisos */
.av { width: min(var(--modal-m), calc(100vw - var(--s7) * 2)); }
.av__lista { display: flex; flex-direction: column; gap: var(--s2); }
.av__l {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "nome acoes" "quem acoes" "canal acoes";
  gap: 2px var(--s3);
  align-items: center;
  padding: 10px var(--s3);
  border: 1px solid var(--hairline);
  border-radius: var(--r-control);
  background: var(--bg-inset);
}
.av__l-nome { grid-area: nome; display: flex; align-items: center; gap: var(--s2); }
.av__l-quem { grid-area: quem; font-size: var(--t-sm); color: var(--text-4); }
.av__l-canal { grid-area: canal; font-size: var(--t-sm); color: var(--text-6); overflow-wrap: anywhere; }
.av__l-acoes { grid-area: acoes; display: flex; gap: 2px; }

.av__l.av__l--confirma {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s2) var(--s3);
}

.av__l.av__l--confirma[hidden] { display: none; }
.av__l--confirma .loc__pergunta { flex: 1 1 260px; color: var(--text-4); }
.av__l--confirma .loc__acoes { display: flex; align-items: center; gap: var(--s2); margin-left: auto; }
.av__teste {
  display: flex; flex-direction: column; gap: var(--s2);
  padding: var(--s3);
  border: 1px solid var(--hairline);
  border-top: 0;
  border-radius: 0 0 var(--r-control) var(--r-control);
  margin-top: -4px;
}
.av__msg {
  margin: 0;
  padding: 10px var(--s3);
  background: var(--bg-app);
  border: 1px solid var(--hairline);
  border-radius: var(--r-item);
  font: inherit;
  font-size: var(--t-sm);
  color: var(--text-2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.av__passos { display: flex; gap: var(--s2); padding: 0 var(--s4) var(--s3); }
.av__passo { font-size: var(--t-sm); color: var(--text-6); }
.av__passo.is-on { color: var(--aceso-text); font-weight: 600; }
.av__passo.is-feito { color: var(--text-4); }
.av__tipos, .av__veic {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px var(--s3);
  max-height: 240px;
  overflow-y: auto;
}
.av__veic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.av__veic .cercas__g { display: contents; }
.av__veic .cercas__t.is-titulo {
  grid-column: 1 / -1;
  background: none; border: 0; color: var(--text-6);
  font-size: var(--t-xs); font-weight: 600; font-family: var(--font-mono); letter-spacing: .14em; text-transform: uppercase;
  padding: var(--s2) 0 2px;
}
.av__campos { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; font-size: var(--t-sm); color: var(--text-6); }
.av__campos .key { height: 26px; padding: 0 9px; font-size: 12px; }
.av__previa { display: flex; flex-direction: column; gap: 6px; }
.av__modelo { min-height: 72px; resize: vertical; }
.av__motivo { padding: 0 var(--s4) var(--s3); margin: 0; }
.av__grupo { padding: var(--s2) var(--s3); }
.av__grupo .escolha, .av__grupo .escolha > .key { width: 100%; }

/* O MODAL DE IMPORTAR */

.imp { width: min(var(--modal-m), calc(100vw - var(--s7) * 2)); }
.imp__portas { display: flex; gap: var(--s2); flex-wrap: wrap; }
.imp__resumo { font-size: var(--t-sm); color: var(--text-4); margin: 0; }
.imp__tabela { max-height: 300px; overflow: auto; border: 1px solid var(--hairline); border-radius: var(--r-control); }
.imp__tab { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.imp__tab th, .imp__tab td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.imp__tab th { color: var(--text-6); font-weight: 600; font-size: var(--t-xs); font-family: var(--font-mono); letter-spacing: .14em; text-transform: uppercase; position: sticky; top: 0; background: var(--bg-chrome); }
.imp__tab small { color: var(--text-6); }
.imp__l--existe td { color: var(--text-6); }
.imp__l--erro td { color: var(--text-6); }
.imp__modo { display: flex; align-items: center; gap: var(--s3); font-size: var(--t-sm); color: var(--text-4); }
.imp__modo .escolha > .key { min-width: 260px; justify-content: space-between; }
.imp__dica { font-size: var(--t-sm); color: var(--text-6); line-height: 1.5; margin: 0; }
.imp__l--nova td b { color: var(--text-2); }

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

/* Documentos, baixa com prazo e log de cadastro */

.docs { display: flex; flex-direction: column; gap: var(--s2); }
.docs__l {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) 108px 64px 28px;
  gap: var(--s2);
  align-items: center;
}
.docs__l > .escolha > .key { width: 100%; justify-content: space-between; }
.docs__data, .docs__dias { text-align: center; }

.docs__cab {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) 108px 64px 28px;
  gap: var(--s2);
  align-items: end;
}
.docs__cab > span {
  font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-6);
  line-height: 1.3;
}
.docs__cab > span:nth-child(3), .docs__cab > span:nth-child(4) { text-align: center; }
.docs > .key { align-self: flex-start; }

.formdica {
  font-size: var(--t-sm);
  color: var(--text-6);
  line-height: 1.5;
  margin: var(--s2) 0 0;
}

.formleitura {
  display: flex; align-items: center;
  min-height: 34px;
  color: var(--text-4);
  font-variant-numeric: tabular-nums;
}
.doc__num { color: var(--text-6); font-size: var(--t-sm); }

.formconsent {
  display: flex; align-items: flex-start; gap: var(--s2);
  margin: var(--s2) 0 0; padding: var(--s3);
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line-control);
  border-radius: var(--r-control);
  font-size: var(--t-sm); line-height: 1.5; color: var(--text-4);
}
.formconsent > svg { flex: none; margin-top: 2px; color: var(--good); }

.logcad { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s3); }
.logcad li { display: flex; flex-direction: column; gap: 2px; font-size: var(--t-sm); }
.logcad li > b { color: var(--text-3); font-weight: 500; }
.logcad li > span { color: var(--text-6); font-size: var(--t-xs); }

@media (max-width: 900px) {
  .docs__l { grid-template-columns: 1fr 1fr; }
  .docs__l > .field, .docs__l > .escolha { grid-column: auto; }

  .docs__cab { display: none; }
}

.formsub { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s3); }
.formcheck { align-items: flex-start; cursor: pointer; }
.formcheck .ev__nome { white-space: normal; line-height: 1.45; }

.fus__lista {
  max-height: 280px; overflow: auto;
  border: 1px solid var(--hairline); border-radius: var(--r-control);
  margin-top: var(--s2);
}
.fus__op { align-items: flex-start; }
.fus__op .ev__nome { display: flex; flex-direction: column; gap: 2px; white-space: normal; }
.fus__sub { color: var(--text-6); font-size: var(--t-xs); }

.lista > .aviso { margin: 0 0 var(--s3); display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }

/* Tendência, decomposição e acompanhamento da nota */

.spark { display: block; overflow: visible; }
.varia { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; font-size: 12px;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.varia--bom   { color: var(--good); }
.varia--ruim  { color: var(--accent); }
.varia--igual { color: var(--text-6); }
.varia small  { color: inherit; opacity: .7; }

.tend { display: flex; align-items: center; gap: var(--s4); }
.tend__nums { display: flex; flex-direction: column; gap: 2px; }
.tend__agora { font-size: var(--t-xl); font-weight: 600; line-height: 1;
  font-variant-numeric: tabular-nums; }

.cel-tend { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.cel-tend .varia { font-size: var(--t-xs); }

.decomp { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.decomp__l { display: grid; grid-template-columns: minmax(0, 1fr) 64px 44px 84px;
  align-items: center; gap: var(--s2); font-size: var(--t-sm); }
.decomp__nome { color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.decomp__barra { height: 6px; border-radius: var(--r-pill); background: var(--row-hover); overflow: hidden; }
.decomp__barra > i { display: block; height: 100%; background: var(--accent); opacity: .75; }
.decomp__n { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-3); }
.decomp__taxa { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-6); }
.decomp__taxa small { opacity: .8; }

.tratef { display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap;
  margin-bottom: var(--s3); font-variant-numeric: tabular-nums; }
.tratef__de   { font-size: var(--t-lg); color: var(--text-6); }
.tratef__seta { color: var(--text-6); }
.tratef__para { font-size: var(--t-xl); font-weight: 600; }
.tratef__un   { margin-left: 4px; font-size: var(--t-xs); font-weight: 400; color: var(--text-6); }
.tratef__nota { flex: 1 1 100%; font-size: var(--t-xs); color: var(--text-6); }

.tratc { display: flex; flex-direction: column; gap: 4px; padding: var(--s3);
  border-radius: var(--r-control); background: var(--bg-app); margin-bottom: var(--s3); }
.tratc--modal { margin-bottom: var(--s4); }
.tratc__rot { font-size: var(--t-xs); font-weight: 600; font-family: var(--font-mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-6); }
.tratc > b { color: var(--text-2); font-weight: 500; line-height: 1.45; }
.tratc__quem { font-size: var(--t-xs); color: var(--text-6); }

.trat { list-style: none; margin: 0 0 var(--s3); padding: 0;
  display: flex; flex-direction: column; gap: var(--s3); }
.trat__l { display: flex; flex-direction: column; gap: 4px; padding-left: var(--s3);
  border-left: 2px solid var(--hairline); }
.trat__topo { display: flex; align-items: center; gap: var(--s2); }
.trat__assunto { font-weight: 600; font-size: var(--t-sm); color: var(--text-2); }
.trat__data, .trat__nota, .trat__por { font-size: var(--t-xs); color: var(--text-6); }
.trat__nota { font-variant-numeric: tabular-nums; }

.trat__x { margin-left: auto; width: 24px; height: 24px; padding: 0;
  background: none; border: 0; box-shadow: none; color: var(--text-6); }
.trat__x:hover { background: var(--ghost-hover); color: var(--text-3); }

.trat__x.is-on { color: var(--accent); background: none; }

.trat__conf {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--s2); margin-top: var(--s2);
}
.trat__conf .loc__pergunta { color: var(--text-4); }
.trat__conf .loc__acoes { display: flex; gap: var(--s2); }

.trat__conf .key { height: 28px; padding: 0 var(--s3); font-size: var(--t-xs); }
.trat__txt { margin: 0; font-size: var(--t-sm); color: var(--text-3); line-height: 1.5; }
.trat__comp { margin: 0; font-size: var(--t-sm); color: var(--text-3); line-height: 1.5; }
.trat__comp > span { color: var(--text-6); }

.field--area { min-height: 66px; resize: vertical; line-height: 1.5; padding-top: 8px; }

.minirank { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.minirank li { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-sm); }
.minirank li > b { flex: 1 1 auto; font-weight: 500; color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.minirank__n { font-variant-numeric: tabular-nums; color: var(--text-2); font-weight: 600; }

/* Usuários e permissões */

.usu__quem { flex-direction: row !important; align-items: center; gap: var(--s3); }
.usu__av {
  width: 30px; height: 30px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill);
  background: var(--bg-app); border: 1px solid var(--hairline);
  font-size: var(--t-xs); font-weight: 600; color: var(--text-4);
}
.usu__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.usu__txt > b, .usu__txt > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usu__txt > span { font-size: var(--t-xs); color: var(--text-6); }
.pill--inativo { background: var(--bg-app); color: var(--text-6); }

.grupo__linha--forte { color: var(--text-3); margin-bottom: var(--s3); }
.cap { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cap__l { display: flex; align-items: flex-start; gap: 8px; font-size: var(--t-sm); line-height: 1.45; }
.cap__l::before { flex: none; width: 14px; text-align: center; font-weight: 600; }
.cap__l--sim { color: var(--text-3); }
.cap__l--sim::before { content: '✓'; color: var(--good); }
.cap__l--nao { color: var(--text-6); }
.cap__l--nao::before { content: '—'; color: var(--text-6); }

.usuform { width: min(var(--modal-m), calc(100vw - var(--s7) * 2)); }
.papeis { display: flex; flex-direction: column; gap: var(--s2); }
.papeis__op {
  display: grid; grid-template-columns: auto 1fr; column-gap: var(--s3);
  align-items: center; cursor: pointer;
  padding: var(--s3); border-radius: var(--r-control);
  border: 1px solid var(--hairline); background: var(--bg-app);
}
.papeis__op:hover { background: var(--item-hover); }
.papeis__op.is-on { border-color: var(--aceso-line); background: var(--aceso-bg); }
.papeis__op > input { grid-row: 1 / span 2; }
.papeis__nome { font-weight: 600; font-size: var(--t-sm); color: var(--text-2); }
.papeis__diz { grid-column: 2; font-size: var(--t-xs); color: var(--text-6); line-height: 1.45; }

.gar { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2px; }

/* A faixa da simulação */

.simfaixa {
  position: sticky; top: 0; z-index: 995;
  display: flex; align-items: center; gap: var(--s3);
  padding: 8px var(--s5);
  background: var(--ativo-bg);
  border-bottom: 1px solid var(--accent);
  font-size: var(--t-sm); color: var(--text-2);
}
.simfaixa__olho { display: flex; color: var(--accent); }
.simfaixa__olho > svg { width: 17px; height: 17px; }
.simfaixa__txt { flex: 1 1 auto; min-width: 0; }
.simfaixa__txt > b { font-weight: 600; }

body.tem-simfaixa .shell { height: calc(100vh - var(--simfaixa-h, 35px)); }

/* "Quem passou aqui" */

.passou {
  width: min(var(--modal-g), calc(100vw - var(--s7) * 2));
  height: min(620px, calc(100dvh - var(--s7) * 2));
}
.passou .selveic__corpo { display: flex; flex-direction: column; gap: var(--s4); }

.passou__resumo {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--text-5);
  line-height: 1.6;
}
.passou__resumo b { color: var(--text-2); font-variant-numeric: tabular-nums; }

.passou__cmd { display: flex; align-items: center; gap: var(--s3); }
.passou__recorte { flex: none; }

.passou__busca { flex: 1 1 160px; min-width: 120px; }

#passou-lista { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.passou__tabela { flex: 1; min-height: 0; max-height: none; }
.passou__tab td { vertical-align: top; }
.passou__tab td small { color: var(--text-6); }
.passou__tab td:last-child { text-align: right; white-space: nowrap; }
.passou__vazio { flex: 1; display: flex; flex-direction: column; gap: var(--s2); justify-content: center; }
.passou__vazio b { color: var(--text-3); font-weight: 500; font-size: var(--t-md); }
.passou__nota { margin: 0; font-size: var(--t-xs); color: var(--text-6); line-height: 1.5; }
.passou__nota b { color: var(--text-5); font-weight: 600; }
#passou-lista .imp__dica { margin: var(--s3) 0 0; flex: none; }

.selveic__pe .key[disabled] { opacity: .5; cursor: not-allowed; }

/* A LETRA DENTRO DA BOLINHA */

.classe {
  margin-left: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: var(--r-pill);
  font-size: var(--t-xs); font-weight: 700; color: var(--classe-txt);
  font-variant-numeric: tabular-nums; flex: none;
}
.classe--a { background: var(--classe-a); }
.classe--b { background: var(--classe-b); color: var(--classe-b-txt); }
.classe--c { background: var(--classe-c); color: var(--classe-c-txt); }
.classe--d { background: var(--classe-d); color: var(--classe-d-txt); }
.classe--e { background: var(--classe-e); color: var(--classe-e-txt); }
.classe--f { background: var(--classe-f); }

.recorte__de { font-size: var(--t-xs); color: var(--text-6); font-weight: 400; }

.cel-mais--acoes {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;

  width: auto;
  justify-self: stretch;
}
.cel-mais--acoes > .fa { flex: none; }

.cel-mais--acoes:hover { background: none; }

.fa[disabled] { opacity: .5; cursor: not-allowed; }

.th-com-extra { display: inline-flex; align-items: center; gap: 7px; }
.th-caixa { display: inline-flex; align-items: center; cursor: pointer; }

.lista--painel .tabela__head,
.lista--painel .tabela__row,
.lista--painel .tabela__filha { gap: 10px; padding-left: 14px; padding-right: 14px; }

.lista__fio { margin: 0 4px; }

/* AS ABAS — a régua que indexa o conteúdo */

.abas {
  display: flex;
  gap: var(--s4);
  margin-bottom: var(--s5);
  /* O fio é sombra interna, não borda: com a régua rolando no X (overflow-x: auto), uma borda
     somada à sublinha da aba ativa (que ia a bottom: -1px) dava 1px de transbordo vertical, e o
     navegador desenhava uma barra de rolagem de 1px no lado direito. */
  box-shadow: inset 0 -1px 0 var(--line-row);

  max-width: var(--tabela-max, 1360px);
}
.abas__op {
  position: relative;
  padding: 0 0 11px;
  background: none;
  border: 0;
  font: inherit;
  font-size: var(--t-md);
  color: var(--text-5);
  cursor: pointer;
  transition: color .12s ease;
}
.abas__op:hover { color: var(--text-2); }
/* O anel de foco fica dentro da caixa: a régua recorta no eixo Y e um anel por fora sairia
   cortado em cima e embaixo (medido: só as laterais apareciam). */
.abas__op:focus-visible { outline-offset: -2px; }
.abas__op.is-on { color: var(--text); font-weight: 500; }
.abas__op.is-on::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}

.cel-num[data-c="hodometro"] { padding-right: 12px; }

.cel-num[data-c="myscore"] { padding-right: 16px; }
.cel-doc { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.cel-doc small { color: var(--text-6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cel-doc b { font-weight: 500; white-space: nowrap; }

/* TABELA ESTREITA. Quando a soma dos pisos das colunas que sobraram ainda passa da largura
   (o motor já descartou as dispensáveis), a tabela rola dentro de si mesma; a página nunca
   rola no X. A coluna de identificação é a primeira e fica visível na posição de repouso. */
.tabela { overflow-x: auto; overscroll-behavior-x: contain; }
.tabela > .tabela__head,
.tabela > .tabela__row,
.tabela > .tabela__filha { min-width: min-content; }

.pag { flex-wrap: wrap; row-gap: var(--s2); }

/* COMPOSIÇÃO COMPACTA (cfg.compacto): a identificação pode quebrar a linha em vez de cortar
   com reticências, e o que saiu da grade vira uma linha complementar dentro do registro
   (.cel-compl). O cabeçalho da coluna indicadora também pode quebrar (o nome de um evento). */
.tabela--compacta .cel-principal > b { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.tabela--compacta .cel-principal > span { white-space: normal; overflow-wrap: anywhere; }
.tabela--compacta .tabela__head > span { white-space: normal; }
.cel-compl { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: var(--t-sm); color: var(--text-5); }
.cel-compl .ponto { margin-right: 2px; }
.tabela--compacta .cel-num .classe { margin-left: 6px; }

/* REGISTRO EMPILHADO (.tabela--empilhada; quem decide é o motor, quando a identificação
   compacta fica abaixo do piso que a tela declarou em cfg.compacto.pisoPrincipal). A linha
   deixa de ser grade e vira fila que quebra: a identificação ocupa a largura toda, o indicador
   e a seta vêm na linha seguinte, o complementar fecha o registro.
   ⚠ `display: contents` na célula de identificação é o que permite ordenar nome, indicador e
   complementar como irmãos — sem ele o complementar ficaria preso ao nome, ACIMA do indicador,
   e a ordem pedida (nome · resultado · contexto) não existiria. */
.tabela--empilhada .tabela__head,
.tabela--empilhada .tabela__row { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--s3); }
.tabela--empilhada .tabela__head > span:nth-child(2) { margin-left: auto; }
.tabela--empilhada .tabela__row > .cel-principal { display: contents; }
.tabela--empilhada .tabela__row > .cel-principal > b { flex: 1 1 100%; order: 1; }
.tabela--empilhada .tabela__row > .cel-principal > span { flex: 1 1 100%; order: 3; }
.tabela--empilhada .tabela__row > .cel-num { order: 2; text-align: left; }
.tabela--empilhada .tabela__row > .cel-mais { order: 2; margin-left: auto; }
/* A linha-filha (grupo expandido) herda a composição: a descrição quebra e a complementar entra,
   então a altura cravada de 42px vira piso — sem isso as filhas transbordavam umas sobre as
   outras a 390. Fora da compacta a filha segue com a altura cravada de sempre. */
.tabela--compacta .tabela__filha { height: auto; min-height: 42px; padding-top: var(--s2); padding-bottom: var(--s2); }
.abas { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.abas__op { white-space: nowrap; flex: none; }

/* Formulário em modal estreito: uma coluna. O modal tem no máximo (100vw - 2*s7), então
   abaixo de 560px de janela as duas e três colunas não têm mais como caber. */
@media (max-width: 560px) {
  .formgrade, .formgrade--2, .formgrade--3 { grid-template-columns: minmax(0, 1fr); }
  .formgrade--2 > .formcampo:first-child,
  .formgrade--3 > .formcampo:first-child { grid-column: auto; }
  .selveic__pe { flex-wrap: wrap; }
}
@media (max-width: 560px) {
  .selveic--veic .selveic__corpo { grid-template-columns: minmax(0, 1fr); }
}

/* FAIXA ESTREITA: o recuo da tabela cai de 20px (14 no painel) para 12px de cada lado, na
   cabeça, na linha, na filha e na paginação. Nos 248px úteis de uma janela de 390 os 16px
   devolvidos, com o piso de 176 e a régua de páginas compacta (js/lista.js), são o que separa
   a lista que rola da que cabe inteira. A filha mantém o recuo extra de 20 que a distingue da
   mãe. Depois de todas as regras de painel, de propósito: mesma especificidade, vence a última. */
.main.is-estreito .tabela__head,
.main.is-estreito .tabela__row,
.main.is-estreito .pag { padding-left: var(--s3); padding-right: var(--s3); }
.main.is-estreito .tabela__filha { padding-left: calc(var(--s3) + 20px); padding-right: var(--s3); }