/* =========================================================================
   Cartazes de Oferta - DIAFER
   Duas partes bem separadas:
     .app       -> a interface, some na impressao
     .folha     -> o cartaz em si, 210 x 297 mm, e o que vai para o papel
   ========================================================================= */

@page { size: A4 portrait; margin: 0; }

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --tinta: #16181d;
  --fraco: #6b7280;
  --linha: #e3e6ea;
  --fundo: #f4f6f8;
  --papel: #fff;
  --acao: #c8102e;
  --acao-escura: #9d0c24;
  --raio: 10px;
}

body {
  background: var(--fundo);
  color: var(--tinta);
  font: 15px/1.5 "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* ------------------------------------------------------------- interface */
.app { max-width: 1060px; margin: 0 auto; padding: 0 20px 60px; }

.topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 20px 0 18px;
}
.marca { font-size: 19px; font-weight: 700; letter-spacing: -.2px; }
.marca span {
  display: inline-block; margin-left: 10px; padding: 2px 9px;
  background: var(--acao); color: #fff; border-radius: 999px;
  font-size: 11px; letter-spacing: .12em; vertical-align: 2px;
}
.topo-dir { display: flex; gap: 8px; }

h1 { font-size: 21px; margin-bottom: 14px; font-weight: 650; }
h2 { font-size: 15px; font-weight: 650; }

.btn {
  font: inherit; font-weight: 600; cursor: pointer;
  border: 1px solid transparent; border-radius: var(--raio);
  padding: 10px 16px; background: #fff; color: var(--tinta);
  transition: background .12s, border-color .12s, transform .06s;
}
.btn:hover { background: #f0f2f5; }
.btn:active { transform: translateY(1px); }
.btn.principal { background: var(--acao); color: #fff; }
.btn.principal:hover { background: var(--acao-escura); }
.btn.fantasma { border-color: var(--linha); }
.btn.fantasma:hover { border-color: #c9cfd6; }
.btn.perigo { color: var(--acao); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* --------------------------------------------------- menu dos 13 modelos */
.modelos {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
}
.modelo {
  display: flex; flex-direction: column; gap: 3px; text-align: left;
  padding: 13px 15px; background: #fff; cursor: pointer;
  border: 1px solid var(--linha); border-radius: var(--raio);
  font: inherit; color: inherit;
  transition: border-color .12s, box-shadow .12s, transform .06s;
}
.modelo:hover {
  border-color: var(--acao);
  box-shadow: 0 2px 10px rgba(200,16,46,.10);
}
.modelo:active { transform: translateY(1px); }
.modelo b { font-size: 14px; letter-spacing: .01em; }
.modelo small { color: var(--fraco); font-size: 12.5px; }

/* ------------------------------------------------------------- a fila */
.fila-caixa {
  margin-top: 26px; padding: 16px 18px;
  background: #fff; border: 1px solid var(--linha); border-radius: var(--raio);
}
.fila-topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.fila-acoes { display: flex; gap: 8px; }
.fila { list-style: none; margin-top: 12px; }
.fila:empty { display: none; }
.fila li {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 0; border-top: 1px solid var(--linha);
}
.fila .tipo {
  flex: 0 0 auto; padding: 3px 9px; border-radius: 999px;
  background: #eef1f4; font-size: 11.5px; font-weight: 700;
  letter-spacing: .04em;
}
.fila .nome {
  flex: 1 1 auto; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.fila .remover {
  flex: 0 0 auto; border: 0; background: none; cursor: pointer;
  color: var(--fraco); font: inherit; padding: 4px 8px; border-radius: 6px;
}
.fila .remover:hover { background: #fdeaee; color: var(--acao); }
.vazio { color: var(--fraco); margin-top: 10px; }

/* ------------------------------------------------------- as perguntas */
.passo-topo {
  display: flex; align-items: center; gap: 16px; margin-bottom: 14px;
}
.passo-info { display: flex; flex-direction: column; }
.passo-info strong { font-size: 15px; }
.passo-info span { color: var(--fraco); font-size: 13px; }

.barra { height: 4px; background: var(--linha); border-radius: 999px; }
.barra-cheia {
  height: 100%; width: 0; background: var(--acao);
  border-radius: 999px; transition: width .18s;
}

.pergunta { margin: 30px 0 22px; }
.pergunta label {
  display: block; font-size: 22px; font-weight: 650; margin-bottom: 14px;
}
.pergunta input[type=text] {
  width: 100%; font: inherit; font-size: 19px; padding: 13px 15px;
  border: 1px solid var(--linha); border-radius: var(--raio); background: #fff;
}
.pergunta input:focus {
  outline: 2px solid var(--acao); outline-offset: -1px; border-color: var(--acao);
}
.opcoes { display: flex; flex-direction: column; gap: 8px; }
.opcao {
  text-align: left; font: inherit; font-size: 16px; cursor: pointer;
  padding: 13px 16px; background: #fff;
  border: 1px solid var(--linha); border-radius: var(--raio);
}
.opcao:hover { border-color: var(--acao); }
.opcao.marcada { border-color: var(--acao); background: #fdeaee; font-weight: 650; }
.dica { color: var(--fraco); font-size: 13.5px; margin-top: 9px; }
.erro { color: var(--acao); font-size: 14px; margin-top: 9px; font-weight: 600; }
.passo-acoes { display: flex; gap: 10px; }

/* ------------------------------------------------------------- previa */
.previa-topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 12px;
}
.previa-info { display: flex; flex-direction: column; gap: 4px; }
.previa-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.guia-troca {
  display: flex; align-items: center; gap: 7px;
  color: var(--fraco); font-size: 13px; cursor: pointer;
}
.aviso {
  background: #fff8e6; border: 1px solid #f0d99b; border-radius: var(--raio);
  padding: 11px 14px; font-size: 13.5px; margin-bottom: 18px;
}
.palco { display: flex; flex-direction: column; align-items: center; gap: 26px; }
.moldura {
  position: relative; background: var(--papel);
  box-shadow: 0 3px 18px rgba(20,24,31,.16);
  overflow: hidden; flex: 0 0 auto;
}

/* arte aproximada da folha pre-impressa: guia de tela, nunca imprime */
.guia { position: absolute; inset: 0; pointer-events: none; }
.guia .faixa-topo, .guia .faixa-base {
  position: absolute; left: 0; right: 0; background: #e0443c;
}
.guia .selo {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; justify-content: center;
  background: #f5c518; color: #b5231d; border-radius: 8px;
  font-weight: 800; font-family: Impact, sans-serif; white-space: nowrap;
}
.app[data-guia="0"] .guia { display: none; }

/* ============================== O CARTAZ ==============================
   Daqui para baixo e o desenho impresso. Medidas sempre em mm.
   ===================================================================== */
.folha {
  width: 210mm; height: 297mm;
  display: flex; flex-direction: column; overflow: hidden;
  background: transparent; color: #000;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  transform-origin: top left;
}

.f { display: flex; align-items: center; justify-content: center;
     line-height: 1; overflow: hidden; }
.f.esq { justify-content: flex-start; }
.f.dir { justify-content: flex-end; }

/* titulo/descricao centralizado; .esq existe caso volte a precisar */
.multi { text-align: center; line-height: 1.02; width: 100%; }
.multi.esq { text-align: left; }
.multi > div { white-space: nowrap; }

.preco { display: flex; align-items: center; justify-content: flex-end;
         width: 100%; height: 100%; }
.preco.meio { justify-content: center; }
.num { display: flex; align-items: center; position: relative; }
.pint { line-height: .78; }
.pcent { display: flex; flex-direction: column; line-height: .72;
         padding-left: 1.5mm; align-self: stretch; justify-content: center; }
.pcent .vg { margin-top: -.12em; }
.tarja { position: absolute; left: -1mm; right: 0; top: 50%;
         transform: translateY(-50%); background: #000; }
.sufixo { padding-left: 2mm; align-self: center; }

.rot { flex: 0 0 auto; }

.caixa { flex: 1 1 auto; display: flex; height: 100%;
         border: .9mm solid #000; position: relative; }
.cel { display: flex; align-items: center; line-height: 1; }
.cel.parc { flex: 0 0 18.75%; background: #000; color: #fff;
            justify-content: center; }
.cel.x { flex: 0 0 15.6%; background: #000; color: #fff;
         justify-content: center; border-left: .3mm solid #fff; }
.cel.vlr { flex: 0 0 34.4%; border-left: .3mm solid #000;
           justify-content: flex-start; padding-left: 2mm; }
.cel.tot { flex: 1 1 auto; border-left: .3mm solid #000;
           justify-content: flex-end; padding-right: 2mm; }
.bolha { position: absolute; top: 50%; transform: translate(-50%, -50%);
         border-radius: 50%; background: #000; color: #fff; display: flex;
         align-items: center; justify-content: center; line-height: 1; }

.rodape { display: flex; align-items: center; width: 100%; }
.rodape .cod { flex: 0 0 52%; text-align: center; }
.rodape .cond { flex: 1 1 auto; text-align: center; }
.nota { display: flex; align-items: flex-end;
        justify-content: flex-start; padding-left: 1mm; }

/* DE POR: caixa do ECONOMIZE, percentual em fundo preto */
.eco { display: flex; width: 100%; height: 100%; border: .6mm solid #000; }
.eco-rot { flex: 0 0 53.1%; display: flex; align-items: center;
           justify-content: center; }
.eco-pct { flex: 1 1 auto; background: #000; color: #fff; display: flex;
           align-items: center; justify-content: center; }

/* PARCELADO: TOTAL e COD. empilhados, valores numa coluna */
.pares { width: 100%; }
.par { display: flex; width: 100%; align-items: center; }
.par .lbl { flex: 0 0 42%; text-align: right; padding-right: 4mm; }
.par .val { flex: 1 1 auto; text-align: left; }

/* regua da calibracao */
.regua { position: absolute; background: #d21; }
.regua-txt { position: absolute; color: #d21; font: 3.5mm/1 Arial, sans-serif; }
.area-util { position: absolute; border: .8mm solid #06c; }
.area-txt { position: absolute; color: #06c;
            font: 4.5mm/1.5 Arial, sans-serif; }

/* ------------------------------------------------------------ impressao */
.impresso { display: none; }

@media print {
  body { background: #fff; }
  .app { display: none !important; }
  .impresso { display: block; }
  .impresso .folha {
    transform: none !important;
    page-break-after: always; break-after: page;
  }
  .impresso .folha:last-child {
    page-break-after: auto; break-after: auto;
  }
}

/* ---------------------------------------------- busca no cadastro */
.achados { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.achado {
  display: flex; align-items: baseline; gap: 12px; text-align: left;
  font: inherit; cursor: pointer; padding: 10px 14px; background: #fff;
  border: 1px solid var(--linha); border-radius: var(--raio);
}
.achado:hover { border-color: var(--acao); background: #fdeaee; }
.achado .cod {
  flex: 0 0 auto; font-variant-numeric: tabular-nums; font-weight: 700;
  color: var(--acao); font-size: 14px;
}
.achado .desc {
  flex: 1 1 auto; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.nada { color: var(--fraco); font-size: 14px; padding: 6px 2px; }

/* ---------------------------------------------------- escolha da loja */
.dica-grande { color: var(--fraco); margin-bottom: 20px; max-width: 60ch; }
.lojas {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.loja {
  display: flex; align-items: baseline; gap: 10px; text-align: left;
  padding: 16px 18px; background: #fff; cursor: pointer; font: inherit;
  border: 1px solid var(--linha); border-radius: var(--raio);
  transition: border-color .12s, box-shadow .12s, transform .06s;
}
.loja:hover {
  border-color: var(--acao); box-shadow: 0 2px 10px rgba(200,16,46,.10);
}
.loja:active { transform: translateY(1px); }
.loja.marcada { border-color: var(--acao); background: #fdeaee; }
.loja b { font-size: 22px; color: var(--acao); font-variant-numeric: tabular-nums; }
.loja span { color: var(--fraco); font-size: 13.5px; }

/* rotulo "DE:"/"POR:" encostado no numero, alinhado pelo topo */
.grupo-preco { display: flex; align-items: flex-start; }
.rot-preco { line-height: 1; padding-right: 2mm; margin-top: .06em; }

/* "CADA" embaixo dos centavos, na mesma linha da virgula */
.linha-vg { display: flex; align-items: baseline; gap: 1.2mm; margin-top: -.12em; }
.linha-vg .vg { margin-top: 0; }
.suf-baixo { line-height: 1; }