/* Cores da Semear (as mesmas do Sistema de Ocorrencias): verde #1e6b1e e laranja #f07f00. */
:root {
  --verde: #1e6b1e;
  --verde-escuro: #1a4a1a;
  --verde-claro: #e8f0e8;
  --laranja: #f07f00;
  --fundo: #f5f8f5;
  --card: #ffffff;
  --texto: #1a4a1a;
  --suave: #5a7a5a;
  --borda: #d6e3d6;
  --vermelho: #c0392b;
  --vermelho-claro: #fdecea;
  --amarelo: #a85400;
  --amarelo-claro: #fff7ec;
  --azul: #1a5276;
  --azul-claro: #e7eef3;
  --raio: 10px;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif; background: var(--fundo); color: var(--texto); font-size: 15px; }
h1 { font-size: 22px; margin: 0 0 4px; }
h2 { font-size: 17px; margin: 0 0 12px; }
h3 { font-size: 15px; margin: 0 0 8px; }
p.sub { margin: 0 0 18px; color: var(--suave); }
a { color: var(--verde); }

/* topo */
.topo { background: var(--verde); color: #fff; display: flex; align-items: center; gap: 24px; padding: 0 20px; position: sticky; top: 0; z-index: 10; flex-wrap: wrap; }
.marca { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.marca .logo { height: 40px; width: auto; background: #fff; border-radius: 8px; padding: 3px 8px; }
.marca strong { display: block; font-size: 16px; line-height: 1; }
.marca small { opacity: .8; font-size: 12px; }
#menu { display: flex; gap: 2px; flex-wrap: wrap; }
#menu a { color: #fff; text-decoration: none; padding: 16px 12px; opacity: .85; border-bottom: 3px solid transparent; }
#menu a:hover { opacity: 1; }
#menu a.ativo { opacity: 1; border-bottom-color: var(--laranja); font-weight: 600; }

main { padding: 22px 20px 60px; max-width: 1400px; margin: 0 auto; }

/* blocos */
.card { background: var(--card); border: 1px solid var(--borda); border-radius: var(--raio); padding: 18px; }
.grade { display: grid; gap: 16px; }
.g2 { grid-template-columns: 1fr 1fr; }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.pdv { display: grid; grid-template-columns: 1fr 420px; gap: 16px; align-items: start; }
.linha { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.espaco { flex: 1; }
.mt { margin-top: 14px; }
.direita { text-align: right; }
.muted { color: var(--suave); }
.peq { font-size: 13px; }
@media (max-width: 1000px) { .pdv, .g2, .g3, .g4 { grid-template-columns: 1fr; } }

.kpi .valor { font-size: 26px; font-weight: 700; margin-top: 4px; }
.kpi .rotulo { color: var(--suave); font-size: 13px; }

/* formularios */
label { display: block; font-size: 13px; color: var(--suave); margin-bottom: 4px; }
input, select, textarea { font: inherit; width: 100%; padding: 9px 11px; border: 1px solid var(--borda); border-radius: 8px; background: #fff; color: var(--texto); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--laranja); outline-offset: -1px; border-color: var(--laranja); }
.campo { margin-bottom: 10px; }
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
input.num { text-align: right; }

button, .botao { font: inherit; border: 1px solid var(--borda); background: #fff; color: var(--texto); padding: 9px 14px; border-radius: 8px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
button:hover { background: #eef3ee; }
button:disabled { opacity: .5; cursor: not-allowed; }
button.primario { background: var(--verde); border-color: var(--verde); color: #fff; font-weight: 600; }
button.primario:hover { background: var(--verde-escuro); }
button.grande { padding: 14px 18px; font-size: 17px; width: 100%; justify-content: center; }
button.perigo { color: var(--vermelho); border-color: #f1c4bf; }
button.perigo:hover { background: var(--vermelho-claro); }
button.link { border: 0; background: none; color: var(--verde); padding: 4px; text-decoration: underline; }
button.selecionado { background: var(--verde-claro); border-color: var(--verde); color: var(--verde-escuro); font-weight: 600; }

/* tabelas */
table { width: 100%; border-collapse: collapse; }
th, td { padding: 8px 10px; border-bottom: 1px solid var(--borda); text-align: left; vertical-align: middle; }
th { font-size: 12px; color: var(--suave); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; background: #f8faf8; }
tr.clicavel { cursor: pointer; }
tr.clicavel:hover td { background: var(--verde-claro); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabela-rolagem { overflow-x: auto; }

.etiqueta { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: 12px; font-weight: 600; }
.e-VENDA { background: var(--verde-claro); color: var(--verde-escuro); }
.e-TROCA { background: var(--azul-claro); color: var(--azul); }
.e-DEVOLUCAO { background: var(--amarelo-claro); color: var(--amarelo); }
.e-CANCELADA { background: var(--vermelho-claro); color: var(--vermelho); }
.e-ENTRADA { background: var(--verde-claro); color: var(--verde-escuro); }
.e-AJUSTE { background: #eee; color: #444; }
.e-CANCELAMENTO, .e-CANCELADO { background: var(--vermelho-claro); color: var(--vermelho); }
.e-REPOSICAO, .e-RECEBIDO { background: var(--verde-claro); color: var(--verde-escuro); }
.e-PENDENTE { background: var(--amarelo-claro); color: var(--amarelo); }
.e-PARCIAL { background: var(--azul-claro); color: var(--azul); }
.a-caminho { display: block; font-size: 11px; color: var(--azul); font-weight: 600; }

/* catalogo de uniformes */
.busca { font-size: 17px; padding: 12px 14px; }
.produtos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin-top: 12px; max-height: calc(100vh - 260px); overflow-y: auto; padding-right: 4px; }
.produto { text-align: left; display: block; padding: 10px 12px; }
.produto .ref { font-size: 12px; color: var(--suave); }
.produto .seg { font-size: 11px; color: var(--azul); }
.produto.aberto { border-color: var(--verde); background: var(--verde-claro); }
.tamanhos { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; margin: 10px 0 4px; }
.tamanho { flex-direction: column; padding: 8px 4px; gap: 2px; justify-content: center; }
.tamanho b { font-size: 16px; }
.tamanho small { font-size: 12px; color: var(--suave); }
.tamanho.zerado { opacity: .55; }
.tamanho.zerado small.qtd { color: var(--vermelho); }

/* carrinho */
.carrinho-item { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--borda); }
.carrinho-item .desc { font-size: 13px; }
.qtd { display: inline-flex; align-items: center; gap: 4px; }
.qtd button { padding: 2px 9px; }
.total-grande { font-size: 30px; font-weight: 800; color: var(--verde-escuro); }
.formas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.formas button { justify-content: center; padding: 10px 4px; font-size: 13px; }
.vazio { color: var(--suave); text-align: center; padding: 24px 8px; }

.avisos-escola { background: var(--amarelo-claro); border: 1px solid #f5d3a8; color: #6b3d00; border-radius: var(--raio); padding: 10px 14px; font-size: 13px; margin-bottom: 12px; }
.avisos-escola b { display: block; margin-bottom: 2px; }

/* grade de estoque */
.grade-estoque td.cel { text-align: center; min-width: 54px; font-variant-numeric: tabular-nums; }
.grade-estoque td.cel.zero { color: var(--vermelho); background: #fff8f7; }
.grade-estoque td.cel.baixo { color: var(--amarelo); background: var(--amarelo-claro); font-weight: 600; }
.grade-estoque td.cel.na { color: #c4cec4; }
.grade-estoque input { width: 58px; padding: 5px; text-align: center; }
.grade-estoque input.mudou { background: var(--verde-claro); border-color: var(--verde); font-weight: 700; }
.grade-estoque th.tam { text-align: center; }
.grade-estoque tbody tr:hover td { background: #fafcfa; }

/* modal e aviso */
.modal { position: fixed; inset: 0; background: rgba(15, 30, 15, .45); display: grid; place-items: center; z-index: 50; padding: 16px; }
.modal[hidden] { display: none; }
.modal-caixa { background: #fff; border-radius: 14px; padding: 22px; width: min(760px, 100%); max-height: calc(100vh - 32px); overflow: auto; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.modal-caixa.estreito { width: min(460px, 100%); }
.aviso { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--verde-escuro); color: #fff; padding: 12px 18px; border-radius: 10px; z-index: 60; max-width: 90vw; box-shadow: 0 8px 30px rgba(0,0,0,.25); }
.aviso.erro { background: var(--vermelho); }
.aviso[hidden] { display: none; }

/* cupom */
.cupom { font-family: "Courier New", Consolas, monospace; font-size: 11px; line-height: 1.35; width: 76mm; max-width: 100%; color: #000; background: #fff; padding: 4mm 2mm; white-space: pre-wrap; word-break: break-word; }
.cupom-previa { background: #eceeec; border-radius: 10px; padding: 14px; display: flex; justify-content: center; }
.cupom-previa .cupom { box-shadow: 0 2px 10px rgba(0,0,0,.12); }
.cupom .c { text-align: center; display: block; }
.cupom .b { font-weight: 700; }
.cupom .g { font-size: 14px; font-weight: 700; }

#impressao { display: none; }
@media print {
  @page { size: 80mm auto; margin: 2mm; }
  body { background: #fff; }
  body > *:not(#impressao) { display: none !important; }
  #impressao { display: block; }
  #impressao .cupom { box-shadow: none; padding: 0; width: 76mm; }
}