:root {
  --fundo: #f4f1ec;
  --papel: #ffffff;
  --tinta: #1f1a17;
  --suave: #6d635b;
  --linha: #e4ddd3;
  --linha-forte: #cfc5b8;
  --pri: #8e1b1b;
  --pri-escuro: #6d1212;
  --pri-claro: #f6e7e4;
  --verde: #1f6b3a;
  --neg: #b42318;
  --alerta-bg: #fff5db;
  --alerta-bd: #e9c46a;
  --raio: 8px;
  --sombra: 0 1px 2px rgba(31, 26, 23, .06), 0 2px 8px rgba(31, 26, 23, .04);
  font-size: 15px;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fundo); color: var(--tinta); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; line-height: 1.45; }
a { color: var(--pri); }
h1 { font-size: 1.5rem; margin: 0 0 .2rem; letter-spacing: -.01em; }
h2 { font-size: 1rem; margin: 0 0 .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--suave); }
.muted { color: var(--suave); margin: .2rem 0; }
.pequeno { font-size: .82rem; }
code { background: var(--pri-claro); padding: 1px 5px; border-radius: 4px; }

/* Topo */
.topo { background: var(--tinta); color: #fff; }
.topo-in { max-width: 1400px; margin: 0 auto; padding: .7rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.marca { color: #fff; text-decoration: none; font-weight: 700; font-size: 1.05rem; }
.marca small { font-weight: 400; opacity: .6; margin-left: .4rem; font-size: .8rem; }
.marca-ico { color: #e05a47; }
.topo nav { display: flex; gap: .2rem; flex-wrap: wrap; }
.topo nav a { color: #e8e2da; text-decoration: none; padding: .4rem .7rem; border-radius: 6px; font-size: .92rem; }
.topo nav a:hover { background: rgba(255, 255, 255, .08); }
.topo nav a.ativo { background: var(--pri); color: #fff; }
.topo nav a.sair { opacity: .7; }

.pagina { max-width: 1400px; margin: 0 auto; padding: 1.2rem 1rem 3rem; }
.cab-pagina { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.cab-secao { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .6rem; }
.cab-secao h2 { margin: 0; }
.botoes { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

/* Botões */
.btn { display: inline-block; border: 1px solid var(--linha-forte); background: var(--papel); color: var(--tinta); padding: .5rem .95rem; border-radius: 6px; font: inherit; font-size: .92rem; cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn:hover { border-color: var(--suave); }
.btn-pri { background: var(--pri); border-color: var(--pri); color: #fff; font-weight: 600; }
.btn-pri:hover { background: var(--pri-escuro); border-color: var(--pri-escuro); }
.btn-leve { background: transparent; }
.btn-bloco { width: 100%; padding: .7rem; margin-top: .4rem; }
button.link { background: none; border: 0; padding: 0; color: var(--pri); font: inherit; cursor: pointer; text-decoration: underline; }
button.link.perigo, a.perigo { color: var(--neg); }
.ico { background: none; border: 0; cursor: pointer; color: var(--suave); padding: 2px 4px; font-size: .8rem; line-height: 1; }
.ico:hover { color: var(--pri); }

/* Formulários */
input, select, textarea { font: inherit; color: inherit; border: 1px solid var(--linha-forte); border-radius: 6px; padding: .45rem .55rem; background: #fff; width: 100%; min-width: 0; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--pri); outline-offset: -1px; border-color: var(--pri); }
label { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; font-weight: 600; color: var(--tinta); }
label.inline { flex-direction: row; align-items: center; gap: .4rem; font-weight: 400; white-space: nowrap; }
label.check { flex-direction: row; align-items: center; gap: .5rem; font-weight: 400; }
label.check input { width: auto; }
.ajuda { font-weight: 400; color: var(--suave); font-size: .78rem; }
input.num { text-align: right; font-variant-numeric: tabular-nums; }
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.campos .col-2 { grid-column: span 2; }
.campos.uma-coluna { grid-template-columns: 1fr; }

/* Painéis */
.painel { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); padding: 1rem; box-shadow: var(--sombra); margin-bottom: 1rem; }
.painel.estreito { max-width: 420px; }
.grade-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.grade-2 .painel { margin-bottom: 1rem; }

/* Avisos */
.aviso { padding: .7rem .9rem; border-radius: var(--raio); margin-bottom: 1rem; border: 1px solid; }
.aviso-ok { background: #e7f4ec; border-color: #9fd3b1; color: var(--verde); }
.aviso-erro { background: #fdecea; border-color: #f2b8b2; color: var(--neg); }
.aviso-info { background: #eef3fb; border-color: #b9cbea; }
.aviso-alerta { background: var(--alerta-bg); border-color: var(--alerta-bd); }
.aviso-alerta div + div { margin-top: .3rem; }

/* Tabelas */
.tabela-wrap { overflow-x: auto; margin-bottom: .8rem; -webkit-overflow-scrolling: touch; }
.tabela { width: 100%; border-collapse: collapse; background: var(--papel); font-variant-numeric: tabular-nums; }
.tabela th, .tabela td { padding: .5rem .55rem; border-bottom: 1px solid var(--linha); text-align: left; vertical-align: middle; }
.tabela thead th { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); border-bottom: 2px solid var(--linha-forte); white-space: nowrap; line-height: 1.2; }
.tabela thead th small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.tabela tbody tr:hover { background: #fbf9f6; }
.tabela tfoot td { font-weight: 700; border-top: 2px solid var(--linha-forte); border-bottom: 0; }
.tabela .n { text-align: right; white-space: nowrap; }
.tabela .c { text-align: center; }
.tabela .c input { width: auto; }
.tabela tr.inativo { opacity: .5; }
.tabela input.curto { width: 9rem; }
.neg { color: var(--neg); font-weight: 600; }
.destaque { background: var(--pri-claro); }
.tabela .acoes { white-space: nowrap; display: flex; gap: .7rem; align-items: center; }
.tabela .acoes form { display: inline; }
.link-forte { font-weight: 600; text-decoration: none; color: var(--tinta); }
.link-forte:hover { color: var(--pri); }
.tag { display: inline-block; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: 99px; vertical-align: middle; margin-left: .4rem; }
.tag-sim { background: #e8e3f7; color: #4b3a8c; }
.vazio { background: var(--papel); border: 1px dashed var(--linha-forte); border-radius: var(--raio); padding: 2rem; text-align: center; color: var(--suave); }

/* Tabela de itens do rateio */
.tabela-itens td { padding: .3rem .35rem; }
.tabela-itens input, .tabela-itens select { padding: .35rem .4rem; }
.tabela-itens .nome { min-width: 11rem; }
.tabela-itens .tipo { min-width: 7.5rem; }
.tabela-itens input.num { width: 6.2rem; }
.tabela-itens .peso { width: 6.8rem !important; }
.tabela-itens .mover { white-space: nowrap; width: 1%; }
.tabela-itens .mover .ico { display: block; padding: 0 3px; }
.tabela-itens tr[data-tipo="subproduto"] { background: #f7f5f0; }
.tabela-itens tr[data-tipo="perda"] { background: #f7f2f1; color: var(--suave); }
.tabela-itens .c-sug { font-weight: 700; }
#btn-add { margin-right: .6rem; }

/* Resumo */
.resumo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.linhas { display: grid; grid-template-columns: 1fr auto; gap: .35rem 1rem; margin: 0; font-variant-numeric: tabular-nums; }
.linhas dt { color: var(--suave); }
.linhas dd { margin: 0; text-align: right; }
.linhas .forte { color: var(--tinta); font-weight: 700; border-top: 1px solid var(--linha); padding-top: .35rem; }
.tabela-res { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tabela-res th, .tabela-res td { padding: .35rem .3rem; text-align: right; border-bottom: 1px solid var(--linha); }
.tabela-res thead th { font-size: .74rem; text-transform: uppercase; color: var(--suave); }
.tabela-res tbody th { text-align: left; color: var(--suave); font-weight: 400; }
.tabela-res tr.forte td, .tabela-res tr.forte th { font-weight: 700; color: var(--tinta); }
.tabela-res td:last-child, .tabela-res th:last-child { background: var(--pri-claro); }

.barra-salvar { position: sticky; bottom: 0; background: rgba(244, 241, 236, .96); border-top: 1px solid var(--linha-forte); padding: .7rem 0; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: .5rem; backdrop-filter: blur(4px); }

/* Listagem */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; margin-bottom: 1rem; }
.card { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); padding: .8rem 1rem; box-shadow: var(--sombra); display: flex; flex-direction: column; }
.card span { font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); }
.card strong { font-size: 1.45rem; font-variant-numeric: tabular-nums; margin: .15rem 0; }
.card small { color: var(--suave); font-size: .78rem; }
.filtros { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .8rem; align-items: center; }
.filtros > input { flex: 1 1 240px; width: auto; }
.filtros select { width: auto; }
.filtros input[type="date"] { width: auto; }

/* Login */
.tela-login { display: grid; place-items: center; min-height: 100vh; padding: 1rem; }
.caixa-login { background: var(--papel); border: 1px solid var(--linha); border-radius: 12px; padding: 2rem; width: 100%; max-width: 380px; box-shadow: var(--sombra); }
.caixa-login form { display: grid; gap: .8rem; margin-top: 1rem; }
.marca-login { color: var(--pri); font-size: 2rem; line-height: 1; }

/* Impressão */
.impressao { background: #e9e5df; }
.barra-imp { max-width: 1100px; margin: 1rem auto; padding: 0 1rem; display: flex; gap: .5rem; }
.folha { background: #fff; max-width: 1100px; margin: 0 auto 2rem; padding: 1.6rem; box-shadow: var(--sombra); }
.imp-cab { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 3px solid var(--pri); padding-bottom: .7rem; margin-bottom: 1rem; }
.imp-cab p { margin: .2rem 0 0; color: var(--suave); }
.imp-param { text-align: right; font-size: .85rem; color: var(--suave); }
.imp-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: .6rem; margin-bottom: 1rem; }
.imp-kpis div { border: 1px solid var(--linha); border-radius: 6px; padding: .5rem .6rem; }
.imp-kpis span { display: block; font-size: .7rem; text-transform: uppercase; color: var(--suave); }
.imp-kpis strong { font-size: 1.1rem; }
.imp-tab { font-size: .85rem; margin-bottom: 1rem; }
.imp-tab th, .imp-tab td { padding: .3rem .4rem; }
.imp-tab tr.tipo-perda { color: var(--suave); }
.imp-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; font-size: .88rem; margin-bottom: 1rem; }
.imp-obs { font-size: .88rem; }
.imp-rodape { font-size: .75rem; color: var(--suave); margin-top: 1rem; text-align: right; }

@media print {
  @page { size: A4 landscape; margin: 10mm; }
  .no-print { display: none !important; }
  body, .impressao { background: #fff; }
  .folha { box-shadow: none; padding: 0; margin: 0; max-width: none; }
  .tabela tbody tr:hover { background: none; }
  .imp-tab tr { break-inside: avoid; }
}

@media (max-width: 1000px) {
  .grade-2, .resumo { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr 1fr; }
  .imp-kpis { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .campos { grid-template-columns: 1fr; }
  .campos .col-2 { grid-column: auto; }
  .cards { grid-template-columns: 1fr; }
  .pagina { padding: 1rem .75rem 3rem; }
  .imp-colunas { grid-template-columns: 1fr; }
}