/* Controle de Validade — celular primeiro, tema claro/escuro pelo sistema.
   Mesma paleta da Escala da Equipe. */

:root {
  color-scheme: light dark;

  --fundo: #f5f3ee;
  --cartao: #ffffff;
  --texto: #1d1b18;
  --suave: #6e685f;
  --borda: #ebe6dd;
  --borda-forte: #d9d2c5;
  --tinta: #2b3a67;
  --tinta-texto: #ffffff;
  --tinta-claro: #e3e8f6;

  --vencido: #b42318;
  --vencido-claro: #fde8e6;
  --ate3: #b54708;
  --ate3-claro: #fdebd8;
  --ate7: #8a6a00;
  --ate7-claro: #fbf3c8;
  --depois: #475467;
  --depois-claro: #eceef1;
  --ok: #0e7c4a;
  --ok-claro: #dcf5e7;

  --raio: 16px;
  --sombra: 0 1px 2px rgb(29 27 24 / 0.05), 0 6px 20px rgb(29 27 24 / 0.06);
}

@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #131417;
    --cartao: #1c1d21;
    --texto: #eceae6;
    --suave: #a19c94;
    --borda: #2e3036;
    --borda-forte: #42454d;
    --tinta: #b9c6f5;
    --tinta-texto: #131417;
    --tinta-claro: rgb(185 198 245 / 0.14);

    --vencido: #f97066;
    --vencido-claro: rgb(249 112 102 / 0.16);
    --ate3: #fdb022;
    --ate3-claro: rgb(253 176 34 / 0.15);
    --ate7: #eaca4f;
    --ate7-claro: rgb(234 202 79 / 0.13);
    --depois: #a9b4c4;
    --depois-claro: rgb(169 180 196 / 0.14);
    --ok: #4ade80;
    --ok-claro: rgb(74 222 128 / 0.14);

    --sombra: 0 1px 2px rgb(0 0 0 / 0.3), 0 6px 20px rgb(0 0 0 / 0.25);
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding-bottom: calc(76px + env(safe-area-inset-bottom));
}

h1, h2, h3, p { margin: 0; }
h2 { font-size: 1.05rem; }
h3 { font-size: 0.95rem; }

button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }

.topo {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  background: var(--fundo);
  border-bottom: 1px solid var(--borda);
}
.topo h1 { font-size: 1.1rem; margin-right: auto; }

.status {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.status.ok { background: var(--ok-claro); color: var(--ok); }
.status.pendente { background: var(--tinta-claro); color: var(--tinta); }
.status.off { background: var(--ate3-claro); color: var(--ate3); }

.usuario {
  background: none;
  border: 0;
  padding: 6px 0;
  min-height: 36px;
  max-width: 96px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.85rem;
  color: var(--suave);
  text-decoration: underline;
  text-underline-offset: 3px;
}

main { max-width: 640px; margin: 0 auto; padding: 16px; }

.pilha { display: flex; flex-direction: column; gap: 14px; }
.pilha-curta { display: flex; flex-direction: column; gap: 8px; }
.suave { color: var(--suave); font-size: 0.875rem; }
.bloco-texto { display: block; }
.vazio { color: var(--suave); text-align: center; padding: 32px 0; }
.erro { color: var(--vencido); font-size: 0.9rem; font-weight: 600; }

.cartao {
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 14px;
  box-shadow: var(--sombra);
}

.campo { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
label { font-size: 0.875rem; font-weight: 600; }

input[type="text"], input[type="search"], input[type="number"] {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  background: var(--cartao);
  border: 1px solid var(--borda-forte);
  border-radius: 10px;
}

.primario, .secundario, .texto, .opcao {
  min-height: 46px;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 600;
}
.primario { background: var(--tinta); color: var(--tinta-texto); border: 1px solid var(--tinta); }
.primario:disabled { opacity: 0.45; cursor: default; }
.secundario { background: var(--cartao); border: 1px solid var(--borda-forte); }
.secundario:disabled { opacity: 0.4; cursor: default; }
.texto { background: none; border: 0; color: var(--suave); }
.grande { min-height: 58px; font-size: 1.05rem; width: 100%; }

.linha-codigo { display: flex; gap: 8px; align-items: flex-end; }

#leitor {
  width: 100%;
  overflow: hidden;
  border-radius: var(--raio);
  background: #000;
  min-height: 220px;
}
#leitor video { display: block; width: 100%; height: auto; }

.codigo { font-variant-numeric: tabular-nums; color: var(--suave); font-size: 0.875rem; }
.dica { min-height: 1.3em; font-size: 0.9rem; font-weight: 600; }
.ja-registrados { font-size: 0.9rem; }

.stepper { display: flex; gap: 8px; }
.stepper button { width: 56px; padding: 0; font-size: 1.4rem; flex: none; }
.stepper input { text-align: center; flex: 1; min-width: 0; -moz-appearance: textfield; appearance: textfield; }
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.cor-vencido { color: var(--vencido); }
.cor-ate3 { color: var(--ate3); }
.cor-ate7 { color: var(--ate7); }
.cor-depois { color: var(--depois); }
.cor-ok { color: var(--ok); }

.resumo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bloco {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 2px solid transparent;
  text-align: left;
  font-size: 0.8rem;
  line-height: 1.2;
}
.bloco strong { font-size: 1.6rem; line-height: 1.1; }
.bloco[aria-pressed="true"] { border-color: currentColor; }
.fundo-vencido { background: var(--vencido-claro); color: var(--vencido); }
.fundo-ate3 { background: var(--ate3-claro); color: var(--ate3); }
.fundo-ate7 { background: var(--ate7-claro); color: var(--ate7); }
.fundo-depois { background: var(--depois-claro); color: var(--depois); }

.grupo { display: flex; flex-direction: column; gap: 8px; }
.grupo h2 { font-size: 0.9rem; }

.lote {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  text-align: left;
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-left-width: 5px;
  border-radius: 12px;
}
.borda-vencido { border-left-color: var(--vencido); }
.borda-ate3 { border-left-color: var(--ate3); }
.borda-ate7 { border-left-color: var(--ate7); }
.borda-depois { border-left-color: var(--depois); }
.borda-encerrado { border-left-color: var(--borda-forte); }

.lote-corpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }

.miniatura, .foto-produto {
  flex: none;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: 8px;
}
.miniatura { width: 44px; height: 44px; }
.foto-produto { width: 88px; height: 88px; }
.produto-topo { display: flex; gap: 12px; align-items: flex-start; }
.produto-dados { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.produto-dados h2 { overflow-wrap: anywhere; }
.link {
  min-height: 36px;
  padding: 6px 0;
  background: none;
  border: 0;
  color: var(--tinta);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.dica-base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 12px; min-height: 1.4em; }
.credito { color: var(--suave); font-size: 0.78rem; }
.credito a { color: inherit; }
.lote-nome { font-weight: 600; overflow-wrap: anywhere; }
.lote-fim { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; }
.lote-data { font-weight: 600; font-variant-numeric: tabular-nums; }
.lote-prazo { font-size: 0.8rem; font-weight: 600; }

.selo {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--tinta-claro);
  color: var(--tinta);
}
.selo-doado, .selo-feita { background: var(--ok-claro); color: var(--ok); }
.selo-descartado { background: var(--vencido-claro); color: var(--vencido); }
.selo-rebaixa_solicitada, .selo-pendente { background: var(--ate3-claro); color: var(--ate3); }
.selo-rebaixa_nao_feita, .selo-nao_feita, .selo-sem_efeito { background: var(--depois-claro); color: var(--depois); }
.resposta { font-size: 0.875rem; font-weight: 600; overflow-wrap: anywhere; }

.icone-aba { position: relative; display: block; height: 24px; }
.marcador {
  position: absolute;
  top: -5px;
  left: 16px;
  min-width: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--vencido);
  color: var(--cartao);
  font-size: 0.68rem;
  line-height: 18px;
  text-align: center;
}

.folha {
  width: min(480px, calc(100vw - 32px));
  max-height: 85dvh;
  padding: 20px;
  background: var(--cartao);
  color: var(--texto);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}
.folha::backdrop { background: rgb(0 0 0 / 0.45); }

.opcoes { display: flex; flex-direction: column; gap: 8px; }
.opcao { background: var(--cartao); border: 1px solid var(--borda-forte); text-align: left; }
.opcao[aria-pressed="true"] {
  background: var(--tinta-claro);
  border: 2px solid var(--tinta);
  color: var(--tinta);
}
.historico { display: flex; flex-direction: column; gap: 6px; font-size: 0.9rem; }

.mes { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mes h2 { text-align: center; }
.mes h2::first-letter { text-transform: uppercase; }
.mes button { width: 46px; padding: 0; font-size: 1.4rem; flex: none; }

.numeros { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.numero { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; }
.numero strong { font-size: 2.2rem; line-height: 1; }
.linha { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; }
.linha strong { flex: none; }

.abas {
  position: fixed;
  inset: auto 0 0;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--cartao);
  border-top: 1px solid var(--borda);
}
.abas button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-height: 62px;
  padding: 9px 4px 7px;
  background: none;
  border: 0;
  color: var(--suave);
  font-size: 0.75rem;
  font-weight: 600;
}
.abas button[aria-current="page"] { color: var(--tinta); }
.abas svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.aviso {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(76px + env(safe-area-inset-bottom));
  z-index: 10;
  max-width: 480px;
  margin: 0 auto;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--texto);
  color: var(--fundo);
  font-size: 0.9rem;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}
.aviso.visivel { opacity: 1; }