/* Complemento de cadastros.css para a tela de ordens de serviço. */

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.chip { padding: 6px 12px; border-radius: 999px; font-size: 13px; }
.chip.ativo { background: var(--acento-fraco); border-color: var(--acento); color: var(--acento); }
.chip .n { display: inline-block; min-width: 18px; margin-left: 4px; padding: 0 5px; border-radius: 999px; background: var(--borda-suave); font-size: 11px; }
.chip.ativo .n { background: #fff; }

.acoes-os { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.acoes-os button { padding: 8px 13px; font-size: 13px; }

.colunas-os { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
/* Na ficha a coluna é mais estreita que a lista: com o mínimo de 680px da lista, a
   coluna Valor ficava escondida atrás da rolagem. */
.colunas-os .tabela-rolavel table { min-width: 420px; }
.orcamento-cabeca .sub, .ficha-topo .sub { display: inline; }
#osSub { display: block; }
@media (max-width: 1100px) { .colunas-os { grid-template-columns: 1fr; } }

.destaque-painel { border: 2px solid var(--acento); }

.checkbox-rotulo { flex-direction: row !important; align-items: center; gap: 8px !important; padding-top: 22px; }
.checkbox-rotulo input { padding: 0; }
.checkbox-rotulo span { font-size: 13px !important; color: var(--texto) !important; }

.construtor {
  padding: 14px; margin-bottom: 14px;
  border: 1px dashed #c7d2fe; border-radius: 10px; background: #fafaff;
}
.construtor .linha > input[type=number] { max-width: 110px; }
.acoes-construtor { margin-top: 12px; margin-bottom: 0; }

.orcamento {
  border: 1px solid var(--borda); border-radius: 10px;
  padding: 12px 14px; margin-bottom: 10px;
}
.orcamento-cabeca { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.orcamento-cabeca b { font-size: 14.5px; }
.orcamento table { margin-top: 10px; }
.orcamento .acoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.orcamento .acoes button { padding: 6px 11px; font-size: 12.5px; }
.orcamento.RECUSADO, .orcamento.EXPIRADO { opacity: .7; }

.selo-orc { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; }
.selo-orc.RASCUNHO { background: #e2e8f0; color: #334155; }
.selo-orc.ENVIADO { background: #fef3c7; color: #78350f; }
.selo-orc.APROVADO { background: #dcfce7; color: #14532d; }
.selo-orc.RECUSADO { background: #fee2e2; color: #7f1d1d; }
.selo-orc.EXPIRADO { background: #f1f5f9; color: #64748b; }

tr.recusado td { text-decoration: line-through; color: var(--tenue); }

.galeria { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.galeria a { position: relative; display: block; }
.galeria img, .galeria video {
  width: 104px; height: 104px; object-fit: cover;
  border-radius: 8px; border: 1px solid var(--borda); background: #0f172a;
}
.galeria .selo {
  position: absolute; left: 4px; bottom: 4px;
  background: rgba(15, 23, 42, .85); color: #fff;
  font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 999px;
}

.checklist-bloco { margin-bottom: 12px; }
.checklist-bloco h4 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--tenue); }
.checklist-item { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--borda-suave); font-size: 13.5px; }
.checklist-item:last-child { border-bottom: 0; }
.checklist-item img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; border: 1px solid var(--borda); }
.checklist-item select { padding: 5px 8px; font-size: 13px; }
.checklist-item .cresce { min-width: 0; }

.enviar-arquivo {
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer; padding: 7px 12px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--borda); border-radius: 9px; background: var(--painel); color: var(--texto-medio);
}
.enviar-arquivo:hover { border-color: var(--tenue); color: var(--texto); }

/* Antes e depois: é o que o cliente vê no link. Os dois botões principais ganham cor. */
.fotos-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.fotos-acoes .enviar-arquivo.antes { border-color: #cbd5e1; background: #f8fafc; }
.fotos-acoes .enviar-arquivo.depois { border-color: var(--acento); background: var(--acento-fraco); color: var(--acento); }
.fotos-acoes .contagem { margin-left: auto; }
.grupo-midia { margin-top: 12px; }
.grupo-midia h4 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--tenue); }
.grupo-midia h4 small { text-transform: none; letter-spacing: 0; font-weight: 500; }
.galeria figure { margin: 0; display: flex; flex-direction: column; gap: 4px; width: 104px; }
.galeria figure select { padding: 3px 4px; font-size: 11.5px; border-radius: 6px; width: 100%; }

.aviso-garantia { border-left-color: var(--ok) !important; background: var(--ok-fraco) !important; }

.total-linha td { font-weight: 800; font-size: 14.5px; }

.nota-os { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--borda-suave); font-size: 13px; }
.nota-os .sem-nota { color: #b45309; font-weight: 700; }

/* Casos parecidos: sugestão do histórico da própria oficina. */
.caso { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--borda-suave); font-size: 13.5px; }
.caso:first-child { border-top: 0; }
.caso .cresce { min-width: 0; }
.caso button { padding: 6px 11px; font-size: 12.5px; white-space: nowrap; }
.pilula-catalogo { display: inline-block; padding: 1px 7px; border-radius: 999px; background: var(--acento-fraco); color: var(--acento); font-size: 10.5px; font-weight: 800; }
@media (max-width: 700px) { .caso { flex-direction: column; align-items: flex-start; } }

/* Ficha de OS que não abriu (excluída, apagada, link errado): fica só o cabeçalho com o motivo. */
#tela-os.sem-os > :not(.ficha-topo) { display: none !important; }