/* Fonte do sistema: Roboto, como no Senior (pedido do responsável, 07/10/2026).
   O AdminLTE pede "Source Sans 3", mas ela nunca foi carregada — o texto caía
   na fonte do sistema operacional. A Roboto vem do _head.php (Fontsource). */
:root {
  /* Item ativo dos menus (lateral e barra inferior do celular): o verde da
     barra de cima, um tom mais escuro para ler no fundo branco. */
  --plataforma-ativo: #1f9e76;
  --bs-font-sans-serif: "Roboto Variable", Roboto, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
}

/* Aba ativa (Catálogo de serviços/Encarregados/Empresas e os outros lugares
   que usam esse mesmo padrão de abas) — fundo azul cheio, texto branco, em
   vez do branco-com-texto-escuro padrão do Bootstrap. Mesmo azul já usado
   pra destacar o item ativo da barra lateral e da barra inferior. */
.abas-rolaveis .nav-link.active {
  background-color: var(--bs-primary);
  color: #fff;
  border-color: var(--bs-primary);
}

/* Badge "Ativo" (text-bg-success padrão do Bootstrap) em qualquer tela da
   Plataforma — mesmo verde vívido já usado no selo "Validada" da
   Programação Semanal, em vez do verde mais apagado do Bootstrap. */
.badge.text-bg-success {
  background-color: #22c55e !important;
}

/* Navbar superior: verde-água (cor escolhida pelo responsável em 06/10/2026;
   antes era roxo). A mesma cor está no theme-color do _head.php e no
   manifesto do app (ManifestController). */
.navbar-principal {
  background: #3bc69c;
  /* 4 px mais alta que o padrão do AdminLTE (pedido do responsável, 07/10/2026). */
  padding-block: calc(.5rem + 2px);
}
/* ☰ e seta de voltar em branco cheio, como no modelo (o tema escuro do
   navbar deixava translúcidos). */
.navbar-principal .nav-link {
  color: #fff;
}
.navbar-principal .nav-link .bi-list {
  font-size: 1.35rem;
}
/* Seletor de obra na barra de cima (_navbar.php), no lugar da antiga busca
   de módulos: caixa branca, comprida e retangular, como no modelo do Senior.
   O navbar usa data-bs-theme="dark", então as cores daqui são fixas. */
.navbar-principal .navbar-obra {
  width: 495px;
  max-width: 42vw;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 0.25rem;
  color: #495057;
  font-size: .8125rem;
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
.navbar-principal .navbar-obra:focus {
  border-color: rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.45);
}
.navbar-principal .navbar-obra:disabled {
  background-color: #fff;
  opacity: 1;
}
/* Lista das obras, no modelo: canto reto, borda fina, a obra marcada e a
   que está sob o mouse em cinza escuro com letra branca. */
.navbar-obra-lista {
  width: 100%;
  margin-top: 0 !important;
  padding: 0;
  border: 1px solid #ced4da;
  border-radius: 0;
  font-size: .8125rem;
}
.navbar-obra-lista .dropdown-item,
.navbar-obra-lista .dropdown-item-text {
  padding: .3rem .6rem;
  color: #495057;
}
.navbar-obra-lista .dropdown-item.active,
.navbar-obra-lista .dropdown-item:hover,
.navbar-obra-lista .dropdown-item:focus {
  background-color: #6c757d;
  color: #fff;
}
@media (max-width: 575.98px) {
  .navbar-obra-form {
    flex: 1;
    min-width: 0;
  }
  .navbar-principal .navbar-obra {
    width: 100%;
    max-width: none;
  }
}

/* Cor extra pro círculo do ícone de um módulo no Dashboard — Bootstrap não
   tem uma classe bg-purple/text-purple pronta (só a variável --bs-purple),
   então completamos aqui pra poder usar 'purple' em sistemas.cor. */
.bg-purple { background-color: #6f42c1 !important; }
.text-purple { color: #6f42c1 !important; }
.text-bg-purple { background-color: #6f42c1 !important; color: #fff !important; }

/* O ícone de fundo do small-box (AdminLTE) é um preto translúcido fixo —
   some de vista em fundo escuro (text-bg-dark). Usa branco translúcido só
   nesse caso. */
.small-box.text-bg-dark .small-box-icon { color: rgba(255, 255, 255, .2); }

/* Sidebar branca (pedido do responsável em 06/10/2026; antes era escura):
   tema claro do AdminLTE com fundo branco de verdade — o bg-body-secondary
   do tema claro seria cinza. */
.sidebar-claro {
  background-color: #fff;
  border: 0;
  box-shadow: none;
}
/* Sem nenhuma linha divisória (pedido do responsável, no estilo da lateral
   do sistema Senior): o AdminLTE põe borda embaixo do logo. */
.sidebar-claro .sidebar-brand {
  border-bottom: 0;
  height: auto;
  padding-block: .50rem .7rem;
}
/* Logo da FGR inteira no topo da lateral (como a da Senior); com a lateral
   recolhida (só ícones) aparece a marca compacta, telhado + "FGR". As duas imagens
   (logo-sidebar*.png) vieram do responsável em 07/10/2026, em preto. */
.sidebar-claro .brand-link {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding-inline: .75rem;
}
.sidebar-logo {
  height: 68px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
.sidebar-logo-simbolo {
  display: none;
  /* Telhado + "FGR" (sem o "Incorporações"): ocupa a largura do menu
     recolhido, com uma pequena margem dos lados. */
  width: calc(var(--recolhido-largura, 4.6rem) - .75rem);
  height: auto;
}
.sidebar-mini.sidebar-collapse .app-sidebar:not(:hover) .sidebar-logo {
  display: none;
}
/* Recolhida, a faixa da logo volta à altura padrão do AdminLTE (pedido do
   responsável: o símbolo pequeno, como era antes de a logo aberta crescer). */
.sidebar-mini.sidebar-collapse .app-sidebar:not(:hover) .sidebar-brand {
  height: 3.5rem;
  padding-block: .8125rem;
}
.sidebar-mini.sidebar-collapse .app-sidebar:not(:hover) .sidebar-logo-simbolo {
  display: block;
}

/* Menu lateral compacto, no estilo da lateral do sistema Senior (pedido do
   responsável, 07/10/2026): texto e ícones menores em cinza-azulado, menos
   espaço entre itens, e o item ativo em verde e negrito, sem bloco de fundo.
   As cores vão pelas variáveis do próprio AdminLTE, para não brigar com a
   especificidade das regras dele. */
.sidebar-claro {
  --prog-lateral-texto: #5b6578;
  --prog-lateral-ativo: var(--plataforma-ativo);
  --lte-sidebar-color: var(--prog-lateral-texto);
  --lte-sidebar-hover-color: var(--prog-lateral-ativo);
  --lte-sidebar-hover-bg: transparent;
  --lte-sidebar-menu-active-bg: transparent;
  --lte-sidebar-menu-active-color: var(--prog-lateral-ativo);
  --lte-sidebar-submenu-color: var(--prog-lateral-texto);
  --lte-sidebar-submenu-hover-color: var(--prog-lateral-ativo);
  --lte-sidebar-submenu-hover-bg: transparent;
  --lte-sidebar-submenu-active-color: var(--prog-lateral-ativo);
  --lte-sidebar-submenu-active-bg: transparent;
}
.sidebar-claro .sidebar-menu .nav-link {
  font-size: .875rem;
  font-weight: 470;
  padding-block: .45rem;
  color: var(--prog-lateral-texto);
  background-color: transparent;
}
.sidebar-claro .sidebar-menu .nav-link:hover,
.sidebar-claro .sidebar-menu .nav-link:focus-visible {
  color: var(--prog-lateral-ativo);
  background-color: transparent;
}
.sidebar-claro .sidebar-menu .nav-icon {
  font-size: .95rem;
}
/* Ícone desenhado em SVG (a casa de "Meus sistemas", _icone_casa.php): mesmo
   tamanho e cor dos ícones de fonte, que ele herda pelo font-size/currentColor. */
.icone-svg {
  width: 1em;
  height: 1em;
}
.sidebar-claro .sidebar-menu .nav-link.active,
.sidebar-claro .sidebar-menu > .nav-item.menu-open > .nav-link {
  color: var(--prog-lateral-ativo) !important;
  background-color: transparent !important;
  font-weight: 600;
}
/* Ícones em imagem (ex: Programação Semanal): são claros (feitos para o fundo
   escuro antigo); no branco viram o cinza-azulado do texto e, no item ativo,
   o verde — por filtro, como na barra inferior do celular. */
.nav-icon-imagem {
  width: .95rem;
  height: .95rem;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(38%) sepia(13%) saturate(718%) hue-rotate(182deg) brightness(93%) contrast(88%);
}
.sidebar-menu .nav-link.active .nav-icon-imagem,
.sidebar-menu .nav-item.menu-open > .nav-link .nav-icon-imagem,
.bottom-nav-item.active img.bottom-nav-icone {
  filter: brightness(0) saturate(100%) invert(46%) sepia(63%) saturate(519%) hue-rotate(115deg) brightness(92%) contrast(92%);
}
/* Menu recolhido (só ícones), sem o mouse em cima: faixa estreita, ícones
   centralizados nela. Para ajustar, mexa só nas duas variáveis:
   --recolhido-largura (largura da faixa) e --recolhido-icone (tamanho dos
   ícones). Padrão do tema: 4.6rem de largura. */
.sidebar-mini.sidebar-collapse .app-sidebar {
  --recolhido-largura: 4.6rem;
  --recolhido-icone: 1.25rem;
  min-width: var(--recolhido-largura);
  max-width: var(--recolhido-largura);
}
.sidebar-mini.sidebar-collapse .app-sidebar:not(:hover) .sidebar-wrapper,
.sidebar-mini.sidebar-collapse .app-sidebar:not(:hover) .sidebar-brand,
.sidebar-mini.sidebar-collapse .app-sidebar:not(:hover) .brand-link,
.sidebar-mini.sidebar-collapse .app-sidebar:not(:hover) .sidebar-menu .nav-link {
  padding-inline: 0;
}
.sidebar-mini.sidebar-collapse .app-sidebar:not(:hover) .sidebar-menu .nav-link {
  /* O tema fixa o item em 3.6rem e deixa o texto escondido ocupando 8 px
     ao lado do ícone, o que o empurrava para a esquerda. */
  width: 100%;
  justify-content: center;
}
.sidebar-mini.sidebar-collapse .app-sidebar:not(:hover) .sidebar-menu .nav-link p {
  padding-left: 0;
}
.sidebar-mini.sidebar-collapse .app-sidebar:not(:hover) .sidebar-menu .nav-icon {
  font-size: var(--recolhido-icone);
}
.sidebar-mini.sidebar-collapse .app-sidebar:not(:hover) .nav-icon-imagem {
  width: var(--recolhido-icone);
  height: var(--recolhido-icone);
}


/* Submenu: recuado e um pouco menor, como "Dashboards / Planejamento" no modelo. */
.sidebar-claro .sidebar-menu .nav-treeview {
  padding: 0 0 .25rem 1.25rem;
}
.sidebar-claro .sidebar-menu .nav-treeview > .nav-item > .nav-link {
  font-size: .8125rem;
  padding-block: .35rem;
}
.sidebar-claro .sidebar-menu .nav-treeview .nav-icon {
  font-size: .8rem;
}

/* Colapsado (sem hover): o submenu some — só o ícone do item pai aparece
   (pedido do responsável, 07/10/2026; antes ficava o ícone do 1º subitem
   empilhado embaixo, que aparecia como um círculo solto). */
.sidebar-mini.sidebar-collapse .app-sidebar:not(:hover) .sidebar-menu .nav-treeview {
  display: none !important;
}

/* Barra de navegação inferior (mobile) — substitui a barra lateral abaixo
   do breakpoint "lg" (mesmo ponto de corte de `sidebar-expand-lg`), igual
   ao padrão de app de celular pedido pelo responsável. Acima de "lg" ela
   nem aparece: a barra lateral de sempre continua valendo no desktop. */
@media (max-width: 991.98px) {
  .app-sidebar {
    display: none !important;
  }
  body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }
}

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  background: #fff;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: stretch;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.bottom-nav-item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0.5rem 0.25rem;
  color: #8a8a8a;
  text-decoration: none;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border: none;
  background: none;
  min-width: 0;
}
.bottom-nav-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.bottom-nav-item .bottom-nav-icone {
  font-size: 1.35rem;
  line-height: 1;
}
.bottom-nav-item img.bottom-nav-icone {
  width: 1.35rem;
  height: 1.35rem;
  object-fit: contain;
  /* Os ícones de imagem do menu são brancos (pensados pro fundo escuro da
     barra lateral) — aqui o fundo é claro, então escurece com um filtro
     em vez de precisar de uma segunda versão de cada arquivo. */
  filter: brightness(0) saturate(100%) opacity(0.55);
}
.bottom-nav-item.active {
  color: var(--plataforma-ativo);
}

/* ---------- Tabela "de planilha" (módulo Suprimentos) ----------
   Seções com até 43 colunas: a tabela rola nas duas direções dentro do
   próprio quadro, com o cabeçalho fixo — a página nunca rola para o lado,
   nem no celular. Virar cartão (padrão tabela-cartao-mobile) empilharia
   43 campos por linha, pior que rolar. */
.tabela-planilha {
  max-height: 70vh;
  overflow: auto;
}
.tabela-planilha table {
  white-space: nowrap;
  font-size: .8125rem;
}
.tabela-planilha thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bs-body-bg);
  box-shadow: inset 0 -1px 0 var(--bs-border-color);
}
.tabela-planilha thead th a {
  color: inherit;
  text-decoration: none;
}
.tabela-planilha td.text-end {
  font-variant-numeric: tabular-nums;
}

/* Painel do pedido: cada material é um <details> — o resumo (somas das
   parcelas) sempre visível, as parcelas e o planejamento ao abrir. */
.sup-numero {
  font-variant-numeric: tabular-nums;
}
.sup-material > summary {
  list-style: none;
  cursor: pointer;
}
.sup-material > summary::-webkit-details-marker {
  display: none;
}
.sup-material > summary:hover {
  background: var(--bs-tertiary-bg);
}
.sup-material[open] > summary,
.sup-material:target {
  box-shadow: inset 3px 0 0 var(--bs-primary);
}
.sup-material-numeros {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1rem;
  row-gap: .125rem;
  font-variant-numeric: tabular-nums;
}
.sup-material .tabela-planilha {
  max-height: 50vh;
}

/* Macro serviço / Serviço / Código com folga entre as opções; semanas em
   campos estreitos; opções de marcar do rodapé menores. */
.prog-filtros-tipos {
  column-gap: 2.5rem;
  row-gap: .5rem;
}
@media (min-width: 768px) {
  .prog-semana:has(.prog-filtros-semana) {
    width: 13rem;
  }
}
.prog-check-pequeno {
  font-size: .8125rem;
  min-height: 0;
}
.prog-check-pequeno .form-check-input {
  width: .875em;
  height: .875em;
  margin-top: .3em;
}

/* Formulário de nova linha / edição da Programação Semanal: cards dos
   serviços, caixas dos dias e campos com canto reto, como o card de
   filtros (pedido do responsável). */
.prog-form-linha,
.prog-form-linha .card,
.prog-form-linha .rounded,
.prog-form-linha .form-control,
.prog-form-linha .form-select,
.prog-form-linha .dropdown-menu {
  border-radius: 0 !important;
}

/* Quadro de pacotes (Kanban) da tela Semana — _kanban.php. Colunas com a
   cor da etapa no topo e o card do Acompanhamento (modelo do Prevision). */
/* O cabeçalho inteiro da coluna fica na cor cheia da etapa, com texto
   branco nas três (pedidos do responsável — antes era só um risco em cima). */
.prog-kanban-coluna {
  display: flex;
  flex-direction: column;
  background: #ededed; /* a faixa cinza do Acompanhamento, onde o card branco aparece */
  border: 1px solid var(--bs-border-color);
  border-radius: .5rem;
  overflow: hidden; /* o cabeçalho colorido acompanha o canto arredondado */
  --prog-kanban-fundo: var(--bs-secondary);
}
.prog-kanban-pendente {
  --prog-kanban-fundo: var(--bs-warning);
}
.prog-kanban-validada {
  --prog-kanban-fundo: var(--bs-success);
}
.prog-kanban-cabecalho {
  color: #fff;
  padding: .5rem .75rem;
  background: var(--prog-kanban-fundo);
  border-bottom: 1px solid var(--bs-border-color);
}
.prog-kanban-cards {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: .5rem;
  flex: 1;
}
/* Rolagem própria só no desktop (colunas lado a lado). No celular as colunas
   ficam uma embaixo da outra e crescem com a página — rolagem dentro de
   rolagem escondia o serviço aberto para lançar execução. */
@media (min-width: 992px) {
  .prog-kanban-cards {
    max-height: 60vh;
    overflow-y: auto;
  }
}
.prog-kanban-coluna.pode-soltar {
  outline: 2px dashed var(--bs-border-color);
  outline-offset: -4px;
}
.prog-kanban-coluna.sobre {
  outline-color: var(--bs-primary);
  background: var(--bs-primary-bg-subtle);
}
/* Card do pacote: o mesmo do Acompanhamento (.acomp-card, mais abaixo);
   aqui só o que é do quadro da Semana — arrastar, a barra de etapa embaixo e
   os serviços (que abrem ao clicar no card). */
.prog-pacote[draggable="true"] {
  cursor: grab;
}
.prog-pacote.arrastando {
  opacity: .5;
}
.prog-pacote-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: .375rem;
  margin-top: .55rem;
  padding-block: .4rem .1rem;
  border-top: 1px solid #eeeeee;
}
.prog-pacote-acoes .btn {
  --bs-btn-padding-y: .1rem;
  --bs-btn-padding-x: .5rem;
  --bs-btn-font-size: .7rem;
  border-radius: 2px;
}
.prog-pacote-trava {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  margin-right: auto;
  font-size: .66rem;
  color: #616161;
}
.prog-pacote-acompanhar,
.prog-pacote-adicionar {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .7rem;
  font-weight: 500;
  color: #3f51b5;
  text-decoration: none;
}
.prog-pacote-acompanhar:hover,
.prog-pacote-adicionar:hover {
  text-decoration: underline;
}
.prog-pacote-adicionar {
  margin-top: .5rem;
}

/* Serviço dentro do card: os validados mostram o EXEC% (a execução se lança
   no Acompanhamento); os outros mostram o lápis de editar. */
.prog-servico {
  padding: .4rem .5rem;
  background: #f5f5f5;
  border-radius: 2px;
}
.prog-servico-linha {
  display: flex;
  align-items: center;
  gap: .375rem;
}
.prog-servico-linha .badge {
  font-size: .62rem;
}
.prog-servico-nome {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: .72rem;
  font-weight: 500;
}
.prog-servico-codigo {
  font-weight: 700;
}
.prog-servico-editar,
.prog-servico-editar:visited {
  color: #616161;
}
.prog-servico-editar:hover {
  color: #3f51b5;
}
.prog-servico-grupo {
  display: block;
  font-size: .64rem;
  color: #757575;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prog-servico-progresso {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .25rem;
}
.prog-servico-barra {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: #e0e0e0;
  overflow: hidden;
}
.prog-servico-barra > span {
  display: block;
  height: 100%;
  background: var(--plataforma-ativo);
}
.prog-servico-quantidade {
  font-size: .64rem;
  color: #616161;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Calendário por semana (prog-semanal-calendario.js): a linha inteira da
   semana acende; domingo e dias de outro mês ficam apagados. */
.prog-semana-botao {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prog-calendario {
  min-width: 16rem;
  top: 100%;
  left: 0;
}
.prog-calendario.dropdown-menu-end {
  left: auto;
  right: 0;
}
.prog-cal-grade {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px 0;
}
.prog-cal-cab {
  text-align: center;
  font-size: .75rem;
  font-weight: 600;
  color: var(--bs-secondary-color);
  padding-block: .125rem;
}
.prog-cal-semana {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border: 0;
  background: transparent;
  color: inherit;
  padding: .25rem 0;
  font-size: .8125rem;
  font-variant-numeric: tabular-nums;
}
.prog-cal-semana span {
  text-align: center;
}
.prog-cal-semana .fora,
.prog-cal-semana .domingo {
  color: var(--bs-tertiary-color);
}
.prog-cal-semana:hover,
.prog-cal-semana:focus-visible {
  background: var(--bs-secondary-bg);
  outline: 0;
}
.prog-cal-semana.hoje {
  box-shadow: inset 0 0 0 1px var(--bs-border-color);
}
.prog-cal-semana.ativa {
  background: var(--bs-secondary);
  color: #fff;
}
.prog-cal-semana.ativa .fora,
.prog-cal-semana.ativa .domingo {
  color: rgba(255, 255, 255, .7);
}

/* Faixa "Semana de 28/09 a 03/10/2026" entre as linhas de um período. */
.prog-faixa-semana,
.prog-faixa-semana > td {
  background: var(--bs-secondary-bg) !important;
  color: var(--bs-emphasis-color);
  font-weight: 700;
  font-size: .875rem;
}
div.prog-faixa-semana {
  padding: .375rem .75rem;
  margin: .75rem 0 .5rem;
  border-left: 3px solid var(--bs-secondary);
}
.prog-faixa-semana > td {
  padding: .4rem .75rem !important;
  border-left: 3px solid var(--bs-secondary);
  white-space: normal !important;
  max-width: none !important;
}
.campo-multi {
  position: relative;
  cursor: text;
  min-height: calc(1.5em + .5rem + 2px);
  padding-block: .1875rem;
}
.campo-multi-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  align-items: center;
}
.campo-multi-chip {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  max-width: 100%;
  padding: .0625rem .375rem;
  border-radius: var(--bs-border-radius-sm);
  background: var(--bs-primary-bg-subtle);
  color: var(--bs-primary-text-emphasis);
  font-size: .8125rem;
  overflow-wrap: anywhere;
}
.campo-multi-chip .btn-close {
  width: .5em;
  height: .5em;
  flex-shrink: 0;
}
.campo-multi-busca {
  flex: 1 1 6rem;
  min-width: 6rem;
  border: 0;
  outline: 0;
  background: transparent;
  color: inherit;
  font-size: inherit;
}
.campo-multi-lista {
  width: 100%;
  max-height: 16rem;
  overflow-y: auto;
  top: 100%;
  left: 0;
}

/* Acompanhamento de Entregas por OC: cada OC é um <details>; o <summary> é a
   linha (grade de colunas no desktop, empilhada com rótulos no celular) e o
   botão "Materiais" abre os materiais e a linha do tempo embaixo dela. */
.sup-oc-cabecalho,
.sup-oc-linha {
  grid-template-columns: 5.5rem minmax(10rem, 1.6fr) 5.5rem 5.5rem 6rem 7.5rem 6.5rem 5.5rem minmax(9rem, 1fr) 8.5rem;
  column-gap: .75rem;
  align-items: center;
}
.sup-oc-linha {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1rem;
  list-style: none;
  cursor: pointer;
  font-size: .875rem;
}
.sup-oc-linha::-webkit-details-marker {
  display: none;
}
.sup-oc-linha:hover {
  background: var(--bs-tertiary-bg);
}
.sup-oc[open] > .sup-oc-linha {
  box-shadow: inset 3px 0 0 var(--bs-primary);
}
.sup-oc[open] .sup-oc-botao .bi-chevron-down {
  display: inline-block;
  transform: rotate(180deg);
}
.sup-rotulo {
  display: block;
  font-size: .75rem;
  color: var(--bs-secondary-color);
}
.sup-progresso {
  height: .25rem;
  margin-top: .125rem;
}
/* Celular: OC, fornecedor, situação e botão ocupam a linha toda; datas e
   valores lado a lado, cada um com seu rótulo. */
.sup-oc-linha > :nth-child(1),
.sup-oc-linha > :nth-child(2),
.sup-oc-linha > :nth-child(9),
.sup-oc-linha > .sup-oc-botao {
  flex: 1 1 100%;
}
@media (min-width: 992px) {
  .sup-oc-linha {
    display: grid;
  }
  .sup-rotulo {
    display: none;
  }
}
.sup-materiais {
  max-height: 60vh;
}
.sup-materiais .sup-material-nome {
  white-space: normal;
  min-width: 16rem;
}
.sup-materiais tfoot td {
  position: sticky;
  bottom: 0;
  background: var(--bs-body-bg);
  box-shadow: inset 0 1px 0 var(--bs-border-color);
}

/* Linha do tempo vertical da entrega (marcos do UAU + fases da equipe). */
.sup-tempo {
  list-style: none;
  padding-left: 0;
  margin-bottom: .75rem;
}
.sup-tempo > li {
  position: relative;
  padding: 0 0 .875rem 2.25rem;
  font-size: .875rem;
}
.sup-tempo > li::before {
  content: '';
  position: absolute;
  left: .75rem;
  top: 1.625rem;
  bottom: .125rem;
  border-left: 2px solid var(--bs-border-color);
}
.sup-tempo > li:last-child {
  padding-bottom: 0;
}
.sup-tempo > li:last-child::before {
  display: none;
}
.sup-tempo-icone {
  position: absolute;
  left: 0;
  top: 0;
  width: 1.625rem;
  height: 1.625rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8125rem;
}
.sup-tempo-icone.text-bg-light {
  border: 1px dashed var(--bs-border-color);
}
.sup-registrar > summary {
  list-style: none;
}
.sup-registrar > summary::-webkit-details-marker {
  display: none;
}

/* ---------- Grupo de Serviços (Programação Semanal → Cadastros) ----------
   No modelo da tela enviada pelo responsável: cada grupo é uma faixa azul
   (código - descrição, nº de serviços e de subgrupos, ações em ícone branco);
   o subgrupo é a mesma faixa num azul mais claro, recuada. */
.prog-grupos {
  --prog-grupo-azul: #1d4ed8;
  --prog-grupo-azul-sub: #3b6fe0;
  /* Ações com largura fixa (6 botões) para os números alinharem com o cabeçalho. */
  --prog-grupo-colunas: 1.25rem minmax(0, 1fr) 7rem 7rem 14.5rem;
  /* Altura das faixas azuis (grupo); a do subgrupo é um pouco menor. */
  --prog-grupo-altura: 2.2rem;
  /* Tamanho do texto das faixas (nome e números). */
  --prog-grupo-texto: .78rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.prog-grupo-cabecalho,
.prog-grupo-faixa {
  display: grid;
  grid-template-columns: var(--prog-grupo-colunas);
  align-items: center;
  gap: .75rem;
  padding: .55rem .9rem;
}
.prog-grupo-cabecalho {
  /* Faixa fina e um pouco mais estreita que as dos grupos, como no modelo. */
  /* Margem tirada do recuo interno, para as colunas seguirem alinhadas com as faixas. */
  padding: .2rem .15rem .2rem .7rem;
  margin-inline: .2rem .75rem;
  background: var(--bs-body-bg);
  color: var(--bs-primary);
  font-size: .8125rem;
  font-weight: 500;
  border-radius: .2rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
}
.prog-grupo-faixa {
  /* Azul de canto reto; na ponta esquerda, a tira branca arredondada do modelo. */
  background: var(--prog-grupo-azul);
  color: #fff;
  min-height: var(--prog-grupo-altura);
  padding-block: .2rem;
  border-left: 4px solid #fff;
  border-radius: .3rem 0 0 .3rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}
.prog-grupo-sub .prog-grupo-faixa {
  background: var(--prog-grupo-azul-sub);
  min-height: calc(var(--prog-grupo-altura) - .4rem);
}
.prog-grupo-nome {
  font-weight: 700;
  font-size: var(--prog-grupo-texto);
  text-transform: uppercase;
  min-width: 0;
  overflow-wrap: anywhere;
}
.prog-grupo-cabecalho .prog-grupo-nome {
  font-weight: 500;
  text-transform: none;
}
.prog-grupo-num {
  text-align: center;
  font-weight: 700;
  font-size: var(--prog-grupo-texto);
  font-variant-numeric: tabular-nums;
}
.prog-grupo-cabecalho .prog-grupo-num {
  font-weight: 500;
}
.prog-grupo-marcar {
  margin: 0;
}
.prog-grupo-acoes {
  display: flex;
  align-items: center;
  gap: .15rem;
}
.prog-grupo-acao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  /* Nunca mais alto que a faixa, senão é o botão que define a altura dela. */
  height: min(2.25rem, calc(var(--prog-grupo-altura) - .4rem));
  padding: 0;
  border: 0;
  border-radius: .25rem;
  background: transparent;
  color: #fff;
  font-size: 1.05rem;
  text-decoration: none;
}
/* Traço engrossado para ficarem cheios como os ícones do modelo (o Bootstrap
   Icons tem traço fino); a lixeira já é cheia e perderia as listras. */
.prog-grupo-acao i {
  -webkit-text-stroke: 1.2px currentColor;
}
.prog-grupo-acao .bi-trash3-fill {
  -webkit-text-stroke: 0;
}
.prog-grupo-acao:hover,
.prog-grupo-acao:focus-visible {
  background: rgba(255, 255, 255, .18);
  color: #fff;
}
.prog-grupo-acao:disabled {
  opacity: .35;
}
.prog-grupo-abrir i {
  transition: transform .2s;
}
.prog-grupo-abrir:not(.collapsed) i {
  transform: rotate(180deg);
}
.prog-grupo-corpo {
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-top: 0;
  border-radius: 0 0 .25rem .25rem;
  padding: 1rem;
}
.prog-grupo-subgrupos {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-bottom: 1rem;
}
.prog-grupo-secao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .5rem;
  color: var(--bs-secondary-color);
  font-size: .875rem;
}
.prog-grupo-painel {
  background: var(--bs-tertiary-bg);
  border-radius: .25rem;
  padding: .75rem;
  margin: 0 0 1rem;
}
.prog-grupo-servicos .list-group-item {
  font-size: .8125rem;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
}
.prog-grupo-botao {
  min-width: 4.5rem;
  border-radius: .25rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}
/* Celular: nome na linha toda; números e ações na linha de baixo. */
@media (max-width: 767.98px) {
  .prog-grupos {
    --prog-grupo-colunas: 1.25rem minmax(0, 1fr) 3.5rem 3.5rem;
  }
  .prog-grupo-faixa {
    padding-block: .45rem .1rem;
  }
  .prog-grupo-faixa .prog-grupo-acoes {
    grid-column: 1 / -1;
    justify-content: space-between;
  }
  .prog-grupo-cabecalho .prog-grupo-acoes {
    display: none;
  }
  .prog-grupo-corpo {
    padding: .75rem;
  }
}
/* Janela "Adicionar Serviços", no modelo: fundo cinza translúcido (pintado
   pela própria janela, sem o fundo do Bootstrap), campo de busca com sombra
   e os resultados como lista de marcar. */
/* Janelas de confirmar e perguntar (plataforma.js, novaJanela): o próprio fundo,
   meio transparente sobre o sistema, no lugar do fundo automático do Bootstrap. */
.janela-sobreposta {
  background: rgba(33, 37, 41, .45);
}
.janela-cadastro {
  background: rgba(33, 37, 41, .4);
}
.janela-cadastro .modal-content {
  border: 0;
  border-radius: .25rem;
}
.janela-cadastro .modal-title {
  font-size: 1.15rem;
  font-weight: 400;
}
.janela-cadastro .btn-close {
  opacity: .9;
}
.janela-cadastro .modal-body {
  padding: 1rem 1rem 0;
}
.janela-cadastro .modal-footer {
  border-top: 0;
  padding: .25rem 1rem 1rem;
}
/* A linha do modelo fica dentro da janela, com margem dos lados. */
.janela-divisor {
  margin: 1.5rem 0 1rem;
  border-color: var(--bs-border-color);
  opacity: 1;
}
.janela-salvar {
  background: #1976d2;
  color: #fff;
  border: 0;
  border-radius: .15rem;
  padding: .55rem 1rem;
  font-size: .875rem;
  font-weight: 500;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .3);
}
.janela-salvar:hover,
.janela-salvar:focus-visible {
  background: #1565c0;
  color: #fff;
}
.prog-busca-servico {
  /* No modelo o campo termina um pouco antes da linha divisória. */
  width: calc(100% - 1.5rem);
  height: 2.6rem;
  border: 0;
  border-radius: .1rem;
  font-size: .875rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}
.prog-busca-servico:focus {
  box-shadow: 0 1px 5px rgba(0, 0, 0, .35);
}
.prog-busca-resultados {
  margin-top: .75rem;
}
.prog-busca-item {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .45rem .25rem;
  border-bottom: 1px solid var(--bs-border-color-translucent);
  font-size: .8125rem;
  cursor: pointer;
}
.prog-busca-item:hover {
  background: var(--bs-tertiary-bg);
}
.prog-busca-item .form-check-input {
  flex-shrink: 0;
  margin-top: .15rem;
}
.prog-busca-item small {
  display: block;
  color: var(--bs-secondary-color);
}
/* Janela do grupo (Novo / Editar / Novo subgrupo): campos e rótulos do modelo. */
.janela-cadastro .janela-campos {
  padding: 1rem 1rem 2rem;
}
.janela-campos .form-label {
  margin-bottom: .35rem;
  color: var(--bs-secondary-color);
  font-size: .875rem;
  font-weight: 500;
}
.janela-campos .form-control {
  border-radius: .15rem;
}
.janela-cadastro .modal-footer.janela-rodape {
  border-top: 1px solid var(--bs-border-color);
  padding: 1rem;
}
.janela-limpar {
  background: #6c757d;
  color: #fff;
  border: 0;
  border-radius: .15rem;
  padding: .55rem 1rem;
  font-size: .875rem;
  font-weight: 500;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .3);
}
.janela-limpar:hover,
.janela-limpar:focus-visible {
  background: #5c636a;
  color: #fff;
}
/* Grupo inativo: faixa apagada (os serviços dele não aparecem para programar). */
.prog-grupo-inativo > .prog-grupo-faixa {
  opacity: .55;
}
/* Na janela, a caixa "Ativo" é azul como no modelo (o cinza é só do card de filtros). */
.janela-cadastro .janela-campos .form-check-input:checked {
  background-color: #1976d2;
  border-color: #1976d2;
}

/* Faixa de título da página (_cabecalho_pagina.php), no modelo do Senior:
   branca, nome da tela pequeno e a trilha embaixo, com a casa em azul. */
.app-main .app-content-header.pagina-cabecalho {
  background: var(--bs-body-bg);
  border-bottom: 1px solid var(--bs-border-color);
  padding: .7rem .5rem .6rem;
  margin-bottom: 1rem;
}
.pagina-cabecalho-titulo {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--bs-emphasis-color);
}
.app-main .app-content-header .pagina-cabecalho-trilha {
  line-height: 1.4;
  margin-top: .1rem;
  font-size: .8125rem;
  --bs-breadcrumb-divider: '›';
  --bs-breadcrumb-item-padding-x: .4rem;
}
.pagina-cabecalho-trilha .breadcrumb-item,
.app-main .app-content-header .pagina-cabecalho-trilha .breadcrumb-item a {
  color: var(--bs-secondary-color);
}
.app-main .app-content-header .pagina-cabecalho-trilha .breadcrumb-item:first-child a {
  color: #2196f3;
}
.pagina-cabecalho-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}
/* Tela inicial: sem trilha, a casa verde vai ao lado do título. */
.pagina-cabecalho-titulo-inicio {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding-block: .35rem;
}
.pagina-cabecalho-titulo-inicio .bi {
  color: var(--plataforma-ativo);
}
/* Uma obra realçada por vez: com o mouse sobre a lista, a marcada só fica
   cinza se for ela a que está sob o mouse. */
.navbar-obra-lista:hover .dropdown-item.active:not(:hover) {
  background-color: transparent;
  color: #495057;
}

/* ---------- Lista de dados (tabela-dados.js), no modelo do Senior ----------
   Administração → Obras: "Exibir N", "Pesquisar", cabeçalho cinza com setas
   de ordenar, linhas finas e o rodapé com o total e as páginas. */
.tabela-dados-card {
  border: 0;
  border-radius: .25rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}
.tabela-dados-controles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .5rem;
  font-size: .875rem;
  font-weight: 500;
  color: var(--bs-secondary-color);
}
.tabela-dados-controles label {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: 0;
}
.tabela-dados-exibir .form-select {
  width: auto;
}
.tabela-dados-pesquisar .form-control {
  width: 12rem;
  border-radius: .15rem;
}
.tabela-dados {
  font-size: .875rem;
  border-top: 1px solid var(--bs-emphasis-color);
  border-bottom: 1px solid var(--bs-emphasis-color);
}
.tabela-dados thead th {
  position: relative;
  background: var(--bs-tertiary-bg);
  color: var(--bs-emphasis-color);
  font-weight: 600;
  vertical-align: bottom;
  white-space: nowrap;
  padding-right: 1.4rem;
}
.tabela-dados thead th[data-ordenar] {
  cursor: pointer;
}
/* Setas ▲▼ do modelo: as duas apagadas; a da ordem escolhida, escura. */
.tabela-dados thead th[data-ordenar]::before,
.tabela-dados thead th[data-ordenar]::after {
  position: absolute;
  right: .5rem;
  font-size: .55rem;
  color: var(--bs-border-color);
}
.tabela-dados thead th[data-ordenar]::before {
  content: '▲';
  bottom: 1.05rem;
}
.tabela-dados thead th[data-ordenar]::after {
  content: '▼';
  bottom: .45rem;
}
.tabela-dados thead th.ordem-sobe::before,
.tabela-dados thead th.ordem-desce::after {
  color: var(--bs-emphasis-color);
}
.tabela-dados td {
  color: var(--bs-secondary-color);
  vertical-align: top;
}
.tabela-dados tbody tr:hover td {
  background: var(--bs-tertiary-bg);
}
.tabela-dados-acoes {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}
.tabela-dados-acoes a,
.tabela-dados-acoes button {
  padding: 0 .3rem;
  border: 0;
  background: none;
  color: var(--bs-emphasis-color);
  font-size: 1rem;
}
.tabela-dados-rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: 1.5rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--bs-secondary-color);
}

/* ---------- Formulário de cadastro em página própria (_formulario_topo.php):
   "Dados da Obra", Empreiteiro e Contrato do Diário… ---------- */
.cadastro-form {
  border: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}
.cadastro-form .form-label {
  margin-bottom: .3rem;
  font-size: .875rem;
  font-weight: 500;
  color: var(--bs-emphasis-color);
}
.cadastro-form .form-control,
.cadastro-form .form-select {
  border-radius: .15rem;
}
.cadastro-abas .nav-link.active {
  color: var(--bs-secondary-color);
  background: transparent;
}
.cadastro-secao {
  margin: 2rem 0 .75rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--bs-border-color);
  font-size: .9375rem;
  font-weight: 600;
}
.obra-logo-linha {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.obra-logo-nome {
  flex: 1;
  min-width: 0;
  background: var(--bs-tertiary-bg);
}
.obra-logo-botao {
  width: 2.6rem;
  height: 2.4rem;
  padding: 0;
  border: 0;
  border-radius: .15rem;
  background: #1976d2;
  color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .3);
}
.obra-logo-botao:hover,
.obra-logo-botao:focus-visible {
  background: #1565c0;
  color: #fff;
}
.obra-logo-previa {
  display: block;
  max-height: 3.5rem;
  max-width: 12rem;
  margin-top: .5rem;
  object-fit: contain;
}
.cadastro-rodape {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  background: transparent;
  border-top: 0;
  padding: 0 1rem 1rem;
}
.obra-modulos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: .25rem 1rem;
}

/* Administração da Obra: setor escolhido na própria linha da lista de pessoas */
.admobra-setor {
  width: auto;
  min-width: 9rem;
}

/* Papéis de uma pessoa: um bloco por módulo, lado a lado no computador */
.admobra-papeis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1rem;
}

.admobra-papel {
  border: 1px solid var(--bs-border-color);
  border-radius: .375rem;
  padding: 1rem;
}

/* ---------- Card que abre e fecha (_cabecalho_recolhivel.php) e card de filtros ----------
   Cabeçalho fino com título, ícone opcional e o sinal −/+ (filtros da
   Programação e dos MTRs, nova linha da Programação). No card de filtros
   (.card-filtros), pedido do responsável: opção marcada em cinza (não azul) e
   campos com canto reto. */
.recolhivel-cabecalho {
  border: 0;
  background: var(--bs-body-bg);
  padding-block: .75rem;
}
.recolhivel-cabecalho:not(.collapsed) {
  border-bottom: var(--bs-border-width) solid var(--bs-border-color);
}
.recolhivel-titulo {
  letter-spacing: .04em;
}
.recolhivel-cabecalho .recolhivel-fechado,
.recolhivel-cabecalho.collapsed .recolhivel-aberto {
  display: none;
}
.recolhivel-cabecalho.collapsed .recolhivel-fechado {
  display: inline-block;
}
.card-filtros .form-check-input:checked {
  background-color: var(--bs-secondary);
  border-color: var(--bs-secondary);
}
.card-filtros .form-check-input:focus {
  border-color: var(--bs-secondary);
  box-shadow: 0 0 0 .25rem rgba(var(--bs-secondary-rgb), .25);
}
.card-filtros .form-control,
.card-filtros .form-select,
.card-filtros .campo-multi-chip,
.card-filtros .dropdown-menu {
  border-radius: 0;
}

/* ---------- Painel lateral de filtros (_painel_filtros_*.php, painel-filtros.js) ----------
   Filtros à direita da lista, que filtram sozinhos a cada escolha (modelo: Restrições do
   Prevision). Usado pelo Acompanhamento da Programação. */
.painel-botao-filtros {
  position: relative;
  border: 0;
  background: none;
  padding: .1rem .25rem;
  font-size: 1.6rem;
  line-height: 1;
  color: #3f51b5;
}

.painel-botao-filtros-contagem {
  position: absolute;
  top: -.2rem;
  right: -.35rem;
  min-width: 1.1rem;
  padding: 0 .3rem;
  border-radius: 1rem;
  background: #3f51b5;
  color: #fff;
  font-size: .62rem;
  line-height: 1.1rem;
}

.painel-tela {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.painel-principal {
  flex: 1;
  min-width: 0;
}

.painel-filtros {
  flex: 0 0 310px;
  align-self: flex-start;
  background: #fff;
  box-shadow: -1px 0 0 #e0e0e0;
  padding: .85rem 1rem 1rem;
  font-size: .85rem;
  color: #424242;
}

.painel-tela.filtros-fechados .painel-filtros {
  display: none;
}

.painel-tela:not(.filtros-fechados) .painel-botao-filtros {
  visibility: hidden;
}

.painel-filtros-titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .9rem;
}

.painel-filtros-titulo-fechar {
  border: 0;
  background: none;
  padding: 0;
  color: inherit;
  font-weight: 500;
}

.painel-filtros-titulo-fechar .bi {
  font-size: .75rem;
}

.painel-filtros-limpar {
  display: inline-flex;
  align-items: flex-end;
  font-size: 1.15rem;
  line-height: 1;
  color: #3f51b5;
  text-decoration: none;
}

.painel-filtros-limpar .bi-x {
  margin-left: -.35rem;
  font-size: .9rem;
}

.painel-filtros-limpar.inativo {
  color: #bdbdbd;
}

/* Busca no modelo: só uma linha embaixo, com a lupa. */
.painel-busca {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1.15rem;
  border-bottom: 1px solid #bdbdbd;
  color: #757575;
}

.painel-busca:focus-within {
  border-bottom-color: #3f51b5;
}

.painel-busca input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  padding: .45rem 0;
  background: none;
  font-size: .88rem;
}

/* Campo "contornado" do modelo: o título fica embutido na borda de cima. */
.painel-campo {
  position: relative;
  margin-bottom: 1rem;
}

.painel-campo > label {
  position: absolute;
  top: -.45rem;
  left: .55rem;
  z-index: 3;
  padding: 0 .25rem;
  background: #fff;
  font-size: .66rem;
  line-height: 1;
  color: #757575;
}

/* De e Até do período, lado a lado. */
.painel-campos-lado {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
}

.painel-campo:focus-within > label {
  color: #3f51b5;
}

.painel-campo .campo-multi,
.painel-campo .form-select,
.painel-campo .form-control,
.painel-campo .prog-semana-botao {
  min-height: 2.6rem;
  border-color: #c4c4c4;
  border-radius: 4px;
  font-size: .83rem;
  color: #424242;
}

.painel-campo .campo-multi {
  display: flex;
  align-items: center;
  padding-top: .45rem;
  padding-bottom: .35rem;
}

.painel-campo .campo-multi-busca::placeholder {
  color: #9e9e9e;
}

.painel-filtros-secao {
  margin: .4rem 0 .8rem;
  font-weight: 500;
  font-size: .9rem;
}

.painel-fechar-filtros {
  display: block;
  margin: 1.1rem auto 0;
  border: 0;
  background: none;
  padding: .35rem .25rem;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #3f51b5;
}

/* Celular: o painel vai para cima da lista. */
@media (max-width: 991.98px) {
  .painel-tela {
    flex-direction: column;
    align-items: stretch;
  }

  .painel-filtros {
    order: -1;
    width: 100%;
    flex-basis: auto;
    border: 1px solid var(--bs-border-color);
    border-radius: .375rem;
  }
}

/* ---------- Programação Semanal → Acompanhamento (modelo: Restrições do Prevision) ---------- */
.acomp-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .75rem;
}

.acomp-dia {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.acomp-dia a {
  color: #3f51b5;
  text-decoration: none;
}

.acomp-dia .bi {
  font-size: 1.05rem;
}

.acomp-dia-rotulo {
  min-width: 10.5rem;
  text-align: center;
  font-size: 1rem;
  font-weight: 500;
  color: #424242;
}

.acomp-dia-hoje {
  margin-left: .35rem;
  padding: .1rem .55rem;
  border: 1px solid #3f51b5;
  border-radius: 1rem;
  font-size: .75rem;
}

.acomp-domingo {
  margin: 0 0 .75rem;
  color: #757575;
}

.acomp-coluna-atrasados .acomp-coluna-cabecalho h2 {
  color: #c62828;
}

.acomp-coluna-atrasados .acomp-coluna-contagem {
  background: #ffcdd2;
  color: #c62828;
}

.acomp-contadores {
  display: inline-flex;
  align-items: center;
  border: 1px solid #dcdcdc;
  border-radius: 2px;
  background: #fff;
}

.acomp-contadores > span {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .65rem;
  font-size: .85rem;
  color: #424242;
}

.acomp-contadores > span + span {
  border-left: 1px solid #dcdcdc;
}

.acomp-quadro {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: .5rem;
  overflow-x: auto;
}

/* Colunas no modelo: faixa cinza até o fim da tela, título grande e leve, contador numa caixinha. */
.acomp-coluna {
  flex: 1 0 240px;
  max-width: 290px;
  min-height: calc(100vh - 15rem);
  background: #ededed;
  padding: .5rem .65rem .75rem;
}

.acomp-coluna-cabecalho {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .75rem;
}

.acomp-coluna-cabecalho h2 {
  flex: 1;
  margin: 0;
  font-size: 1.45rem;
  font-weight: 400;
  color: #424242;
  white-space: nowrap;
}

.acomp-coluna-contagem {
  min-width: 2.4rem;
  padding: .15rem .45rem;
  background: #dcdcdc;
  color: #3f51b5;
  font-size: .8rem;
  text-align: right;
}

.acomp-coluna-recolher {
  border: 0;
  background: none;
  padding: 0;
  color: #616161;
  font-size: .85rem;
}

.acomp-coluna.recolhida {
  flex: 0 0 3rem;
}

.acomp-coluna.recolhida .acomp-coluna-cabecalho {
  flex-direction: column;
}

.acomp-coluna.recolhida h2 {
  writing-mode: vertical-rl;
  font-size: 1.1rem;
}

.acomp-coluna.recolhida .acomp-coluna-contagem {
  min-width: 0;
}

.acomp-coluna.recolhida .acomp-cards {
  display: none;
}

.acomp-cards {
  display: flex;
  flex-direction: column;
  gap: .65rem;
  max-height: calc(100vh - 19rem);
  overflow-y: auto;
  padding: 0 2px 2px;
}

.acomp-vazio {
  margin: 0;
  padding: 1rem 0;
  text-align: center;
  font-size: .8rem;
  color: #9e9e9e;
}

/* Card no modelo: branco, sombra de "papel", título em maiúsculas, data no canto. */
.acomp-card {
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 2px 1px -1px rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 1px 3px 0 rgba(0, 0, 0, .12);
  padding: .75rem .8rem .35rem;
  color: #424242;
  transition: box-shadow .15s ease;
}

.acomp-card:hover {
  box-shadow: 0 3px 3px -2px rgba(0, 0, 0, .2), 0 3px 4px 0 rgba(0, 0, 0, .14), 0 1px 8px 0 rgba(0, 0, 0, .12);
}

.acomp-card summary {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  list-style: none;
  cursor: pointer;
}

.acomp-card summary::-webkit-details-marker {
  display: none;
}

.acomp-card summary:focus-visible {
  outline: 2px solid #3f51b5;
  outline-offset: 2px;
}

.acomp-card-topo {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .75rem;
}

.acomp-card-nome {
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #424242;
}

.acomp-card-prazo {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  flex-shrink: 0;
  font-size: .68rem;
  color: #3f51b5;
  white-space: nowrap;
}

.acomp-card-prazo .bi {
  font-size: .85rem;
  color: #616161;
}

.acomp-card-atrasado .acomp-card-prazo,
.acomp-card-atrasado .acomp-card-prazo .bi {
  color: #e53935;
}

.acomp-card-obra {
  font-size: .66rem;
  color: #616161;
}

.acomp-etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .7rem;
}

.acomp-etiqueta {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  min-width: 0;
  font-size: .62rem;
  text-transform: uppercase;
  color: #616161;
}

.acomp-etiqueta .bi {
  flex-shrink: 0;
  font-size: .8rem;
  color: var(--cor-etiqueta, #757575);
  transform: scaleX(-1);
}

.acomp-etiqueta > span {
  max-width: 6.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acomp-card-rodape {
  display: flex;
  align-items: center;
  gap: .9rem;
}

.acomp-indicador {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .66rem;
  color: #3f51b5;
}

.acomp-indicador .bi {
  font-size: .9rem;
  color: #616161;
}

.acomp-avatar {
  display: inline-grid;
  place-items: center;
  width: 1.45rem;
  height: 1.45rem;
  margin-left: auto;
  border-radius: 50%;
  background: #e8eaf6;
  color: #3f51b5;
  font-size: .58rem;
  font-weight: 700;
}

.acomp-servicos {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin: .6rem 0 0;
  padding: .55rem 0 0;
  border-top: 1px solid #eeeeee;
  list-style: none;
}

.acomp-servico-topo {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .5rem;
  font-size: .72rem;
  font-weight: 500;
}

.acomp-servico-topo .badge {
  font-size: .62rem;
}

.acomp-servico-meta {
  margin-top: .15rem;
  font-size: .68rem;
  color: #616161;
}

/* Lançamento do dia: feito, motivo (se abaixo da meta) e salvar. */
.acomp-execucao {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: .3rem;
  margin-top: .35rem;
}

.acomp-execucao .form-select,
.acomp-execucao .form-control {
  font-size: .72rem;
}

.acomp-execucao .btn {
  grid-column: 1 / -1;
  padding: .2rem;
  font-size: .72rem;
}

.acomp-card-setas {
  display: flex;
  justify-content: space-between;
  margin-top: .35rem;
}

.acomp-card-setas button,
.acomp-seta-inativa {
  border: 0;
  background: none;
  padding: .15rem .2rem;
  font-size: 1rem;
  line-height: 1;
  color: #424242;
}

.acomp-card-setas button:hover {
  color: #3f51b5;
}

.acomp-seta-inativa {
  color: #c7c7c7;
}

/* Celular: colunas em pilha. */
@media (max-width: 991.98px) {
  .acomp-quadro {
    flex-direction: column;
    width: 100%;
    overflow-x: visible;
  }

  .acomp-coluna,
  .acomp-coluna.recolhida {
    flex-basis: auto;
    max-width: none;
    min-height: 0;
  }

  .acomp-coluna.recolhida h2 {
    writing-mode: horizontal-tb;
  }

  .acomp-coluna.recolhida .acomp-coluna-cabecalho {
    flex-direction: row;
  }

  .acomp-cards {
    max-height: none;
  }
}

/* ---------- Módulo MTR (mtr/*.php): painel do mês, resumo do MTR, fechamento ---------- */

/* Barra do mês (_mes.php): o mês, a etapa e os botões da tela à direita */
.mtr-mes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .75rem;
  margin-bottom: 1rem;
}
.mtr-mes .form-select {
  width: auto;
  font-weight: 600;
}
.mtr-mes-botoes {
  display: flex;
  gap: .5rem;
  margin-left: auto;
}

/* Aviso com a próxima ação (_proxima_acao.php): ícone, texto e o botão à direita */
.mtr-proxima {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .75rem;
}
.mtr-proxima > .bi {
  font-size: 1.15rem;
}
.mtr-proxima > span {
  flex: 1 1 14rem;
}

/* Documento do MTR como imagem (mtr-pdf.js): na tela do MTR (detalhe.php), as páginas numa folha
   cinza, com os dados lidos recolhidos; no Bipar, a miniatura de cada MTR salvo, lado a lado */
.mtr-pdf {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  max-width: 56rem;
  margin: 0 auto;
  padding: .75rem;
  background: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color);
}
.mtr-pdf-pagina {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
}
.mtr-dados-lidos > summary {
  color: var(--bs-secondary-color);
  font-size: .875rem;
}
/* "Salvos agora" do Bipar: as miniaturas numa faixa que rola de lado quando não cabem */
.mtr-fila {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: .5rem;
}
.mtr-fila > li {
  flex: 0 0 13rem;
}
.mtr-fila a {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  align-items: center;
  text-decoration: none;
}
.mtr-pdf-miniatura {
  width: 100%;
  min-height: 17rem;
  padding: .4rem;
  justify-content: center;
  align-items: center;
}
.mtr-fila a:hover .mtr-pdf-miniatura {
  border-color: var(--bs-primary);
}

/* Relatórios (relatorios.php, mtr-relatorios.js): os números do resumo num quadro claro, ícone em
   cima (cinza e fino, todos iguais; a cor fica só no valor), valor e rótulo em maiúsculas embaixo
   (modelo: andamento do Prevision) */
.mtr-relatorio-numero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  height: 100%;
  padding: 1.4rem .75rem 1.2rem;
  background: var(--bs-body-bg);
  border-radius: .25rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
  text-align: center;
}
.mtr-relatorio-numero .bi {
  margin-bottom: .2rem;
  font-size: 1.4rem;
  color: #5f6b7a;
}
.mtr-relatorio-numero strong {
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}
.mtr-relatorio-numero strong + strong {
  font-size: 1rem;
}
.mtr-relatorio-numero span {
  font-size: .75rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
}
.mtr-cor-petroleo {
  color: #17a2b8;
}
.mtr-cor-laranja {
  color: #f0a63c;
}
.mtr-relatorio-anel {
  min-height: 230px;
}

/* Quadros de números da Medição: o small-box da Plataforma, mais baixo */
.mtr-indicadores {
  margin-bottom: 1rem;
}
.mtr-indicadores .small-box {
  height: 100%;
  margin-bottom: 0;
}
.mtr-indicadores .small-box h3 {
  font-size: 1.75rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mtr-indicadores .small-box h3 small {
  font-size: 1rem;
  font-weight: 500;
  opacity: .85;
}
.mtr-indicadores .small-box p {
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Etiquetas de situação: conferência do MTR e resultado da comparação */
.mtr-situacao {
  --mtr-cor-fundo: var(--bs-secondary-bg-subtle);
  --mtr-cor-texto: var(--bs-secondary-text-emphasis);
  display: inline-block;
  padding: .15rem .55rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  background: var(--mtr-cor-fundo);
  color: var(--mtr-cor-texto);
}
.mtr-situacao-conferido,
.mtr-situacao-bate,
.mtr-situacao-calculada {
  --mtr-cor-fundo: var(--bs-success-bg-subtle);
  --mtr-cor-texto: var(--bs-success-text-emphasis);
}
.mtr-situacao-divergente,
.mtr-situacao-so_empresa,
.mtr-situacao-so_fgr {
  --mtr-cor-fundo: var(--bs-danger-bg-subtle);
  --mtr-cor-texto: var(--bs-danger-text-emphasis);
}
.mtr-situacao-quantidade_diferente,
.mtr-situacao-pendente_obra,
.mtr-situacao-pendente_renove {
  --mtr-cor-fundo: var(--bs-warning-bg-subtle);
  --mtr-cor-texto: var(--bs-warning-text-emphasis);
}
.mtr-situacao-divergencia {
  --mtr-cor-fundo: var(--bs-info-bg-subtle);
  --mtr-cor-texto: var(--bs-info-text-emphasis);
}
.mtr-situacao-pendente {
  --mtr-cor-fundo: var(--bs-tertiary-bg);
  --mtr-cor-texto: var(--bs-secondary-color);
}
/* Na comparação com a medição da Renove: cor cheia, canto quadrado e texto branco (pedido do responsável) */
.mtr-situacao-forte {
  --mtr-cor-texto: #fff;
  border-radius: .2rem;
}
.mtr-situacao-forte.mtr-situacao-bate {
  --mtr-cor-fundo: var(--bs-success);
}
.mtr-situacao-forte.mtr-situacao-so_empresa,
.mtr-situacao-forte.mtr-situacao-so_fgr {
  --mtr-cor-fundo: var(--bs-danger);
}
.mtr-situacao-forte.mtr-situacao-quantidade_diferente {
  --mtr-cor-fundo: #d9480f;
}
.mtr-situacao-forte.mtr-situacao-pendente {
  --mtr-cor-fundo: var(--bs-secondary);
}

/* Lista do mês */
.mtr-link-numero {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.mtr-residuo {
  display: flex;
  align-items: baseline;
  gap: .4rem;
  max-width: 28rem;
}
.mtr-classe {
  flex: none;
  padding: 0 .4rem;
  border: 1px solid var(--bs-border-color);
  border-radius: .25rem;
  font-size: .72rem;
  font-weight: 600;
  white-space: nowrap;
}
/* Medição (mtr/medicao.php): o resíduo do MTR embaixo do material e as ações de cada linha */
.mtr-col-residuo {
  max-width: 22rem;
}
.mtr-medicao-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .75rem;
  min-width: 14rem;
}
.mtr-medicao-acoes form {
  margin: 0;
}
.mtr-medicao-acoes .form-select {
  width: auto;
}
/* Validação da Renove (mtr/validacao.php): linhas tipo + peso e os totais à vista */
.mtr-separacao {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.mtr-separacao-linha {
  display: grid;
  grid-template-columns: 1fr 7rem auto;
  gap: .5rem;
}
.mtr-validacao-totais {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
  margin: 1rem 0;
  padding: .6rem .75rem;
  background: var(--bs-tertiary-bg);
  border-radius: .375rem;
}
.mtr-validacao-totais dt {
  font-size: .72rem;
  font-weight: 500;
  color: var(--bs-secondary-color);
}
.mtr-validacao-totais dd {
  margin: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* Bags, caçambas e custos fixos da Medição: formulário em linha e a lista dos lançamentos */
.mtr-form-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-bottom: .75rem;
}
.mtr-form-linha .form-control {
  flex: 1 1 8rem;
  width: auto;
  min-width: 0;
}
/* Bags, Caçambas e Custos fixos da Medição (medicao.php): um bloco embaixo do outro, na largura
   toda; título e como funciona à esquerda, total à direita; lançamento numa faixa clara; cada item
   numa linha com o valor e a lixeira no fim */
.mtr-bloco {
  margin-top: 1rem;
}
.mtr-bloco-topo {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: .75rem;
}
.mtr-bloco-ajuda {
  margin: 0;
  font-size: .8125rem;
  color: var(--bs-secondary-color);
}
.mtr-bloco-total {
  font-size: 1.15rem;
  font-weight: 500;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.mtr-bloco-form {
  margin-bottom: .75rem;
  padding: .75rem;
  background: var(--bs-tertiary-bg);
  border-radius: .25rem;
}
.mtr-bloco-form.mtr-form-linha,
.mtr-bloco-form .mtr-form-linha {
  margin-bottom: 0;
}
.mtr-bloco-form input[type="date"],
.mtr-bloco-form input[type="number"],
.mtr-bloco-form .mtr-campo-valor {
  flex: 0 1 11rem;
}
.mtr-bloco-lista {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mtr-bloco-lista li {
  padding: .6rem 0;
  border-top: 1px solid var(--bs-border-color);
}
.mtr-bloco-lista li .mtr-form-linha {
  margin: .4rem 0 0;
}
.mtr-bloco-item {
  display: flex;
  align-items: baseline;
  gap: 1rem;
}
.mtr-bloco-item > span:first-child {
  flex: 1;
  min-width: 0;
}
.mtr-bloco-valor {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.mtr-bloco-vazio {
  margin: 0;
  font-size: .875rem;
  color: var(--bs-secondary-color);
}
/* Medição no fechamento (_medicao_resumo.php): as categorias e o saldo em destaque */
.mtr-medicao-totais {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: .6rem 1rem;
  margin: 0;
}
.mtr-medicao-totais dt {
  font-size: .72rem;
  font-weight: 500;
  color: var(--bs-secondary-color);
}
.mtr-medicao-totais dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.mtr-medicao-saldo dd {
  font-size: 1.15rem;
  font-weight: 700;
}
.mtr-titulo-card a {
  letter-spacing: 0;
  text-transform: none;
}
.mtr-col-destinador {
  min-width: 14rem;
}
.mtr-comentarios-qtd {
  margin-left: .35rem;
  font-size: .8rem;
  color: var(--bs-secondary-color);
}

/* Resumo de um MTR (_resumo.php): número, resíduo e quantidade em destaque */
.mtr-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1rem;
}
.mtr-rotulo {
  display: block;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
}
.mtr-numero {
  font-size: 1.35rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.mtr-resumo-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .75rem;
}
.mtr-resumo-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .75rem 1rem;
  margin-bottom: .75rem;
  background: var(--bs-tertiary-bg);
  border-radius: .375rem;
}
.mtr-resumo-qtd {
  flex: none;
  min-width: 5.5rem;
  text-align: center;
}
.mtr-resumo-qtd strong {
  display: block;
  font-size: 1.6rem;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.mtr-resumo-qtd span {
  font-size: .75rem;
  color: var(--bs-secondary-color);
}
.mtr-resumo-residuo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .2rem;
  min-width: 0;
  font-size: .9rem;
}
.mtr-resumo-tecnologia {
  font-size: .8rem;
  color: var(--bs-secondary-color);
}
.mtr-resumo-dados {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: .6rem 1.25rem;
  margin: 0 0 .75rem;
}
.mtr-resumo-dados dt {
  font-size: .72rem;
  font-weight: 500;
  color: var(--bs-secondary-color);
}
.mtr-resumo-dados dd {
  margin: 0;
  font-size: .9rem;
  overflow-wrap: anywhere;
}
.mtr-completo,
.mtr-mudar {
  border-top: 1px solid var(--bs-border-color);
  padding-top: .6rem;
}
.mtr-completo > summary,
.mtr-mudar > summary {
  font-size: .85rem;
  font-weight: 500;
  color: var(--bs-link-color);
  cursor: pointer;
}
.mtr-completo[open] > summary {
  margin-bottom: .75rem;
}
.mtr-mudar[open] > summary {
  margin-bottom: .5rem;
}

/* O MTR completo (_dados.php), recolhido embaixo do resumo */
.mtr-cabecalho {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 2rem;
  margin-bottom: .5rem;
}
.mtr-itens td,
.mtr-diferencas td,
.mtr-tabela-comparacao td {
  font-size: .85rem;
  vertical-align: top;
}
.mtr-tabela-comparacao th {
  font-size: .75rem;
  font-weight: 600;
  color: var(--bs-secondary-color);
}
.mtr-empresas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
}
.mtr-empresa {
  padding: .75rem 1rem;
  border: 1px solid var(--bs-border-color);
  border-radius: .25rem;
  font-size: .85rem;
}
.mtr-empresa h3 {
  margin: 0 0 .35rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
}
.mtr-empresa p {
  margin: 0 0 .15rem;
}
.mtr-empresa-nome {
  font-weight: 600;
}
.mtr-codigo {
  margin-left: .25rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
.mtr-pessoas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: .5rem 1.5rem;
  margin: 0;
}
.mtr-pessoas dt {
  font-size: .75rem;
  font-weight: 500;
  color: var(--bs-secondary-color);
}
.mtr-pessoas dd {
  margin: 0;
}

/* Coluna lateral (conferência, comentários, ação da vez): cards empilhados */
.mtr-lateral {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.mtr-lateral > .card,
.mtr-lateral > .alert {
  margin: 0;
}
.mtr-titulo-card {
  margin: 0 0 .75rem;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
}
.mtr-bipe .form-control-lg {
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}
.mtr-comentarios li + li {
  margin-top: .5rem;
}
.mtr-comentarios {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}
.mtr-comentarios li {
  padding: .5rem .75rem;
  background: var(--bs-tertiary-bg);
  border-radius: .25rem;
  font-size: .875rem;
}
.mtr-comentario-topo {
  font-size: .8rem;
}

/* Etapas do fechamento em linha (_etapas.php); no celular, duas por linha */
.mtr-etapas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.mtr-etapa {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  padding-top: .6rem;
  border-top: 3px solid var(--bs-border-color);
  color: var(--bs-secondary-color);
  font-size: .875rem;
}
.mtr-etapa > .bi {
  font-size: 1.15rem;
  line-height: 1.2;
}
.mtr-etapa strong {
  display: block;
  line-height: 1.3;
}
.mtr-etapa span {
  font-size: .78rem;
}
.mtr-etapa-feita {
  border-top-color: var(--bs-success);
  color: var(--bs-body-color);
}
.mtr-etapa-feita > .bi {
  color: var(--bs-success);
}
.mtr-etapa-atual {
  border-top-color: var(--bs-primary);
  color: var(--bs-body-color);
}
.mtr-etapa-atual > .bi {
  color: var(--bs-primary);
}
@media (max-width: 767.98px) {
  .mtr-etapas {
    grid-template-columns: 1fr 1fr;
  }
}

/* Opções em caixa (modelo de lista do Senior; a comparação do MTR): o título em
   cima e as opções lado a lado numa caixa branca de sombra leve */
.caixa-opcoes {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.caixa-opcoes-titulo {
  float: none;
  width: auto;
  margin: 0 0 .35rem;
  font-size: .875rem;
  font-weight: 500;
  color: var(--bs-emphasis-color);
}
.caixa-opcoes-corpo {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.75rem;
  padding: .7rem 1.25rem;
  background: var(--bs-body-bg);
  border-radius: .25rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
}
.caixa-opcoes-corpo .form-check {
  margin: 0;
  white-space: nowrap;
}

/* Lista no modelo novo do Senior (a comparação do MTR): cabeçalho cinza, linhas
   brancas com divisória fina, e a seta no fim que abre o detalhe da linha */
.lista-senior {
  margin: 0;
  font-size: .875rem;
}
.lista-senior thead th {
  padding: .85rem .75rem;
  background: var(--bs-tertiary-bg);
  border-bottom: 0;
  color: var(--bs-emphasis-color);
  font-weight: 500;
  white-space: nowrap;
}
.lista-senior td {
  padding: .8rem .75rem;
  border-bottom: 1px solid var(--bs-border-color-translucent);
  color: var(--bs-secondary-color);
  font-variant-numeric: tabular-nums;
  vertical-align: top;
}
.lista-senior tbody tr:hover > td {
  background: var(--bs-tertiary-bg);
}
.lista-senior-ordem {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-weight: inherit;
  white-space: nowrap;
}
.lista-senior-ordem i {
  margin-left: .2rem;
  font-size: .7rem;
  color: var(--bs-secondary-color);
}
.lista-senior thead th.lista-senior-ordenada,
.lista-senior-ordenada .lista-senior-ordem i {
  color: var(--bs-primary);
}
.lista-senior .dropdown-menu {
  font-size: .875rem;
}
.lista-senior-abrir {
  width: 1%;
  text-align: right;
}
.lista-senior-abrir .btn {
  padding: 0 .25rem;
  color: var(--bs-secondary-color);
}
.lista-senior-abrir .btn[aria-expanded="true"] i {
  display: inline-block;
  transform: rotate(180deg);
}
.lista-senior tr.lista-senior-detalhe > td,
.lista-senior tr.lista-senior-detalhe:hover > td {
  background: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
}

/* Caixa de assinatura do coordenador */
.mtr-assinatura {
  position: relative;
}
.mtr-assinatura canvas {
  display: block;
  width: 100%;
  height: 10rem;
  border: 1px dashed var(--bs-border-color);
  border-radius: .25rem;
  background: #fff;
  touch-action: none;
  cursor: crosshair;
}
.mtr-assinatura .btn-link {
  position: absolute;
  top: .25rem;
  right: .25rem;
}
.mtr-assinatura-mini {
  height: 2.5rem;
  vertical-align: middle;
  background: #fff;
}

/* Usuário na barra de topo: um ícone para todos, sem foto (sistema
   corporativo; ninguém envia imagem). */
.navbar-nav > .user-menu .icone-usuario {
  font-size: 1.5rem;
  line-height: 1;
  vertical-align: middle;
  margin-right: .4rem;
}
.navbar-nav > .user-menu .icone-usuario-grande {
  display: block;
  font-size: 4.5rem;
  line-height: 1;
}