/* Sugestao de Transferencias - Grupo Serdal
   Referencia visual: talao de pedido em papel carbono. Papel claro, tinta
   preta, azul de carbono nos cabecalhos, vermelho de carimbo na urgencia.
   Numeros sempre tabulares: a leitura e por coluna, nao por linha. */

:root {
  --papel:      #FBFAF7;
  --papel-alt:  #F2EFE7;
  --linha:      #DCD7C9;
  --tinta:      #1B1D22;
  --tinta-suave:#5C5F68;
  --carbono:    #2E4B6B;
  --carimbo:    #B23A16;
  --ambar:      #B0781A;
  --verde:      #3C7A4E;
  --raio: 3px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: ui-sans-serif, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}

a { color: var(--carbono); }

/* ---------------------------------------------------------- cabecalho */

.topo {
  background: var(--carbono);
  color: #fff;
  padding: 10px 20px;
  display: flex;
  align-items: baseline;
  gap: 18px;
  flex-wrap: wrap;
}
.topo .marca {
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 17px;
}
.topo .marca span { font-weight: 400; opacity: .75; }
.topo .espaco { flex: 1; }
.topo a { color: #fff; text-decoration: none; opacity: .85; font-size: 14px; }
.topo a:hover { opacity: 1; text-decoration: underline; }

.abas {
  display: flex;
  gap: 2px;
  padding: 0 20px;
  background: var(--papel-alt);
  border-bottom: 1px solid var(--linha);
  flex-wrap: wrap;
}
.abas a {
  padding: 9px 16px;
  text-decoration: none;
  color: var(--tinta-suave);
  font-size: 14px;
  border-bottom: 3px solid transparent;
}
.abas a.ativa {
  color: var(--tinta);
  font-weight: 600;
  border-bottom-color: var(--carimbo);
  background: var(--papel);
}

main { padding: 20px; max-width: 1400px; }

h1 {
  font-size: 21px;
  letter-spacing: -0.02em;
  margin: 0 0 2px;
}
.legenda { color: var(--tinta-suave); font-size: 13px; margin: 0 0 18px; }

/* ------------------------------------------------------------ barra */

.barra {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
input[type=text], input[type=password], input[type=search] {
  font: inherit;
  padding: 7px 10px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: #fff;
  min-width: 220px;
}
input:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--carbono);
  outline-offset: 2px;
}

button, .botao {
  font: inherit;
  padding: 7px 14px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: #fff;
  color: var(--tinta);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
button:hover, .botao:hover { background: var(--papel-alt); }
button.principal, .botao.principal {
  background: var(--carbono);
  border-color: var(--carbono);
  color: #fff;
}
button.principal:hover { filter: brightness(1.12); }
button.mini { padding: 3px 8px; font-size: 12px; }

.contagem {
  font-size: 13px;
  color: var(--tinta-suave);
  margin-left: auto;
}

/* ------------------------------------------------------------ tabela */

table { width: 100%; border-collapse: collapse; font-size: 14px; }

thead th {
  position: sticky;
  top: 0;
  background: var(--papel-alt);
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tinta-suave);
  font-weight: 600;
  padding: 8px 10px;
  border-bottom: 1px solid var(--linha);
  white-space: nowrap;
}
tbody td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--linha);
  vertical-align: middle;
}
tbody tr:hover { background: #fff; }
td.num, th.num { text-align: right; white-space: nowrap; }
.produto { font-weight: 500; }
.codigo {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 12px;
  color: var(--tinta-suave);
}

/* o numero que a loja digita no ERP: unico dado em destaque */
.pedir {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.emb { font-size: 12px; color: var(--tinta-suave); white-space: nowrap; }

/* -------------------------------------- medidor de dias de estoque
   Assinatura da tela: barra com um risco no minimo de 7 dias, para o olho
   pegar a urgencia sem ler o numero. */

.medidor {
  position: relative;
  width: 76px;
  height: 7px;
  background: var(--linha);
  border-radius: 1px;
  overflow: hidden;
}
.medidor i {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  background: var(--ambar);
}
.medidor.critico i { background: var(--carimbo); }
.medidor.folgado i { background: var(--verde); }
.medidor::after {
  content: "";
  position: absolute;
  top: -2px; bottom: -2px;
  left: 50%;
  width: 1px;
  background: var(--tinta);
  opacity: .45;
}
.dias { font-size: 12px; color: var(--tinta-suave); }

.aviso-negativo {
  color: var(--carimbo);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ------------------------------------------------------------ marcas */

.marca-pedido, .marca-ignorar {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 2px 6px;
  border-radius: var(--raio);
}
.marca-pedido { background: #E4EFE7; color: var(--verde); }
.marca-ignorar { background: var(--papel-alt); color: var(--tinta-suave); }

tr.marcada { opacity: .55; }

/* ------------------------------------------------------------ status */

.status {
  font-size: 12px;
  color: var(--tinta-suave);
  border-left: 3px solid var(--linha);
  padding: 6px 12px;
  margin-bottom: 16px;
}
.status strong { color: var(--tinta); font-weight: 600; }
.status.rodando { border-left-color: var(--ambar); }

.vazio {
  padding: 40px 20px;
  text-align: center;
  color: var(--tinta-suave);
  border: 1px dashed var(--linha);
  border-radius: var(--raio);
}

/* ------------------------------------------------------------- login */

.entrada {
  max-width: 340px;
  margin: 12vh auto;
  padding: 28px;
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
}
.entrada h1 { margin-bottom: 18px; }
.entrada label {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--tinta-suave);
  margin: 12px 0 4px;
}
.entrada input { width: 100%; }
.entrada button { width: 100%; margin-top: 20px; }
.erro {
  background: #F7E4DE;
  color: var(--carimbo);
  padding: 8px 12px;
  border-radius: var(--raio);
  font-size: 13px;
}

/* --------------------------------------------------------- cartoes */

.cartoes { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); max-width: 700px; }
.cartao {
  padding: 18px;
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  text-decoration: none;
  color: var(--tinta);
  display: block;
}
.cartao:hover { border-color: var(--carbono); }
.cartao strong { display: block; font-size: 17px; margin-bottom: 3px; }
.cartao span { color: var(--tinta-suave); font-size: 13px; }

/* --------------------------------------------------------- responsivo */

@media (max-width: 820px) {
  main { padding: 14px; }
  .rolagem { overflow-x: auto; }
  table { min-width: 760px; }
}

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

/* ------------------------------------------------------ filtros e ordem */

.filtros { border-top: 1px solid var(--linha); padding-top: 12px; }
.campo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--tinta-suave);
}
.campo input[type=number] {
  font: inherit;
  font-size: 14px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--tinta);
  padding: 5px 8px;
  width: 84px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: #fff;
}

.chips { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.chip {
  font-size: 13px;
  padding: 5px 12px;
  border-radius: 12px;
  border: 1px solid var(--linha);
  background: #fff;
}
.chip.ativo {
  background: var(--carbono);
  border-color: var(--carbono);
  color: #fff;
}

th.ordenavel { cursor: pointer; user-select: none; }
th.ordenavel:hover { color: var(--tinta); }
th.ordenavel::after { content: " \2195"; opacity: .3; }
th.asc::after  { content: " \2191"; opacity: 1; }
th.desc::after { content: " \2193"; opacity: 1; }

.marca-sazonal {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 2px 6px;
  border-radius: var(--raio);
  background: #E7EDF4;
  color: var(--carbono);
}