@font-face { font-family: "Barlow"; src: url("fontes/barlow-latin-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fontes/barlow-latin-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fontes/barlow-latin-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("fontes/barlow-condensed-latin-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("fontes/barlow-condensed-latin-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  /* As três primeiras são as cores do logotipo da Liderança Distribuidora. */
  --vinho: #6d061a;
  --etiqueta: #ffb626;
  --concreto: #e8edef;
  --branco: #ffffff;
  --tinta: #26161a;
  --suave: #565a64;
  --linha: #c9d0d4;
  --acao: var(--vinho);
  --acao-forte: #4f0413;
  --alerta: #c4261a;
  --alerta-fundo: #fbeae7;
  --ok-fundo: #e2f1e6;
  --ok: #17602f;
  --condensada: "Barlow Condensed", "Arial Narrow", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--concreto);
  color: var(--tinta);
  font: 400 1rem/1.45 "Barlow", system-ui, sans-serif;
  overflow-wrap: anywhere;
}
h1, h2 { font-family: var(--condensada); font-weight: 700; line-height: 1.1; margin: 0 0 .6rem; }
h1 { font-size: 2rem; }
h2 { font-size: 1.45rem; }
a { color: var(--acao); }
a:hover { color: var(--acao-forte); }
img { display: block; max-width: 100%; }
small { display: block; color: var(--suave); font-size: .85rem; font-weight: 400; }
:focus-visible { outline: 3px solid var(--acao); outline-offset: 2px; }
.faixa-busca :focus-visible { outline-color: var(--etiqueta); }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Topo */
.topo { background: var(--branco); padding: .6rem 1rem; border-bottom: 3px solid var(--etiqueta); }
.topo-linha { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .3rem 1rem; max-width: 1400px; margin: 0 auto; }
.marca { display: flex; align-items: center; gap: .9rem; color: var(--vinho); text-decoration: none; }
.marca img { width: auto; height: 2.6rem; }
.marca span { display: none; font: 600 1.35rem/1.1 var(--condensada); padding-left: .9rem; border-left: 1px solid var(--linha); }
.menu { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .9rem; font-size: .95rem; font-weight: 500; }
.menu a, .link-menu { color: var(--tinta); text-decoration: none; padding: .25rem 0; }
.menu a:hover, .link-menu:hover { color: var(--vinho); text-decoration: underline; }
.menu form { margin: 0; }
.link-menu { background: none; border: 0; font: inherit; cursor: pointer; }

/* Busca e filtros: ao rolar, só esta faixa continua fixa na tela. */
.faixa-busca { position: sticky; top: 0; z-index: 5; background: var(--vinho); color: var(--branco); padding: .6rem 1rem .65rem; }
.busca { max-width: 1400px; margin: 0 auto; display: grid; gap: .5rem; }
.busca input[type="search"] {
  width: 100%;
  min-height: 3rem;
  padding: .4rem .85rem;
  border: 0;
  border-radius: 3px;
  font: 500 1.15rem "Barlow", sans-serif;
  color: var(--tinta);
  background: var(--branco);
}
.filtros summary { cursor: pointer; font-weight: 500; color: var(--concreto); width: max-content; padding: .1rem 0; }
.filtros-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem .7rem; padding-top: .5rem; align-items: end; }
.filtros-campos label { font-size: .85rem; color: var(--concreto); }
.filtros-campos select {
  display: block;
  width: 100%;
  min-height: 2.5rem;
  margin-top: .15rem;
  padding: 0 .4rem;
  border: 0;
  border-radius: 3px;
  background: var(--branco);
  color: var(--tinta);
  font: inherit;
  font-size: 1rem;
}
.filtro-marcar { display: flex; align-items: center; gap: .5rem; min-height: 2.5rem; }
.filtro-marcar input { width: 1.15rem; height: 1.15rem; }
.com-js .sem-js { display: none; }

/* Páginas */
.pagina { max-width: 1400px; margin: 0 auto; padding: 1rem; }
.pagina-estreita { max-width: 760px; }
.pagina-acesso { max-width: 420px; padding-top: 2rem; }
.voltar { margin: 0 0 .75rem; font-weight: 500; }
.contagem { margin: 0 0 .6rem; color: var(--suave); font-weight: 500; }
.vazio { background: var(--branco); border: 1px solid var(--linha); padding: 1.25rem; }
.vazio p { margin: 0 0 .4rem; }

/* A etiqueta de prateleira: é ela que responde onde a peça está. */
.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  max-width: 100%;
  padding: .12rem .55rem .12rem .4rem;
  background: var(--etiqueta);
  color: var(--tinta);
  font: 700 1.4rem/1.1 var(--condensada);
  border-radius: 2px;
}
.etiqueta::before {
  content: "";
  flex: none;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--tinta);
}
.etiqueta-vazia { background: transparent; box-shadow: inset 0 0 0 1px var(--linha); color: var(--suave); font-weight: 600; font-size: 1.05rem; }
.etiqueta-vazia::before { background: var(--linha); }
.etiqueta-grande { font-size: 2.6rem; padding: .2rem .8rem .2rem .55rem; gap: .6rem; }
.etiqueta-grande::before { width: .8rem; height: .8rem; }
.etiqueta-grande.etiqueta-vazia { font-size: 1.3rem; }

.saldo { font-weight: 600; white-space: nowrap; }
.saldo-zerado { color: var(--alerta); }
.saldo-conferir { color: var(--acao-forte); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: .2em; }

/* Lista de peças */
.grade { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--linha); border: 1px solid var(--linha); }
.peca { background: var(--branco); min-width: 0; }
.peca-link {
  display: grid;
  grid-template-columns: 6.25rem minmax(0, 1fr);
  grid-template-areas: "foto texto" "foto rodape";
  gap: .3rem .8rem;
  padding: .65rem .75rem .65rem .65rem;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
.peca-link:hover .peca-nome { text-decoration: underline; }
.peca-foto { grid-area: foto; display: flex; align-items: center; justify-content: center; height: 6.25rem; align-self: start; }
.peca-foto img { max-height: 100%; object-fit: contain; }
.sem-foto { color: var(--suave); font-size: .85rem; text-align: center; }
.peca-texto { grid-area: texto; display: flex; flex-direction: column; min-width: 0; }
.peca-nome { font-weight: 600; line-height: 1.25; }
.peca-codigo, .peca-carro { color: var(--suave); font-size: .92rem; }
.peca-rodape { grid-area: rodape; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .3rem .7rem; align-self: end; }
.mais { display: block; width: max-content; margin: 1rem auto; }

/* Botões */
.botao {
  display: inline-block;
  min-height: 2.75rem;
  padding: .5rem 1.1rem;
  border: 1px solid var(--acao);
  border-radius: 3px;
  background: var(--acao);
  color: var(--branco);
  font: 600 1rem "Barlow", sans-serif;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}
.botao:hover { background: var(--acao-forte); border-color: var(--acao-forte); color: var(--branco); }
.botao:disabled { opacity: .55; cursor: wait; }
.botao-secundario { background: var(--branco); color: var(--acao); }
.botao-claro { background: var(--branco); color: var(--tinta); border-color: var(--branco); }
.botao-perigo { background: var(--alerta); border-color: var(--alerta); }
.botao-perigo:hover { background: #8c1b12; border-color: #8c1b12; }
.botao-perigo-leve { background: var(--branco); color: var(--alerta); border-color: var(--alerta); }
.botao-perigo-leve:hover { background: var(--alerta-fundo); color: var(--alerta); border-color: var(--alerta); }

/* Avisos */
.aviso { margin: 0 0 .9rem; padding: .65rem .85rem; background: var(--branco); border-left: 4px solid var(--suave); }
.aviso p { margin: 0 0 .4rem; }
.aviso p:last-child { margin-bottom: 0; }
.aviso form { margin-top: .5rem; }
.aviso-ok { background: var(--ok-fundo); border-color: var(--ok); }
.aviso-alerta { background: var(--alerta-fundo); border-color: var(--alerta); }
.dica { color: var(--suave); font-size: .95rem; margin: .4rem 0; }

/* Ficha da peça */
.ficha { display: grid; gap: 1rem; }
.ficha-fotos { display: grid; gap: .5rem; align-content: start; min-width: 0; }
.foto-grande { display: flex; align-items: center; justify-content: center; background: var(--branco); border: 1px solid var(--linha); padding: .75rem; min-height: 14rem; }
.foto-grande img { max-height: 28rem; object-fit: contain; }
.ficha-dados { min-width: 0; }
.ficha-destaque { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; margin-bottom: 1rem; }
.saldo-grande { font-size: 1.05rem; font-weight: 500; }
.saldo-grande strong { font: 700 2.6rem/1 var(--condensada); }
.saldo-grande.saldo-conferir { font: 700 1.6rem/1 var(--condensada); }
.saldo-grande.saldo-zerado strong { color: var(--alerta); }
.dados { margin: 0 0 1.2rem; display: grid; gap: .5rem; }
.dados div { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: .75rem; border-top: 1px solid var(--linha); padding-top: .45rem; }
.dados dt { color: var(--suave); font-size: .92rem; }
.dados dd { margin: 0; font-weight: 500; white-space: pre-line; }

/* Movimentação */
.lancar { background: var(--branco); border: 1px solid var(--linha); padding: .9rem; margin-bottom: 1rem; }
.tipos { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--acao); border-radius: 3px; overflow: hidden; margin-bottom: .6rem; }
.tipos label { position: relative; cursor: pointer; }
.tipos input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.tipos span { display: block; padding: .6rem .25rem; text-align: center; font-weight: 600; color: var(--acao); }
.tipos label + label span { border-left: 1px solid var(--acao); }
.tipos input:checked + span { background: var(--acao); color: var(--branco); }
.tipos input:disabled + span { color: #8b9aa1; background: #eef1f1; cursor: not-allowed; }
.tipos input:focus-visible + span { outline: 3px solid var(--etiqueta); outline-offset: -3px; }
.lancar-campos { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: .7rem; margin-bottom: .75rem; }
.lancar .botao { width: 100%; }
.acoes { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-start; }
.excluir summary { list-style: none; }
.excluir summary::-webkit-details-marker { display: none; }
.excluir form { margin-top: .6rem; padding: .75rem; background: var(--branco); border: 1px solid var(--alerta); max-width: 22rem; }
.excluir p { margin: 0 0 .6rem; }

/* Histórico */
.historico { margin-top: 1.6rem; }
.historico ol { list-style: none; margin: 0; padding: 0; background: var(--branco); border: 1px solid var(--linha); }
.historico li { padding: .6rem .8rem; display: grid; gap: .1rem .9rem; }
.historico li + li { border-top: 1px solid var(--linha); }
.historico-fato { display: flex; flex-wrap: wrap; gap: 0 .6rem; }
.historico-saldo, .historico-quem { color: var(--suave); font-size: .92rem; }

/* Formulários */
label { display: block; font-weight: 500; }
input:not([type="checkbox"], [type="radio"], [type="file"]), textarea {
  display: block;
  width: 100%;
  min-height: 2.75rem;
  margin-top: .2rem;
  padding: .4rem .6rem;
  border: 1px solid #8b9aa1;
  border-radius: 3px;
  background: var(--branco);
  color: var(--tinta);
  font: 400 1rem "Barlow", sans-serif;
}
input[type="file"] { display: block; max-width: 100%; margin-top: .3rem; font: inherit; }
.formulario { display: grid; gap: .85rem; margin-bottom: 1.5rem; }
/* O que se digita já aparece em maiúsculas; quem garante o que é gravado é o servidor. */
.formulario-peca input:not([type="file"]), .formulario-peca textarea { text-transform: uppercase; }
.formulario-simples { display: grid; gap: .85rem; background: var(--branco); border: 1px solid var(--linha); padding: 1rem; }
.fotos-edicao ul { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .75rem; }
.fotos-edicao li { display: grid; gap: .4rem; justify-items: center; }
.fotos-edicao li img { width: 9rem; height: 9rem; object-fit: contain; background: var(--branco); border: 1px solid var(--linha); padding: .3rem; }
.enviar-fotos { display: grid; gap: .7rem; justify-items: start; margin-bottom: 1.5rem; }

/* Usuários */
.senha-gerada { font: 700 1.5rem var(--condensada); }
.usuarios { list-style: none; margin: 0 0 1.5rem; padding: 0; background: var(--branco); border: 1px solid var(--linha); }
.usuarios > li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 1rem; padding: .7rem .85rem; }
.usuarios > li + li { border-top: 1px solid var(--linha); }
.usuarios strong, .usuarios span { display: block; }
.usuarios span { color: var(--suave); font-size: .92rem; }
.usuarios .inativo strong { color: var(--suave); }
.usuarios-acoes { display: flex; flex-wrap: wrap; gap: .5rem; }
.usuarios-acoes form { margin: 0; }

@media (min-width: 600px) {
  .marca img { height: 3rem; }
  .marca span { display: block; }
  .formulario { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .campo-inteiro { grid-column: 1 / -1; }
  .grade { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
  .peca-link { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; grid-template-areas: "foto" "texto" "rodape"; gap: .55rem; padding: .8rem; }
  .peca-foto { height: 10rem; justify-self: stretch; }
  .historico li { grid-template-columns: minmax(0, 1fr) 13rem 16rem; align-items: baseline; }
}
@media (min-width: 900px) {
  .pagina { padding: 1.25rem 1.5rem; }
  .topo, .faixa-busca { padding-inline: 1.5rem; }
  .busca { grid-template-columns: minmax(0, 1fr); }
  .filtros-campos { grid-template-columns: repeat(4, minmax(0, 11rem)) auto auto; }
  .ficha { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 1.75rem; align-items: start; }
  .ficha-fotos { position: sticky; top: 1rem; }
  .pagina-estreita { max-width: 760px; }
  .pagina-acesso { max-width: 420px; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}