/*
 * PADRAO VISUAL DOS FORMULARIOS ADMINISTRATIVOS
 *
 * O tema principal (tema_moderno.css) define a paleta da casa. Esta folha
 * cuida das pecas que o Django gera automaticamente: fichas, tabelas
 * embutidas, botoes de relacionamento, seletor de permissoes e rodape de
 * salvar. Centralizar aqui impede que cada cadastro ganhe um desenho novo.
 *
 * Nenhum hex novo entra aqui: toda cor aponta, com var(), para os treze
 * tokens definidos no :root de tema_moderno.css. Ver PADRAO-VISUAL.md.
 */

:root {
  --adm-navy: var(--tinta);
  --adm-navy-2: var(--tinta);
  --adm-blue: var(--acao);
  --adm-blue-dark: var(--acao-forte);
  --adm-success: var(--sucesso);
  --adm-success-strong: var(--sucesso);
  --adm-success-soft: var(--sucesso-fraco);
  --adm-success-line: var(--sucesso-linha);
  --adm-warning: var(--alerta);
  --adm-warning-strong: var(--alerta);
  --adm-warning-soft: var(--aviso-fundo);
  --adm-warning-line: var(--aviso-borda);
  --adm-danger: var(--perigo);
  --adm-danger-strong: var(--perigo);
  --adm-danger-soft: var(--perigo-fraco);
  --adm-danger-line: var(--perigo-linha);
  --adm-info: var(--acao);
  --adm-info-soft: var(--selecao);
  --adm-info-line: var(--acao);
  --adm-text: var(--tinta);
  --adm-muted: var(--tinta-2);
  --adm-line: var(--borda);
  --adm-soft: var(--fundo);
  --adm-surface: var(--folha);
  --adm-hover: var(--selecao);
  --adm-radius: var(--raio);
}

/* Vocabulário comum das telas operacionais. A intenção muda a cor; texto,
 * espaçamento, foco e área de toque permanecem iguais em O.S., PDV e admin. */
.gestao-ajuda,
.help,
.helptext,
body.change-form .help {
  color: var(--body-quiet-color, var(--adm-muted));
  font-size: 12px;
  line-height: 1.45;
}

/* Aviso: fundo/borda/texto do amarelo da casa; perigo e sucesso são as
 * variações análogas, sempre acima de 4,5:1. Canto de 3px, sem sombra. */
.gestao-aviso {
  box-sizing: border-box;
  margin: 0 0 14px;
  padding: 11px 14px;
  border: 1px solid var(--adm-warning-line);
  border-radius: var(--adm-radius);
  background: var(--adm-warning-soft);
  color: var(--aviso-texto);
  font-size: 13px;
  line-height: 1.5;
}

.gestao-aviso--sucesso {
  border-color: var(--adm-success-line);
  background: var(--adm-success-soft);
  color: var(--sucesso);
}

.gestao-aviso--alerta {
  border-color: var(--adm-warning-line);
  background: var(--adm-warning-soft);
  color: var(--aviso-texto);
}

.gestao-aviso--perigo {
  border-color: var(--adm-danger-line);
  background: var(--adm-danger-soft);
  color: var(--perigo);
}

/* Os QUATRO botões da casa: principal, secundário, perigo e link — ver
 * PADRAO-VISUAL.md. `.gestao-botao` sozinho é o principal; as variações
 * abaixo cobrem perigo e a confirmação positiva em dinheiro (verde). */
.gestao-botao {
  box-sizing: border-box;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: var(--adm-radius);
  background: var(--adm-blue);
  /* Sem `!important` (achado da auditoria do coordenador, 26/09/2026):
   * a cor branca é a regra para o principal/sucesso/alerta, mas o
   * PERIGO precisa de texto na cor de perigo (ver a variação logo
   * abaixo) — um `!important` aqui obrigaria outro nela para vencer, e
   * a trava do padrão visual não deixa `!important` novo entrar de
   * graça. Como as variações vêm DEPOIS desta regra no arquivo, a
   * cascata já resolve sozinha, sem precisar de peso extra. */
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none !important;
  cursor: pointer;
}

.gestao-botao:hover { filter: brightness(.92); }
.gestao-botao--primario { background: var(--adm-blue); }
.gestao-botao--sucesso { background: var(--adm-success-strong); }
.gestao-botao--alerta { background: var(--adm-warning-strong); }
/* PERIGO é o único dos quatro que NÃO é fundo cheio (PADRAO-VISUAL.md
 * §4: "fundo --folha, borda e texto --perigo") — a mesma regra que
 * `.submit-row .deletelink` já seguia. Corrigido na auditoria do
 * coordenador de 26/09/2026: até aqui esta classe pintava fundo
 * vermelho cheio com texto branco, direto contra o guia — quem usava
 * `.gestao-botao--perigo` puro (ex.: "Cancelar compra") saía errado; só
 * quem tinha um `<style>` de página por cima (ex.: "Cancelar O.S.")
 * corrigia por cima, tela por tela, sem consertar a fonte. */
.gestao-botao--perigo {
  background: var(--adm-surface);
  border-color: var(--adm-danger);
  color: var(--adm-danger);
}
.gestao-botao--perigo:hover {
  background: var(--adm-danger);
  color: #fff;
}
/* Secundário fora de tabela/submit-row (Rodada 2, achado do coordenador:
 * "senha alterada" precisava de um "Voltar" que não fosse o azul cheio,
 * fora de qualquer `.submit-row`/`.os-lista-abrir` já existente). */
.gestao-botao--secundario {
  background: var(--adm-surface);
  border-color: var(--borda-forte);
  /* Sem `!important`: a base (`.gestao-botao`) também não tem mais —
   * ver o comentário lá. A cascata (esta regra vem depois) já basta. */
  color: var(--adm-text);
}
.gestao-botao:focus-visible {
  outline: 2px solid var(--adm-blue);
  outline-offset: 2px;
}

/* Campo de arquivo em português — achado F4 da Rodada 2 do padrão visual
 * (25/09/2026). O `<input type="file">` cru mostra o texto do PRÓPRIO
 * NAVEGADOR ("Choose File"/"No file chosen" em inglês) — não dá para
 * trocar por CSS, é sombra do navegador. `atendimento/static/atendimento/
 * arquivo.js` (carregado na base, como o `busca.js`) esconde o `<input>`
 * de verdade (mesma técnica de `.select2-hidden-accessible`, abaixo: o
 * campo continua no HTML, mesmo `type`, `name`, `required`/`accept` —
 * só some visualmente) e desenha um `<label for="...">` (o gatilho NATIVO
 * do HTML para abrir o mesmo seletor do sistema, sem JavaScript decidir
 * nada) com o texto em português, mais o nome do arquivo escolhido. Central
 * — sem `_estilo_pdv.html` (só carregado no PDV/relatórios) para o botão
 * funcionar em QUALQUER tela com campo de arquivo, inclusive as do admin. */
.pdv-arquivo-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.pdv-arquivo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.pdv-arquivo-botao {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  background: var(--folha);
  color: var(--tinta);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.pdv-arquivo-botao:hover { background: var(--selecao); }
.pdv-arquivo-input:focus-visible + .pdv-arquivo-botao {
  outline: 2px solid var(--acao);
  outline-offset: 2px;
}
.pdv-arquivo-nome { font-size: 13px; color: var(--tinta-2); }

/* Cabeçalho de página por intenção.
 *
 * PARTE 8 (26/09/2026) — a catraca da porta dos fundos zerou este bloco.
 * Até a Parte 7 ele vivia atrás do escape hatch CATRACA:IGNORAR (o
 * marcador da porta dos fundos, ver testes_padrao_visual_regra.py)
 * porque tinha um painel escuro (degradê, raio de 18px, sombra) para os
 * tipos "central" e "relatório" — "até as centrais serem padronizadas".
 * As Partes 5 e 6
 * padronizaram TODAS elas (Financeiro, Central de relatórios,
 * Inteligência comercial, Central de Importações): as quatro passaram
 * para o tipo "operacional" (fundo da página, sem painel), e nenhuma
 * tela do sistema usa mais `--central`/`--relatorio` (conferido com
 * grep em todo template/JS antes de tirar). Por decisão do dono: não
 * existe mais painel escuro no sistema — as variantes mortas
 * (degradê, raio grande, sombra, `::after` decorativo, `--acao--primaria`)
 * saíram, e o marcador saiu de `MARCADORES_AUTORIZADOS`
 * (testes_padrao_visual_regra.py). O que sobra é só o tipo
 * "operacional" — zerado nas cinco categorias obrigatórias como o resto
 * da Parte 1. `testes_padrao_visual_lote3.py` continua com os seletores
 * `--central`/`--relatorio` no teste de contrato porque a classe CSS
 * (infraestrutura, sem regra usando-a) continua podendo existir se uma
 * tela futura precisar — o que sumiu foi a REGRA visual (painel
 * escuro), não o nome. */
.gestao-cabecalho {
  box-sizing: border-box;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}

.gestao-cabecalho > * {
  position: relative;
  z-index: 1;
}

.gestao-cabecalho__texto {
  min-width: 0;
}

.gestao-cabecalho h1 {
  margin: 5px 0 7px;
  font-size: 30px;
  line-height: 1.08;
  letter-spacing: -.035em;
}

.gestao-cabecalho p {
  max-width: 700px;
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
}

/* Rodada 2 (25/09/2026, achado E7 do coordenador): sem letter-spacing —
 * texto normal, igual ao resto da casa (PADRAO-VISUAL.md proíbe título
 * em maiúsculas ESPAÇADAS; aqui não é maiúscula, mas o espaçamento
 * sozinho já lia como "letreiro" em vez de texto comum). Central: vale
 * para todo sobretítulo/eyebrow do sistema de uma vez. Parte 8: 11,5px
 * não está na escala aprovada — 12,5px é a faixa de rótulo/eyebrow do
 * guia (PADRAO-VISUAL.md §2). */
.gestao-cabecalho__sobretitulo {
  display: block;
  font-size: 12.5px !important;
  font-weight: 700;
}

.gestao-cabecalho__acoes {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.gestao-cabecalho__acao,
.gestao-cabecalho__selo {
  box-sizing: border-box;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 14px;
  border-radius: var(--raio);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.gestao-cabecalho__acao {
  text-decoration: none !important;
  transition: background-color 180ms ease, border-color 180ms ease;
}

.gestao-cabecalho.gestao-cabecalho--operacional {
  overflow: visible;
  padding: 2px 2px 14px;
  border: 0;
  border-bottom: 1px solid var(--adm-line);
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--adm-text);
}

/* Parte 8: 28px não está na escala aprovada — 22px é o H1 de página do
 * guia (PADRAO-VISUAL.md §5), e nenhum teste media o valor antigo. */
.gestao-cabecalho.gestao-cabecalho--operacional h1 {
  color: var(--adm-navy) !important;
  font-size: 22px;
}

.gestao-cabecalho.gestao-cabecalho--operacional p {
  color: var(--adm-muted) !important;
}

.gestao-cabecalho.gestao-cabecalho--operacional
  .gestao-cabecalho__sobretitulo {
  color: var(--adm-blue) !important;
}

.gestao-cabecalho.gestao-cabecalho--operacional
  .gestao-cabecalho__acao,
.gestao-cabecalho.gestao-cabecalho--operacional
  .gestao-cabecalho__selo {
  border: 1px solid var(--borda-forte);
  background: var(--adm-hover);
  color: var(--adm-blue-dark) !important;
}

@media (max-width: 700px) {
  .gestao-cabecalho.gestao-cabecalho--operacional {
    align-items: flex-start;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 13px;
  }

  .gestao-cabecalho__acoes,
  .gestao-cabecalho__acao {
    width: 100%;
  }
}

/* ---- trilha (breadcrumbs) ---- */
div.breadcrumbs {
  border-bottom: 1px solid var(--borda);
  box-shadow: none;
}

/* Cabeçalho de folha/fieldset do Django. Até 24/09/2026 era uma faixa
 * azul-marinho em MAIÚSCULAS; virou título normal, forte, com uma linha
 * de 2px embaixo — a MESMA linguagem do resto do sistema (regra 24).
 *
 * ACHADO da Parte 2 (25/09/2026), relatado pelo dono: o título aparecia
 * "dentro de uma caixa com borda em volta" em toda ficha (a O.S. e os
 * cadastros). Causa: o Django 5.2 marca este h2 com a classe
 * `.fieldset-heading`, e `forms.css` (do PRÓPRIO Django) desenha
 * `border: 1px solid var(--header-bg)` nela — e `--header-bg` é a MESMA
 * variável que `tema_moderno.css` reaproveita para pintar a barra do
 * topo de grafite (`--header-bg: var(--menu-fundo)`). Como esta regra só
 * declarava `border-bottom`, os outros três lados (topo/esquerda/
 * direita) continuavam com o cinza-grafite de 1px do Django por baixo —
 * a "caixa" que sobrava em volta do título. `border: 0` primeiro tira os
 * quatro lados; a linha de baixo entra depois, sozinha. */
#content .module > h2,
#content .module caption,
#content .inline-group h2,
#content .fieldset-heading {
  min-height: auto;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 12px 15px;
  background: var(--adm-surface) !important;
  border: 0 !important;
  border-bottom: 2px solid var(--tinta) !important;
  color: var(--tinta) !important;
  font-family: var(--fonte-titulo);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

/* No Django atual, secoes recolhiveis colocam o h2 dentro de
 * details > summary. O seletor acima nao alcanca essa estrutura, entao
 * produto, orcamento e compra podiam exibir cabecalhos diferentes.
 * O summary continua com seu marcador e comportamento nativos; aqui muda
 * somente a aparencia do mesmo cabecalho usado nas secoes abertas. */
#content fieldset.module.collapse > details > summary {
  min-height: auto;
  box-sizing: border-box;
  margin: 0;
  padding: 12px 15px;
  border: 0;
  background: var(--adm-surface) !important;
  border-bottom: 2px solid var(--tinta) !important;
  color: var(--tinta) !important;
  font-family: var(--fonte-titulo);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
}

#content fieldset.module.collapse > details > summary > .fieldset-heading {
  display: inline;
  margin: 0;
  padding: 0;
  background: transparent !important;
  color: inherit !important;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

body.change-form:not(.model-ordemservico) fieldset.module {
  margin-bottom: 16px;
}

body.change-form:not(.model-ordemservico) fieldset.module > .description {
  margin: 0;
  padding: 11px 15px;
  border-bottom: 1px solid var(--adm-line);
  background: var(--adm-surface);
  color: var(--adm-muted);
  font-size: 12px;
  line-height: 1.55;
}

body.change-form:not(.model-ordemservico) .aligned .form-row {
  padding: 13px 15px;
  border-bottom-color: var(--adm-line);
}

body.change-form:not(.model-ordemservico) .aligned .form-row:hover {
  background: var(--adm-soft);
}

/* Rótulo EM CIMA do campo — inclusive nas fichas do Django, que hoje
 * colocam o rótulo à esquerda (`.aligned label { float: left }`). */
body.change-form:not(.model-ordemservico) .aligned label {
  display: block;
  float: none;
  width: auto;
  padding: 0 0 5px;
  color: var(--adm-text);
  font-size: 12.5px;
  font-weight: 600;
}

/* ACHADO da auditoria da Parte 2 (25/09/2026, P1): `label { display:
 * block }` acima não bastava — o Django embrulha rótulo+campo num
 * `.flex-container` com `display:flex` (linha), e um filho vira item de
 * flex pelas regras do PAI, não pelo próprio `display`. Resultado: o
 * rótulo continuava do LADO do campo em toda ficha de cadastro, só a
 * ficha da O.S. tinha o mesmo conserto (`.os-cad .form-row
 * .flex-container`, em `os_change_form.html`) — aqui é a MESMA correção,
 * central, para o resto do admin. Campo sozinho na linha vira bloco
 * (rótulo em cima, campo embaixo); vários campos na mesma linha
 * (`.form-multiline`) viram colunas que se ajustam sozinhas — igual à
 * O.S. */
body.change-form:not(.model-ordemservico) .aligned .form-row .flex-container:not(.form-multiline):not(.checkbox-row) {
  display: block;
}

/* Parte 5 (25/09/2026), resíduo achado na ficha da compra em 375px: o
 * `<div>` sem classe que o Django põe entre `.form-row` e
 * `.flex-container`, e o próprio `.flex-container` (acima), tinham
 * `width: auto` — e um `<div class="related-widget-wrapper">` lá dentro
 * (autocomplete do Fornecedor, com os ícones lápis/+/x/olho) tem
 * `display: flex` (a regra logo abaixo). Medido ao vivo: com um
 * descendente `flex` no meio do caminho, o Chrome contribuía o
 * MIN-CONTENT desse `flex` para o cálculo de largura automática destes
 * dois `<div>` de fora — mesmo eles sendo blocos comuns, sem relação
 * nenhuma com flex — e a largura "automática" saía maior que a do
 * PRÓPRIO `.form-row` que os contém (345px contra 320px disponíveis,
 * ~25px sobrando tela afora). Os quatro ícones RESULTAVAM cortados na
 * borda da tela, e o texto de ajuda ("Pode ficar em branco...") ficava
 * sem a margem direita do resto da ficha. `width: 0; min-width: 100%`
 * é o jeito padrão de forçar um bloco a ocupar EXATAMENTE o espaço do
 * pai, sem deixar o conteúdo de dentro "opinar" no cálculo — testado ao
 * vivo: os dois `<div>` passam a medir os mesmos 319,6px do `.form-row`,
 * os ícones cabem (o quarto quebra para a segunda linha, pelo
 * `flex-wrap: wrap` que já existia) e a ajuda ganha a margem de volta.
 * Central: conserta TODA ficha com campo relacionado (Fornecedor da
 * compra, Emitente, Categoria...), não só a compra. */
body.change-form:not(.model-ordemservico) .aligned .form-row > div,
body.change-form:not(.model-ordemservico) .aligned .form-row .flex-container {
  box-sizing: border-box;
  width: 0;
  min-width: 100%;
}

/* Rodada 2 (25/09/2026, achado E3 do coordenador): o texto de ajuda
 * (`.help`) do `forms.css` do Django tem `margin-left: 160px` de
 * fábrica — a largura reservada para o RÓTULO na versão antiga, com
 * rótulo do lado esquerdo do campo. Com o rótulo em cima (regra acima),
 * esses 160px sobraram soltos: a ajuda ficava ~160px deslocada para a
 * direita do campo a que se refere, em VEZ de embaixo dele. Conferido
 * também na ficha do Cliente (já padronizada desde a Parte 2) — mesmo
 * defeito, corrigido aqui de uma vez para o admin inteiro. */
body.change-form:not(.model-ordemservico) .aligned .form-row .help {
  margin-left: 0;
}

/* Checkbox continua na MESMA linha do rótulo (não é campo de texto —
 * "☑ Ativa" lado a lado é o padrão de qualquer checkbox, dentro ou fora
 * do admin); só o alinhamento vertical dos dois melhora. */
body.change-form:not(.model-ordemservico) .aligned .checkbox-row {
  align-items: center;
  gap: 8px;
}

body.change-form:not(.model-ordemservico) .aligned .checkbox-row label {
  display: inline;
  padding: 0;
}

body.change-form:not(.model-ordemservico) .aligned .form-multiline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px 18px;
  align-items: start;
}

body.change-form:not(.model-ordemservico) .aligned .form-multiline > div {
  min-width: 0;
}

/* Rodada 2 (25/09/2026, achado E2 do coordenador): o "•" de campo
 * obrigatório (Parte 2) lia como um PONTO no fim do rótulo — "Data da
 * compra •" parecia "Data da compra." de relance, e PADRAO-VISUAL.md §7
 * proíbe ponto final no rótulo. Removido sem `!important`, para os
 * comentários acima ficarem como histórico; a marcação de obrigatório
 * volta a ser só o `font-weight: bold` que `forms.css` já aplica em
 * `label.required`. */
body.change-form:not(.model-ordemservico) .aligned label.required::after {
  content: none;
}

/* Campo somente leitura = a MESMA caixa do campo editável ao lado
 * (PADRAO-VISUAL.md §7.1, decisão do dono em 26/09/2026: "tinha que ter
 * uns quadradinhos para ficar bonito igual os outros"). Antes disso,
 * `.readonly` só ganhava `min-height`/cor/negrito — texto solto, sem
 * caixa, destoando dos campos vizinhos (36px, borda, canto). Fundo
 * `var(--fundo)` (cinza da PÁGINA, não o branco do campo) é o que
 * sinaliza "isto não se edita", sem precisar de mais nada; o link de
 * dentro (o nome do cliente, por exemplo) continua o MESMO link azul —
 * a caixa muda o entorno, não o texto. `display:flex`+`align-items:
 * center` centraliza na vertical mesmo quando o texto quebra em mais de
 * uma linha (a caixa cresce, com `min-height`, nunca corta). */
body.change-form:not(.model-ordemservico) .aligned .readonly {
  box-sizing: border-box;
  width: 0;
  min-width: 100%;
  min-height: 36px;
  display: flex;
  align-items: center;
  padding: 8px 11px;
  border: 1px solid var(--adm-line);
  border-radius: var(--adm-radius);
  background: var(--fundo);
  color: var(--adm-text);
  font-weight: 400;
  white-space: normal;
  overflow-wrap: break-word;
}

/* Saldo negativo em vermelho (pedido do dono, 26/09/2026: "muda a cor
 * para vermelho no número que tá negativo para ser mais visível"). Vale
 * na ficha do produto e na coluna "Saldo nesta loja" da lista. Cor de
 * perigo do guia, com contraste acima de 4,5:1 no branco e no cinza da
 * caixa somente leitura. */
.saldo-negativo {
  color: var(--perigo);
  font-weight: 600;
}

/* P2 da auditoria da Parte 2 (25/09/2026): o mesmo campo de data/data-
 * hora da ficha da O.S. (`os_change_form.html`, achado F2 da Parte 1) —
 * central agora, para todo cadastro. O atalho "Hoje | 📅" do Django e o
 * aviso de fuso horário saem (digitar a data é o jeito normal de
 * preencher; o calendário só ocupava espaço e desalinhava a linha).
 * Campo de DATA sozinha usa `<p class="date">`, não `.datetime` — por
 * isso a regra mira os DOIS, não só `.datetime` (o mesmo motivo do F2).
 * Nada disto toca no valor do campo: é só o link/aviso ao lado que some;
 * gravação e validação continuam pelo mesmo `<input>` de sempre. */
body.change-form:not(.model-ordemservico) .datetimeshortcuts,
body.change-form:not(.model-ordemservico) .timezonewarning,
body.change-form:not(.model-ordemservico) p.datetime > br {
  display: none;
}

/* Data e hora do mesmo campo (`DateTimeField`) numa linha só, lado a
 * lado — sem isto o Django empilha "Data: [campo]" e "Hora: [campo]"
 * em duas linhas dentro do mesmo rótulo. */
body.change-form:not(.model-ordemservico) .aligned .datetime {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: nowrap;
}

body.change-form:not(.model-ordemservico) .aligned .datetime > p {
  margin: 0;
  flex: 1 1 0;
  min-width: 0;
}

/* Rodada 2 do padrao visual (25/09/2026, achado E2 do coordenador na
 * ficha da compra): faltava `box-sizing: border-box` aqui. Sem ele, o
 * `min-height: 36px` vale só para a CAIXA DE CONTEUDO — o padding
 * vertical de 5px (herdado do `forms.css` do Django, que esta regra so
 * sobrescreve nas laterais) e a borda somam por cima, e o campo nasce
 * com ~47,6px em VEZ de 36px. Isso nao era so da compra: o MESMO defeito
 * aparecia em qualquer ficha do admin (conferido na ficha do Cliente,
 * ja padronizada desde a Parte 2) — corrigido aqui, de uma vez, para o
 * sistema inteiro. Mesma causa raiz do achado F7 da Parte 1 (o botao
 * Excluir da barra de salvar), so que em campo, nao em botao. */
body.change-form input[type="text"],
body.change-form input[type="password"],
body.change-form input[type="email"],
body.change-form input[type="url"],
body.change-form input[type="number"],
body.change-form input[type="tel"],
body.change-form input[type="date"],
body.change-form input[type="time"],
body.change-form select {
  box-sizing: border-box;
  min-height: 36px;
  padding-left: 10px;
  padding-right: 10px;
  background-color: var(--adm-surface);
}

/* Rodada 2 (25/09/2026, achado E2 do coordenador): faltava
 * `background-color` aqui. O `base.css` do Django pinta TODO textarea
 * com `var(--body-bg)` — que nesta casa é `var(--fundo)`, o CINZA da
 * PÁGINA, não o branco do campo. Sem isso toda `<textarea>` do sistema
 * nascia acinzentada (conferido também na ficha do Cliente, já
 * padronizada desde a Parte 2) — corrigido de uma vez, para o sistema
 * inteiro, do mesmo jeito que os `<input>` já usam `var(--adm-surface)`
 * (linha acima). */
body.change-form textarea {
  min-height: 92px;
  padding: 10px 11px;
  line-height: 1.5;
  background-color: var(--adm-surface);
}

/* Login e "Alterar senha"/"Senha alterada" — Parte 6, Rodada 2 (achados
 * G1/G2 do coordenador): o CSS sozinho, por cima do `admin/login.html` e
 * do `registration/password_change_form.html` originais do Django, não
 * dava para tirar a barra do topo de quem não está logado, os dois-pontos
 * do rótulo (`label_tag` do Django sempre cola `LABEL_SUFFIX`), nem trocar
 * o texto/nome do botão — por isso as três telas ganharam template
 * próprio (`admin/login.html`, `registration/password_change_form.html`,
 * `registration/password_change_done.html`), copiados do Django e só
 * reformatados: mesmo `<form>`, mesmo `name`/`id` de campo, mesma
 * mensagem de erro (`EntradaDaLoja`, `atendimento/entrada.py`), mesmo
 * `next`. Aqui mora só a aparência das três, com uma classe só
 * (`.acesso-*`) para não repetir três vezes. */
.acesso-pagina {
  box-sizing: border-box;
  max-width: 380px;
  margin: 48px auto 0;
  padding: 28px 26px;
  background: var(--adm-surface);
  border: 1px solid var(--adm-line);
  border-radius: var(--adm-radius);
}
.acesso-marca {
  display: flex;
  justify-content: center;
  margin: 0 0 20px;
}
.acesso-marca img {
  max-width: 168px;
  width: 100%;
  height: auto;
  display: block;
}
.acesso-titulo {
  margin: 0 0 14px;
  font-size: 22px;
  font-weight: 700;
  color: var(--adm-text);
  text-align: center;
}
.acesso-ajuda-topo {
  margin: 0 0 18px;
  color: var(--adm-muted);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}
.acesso-campo { margin: 0 0 16px; }
.acesso-campo label {
  display: block;
  margin: 0 0 6px;
  color: var(--adm-text);
  font-size: 12.5px;
  font-weight: 600;
}
.acesso-campo input {
  box-sizing: border-box;
  width: 100%;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--adm-radius);
  background: var(--adm-surface);
  color: var(--adm-text);
  font-size: 14px;
}
.acesso-campo-ajuda {
  margin: 6px 0 0;
  color: var(--adm-muted);
  font-size: 12.5px;
  line-height: 1.5;
}
.acesso-campo-ajuda ul { margin: 0; padding-left: 18px; }
.acesso-esqueci { margin: 0 0 16px; font-size: 13px; }
.acesso-botao {
  box-sizing: border-box;
  width: 100%;
  text-align: center;
}
/* `responsive.css` do PRÓPRIO Django (carregado por ÚLTIMO, depois desta
 * folha) força maiúscula no botão de submit só no celular, dentro de
 * `.login` — não usamos mais `.submit-row`/`body.login` nas telas de
 * acesso, mas o seletor de origem é largo o bastante (`input[type=
 * submit]`) para valer a pena travar aqui também, sem depender de nenhuma
 * classe específica do Django. */
.acesso-pagina input[type="submit"],
.acesso-pagina button[type="submit"] {
  text-transform: none !important;
}

.select2-container--admin-autocomplete .select2-selection--single {
  min-height: 36px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--adm-radius);
  background: var(--adm-surface);
  transition: border-color 180ms ease;
}

.select2-container--admin-autocomplete.select2-container--focus
  .select2-selection--single,
.select2-container--admin-autocomplete.select2-container--open
  .select2-selection--single {
  border-color: var(--adm-blue);
  box-shadow: 0 0 0 3px rgba(31, 79, 191, .16);
}

.select2-container--admin-autocomplete .select2-selection--single
  .select2-selection__rendered {
  min-height: 34px;
  display: flex;
  align-items: center;
  padding-left: 10px;
  color: var(--adm-text);
}

.select2-container--admin-autocomplete .select2-selection--single
  .select2-selection__arrow {
  height: 34px;
}

.related-widget-wrapper {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 100%;
}

.related-widget-wrapper > select,
.related-widget-wrapper > .select2-container {
  flex: 1 1 180px;
  min-width: 145px;
}

.related-widget-wrapper-link {
  width: 30px;
  height: 30px;
  box-sizing: border-box;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  border: 1px solid var(--adm-line);
  border-radius: var(--adm-radius);
  background: var(--adm-soft);
  box-shadow: none;
  opacity: .68;
  transform: none !important;
  transition: opacity 160ms ease, border-color 160ms ease, background-color 160ms ease !important;
}

.related-widget-wrapper-link:hover,
.related-widget-wrapper-link:focus-visible {
  border-color: var(--adm-blue);
  background: var(--adm-hover);
  box-shadow: none;
  opacity: 1;
}

.related-widget-wrapper-link.add-related {
  border-color: var(--adm-success-line);
  background: var(--adm-success-soft);
  opacity: 1;
}

.related-widget-wrapper-link img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

#changelist .results {
  max-width: 100%;
  overflow-x: auto !important;
  overscroll-behavior-x: contain;
}

#result_list {
  min-width: max-content;
}

#result_list thead th {
  white-space: nowrap;
}

#result_list tbody td,
#result_list tbody th {
  vertical-align: middle;
}

/* Na lista larga de O.S., a pessoa precisa saber de qual aparelho é a
   linha e ainda alcançar as ações. Estas duas pontas permanecem visíveis
   enquanto somente o miolo da tabela rola na horizontal. */
.model-ordemservico.change-list #result_list .field-col_numero {
  position: sticky;
  z-index: 7;
  left: 0;
  background: inherit !important;
  box-shadow: 1px 0 0 var(--hairline-color, var(--borda));
}

.model-ordemservico.change-list #result_list .field-col_acoes {
  position: sticky;
  z-index: 7;
  right: 0;
  background: inherit !important;
  box-shadow: -1px 0 0 var(--hairline-color, var(--borda));
}

.model-ordemservico.change-list #result_list .column-col_numero,
.model-ordemservico.change-list #result_list .column-col_acoes {
  position: sticky;
  z-index: 8;
  background: var(--darkened-bg, var(--fundo));
}

.model-ordemservico.change-list #result_list .column-col_numero {
  left: 0;
}

.model-ordemservico.change-list #result_list .column-col_acoes {
  right: 0;
}

.model-ordemservico.change-list #result_list tbody tr:hover .field-col_numero,
.model-ordemservico.change-list #result_list tbody tr:hover .field-col_acoes {
  background: var(--adm-hover) !important;
}

/* F7 (auditoria da Parte 1, 24/09/2026): com dado de verdade (nome do
   cliente, telefone, prazo por extenso…) a "miolo" da tabela passa de
   1300px numa tela de 1440px — Status e Situação, encravados no meio,
   saíam da área visível sem que a rolagem horizontal desse nenhuma pista
   de que ainda havia mais para o lado. O dono achou "a coluna Status
   sumiu" porque, sem rolar, só o carimbo da Situação que já vem colado
   no Nº (`col_numero`) aparecia.
   NÃO dá para simplesmente reordenar `list_display` para pôr as duas
   perto do Nº — a POSIÇÃO na tupla é o índice usado por `?o=` (ordenação
   por clique no cabeçalho); mudar a ordem sem necessidade já intoxicou
   favoritos/links salvos numa rodada anterior (ver comentário em
   admin.py, acima de `list_display`). A solução que não mexe em índice
   nenhum é grudar Status e Situação no mesmo bloco fixo de Ações — como
   o Nº e as Ações, elas passam a acompanhar a tela mesmo com o miolo
   rolando. Larguras fixas (não só min-width) para o `right` de cada uma
   bater sempre no mesmo lugar, com folga sobre o texto mais comprido de
   cada coluna ("Em andamento" / "Enviar p/ Cliente").
   Só no desktop (>600px): no celular a lista já é outro layout, medido à
   parte por testes_lista_os_mobile_acabamento.py — grudar mais duas
   colunas ali tomaria o pouco espaço que sobra para o miolo. */
@media (min-width: 601px) {
  /* Largura fixa da coluna Ações: as colunas Status/Situação (abaixo)
     grudam à esquerda dela com um `right` calculado a partir desta
     largura — se ela variasse com o conteúdo, o cálculo furava. Só no
     desktop: no celular os dois botões empilham (regra já existente,
     mais abaixo) e a largura precisa ficar livre para isso. */
  .model-ordemservico.change-list #result_list .field-col_acoes,
  .model-ordemservico.change-list #result_list .column-col_acoes {
    box-sizing: border-box;
    width: 145px;
    min-width: 145px;
    max-width: 145px;
  }

  .model-ordemservico.change-list #result_list .field-status_colorido,
  .model-ordemservico.change-list #result_list .field-col_situacao {
    position: sticky;
    z-index: 7;
    background: inherit !important;
  }

  .model-ordemservico.change-list #result_list .column-status_colorido,
  .model-ordemservico.change-list #result_list .column-col_situacao {
    position: sticky;
    z-index: 8;
    background: var(--darkened-bg, var(--fundo));
    box-sizing: border-box;
    width: 120px;
    min-width: 120px;
    max-width: 120px;
  }

  .model-ordemservico.change-list #result_list .column-col_situacao {
    width: 160px;
    min-width: 160px;
    max-width: 160px;
  }

  .model-ordemservico.change-list #result_list .field-col_situacao,
  .model-ordemservico.change-list #result_list .column-col_situacao {
    right: 145px;
  }

  .model-ordemservico.change-list #result_list .field-status_colorido,
  .model-ordemservico.change-list #result_list .column-status_colorido {
    right: 305px;
    box-shadow: -1px 0 0 var(--hairline-color, var(--borda));
  }

  .model-ordemservico.change-list #result_list tbody tr:hover .field-status_colorido,
  .model-ordemservico.change-list #result_list tbody tr:hover .field-col_situacao {
    background: var(--adm-hover) !important;
  }
}

@media (max-width: 600px) {
  .model-ordemservico.change-list #result_list .field-col_acoes .button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    margin: 0;
  }

  .model-ordemservico.change-list #result_list .field-col_acoes .button + .button {
    margin-top: 4px;
  }
}

/* Régua mínima de leitura. O sistema tinha textos operacionais entre 9 e
   11 px; em tela de balcão isso parecia anotação miúda e cansava a vista.
   Escala da casa: 12 / 12,5-13 (rótulo) / 14 / 16 / 22 / 30 (nº da O.S.,
   mono) — ver PADRAO-VISUAL.md. */
/* P6 da auditoria da Parte 2 (25/09/2026): o cabeçalho da tabela ainda
 * saía em MAIÚSCULAS espaçadas — texto normal, sem gritar, `text-
 * transform: uppercase` do PRÓPRIO Django (`changelist.css`) nunca
 * tinha sido revertido aqui. Proibido pelo guia (§15) e pelo §10
 * ("sem maiúsculas espaçadas"). */
#result_list thead th {
  font-size: 12px;
  text-transform: none;
}

#result_list tbody td,
#result_list tbody th {
  font-size: 14px;
}

.help,
.helptext,
body.change-form .help {
  font-size: 12px;
  line-height: 1.45;
}

.selector h2,
.orc-campo > span {
  font-size: 12px;
}

.inline-group {
  margin: 18px 0;
}

.inline-group > .tabular > fieldset.module {
  max-width: 100%;
  margin: 0;
  border: 0;
  border-radius: inherit;
  box-shadow: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.inline-group .tabular table {
  width: 100%;
  min-width: max-content;
  border-collapse: separate;
  border-spacing: 0;
}

.inline-group .tabular thead th {
  padding: 10px 9px;
  border-bottom: 1px solid var(--adm-line);
  background: var(--adm-soft);
  color: var(--adm-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

body.dashboard .pn-fila-desc,
body.dashboard .pn-tarefa-aparelho,
body.dashboard .pn-tarefa-meta,
body.dashboard .pn-tarefa-estado,
body.dashboard .pn-tarefa-botao,
body.dashboard .pn-ver-todas,
body.dashboard .pn-card .r,
body.dashboard .pn-neutro .r,
body.dashboard .pn-status .r {
  font-size: 12px !important;
  line-height: 1.4;
}

body.dashboard .pn-prioridade {
  font-size: 12px !important;
}

.inline-group .tabular tbody tr.form-row > td {
  padding: 10px 8px;
  border-top: 0;
  border-bottom: 1px solid var(--adm-line);
  background: var(--adm-surface);
  vertical-align: top;
  transition: background-color 140ms ease;
}

.inline-group .tabular tbody tr.form-row:hover > td {
  background: var(--adm-soft);
}

.inline-group .tabular tbody tr.form-row td.original {
  min-width: 28px;
  color: var(--adm-muted);
}

/* Faixa do rótulo "original" (25/09/2026): em linha de item JÁ salvo
   (`tr.has_original`), o Django desenha o `__str__()` do item num `<p>`
   `position: absolute` dentro de `td.original` ("1.000 x Tela iPhone 11
   #00") e reserva uma faixa de `2em` no topo das OUTRAS células para ele
   (forms.css: `.inline-group .tabular tr.has_original td`). O `padding:
   10px 8px` da regra `tr.form-row > td` acima é mais específico e
   apagava essa faixa: o rótulo caía por cima do conteúdo da primeira
   coluna (no orçamento, "Aparelho deste serviço" ficava ilegível). A
   faixa volta aqui; `td.original` sobe o rótulo para o topo da linha.
   Os inlines que tratam o rótulo por conta própria desfazem isto com
   seletor de id (mais forte): a compra logo abaixo e `#ordens-group`
   mais adiante. */
.inline-group .tabular tbody tr.form-row.has_original > td {
  padding-top: 24px;
}

.inline-group .tabular tbody tr.form-row.has_original > td.original {
  padding-top: 4px;
}

/* A compra esconde o rótulo (vendas/compra/change_form.html): sem ele,
   a faixa reservada sobraria vazia no topo de cada item. */
.model-compra #itens-group .tabular tbody tr.form-row.has_original > td {
  padding-top: 10px;
}

/* C9 [LEVE-MÉDIO, REGRESSÃO] (3ª rodada, 23/09/2026): o `position:
   relative` do achado C2 (2ª rodada) tinha ficado em cima de TODO
   `td.original` de TODO inline tabular do sistema — não só o da ficha
   do cliente, que era o único com o problema. Isso espremia o rótulo
   "original" de OUTROS inlines tabulares (ex.: itens do orçamento,
   cujo `<p>` mostra "2.000 x Troca do conector de carga"): confinado
   dentro da própria célula estreita (min-width: 28px acima), o texto
   ficava cortado ("2.000 x" sem o resto). A regra volta a valer só
   para o inline de O.S. da ficha do cliente (`#ordens-group`), onde
   o `__str__()` longo ("O.S. #7 — Cliente X — M54") de fato precisa
   dela — ver o comentário original do C2 logo abaixo. */
#ordens-group .tabular tbody tr.form-row td.original {
  position: relative;
}

/* Aqui o rótulo "original" é elemento comum (C2 abaixo), não flutua:
   dispensa a faixa reservada de `tr.has_original` lá de cima. */
#ordens-group .tabular tbody tr.form-row.has_original > td {
  padding-top: 10px;
}

/* C2 (2ª rodada, 23/09/2026): mesmo com o `position: relative` acima, o
   rótulo "original" (`<p>`) do inline de O.S. na ficha do CLIENTE ainda
   invadia a coluna "Aparelho" — `OrdemServico.__str__()` é uma frase
   ("O.S. #7 — Cliente X — M54"), bem mais longa do que o rótulo padrão
   do Django ("NomeDoModelo object (7)") que este canto minúsculo
   (fonte de 9px) foi desenhado para caber. A frase já está redundante
   aqui: "Aparelho" e as outras colunas da MESMA linha já mostram esses
   dados. Em vez de truncar (perderia o link "Visualizar" junto, que
   fica dentro do mesmo <p>), zera-se a fonte do texto do "original" e
   devolve-se só no link — some a frase repetida, fica o link, sem
   invadir a coluna vizinha. Escopo só nesta lista (`#ordens-group`):
   outros inlines do sistema têm `__str__()` curto e não sofrem disso.

   Zerar a fonte (abaixo) sozinho não bastava: o link "Visualizar" —
   ainda dentro do MESMO <p> `position: absolute` do Django — continuava
   flutuando fora do fluxo normal da tabela, largo o bastante para
   invadir a coluna vizinha de qualquer jeito (a palavra "Visualizar"
   sozinha já não cabe nos ~28px que esta coluna tinha reservado). A
   correção de verdade é tirar este `<p>` do `position: absolute`: como
   um elemento comum, ele passa a contar para a largura da PRÓPRIA
   célula na tabela — e a tabela (que não usa `table-layout: fixed`)
   empurra a coluna "Aparelho" para o lado o quanto for preciso, em vez
   de deixar o link flutuar por cima dela. */
#ordens-group .tabular tbody tr.form-row td.original p {
  position: static;
  font-size: 0;
  white-space: nowrap;
  /* C8 [MÉDIO, REGRESSÃO do C2] (3ª rodada, 23/09/2026): o `height:
     1.1em; overflow: hidden` que o PRÓPRIO Django dá a este `<p>`
     (forms.css) é relativo à fonte DESTE elemento — que a regra acima
     zera. `1.1em` de `font-size: 0` é 0px: o link "Visualizar" (o
     `<a>` filho, com fonte de verdade) ficava confinado numa caixa de
     altura quase nula, cortado por `overflow: hidden` (sobrava uma
     tira de ~4px, ~27% da altura do link — medido e provado no
     navegador). A altura auto acompanha o `<a>` de dentro em vez do
     `em` zerado do pai. Não bastou sozinha: o `line-height` herdado
     (número sem unidade, recalculado por elemento) também zerava — 0
     multiplicado pela fonte de 11px do link continua 0. O link
     precisa do PRÓPRIO `line-height` (abaixo), não do herdado. */
  height: auto;
}
#ordens-group .tabular tbody tr.form-row td.original p a {
  font-size: 12px;
  line-height: normal;
}

.inline-group .tabular input[type="text"],
.inline-group .tabular input[type="number"],
.inline-group .tabular select,
.inline-group .tabular .select2-container {
  min-width: 125px;
}

.inline-group .tabular .field-descricao input {
  min-width: 235px;
}

.inline-group .tabular .field-produto .select2-container,
.inline-group .tabular .field-servico .select2-container {
  min-width: 245px;
}

.inline-group .add-row td {
  padding: 10px 12px !important;
  background: var(--adm-soft) !important;
}

.inline-group .add-row a {
  min-height: 32px;
  /* Parte 5 (25/09/2026), resíduo achado na ficha da compra em 375px:
     algum seletor mais específico do PRÓPRIO Django (o link tem `role=
     "button"`) reescrevia `display` para `block` por cima deste, e o
     `<a>` esticava para os 100% do `<td colspan="8">` inteiro — que, numa
     tabela larga com rolagem própria (`#itens-group`, achado E4 da Parte
     4), pode passar de 1300px. O texto "Adicionar item" continuava
     visível e clicável no canto esquerdo (onde a coluna Produto fica
     grudada), mas a MOLDURA do botão vazava tela afora — a caixa "saía
     da folha" mesmo sem nada quebrar de verdade. `!important` faz este
     `inline-flex` (encolhe pelo conteúdo) ganhar do bloco do Django. */
  display: inline-flex !important;
  align-items: center;
  padding: 0 12px;
  border: 1px solid var(--adm-blue);
  border-radius: var(--adm-radius);
  background: var(--adm-surface);
  color: var(--adm-blue-dark) !important;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
}

.inline-group .add-row a:hover {
  background: var(--adm-hover);
}

.inline-group .delete {
  text-align: center;
}

/* P7 da auditoria da Parte 2 (25/09/2026): "grudada" (`position: sticky`)
 * a barra flutuava por cima do conteúdo no meio da ficha em qualquer
 * fieldset que terminasse perto do fim da tela visível — pior ainda na
 * FOTO de página inteira (a ferramenta de captura "congela" o sticky na
 * posição de quando parou de rolar, cobrindo o campo que estava embaixo
 * dele bem no meio da imagem). A O.S. já não usa este flutuante (tem
 * rodapé próprio, `.os-rodape`, com `.submit-row` escondido). Aqui a
 * barra volta a ficar no FLUXO normal, no fim do formulário — nunca por
 * cima de nada — com uma linha em cima no lugar do desfoque. */
.submit-row {
  position: static;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px;
  margin-top: 14px;
  overflow: visible;
  background: var(--adm-surface);
  border: 1px solid var(--adm-line);
  border-radius: var(--adm-radius);
}

.submit-row p {
  margin: 0;
}

/* Salvar é sempre o PRINCIPAL (azul cheio); os demais botões do rodapé
 * (Salvar e continuar editando, Salvar e adicionar outro) são
 * SECUNDÁRIOS — branco, borda forte, texto tinta. */
.submit-row input,
.submit-row a.button {
  /* Resíduo da Parte 3 (25/09/2026): `min-height` sozinho deixa o
   * `padding` da linha de baixo somar por cima da altura em elementos
   * que não nascem `box-sizing: border-box` por padrão do navegador
   * (o `<a>` do botão perigo, ao lado) — mesmo defeito, e mesma
   * solução, do §4.1 do PADRAO-VISUAL.md (botão compacto de tabela). */
  box-sizing: border-box;
  height: 36px;
  margin: 0 !important;
  padding: 0 15px;
  border: 1px solid var(--borda-forte) !important;
  background: var(--adm-surface) !important;
  color: var(--adm-text) !important;
  box-shadow: none !important;
  border-radius: var(--adm-radius);
  font-size: 14px;
  font-weight: 600;
}

/* Achado da Parte 2 (25/09/2026): "Salvar" saía em CAIXA ALTA e com peso
 * 400 — não era texto digitado assim, era `.submit-row input.default`
 * do PRÓPRIO Django (`base.css`/`forms.css`), que empata em
 * especificidade com as regras acima e ganha por vir depois na cascata.
 * `!important` aqui vence os dois: maiúsculas (proibidas no §4 do guia)
 * e o peso errado. */
.submit-row input.default {
  text-transform: none !important;
  font-weight: 600 !important;
}

.submit-row input:hover,
.submit-row a.button:hover {
  border-color: var(--adm-blue) !important;
  background: var(--adm-hover) !important;
  color: var(--adm-blue-dark) !important;
}

.submit-row input[name="_save"] {
  order: 20;
  border-color: var(--adm-blue) !important;
  background: var(--adm-blue) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.submit-row input[name="_save"]:hover {
  border-color: var(--adm-blue-dark) !important;
  background: var(--adm-blue-dark) !important;
  color: #fff !important;
}

.submit-row input[name="_continue"] { order: 15; }
.submit-row input[name="_addanother"] { order: 10; }
.submit-row .deletelink-box {
  order: -10;
  margin-right: auto;
}

/* PERIGO: branco, borda e texto na cor de perigo — nunca fundo vermelho
 * cheio fora do botão de dinheiro/confirmação. */
.submit-row .deletelink,
.object-tools .deletelink {
  /* mesmo motivo do `.submit-row input` acima: altura EXATA, não só
   * mínima, para bater com os outros botões da barra (residuo da
   * Parte 3, 25/09/2026).
   *
   * Rodada 2 (25/09/2026, achado E1 do coordenador na ficha da compra):
   * `height`/`display`/`padding`/`line-height` precisaram de
   * `!important` — sem eles, `.submit-row a.deletelink` do PRÓPRIO
   * `forms.css` do Django (0-2-1: duas classes + a tag `a`) ganha do
   * nosso `.submit-row .deletelink` (0-2-0: só duas classes), porque o
   * `forms.css` também é carregado DEPOIS deste arquivo na página. O
   * resultado sem `!important`: caixa de 15px (`0.9375rem`) de altura,
   * com o padding de 10px por cima empurrando o texto para fora dela —
   * o botão "Excluir" baixo e com a letra vazando por baixo. */
  box-sizing: border-box;
  height: 36px !important;
  display: inline-flex !important;
  align-items: center;
  padding: 0 13px !important;
  line-height: normal !important;
  border: 1px solid var(--adm-danger) !important;
  border-radius: var(--adm-radius);
  background: var(--adm-surface) !important;
  color: var(--adm-danger) !important;
  box-shadow: none !important;
  font-size: 14px;
  font-weight: 600;
  transition: background-color 140ms ease, color 140ms ease;
}

.submit-row .deletelink:hover,
.object-tools .deletelink:hover {
  background: var(--adm-danger) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.submit-row .deletelink:active,
.object-tools .deletelink:active {
  box-shadow: none !important;
}

/* .addlink (novo cadastro) é a ação de criar — PRINCIPAL. .historylink e
 * .viewlink são baixa ênfase — LINK, sem caixa, sublinhado. */
.object-tools .addlink {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border: 1px solid var(--adm-blue) !important;
  border-radius: var(--adm-radius);
  background: var(--adm-blue) !important;
  color: #fff !important;
  font-size: 14px;
  font-weight: 600;
}

.object-tools .addlink:hover {
  background: var(--adm-blue-dark) !important;
  border-color: var(--adm-blue-dark) !important;
}

/* Carimbo de status da O.S. (cabeçalho da ficha e coluna Status/Situação
 * da lista): fundo branco, borda de 1,5px e texto na cor do status,
 * 12px/700, canto de 2px, altura 24px. Mapeamento fechado do dono
 * (24/09/2026) — ver --status-* em tema_moderno.css e PADRAO-VISUAL.md. */
.st {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 8px;
  border: 1.5px solid currentColor;
  border-radius: var(--raio-selo);
  background: var(--folha);
  font: 700 12px/1 var(--fonte);
  white-space: nowrap;
}
.st--entrada { color: var(--status-entrada); }
.st--orcamento { color: var(--status-orcamento); }
.st--aberto { color: var(--status-aberto); }
.st--andamento { color: var(--status-andamento); }
.st--pausado { color: var(--status-pausado); }
.st--concluido { color: var(--status-concluido); }
.st--faturado { color: var(--status-faturado); }
.st--cancelado { color: var(--status-cancelado); }
.st--finalizado { color: var(--status-finalizado); }

/* Botões da coluna Ações da lista de O.S. — SECUNDÁRIO para abrir, e o
 * verde de "Receber" como exceção do principal (confirmação de dinheiro).
 * F7 (auditoria da Parte 1, 24/09/2026): variação COMPACTA dos botões da
 * casa para caber numa linha de tabela (altura ~30px, em vez dos 36px de
 * fora de tabela) — ver PADRAO-VISUAL.md §4.
 *
 * R2 da Rodada 2 (25/09/2026): saíam os dois AZUIS CHEIOS e colados. O
 * culpado era o próprio `base.css` do Django: a regra dele traz `a.button`
 * na lista (elemento + classe), e como o link daqui É um `<a class="button
 * os-lista-abrir">`, ele casava por ESSE seletor — mais específico que o
 * nosso `.os-lista-abrir` sozinho (uma classe só). `a.os-lista-abrir`
 * empata em especificidade com `a.button` e, vindo depois no CSS, vence.
 * O espaçamento entre os dois ganhou `margin-left` — sem isso ficam
 * colados na mesma célula. */
a.os-lista-abrir,
a.os-lista-receber {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 10px;
  border-radius: var(--raio);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
a.os-lista-abrir {
  background: var(--folha);
  color: var(--tinta);
  border: 1px solid var(--borda-forte);
}
a.os-lista-abrir:hover { background: var(--selecao); }
a.os-lista-receber {
  background: var(--sucesso);
  color: #fff;
  border: 0;
  margin-left: 6px;
}
a.os-lista-receber:hover { filter: brightness(.93); }

.object-tools .historylink,
.object-tools .viewlink {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 0 4px;
  border: 0 !important;
  background: transparent !important;
  color: var(--adm-blue) !important;
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* A ficha de usuário é longa e termina com campos de acesso importantes.
 * A barra global sticky cobria justamente esses campos durante a rolagem.
 * Mantê-la no fluxo somente nesta ficha preserva o atalho nas demais telas
 * sem apresentar uma ação como se estivesse dentro de outra seção. */
body.model-user.change-form .submit-row {
  position: static;
  bottom: auto;
  margin-top: 24px;
  border-top: 1px solid var(--adm-line);
  background: var(--adm-surface);
  backdrop-filter: none;
}

/* As permissões continuam sendo os checkboxes reais do Django; muda apenas
 * a distribuição visual. Herdadas, individuais, marcadas e desabilitadas
 * conservam os mesmos atributos e o mesmo POST. */
body.model-user.change-form .field-chaves_extras #id_chaves_extras {
  display: grid;
  width: 100%;
  flex: 1 1 100%;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 8px 16px;
}

body.model-user.change-form .field-chaves_extras #id_chaves_extras > div {
  min-width: 0;
}

body.model-user.change-form .field-chaves_extras #id_chaves_extras label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.35;
}

body.model-user.change-form .field-chaves_extras #id_chaves_extras input {
  flex: 0 0 auto;
  margin-top: 2px;
}

.object-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 7px;
}

/* P5 da auditoria da Parte 2 (25/09/2026): na lista de Produto (e em
 * qualquer lista que acrescente um `<nav class="object-tools">` PRÓPRIO
 * antes de `{{ block.super }}`, como as abas "Cadastrados | Etiquetas"),
 * o `<ul class="object-tools">` que o Django desenha (com "Adicionar X")
 * é um elemento SEPARADO — e o Django deixa `float: right; margin-top:
 * -48px` nos dois (`base.css`), pensado para grudar um H1 visível. Nas
 * listas desta casa o H1 quase sempre está escondido (o título mora no
 * cartão de resumo — `.cl-resumo`, `.os-resumo`…), então o `-48px`
 * empurrava o botão "Adicionar" para cima da barra de abas, sobrepondo
 * os dois. Em toda LISTA (não na ficha — lá o link "Histórico" sozinho
 * ainda usa o truque para ficar ao lado do H1, sem conflito nenhum) a
 * barra de ferramentas volta ao fluxo normal, abaixo do que vier antes
 * dela. */
body.change-list .object-tools {
  float: none;
  position: static;
  margin-top: 0;
}

/* Parte 4 (padrão visual, 25/09/2026): a aba "Cadastrados | Etiquetas" da
 * lista de Produto usava `style=""` para virar as abas em vez de um botão
 * "Adicionar" alinhado à direita — `justify-content: flex-end` do
 * `.object-tools` central não serve aqui. Move o valor fixo para uma
 * classe, sem mudar o comportamento da barra. */
.produto-abas-object-tools {
  justify-content: flex-start;
  gap: 18px;
  margin-bottom: 18px;
}

.object-tools li { margin: 0; }
/* F6 (auditoria da Parte 1, 24/09/2026): o Django desenha estes links em
   CAIXA ALTA miúda de fábrica (`.object-tools a:link, .object-tools
   a:visited { text-transform: uppercase }`, base.css) — nenhuma das
   regras de cor/tamanho abaixo tocava essa propriedade, então "Histórico"
   continuava saindo "HISTÓRICO". O `:link`/`:visited` do Django dá mais
   especificidade que um `.object-tools a` simples — precisa de
   `!important` para vencer, não só vir depois no cascade. Botão do tipo
   link é sempre texto normal, igual ao resto da casa (regra 24). */
.object-tools a {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 0 13px;
  text-transform: none !important;
  letter-spacing: normal !important;
}

.paginator {
  padding: 11px 13px !important;
  background: var(--adm-surface);
  color: var(--adm-muted);
}

.selector {
  width: min(100%, 920px);
  display: grid;
  grid-template-columns: minmax(250px, 1fr) 52px minmax(250px, 1fr);
  gap: 10px;
}

.selector-available,
.selector-chosen {
  width: auto !important;
  border: 1px solid var(--adm-line);
  border-radius: var(--adm-radius);
  overflow: hidden;
  background: var(--adm-surface);
}

.selector h2 {
  min-height: auto;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 10px 12px !important;
  background: var(--adm-surface);
  border-bottom: 2px solid var(--tinta);
  color: var(--tinta);
  font-family: var(--fonte-titulo);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.selector select {
  min-height: 250px;
  border: 0;
  border-radius: 0;
}

.selector .selector-filter {
  padding: 8px;
  border-bottom: 1px solid var(--adm-line);
  background: var(--adm-soft);
}

.selector .selector-filter input {
  width: 100%;
  box-sizing: border-box;
}

.selector-chooser {
  width: 52px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  margin: 0 !important;
}

.selector-chooser li { margin: 0; }

.errorlist {
  margin: 0 0 7px !important;
  padding: 8px 10px !important;
  border: 1px solid var(--adm-danger-line);
  border-radius: var(--adm-radius);
  background: var(--adm-danger-soft);
  color: var(--adm-danger);
  font-size: 12.5px;
  font-weight: 700;
}

.orc-fluxo {
  margin-top: 18px;
  border: 1px solid var(--adm-line);
  border-radius: var(--adm-radius);
  background: var(--adm-surface);
  box-shadow: none;
  overflow: hidden;
}

.orc-fluxo-cabecalho {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px;
  background: var(--adm-surface);
  border-bottom: 2px solid var(--tinta);
  color: var(--tinta);
}

.orc-fluxo-cabecalho h2 {
  margin: 0 0 4px;
  color: var(--tinta) !important;
  font-size: 16px;
}

.orc-fluxo-cabecalho p {
  margin: 0;
  color: var(--adm-muted);
  font-size: 12px;
}

.orc-fluxo-corpo {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px 18px;
}

.orc-fluxo-corpo form {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 9px;
  margin: 0;
}

.orc-campo {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.orc-campo > span {
  color: var(--adm-muted);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.orc-check {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--adm-text);
  font-size: 12px;
  font-weight: 600;
}

.orc-aviso {
  flex: 1 1 100%;
  margin: 0;
}

@media (max-width: 900px) {
  .selector { grid-template-columns: 1fr; }
  .selector-chooser { width: 100%; flex-direction: row; }
  .submit-row { position: static; }
}

@media (max-width: 650px) {
  body.change-form:not(.model-ordemservico) .aligned .form-row {
    padding: 11px 12px;
  }
  .submit-row {
    align-items: stretch;
    flex-direction: column;
  }
  .submit-row input,
  .submit-row a,
  .submit-row p {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
  }
  .submit-row .deletelink-box { margin: 0; }
  .orc-fluxo-cabecalho,
  .orc-fluxo-corpo,
  .orc-fluxo-corpo form {
    align-items: stretch;
    flex-direction: column;
  }
  .orc-fluxo-corpo button,
  .orc-fluxo-corpo input[type="text"],
  .orc-fluxo-corpo select {
    width: 100%;
    box-sizing: border-box;
  }
  body.model-user.change-form .field-chaves_extras #id_chaves_extras {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .related-widget-wrapper-link,
  .form-row { transition: none !important; }
}

/* A área neutra das listas abre a mesma ficha do link principal. Células
   interativas continuam sob responsabilidade dos próprios controles. */
.change-list #result_list tbody tr.pdv-linha-clicavel {
  cursor: pointer;
}

tr.pdv-linha-clicavel {
  cursor: pointer;
}

tr.pdv-linha-clicavel:focus-within {
  outline: 2px solid var(--adm-blue);
  outline-offset: -2px;
}

body:not(.change-list) tr.pdv-linha-clicavel:hover > td,
body:not(.change-list) tr.pdv-linha-clicavel:hover > th,
body:not(.change-list) tr.pdv-linha-clicavel:focus-within > td,
body:not(.change-list) tr.pdv-linha-clicavel:focus-within > th {
  background: var(--adm-hover) !important;
}

.change-list #result_list tbody tr.pdv-linha-clicavel:hover > td,
.change-list #result_list tbody tr.pdv-linha-clicavel:hover > th,
.change-list #result_list tbody tr.pdv-linha-clicavel:focus-within > td,
.change-list #result_list tbody tr.pdv-linha-clicavel:focus-within > th {
  background: var(--adm-hover) !important;
}

.change-list #result_list tbody tr.pdv-linha-clicavel:focus-within {
  outline: 2px solid var(--adm-blue);
  outline-offset: -2px;
}

/* O sistema fica SEMPRE CLARO nesta etapa (ver o bloco equivalente no fim
   de tema_moderno.css): a linha marcada usa o mesmo --adm-hover em
   qualquer tema, então as regras de escuro que pintavam esta linha de
   azul-marinho (`html[data-theme="dark"]`, `prefers-color-scheme: dark`)
   foram retiradas — não há mais um segundo valor para revogar. */

/* R6 da Rodada 2 do padrão visual (25/09/2026): a barra de filtro é do
 * PRÓPRIO Django (`admin/change_list.html`/`admin/filter.html`) e nunca
 * tinha ganhado estilo aqui — resultado eram 3 aparências diferentes na
 * mesma barra: link cinza pequeno ("Mostrar contagem"/"Limpar filtros"),
 * `<summary>` branco cru do navegador ("Por X") e a lista de opções sem
 * nenhum botão. Um estilo só, secundário compacto (PADRAO-VISUAL.md §4),
 * e a opção marcada usa estado (peso + fundo), não o azul principal. */
#changelist-filter-extra-actions a,
#changelist-filter details summary {
  display: inline-flex;
  align-items: center;
  height: 28px;
  margin: 2px 4px 6px 0;
  padding: 0 10px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  background: var(--folha);
  color: var(--tinta);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  list-style: none;
}
#changelist-filter-extra-actions a:hover,
#changelist-filter details summary:hover { background: var(--selecao); }
#changelist-filter details summary::-webkit-details-marker { display: none; }
#changelist-filter details[open] summary {
  border-color: var(--acao);
  color: var(--acao);
}
#changelist-filter ul {
  margin: 4px 0 10px;
  padding: 0;
  list-style: none;
}
#changelist-filter ul li a {
  display: block;
  padding: 6px 10px;
  border-radius: var(--raio);
  color: var(--tinta);
  text-decoration: none;
  font-size: 13px;
}
#changelist-filter ul li a:hover { background: var(--selecao); }
#changelist-filter ul li.selected a {
  font-weight: 700;
  color: var(--acao);
  background: var(--selecao);
}