.elementor-3888 .elementor-element.elementor-element-33f831f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3888 .elementor-element.elementor-element-6ec086b{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-3888 .elementor-element.elementor-element-5bddab6{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}/* Start custom CSS for html, class: .elementor-element-1a1144e */:root {
  --preto: #111111;
  --branco: #ffffff;
  --amarelo: #ffc107;
  --amarelo-600: #ffc107;
  --cinza-claro: #efefef;
  --muted: #111111;
  --font: "Open Sans", sans-serif;
}

/* base font size */
html {
  font-size: 62.5% !important;
}

/* --- Editor preview (visível na tela) --- */
#editor-wrapper {
  width: 100%;
  box-sizing: border-box;
  margin: 12mm auto;
  display: block;
  padding: 12px 0;
  background: transparent;
}

#editor-wrapper .page {
  width: 210mm;
  height: 297mm;
  margin: 0 auto 12mm;
  box-sizing: border-box;
  background: var(--branco);
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 6px 20px rgba(0,0,0,0.06);
  overflow: hidden;
  position: relative;
}

/* layout A4 principal */
#a4sheet {
  width: 210mm;
  height: 297mm;
  max-width: 100%;
  box-sizing: border-box;
  margin: 12mm auto;
  padding: 0;
  background: var(--branco);
  font-family: var(--font);
  color: var(--preto);
  position: relative;
  overflow: auto;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
  color-adjust: exact;
}

/* Header amarelo e logo */
.a4-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(90deg, var(--amarelo), var(--amarelo-600));
  padding: 18px 28px;
  color: #fff;
  box-sizing: border-box;
  position: relative;
}

.brand {
  display: flex;
  align-items: center;
  gap: 16px;
}

.brand img {
  height: 44px;
  width: auto;
  display: block;
}

.title-orc {
  font-weight: 800;
  font-size: 3.2rem;
  text-transform: uppercase;
  letter-spacing: .08rem;
}

.a4-body {
  padding: 18px 28px 22px;
  box-sizing: border-box;
  overflow: visible;
  padding-bottom: 48px;
}

.row {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.left-col {
  flex: 1;
  min-width: 0;
}

.right-col {
  width: 320px;
  text-align: right;
}

.label {
  color: var(--muted);
  font-size: 1.4rem;
  margin-bottom: 6px;
  display: block;
  font-weight: 600;
}

.nome {
  color: var(--amarelo);
  font-size: 2.4rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04rem;
}

.endereco {
  display: block;
  color: var(--muted);
  font-size: 1.5rem;
  margin: 6px 0;
}

.contact {
  color: var(--preto);
  font-size: 1.4rem;
  font-weight: 600;
  display: block;
}

.numOrcamento {
  display: inline-block;
  background: #232323;
  color: #ffffff;
  padding: 8px 12px;
  font-weight: 800;
  border-radius: 6px;
  font-size: 1.6rem;
}

.validade {
  display: block;
  color: var(--muted);
  margin-top: 8px;
  font-weight: 600;
  font-size: 1.3rem;
}

.items {
  margin-top: 18px;
  border-collapse: collapse;
  width: 100%;
}

.items-head {
  display: grid;
  grid-template-columns: 1fr 160px 160px 160px;
  gap: 14px;
  align-items: center;
  margin-bottom: 10px;
}

.items-head .head-item {
  background: #111;
  color: #fff;
  padding: 12px 16px;
  border-radius: 10px;
  text-align: center;
  font-weight: 700;
  font-size: 1.6rem;
  box-shadow: inset 0 -6px 0 rgba(0,0,0,0.12);
}

.items-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 18px;
}

/* cada linha de item - contêiner posicionado para o botão absoluto */
.item-row {
  position: relative; /* necessário para posicionamento absoluto do botão de ação */
  display: grid;
  grid-template-columns: 1fr 160px 160px 160px;
  gap: 14px;
  align-items: center;
  padding: 12px 10px;
  border-radius: 8px;
  background: transparent;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  -webkit-column-break-inside: avoid;
  -moz-column-break-inside: avoid;
  column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

.desc-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.item-title {
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--preto);
}

.item-desc {
  color: var(--muted);
  font-size: 1.4rem;
  max-width: 60ch;
}

/* Padronizei o padding das caixas cinza (quantidade, unitário, total) */
.badge,
.price,
.price-total,
.qty-badge {
  display: inline-block;
  background: var(--cinza-claro);
  color: var(--preto);
  padding: 8px 10px; /* <-- padding uniforme */
  border-radius: 18px;
  text-align: center;
  font-weight: 700;
  font-size: 1.5rem;
}

/* inputs de quantidade e unitário padrão */
input.qty,
input.unit {
  width: 50%;
  border: none;
  background: transparent;
  font-weight: 700;
  font-size: 1.5rem;
  text-align: center;
  outline: none;
}

/* badge da quantidade com seletor de unidade integrado (discreto) */
.qty-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 16px;
  /* background e padding já definidos em conjunto acima */
}

/* ajustar apenas dentro da qty-badge para não mexer nos outros badges */
.qty-badge .qty {
  width: 58%;
  font-weight: 700;
  font-size: 1.5rem;
  text-align: center;
  border: none;
  background: transparent;
  outline: none;
  padding: 0;
  margin: 0;
}

/* botão discreto que alterna entre un / m² */
.qty-unit-toggle {
  background: transparent;
  border: 1px solid rgba(0,0,0,0.06);
  padding: 4px 6px;
  border-radius: 8px;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  min-width: 40px;
  text-align: center;
  color: var(--preto);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}

/* leve destaque quando trocado (feedback visual sem mudar layout) */
.qty-unit-toggle.active {
  transform: scale(1.05);
  box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}

/* container para ações - posição absoluta para não empurrar conteúdo */
.item-actions {
  position: absolute;
  top: 6px;
  right: 6px;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* o container não captura eventos; o botão terá pointer-events:auto */
}

/* botões gerais */
.btn {
  background: var(--preto);
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-weight: 700;
}

/* botão secundário */
.btn.secondary {
  background: #f0f0f0;
  color: var(--preto);
}

/* botão imprimir */
.btn.print {
  background: linear-gradient(90deg, var(--amarelo), var(--amarelo-600));
  color: #111;
}

/* botão remover discreto (círculo pequeno) */
.btn.remove {
  pointer-events: auto; /* reativa clique apenas no botão */
  background: #e53935;
  color: #fff;
  padding: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.1rem;
  line-height: 1;
  border: none;
  box-shadow: 0 1px 0 rgba(0,0,0,0.06);
  cursor: pointer;
  opacity: 0.95;
  transform: translateZ(0);
}

/* hover / foco leve para o botão sem alterar layout */
.btn.remove:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.btn.remove:focus {
  outline: 3px solid rgba(229,57,53,0.12);
}

/* importante (texto em vermelho) */
.important {
  margin-top: 18px;
  color: #c62828;
  font-weight: 700;
  font-size: 1.4rem;
}

.important + p {
  color: var(--muted);
  font-size: 1.4rem;
  margin-top: 8px;
}

/* rodapé / dados bancários e totais */
.footer-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
  margin-top: 20px;
  align-items: start;
}

.dadosBancarios {
  color: var(--preto);
  font-size: 1.5rem;
}

.tituloDadosBancarios {
  font-size: 1.7rem;
  font-weight: 800;
  margin-bottom: 8px;
}

.totals {
  background: transparent;
  padding: 10px;
  border-radius: 8px;
}

.totals .rowt {
  display: flex;
  justify-content: space-between;
  padding: 8px 6px;
}

.totals .rowt .label {
  color: var(--muted);
  font-weight: 600;
  font-size: 1.5rem;
}

.totals .rowt .value {
  font-weight: 800;
  font-size: 1.8rem;
}

.a4-footer {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 30;
  height: 28px;
  background: linear-gradient(90deg, var(--amarelo), var(--amarelo-600));
  box-shadow: 0 -1px 6px rgba(0,0,0,0.06);
}

.controls {
  margin-top: 10px;
  display: flex;
  gap: 10px;
}

/* foco visual numOrcamento */
.numOrcamento[contenteditable="true"]:focus {
  outline: 3px solid rgba(255,193,7,0.2);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.03);
}

/* Responsividade - ajustar colunas quando a viewport diminuir */
@media (max-width: 900px) {
  .items-head,
  .item-row {
    grid-template-columns: 1fr 120px 120px 120px;
  }

  .right-col {
    width: 220px;
  }
}

@media (max-width: 720px) {
  #a4sheet {
    width: auto;
    margin: 16px;
    height: auto;
  }

  .row {
    flex-direction: column;
  }

  .right-col {
    width: 100%;
    text-align: left;
  }

  .items-head,
  .item-row {
    grid-template-columns: 1fr 1fr;
  }

  .items-head .head-item:nth-child(3),
  .items-head .head-item:nth-child(4),
  .item-row > :nth-child(3),
  .item-row > :nth-child(4) {
    display: block;
  }

  .item-actions {
    top: 8px;
    right: 8px;
  }
}

/* ======================= REGRAS DE IMPRESSÃO (EXATAMENTE #a4sheet) ======================= */
@media print {
  /* Reset geral */
  html,
  body {
    height: 100%;
    margin: 0;
    padding: 0;
    background: #fff !important;
  }

  /* esconder tudo exceto #a4sheet */
  body * {
    visibility: hidden !important;
  }

  #a4sheet,
  #a4sheet * {
    visibility: visible !important;
  }

  /* fallback: classe para páginas que precisam de margem (páginas 2+) */
  .print-page.page--padded .a4-body {
    padding-top: 8mm;
    padding-bottom: 8mm;
    box-sizing: border-box;
  }

  /* posicionar o a4sheet no topo do preview */
  #a4sheet {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    width: 210mm !important;
    height: auto !important;
    overflow: visible !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
    background: var(--branco) !important;
  }

  /* manter header/footer como estão na tela (não sticky) */
  .a4-header {
    position: static !important;
    top: auto !important;
    box-shadow: none !important;
  }

  .a4-footer {
    position: static !important;
    bottom: auto !important;
  }

  /* evitar quebra no meio da linha */
  .item-row {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    -webkit-column-break-inside: avoid !important;
  }

  /* fallback @page (nem sempre obedecido pelo navegador) */
  @page {
    size: A4;
    margin: 0;
  }

  /* garantir cores no print */
  #a4sheet,
  #a4sheet * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  .a4-header,
  .a4-footer {
    background-image: none !important;
    background: var(--amarelo) !important;
    color: #fff !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .a4-header::before,
  .a4-footer::before,
  .a4-header::after,
  .a4-footer::after {
    display: none !important;
    content: none !important;
  }

  .items-head .head-item {
    background-image: none !important;
    background: #111 !important;
    color: #fff !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Garantir padding uniforme também no print */
  .badge,
  .price,
  .price-total,
  .qty-badge,
  .numOrcamento {
    background-image: none !important;
    background: var(--cinza-claro) !important;
    color: var(--preto) !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    padding: 8px 10px !important; /* mantém o padding uniforme no PDF */
  }

  .a4-header .title-orc {
    color: #fff !important;
  }

  .nome {
    color: var(--amarelo) !important;
  }

  .contact,
  .endereco,
  .dadosBancarios,
  .totals .rowt .label {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  body {
    background: #fff !important;
  }

  /* esconder controles interativos que não devem aparecer no print
     (OBS: retiramos .qty-unit-toggle daqui para que o seletor apareça no PDF) */
  .btn.remove,
  .item-actions,
  .no-print {
    display: none !important;
  }
}/* End custom CSS */