/* Quima Encartes - estilos do gerador (editor e paginas de apoio). Mobile first.
   Fontes OFL servidas localmente (licencas em /lib/fonts). */

@font-face { font-family: "QE Anton"; src: url("../lib/fonts/anton.woff2") format("woff2"); font-weight: 400; font-display: block; }
@font-face { font-family: "QE Script"; src: url("../lib/fonts/lobster.woff2") format("woff2"); font-weight: 400; font-display: block; }
@font-face { font-family: "QE Montserrat"; src: url("../lib/fonts/montserrat.woff2") format("woff2"); font-weight: 100 900; font-display: block; }
@font-face { font-family: "QE Serif"; src: url("../lib/fonts/playfair.woff2") format("woff2"); font-weight: 400 900; font-display: block; }
@font-face { font-family: "QE Oswald"; src: url("../lib/fonts/oswald.woff2") format("woff2"); font-weight: 200 700; font-display: block; }
@font-face { font-family: "QE Fredoka"; src: url("../lib/fonts/fredoka.woff2") format("woff2"); font-weight: 300 700; font-display: block; }

.flyer-app .link-button { color: var(--brand); font-weight: 600; }
.flyer-app input[type="tel"],
.flyer-app input[type="url"] {
    width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm); background: #fff; color: var(--ink); font: inherit; font-size: 1rem;
}
.flyer-app input[type="color"] { width: 100%; min-height: 44px; padding: 4px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: #fff; cursor: pointer; }
.small { font-size: .88rem; }

.flyer-head .lead { max-width: 70ch; }

/* Etapas */
.wizard-steps ol { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.wizard-steps button {
    width: 100%; min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-sm); cursor: pointer; font: inherit; color: var(--ink-2); padding: 6px 4px;
}
.wizard-steps button:hover { border-color: var(--brand); }
.wizard-steps button[aria-current="step"] { background: var(--brand); border-color: var(--brand); color: #fff; }
.wizard-steps button.is-done .step-num { background: var(--ok); color: #fff; }
.step-num { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--brand-soft); color: var(--brand-strong); font-weight: 700; font-size: .9rem; }
.wizard-steps button[aria-current="step"] .step-num { background: #fff; color: var(--brand-strong); }
.step-label { font-size: .74rem; font-weight: 600; line-height: 1.15; text-align: center; }

.wizard-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.wizard-toolbar .record-status { margin: 0; font-size: .88rem; color: var(--muted); }
.wizard-toolbar .notice { flex-basis: 100%; }

.step-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); }
.step-panel > h2 { font-size: 1.3rem; }
.step-panel > h2:focus { outline: none; }

.wizard-nav { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; padding: 10px 12px; background: rgba(255, 255, 255, .96); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 -2px 12px rgba(15, 23, 42, .06); }
.wizard-nav .btn { min-width: 110px; }

/* Importacao */
.import-box { position: relative; border: 2px dashed var(--brand-line); border-radius: var(--radius); padding: 16px; background: var(--brand-soft); margin-bottom: 12px; }
.import-box.is-dragging { border-color: var(--brand); background: #e3ecff; }
.import-box .button-row { margin: 10px 0; }
.import-title { margin-bottom: 4px; font-size: 1.05rem; }
.drop-hint { display: none; }
.import-box.is-dragging .drop-hint { display: flex; position: absolute; inset: 0; align-items: center; justify-content: center; font-weight: 700; color: var(--brand-strong); background: rgba(227, 236, 255, .92); border-radius: var(--radius); margin: 0; }
.button-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.flyer-app .import-result { display: block; margin-bottom: 12px; }
.import-summary { margin: 0 0 6px; font-weight: 600; }
.advanced > summary, .issues > summary { cursor: pointer; font-weight: 600; padding: 6px 0; min-height: 36px; }
.mapping-grid { display: grid; gap: 0 12px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); margin: 8px 0; }
.issue-list { margin: 6px 0 0; padding-left: 18px; font-size: .9rem; max-height: 260px; overflow: auto; }
.issue-list .issue-error { color: var(--err); }
.issue-list .issue-warn { color: var(--warn); }
.flyer-app .error-summary { margin: 10px 0; }
.flyer-app .error-summary p { margin: 0 0 4px; }

/* Tabela de produtos (cards no celular, linhas no desktop) */
.products-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-top: 18px; }
.products-head h3 { margin: 0; font-size: 1.1rem; }
.product-table { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.product-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px; background: #fff; }
.product-row.has-error { border-color: #efc2bd; background: #fffafa; }
.pr-photo { grid-row: span 2; }
.photo-btn { width: 64px; height: 64px; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); background: var(--bg); cursor: pointer; padding: 2px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.photo-btn img { width: 100%; height: 100%; object-fit: contain; }
.photo-empty { font-size: .78rem; color: var(--muted); }
.pr-fields { min-width: 0; }
.pr-main { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 8px; }
.pr-field { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pr-field > span { font-size: .76rem; font-weight: 600; color: var(--muted); }
.pr-field input { min-height: 40px; padding: 8px 10px; font-size: .95rem; }
.pr-name { grid-column: 1 / -1; }
.pr-featured { min-height: 40px; padding: 6px 0; align-self: end; }
.pr-errors { color: var(--err); font-size: .85rem; font-weight: 600; margin: 4px 0 0; }
.pr-warn { color: var(--warn); font-size: .82rem; margin: 2px 0 0; }
.pr-errors:empty, .pr-warn:empty { display: none; }
.pr-more summary { cursor: pointer; font-size: .85rem; color: var(--brand); padding: 6px 0; min-height: 32px; }
.pr-extra { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 6px 8px; }
.pr-framing { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 8px; }
.pr-framing .field-label { flex-basis: 100%; }
.pr-range { display: flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--muted); }
.pr-range input { width: 110px; accent-color: var(--brand); }
.pr-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 2px; }
.pr-actions .icon-btn { font-size: 1.15rem; width: 40px; height: 40px; }
.icon-danger { color: var(--err); }
input.is-suggested { border-style: dashed; background: #fbfcff; }

/* Loja */
.store-grid { display: grid; gap: 4px 24px; grid-template-columns: minmax(0, 1fr); }
.store-grid .group { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px; }
.store-grid .group > legend { padding: 0 6px; }
.input-with-toggle { display: flex; gap: 8px; align-items: center; }
.show-toggle { display: inline-flex; align-items: center; gap: 4px; font-size: .8rem; color: var(--muted); white-space: nowrap; cursor: pointer; min-height: 44px; }
.show-toggle input { width: 18px; height: 18px; accent-color: var(--brand); }
.color-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.preset { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 6px 10px; font: inherit; font-size: .8rem; cursor: pointer; min-height: 36px; }
.preset:hover { border-color: var(--brand); }
.preset-dot { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .15); }
.preset-1 { background: linear-gradient(135deg, #d7141a 50%, #ffd200 50%); }
.preset-2 { background: linear-gradient(135deg, #1c7a35 50%, #f5c518 50%); }
.preset-3 { background: linear-gradient(135deg, #0b4fa8 50%, #ffcc00 50%); }
.preset-4 { background: linear-gradient(135deg, #121417 50%, #ffcc00 50%); }
.preset-5 { background: linear-gradient(135deg, #1f3b2d 50%, #b8913a 50%); }
.preset-6 { background: linear-gradient(135deg, #e8590c 50%, #7b2d00 50%); }
.suggestions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }
.suggestion-chip { border: 1px solid var(--brand-line); background: var(--brand-soft); color: var(--brand-strong); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: .85rem; cursor: pointer; min-height: 36px; }
.suggestion-chip:hover { background: #dfe9ff; }
.suggestion-note { flex-basis: 100%; }
.qr-field .segmented { margin: 4px 0 8px; }
.brand-actions { margin-top: 6px; }

/* Galeria */
.template-gallery { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.template-card { position: relative; display: flex; flex-direction: column; gap: 8px; border: 2px solid var(--line); border-radius: var(--radius); padding: 10px; background: #fff; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.template-card:hover { border-color: var(--brand-line); }
.template-card.is-selected { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(29, 78, 216, .2); }
.template-card:focus-within { box-shadow: var(--focus); }
.template-thumb { width: 100%; aspect-ratio: 1240 / 1754; border-radius: 6px; background: var(--bg); box-shadow: 0 1px 4px rgba(0, 0, 0, .15); }
.template-body { display: flex; flex-direction: column; gap: 2px; }
.template-name { font-size: .95rem; }
.template-desc { font-size: .8rem; color: var(--muted); }
.fav-btn { align-self: flex-start; border: 0; background: none; font: inherit; font-size: .8rem; color: var(--warn); cursor: pointer; padding: 4px 0; min-height: 32px; }

/* Editor */
.editor-layout { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.editor-controls { display: flex; flex-direction: column; gap: 8px; order: 2; }
.editor-preview { order: 1; min-width: 0; }
.control-group { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0 12px; background: #fff; }
.control-group > summary { cursor: pointer; font-weight: 700; padding: 12px 0; min-height: 44px; }
.control-group[open] { padding-bottom: 8px; }
.show-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.show-list .check { min-height: 40px; padding: 6px 0; }
.quick-list { display: flex; flex-direction: column; gap: 6px; max-height: 420px; overflow: auto; padding: 2px; }
.quick-row { display: grid; grid-template-columns: minmax(0, 1fr) 92px 40px; gap: 6px; align-items: center; border-radius: var(--radius-sm); padding: 4px; }
.quick-row input { min-height: 40px; padding: 6px 8px; font-size: .9rem; }
.quick-row.is-active { background: var(--brand-soft); }
.quick-row.has-error input { border-color: var(--err); }
.quick-row .star { width: 40px; height: 40px; font-size: 1.3rem; color: var(--line-strong); }
.quick-row .star.is-on { color: #e8a200; }
.quick-error { grid-column: 1 / -1; color: var(--err); font-size: .8rem; }
.quick-error:empty { display: none; }
.preview-toolbar { margin-bottom: 8px; overflow-x: auto; }
.format-switch .segment span { font-size: .82rem; padding: 8px 10px; }
.preview-info { font-size: .88rem; color: var(--ink-2); margin-bottom: 6px; }
.flyer-app .notice-warn p { margin: 0 0 4px; }
.preview-pages { display: flex; flex-direction: column; align-items: center; gap: 16px; background: #e9edf4; border-radius: var(--radius-sm); padding: 12px; }
.preview-page { margin: 0; width: 100%; max-width: 640px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.preview-page.is-landscape { max-width: 820px; }
.preview-page.is-story { max-width: 380px; }
.preview-canvas { width: 100%; height: auto; background: #fff; box-shadow: 0 2px 10px rgba(15, 23, 42, .18); cursor: pointer; display: block; }
.preview-canvas:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

/* Exportacao */
.export-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.format-list { display: flex; flex-direction: column; }
.format-option { min-height: 44px; }
.format-option strong { font-weight: 600; }
.export-actions { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.progress { width: 100%; }
.progress progress { width: 100%; height: 14px; accent-color: var(--brand); }
.export-results { width: 100%; }
.export-results h3 { font-size: 1.05rem; }
.file-list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.file-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-content: space-between; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 10px; background: #fff; }
.file-row.is-bundle { border-color: var(--brand-line); background: var(--brand-soft); }
.file-info { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }

/* Landing e paginas de apoio */
.guide-figure { text-align: center; }
.guide-figure img { width: 100%; max-width: 320px; height: auto; border-radius: 8px; box-shadow: 0 6px 24px rgba(15, 23, 42, .18); }
.flyer-hero { padding: 28px 0 8px; }
.flyer-hero-grid { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); align-items: center; }
.flyer-hero h1 { font-size: clamp(1.8rem, 1.2rem + 2.6vw, 2.8rem); }
.flyer-hero .lead { font-size: 1.08rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 8px; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 0; margin: 8px 0 0; list-style: none; font-size: .9rem; color: var(--ink-2); }
.hero-proof li::before { content: "✓ "; color: var(--ok); font-weight: 700; }
.hero-demo { position: relative; display: flex; justify-content: center; }
.hero-demo img { width: 100%; max-width: 420px; height: auto; border-radius: 8px; box-shadow: 0 12px 40px rgba(15, 23, 42, .22); }
.hero-demo .demo-story { position: absolute; right: 0; bottom: -10px; width: 30%; max-width: 140px; border-radius: 10px; border: 3px solid #fff; }
.flyer-section { padding: 28px 0; }
.flyer-section h2 { font-size: 1.45rem; margin-bottom: 12px; }
.steps-3 { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); counter-reset: s; padding: 0; list-style: none; }
.steps-3 li { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; counter-increment: s; }
.steps-3 li::before { content: counter(s); display: inline-flex; width: 32px; height: 32px; border-radius: 50%; background: var(--brand); color: #fff; align-items: center; justify-content: center; font-weight: 700; margin-bottom: 8px; }
.steps-3 strong { display: block; margin-bottom: 4px; }
.gallery-static { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.gallery-static figure { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; }
.gallery-static img { width: 100%; height: auto; border-radius: 6px; display: block; }
.gallery-static figcaption { font-size: .9rem; margin-top: 8px; }
.gallery-static figcaption span { display: block; color: var(--muted); font-size: .8rem; }
.cta-band { background: var(--brand); color: #fff; border-radius: var(--radius); padding: 24px; text-align: center; }
.cta-band h2 { color: #fff; }
.cta-band .btn { background: #fff; color: var(--brand-strong); border-color: #fff; }
.cta-band p { color: #e3ecff; }
.related-guides { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); padding: 0; list-style: none; }
.related-guides a { display: block; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; text-decoration: none; font-weight: 600; }

@media (min-width: 640px) {
    .pr-main { grid-template-columns: minmax(0, 1fr) 110px 110px 90px; }
    .pr-name { grid-column: 1 / -1; }
    .store-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .steps-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .step-label { font-size: .82rem; }
}

@media (min-width: 1024px) {
    .step-panel { padding: 22px; }
    .product-row { grid-template-columns: 64px minmax(0, 1fr) auto; }
    .pr-photo { grid-row: auto; }
    .pr-actions { grid-column: auto; flex-direction: column; justify-content: flex-start; }
    .pr-main { grid-template-columns: minmax(0, 2.4fr) 100px 100px 80px minmax(0, 1.2fr) auto; }
    .pr-name { grid-column: auto; }
    .editor-layout { grid-template-columns: 340px minmax(0, 1fr); align-items: start; }
    .editor-controls { order: 1; position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto; }
    .editor-preview { order: 2; }
    .export-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .flyer-hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
    .template-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .gallery-static { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}