:root {
  --fundo: #0A1F1E;
  --fundo-2: #123534;
  --texto: #E9F4F2;
  --accent: #46E0C8;
  --secundario: #9CB9B5;
  --borda: #1E4A47;
  --perigo: #FF8A7A;
  --ok: #46E0C8;
  --aviso: #FFD37A;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  background: var(--fundo);
  color: var(--texto);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

/* A vistoria é mobile-first, mas não engessada: ela é feita em iPhone, em Samsung
   e também em tablet, então a coluna CRESCE por passos em vez de morrer num
   número. Em telefone fica na largura confortável de leitura; em tablet ganha ar,
   que é onde o par de fotos rende mais.

   O padding respeita a safe-area porque o index.html declara viewport-fit=cover:
   sem isso, em iPhone com notch o conteúdo passa por baixo do recorte e da barra
   de gestos. max() garante o mínimo de 16px onde não há recorte nenhum. */
#app {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  /* a linha de baixo é a base: env() sem valor padrão invalida a declaração
     inteira em navegador que não o suporta, e o app ficaria sem padding algum */
  padding: 16px 16px 40px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
}

/* tablet em retrato (iPad ~768, Galaxy Tab ~800) */
@media (min-width: 700px) {
  #app { max-width: 680px; }
}
/* tablet em paisagem e telas maiores: para de crescer, senão a linha de texto
   fica longa demais para ler de pé, com o aparelho na mão */
@media (min-width: 1000px) {
  #app { max-width: 720px; }
}
#app > * { order: 5; }
#app > .rodape { order: 99; }

.rodape { margin-top: 24px; padding-top: 14px; border-top: 1px solid var(--borda); }
.rodape-acoes { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.rodape a { color: var(--secundario); font-size: 0.85rem; }
.rodape button { font-size: 0.85rem; padding: 6px 10px; }
.rodape .botao-enviar-parte {
  width: 100%; margin-top: 12px; padding: 12px; font-size: 0.95rem;
  border-color: var(--accent); color: var(--accent);
}
.voltar-inicio { color: var(--secundario); }

.etiqueta-sync {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--accent); border: 1px solid var(--accent); border-radius: 6px; padding: 2px 8px; white-space: nowrap;
}

details summary::-webkit-details-marker { color: var(--secundario); }
details[open] summary { margin-bottom: 6px; }
.ok-ia input[type="text"] { background: rgba(0,0,0,.25); }

h1 { font-size: 1.35rem; line-height: 1.3; }
h2 { font-size: 1.1rem; }
h3 { font-size: 0.95rem; color: var(--secundario); font-weight: 600; }

/* ---------- cabeçalho: identidade Propmind, largura total ----------
   Segue o padrão dos outros produtos da casa: faixa escura atravessando a tela,
   marca "propmind" com o mind no verde, divisor, nome do produto. Fica FORA do
   #app (ver topo() em js/app.js), senão a faixa ficaria presa na largura da
   coluna — 560px no fluxo de vistoria. */
#cabecalho { background: var(--fundo-2); border-bottom: 1px solid var(--borda); }
#cabecalho .topo {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-top: 11px;
  padding-bottom: 11px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

.identidade { display: flex; align-items: center; gap: 10px; min-width: 0; }
.marca-propmind { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.02em; }
.marca-propmind .prop { color: var(--texto); }
.marca-propmind .mind { color: var(--accent); }
.divisor-marca { width: 1px; height: 17px; background: var(--borda); flex: none; }
.nome-produto { font-size: .95rem; color: var(--secundario); white-space: nowrap; }

.acoes-topo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.contexto-topo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 38vw; }
/* em tela estreita a identidade e o papel são o que importa; o título da vistoria
   já aparece na própria tela, logo abaixo */
@media (max-width: 700px) { .contexto-topo { display: none; } }

.badge-papel {
  font-size: 0.8rem; padding: 4px 12px; border-radius: 999px;
  border: 1px solid var(--borda); background: var(--fundo-2); color: var(--texto);
  cursor: pointer;
}
.badge-papel .quem { color: var(--accent); font-weight: 600; }

.cartao {
  background: var(--fundo-2); border: 1px solid var(--borda);
  border-radius: 14px; padding: 16px; margin-bottom: 14px;
}

.suave { color: var(--secundario); font-size: 0.9rem; }
.mini { font-size: 0.8rem; color: var(--secundario); }

button, .botao {
  appearance: none; border: 1px solid var(--borda); border-radius: 12px;
  background: var(--fundo-2); color: var(--texto);
  font-size: 1rem; padding: 12px 16px; cursor: pointer; font-family: inherit;
  transition: filter 0.15s;
}
button:active { filter: brightness(1.2); }
button:disabled { opacity: 0.45; cursor: default; }

.botao-primario {
  background: var(--accent); color: #06302B; border-color: var(--accent); font-weight: 700;
}
.botao-perigo { border-color: var(--perigo); color: var(--perigo); background: transparent; }
.botao-fantasminha { background: transparent; border-color: transparent; color: var(--secundario); font-size: 0.9rem; }
.botao-largo { width: 100%; display: block; text-align: center; }

.linha-botoes { display: flex; gap: 10px; margin-top: 12px; }
.linha-botoes > * { flex: 1; }

input[type="text"], textarea, select {
  width: 100%; background: var(--fundo); color: var(--texto);
  border: 1px solid var(--borda); border-radius: 10px;
  padding: 12px; font-size: 1rem; font-family: inherit;
}
textarea { min-height: 72px; resize: vertical; }
input:focus, textarea:focus { outline: 2px solid var(--accent); border-color: transparent; }

label { display: block; margin: 14px 0 6px; font-size: 0.9rem; color: var(--secundario); }

/* barra de progresso */
.progresso { margin: 8px 0 16px; }
.progresso .trilho { height: 8px; border-radius: 999px; background: var(--fundo-2); border: 1px solid var(--borda); overflow: hidden; }
.progresso .cheio { height: 100%; background: var(--accent); border-radius: 999px; transition: width 0.3s; }
.progresso .texto { font-size: 0.8rem; color: var(--secundario); margin-top: 4px; }

/* chips de slots */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chip {
  font-size: 0.8rem; padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--borda); color: var(--secundario); background: transparent; cursor: pointer;
}
.chip.feito { border-color: var(--ok); color: var(--ok); }
.chip.inexistente { text-decoration: line-through; opacity: 0.55; }
.chip.atual { background: var(--accent); color: #06302B; border-color: var(--accent); font-weight: 700; }
.chip.contestado { border-color: var(--perigo); color: var(--perigo); }

/* opções de estado (enum) */
.opcoes-estado { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.opcao-estado {
  border: 1px solid var(--borda); border-radius: 10px; padding: 10px;
  text-align: center; cursor: pointer; font-size: 0.95rem; background: var(--fundo);
}
.opcao-estado.ativa { border-color: var(--accent); color: var(--accent); font-weight: 700; }

.foto-preview { width: 100%; border-radius: 12px; border: 1px solid var(--borda); display: block; }
.par-fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.par-fotos figure { margin: 0; }
.par-fotos img { width: 100%; border-radius: 10px; border: 1px solid var(--borda); display: block; }
.par-fotos figcaption { font-size: 0.75rem; color: var(--secundario); text-align: center; margin-top: 4px; }

.aviso-ia {
  border: 1px solid var(--aviso); border-radius: 10px; padding: 10px 12px;
  color: var(--aviso); font-size: 0.9rem; margin-top: 10px;
}
.erro-ia {
  border: 1px solid var(--perigo); border-radius: 10px; padding: 10px 12px;
  color: var(--perigo); font-size: 0.9rem; margin-top: 10px;
}
.ok-ia {
  border: 1px solid var(--ok); border-radius: 10px; padding: 10px 12px;
  color: var(--ok); font-size: 0.9rem; margin-top: 10px;
}

/* pensando… */
.pensando { display: flex; align-items: center; gap: 10px; margin-top: 12px; color: var(--secundario); }
.spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--borda); border-top-color: var(--accent);
  animation: girar 0.8s linear infinite; flex-shrink: 0;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* tela de passagem de aparelho */
.passe-aparelho { text-align: center; padding: 48px 16px; }
.passe-aparelho .emoji { font-size: 3rem; }

/* câmera */
/* O palco mantém 3:4 SEMPRE — a foto salva é recortada nessa proporção
   (recortarComoCover em js/camera.js), então mudar a proporção da tela faria o
   que a pessoa vê deixar de ser o que ela salva.
   Por isso a altura não é cortada: é a LARGURA que cede, calculada a partir da
   altura disponível. Sem isso, 560px de largura viravam 747px de altura e o
   obturador saía da tela — em tablet, pior ainda.
   svh e não vh: no Safari e no Chrome de celular a barra some e reaparece, e vh
   usa a altura MAIOR, escondendo o botão justamente quando a barra está visível. */
.palco-camera {
  position: relative;
  width: min(100%, calc(62vh * 3 / 4));
  width: min(100%, calc(62svh * 3 / 4));
  margin-inline: auto;
  aspect-ratio: 3 / 4;
  background: #000; border-radius: 14px; overflow: hidden; border: 1px solid var(--borda);
}
.palco-camera video, .palco-camera .fantasma, .palco-camera img.congelado {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.palco-camera .fantasma { pointer-events: none; }
.semaforo {
  position: absolute; top: 10px; left: 10px; z-index: 3;
  font-size: 0.78rem; padding: 4px 10px; border-radius: 999px; background: rgba(0,0,0,0.55);
}
.semaforo.ok { color: var(--ok); }
.semaforo.ruim { color: var(--perigo); }
.controle-fantasma {
  position: absolute; bottom: 10px; left: 10px; right: 10px; z-index: 3;
  display: flex; align-items: center; gap: 10px;
  background: rgba(0,0,0,0.55); border-radius: 10px; padding: 8px 12px; font-size: 0.8rem;
}
.controle-fantasma input[type="range"] { flex: 1; }
.debug-qualidade {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  font-family: monospace; font-size: 0.7rem; background: rgba(0,0,0,0.65);
  padding: 4px 8px; border-radius: 8px; color: var(--aviso);
}

/* galeria de fotos do item em captura */
.tiras { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 2px; }
.tira { margin: 0; position: relative; flex: 0 0 96px; }
.tira img { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; border: 1px solid var(--borda); display: block; }
.tira figcaption { font-size: 0.68rem; color: var(--secundario); margin-top: 3px; text-align: center; line-height: 1.2; }
.tira .remover {
  position: absolute; top: 2px; right: 2px; padding: 0; width: 22px; height: 22px;
  border-radius: 50%; background: rgba(0,0,0,.65); color: var(--texto); font-size: 0.75rem; line-height: 1;
}

.conta-fotos { opacity: 0.7; font-size: 0.72rem; }

.adicionar-item { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.adicionar-item select { flex: 1; min-width: 0; }
.adicionar-item .botao-mais-um { white-space: nowrap; font-size: 0.85rem; }

.linha-novo-comodo { display: flex; gap: 8px; }
.linha-novo-comodo input { flex: 1.3; min-width: 0; }
.linha-novo-comodo select { flex: 1; min-width: 0; }

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

.lista-diferencas { margin: 10px 0 0; padding-left: 18px; }
.lista-diferencas li { margin-bottom: 6px; font-size: 0.92rem; }
.lista-diferencas .fraca { opacity: 0.5; }
.conf { font-size: 0.75rem; color: var(--secundario); }

.selo-nao-exigivel {
  display: inline-block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em;
  color: var(--aviso); border: 1px solid var(--aviso); border-radius: 6px; padding: 2px 8px;
}

hr.sep { border: none; border-top: 1px solid var(--borda); margin: 16px 0; }

/* Selo de ambiente da ponte com a Propmind. Vermelho quando é produção —
   a diferença entre staging e produção não pode depender de memória. */
.selo-ambiente {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px; padding: 6px 12px; border-radius: 8px; margin-bottom: 10px;
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.selo-ambiente .mini-selo { font-weight: 500; letter-spacing: .02em; text-transform: none; opacity: .85; }
.selo-ambiente.producao { background: #7F1D1D; color: #FEE2E2; }
.selo-ambiente.staging { background: #1E293B; color: #CBD5E1; }
.selo-ambiente.desconhecido { background: #78350F; color: #FEF3C7; }

/* busca de imóvel na porta integrada */
.linha-busca { display: flex; gap: 8px; margin-top: 12px; }
.linha-busca input { flex: 1; min-width: 0; }
.linha-busca button { white-space: nowrap; }
.resultado-imovel .mini { overflow-wrap: anywhere; }

/* prévia do texto que vai no registro da Propmind */
.previa-notes {
  margin-top: 6px; padding: 10px; border-radius: 8px;
  background: var(--fundo); border: 1px solid var(--borda);
  font-size: .74rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere;
  max-height: 240px; overflow-y: auto;
}
.passos { margin: 10px 0 0; padding-left: 20px; font-size: .88rem; color: var(--secundario); }
.passos li { margin-bottom: 4px; }

/* estado da sincronia, ao lado da marca no topo */
.sinc {
  font-size: .62rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 5px; margin-left: 6px; white-space: nowrap;
}
.sinc.salvando { background: var(--fundo-2); color: var(--secundario); }
.sinc.salvo { background: rgba(45,212,191,.14); color: var(--accent); }
.sinc.offline { background: #78350F; color: #FEF3C7; }
.sinc.conflito { background: #7F1D1D; color: #FEE2E2; }

/* zoom da câmera: pinça + régua de degraus, como no app de câmera do aparelho */
.palco-camera { touch-action: none; }        /* a pinça é nossa, não do navegador */
.palco-camera video { transform-origin: center center; }

.zoom-degraus {
  position: absolute; z-index: 3;
  left: 50%; transform: translateX(-50%);
  bottom: 12px;
  display: flex; align-items: center; gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .5);
  backdrop-filter: blur(4px);
}
/* display: flex venceria o atributo hidden, e a régua apareceria em aparelho sem
   zoom — mesma pegadinha do menu de perfil */
.zoom-degraus[hidden] { display: none; }

/* no reencaixe da saída o rodapé do palco já tem o controle de fantasma:
   empilha em vez de sobrepor */
.palco-camera.com-fantasma .zoom-degraus { bottom: 58px; }

.zoom-degraus button {
  min-width: 42px; padding: 0 8px;
  border: none; border-radius: 999px;
  background: transparent; color: #fff;
  font-size: .78rem; font-weight: 700;
  font-variant-numeric: tabular-nums;   /* 1,7× não empurra os vizinhos */
}
.zoom-degraus button.ativo { background: var(--accent); color: #06302B; min-width: 52px; }


/* ---------- identidade e sair, no padrão do Control Panel ----------
   Medidas copiadas do user-profile-dropdown/dropdown-menu do CP: avatar 40px
   (size-10), menu rounded-md (8px) com p-1 e min-width 200px, item px-2 py-1.5
   com raio 4px, ícone 16px, separador de 1px na cor muted, cabeçalho px-3 py-2,
   sideOffset de 8px. As CORES saem das variáveis daqui — o tema escuro do CP
   (193 60% 10%) é a mesma família deste app, então o padrão atravessa inteiro. */
.cabecalho-painel { display: flex; align-items: flex-start; gap: 12px; }
.acoes-cabecalho { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }


.perfil { position: relative; }

.avatar-perfil {
  width: 40px; height: 40px; padding: 0;
  border-radius: 9999px;
  background: var(--fundo-2);
  border: 1px solid var(--borda);
  color: var(--secundario);
  font-size: .75rem; font-weight: 600; letter-spacing: .02em;
  display: grid; place-items: center;
  cursor: pointer;
}
.avatar-perfil:hover { border-color: var(--secundario); color: var(--texto); }
.avatar-perfil:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.menu-perfil {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 50;
  min-width: 200px; padding: 4px;
  background: var(--fundo-2);
  border: 1px solid var(--borda);
  border-radius: 8px;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.4), 0 4px 6px -4px rgba(0,0,0,.4);
}
.cabeca-perfil { padding: 8px 12px; }
.nome-perfil {
  font-size: .875rem; font-weight: 500; color: var(--texto);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.detalhe-perfil { font-size: .75rem; color: var(--secundario); margin-top: 2px; }
.separador-perfil { height: 1px; background: var(--borda); margin: 4px 12px; }

.item-perfil {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 6px 8px; border-radius: 4px;
  background: transparent; border: 0;
  color: var(--texto); font-size: .875rem; text-align: left;
  cursor: pointer;
}
.item-perfil:hover, .item-perfil:focus-visible { background: var(--borda); outline: none; }
.item-perfil svg { width: 16px; height: 16px; flex: none; }

/* ---------- painel: responsivo, NÃO mobile-first ----------
   O fluxo de vistoria continua na coluna de 560px, que é o certo para quem está
   com o celular na mão dentro do imóvel. O painel é uso interno de computador e
   ganha a largura da tela — mesmo app, alvos de tela diferentes. */
#app.largo { max-width: 1080px; }

.area-painel { display: grid; gap: 14px; }
.tabela-vistorias { display: grid; gap: 8px; }
.cabeca-tabela { display: none; }

.linha-vistoria {
  display: grid; gap: 4px;
  padding: 12px; border: 1px solid var(--borda); border-radius: 10px;
  background: var(--fundo);
}
.titulo-vistoria { overflow-wrap: anywhere; }
.cel-acoes { display: flex; gap: 8px; margin-top: 6px; }
.cel-acoes button { padding: 6px 12px; font-size: .85rem; }

/* daqui para cima cabem duas colunas de cartão e a lista vira tabela */
@media (min-width: 860px) {
  .area-painel { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .area-painel > .area-lista { grid-column: 1 / -1; }

  .cabeca-tabela,
  .linha-vistoria {
    display: grid;
    /* imóvel · status · etapa · ações — o status precisa caber duas etiquetas
       (o estado e "falta registrar") sem quebrar */
    grid-template-columns: minmax(0, 2fr) minmax(0, 1.5fr) minmax(0, 1.1fr) auto;
    align-items: center;
    gap: 12px;
  }
  .cabeca-tabela {
    padding: 0 12px 6px;
    border-bottom: 1px solid var(--borda);
    text-transform: uppercase; letter-spacing: .04em; font-size: .68rem;
  }
  /* os rótulos existem só para a versão empilhada do celular */
  .rotulo-celula { display: none; }
  .cel-acoes { margin-top: 0; justify-content: flex-end; }
}

/* Os dois cartões de criação saem do mesmo molde, então o ritmo interno é o
   mesmo: título, descrição, rótulo, campo largo, ação primária, resultado. */
.cartao-criacao .descricao-cartao { margin-top: 4px; }
.cartao-criacao .aviso-campo { margin-top: 10px; }

/* recado de uma linha da tabela (link renovado, erro) — ocupa a largura toda
   para não empurrar as colunas quando aparece */
.aviso-linha { margin-top: 8px; color: var(--secundario); }
.aviso-linha.aviso-ruim { color: var(--perigo); }
.linha-vistoria .aviso-linha { grid-column: 1 / -1; margin-top: 4px; }

/* Celular deitado: sobra pouca altura, então o palco pode usar mais dela — o que
   aperta é a vertical, não a horizontal. */
@media (orientation: landscape) and (max-height: 560px) {
  .palco-camera {
    width: min(100%, calc(78vh * 3 / 4));
    width: min(100%, calc(78svh * 3 / 4));
  }
}

/* Dedo, não mouse: 44px é o piso para acertar um botão sem errar. Vale em
   telefone e em tablet, e não afeta quem está no computador — daí o pointer:
   coarse em vez de largura de tela, que não diz nada sobre como se toca. */
@media (pointer: coarse) {
  button, .botao { min-height: 44px; }
  .cel-acoes button, .item-perfil { min-height: 44px; }
  .avatar-perfil { width: 44px; height: 44px; }
  /* alvo maior para remover foto, que hoje é um X pequeno em cima da miniatura */
  .tira .remover { min-width: 28px; min-height: 28px; }
}

/* Tablet: os dois cartões de criação já cabem lado a lado antes da tabela, que
   precisa de mais largura para as quatro colunas não se esmagarem. */
@media (min-width: 700px) and (max-width: 859px) {
  .area-painel { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .area-painel > .area-lista { grid-column: 1 / -1; }
}

/* item declarado inexistente, na tela de quem confere */
.declaracao-ausente {
  margin-top: 12px; padding: 12px;
  border: 1px solid var(--borda); border-left: 3px solid var(--aviso);
  border-radius: 8px; background: var(--fundo-2);
}

/* rejeitar a vistoria inteira: ação de última instância, então fica longe dos
   botões de decisão do item e sem peso visual de ação principal */
.rejeitar-tudo { margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--borda); text-align: center; }
.rejeitar-tudo button { color: var(--perigo); }
.rejeitar-tudo .mini { margin-top: 2px; }

/* Âncora para voltar ao enquadramento da câmera. Vive fora do #app, então as
   medidas de safe-area são as dela. Canto direito de baixo: é onde o polegar
   chega sem trocar a mão de posição. */
.ancora-camera {
  position: fixed;
  z-index: 40;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  padding: 12px 18px;
  border: none;
  border-radius: 999px;
  background: var(--accent);
  color: #06302B;
  font-size: .9rem;
  font-weight: 700;
  box-shadow: 0 10px 22px -8px rgba(0, 0, 0, .6);
}
.ancora-camera:hover { filter: brightness(1.06); }

/* ---------- filtros e status da lista de vistorias ---------- */
/* Rola no eixo horizontal em vez de quebrar linha: no celular a barra fica numa
   faixa só, e o dedo arrasta — quebrar empurraria a primeira vistoria para baixo
   da dobra. */
.filtros-vistoria {
  display: flex; gap: 8px;
  overflow-x: auto;
  padding: 2px 0 12px;
  scrollbar-width: none;
}
.filtros-vistoria::-webkit-scrollbar { display: none; }

.chip-filtro {
  flex: 0 0 auto;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--fundo-2);
  border: 1px solid var(--borda);
  color: var(--secundario);
  font-size: .82rem;
  white-space: nowrap;
}
.chip-filtro .conta { font-weight: 700; opacity: .7; margin-left: 2px; }
.chip-filtro.ativo { background: var(--accent); border-color: var(--accent); color: #06302B; }
.chip-filtro.ativo .conta { opacity: .8; }
/* filtro zerado continua visível, só apagado: esconder mudaria o conjunto de
   botões a cada mudança de estado e apagaria a informação de que aquele estado
   existe e está vazio */
.chip-filtro.vazio:not(.ativo) { opacity: .45; }

.etiqueta-status {
  font-size: .66rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 5px; white-space: nowrap;
}
.st-preparar { background: var(--fundo-2); color: var(--secundario); }
.st-andamento { background: rgba(70, 224, 200, .14); color: var(--accent); }
.st-aguardando { background: #78350F; color: #FEF3C7; }
.st-concluida { background: var(--accent); color: #06302B; }
/* pendência, não estado: cor de alerta porque é o que fica esquecido */
.st-registrar { background: #7F1D1D; color: #FEE2E2; }

/* célula de status na tabela do painel */
.cel-status { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }