/* ============================================================
   Segunda leva da camada moderna (20/10/2026): as telas que ainda tinham
   a cara da primeira versão — etapa Turno e histórico do relatório,
   Registros, Consumo, Combustível, Materiais, Correias, Remotas, Mensal e
   CAPEX. Mesma regra da primeira leva: muda a estrutura, não o dado.
   ============================================================ */

/* ——— Relatório › etapa Turno: o turno dito em voz alta ——— */
.app .view .daily-turno {
  display: grid;
  gap: 20px;
  padding: 22px 24px 24px;
}
.app .view .daily-turno-cabeca {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--m-borda);
}
.app .view .daily-turno-resumo {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.app .view .daily-turno-resumo > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.app .view .daily-turno-selo {
  min-width: 56px;
  height: 56px;
  border-radius: var(--m-raio);
  font-size: 26px;
}
.app .view .daily-turno-resumo small {
  font: 600 11.5px/1 var(--font-value);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-void-2);
}
.app .view .daily-turno-resumo strong {
  font: 600 26px/1.05 var(--font-value);
  color: var(--on-void);
}
.app .view .daily-turno-resumo span:not(.rv-turma) {
  display: block;
  margin: 0;
  font: 500 13.5px/1.35 var(--font-text);
  color: var(--on-void-2);
}
.app .view .daily-turno-resumo [data-turno-resumo='linha'] {
  color: var(--on-void);
}
.app .view .daily-turno .risk-label {
  flex: none;
  margin: 0;
  padding: 6px 10px;
  border: 1px solid var(--m-borda-forte);
  border-radius: 999px;
  font: 600 11px/1 var(--font-value);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-void-2);
}
.app .view .daily-turno.risk-green .risk-label {
  border-color: var(--risk-clear-void);
  color: var(--risk-clear-void);
}
.app .view .daily-turno.risk-yellow .risk-label {
  border-color: var(--risk-attention-void);
  color: var(--risk-attention-void);
}
.app .view .daily-turno.risk-red .risk-label {
  border-color: var(--risk-blocked-void);
  color: var(--risk-blocked-void);
}
.app .view .daily-turno-campos {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
}
.app .view .daily-turno-campos > .daily-turno-fiscal {
  grid-column: span 2;
}
@media (max-width: 768px) {
  .app .view .daily-turno {
    padding: 18px 16px 20px;
    gap: 16px;
  }
  .app .view .daily-turno-cabeca {
    flex-direction: column;
    gap: 12px;
    padding-bottom: 14px;
  }
  .app .view .daily-turno-selo {
    min-width: 48px;
    height: 48px;
    font-size: 22px;
  }
  .app .view .daily-turno-resumo strong {
    font-size: 22px;
  }
  .app .view .daily-turno-campos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .app .view .daily-turno-campos > :is(.daily-turno-data, .daily-turno-fiscal, label:last-child:nth-child(odd)) {
    grid-column: 1 / -1;
  }
}

/* Voltar e Próximo: no computador, uma linha solta no pé da etapa, sem
   moldura (era um painel vazio com um botão dentro). */
@media (min-width: 769px) {
  .app .view .daily-passo-nav {
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
  }
}

/* ——— Histórico de relatórios: lista por mês ——— */
.app .view .daily-history {
  padding: 0;
  overflow: hidden;
}
.app .view .daily-history > .daily-history-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 20px 24px;
}
.app .view .daily-history > .daily-lote {
  margin: 0;
  border-inline: 0;
  border-radius: 0;
}
.app .view .daily-history > .empty-inline {
  margin: 0 24px 24px;
}
.app .view .daily-hist {
  display: grid;
  gap: 18px;
  padding: 18px 24px 24px;
}
.app .view .daily-hist-mes {
  display: grid;
  gap: 10px;
}
.app .view .daily-hist-mes h3 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  font: 600 12px/1 var(--font-value);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-void);
}
.app .view .daily-hist-mes h3 span {
  font-weight: 500;
  color: var(--on-void-2);
}
.app .view .daily-hist-lista {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.app .view .daily-hist-item {
  display: grid;
  grid-template-columns: 56px minmax(180px, 1.4fr) minmax(150px, 1fr) minmax(150px, 1fr) 128px minmax(190px, auto);
  align-items: center;
  gap: 18px;
  padding: 10px 14px 10px 10px;
  border: 1px solid var(--m-borda);
  border-radius: var(--m-raio-sm);
  background: var(--m-superficie-2);
  transition: border-color 0.16s ease;
}
.app .view .daily-hist-item:hover {
  border-color: var(--m-borda-forte);
}
.app .view .daily-hist-dia {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  width: 56px;
  height: 56px;
  border-radius: var(--m-raio-sm);
  background: var(--m-superficie-3);
}
.app .view .daily-hist-dia b {
  font: 600 20px/1 var(--font-value);
  color: var(--on-void);
}
.app .view .daily-hist-dia small {
  font: 600 11px/1 var(--font-value);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-void-2);
}
.app .view .daily-hist-quem,
.app .view .daily-hist-salvo {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.app .view .daily-hist-quem strong {
  font: 600 14px/1.2 var(--font-value);
  color: var(--on-void);
}
.app .view .daily-hist-quem span,
.app .view .daily-hist-salvo span {
  overflow: hidden;
  font: 500 13.5px/1.25 var(--font-text);
  color: var(--on-void-2);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app .view .daily-hist-salvo small {
  font: 600 11px/1 var(--font-value);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-void-2);
}
.app .view .daily-hist-turno {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 500 13.5px/1 var(--font-value);
  color: var(--on-void);
}
.app .view .daily-hist-estado {
  display: flex;
}
.app .view .daily-hist-estado .daily-history-carimbado {
  min-height: 0;
  gap: 6px;
  padding: 5px 10px 5px 8px;
  border: 1.5px solid #ec3b45;
  border-radius: 999px;
  color: #ec3b45;
  transform: rotate(-4deg);
}
.app .view .daily-hist-estado .daily-history-carimbado::before {
  content: '';
  width: 8px;
  height: 8px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}
.app .view .daily-hist-acoes {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
@media (max-width: 1180px) {
  .app .view .daily-hist-item {
    grid-template-columns: 56px minmax(0, 1fr) auto;
    grid-template-areas: 'dia quem estado' 'dia turno acoes';
    row-gap: 10px;
  }
  .app .view .daily-hist-dia {
    grid-area: dia;
  }
  .app .view .daily-hist-quem {
    grid-area: quem;
  }
  .app .view .daily-hist-turno {
    grid-area: turno;
  }
  .app .view .daily-hist-salvo {
    display: none;
  }
  .app .view .daily-hist-estado {
    grid-area: estado;
    justify-content: flex-end;
  }
  .app .view .daily-hist-acoes {
    grid-area: acoes;
  }
}
@media (max-width: 768px) {
  .app .view .daily-history > .daily-history-title {
    flex-direction: column;
    align-items: stretch;
    padding: 18px 16px;
  }
  .app .view .daily-hist {
    padding: 14px 16px 18px;
  }
  .app .view .daily-hist-item {
    grid-template-columns: 48px minmax(0, 1fr);
    grid-template-areas: 'dia quem' 'dia turno' 'estado acoes';
    gap: 8px 12px;
    padding: 10px;
  }
  .app .view .daily-hist-dia {
    width: 48px;
    height: 48px;
  }
  .app .view .daily-hist-estado {
    align-items: center;
    justify-content: flex-start;
  }
  .app .view .daily-hist-rotulo {
    display: none;
  }
}

/* O título do histórico no mesmo corpo dos títulos de painel. */
.app .view .daily-history-title h2 {
  margin: 0;
  font: 600 15.5px/1.2 var(--font-label);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--on-void);
}

/* ——— Administração › Registros: linha do tempo da equipe ——— */
.app .view .reg-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  gap: var(--m-vao);
  align-items: start;
}
.app .view .reg-grade > .card {
  margin: 0;
}
.app .view .reg-busca {
  padding: 16px 24px 0;
}
.app .view .reg-linha-tempo {
  display: grid;
  gap: 22px;
  padding: 20px 24px 24px;
}
.app .view .reg-linha-tempo > .empty {
  margin: 0;
}
.app .view .reg-dia {
  position: relative;
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 58px;
}
/* O fio da linha do tempo, de um dia ao próximo. */
.app .view .reg-dia::before {
  content: '';
  position: absolute;
  top: 48px;
  bottom: -22px;
  left: 21px;
  width: 2px;
  background: var(--m-borda);
}
.app .view .reg-dia:last-child::before {
  bottom: 0;
}
.app .view .reg-dia h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  margin: 0 0 2px -58px;
  padding: 0;
  border: 0;
  font: inherit;
  text-transform: none;
}
.app .view .reg-dia h3 > b {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--m-borda-forte);
  border-radius: 50%;
  background: var(--m-superficie-3);
  font: 600 16px/1 var(--font-value);
  color: var(--on-void);
}
.app .view .reg-dia h3 > span {
  display: grid;
  gap: 3px;
}
.app .view .reg-dia h3 strong {
  font: 600 14px/1 var(--font-value);
  color: var(--on-void);
}
.app .view .reg-dia h3 small {
  font: 500 12.5px/1.2 var(--font-text);
  color: var(--on-void-2);
}
.app .view .reg-pessoas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}
.app .view .reg-pessoa {
  display: grid;
  grid-template-columns: 40px minmax(160px, 1fr) minmax(180px, 1.2fr) auto 18px;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 64px;
  margin: 0;
  padding: 10px 14px 10px 12px;
  border: 1px solid var(--m-borda);
  border-radius: var(--m-raio-sm);
  background: var(--m-superficie-2);
  text-align: left;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.16s ease, background-color 0.16s ease;
}
.app .view .reg-pessoa:hover {
  border-color: var(--m-borda-forte);
  background: var(--m-superficie-3);
}
.app .view .reg-pessoa:focus-visible {
  outline: 2px solid var(--on-void);
  outline-offset: 2px;
}
.app .view .reg-avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--on-void-2);
  font: 700 13px/1 var(--font-value);
  color: var(--void);
}
.app .view .reg-avatar .presence-dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 12px;
  height: 12px;
  margin: 0;
  border: 2px solid var(--void-2);
  border-radius: 50%;
}
.app .view .reg-avatar .presence-dot.online {
  background: var(--risk-clear-void);
}
.app .view .reg-avatar .presence-dot.offline {
  background: #4a4d55;
}
.app .view .reg-quem,
.app .view .reg-ultima {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.app .view .reg-quem strong {
  overflow: hidden;
  font: 600 14.5px/1.15 var(--font-text);
  color: var(--on-void);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app .view .reg-quem small,
.app .view .reg-ultima span {
  overflow: hidden;
  font: 500 12.5px/1.25 var(--font-text);
  color: var(--on-void-2);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app .view .reg-ultima small {
  font: 600 11px/1 var(--font-value);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-void-2);
}
.app .view .reg-ultima span {
  color: var(--on-void);
}
.app .view .reg-conta {
  padding: 5px 10px;
  border: 1px solid var(--m-borda-forte);
  border-radius: 999px;
  font: 600 11.5px/1 var(--font-value);
  font-style: normal;
  white-space: nowrap;
  color: var(--on-void);
}
.app .view .reg-seta {
  display: grid;
  color: var(--on-void-2);
}
.app .view .reg-seta svg {
  width: 16px;
  height: 16px;
}

/* Terceirizada: uma lista estreita ao lado. */
.app .view .reg-tc {
  position: sticky;
  top: 16px;
}
.app .view .reg-tc-lista {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 16px 20px 20px;
  list-style: none;
}
.app .view .reg-tc-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 12px;
  padding: 12px;
  border: 1px solid var(--m-borda);
  border-radius: var(--m-raio-sm);
  background: var(--m-superficie-2);
}
.app .view .reg-tc-data {
  grid-row: span 2;
  align-self: start;
  padding: 6px 8px;
  border-radius: 6px;
  background: var(--m-superficie-3);
  font: 600 12px/1 var(--font-value);
  color: var(--on-void);
}
.app .view .reg-tc-item > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.app .view .reg-tc-item strong {
  font: 600 14px/1.2 var(--font-text);
  color: var(--on-void);
}
.app .view .reg-tc-item span,
.app .view .reg-tc-item small {
  font: 500 12.5px/1.3 var(--font-text);
  color: var(--on-void-2);
}
.app .view .reg-tc-vazio {
  margin: 0;
  padding: 18px 16px;
  border: 1px dashed var(--m-borda-forte);
  border-radius: var(--m-raio-sm);
  font: 400 13.5px/1.45 var(--font-text);
  text-align: left;
  color: var(--on-void-2);
}
@media (max-width: 1180px) {
  .app .view .reg-grade {
    grid-template-columns: minmax(0, 1fr);
  }
  .app .view .reg-tc {
    position: static;
  }
}
@media (max-width: 768px) {
  .app .view .reg-busca {
    padding: 14px 16px 0;
  }
  .app .view .reg-linha-tempo {
    padding: 16px;
  }
  .app .view .reg-dia {
    padding-left: 0;
  }
  .app .view .reg-dia::before {
    display: none;
  }
  .app .view .reg-dia h3 {
    margin-left: 0;
  }
  .app .view .reg-tc-lista {
    padding: 14px 16px 16px;
  }
}

/* A linha da pessoa empilha quando a coluna fica estreita (celular e a
   faixa de 769 a 1100 px, com a barra lateral larga). */
@media (max-width: 1100px) {
  .app .view .reg-pessoa {
    grid-template-columns: 40px minmax(0, 1fr) 18px;
    grid-template-areas: 'avatar quem seta' 'avatar ultima seta' 'avatar conta seta';
    gap: 6px 12px;
    padding: 12px;
  }
  .app .view .reg-avatar {
    grid-area: avatar;
    align-self: start;
  }
  .app .view .reg-quem {
    grid-area: quem;
  }
  .app .view .reg-ultima {
    grid-area: ultima;
  }
  .app .view .reg-conta {
    grid-area: conta;
    justify-self: start;
  }
  .app .view .reg-seta {
    grid-area: seta;
  }
}

/* ——— Suprimentos › Consumo e Combustível: barras de ranking ——— */
.app .view .sp-consumo > .stats,
.app .view .cb-painel > .cb-topo {
  margin: 0;
  padding: 18px 0 0;
}
.app .view .sp-consumo .stat-card > span {
  display: block;
  margin-top: 6px;
  font: 500 12.5px/1.3 var(--font-text);
  color: var(--on-void-2);
}
.app .view .sp-consumo > .consumo-resumo-aviso,
.app .view .cb-painel > .consumo-resumo-aviso {
  margin: 16px 0 0;
}
.app .view .sp-consumo > .empty-state {
  margin: 18px 0 0;
}
.app .view .sp-consumo-grade {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr);
  gap: var(--m-vao);
  align-items: start;
  padding: 18px 0 0;
}
.app .view .sp-grupos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--m-vao);
  padding: 16px 0 0;
}
.app .view .sp-consumo > .sp-emprestimos {
  margin: 18px 0 0;
}
.app .view .consumo-resumo-bloco.sp-grupo,
.app .view .consumo-resumo-bloco.sp-materiais,
.app .view .consumo-resumo-bloco.sp-emprestimos {
  display: grid;
  /* O quadro estica até a altura do vizinho na mesma fileira; o conteúdo
     fica no topo (em "Por local", a sobra abria um vão acima da lista). */
  align-content: start;
  gap: 12px;
  margin: 0;
  padding: 16px 18px 18px;
  border: 1px solid var(--m-borda);
  border-radius: var(--m-raio);
  background: var(--m-superficie-2);
}
.app .view :is(.sp-grupo, .sp-materiais, .sp-emprestimos) > h3 {
  margin: 0;
  font: 600 12px/1 var(--font-value);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-void);
}
.app .view :is(.sp-grupo, .sp-emprestimos) > .empty-state {
  margin: 0;
}
.app .view .sp-rank {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.app .view .sp-rank > li {
  display: grid;
  gap: 7px;
  min-width: 0;
}
.app .view .sp-rank-cab {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}
.app .view .sp-rank-cab strong {
  flex: 1 1 auto;
  min-width: 0;
  font: 600 14px/1.3 var(--font-text);
  color: var(--on-void);
  overflow-wrap: anywhere;
}
.app .view .sp-rank-cab > span:not(.sp-classe) {
  flex: none;
  font: 500 12.5px/1.2 var(--font-value);
  color: var(--on-void-2);
  white-space: nowrap;
}
.app .view .sp-rank-cab > b {
  flex: none;
  font: 600 14px/1.2 var(--font-value);
  color: var(--on-void);
  white-space: nowrap;
}
.app .view .sp-classe {
  flex: none;
  align-self: center;
  padding: 3px 7px;
  border: 1px solid var(--m-borda-forte);
  border-radius: 999px;
  font: 600 11px/1 var(--font-value);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--on-void-2);
}
.app .view .sp-rank > li > small {
  font: 400 12.5px/1.4 var(--font-text);
  color: var(--on-void-2);
}
.app .view .sp-barra {
  display: block;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
}
.app .view .sp-barra > b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #6e717a, #c9c7c3);
}
.app .view .sp-rank > li:first-child .sp-barra > b {
  background: linear-gradient(90deg, #8f9199, var(--on-void));
}

/* Material emprestado: cada empréstimo numa linha, com o total no pé. */
.app .view .sp-emp-lista {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.app .view .sp-emp-lista > li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--m-borda);
  border-radius: var(--m-raio-sm);
  background: var(--m-superficie-3);
}
.app .view .sp-emp-data {
  padding: 5px 7px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  font: 600 12px/1 var(--font-value);
  color: var(--on-void);
}
.app .view .sp-emp-lista > li > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.app .view .sp-emp-lista strong {
  font: 600 13.5px/1.3 var(--font-text);
  color: var(--on-void);
}
.app .view .sp-emp-lista > li > div > span,
.app .view .sp-emp-lista .consumo-detalhe {
  font: 400 12.5px/1.35 var(--font-text);
  color: var(--on-void-2);
}
.app .view .sp-emp-lista > li > b {
  display: grid;
  justify-items: end;
  gap: 4px;
  font: 600 14px/1 var(--font-value);
  color: var(--on-void);
  white-space: nowrap;
}
.app .view .sp-emp-lista > li > b small {
  font: 500 11.5px/1 var(--font-value);
  color: var(--on-void-2);
}
.app .view .sp-emp-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--m-borda);
  font: 600 12px/1.2 var(--font-value);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--on-void-2);
}
.app .view .sp-emp-total strong {
  font: 600 16px/1 var(--font-value);
  letter-spacing: 0;
  text-transform: none;
  color: var(--on-void);
}

/* Combustível: o mês em destaque, com os litros de cada mês em colunas. */
.app .view .cb-topo {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(0, 1.6fr);
  gap: var(--m-vao);
}
.app .view .cb-destaque,
.app .view .cb-grafico {
  margin: 0;
  padding: 18px 20px;
  border: 1px solid var(--m-borda);
  border-radius: var(--m-raio);
  background: var(--m-superficie-2);
}
.app .view .cb-destaque {
  display: grid;
  align-content: start;
  gap: 8px;
}
.app .view .cb-destaque > small,
.app .view .cb-grafico figcaption,
.app .view .cb-ano dt {
  font: 600 11px/1 var(--font-value);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-void-2);
}
.app .view .cb-destaque > strong {
  font: 600 34px/1.05 var(--font-value);
  color: var(--on-void);
}
.app .view .cb-destaque > span {
  font: 500 13px/1.35 var(--font-text);
  color: var(--on-void-2);
}
.app .view .cb-ano {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 8px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--m-borda);
}
.app .view .cb-ano > div {
  display: grid;
  gap: 6px;
}
.app .view .cb-ano dd {
  margin: 0;
  font: 600 16px/1.1 var(--font-value);
  color: var(--on-void);
}
.app .view .cb-grafico {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 14px;
  min-width: 0;
}
.app .view .cb-grafico ol {
  display: grid;
  grid-auto-columns: minmax(28px, 1fr);
  grid-auto-flow: column;
  align-items: end;
  gap: 8px;
  min-height: 150px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.app .view .cb-grafico li {
  display: grid;
  grid-template-rows: 1fr auto;
  justify-items: center;
  gap: 8px;
  height: 100%;
}
.app .view .cb-col {
  display: flex;
  align-items: flex-end;
  width: 100%;
  max-width: 44px;
  height: 100%;
  min-height: 110px;
  border-radius: 6px 6px 3px 3px;
  background: rgba(255, 255, 255, 0.04);
}
.app .view .cb-col > b {
  display: block;
  width: 100%;
  border-radius: inherit;
  background: #6e717a;
}
.app .view .cb-grafico li.is-atual .cb-col > b {
  background: var(--on-void);
}
.app .view .cb-grafico li > small {
  font: 600 11px/1 var(--font-value);
  text-transform: uppercase;
  color: var(--on-void-2);
}
.app .view .cb-grafico li.is-atual > small {
  color: var(--on-void);
}
.app .view .cb-subtitulo {
  margin: 22px 0 10px;
  font: 600 12px/1 var(--font-value);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-void);
}
.app .view .cb-meses {
  container: cb-meses / inline-size;
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.app .view .cb-mes {
  display: grid;
  grid-template-columns: minmax(170px, 1.2fr) minmax(110px, 0.8fr) minmax(170px, 1fr) minmax(120px, 0.8fr);
  align-items: center;
  gap: 18px;
  padding: 12px 16px;
  border: 1px solid var(--m-borda);
  border-radius: var(--m-raio-sm);
  background: var(--m-superficie-2);
}
.app .view .cb-mes.is-atual {
  border-color: var(--m-borda-forte);
}
.app .view .cb-mes > div,
.app .view .cb-mes-preco {
  display: grid;
  gap: 5px;
  min-width: 0;
}
.app .view .cb-mes small {
  font: 600 11px/1 var(--font-value);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-void-2);
}
.app .view .cb-mes-nome strong {
  font: 600 14px/1.2 var(--font-text);
  color: var(--on-void);
}
.app .view .cb-mes-nome span {
  font: 400 12.5px/1.2 var(--font-text);
  color: var(--on-void-2);
}
.app .view .cb-mes b {
  font: 600 15px/1.1 var(--font-value);
  color: var(--on-void);
}
.app .view .cb-mes-gasto {
  justify-items: end;
}
.app .view .cb-mes-preco .cell-in {
  width: 100%;
  max-width: 170px;
}
/* As quatro colunas pedem cerca de 660 px. Em 820 px, com o menu ao lado,
   o quadro tem uns 500 e o gasto do mês saía pela direita: a fileira se
   ajusta pela largura do quadro, não pela da tela. */
@container cb-meses (max-width: 680px) {
  .app .view .cb-mes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 12px;
  }
  .app .view .cb-mes-nome,
  .app .view .cb-mes-preco {
    grid-column: 1 / -1;
  }
  /* Litros e gasto lado a lado; o campo do preço fecha o cartão. */
  .app .view .cb-mes-preco {
    order: 1;
  }
  .app .view .cb-mes-gasto {
    justify-items: start;
  }
  .app .view .cb-mes-preco .cell-in {
    max-width: none;
  }
}
.app .view .cb-mes-preco .combustivel-preco-origem {
  font: 400 12px/1.3 var(--font-text);
  letter-spacing: 0;
  text-transform: none;
}
.app .view .cb-painel > .material-adjust-note {
  margin: 14px 0 0;
}
.app .view .cb-equipamentos > .cb-rank {
  padding: 18px 0 0;
}
.app .view .cb-equipamentos > .cb-total {
  margin: 16px 0 0;
}
.app .view .cb-equipamentos > .empty-state {
  margin: 18px 0 0;
}
@media (max-width: 1100px) {
  .app .view .sp-consumo-grade,
  .app .view .cb-topo {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 768px) {
  .app .view .sp-consumo > .stats,
  .app .view .cb-painel > .cb-topo {
    padding: 16px 0 0;
  }
  .app .view .sp-consumo-grade {
    padding: 16px 0 0;
  }
  .app .view .sp-grupos {
    grid-template-columns: minmax(0, 1fr);
    padding: 14px 0 0;
  }
  .app .view :is(.sp-consumo, .cb-painel) > .consumo-resumo-aviso {
    margin: 14px 0 0;
  }
  .app .view .sp-consumo > :is(.empty-state, .sp-emprestimos) {
    margin: 16px 0 0;
  }
  .app .view .sp-rank-cab {
    flex-wrap: wrap;
    row-gap: 4px;
  }
  .app .view .sp-rank-cab strong {
    flex-basis: 100%;
    order: -1;
  }
  .app .view .sp-emp-lista > li {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .app .view .sp-emp-data {
    grid-column: 1 / -1;
    justify-self: start;
  }
  .app .view .cb-destaque > strong {
    font-size: 28px;
  }
  .app .view .cb-grafico ol {
    gap: 5px;
    min-height: 120px;
  }
  .app .view .cb-col {
    min-height: 90px;
  }
  .app .view .cb-subtitulo {
    margin: 20px 0 10px;
  }
  .app .view .cb-meses {
    margin: 0;
  }
  .app .view .cb-mes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 12px;
  }
  .app .view .cb-mes-nome,
  .app .view .cb-mes-preco {
    grid-column: 1 / -1;
  }
  .app .view .cb-mes-gasto {
    justify-items: start;
  }
  .app .view .cb-mes-preco .cell-in {
    max-width: none;
  }
  .app .view .cb-painel > .material-adjust-note {
    margin: 12px 0 0;
  }
  .app .view .cb-equipamentos > .cb-rank {
    padding: 16px 0 0;
  }
  .app .view .cb-equipamentos > :is(.cb-total, .empty-state) {
    margin: 14px 0 0;
  }
}

/* Mês e planilha à direita do título, como nos outros painéis. */
@media (min-width: 769px) {
  .app .view .sp-consumo > .card-head {
    flex-flow: row nowrap;
  }
  .app .view .sp-consumo .consumo-cabeca-acoes {
    flex: none;
    flex-wrap: nowrap;
  }
}

/* ——— Suprimentos › Materiais: projetos ao lado, o escolhido no centro ——— */
.app .view .mt-area {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  gap: var(--m-vao);
  align-items: start;
}
.app .view .mt-lado,
.app .view .mt-principal {
  display: grid;
  gap: var(--m-vao);
  min-width: 0;
}
.app .view .mt-lado > .card,
.app .view .mt-principal > * {
  margin: 0;
}
.app .view .mt-lado .month-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  padding: 14px 0 0;
  overflow: visible;
}
.app .view .mt-lado .month-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 10px 14px;
}
.app .view .mt-proj-lista {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 14px 0 0;
  list-style: none;
}
.app .view .mt-proj-lista > .empty {
  margin: 0;
}
.app .view .mt-proj {
  display: grid;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--m-borda);
  border-radius: var(--m-raio-sm);
  background: var(--m-superficie-2);
  text-align: left;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.16s ease, background-color 0.16s ease;
}
.app .view .mt-proj:hover {
  border-color: var(--m-borda-forte);
}
.app .view .mt-proj:focus-visible {
  outline: 2px solid var(--on-void);
  outline-offset: 2px;
}
/* O projeto escolhido: borda clara e uma régua à esquerda (seleção é
   neutra; o vermelho fica para a casca). */
.app .view .mt-proj.is-atual {
  border-color: var(--on-void-2);
  background: var(--m-superficie-3);
  box-shadow: inset 3px 0 0 var(--on-void);
}
.app .view .mt-proj-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.app .view .mt-proj-topo strong {
  font: 600 14.5px/1.2 var(--font-value);
  color: var(--on-void);
}
.app .view .mt-proj-meio {
  font: 400 12.5px/1.35 var(--font-text);
  color: var(--on-void-2);
}
.app .view .mt-proj > b {
  font: 600 16px/1 var(--font-value);
  color: var(--on-void);
}
.app .view .mt-principal > .material-active-head {
  padding: 16px 20px;
  border: 1px solid var(--m-borda);
  border-radius: var(--m-raio);
  background: var(--m-superficie);
}
.app .view .mt-principal > .material-summary {
  margin: 0;
}
.app .view .mt-cadastros {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--m-vao);
  align-items: start;
  margin-top: var(--m-vao);
}
.app .view .mt-cadastros > .card {
  margin: 0;
}
@media (max-width: 1280px) {
  .app .view .mt-cadastros {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 1100px) {
  .app .view .mt-area {
    grid-template-columns: minmax(0, 1fr);
  }
  .app .view .mt-lado {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

/* Tabelas largas de Materiais: no celular, cada linha é um cartão com o
   rótulo ao lado de cada valor (mesmo padrão do Estoque). */
@media (max-width: 768px) {
  .app .view .mt-lado {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Listas longas (o projeto calcula cem itens): os cartões rolam dentro
     da própria caixa, só na vertical, para a página não virar um rolo. */
  .app .view .table-wrap:has(> .mt-cartoes) {
    max-height: min(70vh, 620px);
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 4px;
    border: 0;
    background: none;
    overscroll-behavior: contain;
  }
  .app .view table.mt-cartoes,
  .app .view table.mt-cartoes tbody {
    display: grid;
    gap: 8px;
    min-width: 0;
    width: 100%;
  }
  .app .view table.mt-cartoes thead {
    display: none;
  }
  .app .view table.mt-cartoes tr {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px 12px;
    padding: 10px 12px;
    border: 1px solid var(--m-borda);
    border-radius: var(--m-raio-sm);
    background: var(--m-superficie-2);
  }
  .app .view table.mt-cartoes tr.material-group-row {
    display: block;
    padding: 8px 0 0;
    border: 0;
    background: none;
  }
  .app .view table.mt-cartoes tr.material-group-row td {
    padding: 0;
    border: 0;
    background: none;
    font: 600 12px/1 var(--font-value);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--on-void);
  }
  .app .view table.mt-cartoes td {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
  }
  .app .view table.mt-cartoes td[data-label]::before {
    content: attr(data-label);
    font: 600 11px/1 var(--font-value);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--on-void-2);
  }
  .app .view table.mt-cartoes td.mt-item {
    display: none;
  }
  .app .view table.mt-cartoes td:is(.mt-desc, .mt-unit) {
    grid-column: 1 / -1;
  }
  .app .view table.mt-cartoes td.mt-desc {
    font: 600 14px/1.3 var(--font-text);
    color: var(--on-void);
  }
  .app .view table.mt-cartoes td.mt-desc::before {
    display: none;
  }
  .app .view table.mt-cartoes td .cell-in {
    width: 100%;
    min-height: 44px;
  }
  .app .view table.mt-cartoes td.material-total {
    font-weight: 700;
  }
}

/* No computador, as duas tabelas cabem na coluna do projeto: sem largura
   mínima herdada, valores compactos e o nome do material quebrando linha. */
@media (min-width: 769px) {
  .app .view .mt-principal table.mt-cartoes {
    width: 100%;
    min-width: 0;
  }
  .app .view .mt-principal table.mt-cartoes :is(th, td) {
    min-width: 0;
    padding-inline: 8px;
    white-space: normal;
  }
  .app .view .mt-principal table.mt-cartoes :is(th, td):first-child {
    padding-left: 16px;
  }
  .app .view .mt-principal table.mt-cartoes :is(th, td):last-child {
    padding-right: 16px;
  }
  .app .view .mt-principal table.mt-cartoes td:not(.mt-desc, .mt-unit) {
    white-space: nowrap;
  }
  .app .view .mt-principal table.mt-cartoes td.mt-desc {
    min-width: 160px;
  }
  .app .view .mt-principal table.mt-cartoes .cell-in {
    width: 100%;
    min-width: 76px;
  }
  .app .view .mt-principal table.mt-cartoes td.mt-unit {
    width: 96px;
  }
  .app .view .mt-principal .estoque-projeto table.mt-cartoes td.mt-unit {
    width: 30%;
  }
}
@media (min-width: 769px) and (max-width: 1500px) {
  .app .view .mt-principal table.material-table tr:not(.material-group-row) > :is(th, td):nth-child(1) {
    display: none;
  }
  .app .view .mt-principal table.material-table tr:not(.material-group-row) > :is(th, td):nth-child(2) {
    padding-left: 16px;
  }
}

/* Na meia largura dos cadastros, o formulário do material adicional numa
   linha só, sem a largura mínima que o fazia passar da caixa. */
@media (min-width: 1281px) {
  .app .view .mt-cadastros .custom-material-form {
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 0.7fr)) auto;
  }
}

/* ——— Financeiro › CAPEX: fases, planilha no computador, cartões no celular ——— */
.app .view .cx-funil {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 18px 0 16px;
  list-style: none;
}
.app .view .cx-funil > li {
  position: relative;
  display: grid;
  gap: 6px;
  padding: 14px 16px 16px;
  border: 1px solid var(--m-borda);
  border-radius: var(--m-raio-sm);
  background: var(--m-superficie-2);
}
/* A seta entre as fases: do orçamento à chegada. */
.app .view .cx-funil > li + li::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -12px;
  width: 12px;
  height: 2px;
  background: var(--m-borda-forte);
}
.app .view .cx-funil small {
  font: 600 11px/1 var(--font-value);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-void-2);
}
.app .view .cx-funil strong {
  font: 600 20px/1.1 var(--font-value);
  color: var(--on-void);
}
.app .view .cx-funil span {
  font: 400 12.5px/1.2 var(--font-text);
  color: var(--on-void-2);
}
.app .view .cx-funil-barra,
.app .view .cx-uso,
.app .view .mn-barra {
  display: block;
  height: 6px;
  margin-top: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
}
.app .view .cx-funil-barra > b,
.app .view .cx-uso > b,
.app .view .mn-barra > b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #8f9199;
}
.app .view .cx-fase-recebido .cx-funil-barra > b {
  background: var(--risk-clear-void);
}
.app .view .cx-fase-comprado .cx-funil-barra > b {
  background: var(--risk-attention-void);
}

/* Planilha: as células parecem células (borda só ao passar o mouse ou ao
   digitar), para a linha ler como linha e não como um formulário. */
.app .view .cx-tabela .capex-table .cell-in {
  border-color: transparent;
  background: transparent;
}
.app .view .cx-tabela .capex-table tr:hover .cell-in,
.app .view .cx-tabela .capex-table .cell-in:focus {
  border-color: var(--console-line-strong);
  background: var(--void);
}
.app .view .cx-tabela .capex-table .cell-in::placeholder {
  color: #6e717a;
}
.app .view .cx-cartoes {
  display: none;
}
/* A planilha tem 13 colunas: só aparece onde cabe inteira. Abaixo disso,
   os cartões (duas colunas no computador, uma no celular) e a janela. */
@media (max-width: 1699px) {
  .app .view .cx-tabela {
    display: none;
  }
  .app .view .cx-cartoes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
    gap: 10px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
  }
  .app .view .cx-cartoes > .empty {
    grid-column: 1 / -1;
    margin: 0;
  }
  .app .view .cx-cartao {
    display: grid;
    align-content: start;
    gap: 10px;
    padding: 14px 16px;
    border: 1px solid var(--m-borda);
    border-radius: var(--m-raio-sm);
    background: var(--m-superficie-2);
  }
  .app .view .cx-cartao-topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
  }
  .app .view .cx-cartao-topo strong {
    font: 600 14.5px/1.3 var(--font-text);
    color: var(--on-void);
  }
  .app .view .cx-cartao-valor {
    font: 600 20px/1 var(--font-value);
    color: var(--on-void);
  }
  .app .view .cx-cartao-quem,
  .app .view .cx-cartao-prazo {
    font: 400 12.5px/1.4 var(--font-text);
    color: var(--on-void-2);
  }
  .app .view .cx-trilha {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .app .view .cx-trilha > li {
    position: relative;
    display: grid;
    gap: 4px;
    padding-top: 16px;
  }
  /* A trilha: um ponto por data, o traço aceso até a última preenchida. */
  .app .view .cx-trilha > li::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 0;
    width: 10px;
    height: 10px;
    border: 2px solid var(--m-borda-forte);
    border-radius: 50%;
    background: var(--void-2);
  }
  .app .view .cx-trilha > li::after {
    content: '';
    position: absolute;
    top: 8px;
    left: 14px;
    right: 4px;
    height: 2px;
    background: var(--m-borda);
  }
  .app .view .cx-trilha > li:last-child::after {
    display: none;
  }
  .app .view .cx-trilha > li.feito::before {
    border-color: var(--on-void);
    background: var(--on-void);
  }
  .app .view .cx-trilha > li.feito:has(+ li.feito)::after {
    background: var(--on-void-2);
  }
  .app .view .cx-trilha small {
    font: 600 11px/1 var(--font-value);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--on-void-2);
  }
  .app .view .cx-trilha span {
    font: 500 13px/1 var(--font-value);
    color: var(--on-void);
  }
  .app .view .cx-cartao-acoes {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    gap: 8px;
  }
  .app .view .cx-cartao-acoes .btn {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .app .view .cx-funil {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  .app .view .cx-funil > li + li::before {
    display: none;
  }
  .app .view .cx-funil > li {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    padding: 12px 14px;
  }
  .app .view .cx-funil small {
    grid-column: 1 / -1;
  }
  .app .view .cx-funil strong {
    font-size: 17px;
  }
  .app .view .cx-funil-barra {
    grid-column: 1 / -1;
  }
  .app .view .cx-cartao-acoes .btn {
    min-height: 44px;
  }
}

/* Janela de edição do item. */
.app .cx-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.app .cx-form > .cx-largo {
  grid-column: span 2;
}
.app .cx-form > .form-group {
  margin: 0;
}
@media (max-width: 768px) {
  .app .cx-form {
    grid-template-columns: minmax(0, 1fr);
  }
  .app .cx-form > .cx-largo {
    grid-column: auto;
  }
}

/* Orçamento: cada projeto e cada período num cartão com a barra do uso. */
.app .view .cx-orc-grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--m-vao);
  align-items: start;
  padding-top: 18px;
}
.app .view .cx-orc-bloco {
  display: grid;
  gap: 12px;
  min-width: 0;
}
.app .view .capex-orcamento .cx-orc-bloco > h3 {
  margin: 0;
  padding: 0;
  font: 600 12px/1 var(--font-value);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-void);
}
.app .view .cx-orc-lista {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.app .view .cx-orc-item {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--m-borda);
  border-radius: var(--m-raio-sm);
  background: var(--m-superficie-2);
}
.app .view .cx-orc-topo {
  display: flex;
  align-items: center;
  gap: 10px;
}
.app .view .cx-orc-topo strong {
  flex: 1 1 auto;
  min-width: 0;
  font: 600 14px/1.25 var(--font-value);
  color: var(--on-void);
}
.app .view .cx-uso {
  height: 8px;
  margin: 0;
}
.app .view .cx-uso > b {
  background: var(--risk-clear-void);
}
.app .view .cx-uso.perto > b {
  background: var(--risk-attention-void);
}
.app .view .cx-uso.estourado > b {
  background: var(--risk-blocked-void);
}
.app .view .cx-uso-vazio {
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0 6px, transparent 6px 10px);
}
.app .view .cx-orc-numeros {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}
.app .view .cx-orc-numeros.cx-orc-tres {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.app .view .cx-orc-numeros > div {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
}
.app .view .cx-orc-numeros dt,
.app .view .cx-orc-numeros dt label {
  margin: 0;
  font: 600 11px/1 var(--font-value);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-void-2);
}
.app .view .cx-orc-numeros dd {
  margin: 0;
  font: 600 13.5px/1.2 var(--font-value);
  color: var(--on-void);
}
.app .view .cx-orc-numeros .cell-in {
  width: 100%;
  min-width: 0;
  min-height: 40px;
}
.app .view .cx-orc-bloco > .contratos-barra {
  margin: 4px 0 0;
}
@media (max-width: 1180px) {
  .app .view .cx-orc-grade {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 768px) {
  .app .view .cx-orc-numeros,
  .app .view .cx-orc-numeros.cx-orc-tres {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .app .view .cx-orc-topo {
    flex-wrap: wrap;
  }
  .app .view .cx-orc-topo strong {
    flex-basis: 100%;
  }
}

/* ——— Financeiro › Mensal: a folha do fechamento ——— */
.app .view .mn-topo {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(0, 1.5fr);
  gap: var(--m-vao);
  padding-top: 18px;
}
.app .view .mn-gasto {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  align-content: start;
  gap: 10px;
  padding: 18px 20px;
  border: 1px solid var(--m-borda);
  border-radius: var(--m-raio);
  background: var(--m-superficie-2);
}
.app .view .mn-gasto > small {
  font: 600 11px/1 var(--font-value);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-void-2);
}
.app .view .mn-gasto > strong {
  font: 600 32px/1.05 var(--font-value);
  color: var(--on-void);
}
.app .view .mn-divisao {
  display: flex;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
}
.app .view .mn-divisao > b {
  display: block;
  height: 100%;
}
.app .view .mn-div-material {
  background: var(--on-void);
}
.app .view .mn-div-capex {
  background: #6e717a;
}
.app .view .mn-legenda {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.app .view .mn-legenda li {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 500 13px/1.3 var(--font-text);
  color: var(--on-void-2);
}
.app .view .mn-legenda li > i {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 3px;
}
.app .view .mn-legenda b {
  margin-left: auto;
  font: 600 13.5px/1 var(--font-value);
  color: var(--on-void);
}
.app .view .mn-numeros {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: stretch;
  margin: 0;
}
.app .view .mn-registrado {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 16px 0 0;
  list-style: none;
}
.app .view .mn-registrado li {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid var(--m-borda);
  border-radius: 999px;
  font: 500 13px/1 var(--font-text);
  color: var(--on-void-2);
}
.app .view .mn-registrado b {
  font: 600 14px/1 var(--font-value);
  color: var(--on-void);
}
.app .view .mn-grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--m-vao);
  align-items: start;
  margin-top: var(--m-vao);
}
.app .view .mn-grade > .card {
  margin: 0;
}
.app .view .mn-projetos {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 16px 0 0;
  list-style: none;
}
.app .view .mn-projetos > li:not(.empty) {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--m-borda);
  border-radius: var(--m-raio-sm);
  background: var(--m-superficie-2);
}
.app .view .mn-projetos > .empty {
  margin: 0;
}
.app .view .mn-proj-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.app .view .mn-proj-topo strong {
  font: 600 14px/1.25 var(--font-value);
  color: var(--on-void);
}
.app .view .mn-projetos dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}
.app .view .mn-projetos dl > div {
  display: grid;
  gap: 4px;
}
.app .view .mn-projetos dt {
  font: 600 11px/1 var(--font-value);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-void-2);
}
.app .view .mn-projetos dd {
  margin: 0;
  font: 500 13.5px/1.2 var(--font-value);
  color: var(--on-void);
}
.app .view .mn-razao {
  display: grid;
  margin: 0;
  padding: 8px 0 0;
  list-style: none;
}
.app .view .mn-razao > li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--m-borda);
}
.app .view .mn-razao > li > span {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.app .view .mn-razao strong {
  font: 600 14px/1.25 var(--font-text);
  color: var(--on-void);
}
.app .view .mn-razao small {
  font: 400 12.5px/1.35 var(--font-text);
  color: var(--on-void-2);
}
.app .view .mn-razao b {
  flex: none;
  font: 600 15px/1 var(--font-value);
  color: var(--on-void);
}
.app .view .mn-razao > li.monthly-total {
  border-bottom: 2px solid var(--m-borda-forte);
}
.app .view .mn-razao > li.monthly-total b {
  font-size: 18px;
}
.app .view .mn-razao > li.mn-razao-aparte {
  border-bottom: 0;
  opacity: 0.85;
}
.app .view .mn-comparacao {
  display: grid;
  gap: 12px;
  padding-top: 18px;
}
.app .view .mn-comparacao > div {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}
.app .view .mn-comparacao span {
  font: 600 11.5px/1 var(--font-value);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-void-2);
}
.app .view .mn-comparacao .mn-barra {
  height: 12px;
  margin: 0;
}
.app .view .mn-comparacao-b .mn-barra > b {
  background: var(--on-void);
}
.app .view .mn-comparacao strong {
  font: 600 14px/1 var(--font-value);
  color: var(--on-void);
}
.app .view .mn-saldo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--m-borda);
  font: 500 13px/1.3 var(--font-text);
  color: var(--on-void-2);
}
.app .view .mn-saldo strong {
  font: 600 18px/1 var(--font-value);
  color: var(--on-void);
}
.app .view .mn-grade > .card > .empty {
  margin: 16px 0 0;
}
@media (max-width: 1180px) {
  .app .view .mn-topo,
  .app .view .mn-grade {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 768px) {
  .app .view .mn-numeros {
    grid-template-columns: minmax(0, 1fr);
  }
  /* O valor do mês em letra de máquina: em 320 px, "R$ 2.147.297,01" a 26 px
     passava da borda do quadro. Encolhe com a tela até 20 px. */
  .app .view .mn-gasto > strong {
    font-size: clamp(20px, 6.6vw, 26px);
  }
  .app .view .mn-projetos dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .app .view .mn-comparacao > div {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .app .view .mn-comparacao .mn-barra {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}
@media print {
  .app .view .mn-topo,
  .app .view .mn-grade {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* O orçamento por período se cadastra numa faixa própria, abaixo das duas
   colunas. */
.app .view .capex-orcamento > .contratos-barra {
  margin-top: var(--m-vao);
  padding-top: var(--m-vao);
  border-top: 1px solid var(--m-borda);
}
@media (max-width: 768px) {
  .app .view .cx-orc-numeros .cell-in {
    min-height: 44px;
  }
}

/* Mensal: o CAPEX do ano, à parte do gasto do mês (o CAPEX é anual). */
.app .view .mn-gasto-nota {
  font: 400 12.5px/1.4 var(--font-text);
  color: var(--on-void-2);
}
.app .view .mn-capex-ano {
  display: grid;
  min-width: 0;
  gap: 10px;
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--m-borda);
}
.app .view .mn-capex-ano-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.app .view .mn-capex-ano-topo small {
  font: 600 11px/1 var(--font-value);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-void-2);
}
.app .view .mn-capex-ano-topo span {
  font: 500 12.5px/1 var(--font-value);
  color: var(--on-void);
}
/* Três números lado a lado só quando cabem; no celular estreito (320 px),
   "R$ 182.000,00" passava da coluna e da borda do cartão. */
.app .view .mn-capex-ano dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 10px;
  margin: 0;
}
.app .view .mn-capex-ano dl > div {
  display: grid;
  gap: 5px;
  min-width: 0;
}
.app .view .mn-capex-ano dt {
  font: 600 11px/1 var(--font-value);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-void-2);
}
.app .view .mn-capex-ano dd {
  margin: 0;
  font: 600 13.5px/1.2 var(--font-value);
  color: var(--on-void);
}
@media print {
  .app .view .cx-uso {
    background: var(--p-wash) !important;
    border: 1px solid var(--p-hair);
  }
}

/* Pendências de Subestações e Câmaras: frases longas dentro do selo. O selo
   do turno não quebra linha (turno.css) e a frase passava da tela no
   celular; dentro da lista de pendências ela quebra. */
.app .view .pills-lista > .status-pill {
  max-width: 100%;
  white-space: normal;
  line-height: 1.3;
  text-align: left;
}

/* ——— Ativos › Correias: rotas, inspeção, pendências, histórico e cálculos ——— */
.app .view .rotas-head {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--m-borda);
}

/* Resumo das rotas: uma faixa de números logo abaixo do título. */
.app .view .rt-resumo {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.app .view .rt-resumo li {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 9px 14px;
  border: 1px solid var(--m-borda);
  border-radius: 999px;
  background: var(--m-superficie-2);
  font: 500 13px/1 var(--font-text);
  color: var(--on-void-2);
}
.app .view .rt-resumo b {
  font: 600 14px/1 var(--font-value);
  color: var(--on-void);
}
.app .view .rt-resumo .rt-resumo-alerta {
  border-color: var(--risk-blocked-void);
}
.app .view .rt-resumo .rt-resumo-alerta b {
  color: var(--risk-blocked-void);
}

/* Cartão de rota: painel moderno, vencimento em bloco no canto. */
.app .view .rota-cartao {
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--m-borda);
  border-radius: var(--m-raio);
  background: var(--m-superficie);
  box-shadow: var(--m-sombra);
}
.app .view .rota-cartao.rota-vencida {
  border-color: rgba(240, 100, 90, 0.45);
  background-image: none;
  box-shadow: inset 3px 0 0 var(--risk-blocked-void), var(--m-sombra);
}
.app .view .rota-cartao > header {
  flex-wrap: nowrap;
}
.app .view .rt-ultima {
  margin-top: 4px;
  font: 500 12.5px/1.3 var(--font-value);
  color: var(--on-void-2);
}
.app .view .rota-vencimento.rt-venc {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 4px;
  min-width: 92px;
  padding: 10px 12px;
  border: 1px solid var(--m-borda-forte);
  border-radius: var(--m-raio-sm);
  background: var(--m-superficie-3);
  color: var(--on-void);
  white-space: normal;
}
.app .view .rt-venc > b {
  font: 600 24px/1 var(--font-value);
}
.app .view .rt-venc > span {
  max-width: 96px;
  font: 600 11px/1.15 var(--font-value);
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
  color: var(--on-void-2);
}
.app .view .rt-venc.situacao-conforme {
  border-color: rgba(76, 194, 127, 0.5);
}
.app .view .rt-venc.situacao-conforme > b {
  color: var(--risk-clear-void);
}
.app .view .rt-venc.situacao-atencao {
  border-color: rgba(231, 177, 74, 0.5);
}
.app .view .rt-venc.situacao-atencao > b {
  color: var(--risk-attention-void);
}
.app .view .rt-venc.situacao-critico {
  border-color: rgba(240, 100, 90, 0.55);
}
.app .view .rt-venc.situacao-critico > b,
.app .view .rt-venc.situacao-critico > span {
  color: var(--risk-blocked-void);
}
.app .view .rota-cartao-metricas {
  gap: 10px;
  border: 0;
  background: none;
}
.app .view .rota-cartao-metricas > * {
  padding: 10px 12px;
  border: 1px solid var(--m-borda);
  border-radius: var(--m-raio-sm);
  background: var(--m-superficie-2);
}

/* A trilha: os transportadores na ordem do percurso, ligados por um fio. */
.app .view .rt-trilha {
  gap: 10px 22px;
}
.app .view .rt-trilha > .rota-passo {
  position: relative;
  border-color: var(--m-borda-forte);
  border-radius: 999px;
  background: var(--m-superficie-3);
}
.app .view .rt-trilha > .rota-passo:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -22px;
  width: 22px;
  height: 2px;
  background: var(--m-borda-forte);
}
.app .view .rota-cartao > footer {
  padding-top: 14px;
  border-top: 1px solid var(--m-borda);
}

/* Inspeção em andamento: os itens em painéis. */
.app .view .inspecao-bloco {
  overflow: hidden;
  border: 1px solid var(--m-borda);
  border-radius: var(--m-raio);
  background: var(--m-superficie);
}
.app .view .inspecao-tc {
  padding: 14px 18px;
  border-bottom: 1px solid var(--m-borda);
  background: var(--m-superficie-3);
}

/* ——— Pendências: cartões com a gravidade na borda ——— */
.app .view .pd-filtro {
  max-width: 280px;
  margin: 0;
}
.app .view .pd-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.app .view .pd-cartao {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid var(--m-borda);
  border-radius: var(--m-raio);
  background: var(--m-superficie);
  box-shadow: var(--m-sombra);
}
.app .view .pd-cartao.pd-critica {
  box-shadow: inset 3px 0 0 var(--risk-blocked-void), var(--m-sombra);
}
.app .view .pd-cartao.pd-atencao {
  box-shadow: inset 3px 0 0 var(--risk-attention-void), var(--m-sombra);
}
.app .view .pd-cartao.pd-fechada {
  opacity: 0.8;
  box-shadow: inset 3px 0 0 var(--risk-clear-void), var(--m-sombra);
}
.app .view .pd-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.app .view .pd-tag {
  margin-right: auto;
  font: 600 16px/1 var(--font-value);
  color: var(--on-void);
}
.app .view .pd-oque {
  display: grid;
  gap: 4px;
}
.app .view .pd-oque strong {
  font: 600 15px/1.3 var(--font-text);
  color: var(--on-void);
}
.app .view .pd-oque small {
  font: 400 13px/1.4 var(--font-text);
  color: var(--on-void-2);
}
.app .view .pd-dados {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--m-borda);
}
.app .view .pd-dados > div {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
}
.app .view .pd-dados dt {
  font: 600 11px/1 var(--font-value);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-void-2);
}
.app .view .pd-dados dd {
  margin: 0;
  font: 500 13.5px/1.25 var(--font-value);
  color: var(--on-void);
}
.app .view .pd-dados dd.pd-vencido {
  color: var(--risk-blocked-void);
}
.app .view .pd-acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

/* ——— Histórico: barras de ranking e o resultado de cada inspeção ——— */
.app .view .historico-colunas > .card {
  margin: 0;
}
.app .view .hs-linha {
  padding: 12px 0;
  border-top: 1px solid var(--m-borda);
}
.app .view .card-head + .hs-linha {
  margin-top: 6px;
  border-top: 0;
}
.app .view .hs-linha > :first-child {
  font: 600 13px/1.2 var(--font-value);
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--on-void);
}
.app .view .hs-linha > strong {
  font: 600 13px/1 var(--font-value);
}
.app .view .hs-linha > small {
  flex-basis: 100%;
  font: 400 12px/1.2 var(--font-text);
  color: var(--on-void-2);
}
.app .view .hs-linha .estatistica-barra {
  height: 8px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
}
.app .view .hs-linha .estatistica-barra > i {
  display: block;
  border-radius: inherit;
}
.app .view .hs-reincide {
  margin-left: 6px;
  padding: 2px 6px;
  border: 1px solid var(--risk-attention-void);
  border-radius: 999px;
  font: 600 11px/1 var(--font-value);
  font-style: normal;
  text-transform: uppercase;
  color: var(--risk-attention-void);
}
.app .view .hs-titulo {
  margin: 4px 0 -8px;
  font: 600 12px/1 var(--font-value);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-void);
}
.app .view .historico-lista {
  gap: 8px;
  border: 0;
  background: none;
}
.app .view .historico-item.hs-item {
  grid-template-columns: minmax(200px, 1fr) minmax(160px, 1.2fr) auto;
  align-items: center;
  gap: 12px 20px;
  padding: 14px 18px;
  border: 1px solid var(--m-borda);
  border-radius: var(--m-raio-sm);
  background: var(--m-superficie-2);
}
.app .view .historico-item.hs-item.situacao-conforme {
  box-shadow: inset 3px 0 0 var(--risk-clear-void);
}
.app .view .historico-item.hs-item.situacao-atencao {
  box-shadow: inset 3px 0 0 var(--risk-attention-void);
}
.app .view .historico-item.hs-item.situacao-critico {
  box-shadow: inset 3px 0 0 var(--risk-blocked-void);
}
.app .view .hs-resultado {
  display: flex;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
}
.app .view .hs-resultado > b {
  display: block;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  font-size: 0;
}
.app .view .hs-resultado > b.situacao-conforme {
  background: var(--risk-clear-void);
}
.app .view .hs-resultado > b.situacao-atencao {
  background: var(--risk-attention-void);
}
.app .view .hs-resultado > b.situacao-critico {
  background: var(--risk-blocked-void);
}

/* ——— Cálculos: a lista de fichas e o índice ao lado do documento ——— */
.app .view .ficha-lado {
  display: grid;
  gap: var(--m-vao);
  align-content: start;
  min-width: 0;
}
.app .view .ficha-indice {
  display: none;
}
@media (min-width: 1024px) {
  .app .view .ficha-lado {
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
  }
  .app .view .ficha-indice {
    display: grid;
    gap: 10px;
    padding: 16px;
    border: 1px solid var(--m-borda);
    border-radius: var(--m-raio);
    background: var(--m-superficie);
  }
}
.app .view .ficha-indice h2 {
  margin: 0;
  font: 600 12px/1 var(--font-value);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-void);
}
.app .view .ficha-indice ol {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.app .view .ficha-indice-item {
  display: grid;
  gap: 4px;
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: var(--m-raio-sm);
  background: none;
  text-align: left;
  font: 500 13px/1.25 var(--font-text);
  color: var(--on-void-2);
  cursor: pointer;
}
.app .view .ficha-indice-item:hover {
  background: var(--m-superficie-2);
  color: var(--on-void);
}
.app .view .ficha-indice-item.is-atual {
  border-color: var(--m-borda-forte);
  background: var(--m-superficie-3);
  color: var(--on-void);
}
.app .view .ficha-indice-item:focus-visible {
  outline: 2px solid var(--on-void);
  outline-offset: 1px;
}
.app .view .ficha-indice-estado {
  justify-self: start;
  font: 600 11px/1 var(--font-value);
  font-style: normal;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.app .view .ficha-indice-estado.atende {
  color: var(--risk-clear-void);
}
.app .view .ficha-indice-estado.atencao {
  color: var(--risk-attention-void);
}
.app .view .ficha-indice-estado.naoAtende {
  color: var(--risk-blocked-void);
}
.app .view .ficha-indice-estado.pendente {
  color: var(--on-void-2);
}
.app .view .ficha-documento > .ficha-secao {
  scroll-margin-top: 16px;
}
.app .view .ficha-documento > .ficha-secao:focus {
  outline: none;
}

@media (max-width: 1100px) {
  .app .view .historico-item.hs-item {
    grid-template-columns: minmax(0, 1fr);
  }
  .app .view .historico-item.hs-item .historico-numeros {
    justify-content: flex-start;
  }
}
@media (max-width: 768px) {
  .app .view .rota-cartao {
    padding: 16px;
  }
  .app .view .rota-vencimento.rt-venc {
    min-width: 76px;
    padding: 8px;
  }
  .app .view .rt-venc > b {
    font-size: 20px;
  }
  .app .view .pd-filtro {
    max-width: none;
  }
  .app .view .pd-cartao {
    padding: 14px;
  }
  .app .view .pd-dados {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .app .view .pd-acoes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  }
  .app .view .pd-acoes .btn {
    justify-content: center;
    min-height: 44px;
  }
}

/* Os botões de cada cartão de pendência no pé, na mesma linha dos vizinhos. */
.app .view .pd-cartao {
  display: flex;
  flex-direction: column;
}
.app .view .pd-acoes {
  margin-top: auto;
}
.app .view .historico-item.hs-item > * {
  min-width: 0;
}
.app .view .historico-item.hs-item .historico-numeros {
  flex-wrap: wrap;
}

/* As classes de situação vestem marca (versal, ponto, caixa). Aqui elas só
   dão a cor: o bloco do vencimento, a linha do histórico e as barras. */
.app .view .rt-venc::before,
.app .view .historico-item.hs-item::before {
  display: none;
}
.app .view .historico-item.hs-item {
  display: grid;
  justify-content: stretch;
  font: 400 14px/1.3 var(--font-text);
  letter-spacing: normal;
  text-transform: none;
  color: var(--on-void);
}
.app .view .historico-item.hs-item strong {
  font: 600 14.5px/1.25 var(--font-text);
  color: var(--on-void);
}
.app .view .hs-linha .estatistica-barra > i {
  display: block;
  height: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  background: var(--risk-attention-void);
}
.app .view .hs-linha .estatistica-barra > i.situacao-critico {
  background: var(--risk-blocked-void);
}
.app .view .hs-linha .estatistica-barra > i::before {
  display: none;
}
.app .view .hs-resultado > b::before {
  display: none;
}

/* A ficha de cálculo na mesma pele dos painéis: seções arredondadas, a
   biblioteca de fichas e o aviso de campos faltando também. Só na tela; o
   papel continua o de sempre. */
@media screen {
  .app .view .ficha-documento {
    max-width: 64rem;
  }
  .app .view .ficha-documento > .ficha-secao {
    overflow: hidden;
    border: 1px solid var(--m-borda);
    border-radius: var(--m-raio);
    background: var(--m-superficie);
    box-shadow: var(--m-sombra);
  }
  .app .view .ficha-biblioteca {
    overflow: hidden;
    border: 1px solid var(--m-borda);
    border-radius: var(--m-raio);
    background: var(--m-superficie);
  }
  .app .view .ficha-avisos {
    border: 1px solid rgba(231, 177, 74, 0.4);
    border-radius: var(--m-raio-sm);
    background: rgba(231, 177, 74, 0.06);
    box-shadow: inset 3px 0 0 var(--risk-attention-void);
  }
  .app .view .ficha-veredito {
    border-radius: var(--m-raio-sm);
  }
}

/* Cartões de rota da mesma altura numa linha: o pé (os botões) desce até o
   fim, e os botões dos vizinhos ficam na mesma linha. */
.app .view .rota-cartao {
  display: flex;
  flex-direction: column;
}
.app .view .rota-cartao > footer {
  margin-top: auto;
}

/* ——— Ativos › Remotas: o rack, os cartões e os pontos ——— */
.app .view .rm-rack {
  display: grid;
  gap: 14px;
  padding: 18px 20px 20px;
  border: 1px solid var(--m-borda);
  border-radius: var(--m-raio);
  background: var(--m-superficie);
  box-shadow: var(--m-sombra);
}
.app .view .rm-rack > header h3 {
  margin: 0;
  font: 600 12px/1 var(--font-value);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-void);
}
.app .view .rm-rack > header p {
  margin: 6px 0 0;
  font: 400 13px/1.4 var(--font-text);
  color: var(--on-void-2);
}
/* As placas lado a lado, como no trilho do painel; rolam de lado só se a
   remota tiver mais slots do que cabe (e só elas, não a página). */
.app .view .rm-rack-placas {
  display: grid;
  grid-auto-columns: minmax(150px, 1fr);
  grid-auto-flow: column;
  gap: 10px;
  margin: 0;
  padding: 10px;
  overflow-x: auto;
  border-radius: var(--m-raio-sm);
  background: repeating-linear-gradient(90deg, #15161a 0 2px, #1b1c21 2px 12px);
  list-style: none;
}
.app .view .rm-placa {
  display: grid;
  gap: 10px;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--m-borda-forte);
  border-radius: 8px;
  background: linear-gradient(180deg, #2a2c32, #222429);
  text-align: left;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.16s ease, transform 0.16s ease;
}
.app .view .rm-placa:hover {
  border-color: var(--on-void-2);
}
.app .view .rm-placa:active {
  transform: translateY(1px);
}
.app .view .rm-placa:focus-visible {
  outline: 2px solid var(--on-void);
  outline-offset: 2px;
}
.app .view .rm-placa-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.app .view .rm-placa-topo b {
  font: 600 18px/1 var(--font-value);
  color: var(--on-void);
}
.app .view .rm-placa-topo em {
  padding: 3px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  font: 600 11px/1 var(--font-value);
  font-style: normal;
  color: var(--on-void);
}
.app .view .rm-placa-pontos {
  display: grid;
  grid-template-columns: repeat(8, 10px);
  gap: 5px;
}
.app .view .rm-placa-pontos i {
  width: 10px;
  height: 10px;
  border: 1px solid #4a4d55;
  border-radius: 50%;
  background: #17181c;
}
.app .view .rm-placa-pontos i.usado {
  border-color: var(--risk-clear-void);
  background: var(--risk-clear-void);
  box-shadow: 0 0 6px rgba(76, 194, 127, 0.45);
}
.app .view .rm-placa-pontos i.defeito {
  border: 1px dashed var(--risk-blocked-void);
  background: transparent;
}
.app .view .rm-placa > small {
  overflow: hidden;
  font: 500 11.5px/1.2 var(--font-value);
  color: var(--on-void-2);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app .view .rm-placa-conta {
  font: 600 13px/1 var(--font-value);
  color: var(--on-void);
}

/* Cartão de slot como painel moderno. */
.app .view .remota-cartao {
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--m-borda);
  border-radius: var(--m-raio);
  background: var(--m-superficie);
  box-shadow: var(--m-sombra);
  scroll-margin-top: 16px;
}
.app .view .remota-ocupacao {
  height: 8px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
}
.app .view .remota-ocupacao > i {
  border-radius: inherit;
  background: var(--on-void-2);
}
.app .view .remota-cartao .table-wrap {
  border-radius: var(--m-raio-sm);
}

@media (max-width: 768px) {
  .app .view .rm-rack {
    padding: 14px;
  }
  .app .view .rm-rack-placas {
    grid-auto-columns: 140px;
  }
  .app .view .remota-cartao {
    padding: 14px;
  }
  /* Cada ponto vira um cartão: o bit e o endereço no topo, o resto em
     duas colunas com o rótulo em cima do valor. */
  .app .view .table-wrap:has(> .rm-cartoes) {
    max-height: min(70vh, 620px);
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 4px;
    overscroll-behavior: contain;
    border: 0;
    background: none;
  }
  .app .view table.rm-cartoes,
  .app .view table.rm-cartoes tbody {
    display: grid;
    gap: 8px;
    width: 100%;
    min-width: 0;
  }
  .app .view table.rm-cartoes thead {
    display: none;
  }
  .app .view table.rm-cartoes tr {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px 12px;
    padding: 12px;
    border: 1px solid var(--m-borda);
    border-radius: var(--m-raio-sm);
    background: var(--m-superficie-2);
  }
  .app .view table.rm-cartoes tr.livre {
    opacity: 0.7;
  }
  .app .view table.rm-cartoes td {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    font-size: 13px;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .app .view table.rm-cartoes td[data-label]::before {
    content: attr(data-label);
    font: 600 11px/1 var(--font-value);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--on-void-2);
  }
  .app .view table.rm-cartoes td.rm-larga {
    grid-column: 1 / -1;
  }
  .app .view table.rm-cartoes td.rm-obs:empty {
    display: none;
  }
  .app .view table.rm-cartoes td.rm-bit {
    font: 600 15px/1 var(--font-value);
    color: var(--on-void);
  }
}

/* Equipamentos atendidos: cartões soltos, como o resto da camada. */
@media screen {
  .app .view .remota-equipamento-lista {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
    gap: 8px;
    border: 0;
    background: none;
  }
  .app .view .remota-equipamento {
    padding: 12px 14px;
    border: 1px solid var(--m-borda);
    border-radius: var(--m-raio-sm);
    background: var(--m-superficie-2);
  }
  .app .view .remota-equipamento:hover {
    border-color: var(--m-borda-forte);
  }
  .app .view .remota-equipamento.active {
    border-color: var(--on-void-2);
    background: var(--m-superficie-3);
    box-shadow: inset 3px 0 0 var(--on-void);
  }
  .app .view .remota-equipamento.incompleto {
    box-shadow: inset 3px 0 0 var(--risk-attention-void);
  }
}

/* No celular, os cinco números da remota em duas colunas (cada um é curto):
   um por linha ocupava a primeira tela inteira. */
@media (max-width: 768px) {
  .app .view .remotas-resumo {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .app .view .remotas-resumo-item {
    padding: 14px;
  }
  .app .view .remotas-resumo-item > strong {
    font-size: 22px;
  }
}

/* As regras de régua das tabelas de painel (primeira e última coluna com
   recuo e fio) não valem para a tabela que virou cartão. */
@media (max-width: 768px) {
  .app .view :is(.card, .daily-block, .daily-card, section, div) > .table-wrap > table:is(.mt-cartoes, .rm-cartoes) :is(th, td),
  .app .view :is(.card, .daily-block, .daily-card, section, div) > .table-wrap > table:is(.mt-cartoes, .rm-cartoes) :is(th, td):is(:first-child, :last-child) {
    padding: 0;
    border: 0;
    box-shadow: none;
  }
  .app .view .table-wrap > table:is(.mt-cartoes, .rm-cartoes) tr {
    box-sizing: border-box;
    width: 100%;
  }
}

@media (min-width: 769px) {
  .app .view .remotas-resumo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }
}

/* Os cinco números do resumo fecham as fileiras sem buraco: cinco numa
   fileira quando cabem; senão três e dois, ou dois, dois e um, e quem fica
   na última fileira se alarga até a borda. A regra antiga "o último até o fim
   da fileira" (modulos.css) só empurrava o último para a coluna da direita e
   deixava um vão no meio em 820 px. */
.app .view .remotas-resumo {
  display: flex;
  flex-wrap: wrap;
}
.app .view .remotas-resumo > .remotas-resumo-item {
  flex: 1 1 170px;
  grid-column: auto;
}
@media (max-width: 768px) {
  .app .view .remotas-resumo > .remotas-resumo-item {
    flex-basis: 130px;
  }
}

/* Quatro botões de cadastro (Remotas: nova, editar, novo cartão, excluir):
   em 600 e 820 px ficavam três numa linha e um sozinho embaixo. Até 900 px,
   dois por linha, como no celular. */
@media (max-width: 900px) {
  .app .view .cadastro-acoes:has(> .btn:nth-child(4):last-child) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Estoque: a tabela pede uns 980 px. Entre 769 e 1279 px, com o menu ao
   lado, o quadro tem menos que isso, e a coluna do material era espremida
   até o nome sair escrito na vertical, uma letra por linha. Os cartões do
   celular (moderno.css) passam a valer pela largura do quadro. */
.app .view .table-wrap:has(> .es-tabela) {
  container: es-tabela / inline-size;
}
/* A regra que zera as larguras mínimas por posição (moderno.css) era mais
   forte que a do material e o deixava sem largura nenhuma na tabela. */
.app .view .stock-table.es-tabela td.es-material {
  min-width: 220px;
}
@container es-tabela (max-width: 960px) {
  .app .view .es-tabela,
  .app .view .es-tabela tbody {
    display: block;
    width: 100%;
    min-width: 0;
  }
  .app .view .es-tabela thead {
    display: none;
  }
  .app .view .es-tabela tr {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 10px;
    padding: 16px 14px;
    border-bottom: 1px solid var(--m-borda);
  }
  .app .view .es-tabela tr > td {
    display: block;
    width: auto;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: none;
  }
  .app .view .stock-table.es-tabela td.es-material {
    display: grid;
    grid-column: 1 / -1;
    min-width: 0;
  }
  /* Mesmas posições do cartão do celular: saldo e estado; mínimo, unidade
     e local; movimentos e excluir. */
  .app .view .es-tabela td.es-saldo {
    grid-area: 2 / 1 / 3 / 3;
    width: auto;
  }
  .app .view .es-tabela td.es-status {
    grid-area: 2 / 3 / 3 / 4;
    width: auto;
    justify-self: end;
    align-self: start;
  }
  .app .view .es-tabela td[data-label='Mínimo'] {
    grid-area: 3 / 1 / 4 / 2;
  }
  .app .view .es-tabela td[data-label='Unidade'] {
    grid-area: 3 / 2 / 4 / 3;
  }
  .app .view .es-tabela td[data-label='Localização'] {
    grid-area: 3 / 3 / 4 / 4;
  }
  .app .view .es-tabela td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    font: 500 11px/1.3 var(--font-value);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--on-void-2);
  }
  .app .view .es-tabela td[data-label] {
    width: auto;
  }
  .app .view .es-tabela td.es-acoes {
    grid-area: 4 / 1 / 5 / 3;
  }
  .app .view .es-tabela td.es-acoes .es-mov.stock-mov {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    height: auto;
  }
  .app .view .es-tabela td.es-excluir {
    grid-area: 4 / 3 / 5 / 4;
    width: auto;
    justify-self: end;
    align-self: end;
  }
}

/* ——— Casca: a faixa do topo entre 769 e 1100 px ———
   Com a barra lateral larga desta faixa de tela, a busca (300 px fixos)
   empurrava a faixa para fora e a página inteira rolava de lado. Aqui a
   busca cede: fica a lupa e o atalho, e o texto aparece quando cabe. */
@media (min-width: 769px) and (max-width: 1100px) {
  .app .faixa-busca {
    flex: 0 1 auto;
    min-width: 0;
  }
  .app .faixa-busca span {
    overflow: hidden;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
@media (min-width: 769px) and (max-width: 960px) {
  .app .faixa-busca span {
    display: none;
  }
}

/* ——— Impressão: a tela que se imprime vira papel ———
   A camada moderna pinta os painéis com superfícies escuras próprias
   (--m-superficie, --void...), que passavam por cima da virada para papel
   de modulos.css: o Mensal (e o Hoje) saíam escuros na folha, e numa
   impressora que descarta o fundo o texto claro sumia. Aqui as tintas do
   painel viram as da folha de uma vez, e os enfeites de tela saem. */
@media print {
  .app {
    --void: var(--p-paper);
    --void-2: var(--p-paper);
    --void-3: var(--p-wash);
    --on-void: var(--p-ink);
    --on-void-2: var(--p-ink-2);
    --console-line: var(--p-hair);
    --console-line-strong: var(--p-rule);
    --m-superficie: var(--p-paper);
    --m-superficie-2: var(--p-paper);
    --m-superficie-3: var(--p-wash);
    --m-borda: var(--p-hair);
    --m-borda-forte: var(--p-ink-2);
    --m-sombra: none;
    --risk-clear-void: var(--risk-clear);
    --risk-attention-void: var(--risk-attention);
    --risk-blocked-void: var(--risk-blocked);
  }
  .app .view,
  .app .view :is(.card, .stat-card, .daily-card, .daily-block, .rota-cartao, .pd-cartao, .remota-cartao, .ficha-secao, .cx-cartao, .cx-orc-item, .mn-gasto, .mn-projetos > li, .cb-destaque, .cb-grafico, .cb-mes, .sp-grupo, .sp-materiais, .sp-emprestimos, .reg-pessoa, .daily-hist-item, .hj-frente, .hoje-frente) {
    background: var(--p-paper) !important;
    background-image: none !important;
    box-shadow: none !important;
    color: var(--p-ink);
  }
  .app .view :is(.card, .stat-card, .daily-card, .daily-block, .rota-cartao, .pd-cartao, .remota-cartao, .ficha-secao, .cx-cartao, .cx-orc-item, .mn-gasto, .mn-projetos > li, .cb-mes, .daily-hist-item) {
    border-color: var(--p-hair) !important;
  }
  /* Só o que é pequeno não se parte entre páginas; painel longo (a seção da
     ficha, a lista de materiais) quebra onde precisar, senão pula inteiro e
     deixa a folha anterior em branco. */
  .app .view :is(.stat-card, .rota-cartao, .pd-cartao, .cx-cartao, .cx-orc-item, .mn-gasto, .mn-projetos > li, .cb-mes, .daily-hist-item, .reg-pessoa) {
    break-inside: avoid;
  }
  .app .view :is(.card, .ficha-secao, .remota-cartao) {
    break-inside: auto !important;
  }
  .app .view .stat-card .val {
    font-size: 20px !important;
    white-space: nowrap;
  }
  .app .view .ficha-documento .btn {
    display: none !important;
  }
  .app .view :is(.stat-card .val, .card-head h2, strong, b, dd) {
    color: var(--p-ink);
  }
  /* As barras continuam (são o dado), em tinta da folha. */
  .app .view :is(.sp-barra, .mn-barra, .mn-divisao, .cx-uso, .cx-funil-barra, .hs-resultado, .remota-ocupacao, .hoje-barra) {
    background: var(--p-wash) !important;
    border: 1px solid var(--p-hair);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .app .view :is(.sp-barra, .mn-barra, .cx-funil-barra) > b,
  .app .view .mn-div-material {
    background: var(--p-ink) !important;
  }
  .app .view .mn-div-capex {
    background: var(--p-hair) !important;
  }
  .app .view .mn-legenda li > i {
    border: 1px solid var(--p-ink-2);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  /* Na folha, o Mensal em uma coluna e sem botões. */
  .app .view :is(.mn-topo, .mn-grade) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .app .view .mn-numeros {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .app .view :is(.capex-actions, .rm-rack, .ficha-lado, .daily-passo-nav) {
    display: none !important;
  }
  .app .view .mn-registrado li {
    border-color: var(--p-hair);
  }
}

/* Hoje: a frente ativa sai sem a foto (no papel ela só escurecia os números)
   e o resto vira tinta da folha. */
@media print {
  .app .view .hj-frente-foto,
  .app .view .hj-frente::after,
  .app .view .hj-frente-abrir {
    display: none !important;
  }
  .app .view .hj-frente,
  .app .view .hj-frente * {
    color: var(--p-ink) !important;
    text-shadow: none !important;
  }
  .app .view .hj-frente {
    border: 1px solid var(--p-hair) !important;
  }
  .app .view .hj-frente :is(div, span, dl, ul) {
    background: transparent !important;
    backdrop-filter: none !important;
  }
}

/* Botão, busca e filtro não saem no papel (DESIGN.md, "Folha impressa"). */
@media print {
  .app .view :is(.btn, .capex-filters, .cx-cartao-acoes, .reg-busca, .pd-acoes, .rota-cartao > footer) {
    display: none !important;
  }
}

/* Folha do relatório: a linha "ninguém faltou", "nenhum equipamento" é
   aviso, não valor lançado — texto corrido, sem fundo. No PDF gerado (o
   clone na tela) ela pegava a letra de máquina e o fundo cinza das tabelas
   do painel. */
.print-report tr.print-vazio td,
.daily-pdf-export .print-report tr.print-vazio td {
  padding: 2.4mm 2.6mm !important;
  background: #fff !important;
  color: #4a4e55 !important;
  font: 400 9pt/1.35 'Barlow', Arial, sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}