/* ============ LJ3 — estilos do app (calculadora) ============ */

body.app{
  background:var(--bg-alt);
  padding-bottom:40px;
}

.appbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:10px;
  height:56px; padding:0 8px 0 4px;
  background:var(--navy); color:#fff;
  box-shadow:0 2px 12px rgba(4,37,82,.22);
}
.appbar-back{
  display:grid; place-items:center; width:44px; height:44px;
  color:#fff; border-radius:10px;
}
.appbar-back:active{background:rgba(255,255,255,.12)}
.appbar-logo{height:26px; width:auto; filter:brightness(0) invert(1)}
.appbar-title{
  margin-left:auto; margin-right:10px;
  font-size:.82rem; font-weight:700; letter-spacing:.04em;
  color:rgba(255,255,255,.72); text-transform:uppercase;
}

.app-main{max-width:560px; margin:0 auto; padding:0 16px}

.app-hero{padding:26px 0 8px}
.app-hero h1{font-size:1.55rem; margin-bottom:6px; color:var(--navy)}
.app-hero p{font-size:.92rem; color:var(--muted); margin:0}

/* ---------- blocos ---------- */
.calc-form{display:flex; flex-direction:column; gap:14px; margin-top:18px}
.bloco{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:18px; box-shadow:0 1px 2px rgba(4,37,82,.04);
}
.bloco h2{
  font-size:.78rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--orange); margin:0 0 14px;
}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
/* O seletor de espessura carrega rotulo longo ("0,40 mm — pronta-entrega").
   Em duas colunas ele trunca em qualquer largura, nao so no celular:
   por isso a linha dele vai sempre inteira. Testado em 02/11/2026. */
.grid2:has(select#esp){grid-template-columns:1fr}
.campo{display:flex; flex-direction:column; gap:6px; margin-bottom:12px}
.campo:last-child{margin-bottom:0}
.campo > span{font-size:.78rem; font-weight:750; color:#3b4657}
.campo input,.campo select{
  font-family:inherit; font-size:1rem; color:var(--ink);
  padding:13px 14px; border:1.5px solid var(--line); border-radius:10px;
  background:#fbfcfd; width:100%;
  transition:border-color .18s, box-shadow .18s, background .18s;
  -webkit-appearance:none; appearance:none;
}
.campo select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235b6472'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; background-size:20px;
  padding-right:38px;
}
.campo input:focus,.campo select:focus{
  outline:none; border-color:var(--navy); background:#fff;
  box-shadow:0 0 0 3px rgba(4,37,82,.1);
}
.dica{font-size:.75rem; color:var(--muted); margin:8px 0 0; line-height:1.45}

/* ---------- radio cards ---------- */
.radio-cards{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px}
.rc{cursor:pointer; position:relative}
.rc input{position:absolute; opacity:0; pointer-events:none}
.rc-body{
  display:flex; flex-direction:column; gap:2px;
  padding:14px 12px; border:1.8px solid var(--line); border-radius:12px;
  background:#fbfcfd; transition:border-color .18s, background .18s, box-shadow .18s;
  height:100%;
}
.rc-body b{font-size:.92rem; color:var(--navy); line-height:1.2}
.rc-body em{font-size:.75rem; font-style:normal; color:var(--muted)}
.rc-body i{font-size:.7rem; font-style:normal; color:#98a2b3; margin-top:5px}
.rc input:checked + .rc-body{
  border-color:var(--orange); background:#fff8f4;
  box-shadow:0 0 0 3px rgba(233,93,14,.13);
}
.rc input:focus-visible + .rc-body{outline:2px solid var(--navy); outline-offset:2px}

.btn-calc{margin-top:4px; padding:16px; font-size:1rem}

/* ---------- resultado ---------- */
.resultado{
  margin-top:20px; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden;
  box-shadow:0 6px 24px rgba(4,37,82,.09);
  animation:sobe .35s ease both;
}
@keyframes sobe{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}}

.res-topo{
  background:linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
  color:#fff; padding:20px 18px;
}
.res-label{
  font-size:.72rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:rgba(255,255,255,.62); margin:0 0 4px;
}
.res-area{font-size:1.9rem; font-weight:800; margin:0; line-height:1}
.res-area small{font-size:.82rem; font-weight:600; color:rgba(255,255,255,.66)}

.res-itens{list-style:none; margin:0; padding:4px 18px}
.res-itens li{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 0; border-bottom:1px solid var(--line);
}
.res-itens li:last-child{border-bottom:0}
.res-itens b{display:block; font-size:.92rem; color:var(--ink)}
.res-itens span{display:block; font-size:.76rem; color:var(--muted)}
.res-num{text-align:right; flex:0 0 auto}
.res-num strong{display:block; font-size:1.18rem; font-weight:800; color:var(--navy); line-height:1}
.res-num span{font-size:.7rem}

.res-valor{
  background:#f6f8fb; border-top:1px solid var(--line);
  padding:16px 18px; text-align:center;
}
.res-valor p{margin:0}
.res-valor > p:first-child{
  font-size:.74rem; font-weight:750; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted);
}
.res-reais{font-size:2rem; font-weight:800; color:var(--orange); line-height:1.15; margin:2px 0 4px !important}
.res-obs{font-size:.76rem; color:var(--muted)}

/* ---------- sob encomenda: sem preço, vai para cotação ---------- */
.dica-enc{
  margin-top:10px; padding:10px 12px; background:#f6f8fb;
  border-left:3px solid var(--navy); border-radius:0 8px 8px 0;
  font-size:.75rem; color:#3b4657;
}
.dica-enc strong{color:var(--navy)}
.res-enc{
  background:#042552; color:#fff;
  padding:16px 18px; text-align:center;
}
.res-enc-tit{
  font-size:.74rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:#c6d0e0; margin:0 0 6px;
}
.res-enc-txt{font-size:.85rem; line-height:1.5; margin:0; color:#eaf0f8}
.res-enc-txt b{color:#fff; font-weight:800}

.resultado .btn-wa{margin:16px 18px 0; width:calc(100% - 36px)}
.res-fine{
  font-size:.71rem; color:#98a2b3; padding:12px 18px 18px; margin:0;
  line-height:1.5;
}

@media (max-width:360px){
  .res-area{font-size:1.6rem}
  .res-reais{font-size:1.7rem}
}

/* ---------------- DADOS DO PEDIDO (calculadora) ---------------- */
.dica-pedido{
  background:#eef2f8; color:var(--navy) !important; padding:10px 12px;
  border-radius:8px; margin:0 0 16px; font-size:.84rem; line-height:1.5;
}
.erro-campo{
  margin:10px 0 0; padding:10px 12px; border-radius:8px; font-size:.85rem;
  background:rgba(200,30,30,.08); color:#a01818; border:1px solid rgba(200,30,30,.25);
}
.campo input[aria-invalid="true"]{
  border-color:#c81e1e !important; box-shadow:0 0 0 3px rgba(200,30,30,.10);
}
.opc{font-style:normal; font-weight:400; font-size:.78em; color:var(--muted); letter-spacing:0}

.consent{display:flex; gap:10px; align-items:flex-start; margin:0 0 14px; font-size:.82rem;
  line-height:1.5; color:var(--muted); cursor:pointer}
.consent input{margin-top:2px; flex:0 0 auto; width:16px; height:16px; accent-color:var(--navy)}
.consent a{color:var(--navy); text-decoration:underline}
.consent[aria-invalid="true"]{color:#a01818}

/* lista de variacoes com preco (parafuso e pistola) */
.specs-preco{margin-top:10px; padding-top:10px; border-top:1px dashed rgba(4,37,82,.18)}
.specs-preco li span{font-size:.78rem}
.specs-preco li b{font-size:.84rem; white-space:nowrap; color:var(--navy)}

/* grade de 3 colunas na calculadora */
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
@media (max-width:560px){ .grid3{grid-template-columns:1fr 1fr} .grid3 .campo:last-child{grid-column:1/-1} }

/* unidade de venda abaixo do campo */
.campo .unid{display:block; margin-top:4px; font-size:.72rem; color:var(--muted);
  font-style:normal; font-weight:600; letter-spacing:.01em}
/* item que vai para cotação: a unidade fica em laranja para não parecer preço */
.campo .unid-cot{color:var(--orange)}
/* nota curta do item (telha simples / sanduíche) */
.campo .nota-item{display:block; margin-top:2px; font-size:.68rem; font-style:normal;
  color:#98a2b3; letter-spacing:.02em}

/* sub-título dentro do bloco 3 (fixação x sob medida) */
.sub-bloco{font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--navy); margin:0 0 10px; opacity:.72}

/* o bloco de cotação: fecha por padrão para o formulário não crescer */
.calc-cotacao{margin-top:16px; background:#fbfcfd; border:1px solid var(--line);
  border-radius:10px; padding:12px 14px; border-top:1px solid var(--line)}
.calc-cotacao summary{font-size:.84rem}
.calc-cotacao[open]{padding-bottom:4px}
.calc-cotacao[open] summary{margin-bottom:8px}
.dica-cot{background:#fff8f4; border-left:3px solid var(--orange); border-radius:0 8px 8px 0;
  padding:9px 11px; margin:0 0 12px; color:#5a4638}
.dica-cot b{color:var(--navy)}

/* medida do portão: largura × altura numa linha */
.linha-med{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.linha-med > div{display:flex; align-items:center; gap:8px;
  background:#fbfcfd; border:1.5px solid var(--line); border-radius:10px; padding:0 10px 0 0}
.linha-med input{border:0; border-radius:0; background:transparent; padding:12px 10px}
.linha-med input:focus{box-shadow:none; background:transparent}
.linha-med .med-un{font-size:.68rem; color:var(--muted); font-weight:700; white-space:nowrap}
.campo .unid-ok{color:#1d7a3c; font-weight:700}
.campo-portao{margin-top:12px}

/* resultado: faixa dos itens sob medida */
.res-sub-tit{
  margin:0; padding:12px 18px 2px;
  font-size:.7rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--orange);
}
.res-cot{font-size:.82rem !important; font-weight:800; color:var(--orange);
  white-space:nowrap}
.res-aviso-cot{
  margin:0; padding:11px 18px;
  background:#fff4ed; border-top:1px solid #f6d9c6;
  font-size:.76rem; font-weight:650; color:#8a3c0d; line-height:1.45;
}

/* ajuda de quantidade */
.calc-extra{margin-top:14px; border-top:1px dashed rgba(4,37,82,.16); padding-top:10px}
.calc-extra summary{cursor:pointer; font-size:.85rem; font-weight:700; color:var(--navy)}
.calc-extra ul{margin:10px 0 0; padding-left:18px}
.calc-extra li{font-size:.82rem; color:var(--muted); margin-bottom:6px}
.calc-extra b{color:#333}

/* sugestao de parafusos no resultado */
.res-sug{margin:10px 0 0; font-size:.8rem; color:var(--muted); line-height:1.5}