/* -----------------------------------------------------------
   UTILITÁRIOS — ponto 1.5 do Raio-X (2026-08-20)
   -----------------------------------------------------------
   Ajustes pequenos que se repetiam em muitos lugares via style=""
   solto direto no HTML — viraram classe aqui, uma vez só. Nada de
   visual mudou; só o jeito como o valor é guardado no código.
   ----------------------------------------------------------- */

/* célula de tabela em destaque (nome do item, valor principal...) —
   era "font-weight:700" repetido em quase toda tabela do sistema. */
.celula-destaque { font-weight: 700; }

/* esconde um elemento até o JavaScript da tela decidir mostrar — abas
   que começam fechadas, linhas "vazio" de tabela, badges que só
   aparecem depois de carregar um dado, etc. */
.oculto { display: none; }

/* espaçamento simples entre uma seção e a próxima, quando não faz
   parte de nenhum componente com nome próprio. */
.espaco-acima { margin-top: 16px; }
.espaco-abaixo { margin-bottom: 16px; }

/* linha de uma tabela (conta/venda) já paga — menos destaque que as
   pendentes/vencidas. Era "opacity:0.6" repetido em cada linha. */
.linha-paga { opacity: 0.6; }

/* célula "Nenhum item cadastrado ainda." — se repetia quase idêntica
   em toda tela simples de Recursos, e em Produtos. */
.celula-vazia { text-align: center; padding: 32px; color: var(--cor-texto-fraco); }

/* título de modal pequeno (dentro de .modal-compacto-caixa) — o
   .modal-os-cabecalho h2 padrão é 22px, mas modais pequenos usam um
   tamanho menor; tinha 2 valores diferentes repetidos por aí.
   Precisa ser "h2.modal-titulo--..." (não só ".modal-titulo--...") pra
   ter a MESMA especificidade de ".modal-os-cabecalho h2" e ganhar dela
   — só uma classe sozinha, mais fraca, perdia e ficava sempre em 22px. */
h2.modal-titulo--md { font-size: 19px; }
h2.modal-titulo--sm { font-size: 17px; }

/* variante mais estreita do modal pequeno — usada pelos 3 modais de
   cadastro de Localização (Cidade/Bairro/Rua), que repetiam o mesmo
   max-width diferente do padrão de .modal-compacto-caixa (440px). */
.modal-compacto-caixa--estreita { max-width: 420px; }

/* o "*" laranja ao lado do nome de um campo obrigatório. */
.marca-obrigatorio { color: var(--cor-texto-laranja); }

/* grade de 2 colunas desiguais (a 2ª bem mais larga) — usada 3 vezes
   idênticas: Novo Cliente, Detalhes do Cliente, Detalhes da O.S. */
.grade-campos--1-3 { grid-template-columns: 1fr 3fr; }

/* espaço em volta do stepper "Quantidade de Conjuntos" — mesmos 2
   valores juntos nos 3 arquivos acima. */
.campo-filtro--conjuntos { margin-top: 16px; max-width: 320px; }

/* texto na cor "forte" (principal), usado dentro de frases mais claras
   (ex.: ".modal-explicacao") pra destacar um nome/valor específico. */
.texto-forte { color: var(--cor-texto-principal); }

/* cabeçalho de formulário com nome + selo de status lado a lado —
   variante de .form-cabecalho usada em Detalhes do Cliente/da O.S. */
.form-cabecalho--com-badge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

/* legenda logo abaixo de um título grande (nome do cliente, número da
   O.S....), mesmo estilo repetido nos 2 arquivos de Detalhes. */
.subtitulo-cabecalho { color: var(--cor-texto-secundario); font-size: 14px; margin-top: 4px; }

/* .modal-explicacao com um pouco menos de espaço embaixo — usada nos
   modais de Carência/Cancelar Plano/Cancelar O.S. */
.modal-explicacao--compacta { margin-bottom: 16px; }

/* aviso laranja "modo de edição ativado" — igual em Detalhes do
   Cliente e Detalhes da O.S., cada um tinha sua própria cópia solta. */
.aviso-modo-edicao {
  display: none;
  margin-bottom: 16px;
  padding: 10px 14px;
  border-radius: 8px;
  background-color: rgba(252, 85, 3, 0.12);
  border: 1px solid rgba(252, 85, 3, 0.35);
  color: var(--cor-texto-laranja);
  font-size: 13px;
  font-weight: 600;
}

@media (max-width: 640px) {
  .grade-preenchido { grid-template-columns: 1fr 1fr; }
}

/* campo com um botãozinho só de ícone, encostado na lateral direita, por
   dentro do próprio campo — mesmo padrão visual que já existia (".btn-olho",
   em perfil-acessos.css, no campo de Senha), só que com nome genérico pra
   poder reaproveitar em qualquer campo (ex.: "Gerar novo MAC" em Novo
   Cliente/Detalhes do Cliente — ver ".btn-gerar-mac" nesses arquivos). */
.campo-com-botao-lateral { position: relative; }
.campo-com-botao-lateral .campo { padding-right: 38px; }
.btn-campo-lateral {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--cor-texto-fraco);
  cursor: pointer;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-campo-lateral svg { width: 16px; height: 16px; }
.btn-campo-lateral:hover { color: var(--cor-texto-principal); }
.btn-campo-lateral:disabled { opacity: 0.4; cursor: not-allowed; }