/* ============================================================
   InfraMINA · "Turno" (16/10/2026) — a casca e os acabamentos da
   direção B, carregados por último.

   Os tokens (cor, letra, raio) moram em tokens.css; aqui fica o que é
   forma: o trilho de ícones com o nome embaixo, a faixa do turno no
   topo, o título da tela, a linha de abas, as abas do celular, a busca
   (Ctrl K) e o Claudinho. As folhas antigas continuam valendo para o
   miolo de cada tela; o que elas desenhavam para a casca é sobrescrito
   aqui com seletores de mesmo peso ou maior, e nada usa !important.
   ============================================================ */

/* ---------- Corpo ---------- */
body {
  background: var(--void);
  font-family: var(--font-text);
}
.app .content {
  padding: var(--sp-5) clamp(1rem, 1.8vw, 1.75rem) var(--sp-8);
}

/* O fundo do trilho desce até o fim da página, mesmo quando o conteúdo é
   mais alto que a tela (o trilho em si é fixo na altura da janela). */
@media (min-width: 769px) {
  .app {
    background: linear-gradient(90deg, var(--void-2) calc(var(--sidebar) - 1px), var(--console-line) calc(var(--sidebar) - 1px) var(--sidebar), var(--void) var(--sidebar));
  }
}

/* ---------- Trilho (computador e tablet) ---------- */
.app .sidebar {
  position: sticky;
  top: 0;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 14px 0 12px;
  background: var(--void-2);
  border-right: 1px solid var(--console-line);
  box-shadow: none;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
.app .sidebar .brand {
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 0 0 12px;
  border-bottom: 0;
}
.app .sidebar .brand-logo-frame {
  width: 58px;
  height: 58px;
  border: 0;
  background: none;
  box-shadow: none;
  padding: 0;
  display: grid;
  place-items: center;
}
.app .sidebar .brand-logo-top {
  width: 58px;
  height: 58px;
  object-fit: contain;
}
/* O nome fica para o leitor de tela; no trilho, o emblema basta. */
.app .sidebar .brand h2,
.app .sidebar .brand p {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.app .sidebar .nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 0;
  width: 100%;
}
.app .sidebar .nav::before {
  display: none;
}
.app .sidebar .nav-btn {
  position: relative;
  width: 72px;
  min-height: 58px;
  margin: 0;
  padding: 7px 2px 6px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--on-void-2);
  font: 500 11px/1.1 var(--font-text);
  letter-spacing: 0;
  text-transform: none;
  text-align: center;
  hyphens: auto;
  overflow-wrap: anywhere;
  box-shadow: none;
}
.app .sidebar .nav-btn + .nav-btn {
  margin: 0;
}
.app .sidebar .nav-btn:hover {
  background: var(--void-3);
  color: var(--on-void);
}
.app .sidebar .nav-btn.active {
  background: rgba(214, 38, 49, 0.14);
  color: var(--on-void);
}
.app .sidebar .nav-btn.active::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 3px;
  background: var(--aqui);
}
.app .sidebar .nav-icon {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  color: inherit;
}
.app .sidebar .nav-icon svg,
.app .sidebar .nav-icon .sr-icon svg {
  width: 21px;
  height: 21px;
  stroke-width: 1.7;
}
.app .sidebar .nav-foot {
  margin-top: auto;
  padding: 12px 0 0;
  border-top: 0;
  display: grid;
  justify-items: center;
  gap: 8px;
  width: 100%;
  background: none;
}
/* A frente ativa já está na faixa do turno; no trilho ela não cabe. */
.app .sidebar .nav-foot .active-project,
.app .sidebar .nav-foot .version-row,
.app .sidebar .nav-foot .auth-nome {
  display: none;
}
.app .sidebar .nav-foot .auth-user {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
}
.app .auth-iniciais {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--void-3);
  border: 1px solid var(--console-line-strong);
  color: var(--on-void);
  font: 700 13px/1 var(--font-label);
  letter-spacing: 0.02em;
}
.app .sidebar .nav-foot #btnLogout {
  width: 44px;
  min-height: 34px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 1px solid transparent;
  background: none;
  color: var(--on-void-2);
}
.app .sidebar .nav-foot #btnLogout:hover {
  background: var(--void-3);
  color: var(--on-void);
}
.app .sidebar .nav-foot #btnLogout > span:last-child {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.app .sidebar .nav-foot #btnLogout svg {
  width: 19px;
  height: 19px;
}

/* ---------- Topo: faixa do turno + título da tela ---------- */
.app .topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0;
  min-height: 0;
  padding: 0;
  background: transparent;
  border-bottom: 0;
  box-shadow: none;
  position: static;
}
.app .faixa-turno {
  flex: 1 1 100%;
  display: flex;
  align-items: stretch;
  min-height: 44px;
  background: var(--void-2);
  border-bottom: 1px solid var(--console-line);
  font: 500 12px/1 var(--font-value);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--on-void-2);
}
.app .faixa-turno > * {
  display: flex;
  align-items: center;
}
.app .faixa-turno .faixa-marca {
  display: none;
}
.app .faixa-turno .menu-toggle {
  display: none;
}
.app .topbar-meta {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
}
.app .topbar-meta > * {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 18px;
  border-right: 1px solid var(--console-line);
  white-space: nowrap;
}
.app .topbar-meta b {
  color: var(--on-void);
  font-weight: 600;
}
.app .topbar-meta .active-project-chip {
  margin: 0;
  border: 0;
  border-right: 1px solid var(--console-line);
  border-radius: 0;
  background: none;
  font: inherit;
  text-transform: inherit;
  color: inherit;
  cursor: pointer;
  min-height: 44px;
}
.app .topbar-meta .active-project-chip:hover {
  background: var(--void-3);
  color: var(--on-void);
}
.app .faixa-turno .topbar-sync {
  margin: 0;
  padding: 0 18px;
  border: 0;
  border-right: 1px solid var(--console-line);
  border-radius: 0;
  background: none;
  font: inherit;
  text-transform: inherit;
  white-space: nowrap;
}
/* Selo do envio na faixa: a bolinha diz o estado de longe, a palavra
   confirma. Verde chegou ao servidor; amarelo a caminho ou defasado;
   vermelho em conflito; cinza só neste aparelho. */
.app .faixa-turno .topbar-sync::before {
  content: '';
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--on-void-faint);
  flex: none;
}
.app .faixa-turno .topbar-sync.grade-confirmed {
  color: var(--risk-clear-void);
  font-weight: 600;
}
.app .faixa-turno .topbar-sync.grade-confirmed::before {
  background: var(--risk-clear-void);
  box-shadow: 0 0 0 3px rgba(76, 194, 127, 0.18);
}
.app .faixa-turno .topbar-sync.grade-transit,
.app .faixa-turno .topbar-sync.grade-stale {
  color: var(--risk-attention-void);
  background-image: none;
}
.app .faixa-turno .topbar-sync.grade-transit::before,
.app .faixa-turno .topbar-sync.grade-stale::before {
  background: var(--risk-attention-void);
}
.app .faixa-turno .topbar-sync.grade-conflict {
  color: var(--risk-blocked-void);
  border-width: 0 1px 0 0;
  background-image: none;
}
.app .faixa-turno .topbar-sync.grade-conflict::before {
  background: var(--risk-blocked-void);
}

.app .faixa-busca {
  margin-left: auto;
  min-width: 300px;
  gap: 10px;
  padding: 0 14px 0 18px;
  border: 0;
  border-left: 1px solid var(--console-line);
  background: none;
  color: var(--on-void-2);
  font: 400 14px/1 var(--font-text);
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}
.app .faixa-busca:hover {
  background: var(--void-3);
  color: var(--on-void);
}
.app .faixa-busca svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  flex: none;
}
.app .faixa-busca kbd,
.busca-campo kbd {
  margin-left: auto;
  padding: 2px 6px;
  border: 1px solid var(--console-line-strong);
  border-radius: 4px;
  font: 500 11px/1.2 var(--font-value);
  color: var(--on-void);
  background: none;
}
.app .topbar-title {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 16px;
  padding: 22px clamp(1rem, 1.8vw, 1.75rem) 0;
}
.app .topbar-title h1 {
  margin: 0;
  font: 700 clamp(1.6rem, 2.4vw, 2.15rem)/1 var(--font-label);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--on-void);
}
.app .topbar-title span {
  font: 400 15px/1.35 var(--font-text);
  letter-spacing: 0;
  text-transform: none;
  color: var(--on-void-2);
}
.app .topbar .toolbar {
  flex: 0 1 auto;
  padding: 16px clamp(1rem, 1.8vw, 1.75rem) 0 0;
  margin: 0;
}

/* ---------- Cotações ---------- */
.app .market-ticker {
  margin: 16px clamp(1rem, 1.8vw, 1.75rem) 0;
  border: 1px solid var(--console-line);
  border-radius: var(--radius);
  background: var(--void-2);
  overflow: hidden;
}

/* ---------- Linha de abas do módulo ---------- */
.app .module-tabs.rotas-abas {
  display: flex;
  gap: 2px;
  margin: 0 0 var(--sp-5);
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--console-line);
  background: none;
  overflow-x: auto;
  scrollbar-width: thin;
}
.app .module-tabs .rotas-aba {
  position: relative;
  flex: none;
  min-height: 42px;
  padding: 0 14px;
  border: 0;
  border-radius: 6px 6px 0 0;
  background: none;
  color: var(--on-void-2);
  font: 600 14px/1 var(--font-text);
  letter-spacing: 0;
  text-transform: none;
  box-shadow: none;
}
.app .module-tabs .rotas-aba:hover {
  color: var(--on-void);
  background: var(--void-2);
}
.app .module-tabs .rotas-aba.active {
  color: var(--on-void);
  background: none;
}
.app .module-tabs .rotas-aba.active::after {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--aqui);
}

/* ---------- Rodapé ---------- */
.app .app-footer {
  padding: 14px clamp(1rem, 1.8vw, 1.75rem);
  border-top: 1px solid var(--console-line);
  background: none;
  font: 500 12px/1.4 var(--font-value);
  color: var(--on-void-2);
}

/* ---------- Claudinho ---------- */
.industrial-chat-fab {
  width: auto;
  height: auto;
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 18px 6px 6px;
  border-radius: 999px;
  background: var(--void-3);
  border: 1px solid var(--console-line-strong);
  color: var(--on-void);
  font: 600 15px/1 var(--font-text);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.8);
}
.industrial-chat-fab:hover {
  background: #26282e;
}
.industrial-chat-fab img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #000;
  object-fit: contain;
  padding: 3px;
}
.industrial-chat-quem {
  display: flex;
  align-items: center;
  gap: 10px;
}
.industrial-chat-quem img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #000;
  padding: 3px;
}

/* ---------- Abas do celular ---------- */
.abas-moveis {
  display: none;
}

/* ---------- Busca (Ctrl K) ---------- */
.busca-fundo {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  align-items: start;
  justify-items: center;
  padding: max(10vh, env(safe-area-inset-top)) 16px 16px;
  background: rgba(5, 6, 8, 0.72);
}
.busca-fundo[hidden] {
  display: none;
}
.busca-caixa {
  width: min(640px, 100%);
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--console-line-strong);
  border-radius: 10px;
  background: var(--void-2);
  box-shadow: var(--shadow);
  overflow: hidden;
  color: var(--on-void);
}
.busca-campo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  border-bottom: 1px solid var(--console-line);
}
.busca-campo svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--on-void-2);
  stroke-width: 1.8;
  stroke-linecap: round;
  flex: none;
}
.busca-campo input {
  flex: 1;
  min-width: 0;
  min-height: 56px;
  border: 0;
  outline: 0;
  background: none;
  color: var(--on-void);
  font: 500 17px/1 var(--font-text);
}
.busca-campo input::placeholder {
  color: var(--on-void-faint);
}
.busca-lista {
  margin: 0;
  padding: 6px;
  list-style: none;
  overflow-y: auto;
}
.busca-lista li {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
}
.busca-lista li small {
  font: 500 11px/1 var(--font-value);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--on-void-2);
}
.busca-lista li[aria-selected='true'],
.busca-lista li:hover {
  background: var(--void-3);
}
.busca-lista li[aria-selected='true'] {
  box-shadow: inset 2px 0 0 var(--on-void);
}
.busca-lista .busca-vazia {
  display: block;
  color: var(--on-void-2);
  cursor: default;
}

/* ---------- Celular: gaveta + abas no pé ---------- */
@media (max-width: 768px) {
  .app .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 200;
    width: min(86vw, 304px);
    height: 100dvh;
    align-items: stretch;
    padding: calc(14px + env(safe-area-inset-top)) 12px calc(14px + env(safe-area-inset-bottom));
    transform: translateX(-100%);
    transition: transform 0.25s var(--curva-gaveta);
  }
  .app .sidebar.open {
    transform: translateX(0);
  }
  .app .sidebar .brand {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 0 6px 14px;
  }
  .app .sidebar .brand h2 {
    position: static;
    width: auto;
    height: auto;
    clip: auto;
    font: 700 18px/1 var(--font-label);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--on-void);
  }
  .app .sidebar .brand-logo-frame,
  .app .sidebar .brand-logo-top {
    width: 46px;
    height: 46px;
  }
  .app .sidebar .nav {
    align-items: stretch;
  }
  .app .sidebar .nav-btn {
    width: 100%;
    min-height: 48px;
    grid-template-columns: 24px minmax(0, 1fr);
    justify-items: start;
    place-items: center start;
    gap: 12px;
    padding: 0 12px;
    font-size: 16px;
    text-align: left;
  }
  .app .sidebar .nav-btn.active::before {
    left: 0;
  }
  .app .sidebar .nav-foot {
    justify-items: stretch;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--console-line);
  }
  .app .sidebar .nav-foot .active-project {
    display: grid;
  }
  .app .sidebar .nav-foot .auth-user {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    justify-items: start;
    gap: 10px;
  }
  .app .sidebar .nav-foot .auth-nome {
    display: block;
    font-size: 14px;
    color: var(--on-void);
    overflow-wrap: anywhere;
  }
  .app .sidebar .nav-foot .version-row {
    display: flex;
  }

  .app .faixa-turno {
    min-height: calc(52px + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
    font-size: 11px;
  }
  .app .faixa-turno .faixa-marca {
    display: block;
    width: 34px;
    height: 34px;
    margin: auto 6px auto 12px;
    align-self: center;
  }
  .app .topbar-meta > * {
    padding: 0 12px;
  }
  .app .faixa-turno .topbar-sync {
    display: none;
  }
  .app .faixa-busca {
    min-width: 0;
    width: 52px;
    justify-content: center;
    padding: 0;
  }
  .app .faixa-busca span,
  .app .faixa-busca kbd {
    display: none;
  }
  .app .faixa-busca svg {
    width: 20px;
    height: 20px;
  }
  .app .topbar-title {
    padding: 16px 16px 0;
  }
  .app .topbar .toolbar {
    flex: 1 1 100%;
    padding: 12px 16px 0;
  }
  .app .market-ticker {
    margin: 12px 16px 0;
  }
  .app .content {
    padding: 16px 16px calc(96px + env(safe-area-inset-bottom));
  }
  .app .app-footer {
    padding-bottom: calc(84px + env(safe-area-inset-bottom));
  }

  .abas-moveis {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 150;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2px;
    padding: 6px max(6px, env(safe-area-inset-left)) max(8px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-right));
    background: var(--void-2);
    border-top: 1px solid var(--console-line);
  }
  .abas-moveis[hidden] {
    display: none;
  }
  .aba-movel {
    position: relative;
    min-height: 54px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 3px;
    padding: 4px 2px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--on-void-2);
    font: 500 11px/1.1 var(--font-text);
  }
  .aba-movel .sr-icon svg {
    width: 21px;
    height: 21px;
    stroke-width: 1.7;
  }
  .aba-movel.active {
    color: var(--on-void);
    background: rgba(214, 38, 49, 0.14);
  }
  .aba-movel.active::before {
    content: '';
    position: absolute;
    top: -7px;
    left: 22%;
    right: 22%;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--aqui);
  }
  .industrial-chat-fab {
    right: 14px;
    bottom: calc(80px + env(safe-area-inset-bottom));
    padding: 5px;
  }
  .industrial-chat-fab span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
}

@media print {
  .abas-moveis,
  .busca-fundo,
  .faixa-turno {
    display: none;
  }
}

/* ============================================================
   Hoje (Supervisor e Técnico): três colunas — o que pede atenção,
   os carimbos e o mês — e, abaixo, o que a tela já tinha.
   ============================================================ */
.app .hoje-contas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 var(--sp-4);
}
.app .hoje-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  padding: 3px 11px;
  border-radius: 999px;
  border: 1px solid var(--console-line-strong);
  background: var(--void-2);
  font: 600 12px/1 var(--font-value);
  color: var(--on-void);
}
.app .hoje-chip::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: currentColor;
}
.app .hoje-chip-carimbo {
  background: var(--stamp-void);
  border-color: var(--stamp-void);
  color: #fff;
}
.app .hoje-chip-pare {
  color: var(--risk-blocked-void);
}
.app .hoje-chip-at {
  color: var(--risk-attention-void);
}
.app .hoje-grade {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr) minmax(280px, 0.8fr);
  gap: var(--sp-4);
  align-items: start;
  margin-bottom: var(--sp-4);
}
.app .hoje-grade > .card,
.app .hoje-coluna > .card {
  margin: 0;
}
/* O painel de atenção ocupava a linha inteira no Início antigo. */
.app .hoje-grade > .hoje-atencao {
  grid-column: auto;
}
.app .hoje-coluna {
  display: grid;
  gap: var(--sp-4);
}
.app .hoje-tabela {
  border: 0;
  border-radius: 0;
  margin: 0;
}
.app .hoje-tabela td {
  vertical-align: top;
  white-space: normal;
}
.app .hoje-tabela td:last-child {
  overflow-wrap: anywhere;
}
.app .hoje-tabela td:first-child,
.app .hoje-onde {
  width: 1%;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}
.app .hoje-onde {
  font: 500 12.5px/1.4 var(--font-value);
  color: var(--on-void-2);
}
.app .hoje-item {
  all: unset;
  display: block;
  cursor: pointer;
  color: var(--on-void);
  font: 400 14px/1.45 var(--font-text);
}
.app .hoje-item:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.app .hoje-item:focus-visible {
  outline: 2px solid #ec3b45;
  outline-offset: 3px;
  border-radius: 2px;
}
.app .sev {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 600 11px/1.4 var(--font-value);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.app .sev::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: currentColor;
}
.app .sev-pare {
  color: var(--risk-blocked-void);
}
.app .sev-at {
  color: var(--risk-attention-void);
}
.app .hoje-mais {
  padding: 10px 16px 14px;
  border-top: 1px solid var(--console-line);
}

.app .hoje-fila {
  list-style: none;
  margin: 0;
  padding: 0;
}
.app .hoje-fila li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--console-line);
}
.app .hoje-fila b {
  display: block;
  font: 600 15px/1.3 var(--font-text);
  color: var(--on-void);
}
.app .hoje-fila small {
  display: block;
  margin-top: 2px;
  font: 500 12px/1.4 var(--font-value);
  color: var(--on-void-2);
  text-transform: uppercase;
}
.app .hoje-fila-mais {
  margin: 0;
  padding: 10px 16px;
  color: var(--on-void-2);
  font-size: 13px;
  border-bottom: 1px solid var(--console-line);
}
.app .hoje-lote {
  padding: 14px 16px;
  border-bottom: 1px solid var(--console-line);
}
.app .hoje-lote .btn {
  width: 100%;
  justify-content: center;
}
.app .hoje-ultimo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 14px 16px 16px;
  background: linear-gradient(180deg, transparent, rgba(214, 38, 49, 0.05));
}
.app .hoje-ultimo small {
  font: 500 11px/1 var(--font-value);
  color: var(--on-void-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.app .hoje-ultimo b {
  display: block;
  margin-top: 5px;
  font: 600 15px/1.3 var(--font-text);
  color: var(--on-void);
}
.app .hoje-ultimo p {
  margin: 2px 0 0;
  color: var(--on-void-2);
  font-size: 13px;
}

/* O carimbo da C, em tinta vermelha com falha de borracha. */
.carimbo-c {
  width: 138px;
  aspect-ratio: 1;
  color: #ec3b45;
  transform: rotate(-9deg);
  filter: url(#tintaCarimbo);
  opacity: 0.93;
}
.carimbo-c svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.carimbo-c .aro {
  fill: none;
  stroke: currentColor;
}
.carimbo-c text {
  fill: currentColor;
  font-family: var(--font-label);
  font-weight: 700;
  text-transform: uppercase;
}
.carimbo-c .carimbo-data {
  font-family: var(--font-value);
  font-weight: 600;
}

.app .hoje-numeros.stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 0;
  border: 0;
  background: none;
}
.app .hoje-numeros .stat-card {
  height: auto;
  margin: 0;
  padding: 14px 16px;
  border: 0;
  border-radius: 0;
  border-right: 1px solid var(--console-line);
  border-bottom: 1px solid var(--console-line);
  background: none;
  box-shadow: none;
}
.app .hoje-numeros .stat-card:nth-child(2n) {
  border-right: 0;
}
.app .hoje-numeros .stat-card:nth-last-child(-n + 2) {
  border-bottom: 0;
}
.app .hoje-numeros .stat-card label {
  font: 500 11px/1 var(--font-value);
  color: var(--on-void-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.app .hoje-numeros .stat-card .val {
  margin-top: 6px;
  font: 600 28px/1.1 var(--font-value);
  color: var(--on-void);
}
.app .hoje-numeros .stat-card .val small {
  font-size: 15px;
  color: var(--on-void-2);
}
.app .hoje-numeros .stat-note {
  font-size: 13px;
  color: var(--on-void-2);
}
.app .hoje-frente {
  position: relative;
  margin: 0;
  height: 176px;
  border-radius: var(--radius);
  border: 1px solid var(--console-line);
  overflow: hidden;
}
.app .hoje-frente img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.3) contrast(1.05) brightness(0.6);
}
.app .hoje-frente figcaption {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  font: 600 12px/1.3 var(--font-value);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fff;
}
.app .hoje-barra {
  display: block;
  height: 4px;
  margin-top: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.2);
  overflow: hidden;
}
.app .hoje-barra b {
  display: block;
  height: 100%;
  background: var(--stamp-void);
}

@media (max-width: 1180px) {
  .app .hoje-grade {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .app .hoje-coluna {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}
@media (max-width: 768px) {
  .app .hoje-grade,
  .app .hoje-coluna {
    grid-template-columns: minmax(0, 1fr);
  }
  .app .hoje-carimbos {
    order: -1;
  }
  .app .hoje-tabela thead {
    display: none;
  }
  .app .hoje-tabela tr {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--console-line);
  }
  .app .hoje-tabela td {
    padding: 0;
    border: 0;
    border-inline: 0;
    box-shadow: none;
  }
  .app .hoje-tabela td:last-child {
    grid-column: 1 / -1;
  }
  .app .hoje-ultimo .carimbo-c {
    width: 118px;
  }
}
@media print {
  .carimbo-c {
    filter: none;
  }
}

/* ============================================================
   Botões (direção B). O vermelho do carimbo é da ação principal e do
   ato de carimbar, como na prova aprovada ("Entrar", "Carimbar em
   lote", "Próximo"). Botão secundário é contorno neutro. Letra normal,
   sem caixa-alta: a caixa-alta fica para títulos e rótulos.
   ============================================================ */
.app .btn,
.terceirizada-page .btn,
.auth-gate .btn {
  min-height: 40px;
  padding: 8px 14px;
  border-radius: var(--radius);
  font: 600 14px/1.15 var(--font-text);
  letter-spacing: 0;
  text-transform: none;
  box-shadow: none;
}
.app .btn-sm,
.terceirizada-page .btn-sm {
  min-height: 34px;
  padding: 6px 12px;
  font-size: 13.5px;
}
.app .btn-primary,
.app .btn-accent,
.app .btn-autoriza,
.terceirizada-page .btn-primary,
.terceirizada-page .btn-accent,
.terceirizada-page .btn-autoriza,
.auth-gate .btn-primary {
  background: var(--stamp-void);
  border: 1px solid var(--stamp-void);
  color: #ffffff;
  box-shadow: none;
}
.app .btn-primary:hover,
.app .btn-accent:hover,
.app .btn-autoriza:hover,
.terceirizada-page .btn-primary:hover,
.terceirizada-page .btn-accent:hover,
.terceirizada-page .btn-autoriza:hover,
.auth-gate .btn-primary:hover {
  background: var(--stamp-void-strong);
  border-color: var(--stamp-void-strong);
  color: #ffffff;
}
.app .btn-ghost,
.terceirizada-page .btn-ghost {
  background: transparent;
  border: 1px solid #3a3d44;
  color: var(--on-void);
}
.app .btn-ghost:hover,
.terceirizada-page .btn-ghost:hover {
  background: var(--void-3);
  border-color: var(--console-line-strong);
  color: var(--on-void);
}

/* Hoje: cartões de lista e tabela encostam nas bordas (sem recuo duplo). */
.app .view .hoje-carimbos.card,
.app .view .hoje-mes.card,
.app .view .hoje-atencao.card {
  padding: 0;
}
.app .view .hoje-carimbos.card > .card-head,
.app .view .hoje-mes.card > .card-head,
.app .view .hoje-atencao.card > .card-head {
  margin: 0;
  padding: 14px 16px;
}
.app .view .hoje-atencao.card > .table-wrap,
.app .view .hoje-carimbos.card > *,
.app .view .hoje-mes.card > * {
  margin: 0;
}
.app .hoje-tabela table {
  min-width: 0;
  width: 100%;
}
.app .hoje-numeros .stat-card .val small {
  margin-left: 2px;
}

/* ============================================================
   Relatório diário: etapas numa faixa, resumo vivo à direita e
   Voltar/Próximo. No celular, uma etapa por vez com a barra de
   navegação presa acima das abas do pé.
   ============================================================ */
.app .daily-etapas {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin: 0 0 var(--sp-4);
  border: 1px solid var(--console-line);
  border-radius: var(--radius);
  background: var(--void-2);
  overflow: hidden;
}
.app .daily-etapa-botao {
  all: unset;
  box-sizing: border-box;
  display: grid;
  gap: 4px;
  align-content: start;
  min-height: 62px;
  padding: 10px 12px;
  border-right: 1px solid var(--console-line);
  cursor: pointer;
  color: var(--on-void-2);
}
.app .daily-etapa-botao:last-child {
  border-right: 0;
}
.app .daily-etapa-botao:hover {
  background: var(--void-3);
  color: var(--on-void);
}
.app .daily-etapa-botao:focus-visible {
  outline: 2px solid #ec3b45;
  outline-offset: -2px;
}
.app .daily-etapa-botao small {
  font: 500 11px/1 var(--font-value);
  color: var(--on-void-2);
}
.app .daily-etapa-botao b {
  font: 600 14px/1.2 var(--font-text);
  color: inherit;
}
.app .daily-etapa-botao i {
  display: block;
  height: 3px;
  border-radius: 3px;
  background: #3a3d44;
}
.app .daily-etapa-botao.feito {
  color: var(--on-void);
}
.app .daily-etapa-botao.feito i {
  background: var(--risk-clear-void);
}
.app .daily-etapa-botao.atual {
  background: var(--void-3);
  color: var(--on-void);
}
.app .daily-etapa-botao.atual i {
  background: var(--aqui);
}

.app .daily-passos {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  gap: var(--sp-4);
  align-items: start;
}
.app .daily-passo-corpo {
  display: grid;
  gap: var(--sp-4);
  min-width: 0;
}
.app .daily-etapa {
  display: grid;
  gap: var(--sp-4);
  min-width: 0;
}
.app .daily-etapa[hidden] {
  display: none;
}
.app .daily-etapa > * {
  margin-block: 0;
}
.app .daily-passo-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--console-line);
  border-radius: var(--radius);
  background: var(--void-2);
}
.app .daily-passo-nav .btn {
  min-height: 44px;
  gap: 6px;
}
.app .daily-passo-nav .sr-icon svg {
  width: 16px;
  height: 16px;
}

.app .daily-resumo-vivo {
  position: sticky;
  top: 16px;
  border: 1px solid var(--console-line);
  border-radius: var(--radius);
  background: var(--void-2);
  overflow: hidden;
}
.app .daily-resumo-vivo header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--console-line);
  font: 600 14px/1 var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--on-void);
}
.app .daily-resumo-vivo header small {
  font: 500 12px/1 var(--font-value);
  text-transform: none;
  letter-spacing: 0;
  color: var(--on-void-2);
}
.app .daily-resumo-vivo ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.app .daily-resumo-vivo li + li {
  border-top: 1px solid var(--console-line);
}
.app .daily-resumo-item {
  all: unset;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  width: 100%;
  padding: 9px 14px;
  cursor: pointer;
  font: 400 13.5px/1.35 var(--font-text);
  color: var(--on-void);
}
.app .daily-resumo-item:hover {
  background: var(--void-3);
}
.app .daily-resumo-item:focus-visible {
  outline: 2px solid #ec3b45;
  outline-offset: -2px;
}
.app .daily-resumo-item .sr-icon svg {
  width: 17px;
  height: 17px;
  stroke-width: 2;
}
.app .daily-resumo-item.ok .sr-icon {
  color: var(--risk-clear-void);
}
.app .daily-resumo-item.falta .sr-icon {
  color: var(--risk-attention-void);
}
.app .daily-carimbado-fim p {
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--console-line);
  border-radius: var(--radius);
  background: var(--void-2);
  color: var(--on-void);
}

@media (max-width: 1100px) {
  .app .daily-passos {
    grid-template-columns: minmax(0, 1fr);
  }
  .app .daily-resumo-vivo {
    position: static;
    order: -1;
  }
  .app .daily-resumo-vivo ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .app .daily-resumo-vivo li + li {
    border-top: 0;
  }
  .app .daily-resumo-vivo li {
    border-bottom: 1px solid var(--console-line);
  }
}
@media (max-width: 768px) {
  .app .daily-etapas {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 3px;
    padding: 0;
    border: 0;
    background: none;
  }
  .app .daily-etapa-botao {
    min-height: 44px;
    padding: 6px 0 0;
    border: 0;
    background: none;
    gap: 6px;
    text-align: center;
    justify-items: center;
  }
  /* No celular a faixa mostra só os números; o nome da etapa atual vem no
     título acima, e o de cada botão está no rótulo dele (aria-label). */
  .app .daily-etapa-botao b {
    display: none;
  }
  .app .daily-etapa-botao.atual {
    background: none;
  }
  .app .daily-etapa-botao i {
    width: 100%;
  }
  .app .daily-etapa-botao.atual small {
    color: var(--on-void);
    font-weight: 700;
  }
  .app .daily-resumo-vivo ul {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Voltar e Próximo ao alcance do polegar, acima das abas do pé. */
  .app .daily-passo-nav {
    position: sticky;
    bottom: calc(70px + env(safe-area-inset-bottom));
    z-index: 20;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    padding: 10px 12px;
    box-shadow: 0 -10px 24px -10px rgba(0, 0, 0, 0.7);
  }
  .app .daily-passo-nav .btn-primary {
    justify-content: center;
  }
}

/* Relatório: largura toda, como as outras telas. */
.app .daily-report {
  max-width: none;
}
.app .daily-etapa-atual {
  display: none;
}
@media (max-width: 768px) {
  .app .daily-etapa-atual {
    display: block;
    margin: 0 0 8px;
    font: 500 12px/1.3 var(--font-value);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--on-void-2);
  }
  .app .daily-etapa-atual b {
    display: block;
    margin-top: 4px;
    font: 700 24px/1 var(--font-label);
    color: var(--on-void);
  }
  .app .daily-resumo-vivo {
    order: 2;
  }
  .app .daily-report > *,
  .app .daily-toolbar,
  .app .daily-toolbar > * {
    min-width: 0;
    max-width: 100%;
  }
  .app .daily-toolbar .daily-actions {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .app .daily-toolbar .daily-actions .btn {
    flex: none;
    width: auto;
  }
}

/* Em tabela, a ação se repete em cada linha: o vermelho vira ruído. Na
   prova do B as linhas têm ação neutra ("Revisar") e só a ação do quadro é
   vermelha. Dentro de tabela, o botão principal fica neutro e cheio. */
.app td .btn-primary,
.app td .btn-accent,
.terceirizada-page td .btn-primary {
  background: var(--void-3);
  border-color: var(--console-line-strong);
  color: var(--on-void);
}
.app td .btn-primary:hover,
.app td .btn-accent:hover,
.terceirizada-page td .btn-primary:hover {
  background: #2a2c32;
  border-color: #7a7e88;
  color: var(--on-void);
}

/* ============================================================
   Altura única dos controles. Campo, lista e botão que dividem a
   mesma faixa têm a mesma altura e o mesmo centro: 40 px no
   computador, 44 px no celular (tamanho de toque). Só a caixa de
   texto de várias linhas foge da regra. A classe repetida
   (.app.app, .btn.btn) dá a esta regra peso acima das regras de
   módulo, que fixavam 38, 42 e 44 px cada uma no seu canto.
   ============================================================ */
.app.app :is(input.form-control.form-control, select.form-control.form-control),
.app.app .btn.btn,
.terceirizada-page.terceirizada-page :is(input.form-control.form-control, select.form-control.form-control),
.terceirizada-page.terceirizada-page .btn.btn {
  height: 40px;
  min-height: 40px;
  box-sizing: border-box;
}
.app.app .btn.btn,
.terceirizada-page.terceirizada-page .btn.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding-block: 0;
  line-height: 1.1;
}
.app.app .btn.btn-icon {
  width: 40px;
  padding: 0;
}
/* Célula de tabela continua compacta: a linha inteira segue a altura dela. */
.app.app td .btn.btn {
  height: 34px;
  min-height: 34px;
}
.app.app td .btn.btn-icon {
  width: 34px;
}

/* Cabeçalho de bloco: título à esquerda, controles numa linha só, centrados. */
.app :is(.card-head, .daily-block-head) {
  display: flex;
  align-items: center;
  gap: 10px 14px;
}
.app :is(.card-head, .daily-block-head) > :first-child {
  margin-right: auto;
}
.app :is(.card-head, .daily-block-head) :is(.daily-block-actions, .card-actions) {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Equipamentos: título, filtro e o cadastro de equipamento novo na mesma linha. */
.app .daily-equipment-block > .daily-block-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 240px) auto;
  align-items: center;
  gap: 10px;
}
.app .daily-equipment-block .daily-equipment-filter {
  width: 100%;
}
.app .daily-equipment-catalog-add {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
}
.app .daily-equipment-catalog-add .form-control {
  width: 220px;
}
.app .daily-drivers {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.app .daily-drivers .form-control {
  width: 64px;
}

@media (max-width: 768px) {
  .app.app :is(input.form-control.form-control, select.form-control.form-control),
  .app.app .btn.btn,
  .app.app td .btn.btn,
  .terceirizada-page.terceirizada-page :is(input.form-control.form-control, select.form-control.form-control),
  .terceirizada-page.terceirizada-page .btn.btn {
    height: 44px;
    min-height: 44px;
  }
  .app.app .btn.btn-icon,
  .app.app td .btn.btn-icon {
    width: 44px;
  }
  /* Abas do módulo e itens do resumo: alvo de toque de 44 px. */
  .app .module-tabs .rotas-aba,
  .app .daily-resumo-item {
    min-height: 44px;
  }
  .app .daily-resumo-item {
    align-items: center;
  }
  .app :is(.card-head, .daily-block-head) {
    flex-wrap: wrap;
  }
  .app .daily-equipment-block > .daily-block-head {
    grid-template-columns: minmax(0, 1fr);
  }
  .app .daily-equipment-catalog-add .form-control {
    flex: 1;
    width: auto;
    min-width: 0;
  }
}

/* Ficha de cálculo: campos e botões do cabeçalho alinham pela base. */
.app .ficha-cabecalho .form-group {
  margin-bottom: 0;
}
.app .ficha-cabecalho-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
}

/* A medida de controle das folhas antigas acompanha a altura única. */
:root {
  --ui-control-height: 40px;
}
@media (max-width: 768px) {
  :root {
    --ui-control-height: 44px;
  }
}

/* Pré-visita: largura toda, como as outras telas. A borda direita dos
   cartões encosta na mesma linha das abas; os campos já vêm em colunas. */
.app #view-technical-visit > * {
  max-width: none;
}

/* ============================================================
   Entrada (portão de acesso), 22/10/2026: o mineiro fumante. No
   computador a cena cobre a página inteira — a miniatura borrada é a
   luz de fundo (acende quando a lanterna acende) e o vídeo em pé ocupa
   uma faixa larga à direita, enquadrado de perto (capacete aos joelhos),
   com a borda esquerda sumindo no escuro; o cartão flutua encostado nele. No celular a cena fica em cima e o cartão
   sobe sobre ela.
   ============================================================ */
.auth-gate.open:has(> .auth-visual) {
  --cena-largura: min(44vw, 92dvh);
  --cartao-folga: clamp(24px, 4vw, 88px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--cena-largura);
  grid-template-areas: 'cartao cena';
  /* Linha automática: cresce com o cartão quando ele passa da altura da
     tela (celular deitado, zoom). Com minmax(100dvh, auto) o portão de
     altura fixa não crescia, e o cartão vazava para cima da tela. A cena
     garante a tela cheia com o min-height dela. */
  grid-template-rows: auto;
  align-content: stretch;
  padding: 0;
  background: var(--void);
  backdrop-filter: none;
  overflow-y: auto;
}
/* Com o portão aberto, o sistema por trás não rola nem aparece. */
body:has(.auth-gate.open) {
  overflow: hidden;
}
body:has(.auth-gate.open) .app {
  visibility: hidden;
  max-height: 100dvh;
  overflow: hidden;
}
.auth-gate .auth-visual {
  grid-area: 1 / 1 / -1 / -1;
  display: block;
  align-self: stretch;
  justify-self: stretch;
  position: relative;
  min-height: 100dvh;
  padding: 0;
  overflow: hidden;
  background: #0b0c0e;
}
.auth-gate .auth-ambiente {
  position: absolute;
  inset: -8%;
  width: 116%;
  height: 116%;
  object-fit: cover;
  display: block;
  filter: blur(36px) brightness(0.42) saturate(1.2);
}
.auth-gate .auth-video {
  position: absolute;
  top: 0;
  right: 0;
  width: var(--cena-largura);
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  display: block;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%);
  mask-image: linear-gradient(90deg, transparent 0, #000 16%);
}
/* Escurece o lado do cartão e a base, para o texto ler sobre a luz. */
.auth-gate .auth-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(11, 12, 14, 0.55) 0, rgba(11, 12, 14, 0.2) 55%, transparent 80%),
    linear-gradient(0deg, rgba(11, 12, 14, 0.55) 0, transparent 22%);
}
.auth-gate .auth-legenda {
  position: absolute;
  right: 28px;
  bottom: 24px;
  z-index: 1;
  font: 500 11px/1 var(--font-value);
  color: rgba(233, 231, 228, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.auth-gate:has(> .auth-visual) .auth-card {
  grid-area: cartao;
  position: relative;
  z-index: 1;
  align-self: center;
  /* Encostado no mineiro, não perdido no meio do vazio. */
  justify-self: end;
  width: min(480px, calc(100% - 24px - var(--cartao-folga)));
  margin: 32px var(--cartao-folga) 32px 24px;
  padding: 44px 48px 36px;
  border: 1px solid rgba(233, 231, 228, 0.09);
  border-radius: 12px;
  background: rgba(17, 18, 21, 0.86);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--on-void);
  /* Quem rola é a página. O teto de altura com rolagem própria (de
     interface-polish.css) prendia o botão Entrar no celular deitado. */
  max-height: none;
  overflow: visible;
}
.auth-gate .auth-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 40px;
  padding: 0;
  border: 0;
}
.auth-gate .auth-logo,
.auth-gate .auth-logo img {
  width: 76px;
  height: 76px;
  border: 0;
  background: none;
  box-shadow: none;
  padding: 0;
  object-fit: contain;
}
.auth-gate .auth-brand strong {
  display: block;
  font: 700 30px/1 var(--font-label);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--on-void);
}
.auth-gate .auth-brand strong b {
  color: #ec3b45;
  font-weight: 700;
}
.auth-gate .auth-brand span {
  display: block;
  margin-top: 6px;
  font: 500 12px/1.2 var(--font-value);
  color: var(--on-void-2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.auth-gate .auth-copy h1 {
  margin: 0;
  font: 700 40px/1 var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--on-void);
}
.auth-gate .auth-copy p {
  margin: 10px 0 0;
  color: var(--on-void-2);
  font-size: 15px;
}
.auth-gate .auth-form {
  display: grid;
  gap: 16px;
  margin-top: 28px;
}
.auth-gate .auth-field {
  display: grid;
  gap: 7px;
  margin: 0;
  font: 500 12px/1.2 var(--font-value);
  color: var(--on-void-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.auth-gate .auth-field .form-control {
  height: 48px;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid #3a3d44;
  border-radius: var(--radius);
  background: var(--void-2);
  color: var(--on-void);
  font: 500 16px/1 var(--font-text);
  text-transform: none;
  letter-spacing: 0;
}
.auth-gate .auth-field .form-control::placeholder {
  color: var(--on-void-faint);
}
.auth-gate .auth-field .form-control:focus {
  border-color: #ec3b45;
  box-shadow: 0 0 0 3px rgba(214, 38, 49, 0.18);
  outline: none;
}
.auth-gate .auth-form > .btn-primary {
  height: 50px;
  min-height: 50px;
  margin-top: 6px;
  font-size: 16px;
}
.auth-gate .auth-caminhos {
  justify-content: space-between;
}
.auth-gate .auth-link-btn {
  color: var(--on-void);
  font: 500 14px/1.2 var(--font-text);
  text-decoration-color: #3a3d44;
}
.auth-gate .auth-rodape {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 12px;
  margin-top: 40px;
  padding-top: 16px;
  border-top: 1px solid var(--console-line);
  color: var(--on-void-2);
  font-size: 13px;
}
.auth-gate .auth-local {
  font: 500 12px/1.4 var(--font-value);
}

/* Celular em pé (e tela estreita): a cena em cima e o cartão sobe sobre
   ela. A cena cede altura em telas baixas para o botão Entrar aparecer
   sem rolar. O celular deitado fica com o leiaute do computador, cartão ao
   lado do mineiro: empilhado, a cena comia metade da altura. A mesma
   consulta está em tocarCenaDaEntrada (app.js). */
@media (max-width: 860px) and (orientation: portrait), (max-width: 599px) {
  .auth-gate.open:has(> .auth-visual) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'cena' 'cartao';
    grid-template-rows: max(34vh, min(54vh, 100dvh - 350px)) auto;
  }
  .auth-gate .auth-visual {
    grid-area: cena;
    min-height: 0;
  }
  .auth-gate .auth-ambiente {
    display: none;
  }
  .auth-gate .auth-video {
    width: 100%;
    object-position: 50% 18%;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .auth-gate .auth-visual::after {
    background: linear-gradient(0deg, var(--void) 0, rgba(17, 18, 21, 0.6) 18%, transparent 45%);
  }
  .auth-gate .auth-legenda {
    display: none;
  }
  .auth-gate:has(> .auth-visual) .auth-card {
    align-self: start;
    justify-self: stretch;
    width: auto;
    margin: -88px 0 0;
    padding: 0 20px calc(32px + env(safe-area-inset-bottom));
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .auth-gate .auth-brand {
    margin-bottom: 26px;
  }
  .auth-gate .auth-logo,
  .auth-gate .auth-logo img {
    width: 60px;
    height: 60px;
  }
  .auth-gate .auth-copy h1 {
    font-size: 34px;
  }
}

/* Computador de tela baixa (notebook com zoom, janela meia altura): o
   cartão encolhe os vãos para caber inteiro sem rolar. */
@media (min-width: 861px) and (max-height: 760px), (min-width: 600px) and (orientation: landscape) and (max-height: 760px) {
  .auth-gate:has(> .auth-visual) .auth-card {
    margin: 16px var(--cartao-folga) 16px 24px;
    padding: 28px 40px 24px;
  }
  .auth-gate:has(> .auth-visual) .auth-brand {
    margin-bottom: 22px;
  }
  .auth-gate:has(> .auth-visual) .auth-form {
    gap: 12px;
    margin-top: 20px;
  }
  .auth-gate:has(> .auth-visual) .auth-rodape {
    margin-top: 20px;
  }
}

/* Portão sem cena (terceirizada, nova senha, confirmação de e-mail): o mesmo
   cartão, centralizado num painel. */
.auth-gate.open:not(:has(> .auth-visual)) {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: 24px 16px;
  background: var(--void);
}
.auth-gate:not(:has(> .auth-visual)) .auth-card {
  width: min(440px, 100%);
  padding: 32px;
  border: 1px solid var(--console-line);
  border-radius: 10px;
  background: var(--void-2);
  box-shadow: var(--shadow);
  color: var(--on-void);
}
.auth-gate:not(:has(> .auth-visual)) .auth-brand {
  margin-bottom: 28px;
}
.auth-gate:not(:has(> .auth-visual)) :is(.auth-logo, .auth-logo img) {
  width: 56px;
  height: 56px;
}
.auth-gate:not(:has(> .auth-visual)) .auth-brand strong {
  font-size: 24px;
}
.auth-gate:not(:has(> .auth-visual)) .auth-copy h1 {
  font-size: 32px;
}
.auth-gate:not(:has(> .auth-visual)) .auth-field .form-control {
  background: var(--void);
}

/* Carimbo da C na folha impressa e no PDF: tinta vermelha sobre papel
   branco, no campo da Supervisão, sem o filtro de falha (o PDF é feito
   de uma imagem da folha, e o filtro some ou vira borrão nela). */
.print-report .print-sign .print-sign-supervisao,
.daily-pdf-source .print-sign .print-sign-supervisao {
  position: relative;
}
.print-report .print-sign .carimbo-folha,
.daily-pdf-source .print-sign .carimbo-folha {
  position: absolute;
  right: 6pt;
  bottom: 4pt;
  width: 78pt;
  padding: 0;
  color: #c4222c;
  filter: none;
  opacity: 0.9;
  transform: rotate(-9deg);
}
.print-report .print-sign .carimbo-folha .aro,
.daily-pdf-source .print-sign .carimbo-folha .aro {
  fill: none;
  stroke: currentColor;
}
.print-report .print-sign .carimbo-folha text,
.daily-pdf-source .print-sign .carimbo-folha text {
  fill: currentColor;
  font-family: 'Barlow Semi Condensed', 'Barlow', Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
}
.print-report .print-sign .carimbo-folha .carimbo-data,
.daily-pdf-source .print-sign .carimbo-folha .carimbo-data {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-weight: 600;
}
/* Com carimbo, as três caixas de assinatura ganham a mesma altura extra:
   o carimbo cabe inteiro sobre a linha da Supervisão e as três linhas
   continuam na mesma altura. */
.print-report .print-sign:has(.carimbo-folha) > div,
.daily-pdf-source .print-sign:has(.carimbo-folha) > div {
  padding-top: 70pt;
}

/* Botão não vai para o papel. */
@media print {
  .app .view .btn {
    display: none;
  }
}

/* Celular e tablet estreito: os controles do cabeçalho de cartão viram uma
   grade de colunas iguais, alinhadas pela base e na largura do cartão. Antes
   cada módulo empilhava do seu jeito, com botões de meia largura ao lado de
   campos de outra largura. */
@media (max-width: 768px) {
  .app .card-head {
    flex-wrap: wrap;
  }
  .app .card-head > div:not(:first-child) {
    flex: 1 1 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    align-items: end;
    gap: 8px;
    width: 100%;
    margin: 0;
  }
  .app .card-head > div:not(:first-child) > * {
    width: 100%;
    min-width: 0;
    margin: 0;
  }
  .app .card-head > div:not(:first-child) > :is(label, .form-group) {
    display: grid;
    gap: 6px;
  }
  .app .card-head > .btn {
    flex: 1 1 100%;
  }
}
@media (max-width: 768px) {
  .app .daily-block-head {
    flex-wrap: wrap;
  }
  .app .daily-block-head > .daily-block-actions {
    flex: 1 1 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    align-items: end;
    gap: 8px;
  }
  .app .daily-block-head > .daily-block-actions > * {
    width: 100%;
    min-width: 0;
  }
  .app .daily-drivers {
    justify-content: space-between;
  }
  .app .daily-equipment-block > .daily-block-head {
    grid-template-columns: minmax(0, 1fr);
  }
  .app .daily-equipment-catalog-add .form-control {
    flex: 1;
    width: auto;
    min-width: 0;
  }
}
/* Abas de grupo do Mapa e modos do diagrama da Malha: toque de 44 px. */
@media (max-width: 768px) {
  .app .map-group-tab,
  .app .dg-modo {
    min-height: 44px;
  }
}

/* ============================================================
   Componentes da direção B em todos os módulos. A casca e o Hoje
   já eram B; o miolo das outras telas tinha herdado a forma da
   "Permissão de Trabalho" com as cores novas. Aqui os componentes
   comuns ganham a linguagem do Hoje: painel com cabeçalho, números
   em faixa de instrumentos, tabela com cabeçalho em fonte de
   máquina, selo com marcador quadrado, grupos de campos em painel
   e estado por cor e palavra, não por hachura.
   ============================================================ */

/* Superfície "diferente, sem cor": tom liso no lugar da hachura. A folha
   impressa mantém a hachura (bloco @media print abaixo). */
@media screen {
  .app,
  .app *,
  .terceirizada-page,
  .terceirizada-page * {
    --hatch: linear-gradient(rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.035));
  }
}

/* Painel e cabeçalho de painel */
.app .view :is(.card, .daily-block, .daily-card, .aside-card, .technical-section) {
  border: 1px solid var(--console-line);
  border-radius: var(--radius);
  background: var(--void-2);
  box-shadow: none;
}
.app .view :is(.card, .daily-block, .technical-section) > :is(.card-head, .daily-block-head) {
  border-bottom: 1px solid var(--console-line);
  background: none;
}
.app .view :is(.card-head, .daily-block-head) h2,
.app .view .daily-block-head strong,
.app .view .technical-section h2 {
  margin: 0;
  font: 600 15px/1.2 var(--font-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-void);
}
.app .view .card-head p {
  margin: 3px 0 0;
  font: 400 13px/1.4 var(--font-text);
  letter-spacing: 0;
  text-transform: none;
  color: var(--on-void-2);
}
.app .view :is(.card, .daily-block) h3 {
  font: 600 13px/1.2 var(--font-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-void-2);
}
.app .view .daily-badge {
  padding: 2px 6px;
  border: 1px solid var(--console-line-strong);
  border-radius: 4px;
  background: none;
  font: 600 11px/1.2 var(--font-value);
  letter-spacing: 0.04em;
  color: var(--on-void-2);
}

/* Números em faixa de instrumentos (como o "Mês" do Hoje) */
.app .view .stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0;
  border: 1px solid var(--console-line);
  border-radius: var(--radius);
  background: var(--void-2);
  overflow: hidden;
  box-shadow: none;
}
.app .view .stats > .stat-card {
  height: auto;
  margin: 0;
  padding: 16px 18px;
  border: 0;
  border-radius: 0;
  box-shadow: 1px 0 0 var(--console-line), 0 1px 0 var(--console-line);
  background: none;
}
.app .view :is(.stat-card, .contratos-resumo-item, .rotas-resumo-item, .remotas-resumo-item) > :is(label, span:first-child) {
  display: block;
  font: 500 11px/1.3 var(--font-value);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--on-void-2);
}
.app .view .stat-card .val,
.app .view :is(.contratos-resumo-item, .rotas-resumo-item, .remotas-resumo-item) > strong {
  margin-top: 6px;
  font: 600 26px/1.15 var(--font-value);
  font-variant-numeric: tabular-nums;
  color: var(--on-void);
}
.app .view .stat-card .stat-note {
  font: 400 13px/1.35 var(--font-text);
  color: var(--on-void-2);
}
.app .view :is(.contratos-resumo, .rotas-resumo, .remotas-resumo) {
  gap: 0;
  border: 1px solid var(--console-line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--void-2);
}
.app .view :is(.contratos-resumo-item, .rotas-resumo-item, .remotas-resumo-item) {
  padding: 16px 18px;
  background: none;
  box-shadow: 1px 0 0 var(--console-line), 0 1px 0 var(--console-line);
}
/* Estado no número: cor e marcador, como os selos do Hoje. */
.app .view :is(.contratos-resumo-item, .rotas-resumo-item).atencao > strong {
  color: var(--risk-attention-void);
}
.app .view :is(.contratos-resumo-item, .rotas-resumo-item).atencao > span:first-child::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 2px;
  background: var(--risk-attention-void);
  vertical-align: 1px;
}

/* Tabelas: cabeçalho em fonte de máquina, texto corrido em Barlow, código
   na primeira coluna em fonte de máquina, réguas de 1 px. */
.app .view table th {
  padding: 10px 14px;
  border-bottom: 1px solid var(--console-line-strong);
  background: none;
  font: 500 11px/1.3 var(--font-value);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--on-void-2);
}
.app .view table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--console-line);
  font: 400 14px/1.4 var(--font-text);
  color: var(--on-void);
}
.app .view table tbody tr:hover > td {
  background: rgba(255, 255, 255, 0.025);
}
.app .view table tbody tr:last-child > td {
  border-bottom: 0;
}
.app .view table td:first-child {
  font-family: var(--font-value);
  font-size: 13px;
}
.app .view :is(.table-wrap, .table-scroll) {
  border: 1px solid var(--console-line);
  border-radius: var(--radius);
  background: var(--void-2);
}
.app .view :is(.card, .daily-block) > .table-wrap,
.app .view :is(.card, .daily-block) .table-wrap .table-wrap {
  border: 0;
  border-radius: 0;
  background: none;
}

/* Selo: marcador quadrado, fonte de máquina, sem preenchimento cheio. */
.app .view .status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 2px 9px 2px 8px;
  border: 1px solid #3a3d44;
  border-radius: 999px;
  background: var(--void-2);
  font: 600 11px/1 var(--font-value);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--on-void-2);
  white-space: nowrap;
  box-shadow: none;
  background-image: none;
}
.app .view .status-pill::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: currentColor;
  flex: none;
}
.app .view .status-pill:is(.done, .active, .ok, .success) {
  color: var(--risk-clear-void);
}
.app .view .status-pill:is(.warning, .pending-warning) {
  color: var(--risk-attention-void);
}
.app .view .status-pill:is(.danger, .critical) {
  color: var(--risk-blocked-void);
}
.app .view .status-pill:is(.pending, .disabled) {
  color: var(--on-void-2);
}
/* Situação de contrato e de remota: mesma peça. */
.app .view :is(.contrato-situacao, .remota-situacao, .situacao) {
  border-radius: 999px;
  font-family: var(--font-value);
  letter-spacing: 0.04em;
  background-image: none;
}

/* Grupos de campos (fieldset): painel com o título dentro, não na borda. */
.app .view fieldset {
  min-width: 0;
  margin: 0;
  padding: 0 14px 14px;
  border: 1px solid var(--console-line);
  border-radius: var(--radius);
  background: var(--void);
}
.app .view fieldset > legend {
  float: left;
  width: calc(100% + 28px);
  margin: 0 -14px 12px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--console-line);
  font: 600 14px/1.2 var(--font-label);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--on-void);
}
.app .view fieldset > legend + * {
  clear: both;
}
.app .view fieldset > legend small,
.app .view fieldset > legend span {
  font: 400 12.5px/1 var(--font-text);
  letter-spacing: 0;
  text-transform: none;
  color: var(--on-void-2);
}

/* Rótulos de campo: fonte de máquina pequena, versal. */
.app .view :is(.form-group > label, label.form-label, .daily-grid > label, .field-label) {
  font: 500 11.5px/1.3 var(--font-value);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--on-void-2);
}
.app .view :is(input.form-control, select.form-control, textarea.form-control) {
  border: 1px solid #3a3d44;
  border-radius: var(--radius);
  background: var(--void);
  color: var(--on-void);
}
.app .view :is(input.form-control, select.form-control, textarea.form-control):focus {
  border-color: #ec3b45;
  box-shadow: 0 0 0 3px rgba(214, 38, 49, 0.18);
  outline: none;
}

/* Estado vazio */
.app .view :is(p.empty, .empty, .empty-inline, .empty-state) {
  border: 1px dashed #3a3d44;
  border-radius: var(--radius);
  background: none;
  color: var(--on-void-2);
}

/* Lista que pede ação: a faixa grossa vira barra lateral fina. */
.app .view .contratos-urgentes,
.app .view .painel-mais {
  border-top-width: 1px;
}

/* Estados que a hachura marcava, agora por cor e palavra. */
.app .view .malha-linha.divergente > td:first-child {
  box-shadow: inset 3px 0 0 var(--risk-attention-void);
}
.app .view .rota-vencida {
  box-shadow: inset 3px 0 0 var(--risk-blocked-void);
}
.app .view .contrato-linha.semVigencia > td:first-child {
  box-shadow: inset 3px 0 0 var(--risk-attention-void);
}

@media print {
  .app,
  .app * {
    --hatch: repeating-linear-gradient(-45deg, transparent 0 5px, rgba(20, 22, 26, 0.09) 5px 6px);
  }
}

/* Selos de situação dos módulos (inspeção e contrato): a mesma peça do
   selo do B, sem fundo cheio. A palavra continua escrita. */
.app .view :is(.situacao-conforme, .situacao-atencao, .situacao-critico, .situacao-naoAplicavel, .contrato-situacao) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 2px 9px 2px 8px;
  border: 1px solid #3a3d44;
  border-radius: 999px;
  background: var(--void-2);
  background-image: none;
  font: 600 11px/1 var(--font-value);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--on-void-2);
  white-space: nowrap;
}
.app .view :is(.situacao-conforme, .situacao-atencao, .situacao-critico, .situacao-naoAplicavel, .contrato-situacao)::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: currentColor;
  flex: none;
}
.app .view .situacao-conforme {
  color: var(--risk-clear-void);
}
.app .view :is(.situacao-atencao, .contrato-situacao.aVencer, .contrato-situacao.semVigencia) {
  color: var(--risk-attention-void);
}
.app .view :is(.situacao-critico, .contrato-situacao.vencido) {
  color: var(--risk-blocked-void);
}
.app .view .contrato-situacao.vigente {
  color: var(--risk-clear-void);
}
.app .view .contrato-situacao.encerrado {
  border-style: dashed;
}

/* Excluir não é a ação principal: contorno vermelho-claro, cheio só ao passar. */
.app.app .btn.btn-danger,
.terceirizada-page.terceirizada-page .btn.btn-danger {
  background: transparent;
  border: 1px solid rgba(240, 100, 90, 0.55);
  color: var(--risk-blocked-void);
}
.app.app .btn.btn-danger:hover,
.terceirizada-page.terceirizada-page .btn.btn-danger:hover {
  background: rgba(240, 100, 90, 0.12);
  border-color: var(--risk-blocked-void);
  color: var(--risk-blocked-void);
}

/* ============================================================
   Mapa: visualizador moderno. Biblioteca à esquerda (painéis em
   pílulas que quebram linha, lista em linhas), barra de ferramentas
   compacta em grupos, folha centralizada sobre a mesa escura.
   ============================================================ */
.app .view .map-module {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.app .view :is(.map-library, .map-workspace) {
  border: 1px solid var(--console-line);
  border-radius: var(--radius);
  background: var(--void-2);
  overflow: hidden;
  box-shadow: none;
}
.app .view .map-library {
  position: sticky;
  top: 16px;
  display: grid;
  align-content: start;
}
.app .view :is(.map-library-head, .map-document-head) {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 14px 16px;
  border-bottom: 1px solid var(--console-line);
  background: none;
}
.app .view .map-library-head {
  display: grid;
  gap: 12px;
}
.app .view :is(.map-library-head, .map-document-head) h2 {
  margin: 0;
  font: 600 15px/1.2 var(--font-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-void);
}
.app .view :is(.map-library-head, .map-document-head) p {
  margin: 3px 0 0;
  font: 400 13px/1.3 var(--font-text);
  color: var(--on-void-2);
}
.app .view .map-library-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.app .view .map-library-actions .btn {
  width: 100%;
}
.app .view .map-group-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 12px 16px;
  border-bottom: 1px solid var(--console-line);
  overflow: visible;
}
.app .view .map-group-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  min-height: 32px;
  padding: 0 11px;
  border: 1px solid #3a3d44;
  border-radius: 999px;
  background: none;
  color: var(--on-void-2);
  font: 600 13px/1 var(--font-value);
  cursor: pointer;
}
.app .view .map-group-tab span {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: var(--void-3);
  font: 600 11px/1 var(--font-value);
  color: var(--on-void-2);
}
.app .view .map-group-tab:hover {
  color: var(--on-void);
  border-color: #646872;
}
.app .view .map-group-tab.active {
  background: var(--on-void);
  border-color: var(--on-void);
  color: var(--void);
}
.app .view .map-group-tab.active span {
  background: rgba(17, 18, 21, 0.14);
  color: var(--void);
}
.app .view .map-list {
  display: grid;
  gap: 2px;
  padding: 8px;
}
.app .view .map-list-item {
  position: relative;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--on-void);
  text-align: left;
  cursor: pointer;
  box-shadow: none;
}
.app .view .map-list-item:hover {
  background: var(--void-3);
}
.app .view .map-list-item.active {
  background: var(--void-3);
  box-shadow: inset 2px 0 0 var(--on-void);
}
.app .view .map-list-item .sr-icon svg {
  width: 18px;
  height: 18px;
  color: var(--on-void-2);
}
.app .view .map-list-item strong {
  display: block;
  font: 600 14px/1.3 var(--font-text);
  overflow-wrap: anywhere;
}
.app .view .map-list-item small {
  display: block;
  margin-top: 2px;
  font: 500 11.5px/1.35 var(--font-value);
  color: var(--on-void-2);
  overflow-wrap: anywhere;
}

/* Documento */
.app .view .map-document-head > div:first-child {
  margin-right: auto;
  min-width: 0;
}
.app .view .map-sync-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 4px 10px;
  border: 1px solid #3a3d44;
  border-radius: 999px;
  background: none;
  font: 500 11.5px/1.2 var(--font-value);
  color: var(--on-void-2);
  white-space: nowrap;
}
.app .view .map-sync-status::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.app .view .map-document-actions {
  display: flex;
  gap: 8px;
}

/* Barra de ferramentas: grupos separados por régua, presa ao topo. */
.app .view .map-editor-toolbar {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 0;
  margin: 0;
  padding: 8px 10px;
  border-bottom: 1px solid var(--console-line);
  background: var(--void-2);
}
.app .view .map-tool-group {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 10px;
  border: 0;
  border-right: 1px solid var(--console-line);
  background: none;
}
.app .view .map-tool-group:last-child {
  border-right: 0;
}
.app .view .map-tool {
  width: 38px;
  height: 38px;
  min-height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  color: var(--on-void-2);
  cursor: pointer;
}
.app .view .map-tool:hover {
  background: var(--void-3);
  color: var(--on-void);
}
.app .view .map-tool.active {
  background: var(--on-void);
  color: var(--void);
}
.app .view .map-tool .sr-icon svg {
  width: 18px;
  height: 18px;
}
.app .view :is(.map-page-tools, .map-zoom-tools) span {
  min-width: 52px;
  text-align: center;
  font: 600 12.5px/1 var(--font-value);
  color: var(--on-void);
}
.app .view .map-zoom-tools {
  margin-left: auto;
}
.app .view .map-traco {
  gap: 12px;
}
.app .view :is(.map-color-control, .map-width-control) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font: 500 11px/1 var(--font-value);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--on-void-2);
}
.app .view .map-color-control input[type='color'] {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid #3a3d44;
  border-radius: 6px;
  background: none;
  cursor: pointer;
}
.app .view .map-width-control input[type='range'] {
  width: 110px;
  accent-color: var(--on-void);
}

/* Mesa escura com pontilhado de prancheta e a folha com sombra. */
.app .view .map-canvas-scroll {
  max-height: calc(100dvh - 230px);
  min-height: 420px;
  margin: 0;
  padding: 28px;
  overflow: auto;
  border: 0;
  border-radius: 0;
  background-color: #0b0c0e;
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 18px 18px;
}
.app .view .map-stage {
  margin: 0 auto;
  border: 0;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4), 0 24px 60px -12px rgba(0, 0, 0, 0.85);
}

@media (max-width: 1100px) {
  .app .view .map-module {
    grid-template-columns: minmax(0, 1fr);
  }
  .app .view .map-library {
    position: static;
  }
  .app .view .map-list {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }
}
@media (max-width: 768px) {
  .app .view .map-group-tab,
  .app .view .map-tool {
    height: 44px;
    min-height: 44px;
  }
  .app .view .map-tool {
    width: 44px;
  }
  .app .view .map-editor-toolbar {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .app .view .map-tool-group {
    flex: none;
  }
  .app .view .map-zoom-tools {
    margin-left: 0;
  }
  .app .view .map-canvas-scroll {
    padding: 12px;
    max-height: calc(100dvh - 200px);
  }
  .app .view .map-document-head {
    flex-wrap: wrap;
  }
}

/* ============================================================
   Atividades do projeto
   ============================================================ */
/* Cabeçalho do projeto numa linha: identidade, dados e ações lado a lado. */
.app .view .project-hero {
  display: grid;
  grid-template-columns: auto minmax(180px, 1.2fr) repeat(3, minmax(110px, auto)) auto;
  align-items: center;
  gap: 8px 28px;
  padding: 16px 18px;
  border: 1px solid var(--console-line);
  border-radius: var(--radius);
  background: var(--void-2);
}
.app .view .project-hero-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid #3a3d44;
  border-radius: 10px;
  background: var(--void-3);
  color: var(--on-void);
}
.app .view .project-title strong {
  display: block;
  font: 700 22px/1.1 var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.app .view .project-title span {
  display: block;
  margin-top: 3px;
  font-size: 14px;
  color: var(--on-void-2);
}
.app .view .project-meta span {
  display: block;
  font: 500 11px/1.3 var(--font-value);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--on-void-2);
}
.app .view .project-meta strong {
  display: block;
  margin-top: 4px;
  font: 600 16px/1.2 var(--font-value);
  color: var(--on-void);
}
.app .view .project-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.app .view .project-actions .btn {
  width: auto;
}

/* Números e gráfico lado a lado, sem esticar os números até o gráfico. */
.app .view .dashboard-chart-grid {
  align-items: start;
}
.app .view .dashboard-chart-grid > .stats {
  align-self: start;
}

/* "O que a história diz": faixa de instrumentos, sem caixa dentro de caixa. */
.app .view .historical-reference-body {
  padding: 0;
}
.app .view .historical-reference-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0;
  margin: 0;
}
.app .view .historical-reference-grid > div {
  padding: 16px 18px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: 1px 0 0 var(--console-line), 0 1px 0 var(--console-line);
}
.app .view .historical-reference-grid label {
  display: block;
  font: 500 11px/1.3 var(--font-value);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--on-void-2);
}
.app .view .historical-reference-grid .val {
  margin-top: 6px;
  font: 600 24px/1.15 var(--font-value);
  color: var(--on-void);
}
.app .view .historical-reference-grid .stat-note {
  font-size: 13px;
  color: var(--on-void-2);
}
.app .view .historical-reference-foot {
  padding: 12px 18px 16px;
  border-top: 1px solid var(--console-line);
}
.app .view .historical-reference-note {
  margin: 0;
  max-width: 90ch;
  font-size: 13px;
  color: var(--on-void-2);
}

/* Barra do quadro: disciplinas em pílulas, busca e arranjo segmentado. */
.app .view .activity-tabs-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 0;
  border: 0;
  background: none;
}
.app .view .activity-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-right: auto;
  border: 0;
}
.app .view .activity-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid #3a3d44;
  border-radius: 999px;
  background: none;
  color: var(--on-void-2);
  font: 600 14px/1 var(--font-text);
  letter-spacing: 0;
  text-transform: none;
  box-shadow: none;
  cursor: pointer;
}
.app .view .activity-tab strong {
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  border: 0;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: var(--void-3);
  font: 600 11.5px/1 var(--font-value);
  color: var(--on-void-2);
}
.app .view .activity-tab:hover {
  color: var(--on-void);
  border-color: #646872;
}
.app .view .activity-tab.active {
  background: var(--on-void);
  border-color: var(--on-void);
  color: var(--void);
}
.app .view .activity-tab.active strong {
  background: rgba(17, 18, 21, 0.14);
  color: var(--void);
}
.app .view .activity-tab.active::after {
  display: none;
}
.app .view .board-search {
  flex: 0 1 320px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.app .view .board-search .form-control {
  width: 100%;
}
.app .view .board-layout {
  display: inline-flex;
  padding: 3px;
  border: 1px solid #3a3d44;
  border-radius: 8px;
  background: var(--void-2);
}
.app .view .board-layout-btn {
  height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--on-void-2);
  font: 600 13px/1 var(--font-text);
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}
.app .view .board-layout-btn[aria-pressed='true'] {
  background: var(--void-3);
  color: var(--on-void);
  box-shadow: 0 0 0 1px #3a3d44;
}

/* Quadro: colunas do tamanho do conteúdo, cartões espaçados. */
.app .view .kanban-wrap {
  border: 0;
  background: none;
  padding: 0;
}
.app .view .kanban {
  align-items: flex-start;
  gap: 12px;
  padding: 2px 0 12px;
}
.app .view .kanban-col {
  align-self: flex-start;
  height: auto;
  min-height: 0;
  border: 1px solid var(--console-line);
  border-radius: var(--radius);
  background: var(--void-2);
}
.app .view .kanban-col:last-child {
  border-right: 1px solid var(--console-line);
}
.app .view .kanban-col > h3 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 12px 14px;
  border-bottom: 1px solid var(--console-line);
  font: 600 14px/1.2 var(--font-label);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--on-void);
}
.app .view .act-card {
  border-radius: 8px;
}
.app .view .legend-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 6px;
  font: 500 12px/1 var(--font-value);
  color: var(--on-void-2);
}
.app .view .legend-dot {
  border-radius: 2px;
}

@media (max-width: 1180px) {
  .app .view .project-hero {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .app .view .project-hero > .project-meta {
    grid-column: span 1;
  }
  .app .view .project-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}
@media (max-width: 768px) {
  .app .view .activity-tab {
    height: 44px;
    min-height: 44px;
  }
  .app .view .board-search {
    flex: 1 1 100%;
  }
  .app .view .board-layout-btn {
    height: 38px;
  }
}
.app .view .historical-reference.card {
  padding: 0;
}
.app .view .historical-reference.card > .card-head {
  margin: 0;
  padding: 14px 16px;
}
.app .view .activity-tabs,
.app .view .board-search {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

/* ============================================================
   Malha (fluxograma): filtros numa linha, seletores segmentados,
   diagrama sobre a mesa pontilhada.
   ============================================================ */
.app .view .malha-filtros {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) repeat(4, minmax(140px, 1fr));
  gap: 12px;
  align-items: end;
  margin: 0;
}
.app .view .malha-filtros .form-group {
  margin: 0;
}
.app .view :is(.malha-modo, .dg-barra .dg-grupo[role='group']) {
  display: inline-flex;
  align-items: center;
  gap: 0;
  width: auto;
  padding: 3px;
  border: 1px solid #3a3d44;
  border-radius: 8px;
  background: var(--void-2);
}
.app .view .malha-modo {
  justify-self: start;
  margin: 0;
}
.app .view :is(.malha-modo .board-layout-btn, .dg-modo) {
  height: 32px;
  min-height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--on-void-2);
  font: 600 13px/1 var(--font-text);
  letter-spacing: 0;
  text-transform: none;
  box-shadow: none;
  cursor: pointer;
}
.app .view :is(.malha-modo .board-layout-btn, .dg-modo)[aria-pressed='true'] {
  background: var(--void-3);
  color: var(--on-void);
  box-shadow: 0 0 0 1px #3a3d44;
}
.app .view :is(.malha-modo .board-layout-btn, .dg-modo)[aria-pressed='true']::after {
  display: none;
}
.app .view .dg-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  padding: 0;
  border: 0;
  background: none;
}
.app .view .dg-barra > .dg-grupo:not([role='group']) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.app .view .dg-zoom {
  min-width: 52px;
  text-align: center;
  font: 600 12.5px/1 var(--font-value);
  color: var(--on-void);
}
.app .view .dg-localizar {
  display: inline-flex;
  gap: 6px;
  margin-left: auto;
}
.app .view .dg-localizar .form-control {
  width: 200px;
}
.app .view .dg-status {
  flex: 1 1 100%;
  margin: 0;
  font: 500 12px/1.3 var(--font-value);
  color: var(--on-void-2);
}
.app .view .dg-area {
  border: 1px solid var(--console-line);
  border-radius: var(--radius);
  background-color: #0b0c0e;
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 18px 18px;
}

@media (max-width: 1100px) {
  .app .view .malha-filtros {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .app .view .malha-filtros .form-group:first-child {
    grid-column: 1 / -1;
  }
}
@media (max-width: 768px) {
  .app .view .malha-filtros {
    grid-template-columns: minmax(0, 1fr);
  }
  .app .view :is(.malha-modo .board-layout-btn, .dg-modo) {
    height: 40px;
    min-height: 40px;
  }
  .app .view .dg-localizar {
    margin-left: 0;
    flex: 1 1 100%;
  }
  .app .view .dg-localizar .form-control {
    flex: 1;
    width: auto;
  }
}

/* ============================================================
   Campos: Barlow no texto; fonte de máquina só em número, data,
   hora e código (regra do B).
   ============================================================ */
.app .view :is(input.form-control, select.form-control, textarea.form-control) {
  font: 500 15px/1.3 var(--font-text);
  letter-spacing: 0;
}
.app .view :is(input.form-control, .cell-in):is([type='number'], [type='date'], [type='time'], [type='datetime-local'], [type='month']) {
  font-family: var(--font-value);
  font-size: 14px;
}
.app .view .cell-in {
  font-family: var(--font-text);
}

/* ============================================================
   Biblioteca de atividades: cartão leve, título em letra normal,
   dados em grade de rótulo e valor, ações compactas numa linha.
   ============================================================ */
.app .view .library-card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--console-line);
  border-radius: 8px;
  background: var(--void-2);
  box-shadow: none;
  transition: border-color var(--dur-fast) var(--ease);
}
.app .view .library-card:hover {
  border-color: #646872;
}
.app .view .library-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
}
.app .view .library-card-head h3 {
  margin: 0;
  font: 600 15.5px/1.3 var(--font-text);
  letter-spacing: 0;
  text-transform: none;
  color: var(--on-void);
}
.app .view .library-card-head h3::first-letter {
  text-transform: uppercase;
}
.app .view .library-flag {
  flex: none;
  padding: 3px 8px;
  border: 1px solid #3a3d44;
  border-radius: 999px;
  font: 600 11px/1 var(--font-value);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--on-void-2);
}
.app .view .library-card-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
  margin: 0;
  align-content: start;
}
.app .view .library-card-facts dt {
  font: 500 11px/1.3 var(--font-value);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--on-void-2);
}
.app .view .library-card-facts dd {
  margin: 3px 0 0;
  font: 500 14px/1.3 var(--font-text);
  color: var(--on-void);
}
.app .view .library-codes {
  margin: 0;
  font: 500 11.5px/1.3 var(--font-value);
  color: var(--on-void-2);
}
.app .view .library-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--console-line);
}
.app.app .view .library-card-actions .btn.btn {
  height: 34px;
  min-height: 34px;
  padding: 0 12px;
  font-size: 13.5px;
}
.app.app .view .library-card-actions .btn.btn-danger {
  margin-left: auto;
}
@media (max-width: 768px) {
  .app.app .view .library-card-actions .btn.btn {
    height: 44px;
    min-height: 44px;
  }
}

/* Vazio dentro de tabela: uma linha de texto, sem caixa tracejada. */
.app .view table td:is(.empty, .empty-inline),
.app .view table td.empty:first-child {
  padding: 18px 14px;
  border: 0;
  background: none;
  text-align: center;
  font: 400 14px/1.4 var(--font-text);
  color: var(--on-void-2);
}
@media (min-width: 1101px) {
  .app .view .malha-filtros > .form-group:first-child {
    grid-column: auto;
  }
}
@media (max-width: 768px) {
  .app .view :is(.malha-modo .board-layout-btn, .dg-modo, .board-layout-btn) {
    height: 44px;
    min-height: 44px;
  }
}

/* ============================================================
   Centro e alinhamento (pedido do usuário, 16/10/2026):
   - caixa que só tem o cabeçalho não sobra vazia embaixo;
   - campo com rótulo dentro de cabeçalho não carrega margem;
   - avisos do relatório na largura toda, rentes aos blocos;
   - faixa "Carimbar em lote": texto centrado na altura dos campos.
   ============================================================ */
.app .view :is(.card, .daily-block):not(:has(> :not(.card-head, .daily-block-head))) {
  padding-bottom: 0;
}
.app .view :is(.card, .daily-block):not(:has(> :not(.card-head, .daily-block-head))) > :is(.card-head, .daily-block-head) {
  margin-bottom: 0;
  border-bottom: 0;
}
.app .view :is(.card-head, .daily-block-head) .form-group {
  margin: 0;
}
.app .view :is(.card-head, .daily-block-head) .form-group > label {
  margin-bottom: 6px;
}
/* O relatório: avisos e títulos de seção na largura toda da etapa. */
.app .view .daily-etapa > * {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}
.app .view .daily-etapa :is(.daily-standard-note, .daily-scope-note, .daily-nominal-aviso) {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--console-line);
  border-radius: var(--radius);
  background: var(--void-2);
  color: var(--on-void-2);
  font-size: 14px;
  line-height: 1.45;
}
.app .view .daily-section-title {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  border: 0;
}
.app .view .daily-section-title span {
  font: 500 11px/1.2 var(--font-value);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--on-void-2);
}
.app .view .daily-section-title strong {
  font: 600 18px/1.2 var(--font-label);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--on-void);
}

/* Faixa "Carimbar em lote" do histórico */
.app .view .daily-lote {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px 24px;
  margin: 0;
  padding: 14px 18px;
  border-top: 1px solid var(--console-line);
  border-bottom: 1px solid var(--console-line);
  background: var(--void-3);
}
.app .view .daily-lote p {
  display: flex;
  align-items: center;
  min-height: 40px;
  max-width: 70ch;
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--on-void-2);
}
.app .view .daily-lote p strong {
  color: var(--on-void);
}
.app .view .daily-history > .daily-lote {
  margin-inline: calc(-1 * var(--org-x, 20px));
  padding-inline: var(--org-x, 20px);
}
.app .view .daily-lote-campos {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}
.app .view .daily-lote-campos label {
  display: grid;
  gap: 6px;
  margin: 0;
  font: 500 11.5px/1.3 var(--font-value);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--on-void-2);
}
.app .view .daily-lote-campos .form-control {
  width: 170px;
}
@media (max-width: 900px) {
  .app .view .daily-lote {
    grid-template-columns: minmax(0, 1fr);
  }
  .app .view .daily-lote p {
    min-height: 0;
  }
  .app .view .daily-lote-campos {
    flex-wrap: wrap;
  }
}
@media (max-width: 768px) {
  .app .view .daily-lote-campos label {
    flex: 1 1 140px;
  }
  .app .view .daily-lote-campos .form-control {
    width: 100%;
  }
  .app .view .daily-lote-campos .btn {
    flex: 1 1 100%;
  }
}
@media (max-width: 768px) {
  .app .view .ficha-cabecalho-acoes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    width: 100%;
  }
  .app .view .ficha-cabecalho-acoes .btn {
    width: 100%;
  }
}

/* Linha de tabela: as células alinham pela linha de base do texto, inclusive
   a primeira coluna em fonte de máquina e o rótulo dos botões. Centralizar a
   caixa da célula não bastava: a fonte de máquina tem outra altura de letra e
   a data ficava mais alta que o resto da linha. */
.app .view table td,
.app .view .hoje-tabela td {
  vertical-align: baseline;
}
.app .view table td:first-child {
  font-size: 14px;
  line-height: 1.4;
}