:root { --cacau: #4F260C; --ouro: #C9A257; --bg: #FEF7F0; --surface: #FFFFFF; --line: #E6D9C8; --ink: #2A1405; --muted: #7A6652; --ok: #3F5A48; --alerta: #A5593A; --raio: 8px; }
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font: 15px/1.5 "Montserrat", system-ui, sans-serif; background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
h1, h2 { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 700; }
.mudo { color: var(--muted); } .peq { font-size: .8rem; }
.btn { padding: 10px 16px; border-radius: var(--raio); border: 1px solid var(--cacau); background: var(--cacau); color: #fff; font: 600 .9rem "Montserrat", sans-serif; cursor: pointer; }
.btn:hover { filter: brightness(1.12); } .btn.ghost { background: transparent; color: var(--cacau); }
.btn.mini { padding: 6px 10px; font-size: .78rem; } .btn[disabled] { opacity: .5; cursor: wait; }
.link { background: none; border: 0; color: var(--cacau); text-decoration: underline; cursor: pointer; font: inherit; }
input, select { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--raio); background: #fff; font: 500 .95rem "Montserrat", sans-serif; color: var(--ink); }
input:focus, select:focus, button:focus-visible { outline: 2px solid var(--ouro); outline-offset: 1px; }
label { display: grid; gap: 4px; font-size: .78rem; font-weight: 600; color: var(--muted); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 22px; }
.erro { color: var(--alerta); font-size: .85rem; min-height: 1.2em; }

#login { min-height: 100dvh; display: grid; place-items: center; padding: 16px; }
.login { width: min(380px, 100%); display: grid; gap: 14px; text-align: center; }
.login img { margin: 0 auto; } .login h1 { font-size: 2rem; }
.login label { text-align: left; }

.topo { position: sticky; top: 0; z-index: 5; background: var(--cacau); color: #fff; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 10px 16px; }
.marca { display: flex; align-items: center; gap: 8px; } .marca b { font: 700 1.3rem "Cormorant Garamond", serif; } .marca .mudo { color: #D9C3A0; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; }
#abas { display: flex; gap: 4px; flex: 1; overflow-x: auto; }
.aba { background: transparent; color: #E9D9BF; border: 0; border-radius: 6px; padding: 7px 12px; font: 600 .85rem "Montserrat", sans-serif; cursor: pointer; white-space: nowrap; }
.aba.on { background: rgba(255, 255, 255, .16); color: #fff; } .aba.off { opacity: .4; cursor: not-allowed; }
.conta { display: flex; align-items: center; gap: 10px; font-size: .8rem; } .conta .link { color: #fff; }
.conta .mudo { color: #D9C3A0; }

.conteudo { max-width: 1100px; margin: 0 auto; padding: 18px 16px 60px; }
.resumo { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.kpi b { display: block; font: 700 1.5rem "Cormorant Garamond", serif; } .kpi span { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.kpi.alerta b { color: var(--alerta); }
.barra { display: grid; grid-template-columns: 2fr 1fr 1fr auto auto; gap: 8px; margin-bottom: 14px; }
.vazio { text-align: center; display: grid; gap: 10px; justify-items: center; margin-bottom: 14px; }

.lista { display: grid; gap: 6px; }
.grupo { margin-top: 10px; font: 700 1.15rem "Cormorant Garamond", serif; color: var(--cacau); border-bottom: 2px solid var(--ouro); padding-bottom: 2px; display: flex; justify-content: space-between; align-items: baseline; }
.grupo small { font: 600 .75rem "Montserrat", sans-serif; color: var(--muted); }
.linha { display: grid; grid-template-columns: 2.2fr .6fr .7fr .9fr auto; gap: 8px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; }
.linha .nome b { display: block; font-size: .92rem; } .linha .nome span { font-size: .75rem; color: var(--muted); }
.qtd { font: 700 1.1rem "Cormorant Garamond", serif; } .qtd.zero { color: var(--alerta); } .qtd.baixo { color: #B8860B; }
.valor { font-size: .85rem; text-align: right; }
.acoes-linha { display: flex; gap: 4px; }
.mov { display: grid; grid-template-columns: 90px 70px 1fr 60px 90px; gap: 8px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; font-size: .85rem; }
.tipo { font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; } .tipo.entrada { color: var(--ok); } .tipo.saida { color: var(--alerta); } .tipo.ajuste { color: var(--muted); }

dialog { margin: auto; border: 0; border-radius: 14px; padding: 22px; width: min(560px, 94vw); background: var(--bg); color: var(--ink); box-shadow: 0 20px 60px rgba(40, 20, 8, .35); }
dialog::backdrop { background: rgba(40, 20, 8, .5); }
dialog h2 { font-size: 1.6rem; margin-bottom: 10px; }
.grade2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .larga { grid-column: 1 / -1; }
.rotulo { margin: 14px 0 6px; font-size: .78rem; font-weight: 600; color: var(--muted); }
.tams { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; } .tams label { text-align: center; } .tams input { text-align: center; padding: 8px 4px; }
.acoes { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
#toast { position: fixed; left: 50%; bottom: 20px; transform: translate(-50%, 20px); background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 999px; font-size: .85rem; opacity: 0; pointer-events: none; transition: .25s; z-index: 20; }
#toast.on { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 760px) {
  .resumo { grid-template-columns: 1fr 1fr; }
  .barra { grid-template-columns: 1fr 1fr; } .barra input { grid-column: 1 / -1; } .barra .btn { grid-column: 1 / -1; }
  .linha { grid-template-columns: 1fr auto; } .linha .valor { text-align: left; } .linha .acoes-linha { grid-column: 1 / -1; }
  .linha .nome { grid-column: 1 / -1; }
  .mov { grid-template-columns: 1fr 1fr; } .mov .obs { grid-column: 1 / -1; }
  .tams { grid-template-columns: repeat(3, 1fr); } .grade2 { grid-template-columns: 1fr; }
  .conta { margin-left: auto; }
}

/* ---- abas de gestão ---- */
.sub { font-size: 1.5rem; margin: 22px 0 8px; color: var(--cacau); }
.kpi em { display: block; font-style: normal; font-size: .72rem; color: var(--muted); margin-top: 2px; }
.barra-mes, .barra-v { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-bottom: 14px; } .barra-mes label, .barra-v label { min-width: 170px; }
.barra-v input[type=search] { flex: 1; min-width: 200px; } .barra-v select { width: auto; min-width: 160px; }
.grade3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .top { margin-top: 12px; }
.card h2 { font-size: 1.6rem; margin-bottom: 10px; }
.itens-orc { display: grid; gap: 10px; margin-bottom: 8px; }
.item-orc { display: grid; grid-template-columns: 1.4fr 1.2fr 1.8fr .5fr .8fr; gap: 8px; align-items: end; background: #FBF4EA; border: 1px solid var(--line); border-radius: 8px; padding: 10px; }
.info-lin { grid-column: 1 / -1; display: flex; justify-content: space-between; color: var(--muted); }
.res-orc { margin: 14px 0; } .acoes.esq { justify-content: flex-start; flex-wrap: wrap; align-items: center; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.chip { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font: 600 .8rem "Montserrat", sans-serif; color: var(--ink); cursor: pointer; } .chip.on { background: var(--cacau); color: #fff; border-color: var(--cacau); }
.venda { display: grid; grid-template-columns: 2.4fr 1fr 1fr auto; gap: 10px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.venda.cancelado { opacity: .55; } .venda .nome span { font-size: .78rem; color: var(--muted); display: block; }
.venda .valor { text-align: right; } .venda .valor b { display: block; } .venda .valor small { color: var(--muted); }
.badges { display: flex; gap: 4px; flex-wrap: wrap; }
.badge { font: 700 .66rem "Montserrat", sans-serif; text-transform: uppercase; letter-spacing: .05em; padding: 3px 8px; border-radius: 999px; background: #EDE3D4; color: var(--cacau); }
.badge.aprovado { background: #FCEBC8; color: #8A5A00; } .badge.entregue, .badge.pago { background: #DCEBDD; color: var(--ok); } .badge.devendo { background: #F6DAD0; color: var(--alerta); } .badge.cancelado { background: #E8E2DA; color: var(--muted); }
.aviso-linha { background: #FFF3DC; border: 1px solid #EACB8B; border-radius: 8px; padding: 9px 12px; font-size: .88rem; }
.lin-v, .lin-u { grid-template-columns: 2.2fr .6fr 1fr 1fr 1fr; } .lin-u { grid-template-columns: 2.4fr 1fr 1fr; }
.tabela-rolagem { overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.tab-preco { border-collapse: collapse; width: 100%; font-size: .82rem; min-width: 980px; } .tab-preco th, .tab-preco td { padding: 8px 10px; text-align: right; border-bottom: 1px solid var(--line); vertical-align: top; }
.tab-preco th:first-child, .tab-preco td:first-child { text-align: left; } .tab-preco thead th { background: #F4EADB; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.tab-preco small { display: block; color: var(--muted); font-weight: 500; } .tab-preco small.neg { color: var(--alerta); } .tab-preco .sem-ficha { background: #FFF8EC; }
details.card { margin-bottom: 14px; padding: 12px 18px; } details.card summary { cursor: pointer; font-weight: 700; color: var(--cacau); } #p-prem { margin-top: 12px; }
.faixas { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; } .faixa { display: grid; gap: 4px; background: #FBF4EA; border: 1px solid var(--line); border-radius: 8px; padding: 8px; } .faixa b { font-size: .8rem; }
.previa { margin-top: 12px; } .mini-tab { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .mini-tab div { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; display: grid; } .mini-tab span { font-size: .68rem; color: var(--muted); text-transform: uppercase; } .mini-tab small { color: var(--muted); }
.grade-artes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.arte { text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px; cursor: pointer; font: inherit; color: inherit; display: grid; gap: 2px; }
.arte:hover { border-color: var(--ouro); } .arte b { font-size: .8rem; line-height: 1.2; } .arte small { color: var(--muted); font-size: .7rem; }
.miniatura, .arte-grande { display: grid; place-items: center; border-radius: 8px; background: #F2ECE2; aspect-ratio: 1; overflow: hidden; } .miniatura img, .arte-grande img { max-width: 92%; max-height: 92%; object-fit: contain; }
.grade-artes.escuro .miniatura, .arte-grande.escuro { background: #2A1F18; } .arte-grande { aspect-ratio: auto; min-height: 320px; margin: 10px 0; }
.btn.up { display: inline-block; cursor: pointer; }
@media (max-width: 760px) {
  .grade3 { grid-template-columns: 1fr 1fr; } .item-orc { grid-template-columns: 1fr 1fr; } .item-orc .desc { grid-column: 1 / -1; }
  .venda { grid-template-columns: 1fr auto; } .venda .badges, .venda .acoes-linha { grid-column: 1 / -1; }
  .lin-v, .lin-u { grid-template-columns: 1fr 1fr; } .lin-v .nome, .lin-u .nome { grid-column: 1 / -1; }
  .faixas { grid-template-columns: 1fr 1fr; } .mini-tab { grid-template-columns: 1fr 1fr; } #abas { order: 3; width: 100%; }
}

/* ---- mockup e artes pré-prontas ---- */
.mock { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.mock-tela { position: sticky; top: 70px; text-align: center; } #m-canvas { width: 100%; max-width: 640px; height: auto; border-radius: 12px; border: 1px solid var(--line); background: #ECE6DD; }
.mock-ctl { display: grid; gap: 8px; } .mock-ctl .rotulo { margin: 8px 0 0; } .mock-ctl input[type=range] { padding: 0; }
.cores { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; } .cor { aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--line); cursor: pointer; } .cor:hover { border-color: var(--ouro); } .cor[disabled] { opacity: .35; cursor: not-allowed; }
input[type=color] { height: 38px; padding: 2px; } .chk { display: flex; gap: 8px; align-items: center; } .chk input { width: auto; }
.tams-lista { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; } .tam { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px; font-size: .78rem; font-weight: 600; } .tam em { font-style: normal; font-weight: 500; color: var(--muted); } .tam.cam { background: #FBF4EA; }
#dlg-arte { width: min(640px, 94vw); } #dlg-picker { width: min(780px, 96vw); max-height: 90vh; overflow: auto; } #dlg-picker input { margin: 8px 0 12px; } .grade-artes.pk { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
@media (max-width: 900px) { .mock { grid-template-columns: 1fr; } .mock-tela { position: static; } }

.tecnica { font-size: .8rem; color: var(--ok); background: #EAF2EA; border-radius: 6px; padding: 6px 10px; } .tecnica:empty { display: none; }
#b-prev { width: 100%; max-width: 420px; height: auto; border-radius: 8px; margin: 8px 0; background: #cfd8cf; display: block; }

.iv-linha { display: grid; grid-template-columns: 2fr 1.1fr 1fr 1fr 1.2fr; gap: 8px; align-items: center; margin-bottom: 8px; }
@media (max-width: 700px) { .iv-linha { grid-template-columns: 1fr 1fr; } }