/* Peças comuns às telas de cadastro (clientes, ordens, configurações, estoque).
   Complementa o sistema.css; nomes novos, nenhum nome antigo redefinido. */

.cresce { flex: 1; }
.secundario { background: var(--painel); }
.topo button, .topo a.botao { padding: 7px 13px; font-size: 13px; }

label.rotulado, div.rotulado { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rotulado > span { font-size: 12px; font-weight: 700; color: var(--apagado); }
.rotulado small { color: var(--tenue); font-size: 12px; }
.rotulado textarea { min-height: 70px; resize: vertical; }

.grade-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px 14px;
  margin-bottom: 14px;
}
.grade-form .largo { grid-column: 1 / -1; }

a.botao {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 12px; text-decoration: none; font-weight: 600; font-size: 14px;
  border: 1px solid var(--borda); border-radius: 9px; color: var(--texto-medio); background: var(--painel);
}
a.botao:hover { color: var(--texto); border-color: var(--tenue); }
a.botao.primario { background: var(--acento); border-color: var(--acento); color: #fff; }
button.link { border: 0; background: none; padding: 0; color: var(--acento); font-weight: 600; cursor: pointer; }
button.link:hover { text-decoration: underline; }
button.perigo { color: var(--avaria); }

.aviso {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 12px 16px; margin-bottom: 16px;
  border: 1px solid var(--borda); border-left: 3px solid var(--acento);
  border-radius: 10px; background: var(--painel); font-size: 13.5px;
}
.aviso.atencao { border-left-color: var(--atencao); background: var(--atencao-fraco); }
.aviso.ok { border-left-color: var(--ok); }

/* Barra de busca da lista */
.barra-busca { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.barra-busca input[type=search] { flex: 1; min-width: 220px; max-width: 460px; }
.contagem { color: var(--tenue); font-size: 12.5px; }

.tabela-rolavel { overflow-x: auto; }
.tabela-rolavel table { min-width: 680px; }
tr.clicavel { cursor: pointer; }
tr.clicavel:hover td { background: var(--acento-fraco); }
/* Linha secundária embaixo do texto principal, em qualquer lugar (tabela, lista, KPI). */
.sub { display: block; color: var(--tenue); font-size: 12px; font-weight: 400; }
td.acoes { text-align: right; white-space: nowrap; }
td.acoes button { padding: 5px 10px; font-size: 12.5px; margin-left: 4px; }

.placa-selo {
  display: inline-block; padding: 1px 7px; margin: 1px 3px 1px 0;
  border: 1px solid #cbd5e1; border-radius: 5px; background: #f8fafc;
  font-weight: 800; font-size: 12px; letter-spacing: 1px; color: var(--texto);
}

.paginacao { display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin-top: 10px; }
.paginacao button { padding: 6px 12px; font-size: 13px; }

/* Ficha (cliente, veículo, OS) */
.ficha-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 16px; }
.ficha-topo h2 { margin: 0; font-size: 22px; font-weight: 750; letter-spacing: -.3px; }
.ficha-topo .sub { color: var(--apagado); font-size: 13.5px; }
.voltar { padding: 6px 11px; font-size: 13px; }

.colunas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.colunas > .painel { margin-bottom: 0; }
.pilha > .painel { margin-bottom: 16px; }
@media (max-width: 1000px) { .colunas { grid-template-columns: 1fr; } }

.painel-cabeca { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.painel-cabeca h2 { margin: 0; font-size: 16px; font-weight: 700; }

.lista-simples { list-style: none; margin: 0; padding: 0; }
.lista-simples li {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--borda-suave);
}
.lista-simples li:last-child { border-bottom: 0; }

.dados-lidos { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; font-size: 13.5px; margin: 0 0 8px; }
.dados-lidos dt { color: var(--tenue); font-weight: 600; }
.dados-lidos dd { margin: 0; }

.selo-status {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 800; white-space: nowrap;
  background: var(--borda-suave); color: var(--apagado);
}
.selo-status.ABERTA { background: #e0f2fe; color: #075985; }
.selo-status.AGUARDANDO_APROVACAO { background: #fef3c7; color: #78350f; }
.selo-status.APROVADA { background: #ede9fe; color: #4c1d95; }
.selo-status.EM_EXECUCAO { background: #dbeafe; color: #1e3a8a; }
.selo-status.AGUARDANDO_PECA { background: #ffedd5; color: #7c2d12; }
.selo-status.PRONTA { background: #dcfce7; color: #14532d; }
.selo-status.ENTREGUE { background: #e2e8f0; color: #334155; }
.selo-status.CANCELADA { background: #fee2e2; color: #7f1d1d; }

.whats { color: #15803d; font-weight: 600; text-decoration: none; white-space: nowrap; }
.whats:hover { text-decoration: underline; }

/* Busca com sugestões (escolher cliente) */
.escolha { position: relative; max-width: 520px; }
.escolha input { width: 100%; }
.escolha-lista {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 30;
  margin-top: 4px; max-height: 260px; overflow-y: auto;
  background: var(--painel); border: 1px solid var(--borda); border-radius: 10px; box-shadow: var(--sombra-alta);
}
.escolha-lista button {
  display: block; width: 100%; text-align: left; border: 0; border-radius: 0;
  border-bottom: 1px solid var(--borda-suave); padding: 9px 12px; font-weight: 500;
}
.escolha-lista button:hover { background: var(--acento-fraco); }
.escolha-lista small { display: block; color: var(--tenue); font-size: 12px; }

/* Mensagens flutuantes (UI.avisar) */
#avisos-flutuantes {
  position: fixed; right: 18px; bottom: 18px; z-index: 100;
  display: flex; flex-direction: column; gap: 8px; max-width: min(420px, calc(100vw - 36px));
}
.aviso-flutuante {
  padding: 11px 15px; border-radius: 10px; font-size: 13.5px; font-weight: 600;
  background: #0f172a; color: #fff; box-shadow: var(--sombra-alta);
  transition: opacity .4s, transform .4s;
}
.aviso-flutuante.ok { background: #14532d; }
.aviso-flutuante.erro { background: #7f1d1d; }
.aviso-flutuante.saindo { opacity: 0; transform: translateY(6px); }

@media (max-width: 900px) {
  .topo { flex-wrap: wrap; height: auto; padding-block: 10px; }
  .ficha-topo h2 { font-size: 19px; }
}

/* Diálogo "Excluir OS" (UI.excluirOs) — o mesmo na Recepção e na ficha da OS. Cor chapada,
   sem sombra colorida: é uma pergunta séria, não um destaque. */
dialog.dialogo {
  width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px);
  padding: 0; border: 1px solid var(--borda); border-radius: var(--raio);
  background: var(--painel); color: var(--texto); box-shadow: var(--sombra-alta);
}
dialog.dialogo::backdrop { background: rgba(15, 23, 42, .45); }
.dialogo .dialogo-cabeca { padding: 18px 22px 0; }
.dialogo .dialogo-cabeca h2 { margin: 0 0 4px; font-size: 17px; font-weight: 750; }
.dialogo .dialogo-cabeca .sub { font-size: 13px; color: var(--apagado); }
.dialogo .dialogo-corpo { padding: 4px 22px 6px; overflow-y: auto; max-height: calc(100vh - 220px); }
.dialogo .dialogo-corpo h3 { margin: 14px 0 8px; }
.dialogo .dialogo-pe {
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px;
  padding: 12px 22px 16px; border-top: 1px solid var(--borda-suave);
}
.lista-efeitos { margin: 0 0 14px; padding-left: 18px; font-size: 13.5px; }
.lista-efeitos li { margin-bottom: 6px; }
.confirmacao {
  display: flex; gap: 9px; align-items: flex-start;
  padding: 10px 12px; margin-bottom: 10px;
  border: 1px solid var(--borda); border-left: 3px solid var(--atencao); border-radius: 9px;
  background: var(--atencao-fraco); font-size: 13px; cursor: pointer;
}
.confirmacao input { margin-top: 2px; padding: 0; box-shadow: none; flex-shrink: 0; }
.motivo-exclusao { margin-top: 4px; }
.motivos-rapidos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.motivos-rapidos button { padding: 4px 10px; font-size: 12.5px; font-weight: 500; }
button.perigo-cheio { background: var(--avaria); border-color: var(--avaria); color: #fff; }
button.perigo-cheio:hover:not(:disabled) { background: #b91c1c; border-color: #b91c1c; color: #fff; }
/* Botão pequeno de ação dentro do cartão do pátio (Recepção → Pátio). */
.ficha button { padding: 3px 9px; font-size: 12px; margin-left: 6px; }