/* Orça CV v2. Identidade: a base de corte da gráfica (verde, grade de 1 cm, régua) e o
   registro CMYK. Uma família (Archivo), com a largura como personalidade: títulos largos como
   letreiro, texto normal. --marca vem de cada empresa e pinta as ações. */
:root {
  --mesa: #1f4a3e;
  --mesa-escura: #173a31;
  --mesa-fio: rgba(226, 240, 233, .13);
  --mesa-fio-forte: rgba(226, 240, 233, .32);
  --papel: #f3f4f1;
  --folha: #ffffff;
  --tinta: #191c1b;
  --texto: #343a38;
  --grafite: #5c6461;
  --fio: #dadfd9;
  --fio-forte: #c3c9c2;
  --ciano: #0098d8;
  --magenta: #e2007a;
  --amarelo: #ffd500;
  --ok: #17703f; --ok-claro: #e3f2e9;
  --atencao: #8f5600; --atencao-claro: #fbf0dc;
  --erro: #b42318; --erro-claro: #fdeceb;
  --info: #1d4f7a; --info-claro: #e6eff7;
  --whats: #1a9a50;
  --raio: 6px;
  --raio-g: 10px;
  --fonte: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --marca-claro: color-mix(in srgb, var(--marca) 10%, #fff);
  --marca-escuro: color-mix(in srgb, var(--marca) 80%, #000);
  --barra-celular: 0px;
  --encaixe-linha: #1f4a3e; --encaixe-sobra: #e2007a; --encaixe-chapa: #9fc0b0;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 15.5px/1.5 var(--fonte); font-stretch: 100%; color: var(--texto); background: var(--papel); }
h1, h2, h3 { color: var(--tinta); margin: 0; line-height: 1.12; font-stretch: 112%; font-weight: 720; }
a { color: var(--marca-escuro); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--marca); }
small { font-size: 13px; }
p { margin: 0 0 10px; }
img { max-width: 100%; }
code { font: 500 13px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; background: #e9ece7; padding: 2px 6px; border-radius: 4px; color: var(--tinta); word-break: break-all; }
[hidden] { display: none !important; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular { position: absolute; left: -999px; top: 8px; z-index: 90; background: var(--tinta); color: #fff; padding: 8px 14px; border-radius: var(--raio); }
.pular:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.sutil { color: var(--grafite); }
.rotulo { display: block; font-size: 13px; font-weight: 600; color: var(--grafite); margin: 0 0 4px; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.texto-alerta { color: var(--erro); font-weight: 650; }
.ic { width: 20px; height: 20px; flex: none; }

/* ---------- Marca do produto ---------- */
.marca-produto { display: inline-flex; align-items: center; gap: 8px; color: var(--tinta); }
.marca-produto svg { width: 26px; height: 26px; }
.marca-produto b { font-size: 17px; font-stretch: 125%; font-weight: 780; letter-spacing: -.01em; }
.marca-produto--claro { color: #f2f7f4; }

/* ---------- Botões ---------- */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 16px; border-radius: var(--raio); border: 1px solid var(--fio-forte); background: var(--folha); color: var(--tinta); font: 600 14.5px/1 var(--fonte); text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s, color .15s, box-shadow .15s; white-space: nowrap; }
.botao:hover { border-color: var(--tinta); color: var(--tinta); }
.botao:active { transform: translateY(1px); }
.botao--marca, .botao--cheio { background: var(--marca); border-color: var(--marca); color: #fff; }
.botao--marca:hover, .botao--cheio:hover { background: var(--marca-escuro); border-color: var(--marca-escuro); color: #fff; }
.botao--whats { background: var(--whats); border-color: var(--whats); color: #fff; }
.botao--whats:hover { background: #157e41; border-color: #157e41; color: #fff; }
.botao--grande { min-height: 50px; padding: 0 22px; font-size: 16px; }
.botao--largo { width: 100%; }
.botao--tracejado { width: 100%; border-style: dashed; min-height: 50px; color: var(--grafite); background: transparent; }
.botao--tracejado:hover { color: var(--marca-escuro); border-color: var(--marca); background: var(--marca-claro); }
.botao[disabled] { opacity: .55; cursor: progress; }
.botao .ic { width: 18px; height: 18px; }
.botao-link { background: none; border: 0; padding: 0; color: var(--marca-escuro); font: 600 14px var(--fonte); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.botao-link--perigo { color: var(--erro); }
.botao-icone { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: var(--raio); border: 1px solid transparent; background: none; color: var(--grafite); cursor: pointer; }
.botao-icone:hover { border-color: var(--fio-forte); color: var(--tinta); background: var(--folha); }
.botao-icone--perigo:hover { color: var(--erro); border-color: #f1c4bf; }
.em-linha { display: inline; }

/* ---------- Formulários ---------- */
.formulario { display: grid; gap: 14px; }
label { display: grid; gap: 6px; font: 600 14px/1.3 var(--fonte); color: var(--tinta); }
label small { font-weight: 400; color: var(--grafite); }
input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]), select, textarea {
  width: 100%; min-height: 44px; padding: 9px 12px; border: 1px solid var(--fio-forte); border-radius: var(--raio);
  background: var(--folha); font: 400 16px/1.35 var(--fonte); color: var(--tinta); }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--marca); outline-offset: -1px; border-color: var(--marca); }
input[aria-invalid=true] { border-color: var(--erro); background: var(--erro-claro); }
.check { display: inline-flex; align-items: center; gap: 9px; font-weight: 500; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--marca); margin: 0; }
.campos { display: grid; gap: 12px; }
.campos--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.campos--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.campo-senha { position: relative; display: block; }
.campo-senha input { padding-right: 48px !important; }
.campo-senha__ver { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 40px; height: 36px; border: 0; background: none; color: var(--grafite); cursor: pointer; border-radius: var(--raio); }
.campo-senha__ver[aria-pressed=true] { color: var(--marca); }

/* ---------- Avisos e selos ---------- */
.aviso { margin: 0 0 16px; padding: 12px 16px; border-radius: var(--raio); border-left: 4px solid; font-size: 14.5px; background: var(--folha); }
.aviso p:last-child { margin: 0; }
.aviso--ok { background: var(--ok-claro); border-color: var(--ok); color: #0f4a29; }
.aviso--erro { background: var(--erro-claro); border-color: var(--erro); color: #7a1912; }
.aviso--atencao { background: var(--atencao-claro); border-color: #d99a2b; color: #5e3a00; }
.aviso--info { background: var(--info-claro); border-color: var(--info); color: #163d5e; }
.credencial { font-size: 15px; }
.aviso-flutuante { position: fixed; left: 50%; bottom: calc(24px + var(--barra-celular)); transform: translateX(-50%); z-index: 80; background: var(--tinta); color: #fff; padding: 11px 18px; border-radius: var(--raio); font-weight: 600; box-shadow: 0 8px 28px rgba(0, 0, 0, .25); max-width: calc(100% - 32px); }
.selo { display: inline-block; padding: 3px 9px; border-radius: 999px; font: 600 12.5px/1.3 var(--fonte); background: #e7eae5; color: var(--texto); white-space: nowrap; }
.selo--site { background: var(--info-claro); color: var(--info); }
.selo--enviado { background: var(--atencao-claro); color: var(--atencao); }
.selo--aprovado { background: var(--ok-claro); color: var(--ok); }
.selo--perdido { background: var(--erro-claro); color: var(--erro); }

/* ---------- Superfícies ---------- */
.cartao { background: var(--folha); border: 1px solid var(--fio); border-radius: var(--raio-g); padding: 20px 22px; margin-bottom: 16px; }
.cartao__titulo { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 12px; margin-bottom: 14px; flex-wrap: wrap; }
.cartao__titulo h2, .cartao__h { font-size: 18px; }
.cartao__h { margin: 0 0 14px; }
.cartao__titulo small { color: var(--grafite); }
.grade-2 { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.grade-2--lateral { grid-template-columns: minmax(0, 1fr) 360px; }
.tabela-rolagem { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tabela th { text-align: left; font: 600 13px var(--fonte); color: var(--grafite); padding: 0 10px 10px; border-bottom: 1px solid var(--fio); white-space: nowrap; }
.tabela td { padding: 12px 10px; border-bottom: 1px solid var(--fio); vertical-align: top; }
.tabela td small { display: block; color: var(--grafite); }
.tabela tbody tr[data-link] { cursor: pointer; }
.tabela tbody tr[data-link]:hover td { background: #f8f9f6; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela__itens { max-width: 320px; color: var(--grafite); }
.tabela td:first-child a { font-weight: 700; }
.tabela__acoes { white-space: nowrap; }
.tabela__acoes a + a { margin-left: 12px; }
.vazio { text-align: center; padding: 28px 12px; color: var(--grafite); }
.vazio .botao { margin-top: 6px; }

/* ---------- Painel: estrutura ---------- */
.app { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; }
.lateral { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 14px; padding: 16px 12px; background: var(--mesa); color: #e6efe9; overflow-y: auto; }
.lateral__empresa { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 6px 10px; background: #fff; border-radius: var(--raio); }
.lateral__empresa img { max-height: 44px; max-width: 200px; object-fit: contain; }
.lateral__empresa b { font-size: 15px; color: var(--tinta); line-height: 1.2; }
.lateral__inicial { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--raio); background: var(--marca); color: #fff; font-weight: 780; font-stretch: 125%; flex: none; }
.lateral__novo { width: 100%; }
.lateral__nav { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.lateral a:not(.botao) { display: flex; align-items: center; gap: 11px; min-height: 42px; padding: 0 10px; border-radius: var(--raio); color: #d7e5dd; text-decoration: none; font-weight: 500; }
.lateral a:not(.botao):hover { background: var(--mesa-fio); color: #fff; }
.lateral a[aria-current=page] { background: #f3f7f4; color: var(--mesa); font-weight: 650; }
.lateral__pe { margin-top: auto; display: grid; gap: 2px; border-top: 1px solid var(--mesa-fio-forte); padding-top: 12px; }
.lateral__usuario { padding: 8px 10px; display: grid; }
.lateral__usuario b { color: #fff; font-weight: 600; }
.lateral__usuario small { color: #a9c2b5; }
.lateral__produto { padding: 10px 10px 0; opacity: .75; }
.lateral__produto .marca-produto b { font-size: 14px; }
.lateral__produto svg { width: 20px; height: 20px; }
.lateral__veu { position: fixed; inset: 0; background: rgba(15, 25, 21, .45); z-index: 45; }
.principal { min-width: 0; padding: 0 32px 56px; }
.topo { display: flex; align-items: center; gap: 12px; min-height: 76px; flex-wrap: wrap; }
.topo h1 { font-size: 28px; font-stretch: 118%; font-weight: 760; letter-spacing: -.01em; flex: 1; min-width: 0; }
.topo__acoes { display: flex; gap: 8px; align-items: center; }
.topo__voltar { display: none; }
.faixa-teste { margin: -6px 0 14px; font-size: 14px; color: var(--grafite); }
main:focus { outline: none; }
.barra-celular { display: none; }

/* ---------- Painel: números ---------- */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--folha); border: 1px solid var(--fio); border-radius: var(--raio-g); margin-bottom: 16px; }
.kpi { padding: 18px 20px; display: grid; gap: 2px; border-left: 1px solid var(--fio); }
.kpi:first-child { border-left: 0; }
.kpi small { color: var(--grafite); font-weight: 600; font-size: 13.5px; }
.kpi b { font-size: 30px; font-stretch: 112%; font-weight: 760; color: var(--tinta); font-variant-numeric: tabular-nums; line-height: 1.15; }
.kpi span { color: var(--grafite); font-size: 13.5px; }
.barras { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.barras li { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 14px; }
.barras__trilho { height: 10px; background: var(--papel); border-radius: 2px; overflow: hidden; }
.barras__trilho i { display: block; height: 100%; background: var(--marca); }
.barras b { font-variant-numeric: tabular-nums; }

/* ---------- Filtros ---------- */
.filtros { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 14px; }
.pilulas { display: flex; flex-wrap: wrap; gap: 6px; }
.pilula { display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--fio-forte); background: var(--folha); color: var(--texto); font: 600 14px var(--fonte); text-decoration: none; cursor: pointer; white-space: nowrap; }
.pilula:hover { border-color: var(--marca); color: var(--marca-escuro); }
.pilula.is-ativa, .pilula[aria-checked=true] { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.busca { min-width: 280px; }
.filtro-ativo { font-size: 14.5px; }

/* ---------- Editor de orçamento ---------- */
.editor { display: grid; grid-template-columns: minmax(0, 1fr) 344px; gap: 16px; align-items: start; }
.editor__resumo { position: sticky; top: 16px; }
.itens { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 12px; }
.item { border: 1px solid var(--fio); border-radius: var(--raio-g); padding: 14px; background: #fbfbf9; }
.item__topo { display: flex; gap: 10px; align-items: center; }
.item__n { display: grid; place-items: center; min-width: 28px; height: 28px; border-radius: var(--raio); background: var(--tinta); color: #fff; font-weight: 700; font-size: 14px; flex: none; font-variant-numeric: tabular-nums; }
.item__material { flex: 1; font-weight: 600 !important; }
.item__tirar { width: 38px; height: 38px; border-radius: var(--raio); border: 1px solid transparent; background: none; font-size: 22px; line-height: 1; color: var(--grafite); cursor: pointer; flex: none; }
.item__tirar:hover { border-color: var(--fio-forte); color: var(--erro); }
.item__campos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.item__acab { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.item__acab:empty { display: none; }
.chip { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 12px; border: 1px solid var(--fio-forte); border-radius: 999px; background: var(--folha); font: 500 14px var(--fonte); cursor: pointer; color: var(--texto); }
.chip input { accent-color: var(--marca); margin: 0; }
.chip:has(input:checked) { border-color: var(--marca); background: var(--marca-claro); color: var(--marca-escuro); }
.item__resultado { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--fio-forte); font-size: 14px; display: grid; gap: 8px; }
.item__resultado:empty { display: none; }
.item__linha { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: baseline; }
.item__linha b { font-size: 20px; font-stretch: 112%; font-weight: 760; color: var(--tinta); font-variant-numeric: tabular-nums; }
.item__erro { color: var(--erro); font-weight: 600; }
.item__composicao summary { cursor: pointer; color: var(--grafite); font-size: 13.5px; }
.item__composicao table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-top: 4px; }
.item__composicao td { padding: 4px 0; border-bottom: 1px solid var(--fio); }
.item__composicao td + td { text-align: right; white-space: nowrap; padding-left: 10px; font-variant-numeric: tabular-nums; }

/* Encaixe desenhado em escala sobre a base de corte */
.encaixe { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.encaixe__mesa { position: relative; background-color: var(--mesa); background-image: linear-gradient(var(--mesa-fio) 1px, transparent 1px), linear-gradient(90deg, var(--mesa-fio) 1px, transparent 1px); background-size: 12px 12px; border-radius: var(--raio); padding: 12px; overflow: hidden; }
.encaixe__mesa { display: grid; place-items: center; }
.encaixe svg { display: block; width: 100%; height: auto; max-height: 240px; }
.encaixe__legenda { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--grafite); }
.encaixe__legenda i { display: inline-block; width: 12px; height: 12px; border-radius: 2px; vertical-align: -1px; margin-right: 5px; }
.encaixe__legenda .l-peca { background: #fff; outline: 1px solid var(--fio-forte); }
.encaixe__legenda .l-sobra { background: repeating-linear-gradient(135deg, var(--encaixe-sobra) 0 2px, transparent 2px 5px); }

.resumo__preco { display: block; font-size: 40px; font-stretch: 112%; font-weight: 780; line-height: 1.05; color: var(--tinta); font-variant-numeric: tabular-nums; margin-bottom: 14px; letter-spacing: -.01em; }
.resumo__kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); border: 1px solid var(--fio); border-radius: var(--raio); margin-bottom: 14px; }
.resumo__kpis div { padding: 9px 11px; display: grid; border-left: 1px solid var(--fio); }
.resumo__kpis div:first-child { border-left: 0; }
.resumo__kpis small, .resumo__final small { color: var(--grafite); font-size: 12.5px; }
.resumo__kpis b, .resumo__final b { font-size: 16.5px; font-weight: 700; color: var(--tinta); font-variant-numeric: tabular-nums; }
.resumo__desconto { margin-bottom: 8px; }
.regua { margin-bottom: 12px; }
.regua__trilho { height: 8px; background: var(--papel); border-radius: 2px; overflow: hidden; }
.regua__trilho i { display: block; height: 100%; width: 0; background: var(--ok); transition: width .2s; }
.regua.is-abaixo .regua__trilho i { background: #d99a2b; }
.regua.is-prejuizo .regua__trilho i { background: var(--erro); }
.regua small { color: var(--grafite); }
.resumo__final { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.resumo__final div { background: var(--papel); border-radius: var(--raio); padding: 9px 11px; display: grid; }
.situacao { margin: 10px 0 0; padding: 10px 12px; border-radius: var(--raio); font-weight: 600; font-size: 14px; }
.situacao:empty { display: none; }
.situacao.is-ok { background: var(--ok-claro); color: var(--ok); }
.situacao.is-abaixo { background: var(--atencao-claro); color: var(--atencao); }
.situacao.is-prejuizo { background: var(--erro-claro); color: var(--erro); }
.acoes-editor { display: grid; gap: 10px; }
.acoes-editor__linha { display: flex; flex-wrap: wrap; gap: 8px; }
.acoes-editor__linha .botao { flex: 1 1 auto; }
.acoes-editor form { margin: 0; }
.nuvem { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; color: var(--grafite); }
.nuvem .ic { width: 18px; height: 18px; }
.nuvem[data-estado=salvo] { color: var(--ok); }
.nuvem[data-estado=salvando] .ic { animation: pulsar 1s infinite; }
.nuvem[data-estado=pendente] { color: var(--atencao); }
.nuvem[data-estado=erro] { color: var(--erro); }
@keyframes pulsar { 50% { opacity: .35; } }

/* ---------- Arquivos ---------- */
.soltar { display: grid; justify-items: center; gap: 4px; text-align: center; padding: 22px 16px; border: 1.5px dashed var(--fio-forte); border-radius: var(--raio-g); background: #fafbf8; color: var(--grafite); transition: background .15s, border-color .15s; }
.soltar .ic { width: 30px; height: 30px; color: var(--grafite); }
.soltar p { margin: 0; color: var(--texto); }
.soltar.is-sobre { border-color: var(--marca); background: var(--marca-claro); }
.soltar__fila { width: 100%; display: grid; gap: 6px; margin-top: 6px; }
.soltar__fila:empty { display: none; }
.envio { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; text-align: left; font-size: 13.5px; }
.envio span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texto); }
.envio progress { grid-column: 1 / -1; width: 100%; height: 6px; accent-color: var(--marca); }
.envio--erro { color: var(--erro); }
.lista-arquivos { list-style: none; margin: 12px 0 0; padding: 0; display: grid; }
.lista-arquivos:empty { display: none; }
.arquivo { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--fio); }
.arquivo:last-child { border-bottom: 0; }
.arquivo__miniatura { width: 48px; height: 48px; border-radius: var(--raio); background: var(--papel); overflow: hidden; display: grid; place-items: center; border: 1px solid var(--fio); }
.arquivo__miniatura img { width: 100%; height: 100%; object-fit: cover; }
.arquivo__miniatura--tipo { font-size: 11.5px; font-weight: 750; font-stretch: 112%; color: var(--mesa); background: #e7efe9; }
.arquivo__info { min-width: 0; display: grid; }
.arquivo__nome { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tinta); text-decoration: none; }
.arquivo__nome:hover { text-decoration: underline; }
.arquivo__info small { color: var(--grafite); }
.arquivo__acoes { display: flex; align-items: center; gap: 6px; }
.arquivo__acoes select { width: auto; min-height: 38px; padding: 4px 8px; font-size: 14px; }
.arquivo__acoes .check { font-size: 13.5px; white-space: nowrap; }
.arquivos-topo { margin-bottom: 14px; }
.uso { display: grid; gap: 4px; max-width: 520px; }
.uso__barra { height: 8px; background: #e2e6e0; border-radius: 2px; overflow: hidden; }
.uso__barra i { display: block; height: 100%; background: var(--mesa); }
.uso small { color: var(--grafite); }

/* ---------- Materiais ---------- */
.ajuda summary { cursor: pointer; font-weight: 650; color: var(--tinta); }
.ajuda ul { margin: 10px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.material { background: var(--folha); border: 1px solid var(--fio); border-radius: var(--raio-g); margin-bottom: 10px; }
.material > summary { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; padding: 14px 18px; cursor: pointer; list-style: none; }
.material > summary::-webkit-details-marker { display: none; }
.material > summary::before { content: "▸"; color: var(--grafite); }
.material[open] > summary::before { content: "▾"; }
.material > summary small { color: var(--grafite); }
.material__grupo { font-size: 13px; font-weight: 700; color: var(--mesa); background: #e7efe9; padding: 2px 8px; border-radius: 4px; }
.material__corpo { padding: 0 18px 16px; display: grid; gap: 14px; }
.material__campos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.material__acab { display: grid; gap: 8px; }
.acab-linha { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.material__pe { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.barra-fixa { position: sticky; bottom: var(--barra-celular); display: flex; justify-content: flex-end; gap: 10px; padding: 12px 0; background: linear-gradient(transparent, var(--papel) 35%); z-index: 4; }

/* ---------- Empresa ---------- */
.logo-campo { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.logo-campo > div:not(.logo-campo__previa) { display: grid; gap: 6px; justify-items: start; }
.logo-campo__previa { width: 180px; height: 80px; border: 1px dashed var(--fio-forte); border-radius: var(--raio); display: grid; place-items: center; background: repeating-conic-gradient(#eef0ec 0 25%, #fff 0 50%) 0 0 / 14px 14px; color: var(--grafite); font-size: 13px; }
.logo-campo__previa img { max-width: 170px; max-height: 70px; object-fit: contain; }
.cor-campo { display: flex; gap: 10px; align-items: center; }
.cor-campo input { width: 52px; height: 44px; padding: 2px; border: 1px solid var(--fio-forte); border-radius: var(--raio); background: #fff; }
.copiar { display: flex; gap: 8px; align-items: center; background: var(--papel); border-radius: var(--raio); padding: 8px 8px 8px 12px; margin-bottom: 14px; }
.copiar code { background: none; padding: 0; flex: 1; }
.copiar--bloco { align-items: flex-start; }
.copiar pre { margin: 0; flex: 1; white-space: pre-wrap; word-break: break-all; font: 12.5px/1.5 ui-monospace, Consolas, monospace; color: var(--tinta); }

/* ---------- Entrada (login, cadastro, início) ---------- */
.entrada { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: 100vh; background: var(--folha); }
.entrada__lado { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; padding: 32px 40px 36px; background: var(--mesa); color: #e8f1ec; overflow: hidden; }
.entrada__frase { max-width: 34ch; font-size: 19px; line-height: 1.45; color: #d9e7df; margin: 0; position: relative; }
.entrada__form { display: grid; align-items: center; padding: 40px 24px; }
.entrada__caixa { width: 100%; max-width: 420px; margin: 0 auto; }
.entrada__caixa--inicio { max-width: 520px; }
.entrada h1 { font-size: clamp(30px, 3.4vw, 42px); font-stretch: 122%; font-weight: 780; letter-spacing: -.015em; margin-bottom: 10px; }
.entrada__sub { color: var(--grafite); font-size: 16.5px; margin-bottom: 22px; }
.entrada .formulario { gap: 16px; }
.entrada__rodape { margin-top: 22px; color: var(--grafite); font-size: 14.5px; line-height: 1.6; }
.entrada__acoes { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 28px; }
.entrada__lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--fio); }
.entrada__lista li { padding: 12px 0; border-bottom: 1px solid var(--fio); color: var(--texto); }
.entrada__lista b { color: var(--tinta); }

/* A base de corte: grade de 1 cm, régua e uma lona cotada */
.mesa { --u: 16px; position: relative; flex: 1; min-height: 300px; border-radius: 8px; overflow: hidden; background-color: var(--mesa-escura);
  background-image: linear-gradient(var(--mesa-fio) 1px, transparent 1px), linear-gradient(90deg, var(--mesa-fio) 1px, transparent 1px),
    linear-gradient(var(--mesa-fio-forte) 1px, transparent 1px), linear-gradient(90deg, var(--mesa-fio-forte) 1px, transparent 1px);
  background-size: var(--u) var(--u), var(--u) var(--u), calc(var(--u) * 5) calc(var(--u) * 5), calc(var(--u) * 5) calc(var(--u) * 5); background-position: 26px 26px; }
.mesa__regua { position: absolute; display: flex; color: #cfe1d7; }
.mesa__regua--topo { top: 0; left: 26px; right: 0; height: 22px; }
.mesa__regua--lado { left: 0; top: 26px; bottom: 0; width: 22px; flex-direction: column; }
.mesa__regua span { position: relative; flex: 0 0 var(--u); }
.mesa__regua--topo span::before { content: ""; position: absolute; left: 0; bottom: 0; width: 1px; height: 6px; background: currentColor; opacity: .6; }
.mesa__regua--lado span::before { content: ""; position: absolute; top: 0; right: 0; height: 1px; width: 6px; background: currentColor; opacity: .6; }
.mesa__regua span[data-cm]::before { opacity: 1; height: 12px; }
.mesa__regua--lado span[data-cm]::before { width: 12px; height: 1px; }
.mesa__regua--topo span[data-cm]::after { content: attr(data-cm); position: absolute; left: 3px; top: 1px; font-size: 9.5px; font-variant-numeric: tabular-nums; opacity: .8; }
/* Escala da régua: 1 divisão = 16 px = 10 cm. A lona de 300 × 100 cm ocupa 30 × 10 divisões. */
.mesa__peca { position: absolute; left: calc(26px + var(--u) * 4); top: calc(26px + var(--u) * 6); width: calc(var(--u) * 30); height: calc(var(--u) * 10); background: #fbfbf8; box-shadow: 0 10px 30px rgba(0, 0, 0, .28); animation: peca-entra .9s cubic-bezier(.2, .8, .2, 1) .15s both; }
.mesa__preco { position: absolute; left: 18px; bottom: 14px; color: var(--tinta); font-size: 34px; font-stretch: 118%; font-weight: 780; line-height: 1.05; }
.mesa__preco small { display: block; font-size: 13px; font-weight: 500; font-stretch: 100%; color: var(--grafite); }
.mesa__cota { position: absolute; font-size: 11px; color: #d9e8e0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mesa__cota--l { left: 0; right: 0; top: -20px; text-align: center; border-bottom: 1px solid #9fc0b0; line-height: 16px; }
.mesa__cota--a { right: -60px; top: 0; bottom: 0; display: grid; align-items: center; padding-left: 8px; border-left: 1px solid #9fc0b0; }
.mesa__corte { position: absolute; width: 12px; height: 12px; border-color: var(--ciano); border-style: solid; }
.mesa__corte--a { left: -16px; top: -16px; border-width: 0 1px 1px 0; }
.mesa__corte--b { right: -16px; top: -16px; border-width: 0 0 1px 1px; border-color: var(--magenta); }
.mesa__corte--c { left: -16px; bottom: -16px; border-width: 1px 1px 0 0; border-color: var(--amarelo); }
.mesa__corte--d { right: -16px; bottom: -16px; border-width: 1px 0 0 1px; }
.mesa__registro { position: absolute; right: 18px; bottom: 18px; width: 30px; height: 30px; color: #cfe1d7; opacity: .7; }
@keyframes peca-entra { from { opacity: 0; transform: translateY(18px) rotate(-1.5deg); } to { opacity: 1; transform: none; } }

/* ---------- Páginas simples (administração) ---------- */
.simples { min-height: 100vh; padding: 6vh 16px 48px; }
.simples__caixa { width: 100%; max-width: 420px; margin: 0 auto; }
.simples--largo .simples__caixa { max-width: 1180px; }
.simples h1 { font-size: 32px; font-stretch: 118%; font-weight: 760; margin-bottom: 8px; }
.simples .formulario { background: var(--folha); border: 1px solid var(--fio); border-radius: var(--raio-g); padding: 22px; margin-top: 18px; }
.simples--largo .formulario.campos { align-items: end; }

/* ---------- Público (calculadora e orçamento do cliente) ---------- */
.publico { background: var(--papel); }
.publico__topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; background: var(--folha); border-bottom: 1px solid var(--fio); }
.publico__marca img { max-height: 48px; max-width: 200px; object-fit: contain; display: block; }
.publico__marca b { font-size: 19px; color: var(--tinta); }
.publico__conteudo { max-width: 1060px; margin: 0 auto; padding: 28px 20px 48px; }
.publico--embed { background: transparent; }
.publico--embed .publico__conteudo { padding: 4px 2px 8px; max-width: none; }
.publico__titulo h1 { font-size: 34px; font-stretch: 118%; font-weight: 780; }
.publico__titulo p { color: var(--grafite); margin: 6px 0 22px; max-width: 60ch; }
.publico__pe { text-align: center; color: var(--grafite); font-size: 13.5px; padding: 0 20px 32px; }
.calc { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 14px 22px; align-items: start; }
.calc__passo { grid-column: 1; margin: 0; padding: 18px 20px; border: 1px solid var(--fio); border-radius: var(--raio-g); background: var(--folha); min-width: 0; }
.calc__passo legend, .calc__rotulo { font: 700 17px/1.2 var(--fonte); font-stretch: 108%; color: var(--tinta); padding: 0; margin-bottom: 12px; float: left; width: 100%; }
.calc__passo legend + * { clear: both; }
.calc__rotulo { display: block; float: none; }
.checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; }
.checks .check { min-height: 40px; }
.calc__resultado { grid-column: 2; grid-row: 1 / span 4; position: sticky; top: 16px; display: grid; gap: 12px; padding: 22px; background: var(--folha); border: 1px solid var(--fio); border-top: 4px solid var(--marca); border-radius: var(--raio-g); }
.calc__valor small { display: block; font-size: 13.5px; font-weight: 600; color: var(--grafite); }
.calc__valor b { display: block; font-size: 40px; font-stretch: 112%; font-weight: 780; color: var(--tinta); margin: 4px 0; font-variant-numeric: tabular-nums; line-height: 1.1; }
.calc__valor span { display: block; font-size: 14px; color: var(--texto); }
.calc__nota { margin: 0; font-size: 13px; }
.calc .campos--3:has(.calc__medida[hidden]) { grid-template-columns: minmax(0, 240px); }
.dialogo { border: 0; border-radius: var(--raio-g); padding: 0; width: min(440px, calc(100% - 24px)); box-shadow: 0 24px 60px rgba(0, 0, 0, .3); }
.dialogo::backdrop { background: rgba(15, 25, 21, .5); }
.dialogo .formulario { padding: 22px; border: 0; margin: 0; }
.dialogo h2 { font-size: 22px; }
.dialogo p { margin: 0; }
.dialogo__acoes { display: flex; gap: 8px; justify-content: flex-end; }
.pedido-ok { text-align: center; padding: 28px 20px; display: grid; gap: 10px; justify-items: center; }
.pedido-ok h2 { font-size: 26px; }
.pedido-ok .soltar { width: 100%; max-width: 520px; }
.orc-publico { max-width: 760px; margin: 0 auto; padding: 26px 28px; }
.orc-publico__topo { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 16px; }
.orc-publico__topo h1 { font-size: 30px; font-stretch: 116%; font-weight: 760; }
.orc-publico__topo p { margin: 4px 0 0; }
.orc-publico__h { font-size: 17px; margin: 22px 0 4px; }
.orc-publico__itens { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--fio); }
.orc-publico__itens li { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--fio); }
.orc-publico__itens li div { display: grid; }
.orc-publico__itens span { color: var(--grafite); font-size: 14px; }
.orc-publico__itens > li > b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.orc-publico__totais { margin: 16px 0; display: grid; gap: 6px; justify-content: end; }
.orc-publico__totais div { display: flex; justify-content: space-between; gap: 32px; }
.orc-publico__totais dt { color: var(--grafite); }
.orc-publico__totais dd { margin: 0; font-variant-numeric: tabular-nums; }
.orc-publico__total { padding: 12px 16px; background: var(--papel); border-left: 4px solid var(--marca); border-radius: var(--raio); }
.orc-publico__total dt { color: var(--tinta); font-weight: 700; }
.orc-publico__total dd { font-size: 28px; font-stretch: 112%; font-weight: 780; color: var(--tinta); line-height: 1; }
.orc-publico__obs { background: var(--papel); padding: 12px 14px; border-radius: var(--raio); }
.orc-publico__acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; align-items: center; }
.orc-publico__acoes form { margin: 0; }
.soltar--publico { margin-top: 16px; }

/* ---------- Responsivo ---------- */
@media (max-width: 1080px) {
  .editor { grid-template-columns: 1fr; }
  .editor__resumo { position: static; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi:nth-child(3) { border-left: 0; }
  .kpi:nth-child(n+3) { border-top: 1px solid var(--fio); }
  .grade-2, .grade-2--lateral { grid-template-columns: 1fr; }
  .material__campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  :root { --barra-celular: calc(64px + env(safe-area-inset-bottom)); }
  .app { grid-template-columns: 1fr; }
  .lateral { position: fixed; inset: 0 auto 0 0; width: min(300px, 86vw); height: auto; z-index: 50; transform: translateX(-100%); transition: transform .22s ease; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
  .lateral.is-aberta { transform: none; box-shadow: 0 0 40px rgba(0, 0, 0, .35); }
  .principal { padding: 0 16px calc(32px + var(--barra-celular)); }
  .topo { min-height: 64px; position: sticky; top: 0; z-index: 30; background: var(--papel); margin: 0 -16px; padding: 8px 16px; border-bottom: 1px solid var(--fio); }
  .topo h1 { font-size: 21px; }
  .topo__acoes .botao { min-height: 38px; padding: 0 12px; }
  .topo__acoes a[href="/app/orcamentos/novo"] { display: none; }
  .barra-celular { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; height: var(--barra-celular); padding-bottom: env(safe-area-inset-bottom); background: var(--folha); border-top: 1px solid var(--fio); }
  .barra-celular a, .barra-celular button { display: grid; justify-items: center; align-content: center; gap: 3px; border: 0; background: none; color: var(--grafite); font: 600 11.5px var(--fonte); text-decoration: none; cursor: pointer; }
  .barra-celular [aria-current=page] { color: var(--tinta); }
  .barra-celular [aria-current=page] .ic { color: var(--marca); }
  .barra-celular .barra-celular__novo { align-self: center; justify-self: center; width: 52px; height: 52px; border-radius: 14px; background: var(--marca); color: #fff !important; box-shadow: 0 6px 18px color-mix(in srgb, var(--marca) 40%, transparent); }
  .barra-celular .barra-celular__novo .ic { width: 26px; height: 26px; color: #fff; }
  .entrada { grid-template-columns: 1fr; }
  .entrada__lado { padding: 18px 18px 20px; gap: 14px; }
  /* No celular a régua encolhe (1 divisão = 9 px), mantendo a peça em escala. */
  .entrada .mesa { --u: 9px; min-height: 200px; flex: none; }
  .entrada .mesa__peca { left: calc(26px + var(--u) * 1); top: calc(26px + var(--u) * 5); }
  .mesa__cota--a { display: none; }
  .mesa__preco { font-size: 20px; left: 10px; bottom: 7px; }
  .mesa__preco small { font-size: 10.5px; }
  .mesa__cota { font-size: 9.5px; }
  .mesa__regua--topo span[data-cm]::after { font-size: 8px; }
  .entrada__frase { font-size: 15.5px; }
  .entrada__form { padding: 26px 18px 40px; align-items: start; }
  .calc { grid-template-columns: 1fr; }
  .calc__resultado { grid-column: 1; grid-row: auto; position: sticky; top: auto; bottom: 0; z-index: 5; padding: 12px 16px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; border-radius: var(--raio-g) var(--raio-g) 0 0; box-shadow: 0 -8px 24px rgba(0, 0, 0, .1); }
  .calc__valor b { font-size: 26px; margin: 0; }
  .calc__valor span { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .calc__resultado .botao--largo { width: auto; }
  .calc__nota { display: none; }
  .publico--embed .calc__resultado { position: static; border-radius: var(--raio-g); box-shadow: none; }
  .barra-fixa { margin: 0 -16px; padding: 12px 16px; }
}
@media (max-width: 640px) {
  body { font-size: 15px; }
  .cartao { padding: 16px; border-radius: var(--raio); margin-bottom: 12px; }
  .campos--2, .campos--3 { grid-template-columns: 1fr; }
  .item { padding: 12px; }
  .item__campos { grid-template-columns: 1fr 1fr; }
  .item__campos label:last-child { grid-column: 1 / -1; }
  .calc .campos--3 { grid-template-columns: 1fr 1fr; }
  .calc .campos--3 label:last-child { grid-column: 1 / -1; }
  .checks { grid-template-columns: 1fr; }
  .kpi { padding: 14px; }
  .kpi b { font-size: 24px; }
  .material__campos { grid-template-columns: 1fr 1fr; }
  .acab-linha { grid-template-columns: 1fr 1fr; }
  .acab-linha input:first-child { grid-column: 1 / -1; }
  .busca { min-width: 0; width: 100%; }
  .pilulas { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px 4px; scrollbar-width: none; }
  .tabela--cartoes thead { display: none; }
  .tabela--cartoes tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; padding: 12px 0; border-bottom: 1px solid var(--fio); }
  .tabela--cartoes td { border: 0; padding: 0; }
  .tabela--cartoes td[data-rotulo]::before { content: attr(data-rotulo); display: block; font-size: 12px; font-weight: 600; color: var(--grafite); }
  .tabela--cartoes td.num { text-align: left; }
  .tabela--cartoes td:not([data-rotulo]) { grid-column: 1 / -1; }
  .arquivo { grid-template-columns: 44px minmax(0, 1fr); }
  .arquivo__miniatura { width: 44px; height: 44px; }
  .arquivo__acoes { grid-column: 1 / -1; flex-wrap: wrap; }
  .arquivo__acoes select { flex: 1; }
  .orc-publico { padding: 20px 16px; }
  .orc-publico__totais { justify-content: stretch; }
  .simples h1 { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }