/* =========================================================
   LAR SERRANO — Orçamentos
   Mesma paleta e tipografia do site, redesenhado para
   celular e tablet: alvo de toque grande, uma coluna.
   ========================================================= */

:root{
  --petroleo-900:#0C1719;
  --petroleo-800:#121F21;
  --petroleo-700:#1B3033;
  --petroleo-600:#24413F;
  --dourado:#C9A24D;
  --dourado-claro:#E3C178;
  --agua:#227769;
  --verde:#6FBA79;
  --creme:#F4EFE6;
  --areia:#CFC6B6;
  --cinza:#8A9A99;
  --vermelho:#C2584C;

  --fundo:var(--petroleo-900);
  --texto:var(--creme);
  --texto-fraco:#A9B6B4;
  --borda:#24413F;

  --disp:"Fraunces",Georgia,serif;
  --corpo:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:12px;
  --topo:104px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--fundo);color:var(--texto);
  font:400 16px/1.5 var(--corpo);
  -webkit-font-smoothing:antialiased;
  padding-top:var(--topo);
}
h1,h2,h3{font-family:var(--disp);font-weight:600;margin:0}
button,input,select,textarea{font:inherit;color:inherit}

/* ---------- Topo e abas ---------- */
.top{
  position:fixed;inset:0 0 auto;z-index:30;
  background:rgba(12,23,25,.96);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--borda);
}
.top__in{display:flex;align-items:center;gap:10px;padding:10px 14px 8px}
.top__marca{display:block;height:23px;width:auto}
.top__nome{font-family:var(--disp);font-size:17px;line-height:1.1;flex:1}
.top__nome small{display:block;font-family:var(--corpo);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--dourado)}
.selo{
  color:var(--verde);font-size:13px;line-height:1;
  padding:6px 2px;cursor:default;
}
.top__novo{
  border:1px solid var(--dourado);background:transparent;color:var(--dourado-claro);
  border-radius:999px;padding:7px 16px;font-size:14px;cursor:pointer;
}
.abas{display:flex;gap:4px;padding:0 10px 8px}
.abas__bt{
  flex:1;background:transparent;border:0;border-bottom:2px solid transparent;
  color:var(--texto-fraco);padding:10px 4px;font-size:14.5px;cursor:pointer;
}
.abas__bt.is-on{color:var(--creme);border-bottom-color:var(--dourado)}

/* ---------- Convite de instalação ---------- */
.instalar{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  max-width:860px;margin:0 auto;padding:12px 14px 0;
}
.instalar[hidden]{display:none}
.instalar span{flex:1;min-width:180px;font-size:14px;color:var(--dourado-claro)}
.instalar .bt{padding:10px 20px;min-height:44px}

/* ---------- Corpo ---------- */
.corpo{max-width:860px;margin:0 auto;padding:14px}
.aba{display:none}
.aba.is-on{display:block}
.espaco{height:120px}

.cartao{
  background:linear-gradient(180deg,var(--petroleo-800),var(--petroleo-900));
  border:1px solid var(--borda);border-radius:var(--r);
  padding:14px;margin:0 0 12px;
}
.cartao h2{font-size:17px;margin-bottom:12px;display:flex;flex-wrap:wrap;gap:8px;align-items:baseline}
.cartao h2 small{font-family:var(--corpo);font-size:12px;font-weight:400;color:var(--texto-fraco)}

.grade{display:grid;gap:10px;grid-template-columns:1fr}
@media (min-width:560px){
  .grade{grid-template-columns:1fr 1fr}
  .grade--4{grid-template-columns:1fr 1fr 1fr 1fr}
}
.campo{display:flex;flex-direction:column;gap:5px;min-width:0}
.campo>span{font-size:12.5px;letter-spacing:.03em;text-transform:uppercase;color:var(--texto-fraco);
  display:flex;align-items:center;gap:8px}
.campo input,.campo select{
  background:var(--petroleo-700);border:1px solid var(--borda);border-radius:9px;
  padding:11px 12px;min-height:44px;width:100%;
}
.campo input:focus,.campo select:focus{outline:2px solid var(--agua);outline-offset:1px}
.campo input:disabled{opacity:.55}
.dica{
  background:transparent;border:1px solid var(--borda);color:var(--dourado-claro);
  border-radius:999px;padding:2px 8px;font-size:11px;cursor:pointer;text-transform:none;letter-spacing:0;
}
.nota{color:var(--texto-fraco);font-size:13px;margin:10px 0 0}
.nota.alerta{color:var(--vermelho);font-weight:500}
.oculto{display:none !important}

/* Listas que o usuário mantém: madeiras e bitolas dele */
.listinha{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.listinha .item{display:grid;grid-template-columns:1fr auto;gap:8px}
.listinha input{
  background:var(--petroleo-700);border:1px solid var(--borda);border-radius:9px;
  padding:11px 12px;min-height:44px;width:100%;
}
.livre{font-size:10.5px;letter-spacing:.04em;color:var(--dourado);text-transform:none}

.linhas{display:flex;flex-direction:column;gap:10px}
.linha{
  display:grid;gap:8px;grid-template-columns:1fr;
  border:1px solid var(--borda);border-radius:10px;padding:10px;
}
@media (min-width:560px){
  .linha{grid-template-columns:1.4fr 1fr 1fr auto;align-items:end}
  .linha--extra{grid-template-columns:1.6fr .7fr .7fr .9fr auto}
}
.linha__tit{font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--dourado);
  align-self:center}
.lixo{
  background:transparent;border:1px solid var(--borda);color:var(--vermelho);
  border-radius:9px;min-height:44px;min-width:44px;cursor:pointer;
}

.etapas{display:flex;flex-direction:column;gap:8px;margin:12px 0 10px}
.etapa{display:grid;grid-template-columns:1fr 72px 92px auto;gap:8px;align-items:center}
.etapa input[type=text]{background:var(--petroleo-700);border:1px solid var(--borda);
  border-radius:9px;padding:10px;min-height:44px;width:100%}
.etapa input[type=number]{background:var(--petroleo-700);border:1px solid var(--borda);
  border-radius:9px;padding:10px;min-height:44px;width:100%;text-align:center}
.etapa__val{font-variant-numeric:tabular-nums;text-align:right;font-size:14px;color:var(--dourado-claro)}
.etapa--entrada{color:var(--dourado)}
/* No celular o nome da etapa ganha a linha inteira */
@media (max-width:520px){
  .etapa{grid-template-columns:1fr 70px 44px}
  .etapa input[type=text]{grid-column:1 / -1}
  .etapa--entrada{display:flex;justify-content:space-between;align-items:center}
}

.bt{
  background:var(--dourado);color:#1a1205;border:0;border-radius:999px;
  padding:13px 22px;font-size:15px;font-weight:600;cursor:pointer;min-height:48px;
}
.bt--fraco{background:transparent;border:1px solid var(--borda);color:var(--creme);font-weight:400}
.bt--perigo{background:transparent;border:1px solid var(--vermelho);color:var(--vermelho);font-weight:400}
.botoes{display:flex;flex-wrap:wrap;gap:8px}

/* ---------- Tabelas ---------- */
.rolo{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tab{width:100%;border-collapse:collapse;font-size:14px}
.tab th,.tab td{padding:8px 6px;border-bottom:1px solid var(--borda);text-align:right;white-space:nowrap}
.tab th:first-child,.tab td:first-child{text-align:left;white-space:normal;min-width:130px}
.tab thead th{color:var(--dourado);font-weight:500;font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.tab input{
  background:var(--petroleo-700);border:1px solid var(--borda);border-radius:8px;
  padding:8px;width:92px;min-height:40px;text-align:right;
}
.tab td small{color:var(--texto-fraco)}
.tab--res td:first-child{min-width:140px}
/* No celular o valor unitário sai da frente: o que importa é o total */
@media (max-width:520px){
  .tab--res th:nth-child(3),.tab--res td:nth-child(3){display:none}
  .tab--res th,.tab--res td{padding:8px 4px;font-size:13px}
}
.tab--res .grupo td{color:var(--dourado-claro);font-weight:600;padding-top:14px}
.tab--res .total td{border-top:1px solid var(--dourado);font-weight:600}

/* ---------- Resumo fixo ---------- */
.resumo{
  position:fixed;inset:auto 0 0;z-index:40;
  background:rgba(18,31,33,.98);backdrop-filter:blur(8px);
  border-top:1px solid var(--dourado);
  padding-bottom:env(safe-area-inset-bottom);
}
.resumo__puxa{
  display:flex;align-items:center;gap:12px;width:100%;
  background:transparent;border:0;padding:12px 16px;cursor:pointer;text-align:left;
}
.resumo__linha{flex:1;display:flex;flex-direction:column}
.resumo__rot{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--texto-fraco)}
.resumo__venda{font-family:var(--disp);font-size:24px;color:var(--dourado-claro);font-variant-numeric:tabular-nums}
.resumo__seta{color:var(--cinza);transition:transform .25s}
.resumo.is-aberto .resumo__seta{transform:rotate(180deg)}
/* Nunca mais da metade da tela: no tablet deitado o painel
   cobria o formulário e o toque não chegava no campo. */
.resumo__corpo{display:none;padding:0 16px 16px;max-height:min(50vh,380px);overflow-y:auto}
.resumo.is-aberto .resumo__corpo{display:block}
.resumo__nums{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
@media (min-width:560px){.resumo__nums{grid-template-columns:repeat(4,1fr)}}
.resumo__nums div{background:var(--petroleo-700);border-radius:9px;padding:8px 10px}
.resumo__nums span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--texto-fraco)}
.resumo__nums strong{font-size:16px;font-variant-numeric:tabular-nums}

/* ---------- Lista de salvos ---------- */
.salvo{
  display:grid;gap:4px 10px;align-items:center;
  grid-template-columns:1fr auto;
  border-bottom:1px solid var(--borda);padding:12px 0;
}
.salvo__acoes{grid-column:1 / -1;margin-top:6px}
@media (min-width:560px){
  .salvo{grid-template-columns:1fr auto auto}
  .salvo__acoes{grid-column:auto;margin-top:0}
}
.salvo__nome{font-weight:500}
.salvo__meta{font-size:12.5px;color:var(--texto-fraco)}
.salvo__val{font-variant-numeric:tabular-nums;color:var(--dourado-claro);white-space:nowrap}
.salvo__acoes{display:flex;gap:6px}
.salvo__bt{background:transparent;border:1px solid var(--borda);color:var(--creme);
  border-radius:8px;min-height:40px;padding:0 12px;cursor:pointer;font-size:13.5px}

/* ---------- Reportar problema ---------- */
.reportar{
  position:fixed;right:14px;bottom:96px;z-index:45;
  width:48px;height:48px;border-radius:50%;cursor:pointer;
  background:var(--petroleo-600);color:var(--dourado-claro);
  border:1px solid var(--dourado);
  font:600 22px/1 var(--disp);
  box-shadow:0 6px 18px rgba(0,0,0,.45);
}
.modal{
  position:fixed;inset:0;z-index:70;background:rgba(6,12,13,.72);
  display:flex;align-items:flex-end;justify-content:center;padding:12px;
  overflow-y:auto;
}
/* display:flex vence o hidden do navegador — sem isto a janela
   fica aberta o tempo todo, por cima do app. */
.modal[hidden]{display:none}
@media (min-width:560px){ .modal{align-items:center} }
.modal__caixa{
  background:var(--petroleo-800);border:1px solid var(--borda);border-radius:var(--r-g,18px);
  padding:16px;width:100%;max-width:520px;max-height:88vh;overflow-y:auto;
}
.modal__caixa h2{font-size:18px;margin-bottom:12px}
.modal__caixa textarea{
  background:var(--petroleo-700);border:1px solid var(--borda);border-radius:9px;
  padding:11px 12px;width:100%;resize:vertical;font:inherit;
}
.sub{font-family:var(--disp);font-size:15px;margin:18px 0 8px;color:var(--dourado)}

/* ---------- Papel: proposta e relatório ---------- */
.papel{
  position:fixed;inset:0;z-index:60;background:#fff;color:#1a1a1a;
  overflow-y:auto;padding:24px 18px 120px;
  font:400 14px/1.55 var(--corpo);
}
.papel__fecha{
  position:fixed;top:12px;right:12px;z-index:62;
  background:var(--petroleo-700);color:var(--creme);border:0;border-radius:999px;
  padding:11px 18px;cursor:pointer;
}
.papel__imprime{
  position:fixed;top:12px;right:120px;z-index:62;
  background:var(--dourado);color:#1a1205;border:0;border-radius:999px;
  padding:11px 18px;font-weight:600;cursor:pointer;
}
.doc{max-width:760px;margin:0 auto}
.doc__timbre{display:flex;gap:14px;align-items:center;flex-wrap:wrap;border-bottom:2px solid #1B3033;padding-bottom:12px}
.doc__timbre img{height:54px;width:auto}
.doc__nome{font-family:var(--disp);font-size:22px;line-height:1.1;color:#1B3033}
.doc__nome small{display:block;font-family:var(--corpo);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:#C9A24D;margin-top:2px}
.doc__contato{margin-left:auto;text-align:right;font-size:11.5px;color:#444;line-height:1.5}
@media (max-width:520px){
  .doc__timbre img{height:40px}
  .doc__contato{margin-left:0;text-align:left;width:100%}
}
.doc h1{font-size:19px;color:#1B3033;margin:22px 0 4px}
.doc h2{font-size:15px;color:#1B3033;margin:20px 0 8px;border-bottom:1px solid #ddd;padding-bottom:4px}
.doc p{margin:6px 0}
.doc table{width:100%;border-collapse:collapse;font-size:13px;margin:8px 0}
.doc th,.doc td{padding:6px 5px;border-bottom:1px solid #e3e3e3;text-align:right}
.doc th:first-child,.doc td:first-child{text-align:left}
.doc thead th{background:#f4efe6;color:#1B3033;font-weight:600}
.doc .gr td{background:#faf7f1;font-weight:600;color:#1B3033}
.doc .tt td{border-top:2px solid #1B3033;font-weight:700;font-size:14px}
.doc__rod{margin-top:26px;border-top:1px solid #ddd;padding-top:10px;font-size:11.5px;color:#555}
.doc__ass{margin-top:40px;display:flex;gap:40px}
.doc__ass div{flex:1;border-top:1px solid #333;padding-top:5px;text-align:center;font-size:11.5px}
.doc__obs{background:#f4efe6;border-left:3px solid #C9A24D;padding:9px 12px;font-size:12.5px;margin:12px 0}

@media print{
  body{padding:0;background:#fff}
  .top,.corpo,.resumo,.papel__fecha,.papel__imprime,
  .reportar,.modal,.instalar{display:none !important}
  .papel{position:static;padding:0;overflow:visible}
  .doc{max-width:none}
  .doc h2{break-after:avoid}
  .doc table{break-inside:auto}
  .doc tr{break-inside:avoid}
}