/*
  Tokens e peças comuns ao site de vendas (site.css) e ao sistema (app.css).
  Paleta tirada da oficina: aço, concreto, amarelo de segurança, azul de óleo.
*/
:root {
  --aco: #1c2329;
  --aco-2: #2a343c;
  --graxa: #5b6670;
  --linha: #d3d8d6;
  --concreto: #e9ecea;
  --fundo: #f3f5f4;
  --papel: #ffffff;
  --seguranca: #f5c518;
  --seguranca-escuro: #8a6d00;
  --oleo: #1f5f8b;
  --oleo-escuro: #174a6d;
  --ok: #2f7d4f;
  --erro: #b3261e;

  --fonte: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --raio: 6px;
  --raio-lg: 10px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--fonte); font-size: 16px; line-height: 1.5; color: var(--aco); background: var(--fundo); }
img, svg { max-width: 100%; display: block; }
a { color: var(--oleo); }
h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; font-stretch: 112%; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--seguranca); outline-offset: 2px; }

/* Botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  padding: .6em 1.1em; border: 1px solid transparent; border-radius: var(--raio);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap;
  background: var(--papel); color: var(--aco); border-color: var(--linha);
}
.btn:hover { border-color: var(--graxa); }
.btn-primario { background: var(--oleo); color: #fff; border-color: var(--oleo); }
.btn-primario:hover { background: var(--oleo-escuro); border-color: var(--oleo-escuro); }
.btn-destaque { background: var(--seguranca); color: var(--aco); border-color: var(--seguranca); }
.btn-destaque:hover { background: #e6b800; border-color: #e6b800; }
.btn-fantasma { background: transparent; border-color: transparent; color: inherit; }
.btn-fantasma:hover { border-color: var(--linha); }
.btn-pequeno { padding: .35em .75em; font-size: .875rem; }

/* Formulários */
.campo { display: flex; flex-direction: column; gap: .3rem; margin-bottom: 1rem; }
.campo label { font-weight: 600; font-size: .9rem; }
.campo .ajuda { font-size: .8rem; color: var(--graxa); }
.campo .erro { font-size: .85rem; color: var(--erro); }
.campo-check { flex-direction: row; align-items: center; gap: .5rem; }
.campo-check label { font-weight: 500; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=search],
input[type=tel], input[type=datetime-local], input[type=date], input[type=time], select, textarea {
  width: 100%; padding: .6em .75em; font: inherit; color: var(--aco);
  background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--oleo); box-shadow: 0 0 0 3px rgba(31, 95, 139, .18); }
.campo.com-erro input, .campo.com-erro select, .campo.com-erro textarea { border-color: var(--erro); }
.grade-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
.grade-form .inteiro { grid-column: 1 / -1; }
@media (max-width: 640px) { .grade-form { grid-template-columns: 1fr; } }

.erros-gerais { background: #fdecea; color: var(--erro); border-radius: var(--raio); padding: .75rem 1rem; margin-bottom: 1rem; }

/* Mensagens */
.mensagens { display: grid; gap: .5rem; margin-bottom: 1rem; }
.mensagem { padding: .75rem 1rem; border-radius: var(--raio); background: var(--papel); border-left: 4px solid var(--oleo); }
.mensagem.success { border-left-color: var(--ok); }
.mensagem.error { border-left-color: var(--erro); }
.mensagem.warning { border-left-color: var(--seguranca); background: #fffbea; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Grupo de caixas de marcar (CheckboxSelectMultiple do Django) */
.campo > div:has(> div > label > input[type=checkbox]) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; }
.campo > div > div > label:has(input[type=checkbox]) { display: flex; align-items: center; gap: .5rem; font-weight: 500; border: 1px solid var(--linha); border-radius: var(--raio); padding: .5em .75em; cursor: pointer; background: var(--papel); }
.campo > div > div > label:has(input:checked) { border-color: var(--oleo); background: #eef4f9; }
@media (max-width: 640px) { .campo > div:has(> div > label > input[type=checkbox]) { grid-template-columns: 1fr; } }

[x-cloak] { display: none !important; }