/* OFFPRICE OS — a cara da operação.
 *
 * ⚑ A tela é lida em pé, no galpão, com pressa, muitas vezes num celular segurado com uma mão só.
 * Isso governa tudo aqui: alvo de toque grande, contraste alto, número de dinheiro em tabular
 * para alinhar coluna, e URGÊNCIA com cor + forma + palavra (nunca só cor — quem enxerga mal
 * precisa do mesmo aviso).
 *
 * ⚑ Vermelho é DINHEIRO SAINDO ou PRAZO VENCENDO. Nunca decoração. Se tudo é vermelho, nada é.
 */

:root {
  /* neutros com um viés quente de galpão iluminado — cinza puro fica clínico demais */
  --tinta:        #17150f;
  --tinta-fraca:  #5b5548;
  --tinta-tenue:  #8b8375;
  --papel:        #faf7f0;
  --papel-fundo:  #f0ebe0;
  --linha:        #ded6c6;
  --linha-forte:  #c9bda6;

  /* âmbar de etiqueta de liquidação — a cor do negócio */
  --marca:        #b45309;
  --marca-clara:  #fef3c7;
  --marca-escura: #7c2d12;

  /* semânticas: sempre acompanhadas de palavra, nunca sozinhas */
  --vencido:      #991b1b;
  --vencido-bg:   #fee2e2;
  --urgente:      #c2410c;
  --urgente-bg:   #ffedd5;
  --atencao:      #a16207;
  --atencao-bg:   #fef9c3;
  --ok:           #15803d;
  --ok-bg:        #dcfce7;

  --raio: 10px;
  --sombra: 0 1px 2px rgba(23, 21, 15, .06), 0 4px 12px rgba(23, 21, 15, .04);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --tinta: #f5f1e8; --tinta-fraca: #b8b0a0; --tinta-tenue: #8a8274;
    --papel: #1c1a16; --papel-fundo: #131210; --linha: #33302a; --linha-forte: #4a463d;
    --marca: #f59e0b; --marca-clara: #422006; --marca-escura: #fcd34d;
    --vencido: #fca5a5; --vencido-bg: #450a0a;
    --urgente: #fdba74; --urgente-bg: #431407;
    --atencao: #fde047; --atencao-bg: #422006;
    --ok: #86efac; --ok-bg: #052e16;
    --sombra: 0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.3);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papel-fundo);
  color: var(--tinta);
  font: 16px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

/* ── topo ─────────────────────────────────────────────────────────────────────── */

.topo {
  display: flex; align-items: center; gap: 20px;
  padding: 12px 20px;
  background: var(--papel);
  border-bottom: 1px solid var(--linha);
  position: sticky; top: 0; z-index: 20;
  flex-wrap: wrap;
}

.marca { display: flex; align-items: baseline; gap: 8px; }
.marca-nome {
  font-weight: 800; font-size: 20px; letter-spacing: -.02em;
  color: var(--marca);
}
.marca-lugar { font-size: 13px; color: var(--tinta-tenue); }

.abas { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.aba {
  appearance: none; border: 0; background: transparent;
  color: var(--tinta-fraca); font: inherit; font-weight: 600; font-size: 14px;
  padding: 9px 14px; border-radius: var(--raio); cursor: pointer;
  min-height: 40px;
}
.aba:hover { background: var(--papel-fundo); color: var(--tinta); }
.aba[aria-current="page"] { background: var(--marca-clara); color: var(--marca-escura); }
.aba:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }

.sessao { font-size: 13px; color: var(--tinta-fraca); display: flex; align-items: center; gap: 10px; }
.sessao b { color: var(--tinta); }

/* ⚑ a faixa que impede confundir ensaio com dinheiro real */
.faixa-modo {
  padding: 8px 20px; font-size: 13px; font-weight: 700; text-align: center;
  border-bottom: 1px solid;
}
.faixa-modo[data-modo="demo"] {
  background: var(--atencao-bg); color: var(--atencao); border-color: var(--atencao);
}
.faixa-modo[data-modo="production"] {
  background: var(--vencido-bg); color: var(--vencido); border-color: var(--vencido);
}

/* ── conteúdo ─────────────────────────────────────────────────────────────────── */

.tela { max-width: 1100px; margin: 0 auto; padding: 24px 20px 80px; }

h1 { font-size: 24px; font-weight: 750; letter-spacing: -.02em; margin: 0 0 4px; text-wrap: balance; }
h2 { font-size: 17px; font-weight: 700; margin: 32px 0 12px; text-wrap: balance; }
.legenda { color: var(--tinta-fraca); font-size: 14px; margin: 0 0 24px; max-width: 62ch; }

.cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }

.cartao {
  background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 16px; box-shadow: var(--sombra);
}
.cartao-rotulo {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--tinta-tenue); margin-bottom: 6px;
}
.cartao-valor {
  font-size: 26px; font-weight: 750; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.cartao-nota { font-size: 13px; color: var(--tinta-fraca); margin-top: 4px; }

/* ── lista de ações: a única lista que importa no dia a dia ───────────────────── */

.acoes { display: flex; flex-direction: column; gap: 10px; }

/* ⚑ a linha da fila É a porta: é um <a> para a tela que resolve aquilo. Herda a cor do texto
   para não virar "link azul" no meio de um painel de decisão, mas mantém foco visível. */
.acao {
  display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center;
  background: var(--papel); border: 1px solid var(--linha);
  border-left: 4px solid var(--linha-forte);
  border-radius: var(--raio); padding: 14px 16px;
  color: inherit; text-decoration: none;
}
.acao:hover { border-color: var(--linha-forte); background: var(--papel-alto, var(--papel)); }
.acao:focus-visible { outline: 2px solid var(--urgente); outline-offset: 2px; }
.acao[data-urgencia="VENCIDO"]         { border-left-color: var(--vencido); }
.acao[data-urgencia="E5"]              { border-left-color: var(--vencido); }
.acao[data-urgencia="HOJE_OU_AMANHA"]  { border-left-color: var(--urgente); }
.acao[data-urgencia="E4"], .acao[data-urgencia="E3"] { border-left-color: var(--urgente); }
.acao[data-urgencia="ATENCAO"]         { border-left-color: var(--atencao); }

.selo {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  padding: 4px 8px; border-radius: 6px; white-space: nowrap;
  background: var(--papel-fundo); color: var(--tinta-fraca);
}
.selo[data-urgencia="VENCIDO"], .selo[data-urgencia="E5"] { background: var(--vencido-bg); color: var(--vencido); }
.selo[data-urgencia="HOJE_OU_AMANHA"], .selo[data-urgencia="E4"], .selo[data-urgencia="E3"] {
  background: var(--urgente-bg); color: var(--urgente);
}
.selo[data-urgencia="ATENCAO"] { background: var(--atencao-bg); color: var(--atencao); }

.acao-texto { font-size: 14px; }
.acao-tipo { font-size: 12px; color: var(--tinta-tenue); font-weight: 600; margin-bottom: 2px; }
.acao-dinheiro { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }

/* ── tabelas ──────────────────────────────────────────────────────────────────── */

.rolagem { overflow-x: auto; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--papel); }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--tinta-tenue); font-weight: 700;
  padding: 10px 14px; border-bottom: 1px solid var(--linha); white-space: nowrap;
}
td { padding: 11px 14px; border-bottom: 1px solid var(--linha); }
tr:last-child td { border-bottom: 0; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.codigo {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px;
  color: var(--tinta-fraca);
}

/* ── vazio, aviso e recusa ────────────────────────────────────────────────────── */

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

/* ⚑ a RECUSA é conteúdo de primeira classe: este produto recusa muita coisa de propósito,
   e cada recusa explica o que fazer. Escondê-la num toast que some seria perder a instrução. */
.recusa {
  background: var(--urgente-bg); border: 1px solid var(--urgente);
  border-left: 4px solid var(--urgente);
  border-radius: var(--raio); padding: 14px 16px; margin: 16px 0;
}
.recusa-titulo { font-weight: 700; color: var(--urgente); font-size: 13px;
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.recusa-texto { font-size: 14px; color: var(--tinta); }

/* ⚑ a recusa DENTRO do campo: quando a lista que alimenta um menu não pôde ser lida, o menu não
   pode ficar vazio fingindo que não há nada. Ele trava e diz por quê — porque menu vazio não só
   informa errado: faz o operador dar o próximo passo (procurar o lote em outro lugar, ligar para
   o galpão perguntar de uma remessa que chegou). */
.recusa-do-campo {
  font-size: 12px; color: var(--urgente); margin-top: 4px; max-width: 42ch; line-height: 1.4;
}
.form button[disabled] {
  background: var(--urgente-bg); color: var(--urgente); border: 1px solid var(--urgente);
  cursor: not-allowed;
}

.aviso {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: var(--tinta); color: var(--papel);
  padding: 12px 20px; border-radius: var(--raio); box-shadow: var(--sombra);
  font-size: 14px; max-width: min(560px, calc(100vw - 40px)); z-index: 40;
}

/* ── formulário e botões ──────────────────────────────────────────────────────── */

.form { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 20px; }
.campo { display: flex; flex-direction: column; gap: 4px; }
.campo label { font-size: 12px; font-weight: 600; color: var(--tinta-fraca); }
input, select {
  font: inherit; padding: 9px 12px; min-height: 42px;
  border: 1px solid var(--linha-forte); border-radius: 8px;
  background: var(--papel); color: var(--tinta);
}
input:focus-visible, select:focus-visible { outline: 2px solid var(--marca); outline-offset: 1px; }

button {
  font: inherit; font-weight: 650; cursor: pointer;
  padding: 10px 18px; min-height: 42px;
  border-radius: 8px; border: 1px solid var(--marca);
  background: var(--marca); color: #fff;
}
button:hover { background: var(--marca-escura); border-color: var(--marca-escura); }
button:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
button.secundario { background: var(--papel); color: var(--tinta); border-color: var(--linha-forte); }
button.secundario:hover { background: var(--papel-fundo); }

/* ── etiqueta: a peça impressa ────────────────────────────────────────────────── */

.etiqueta {
  background: var(--papel); border: 2px solid var(--tinta);
  border-radius: var(--raio); padding: 20px; max-width: 380px;
}
.etiqueta-selo {
  display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; background: var(--tinta); color: var(--papel);
  padding: 4px 10px; border-radius: 4px; margin-bottom: 12px;
}
.etiqueta-preco {
  font-size: 38px; font-weight: 800; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.etiqueta-cartao { font-size: 14px; color: var(--tinta-fraca); margin-top: 4px; }
.etiqueta-linha { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--linha-forte); }
.etiqueta-rotulo { font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--tinta-tenue); }
.etiqueta-valor { font-size: 14px; }
.etiqueta-economia {
  background: var(--marca-clara); color: var(--marca-escura);
  padding: 8px 12px; border-radius: 6px; margin-top: 12px;
  font-weight: 700; font-size: 15px;
}

@media (max-width: 640px) {
  .topo { gap: 12px; padding: 10px 14px; }
  .tela { padding: 18px 14px 60px; }
  .acao { grid-template-columns: auto 1fr; }
  .acao-dinheiro { grid-column: 2; }
}

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