/* ==========================================================================
   public/assets/css/app.css
   Mobile-first: estilo base pensado para celular, com breakpoint que
   expande o layout em telas maiores (tablet/desktop), nunca o contrário.
   ========================================================================== */

:root {
  --cor-primaria: #DC0000;
  --cor-primaria-escura: #B30000;
  --cor-perigo: #c62828;
  --cor-acao: #212529;
  --cor-acao-hover: #3A4046;
  --cor-sucesso: #28A745;
  --cor-aviso: #F57C00;
  --cor-info: #3491CE;
  --cor-texto: #1A1A1A;
  --cor-texto-suave: #5F6368;
  --cor-fundo: #F4F5F6;
  --cor-fundo-secundario: #E9ECEF;
  --cor-superficie: #FFFFFF;
  --cor-borda: #E0E2E6;

  --cor-topbar: #212529;
  --cor-topbar-texto: #E9ECEF;
  --cor-topbar-hover: #2C3136;

  --raio-borda: 8px;
  --raio-borda-grande: 14px;
  --raio-pilula: 999px;
  --sombra-card: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
  --sombra-elevada: 0 4px 12px rgba(0, 0, 0, 0.12);

  --altura-toque-minima: 48px; /* área mínima confortável para dedo */
  --espaco-1: 4px;
  --espaco-2: 8px;
  --espaco-3: 12px;
  --espaco-4: 16px;
  --espaco-5: 24px;
  --espaco-6: 32px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-color: var(--cor-fundo);
  color: var(--cor-texto);
  font-size: 16px;
  line-height: 1.45;
  -webkit-tap-highlight-color: transparent;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

a { color: var(--cor-primaria); text-decoration: none; }

.container {
  max-width: 480px;
  margin: 0 auto;
  padding: var(--espaco-4);
  width: 100%;
  box-sizing: border-box;
  flex: 1 0 auto;
}

/* Em tela maior, a aplicação ganha respiro lateral mas continua centrada
   e estreita: o uso real é majoritariamente no celular, então não vale
   forçar um layout de desktop largo que ninguém vai usar no dia a dia. */
@media (min-width: 768px) {
  .container {
    max-width: 640px;
    padding: var(--espaco-6);
  }
}

/* ---------- Topbar ---------- */
.topbar {
  background: var(--cor-topbar);
  color: var(--cor-topbar-texto);
  padding: var(--espaco-2) var(--espaco-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 200;
  gap: var(--espaco-3);
  flex-wrap: wrap;
}

.topbar__esquerda {
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
  min-width: 0;
  flex: 1;
}

.topbar__logo {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  flex-shrink: 0;
}

.topbar__logo img {
  height: 40px;
  max-width: 140px;
  width: auto;
  object-fit: contain;
  display: block;
}

/* Faixa de saudação: em telas estreitas, mostra só os badges
   (contador de acessos + semana), sem o texto completo de
   saudação/última visita, que não cabe ao lado do logo num
   celular. A partir de telas largas (tablet/desktop), o texto
   completo aparece também. */
.topbar__saudacao {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
}

.topbar__saudacao-texto {
  display: none;
  font-size: 0.8rem;
  color: var(--cor-topbar-texto);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar__badges {
  display: flex;
  gap: var(--espaco-1);
  flex-wrap: wrap;
}

.topbar__badges .status-badge {
  font-size: 0.7rem;
}

@media (min-width: 700px) {
  .topbar__saudacao-texto { display: block; }
}

.topbar__direita {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  flex-shrink: 0;
}

.topbar__usuario {
  font-size: 0.85rem;
  color: var(--cor-topbar-texto);
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
}

.topbar__avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,0.25);
}

/* Botão de idioma na topbar: só a bandeira do idioma atual, sem
   fundo/texto, abre a lista das 3 opções ao clicar. */
.menu-idioma__botao {
  background: transparent;
  border: none;
  padding: 4px;
  border-radius: var(--raio-borda);
  cursor: pointer;
  display: flex;
  align-items: center;
}

.menu-idioma__botao img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.3);
}

.menu-idioma__botao:active { opacity: 0.8; }

.menu-idioma__lista {
  padding: var(--espaco-2);
  min-width: auto;
}

.menu-idioma__lista .seletor-idioma { gap: var(--espaco-1); }

/* ---------- Menu de navegação (topbar) ---------- */
.menu-nav {
  position: relative;
}

.menu-nav__botao {
  background: var(--cor-topbar-hover);
  color: var(--cor-topbar-texto);
  border: none;
  border-radius: var(--raio-borda);
  padding: var(--espaco-2) var(--espaco-3);
  font-size: 0.85rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-1);
  cursor: pointer;
  min-height: 38px;
  white-space: nowrap;
}

.menu-nav__botao svg { flex-shrink: 0; }

.menu-nav__rotulo {
  display: none;
}

@media (min-width: 460px) {
  .menu-nav__rotulo { display: inline; }
}

.menu-nav__botao:active { opacity: 0.85; }

.menu-nav__botao--saida {
  padding: var(--espaco-2);
  background: transparent;
  color: var(--cor-topbar-texto);
  opacity: 0.75;
}

.menu-nav__botao--saida:active { opacity: 1; background: var(--cor-topbar-hover); }

.menu-nav__lista {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--cor-superficie);
  border-radius: var(--raio-borda);
  box-shadow: var(--sombra-elevada);
  min-width: 200px;
  max-width: calc(100vw - 2 * var(--espaco-4));
  padding: var(--espaco-2);
  display: none;
  z-index: 210;
  color: var(--cor-texto);
}

.menu-nav__lista.aberto { display: block; }

.menu-nav__lista a {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  padding: var(--espaco-3);
  border-radius: var(--raio-borda);
  color: var(--cor-texto);
  font-size: 0.92rem;
  min-height: var(--altura-toque-minima);
}

.menu-nav__lista a:active,
.menu-nav__lista a:hover {
  background: var(--cor-fundo);
}

/* ---------- Seletor de idioma (bandeiras) ---------- */
.seletor-idioma {
  display: flex;
  gap: 2px;
}

.seletor-idioma a {
  border: none;
  background: transparent;
  padding: 6px;
  border-radius: var(--raio-borda);
  cursor: pointer;
  min-width: 38px;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
  text-decoration: none;
}

.seletor-idioma a img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.25);
}

.seletor-idioma a.ativo {
  opacity: 1;
  background: var(--cor-topbar-hover);
}

.seletor-idioma a:active { transform: scale(0.92); }

/* Em contexto de fundo claro (tela de login, sem topbar escura), o
   fundo do item ativo precisa de um tom visível sobre branco. A
   classe "pagina-clara" é aplicada no <body> dessas telas. */
.pagina-clara .seletor-idioma a.ativo {
  background: var(--cor-fundo);
  box-shadow: inset 0 0 0 1px var(--cor-borda);
}

.pagina-clara .seletor-idioma a img {
  box-shadow: 0 0 0 1px var(--cor-borda);
}

/* ---------- Botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-2);
  min-height: var(--altura-toque-minima);
  padding: 0 var(--espaco-5);
  border: none;
  border-radius: var(--raio-borda);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.06s ease, opacity 0.15s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  width: 100%;
}

.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primario { background: var(--cor-topbar); color: #fff; }
.btn-primario:hover { background: var(--cor-acao-hover); }
.btn-primario:active { background: var(--cor-acao-hover); filter: brightness(0.88); }
.btn-perigo { background: var(--cor-perigo); color: #fff; }
.btn-info { background: var(--cor-info); color: #fff; }
.btn-sucesso { background: var(--cor-sucesso); color: #fff; }
.btn-secundario { background: var(--cor-superficie); color: var(--cor-texto); border: 1px solid var(--cor-borda); }
.btn-texto { background: transparent; border: none; color: var(--cor-primaria); width: auto; padding: var(--espaco-2); cursor: pointer; }
.btn-fechar-vermelho {
    background: #c62828;
    border: none;
    border-radius: 50%;
    color: #fff;
    width: 32px;
    height: 32px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.btn-fechar-vermelho:hover { background: #b71c1c; }

/* Botões pequenos de ação em pílula, usados nas listagens
   administrativas (Ver / Editar / Excluir), inspirados na
   referência visual fornecida. */
.btn-pilula {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 var(--espaco-4);
  border: none;
  border-radius: var(--raio-pilula);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  width: auto;
}

/* ---------- Botões de ação com ícone (editar/excluir/adicionar/
   inativar/reativar), usados em toda listagem administrativa e na
   lista de checks. Substituem os antigos links de texto simples.
   Paleta fixa: branco (texto), cinza escuro (ação neutra/criar/
   editar/reativar) e vermelho (excluir/inativar). ---------- */
.btn-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 var(--espaco-3);
  border: none;
  border-radius: var(--raio-borda);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  width: auto;
  color: #fff;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

.btn-icone svg { flex-shrink: 0; }

.btn-icone--cinza { background: var(--cor-acao); }
.btn-icone--cinza:active, .btn-icone--cinza:hover { background: var(--cor-acao-hover); }

.btn-icone--vermelho { background: var(--cor-perigo); }
.btn-icone--vermelho:active, .btn-icone--vermelho:hover { background: #b71c1c; }
.btn-icone--cinza-claro { background: #636870; color: #fff; }
.btn-icone--cinza-claro:active, .btn-icone--cinza-claro:hover { background: #4f545a; }

/* v1.0.50: sombra pulsante no botão de gerar PDF (Final PDF / Partial PDF),
   para chamar a atenção do usuário para essa ação. */
@keyframes pulsar-sombra {
  0%   { box-shadow: 0 0 0 0 rgba(55, 65, 81, 0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(55, 65, 81, 0); }
  100% { box-shadow: 0 0 0 0 rgba(55, 65, 81, 0); }
}
.btn-icone--pulsante {
  animation: pulsar-sombra 1.8s ease-out infinite;
}
.btn-icone--pulsante:hover,
.btn-icone--pulsante:active {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  .btn-icone--pulsante { animation: none; }
}

/* Variante compacta (só o ícone, sem rótulo de texto), usada onde o
   espaço é apertado (ex: dentro de um card de listagem em celular). */
.btn-icone--somente-icone {
  padding: 0;
  width: 38px;
}

/* v441a: par de botões de reordenação empilhado verticalmente */
.btn-ordem-par {
  display: inline-flex;
  flex-direction: column;
  border: 1px solid #4f545a;
  border-radius: var(--raio-borda);
  overflow: hidden;
}
.btn-ordem-par .btn-icone {
  min-height: 19px;
  height: 19px;
  width: 32px;
  border-radius: 0 !important;
  box-shadow: none;
}
.btn-ordem-par .btn-icone--cima {
  border-bottom: 1px solid rgba(255,255,255,0.18);
}

/* v442: controle de ordenação (ícone discreto) nas listagens de cadastro —
   alfabética A-Z/Z-A e por data de criação, sem ocupar espaço extra ao
   lado da busca/chips já existentes. */
.cad-ordenar-wrap { position: relative; flex-shrink: 0; }
.cad-ordenar-icone {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-borda);
  background: var(--cor-superficie);
  color: var(--cor-texto-suave);
  cursor: pointer;
  padding: 0;
}
.cad-ordenar-icone:hover { border-color: #9aa0a6; color: var(--cor-texto); }
.cad-ordenar-icone--aberto { border-color: #111; color: #111; }
.cad-ordenar-dot {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cor-primaria);
  border: 1.5px solid var(--cor-fundo);
}
.cad-ordenar-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 230px;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-borda);
  box-shadow: 0 10px 28px rgba(0,0,0,.16);
  padding: 6px;
  z-index: 30;
}
.cad-ordenar-grupo-label {
  padding: 7px 10px 4px;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--cor-texto-suave);
  text-transform: uppercase;
}
.cad-ordenar-opcao {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: .82rem;
  color: var(--cor-texto);
  text-decoration: none;
}
.cad-ordenar-opcao:hover { background: var(--cor-fundo); }
.cad-ordenar-opcao--sel { font-weight: 700; background: var(--cor-fundo); }
.cad-ordenar-opcao svg { flex-shrink: 0; }
.cad-ordenar-separador { height: 1px; background: var(--cor-borda); margin: 4px 2px; }

.btn-grande {
  min-height: 140px;
  font-size: 1.2rem;
  border-radius: var(--raio-borda-grande);
  flex-direction: column;
  gap: var(--espaco-3);
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.15s ease;
}

.btn-grande .icone {
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-grande .icone--branco { color: #fff; }
.btn-grande .icone--cinza { color: var(--cor-acao); }

/* Variante clara: usada em "Consultar Relatório" para diferenciar
   visualmente do botão de ação primária ("Criar Relatório"), sem
   ser branco puro (que deixaria um ícone claro invisível). */
.btn-grande--claro {
  background: var(--cor-fundo-secundario);
  color: var(--cor-acao);
  border: 1px solid var(--cor-borda);
}

@media (hover: hover) {
  .btn-grande--claro:hover { background: #DEE1E4; }
}

/* "Salta um pouco" ao passar o mouse, para chamar o clique
   (hover não existe em touch puro, mas funciona em desktop/tablet
   com mouse e não interfere no toque do celular). */
@media (hover: hover) {
  .btn-grande:hover {
    transform: translateY(-4px);
    box-shadow: var(--sombra-elevada);
  }
}

/* ---------- Home: dois botões grandes centralizados ---------- */
.home-acoes {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-4);
  margin-top: var(--espaco-6);
}

@media (min-width: 600px) {
  .home-acoes { flex-direction: row; }
}

/* ---------- Cards ---------- */
.card {
  background: var(--cor-superficie);
  border-radius: var(--raio-borda-grande);
  box-shadow: var(--sombra-card);
  padding: var(--espaco-4);
  margin-bottom: var(--espaco-3);
}

/* ---------- Formulários ---------- */
.campo { margin-bottom: var(--espaco-4); }

.campo label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: var(--espaco-2);
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  min-height: var(--altura-toque-minima);
  padding: var(--espaco-3);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-borda);
  font-size: 1rem;
  font-family: inherit;
  background: var(--cor-superficie);
}

.campo textarea { min-height: 100px; resize: vertical; }

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--cor-primaria);
  box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.15);
}

.erro-campo { color: var(--cor-perigo); font-size: 0.85rem; margin-top: var(--espaco-1); }

/* ---------- Toggle "ativar Status Antes/Depois" no modal do check — v1.0.70 ---------- */
.toggle-status {
  position: relative;
  display: inline-flex;
  width: 32px;
  height: 18px;
  flex-shrink: 0;
  cursor: pointer;
}
.toggle-status input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.toggle-status__trilho {
  position: absolute;
  inset: 0;
  background: #cbd5e1;
  border-radius: 18px;
  transition: background .15s;
}
.toggle-status__bola {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  transition: transform .15s;
  box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.toggle-status input:checked + .toggle-status__trilho {
  background: #2e7d32;
}
.toggle-status input:checked + .toggle-status__trilho .toggle-status__bola {
  transform: translateX(14px);
}
.toggle-status input:disabled + .toggle-status__trilho {
  opacity: .45;
  cursor: not-allowed;
}
.toggle-status input:disabled {
  cursor: not-allowed;
}
.toggle-status__label {
  font-size: 0.78rem;
  color: var(--cor-texto-suave, #6b7280);
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* ---------- Seletor visual de status (1 a 5) ---------- */
.seletor-status {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--espaco-2);
}

.status-opcao {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espaco-1);
  padding: var(--espaco-2);
  border-radius: var(--raio-borda);
  border: 2px solid transparent;
  cursor: pointer;
  background: var(--cor-fundo);
}

.status-opcao.selecionado { border-color: var(--cor-texto); }

.status-opcao__bolha {
  width: 26px;
  height: 26px;
  border-radius: 50%;
}

.status-opcao__rotulo {
  font-size: 0.7rem;
  text-align: center;
  color: var(--cor-texto-suave);
}

/* ---------- Resultado de melhoria (antes/depois) no modal do check ---------- */
.resultado-melhoria {
  display: flex;
  align-items: center;
  gap: var(--espaco-4);
  background: var(--cor-fundo);
  border-radius: var(--raio-borda);
  padding: var(--espaco-3) var(--espaco-4);
  margin-top: var(--espaco-3);
  flex-wrap: wrap;
}

.resultado-melhoria .resultado-melhoria__num {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  min-width: 62px;
}

.resultado-melhoria .resultado-melhoria__num.pos { color: var(--cor-sucesso); }
.resultado-melhoria .resultado-melhoria__num.zero { color: var(--cor-texto-suave); }
.resultado-melhoria .resultado-melhoria__num.neg { color: var(--cor-perigo); }

.resultado-melhoria .resultado-melhoria__fluxo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--cor-texto-suave);
  flex-wrap: wrap;
}

.resultado-melhoria .resultado-melhoria__fluxo .pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 11px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
}

.resultado-melhoria .resultado-melhoria__fluxo .bolha {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.resultado-melhoria .resultado-melhoria__seta {
  color: var(--cor-texto-suave);
  font-size: 1.1rem;
}

.resultado-melhoria .barra-melhoria {
  flex: 1;
  min-width: 140px;
  height: 8px;
  background: var(--cor-fundo-secundario);
  border-radius: 999px;
  overflow: hidden;
}

.resultado-melhoria .barra-melhoria__fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.25s ease;
}

.resultado-melhoria .barra-melhoria__fill.pos { background: linear-gradient(90deg, #F57C00, #7CB342); }
.resultado-melhoria .barra-melhoria__fill.zero { background: var(--cor-texto-suave); }
.resultado-melhoria .barra-melhoria__fill.neg { background: linear-gradient(90deg, #F57C00, var(--cor-perigo)); }

.resultado-melhoria--aviso {
  font-size: 0.85rem;
  color: var(--cor-texto-suave);
}

/* ---------- Escala de peso (cadastro de status) ---------- */
.escala-peso { position: relative; }

/* v446: a regra genérica ".campo input" (padding/border/background/
   min-height:48px, pensada para inputs de texto normais) estava vazando
   pra cima deste slider e do checkbox "peso não definido" abaixo dele,
   inflando os dois pra uma caixa de ~48px de altura — daí a barra grossa
   e o quadrado desalinhado reportados pelo usuário. As regras abaixo
   zeram explicitamente esses valores herdados nos dois controles. */
.escala-peso input[type="range"].input-peso-gradiente {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  min-height: 0;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 999px;
  background: linear-gradient(90deg, #D32F2F, #F57C00 25%, #FBC02D 50%, #7CB342 75%, #388E3C);
  outline: none;
  cursor: pointer;
}

.escala-peso input[type="range"].input-peso-gradiente::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid var(--cor-marcador, var(--cor-acao));
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}

.escala-peso input[type="range"].input-peso-gradiente::-moz-range-track {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, #D32F2F, #F57C00 25%, #FBC02D 50%, #7CB342 75%, #388E3C);
}

.escala-peso input[type="range"].input-peso-gradiente::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid var(--cor-marcador, var(--cor-acao));
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}

.escala-peso input[type="range"].input-peso-gradiente:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Checkbox "peso não definido" — mesmo motivo acima: tira do controle o
   padding/border/background/min-height de 48px herdados de ".campo input",
   que faziam o quadrado ficar grande e o texto ao lado parecer desalinhado. */
.campo input[type="checkbox"]#peso_qualidade_vazio {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 0;
  padding: 0;
  margin: 0;
  border: 1px solid var(--cor-borda);
  border-radius: 4px;
  background: var(--cor-superficie);
  accent-color: var(--cor-acao);
  flex-shrink: 0;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-1);
  padding: 2px var(--espaco-2);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #fff;
  border: 1.5px solid #374151; /* v423 */
}

/* ---------- Lista de checks ---------- */
.check-item {
  display: flex;
  gap: var(--espaco-3);
  align-items: flex-start;
}

.agenda-linha {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--espaco-3);
  padding: var(--espaco-3) 0;
  border-bottom: 1px solid var(--cor-borda);
}

.agenda-linha:last-child {
  border-bottom: none;
}

/* v427: trecho selecionado para edição */
.agenda-linha--editando {
  background: color-mix(in srgb, var(--cor-acao) 8%, transparent);
  border-radius: 8px;
  outline: 2px solid var(--cor-acao);
  outline-offset: -1px;
  padding-left: var(--espaco-2);
  padding-right: var(--espaco-2);
  transition: background 0.15s, outline 0.15s;
}

/* v1.0.64: clicar no trecho inteiro abre a edição (lápis dedicado removido) */
.agenda-linha--clicavel {
  cursor: pointer;
}

/* ============================================================
   v1.0.63: Agenda de viagem — resumo (linha do tempo minimalista)
   Usado no resumo de encerramento (abrir.php) e na revisão antes
   de finalizar (finalizar.php). Mobile-first: por padrão empilha
   início/fim/duração embaixo do nome do trecho (evita estourar a
   largura em telas estreitas); a partir de 600px vira grade de
   4 colunas (trecho | início | fim | duração).
   ============================================================ */
.agenda-tl-col-head {
  display: none;
}

.agenda-tl-day {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #8a93a3;
  margin: 18px 0 8px;
}

.agenda-tl-day:first-child {
  margin-top: 4px;
}

.agenda-tl-timeline {
  position: relative;
  padding-left: 20px;
}

.agenda-tl-timeline::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 5px;
  bottom: 5px;
  width: 1px;
  background: #e6e8ec;
}

.agenda-tl-leg {
  position: relative;
  padding: 8px 0;
}

.agenda-tl-leg::before {
  content: "";
  position: absolute;
  left: -20px;
  top: 14px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #c3c8d2;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #e6e8ec;
}

.agenda-tl-leg.is-servico::before {
  background: #c81e3a;
}

.agenda-tl-leg-nome {
  font-size: 0.88rem;
  font-weight: 500;
  color: #1a1d23;
}

.agenda-tl-leg.is-servico .agenda-tl-leg-nome {
  color: #c81e3a;
  font-weight: 600;
}

.agenda-tl-leg-linha2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 3px;
}

.agenda-tl-leg-horas {
  font-size: 0.78rem;
  color: #8a93a3;
  font-variant-numeric: tabular-nums;
}

.agenda-tl-separador {
  color: #c3c8d2;
  margin: 0 2px;
}

.agenda-tl-leg-dur {
  font-size: 0.74rem;
  font-weight: 700;
  color: #4b5563;
  background: #f0f1f4;
  border-radius: 5px;
  padding: 2px 7px;
  white-space: nowrap;
}

.agenda-tl-leg.is-servico .agenda-tl-leg-dur {
  color: #c81e3a;
  background: #fbeaec;
}

.agenda-tl-totais {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #e6e8ec;
}

.agenda-tl-stat {
  padding: 12px 14px;
  background: #fafafb;
  border: 1px solid #e6e8ec;
  border-radius: 10px;
}

.agenda-tl-stat-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8a93a3;
  margin-bottom: 3px;
}

.agenda-tl-stat-valor {
  font-size: 1.15rem;
  font-weight: 700;
  color: #1a1d23;
  font-variant-numeric: tabular-nums;
}

.agenda-tl-stat.servico .agenda-tl-stat-valor {
  color: #c81e3a;
}

.agenda-tl-stat.total {
  background: #f7f8fa;
}

@media (min-width: 768px) {
  .agenda-tl-col-head {
    display: grid;
    grid-template-columns: 1fr 70px 70px 92px;
    padding: 0 0 6px 20px;
    border-bottom: 1px solid #e6e8ec;
    margin-bottom: 4px;
  }

  .agenda-tl-col-head span {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #b0b6c0;
    text-align: right;
  }

  .agenda-tl-col-head span.c-leg {
    text-align: left;
  }

  .agenda-tl-leg {
    display: grid;
    grid-template-columns: 1fr 70px 70px 92px;
    align-items: center;
    gap: 4px;
    padding: 9px 0;
  }

  .agenda-tl-leg-linha2,
  .agenda-tl-leg-periodo {
    display: contents;
  }

  .agenda-tl-separador {
    display: none;
  }

  .agenda-tl-leg-horas {
    text-align: right;
    font-size: 0.84rem;
  }

  .agenda-tl-leg-dur {
    justify-self: end;
  }

  .agenda-tl-totais {
    grid-template-columns: repeat(3, 1fr);
  }
}

.check-item__setas {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  align-self: flex-start;
}

.seta-ordem-grupo {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
  overflow: hidden;
  background: var(--cor-superficie);
}

.btn-seta-ordem {
  width: 26px;
  height: 22px;
  border: none;
  border-bottom: 1px solid var(--cor-borda);
  background: transparent;
  color: var(--cor-texto-suave);
  font-size: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.1s;
}

.btn-seta-ordem:last-child {
  border-bottom: none;
}

.btn-seta-ordem:hover {
  background: var(--cor-fundo);
  color: var(--cor-texto);
}

.btn-seta-ordem:active {
  background: var(--cor-borda);
}

.btn-seta-ordem:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.check-item__thumbs {
  display: flex;
  gap: var(--espaco-1);
  flex-wrap: wrap;
  margin-top: var(--espaco-2);
}

.check-item__thumb {
  width: 56px;
  height: 56px;
  border-radius: var(--raio-borda);
  object-fit: cover;
  background: var(--cor-fundo);
}

.check-item__thumb-wrap {
  position: relative;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
}
.check-item__thumb-wrap .check-item__thumb {
  width: 100%;
  height: 100%;
}
.check-item__play-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.check-item__play-icon span {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 1px;
}

.check-item__conteudo { flex: 1; min-width: 0; }
.check-item__titulo {
  font-weight: 600;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}
.check-item__descricao {
  color: var(--cor-texto-suave);
  font-size: 0.9rem;
  margin-top: var(--espaco-1);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* v456: no mobile (≤767px), o cabeçalho do card do check (título + badges de
   status antes→depois + lixeira) sempre empilha em duas linhas — título em
   cima, badges embaixo — em vez de dividir a mesma linha. Evita o título
   ficar espremido numa coluna estreita ao lado dos badges em telas estreitas,
   o que quebrava o texto de forma ilegível quando título+badges não cabiam
   juntos. .check-item__conteudo > .flex-entre tem especificidade maior que
   .flex-entre sozinho, então sobrescreve sem precisar de !important; os
   filhos (spans de título/badges) só têm display/align-items/gap/flex-shrink
   inline, nunca flex-direction/width/flex-wrap, então nenhum conflito ali. */
@media (max-width: 767px) {
    .check-item__conteudo > .flex-entre {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        row-gap: 6px;
    }
    .check-item__conteudo > .flex-entre > span:last-child {
        flex-wrap: wrap;
        width: 100%;
    }
}

/* ---------- Modal ---------- */
.modal-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  overflow: hidden;           /* v95: impede scroll do fundo */
  touch-action: pan-y;         /* v95: permite scroll vertical, bloqueia horizontal */
  align-items: flex-start;
  justify-content: center;
  padding-top: 60px;
  z-index: 250;
}

.modal-overlay.aberto { display: flex; }

.modal-painel {
  background: var(--cor-superficie);
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 68px); /* v95: cabe sempre na viewport */
  border-radius: var(--raio-borda-grande) var(--raio-borda-grande) 0 0;
  overflow-y: auto;
  overscroll-behavior: contain;    /* v95: não passa scroll para o fundo */
  -webkit-overflow-scrolling: touch; /* v95: scroll suave iOS */
  padding: var(--espaco-4);
  animation: subir 0.2s ease;
}

@media (min-width: 600px) {
  .modal-overlay { align-items: center; padding-top: 0; }
  .modal-painel { border-radius: var(--raio-borda-grande); }
}

/* ---------- Modal de confirmação de exclusão ---------- */
/* z-index acima de todos os outros modais (que usam 100) */
#confirmacao-exclusao-overlay {
    z-index: 400;
}

.modal-painel--confirmacao {
  max-width: 380px;
  animation: subir 0.15s ease;
}

.modal-painel--confirmacao .modal-cabecalho {
  margin-bottom: var(--espaco-3);
}

.confirmacao-modal__titulo {
  font-size: 1.1rem;
  margin: 0;
}

.confirmacao-modal__mensagem {
  font-size: 0.95rem;
  margin: 0;
}

.confirmacao-modal__aviso {
  font-size: 0.85rem;
  color: var(--cor-perigo);
  font-weight: 600;
  margin: var(--espaco-2) 0 0;
}

@keyframes subir {
  from { transform: translateY(24px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.modal-cabecalho {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--espaco-4);
}

.modal-cabecalho h2 { font-size: 1.15rem; margin: 0; }

/* ---------- Upload de mídia ---------- */
.midia-grid {
  display: grid;
  grid-template-columns: repeat(var(--midias-por-linha, 3), 1fr);
  gap: var(--espaco-2);
  margin-top: var(--espaco-2);
}

.midia-slot {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--raio-borda);
  overflow: hidden;
  background: var(--cor-fundo);
  border: 1px dashed var(--cor-borda);
}

.midia-slot img,
.midia-slot video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.midia-slot__remover {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.midia-slot__editar {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.midia-slot__editar:disabled { opacity: 0.4; cursor: default; }

.midia-slot__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.midia-slot__play span {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 2px; /* compensa o offset visual do triângulo */
}

.midia-slot--add {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--cor-texto-suave);
  cursor: pointer;
  border: 2px dashed var(--cor-borda);
  background: transparent;
}

/* v1.0.16: arraste-e-solte de arquivos (upload) e reordenação das mídias */
.midia-grid {
  transition: outline-color 0.15s;
  outline: 2px dashed transparent;
  outline-offset: 4px;
}
.midia-grid--dragover {
  outline-color: var(--cor-acao);
}
/* v1.0.48: reordenar passou de Drag and Drop nativo (atributo draggable)
   para Pointer Events — cursor e touch-action aplicados por seletor de
   classe, não mais pelo atributo [draggable], que não é mais usado.
   touch-action:none nos slots é o que permite iniciar o arrasto com o dedo
   no celular sem o navegador roubar o gesto pra rolagem da página. */
.midia-slot:not(.midia-slot--add) {
  cursor: grab;
  touch-action: none;
}
.midia-slot--arrastando {
  opacity: 0.35;
  cursor: grabbing;
}

.aviso-limite-midia {
  font-size: 0.85rem;
  color: var(--cor-aviso);
  margin-top: var(--espaco-2);
}

/* ---------- Filtros (consulta de relatórios) ---------- */
.filtros {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espaco-3);
}

@media (min-width: 600px) {
  .filtros { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Utilitárias ---------- */
.texto-suave { color: var(--cor-texto-suave); }
.texto-centro { text-align: center; }
.mt-4 { margin-top: var(--espaco-4); }
.mb-0 { margin-bottom: 0; }
.flex { display: flex; }
.flex-entre { display: flex; justify-content: space-between; align-items: center; }
.gap-2 { gap: var(--espaco-2); }

.alerta {
  padding: var(--espaco-3);
  border-radius: var(--raio-borda);
  font-size: 0.9rem;
  margin-bottom: var(--espaco-4);
}

.alerta-erro { background: #FDECEA; color: var(--cor-perigo); }
.alerta-sucesso { background: #E8F5E9; color: var(--cor-sucesso); }
.alerta-aviso { background: #FFF3E0; color: var(--cor-aviso); }

.spinner {
  width: 20px;
  height: 20px;
  border: 3px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: girar 0.7s linear infinite;
}

@keyframes girar {
  to { transform: rotate(360deg); }
}

/* ---------- Footer ---------- */
.rodape {
  background: var(--cor-topbar);
  color: var(--cor-topbar-texto);
  text-align: center;
  padding: var(--espaco-4);
  font-size: 0.85rem;
  margin-top: var(--espaco-6);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-2);
}

.rodape__logo {
  height: 40px;
  max-width: 140px;
  width: auto;
  object-fit: contain;
  display: block;
}

.rodape__ano {
  display: inline-block;
  background: var(--cor-primaria);
  color: #fff;
  font-weight: 700;
  padding: 2px var(--espaco-2);
  border-radius: var(--raio-pilula);
  margin-left: var(--espaco-1);
}

/* ---------- Avatar ---------- */
.avatar {
  border-radius: 50%;
  object-fit: cover;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.avatar--usuario { background: var(--cor-info); }
.avatar--supervisor { background: var(--cor-aviso); }
.avatar--admin { background: var(--cor-primaria); }

.avatar--md { width: 44px; height: 44px; font-size: 1rem; }
.avatar--lg { width: 96px; height: 96px; font-size: 2rem; }

.avatar-upload {
  position: relative;
  display: inline-block;
}

.avatar-upload__botao {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--cor-primaria);
  color: #fff;
  border: 2px solid var(--cor-superficie);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  cursor: pointer;
}

/* Telefone como link de chamada: visualmente um botão pequeno, com
   o ícone de telefone reforçando que é clicável (link tel:). */
.link-telefone {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-1);
  color: var(--cor-sucesso);
  font-weight: 600;
  font-size: 0.85rem;
}

/* ---------- Mídia clicável (thumbs que abrem em tamanho real) ---------- */
.midia-clicavel {
  cursor: pointer;
  position: relative;
}

.midia-clicavel::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0,0,0,0.06);
  border-radius: inherit;
}

.midia-clicavel--video::before {
  content: '▶';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 1.1rem;
  z-index: 2;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

/* Visualizador em tela cheia de imagem/vídeo (lightbox simples) */
.visualizador-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0,0,0,0.92);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 300;
  padding: var(--espaco-4);
}

.visualizador-overlay.aberto { display: flex; }

.visualizador-overlay img,
.visualizador-overlay video {
  max-width: 100%;
  max-height: 85vh;
  border-radius: var(--raio-borda);
}


/* Visualizador – conteudo flex column (video + download button) */
.visualizador-overlay__conteudo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-height: 90vh;
  overflow: hidden;
}

/* Botão de download no overlay de vídeo */
.visualizador-overlay__baixar {
  display: inline-block;
  color: #fff;
  background: rgba(255,255,255,0.15);
  padding: 7px 22px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 0.88rem;
  flex-shrink: 0;
  transition: background 0.15s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.visualizador-overlay__baixar:hover {
  background: rgba(255,255,255,0.28);
  color: #fff;
}

.visualizador-overlay__fechar {
  position: absolute;
  top: var(--espaco-4);
  right: var(--espaco-4);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  color: #fff;
  border: none;
  font-size: 1.3rem;
  cursor: pointer;
  z-index: 1;
}

/* Badge de número sequencial do check (pill preto, negrito) */
.check-numero-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #111;
    color: #fff;
    border: none;
    border-radius: var(--raio-pilula);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 7px;
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

/* v1.0.50: badge neutro (cinza-chumbo do tema), não mais vermelho solto —
   vermelho fica reservado para ações destrutivas/voltar em todo o app. */
.relatorio-id-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--cor-acao);
    color: #fff;
    border: none;
    border-radius: var(--raio-pilula);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 9px;
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

/* ================================================================
   PALETA 6 — Amarelo + Preto (estilo Sanovo Technology Group)
   Ativa quando o admin seleciona a paleta 6 em Configurações.
   data-paleta="6" é emitido no <body> pelos partials de cabeçalho.
   ================================================================ */

/* Paleta 6: override de variáveis no body → herdado por todo o documento */
body[data-paleta="6"] {
    --cor-topbar: #FFD100;
    --cor-topbar-texto: #1A1A1A;
    --cor-topbar-hover: #E5BC00;
    --cor-acao-hover: #E5BC00;
}

/* Topbar: amarelo com borda inferior preta e texto escuro */
[data-paleta="6"] .topbar {
    border-bottom: 2px solid #111111;
}

/* Botões primários: fundo amarelo + texto preto */
[data-paleta="6"] .btn-primario,
[data-paleta="6"] .btn-acao {
    color: #111111;
    font-weight: 700;
}
[data-paleta="6"] .btn-primario:hover,
[data-paleta="6"] .btn-acao:hover {
    color: #111111;
}

/* Status badge e contador: usar amarelo */
[data-paleta="6"] #contador-checks,
[data-paleta="6"] .badge-acao {
    background: #FFD100;
    color: #111111;
}

/* Menu nav: itens ativos com borda amarela */
[data-paleta="6"] .menu-nav__item--ativo,
[data-paleta="6"] .menu-nav__item:hover {
    border-color: #FFD100;
    color: #FFD100;
}

/* Login page com paleta 6: fundo preto */
[data-paleta="6"].pagina-login {
    background: #0a0a0a;
}

/* Links de ação: amarelo */
[data-paleta="6"] a.link-acao,
[data-paleta="6"] .link-primario {
    color: #FFD100;
}

/* ── Avatar Modal ──────────────────────────────────────────── */
.avm {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}
.avm[hidden] { display: none; }

.avm-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
}

.avm-box {
    position: relative;
    background: var(--cor-card);
    border-radius: 16px;
    padding: 24px;
    width: 100%;
    max-width: 340px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    box-sizing: border-box;
}

.avm-state[hidden] { display: none; }

.avm-viewport {
    position: relative;
    width: 280px;
    height: 280px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 10px;
    background: #111;
    touch-action: none;
    user-select: none;
}
.avm-viewport canvas,
.avm-viewport video {
    display: block;
    width: 280px;
    height: 280px;
    object-fit: cover;
}
.avm-video--mirror { transform: scaleX(-1); }

.avm-circle-guide {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 200px rgba(0, 0, 0, 0.52);
    pointer-events: none;
}

.avm-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

/* ── Image editor / annotator (v24+v25) ─────────────────────── */
.modal-painel--editor {
    max-width: min(96vw, 680px);
}

.anotador-barra {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--cor-borda, #e0e0e0);
    margin-bottom: 8px;
}

.anotador-grupo {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.anotador-btn {
    background: var(--cor-fundo-secundario, #f0f0f0);
    border: 1.5px solid transparent;
    border-radius: 6px;
    width: 34px;
    height: 34px;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s;
}
.anotador-btn:hover  { background: var(--cor-borda, #ddd); }
.anotador-btn.ativo  { border-color: var(--cor-acao, #007AFF); background: color-mix(in srgb, var(--cor-acao, #007AFF) 12%, transparent); }

.esp-btn {
    background: var(--cor-fundo-secundario, #f0f0f0);
    border: 1.5px solid transparent;
    border-radius: 6px;
    padding: 0 10px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.esp-btn:hover { background: var(--cor-borda, #ddd); }
.esp-btn.ativo { border-color: var(--cor-acao, #007AFF); background: color-mix(in srgb, var(--cor-acao, #007AFF) 12%, transparent); }

/* v: barra desenhada em CSS em vez de glifo Unicode (─/━/▬) — a
   altura real da barra garante a leitura correta de fino/medio/
   grosso em qualquer fonte/plataforma, o que os glifos nao garantiam */
.esp-btn__barra {
    display: block;
    width: 20px;
    border-radius: 3px;
    background: var(--cor-texto, #1c1b19);
}

/* v1.0.81: estilo de linha (solido/tracejado/pontilhado/traco-ponto),
   mesmo padrao visual do .esp-btn, com a previa desenhada em SVG
   (stroke-dasharray) para ficar fiel ao padrao realmente aplicado
   no canvas via ctx.setLineDash(). */
.tracejado-btn {
    background: var(--cor-fundo-secundario, #f0f0f0);
    border: 1.5px solid transparent;
    border-radius: 6px;
    width: 34px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--cor-texto, #1c1b19);
    transition: background 0.15s, border-color 0.15s;
}
.tracejado-btn:hover { background: var(--cor-borda, #ddd); }
.tracejado-btn.ativo { border-color: var(--cor-acao, #007AFF); background: color-mix(in srgb, var(--cor-acao, #007AFF) 12%, transparent); }
.tracejado-btn svg { display: block; }

.cor-swatch {
    display: inline-block;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid rgba(0,0,0,0.15);
    cursor: pointer;
    transition: transform 0.1s, border-color 0.1s;
}
.cor-swatch:hover { transform: scale(1.15); }
.cor-swatch.ativo { border-color: var(--cor-acao, #007AFF); transform: scale(1.2); }

#picker-cor-anotador {
    width: 28px;
    height: 28px;
    border: none;
    padding: 0;
    cursor: pointer;
    border-radius: 50%;
    overflow: hidden;
    background: none;
}

.anotador-canvas-wrap {
    position: relative;
    overflow: hidden;
    max-height: 55vh;
    background: #111;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: none;
}

#canvas-anotador {
    display: block;
    max-width: 100%;
    max-height: 55vh;
    cursor: crosshair;
    touch-action: none;
}

#input-texto-anotacao {
    position: absolute;
    display: none;
    background: transparent;
    border: 1.5px dashed rgba(255,255,255,0.7);
    border-radius: 3px;
    padding: 2px 6px;
    outline: none;
    min-width: 80px;
    font-family: sans-serif;
    /* color and font-size set dynamically by JS */
}

/* ── Fundo do texto + alca de arraste (anotador) ────────────── */
.anotador-grupo--fundo-texto {
    gap: 6px;
}
.anotador-fundo-label {
    font-size: 0.72rem;
    color: var(--cor-texto-suave, #6b7280);
    margin-right: 2px;
    white-space: nowrap;
}
.cor-swatch--sem-fundo {
    background: repeating-conic-gradient(#d9d9d9 0% 25%, #fff 0% 50%) 50% / 10px 10px;
    position: relative;
}
.cor-swatch--sem-fundo::after {
    content: '';
    position: absolute;
    left: 10%;
    top: 50%;
    right: 10%;
    height: 2px;
    background: #e11d2e;
    transform: rotate(-45deg);
}
#picker-fundo-texto {
    width: 24px;
    height: 24px;
    border: none;
    padding: 0;
    cursor: pointer;
    border-radius: 50%;
    overflow: hidden;
    background: none;
}

/* -- Anotador de video (v1.0.60) -- mesmas regras do anotador de imagem,
   mas com IDs/variantes proprias porque o canvas precisa cobrir exatamente
   a caixa do <video> (posicionamento absoluto, nao centralizado em flex
   como o canvas de imagem) e os botoes usam uma classe extra "-video"
   so para escopo de JS (o app.css em si e compartilhado, sem duplicar
   a aparencia visual). -- */
#video-anotador-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background: #000;
    touch-action: none;
}

#canvas-anotador-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    cursor: crosshair;
    touch-action: none;
}

#input-texto-anotacao-video {
    position: absolute;
    display: none;
    background: transparent;
    border: 1.5px dashed rgba(255,255,255,0.7);
    border-radius: 3px;
    padding: 2px 6px;
    outline: none;
    min-width: 80px;
    font-family: sans-serif;
    /* color and font-size set dynamically by JS */
}

#picker-cor-anotador-video {
    width: 28px;
    height: 28px;
    border: none;
    padding: 0;
    cursor: pointer;
    border-radius: 50%;
    overflow: hidden;
    background: none;
}

#picker-fundo-texto-video {
    width: 24px;
    height: 24px;
    border: none;
    padding: 0;
    cursor: pointer;
    border-radius: 50%;
    overflow: hidden;
    background: none;
}

.alca-arraste-texto {
    position: absolute;
    display: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(17,17,17,0.85);
    color: #fff;
    border: 1.5px solid rgba(255,255,255,0.8);
    align-items: center;
    justify-content: center;
    line-height: 1;
    cursor: grab;
    touch-action: none;
    z-index: 2;
    padding: 0;
}
.alca-arraste-texto:active { cursor: grabbing; }

/* ── Check upload overlay ───────────────────────────────────── */
/* ── Toggle Switch ──────────────────────────────────────────── */
/* Toggle switch – override .campo label { display:block } */
.campo label.toggle-switch,
label.toggle-switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 400;
    margin-bottom: 0;
    cursor: pointer;
    user-select: none;
    line-height: 1.4;
}

.toggle-switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    line-height: 1.4;
}
.toggle-switch input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.toggle-track {
    position: relative;
    width: 42px;
    height: 24px;
    background: var(--cor-borda, #ccc);
    border-radius: 24px;
    transition: background 0.2s;
    flex-shrink: 0;
}
.toggle-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    transition: left 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.toggle-switch input:checked + .toggle-track {
    background: #c62828;
}
.toggle-switch input:checked + .toggle-track .toggle-thumb {
    left: 21px;
}

/* ── Tabela de peças ──────────────────────────────────────────────────── */
.tabela-pecas {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    margin-top: var(--espaco-2);
}
.tabela-pecas thead th {
    text-align: left;
    padding: 5px 6px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--cor-texto-suave);
    border-bottom: 1px solid var(--cor-borda);
    white-space: nowrap;
    /* v457: se a coluna ficar menor que o texto do título (caso extremo,
       com a tela mais estreita que o min-width da tabela), corta com "…"
       em vez de deixar o texto vazar por cima da coluna vizinha. */
    overflow: hidden;
    text-overflow: ellipsis;
}
.tabela-pecas tbody tr { border-bottom: 1px solid var(--cor-borda); }
.tabela-pecas tbody tr:last-child { border-bottom: none; }
.tabela-pecas td { padding: 4px 6px; vertical-align: middle; }
.tabela-pecas--geral { font-size: 0.875rem; }
.tabela-pecas--geral td { padding: 6px 8px; }
.peca-td-num  { color: var(--cor-texto-suave); font-size: 0.75rem; width: 28px; }
.peca-td-qtd  { font-weight: 600; width: 44px; text-align: center; }
.peca-td-und  { text-align: center; }
.peca-td-cod  { font-weight: 600; white-space: nowrap; }
.peca-td-desc { color: var(--cor-texto); overflow-wrap: break-word; word-break: normal; }
/* v457: lista geral: colgroup garante colunas fixas; desc herda o restante.
   min-width garante que, em telas estreitas, a tabela role horizontalmente
   (o wrapper ao redor já tem overflow-x:auto) em vez de espremer as colunas
   — sem min-width, table-layout:fixed encolhe TODAS as colunas
   proporcionalmente quando a tela é mais estreita que a soma das larguras
   fixas do colgroup, o que espremia a coluna Descrição a ponto de quebrar
   o texto de forma ilegível e o título da coluna vazar sobre a coluna
   vizinha (ex.: "Descrição" sobre "Un."). */
/* v463: a tentativa anterior (v462) ainda usava table-layout:fixed com
   width:100% herdado de .tabela-pecas — mesmo com um max-width, a tabela
   continuava esticando até esse teto, e como só a Descrição não tem
   largura própria, sobrava um vão vazio enorme antes de Unidade/Qtd quando
   a descrição era curta. Trocado pra table-layout:auto + width:auto —
   resolveu o vão interno (cada coluna passou a ficar do tamanho do
   próprio conteúdo), mas criou um efeito colateral: a tabela toda, agora
   "encolhida", sobra um vão vazio enorme à DIREITA dela dentro do card
   branco (o card continua ocupando 100% da largura da página, só a
   tabela ficou pequena dentro dele).
   v464: em vez de deixar só a Descrição absorver o espaço sobrando (como
   no v461/462, que criava o vão interno) ou deixar a tabela encolher pro
   mínimo (como no v463, que criava o vão externo), as larguras de TODAS
   as colunas do colgroup passaram a ser em % (ver cada template) com
   table-layout:fixed + width:100% — a tabela volta a preencher o card
   inteiro, mas agora o espaço extra é dividido proporcionalmente entre
   todas as colunas (inclusive Unidade/Qtd/Foto ganham um pouco mais de
   respiro), em vez de ser todo empurrado pra só uma coluna. Sem
   max-width: a tabela deve ocupar o card inteiro, como as outras seções
   da página. min-width continua garantindo que no celular, antes de
   espremer demais, o wrapper com overflow-x:auto role horizontalmente. */
.tabela-pecas--lista-geral { table-layout: fixed; width: 100%; min-width: 440px; }

/* v1.0.67: no mobile, a lista geral de peças (abrir.php, checks.js e
   finalizar.php) esconde por padrão as colunas Unidade/Qtd — telas
   estreitas não tinham espaço pra todas as colunas e, mesmo com o
   min-width + scroll horizontal das correções anteriores (v457-v464), a
   coluna Código ainda ficava espremida o bastante pra sobrepor
   visualmente a coluna Descrição.
   v1.0.68: a v1.0.67 reexibia Unidade/Qtd como colunas de volta (com
   min-width + scroll horizontal) ao clicar num botão — isso podia
   estourar a largura do card no celular. Passou a mostrar a
   informação como uma linha extra ABAIXO da descrição (.peca-extra-info),
   dentro da própria célula — nunca ao lado — atrás de um botão de
   expandir/recolher.
   v1.0.69: como a informação é pequena, o botão foi removido — a linha
   extra (.peca-extra-info) agora fica sempre visível por padrão no
   mobile, sem precisar de interação nenhuma. .peca-col-extra marca as
   colunas que ficam ocultas (th, td e col, nos três lugares que
   renderizam a tabela: PHP em abrir.php, atualizarListaGeralPecas() em
   abrir.php, e _renderLista() em checks.js — e também, sem a classe
   .tabela-pecas, na tabela própria de finalizar.php). Tudo isso só se
   aplica dentro do media query mobile; acima de 767px nada muda —
   Unidade/Qtd continuam sempre colunas normais, sem a linha extra. */
.peca-extra-info {
    display: none;
    font-size: 0.72rem;
    color: var(--cor-texto-suave);
    margin-top: 2px;
}
@media (max-width: 767px) {
    #sec-lista-geral-pecas .tabela-pecas--lista-geral {
        table-layout: auto;
        min-width: 0;
    }
    #sec-lista-geral-pecas .peca-td-cod,
    #sec-lista-pecas-finalizado td:nth-child(2) {
        white-space: normal;
        word-break: break-word;
    }
    #sec-lista-geral-pecas .peca-col-extra,
    #sec-lista-pecas-finalizado .peca-col-extra {
        display: none;
    }
    #sec-lista-geral-pecas .peca-extra-info,
    #sec-lista-pecas-finalizado .peca-extra-info {
        display: block;
    }
}
.peca-td-img  { width: 90px; }
.peca-img {
    width: 80px;
    height: 60px;
    object-fit: contain;
    border: 1px solid #000;
    border-radius: 2px;
    display: block;
    cursor: pointer;
    transition: opacity 0.15s;
}
.peca-img:hover { opacity: 0.85; }
/* v457: miniatura compacta da coluna "Foto" na Lista Geral de Peças
   (usada só pelo renderizador de checks.js, que é o único dos três que tem
   essa coluna) — substitui o style inline largura/altura 44px por uma
   classe, liberando mais espaço fixo para a coluna Descrição. */
.peca-img-mini {
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: 4px;
    display: block;
    margin: auto;
}
.btn-adicionar-peca {
    margin-top: var(--espaco-2);
    font-size: 0.8rem;
}
.check-pecas-wrap {
    margin-top: var(--espaco-2);
    padding-top: var(--espaco-2);
    border-top: 1px dashed var(--cor-borda);
}
.btn-sm {
    padding: 4px 10px;
    font-size: 0.78rem;
}

/* ── Paginação ─────────────────────────────────────────────────────────── */
.paginacao {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--espaco-2);
    margin-top: var(--espaco-4);
    flex-wrap: wrap;
}
.paginacao__btn {
    display: inline-flex;
    align-items: center;
    padding: 7px 16px;
    background: var(--cor-acao);
    color: #fff;
    border-radius: var(--raio);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: background 0.15s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    white-space: nowrap;
}
.paginacao__btn:hover {
    background: var(--cor-acao-hover);
    color: #fff;
}
.paginacao__btn--desabilitado {
    background: var(--cor-fundo, #f0f0f0);
    color: var(--cor-texto-suave, #999);
    cursor: not-allowed;
}
.paginacao__info {
    font-size: 0.875rem;
    color: var(--cor-texto-suave);
    padding: 0 var(--espaco-1);
    white-space: nowrap;
}
/* ── Paginação numerada (v115) ──────────────────────────────────────────── */
.paginacao__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    padding: 7px 10px;
    background: var(--cor-fundo-secundario, #f5f5f5);
    color: var(--cor-texto);
    border: 1px solid var(--cor-borda, #ddd);
    border-radius: var(--raio);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.paginacao__num:hover {
    background: var(--cor-acao);
    color: #fff;
    border-color: var(--cor-acao);
}
.paginacao__num--ativo {
    background: var(--cor-acao);
    color: #fff;
    border-color: var(--cor-acao);
    cursor: default;
    pointer-events: none;
}
.paginacao__elipse {
    font-size: 0.875rem;
    color: var(--cor-texto-suave, #999);
    padding: 0 4px;
    line-height: 36px;
}


/* v95: botão Salvar sempre visível no modal em mobile */

/* ── Botão Salvar topo (v97) ────────────────────────────────────────────── */
.btn-salvar-cabecalho {
  background: #424242;
  color: #fff;
  border: none;
  border-radius: var(--raio-borda, 8px);
  padding: 8px 18px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
  min-height: 38px;
  transition: background 0.15s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  flex-shrink: 0;
  text-decoration: none;
}
.btn-salvar-cabecalho:hover  { background: #212121; }
.btn-salvar-cabecalho:active { background: #111111; }

/* ── Botão Voltar topo (espelho do Salvar, vermelho escuro) ── */
.btn-voltar-cabecalho {
  background: #c62828;
  color: #fff;
  border: none;
  border-radius: var(--raio-borda, 8px);
  padding: 8px 18px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
  min-height: 38px;
  transition: background 0.15s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  flex-shrink: 0;
  text-decoration: none;
}
.btn-voltar-cabecalho:hover  { background: #b71c1c; color: #fff; }
.btn-voltar-cabecalho:active { background: #7f0000; }

/* ── v268: Modal de reautenticação por sessão expirada ─────────────── */
#sessao-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.58);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 16px;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
#sessao-modal.ativo { display: flex !important; }
.sessao-modal__card {
    background: #ffffff;
    border-radius: 16px;
    padding: 32px 28px 28px;
    width: 100%;
    max-width: 360px;
    box-shadow: 0 12px 48px rgba(0,0,0,.22);
}
.sessao-modal__lock {
    width: 52px; height: 52px;
    background: #f3f4f6;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 16px;
}
.sessao-modal__titulo {
    font-size: 1.15rem; font-weight: 700; color: #111827;
    margin: 0 0 4px; text-align: center;
}
.sessao-modal__desc {
    font-size: .875rem; color: #6b7280;
    margin: 0 0 20px; text-align: center; line-height: 1.45;
}
.sessao-modal__erro {
    color: #dc2626; font-size: .82rem;
    margin-bottom: 10px; display: none; text-align: center;
}
.sessao-modal__input {
    display: block; width: 100%; box-sizing: border-box;
    border: 1px solid #d1d5db; border-radius: 8px;
    padding: 10px 13px; font-size: .95rem; color: #111827;
    margin-bottom: 11px; outline: none;
    background: #f9fafb; transition: border-color .15s, box-shadow .15s;
}
.sessao-modal__input:focus {
    border-color: var(--cor-acao, #2563eb);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.sessao-modal__btns { display: flex; gap: 10px; margin-top: 6px; }
.sessao-modal__btn-login {
    flex: 1; background: #111827; color: #fff;
    border: none; border-radius: 8px;
    padding: 11px 0; font-size: .95rem; font-weight: 700;
    cursor: pointer; transition: background .15s; letter-spacing: .02em;
}
.sessao-modal__btn-login:hover:not(:disabled) { background: #1f2937; }
.sessao-modal__btn-login:disabled { opacity: .6; cursor: not-allowed; }
.sessao-modal__btn-cancelar {
    flex: 1; background: #f3f4f6; color: #374151;
    border: 1px solid #d1d5db; border-radius: 8px;
    padding: 11px 0; font-size: .95rem; font-weight: 500;
    cursor: pointer; transition: background .15s;
}
.sessao-modal__btn-cancelar:hover { background: #e5e7eb; }

/* ── v433: Bandeiras inline na topbar (sem dropdown) ───────────────────── */
.seletor-flags-topo .seletor-idioma {
    gap: 1px;
}
.seletor-flags-topo .seletor-idioma a {
    min-width: unset;
    min-height: unset;
    padding: 4px 3px;
    border-radius: 4px;
    opacity: 0.38;
}
.seletor-flags-topo .seletor-idioma a.ativo {
    opacity: 1;
    background: rgba(255,255,255,0.15);
    box-shadow: 0 0 0 1.5px rgba(255,255,255,0.7);
}
.seletor-flags-topo .seletor-idioma a img {
    width: 22px;
    height: 22px;
}

/* ── v433: Barra de navegação inferior (mobile) ─────────────────────────── */
.nav-inferior {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--cor-topbar);
    display: flex;
    z-index: 200;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    border-top: 1px solid rgba(255,255,255,0.08);
}

.nav-inferior__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 4px 8px;
    color: rgba(255,255,255,0.38);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.2px;
    text-decoration: none;
    gap: 3px;
    min-height: 56px;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s;
}

.nav-inferior__item svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.nav-inferior__item--ativo {
    color: #fff;
}

.nav-inferior__item:active {
    opacity: 0.65;
}

/* Espaço para o conteúdo não ficar atrás da nav inferior */
.container {
    padding-bottom: calc(var(--espaco-4) + 68px);
}

/* ── v433: Hub de cadastros ─────────────────────────────────────────────── */
.hub-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--espaco-3);
    margin-top: var(--espaco-4);
}

.hub-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--espaco-2);
    background: var(--cor-superficie);
    border: 0.5px solid #e8e8e8;
    border-radius: var(--raio-borda-grande);
    padding: var(--espaco-5) var(--espaco-3);
    color: var(--cor-texto);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
    box-shadow: var(--sombra-card);
    min-height: 100px;
    transition: transform 0.12s, box-shadow 0.12s;
}

.hub-item svg { color: var(--cor-acao); }

.hub-item:active {
    transform: scale(0.97);
    box-shadow: none;
}

@media (hover: hover) {
    .hub-item:hover {
        transform: translateY(-2px);
        box-shadow: var(--sombra-elevada);
    }
}

/* ── v433: Sidebar desktop (≥768px) ─────────────────────────────────────
   Body vira grid 2 colunas: sidebar escura (220px) + área de conteúdo.
   Topbar continua abrangendo as duas colunas no topo.
   A nav-inferior (bottom bar no mobile) vira sidebar vertical no desktop.
   ─────────────────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
    body {
        display: grid;
        grid-template-columns: 220px 1fr;
        grid-template-rows: auto 1fr;
    }

    /* Topbar: linha 1, abrange as 2 colunas */
    .topbar {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    /* Sidebar: coluna 1, linha 2 */
    .nav-inferior {
        grid-column: 1;
        grid-row: 2;
        /* Transforma de bottom-bar em sidebar vertical */
        position: sticky;
        top: 0;
        left: auto;
        right: auto;
        bottom: auto;
        height: calc(100vh - 58px);
        align-self: start;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        padding: var(--espaco-4) 0;
        border-top: none;
        border-right: 1px solid rgba(255,255,255,0.1);
        overflow-y: auto;
        z-index: 190;
    }

    /* Item: ícone + label em linha horizontal */
    .nav-inferior__item {
        flex-direction: row;
        justify-content: flex-start;
        padding: 13px 22px;
        min-height: 44px;
        font-size: 0.9rem;
        gap: 12px;
        border-radius: 0;
    }

    .nav-inferior__item svg {
        width: 20px;
        height: 20px;
    }

    /* Ativo: barra branca à esquerda */
    .nav-inferior__item--ativo {
        background: rgba(255,255,255,0.1);
        border-left: 3px solid rgba(255,255,255,0.9);
        padding-left: 19px;
    }

    /* Conteúdo: coluna 2, linha 2 */
    .container {
        grid-column: 2;
        grid-row: 2;
        /* Sem bottom-nav, usa padding normal (sobrescreve regra mobile) */
        padding-bottom: var(--espaco-6);
    }
}

/* ═══════════════════════════════════════════════════
   v436 — Sidebar desktop (visível apenas em ≥768px)
   ═══════════════════════════════════════════════════ */

.sidebar-desktop {
    display: none; /* mobile-first: oculto por padrão */
}

@media (min-width: 768px) {
    /* Grid do body: sidebar + conteúdo */
    body {
        display: grid;
        grid-template-columns: 220px 1fr;
        grid-template-rows: auto 1fr;
        min-height: 100vh;
    }

    /* Topbar ocupa ambas as colunas */
    .topbar {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    /* Sidebar ocupa col 1, row 2 */
    .sidebar-desktop {
        display: flex;
        flex-direction: column;
        grid-column: 1;
        grid-row: 2;
        background: var(--cor-topbar, #252525);
        color: #fff;
        position: sticky;
        top: 0;
        height: calc(100vh - 56px); /* 56px = topbar height */
        overflow-y: auto;
        overflow-x: hidden;
        z-index: 100;
        border-right: 1px solid rgba(255,255,255,0.08);
    }

    /* Conteúdo principal ocupa col 2, row 2 */
    main.container,
    .container {
        grid-column: 2;
        grid-row: 2;
        max-width: 100%;
        padding: var(--espaco-6);
        padding-bottom: var(--espaco-6); /* sem espaço do nav-inferior no desktop */
    }

    /* Esconde bottom nav no desktop */
    .nav-inferior {
        display: none !important;
    }

    /* ── Topo do sidebar (logo) ── */
    .sidebar-desktop__topo {
        padding: 20px 16px 12px;
        border-bottom: 1px solid rgba(255,255,255,0.08);
    }

    .sidebar-desktop__logo {
        max-width: 140px;
        max-height: 36px;
        object-fit: contain;
        filter: brightness(0) invert(1);
        opacity: 0.9;
    }

    /* ── Navegação ── */
    .sidebar-desktop__nav {
        flex: 1;
        padding: 12px 0;
        display: flex;
        flex-direction: column;
    }

    .sidebar-desktop__secao-label {
        display: block;
        font-size: 0.875rem;
        font-weight: 500;
        color: rgba(255,255,255,0.5);
        padding: 12px 16px 4px;
    }

    .sidebar-desktop__item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 9px 16px;
        color: rgba(255,255,255,0.7);
        text-decoration: none;
        font-size: 0.875rem;
        font-weight: 500;
        border-radius: 0;
        transition: background 0.15s, color 0.15s;
        margin: 1px 8px;
        border-radius: 6px;
    }

    .sidebar-desktop__item svg {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
        opacity: 0.8;
    }

    .sidebar-desktop__item:hover {
        background: rgba(255,255,255,0.08);
        color: #fff;
    }

    .sidebar-desktop__item--ativo {
        background: rgba(255,255,255,0.14);
        color: #fff;
    }

    .sidebar-desktop__item--ativo svg {
        opacity: 1;
    }

    /* v443: botão-toggle do grupo "Cadastros" (recolhe/expande na lateral) */
    .sidebar-desktop__secao-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        background: none;
        border: none;
        font-family: inherit;
        cursor: pointer;
        text-align: left;
    }

    .sidebar-desktop__secao-seta {
        width: 13px;
        height: 13px;
        flex-shrink: 0;
        opacity: 0.55;
        transition: transform 0.15s ease;
    }

    .sidebar-desktop__secao-toggle[aria-expanded="true"] .sidebar-desktop__secao-seta {
        transform: rotate(90deg);
    }

    .sidebar-desktop__grupo {
        display: none;
    }

    .sidebar-desktop__grupo--aberto {
        display: block;
    }

    /* ── Rodapé do sidebar (user + logout) ── */
    .sidebar-desktop__rodape {
        padding: 8px 0 12px;
        border-top: 1px solid rgba(255,255,255,0.08);
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .sidebar-desktop__sair {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 9px 16px;
        color: rgba(255,255,255,0.5);
        text-decoration: none;
        font-size: 0.875rem;
        font-weight: 500;
        margin: 1px 8px;
        border-radius: 6px;
        transition: background 0.15s, color 0.15s;
    }

    .sidebar-desktop__sair svg {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
    }

    .sidebar-desktop__sair:hover {
        background: rgba(220,53,69,0.2);
        color: #ff6b6b;
    }

    .sidebar-desktop__versao {
        text-align: center;
        font-size: 0.7rem;
        color: rgba(255,255,255,0.35);
        padding: 4px 16px 2px;
        letter-spacing: .02em;
    }
}

/* Versão do sistema — rodapé da home no celular (no desktop já
   aparece no rodapé do sidebar, então fica oculta lá). */
.home-versao-mobile {
    text-align: center;
    font-size: 0.75rem;
    color: var(--cor-texto-suave);
    margin-top: 28px;
    padding-bottom: 8px;
    letter-spacing: .02em;
}

.login-versao {
    text-align: center;
    font-size: 0.75rem;
    color: var(--cor-texto-suave);
    margin-top: 16px;
    letter-spacing: .02em;
}
@media (min-width: 768px) {
    .home-versao-mobile {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════
   v436 — Stats cards na página de relatórios
   ═══════════════════════════════════════════════════ */

.rels-stats {
    display: flex;
    gap: var(--espaco-3);
    margin-bottom: var(--espaco-4);
    flex-wrap: wrap;
}

.rels-stat {
    flex: 1;
    min-width: 90px;
    background: var(--cor-superficie, #fff);
    border: 1px solid var(--cor-borda, #e9ecef);
    border-radius: var(--raio-borda, 8px);
    padding: var(--espaco-3) var(--espaco-4);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rels-stat__num {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
    color: var(--cor-texto, #212529);
}

.rels-stat__label {
    font-size: 0.75rem;
    color: var(--cor-texto-secundario, #6c757d);
    font-weight: 500;
}

.rels-stat--aviso .rels-stat__num  { color: #f59e0b; }
.rels-stat--sucesso .rels-stat__num { color: #10b981; }
.rels-stat--lixeira .rels-stat__num { color: #6b7280; }
a.rels-stat--lixeira:hover { border-color: #9ca3af; }

/* v449c: no celular, 2 cards de estatística por linha (em vez de empilhar/quebrar
   de forma desigual com flex-wrap) */
@media (max-width: 767px) {
    .rels-stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .rels-stat {
        min-width: 0;
    }
}

/* Busca rápida */
.rels-busca-wrap {
    margin-bottom: var(--espaco-4);
}

.rels-busca-form {
    display: flex;
    gap: var(--espaco-3);
}

.rels-busca-input-wrap {
    position: relative;
    flex: 1;
    max-width: 400px;
}

.rels-busca-input-wrap svg {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--cor-texto-secundario, #6c757d);
    pointer-events: none;
}

.rels-busca-input {
    width: 100%;
    padding: 9px 12px 9px 36px;
    border: 1px solid var(--cor-borda, #e9ecef);
    border-radius: var(--raio-borda, 8px);
    font-size: 0.875rem;
    background: var(--cor-superficie, #fff);
    color: var(--cor-texto, #212529);
    outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

.rels-busca-input:focus {
    border-color: var(--cor-topbar, #252525);
    box-shadow: 0 0 0 2px rgba(37,37,37,0.1);
}

/* ═══════════════════════════════════════════════════
   v436b — ajustes desktop
   ═══════════════════════════════════════════════════ */

/* Oculta saudação/badges no topbar do desktop (info fica nos stats cards) */
@media (min-width: 768px) {
    .topbar__saudacao {
        display: none;
    }
    /* Oculta botão Voltar no desktop (navegação pelo sidebar) */
    .btn-voltar-mobile {
        display: none !important;
    }
}

/* Nome da empresa no sidebar (fallback quando logo não carrega) */
.sidebar-desktop__nome-empresa {
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.02em;
    padding: 2px 0;
}

/* ═══════════════════════════════════════════════════
   v437 — Desktop: topbar oculto, sidebar full-height
   ═══════════════════════════════════════════════════ */
@media (min-width: 768px) {
    /* Elimina o cabeçalho no desktop */
    .topbar {
        display: none !important;
    }

    /* Grid sem linha do topbar */
    body {
        display: grid;
        grid-template-columns: 220px 1fr;
        grid-template-rows: 1fr;
        min-height: 100vh;
    }

    /* Sidebar ocupa altura total da viewport */
    .sidebar-desktop {
        display: flex;
        grid-column: 1;
        grid-row: 1;
        height: 100vh;
        top: 0;
    }

    /* Conteúdo na coluna direita */
    main.container,
    .container {
        grid-column: 2;
        grid-row: 1;
        max-width: 100%;
        padding: var(--espaco-6);
        padding-bottom: var(--espaco-6);
    }

    /* Oculta botão Filtrar em TODAS as páginas de listagem */
    #btn-toggle-filtro,
    #filtro-container {
        display: none !important;
    }

    /* Logo do sidebar sem inversão de cor */
    .sidebar-desktop__logo {
        filter: none;
        max-width: 150px;
        max-height: 44px;
        object-fit: contain;
    }

    /* Flags no sidebar */
    .sidebar-desktop__flags {
        padding: 8px 16px 4px;
        border-bottom: 1px solid rgba(255,255,255,0.08);
        margin-bottom: 4px;
    }

    .sidebar-desktop__flags .seletor-idioma {
        display: flex;
        gap: 6px;
        align-items: center;
    }

    .sidebar-desktop__flags .seletor-idioma a {
        opacity: 0.5;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .sidebar-desktop__flags .seletor-idioma a.ativo {
        opacity: 1;
        box-shadow: 0 0 0 2px rgba(255,255,255,0.7);
        border-radius: 50%;
    }

    .sidebar-desktop__flags .seletor-idioma a img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

/* v437b — flags inline no sidebar */
@media (min-width: 768px) {
    .sidebar-desktop__flags {
        display: flex;
        gap: 8px;
        align-items: center;
        padding: 10px 16px;
        border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    .sidebar-flag {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        overflow: hidden;
        opacity: 0.45;
        transition: opacity 0.15s;
    }
    .sidebar-flag:hover { opacity: 0.8; }
    .sidebar-flag--ativo {
        opacity: 1;
        box-shadow: 0 0 0 2px rgba(255,255,255,0.75);
    }
    .sidebar-flag img {
        width: 26px;
        height: 26px;
        object-fit: cover;
    }
}

/* v437c — logo sidebar maior */
@media (min-width: 768px) {
    .sidebar-desktop__logo {
        max-width: 170px;
        max-height: 56px;
    }
    .sidebar-desktop__nome-empresa {
        font-size: 1.15rem;
    }
    .sidebar-desktop__topo {
        padding: 22px 16px 14px;
    }
}

/* v437d — logo sidebar maior e centralizado */
@media (min-width: 768px) {
    .sidebar-desktop__topo {
        padding: 20px 16px 16px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .sidebar-desktop__topo a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
    }
    .sidebar-desktop__logo {
        max-width: 180px;
        max-height: 64px;
        width: 100%;
        height: auto;
        object-fit: contain;
        filter: none;
    }
    .sidebar-desktop__nome-empresa {
        font-size: 1.2rem;
        text-align: center;
        width: 100%;
    }
}

/* v437e — logo sidebar maior + coluna 240px */
@media (min-width: 768px) {
    body {
        grid-template-columns: 240px 1fr;
    }
    .sidebar-desktop {
        width: 240px;
    }
    .sidebar-desktop__topo {
        padding: 24px 20px 18px;
    }
    .sidebar-desktop__logo {
        max-width: 200px;
        max-height: 72px;
        width: 100%;
    }
    .sidebar-desktop__nome-empresa {
        font-size: 1.25rem;
    }
}

/* v438 — logo sidebar maior + cards relatorios redesign */
@media (min-width: 768px) {
    body { grid-template-columns: 240px 1fr; }
    .sidebar-desktop { width: 240px; }
    .sidebar-desktop__topo {
        padding: 20px 16px 16px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .sidebar-desktop__topo a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
    }
    .sidebar-desktop__logo {
        max-width: 210px;
        max-height: 90px;
        width: 100%;
        height: auto;
        object-fit: contain;
        filter: none;
    }
    .sidebar-desktop__nome-empresa {
        font-size: 1.3rem;
        font-weight: 600;
        text-align: center;
        width: 100%;
    }
}

/* v438c — logo menor, badge OS cor escura, busca alinhada */
@media (min-width: 768px) {
    .sidebar-desktop__logo {
        max-height: 60px;
    }
}
.rels-card-v2__os {
    background: #252525;
    color: #fff;
}
.rels-busca-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    margin-bottom: 16px;
}
.rels-busca-row form { margin: 0; }
.rels-busca-wrap { flex: 0 0 280px; }
.rels-chips {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    flex: 1;
}

/* v440e — mobile fix para action row nas listagens
   Desktop: inline styles no HTML mantêm o layout intacto (nowrap, margin-left:auto).
   Mobile ≤767px: !important sobrescreve os inline styles e permite wrapping. */
.page-header-actions { /* hook para CSS mobile — não define nada para desktop */ }

@media (max-width: 767px) {
    /* Outer wrapper pode quebrar linha */
    .rels-busca-row,
    .rels-page-header { flex-wrap: wrap !important; }

    /* Oculta badge pills (Log/RA/RF) no cabeçalho — não úteis no mobile */
    .topbar__badges { display: none !important; }

    /* Action row ocupa 100% e permite wrapping */
    .page-header-actions {
        flex-wrap: wrap !important;
        width: 100% !important;
        margin-left: 0 !important;
        row-gap: 8px;
    }

    /* Busca ocupa linha inteira:
       - relatorios: via <form> direto
       - admin: via .rels-busca-input-wrap direto */
    .page-header-actions > form,
    .page-header-actions > .rels-busca-input-wrap {
        flex: 1 1 100% !important;
        width: 100% !important;
        min-width: 0;
    }
    /* Input dentro do form estica sem largura fixa */
    .page-header-actions > form .rels-busca-input-wrap {
        width: 100% !important;
        flex: 1 1 auto !important;
    }

    /* Chips não crescem (impediam o botão de ficar na mesma linha) */
    .page-header-actions .rels-chips {
        flex: 0 0 auto !important;
        flex-wrap: wrap !important;
    }

    /* Botão fica na mesma linha dos chips */
    .page-header-actions > .btn-novo-rel,
    .page-header-actions > a.btn-novo-rel {
        flex-shrink: 0;
    }
}