/* propostas.css - gerador de propostas embutido no SaaS. Gerado a partir do antigo proposta.html (iframe), com TODOS os seletores escopados em #pgen. O escopo e obrigatorio: o gerador usa :root, *, body, input, button e select, que sem prefixo reestilizariam o SaaS inteiro. Removidos: as regras .in-iframe (nao ha mais iframe) e o @media print. */ /* Tokens (--cy, --nav-*, --ink, --radius, --ring, --shadow-btn) vivem em propcomum.css desde a Etapa 7 (11/09/2026) — compartilhados com o outro gerador. */ #pgen *{box-sizing:border-box;} #pgen{margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif; background:#0c1525; color:var(--ink); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;} /* A altura desconta o cabeçalho do SaaS — era o que o iframe fazia com calc(100vh - 160px). Sem isso o gerador passaria da dobra por causa do header. */ #pgen .app{display:grid; grid-template-columns:350px 1fr; grid-template-rows:auto 1fr; height:calc(100vh - 160px); height:calc(100dvh - 160px); min-height:640px;} /* ── Header / branding ── */ #pgen .topbar{grid-column:1 / -1; position:relative; z-index:2; display:flex; align-items:center; gap:12px; height:52px; padding:0 20px; background:linear-gradient(90deg,var(--nav-1),var(--nav-2)); border-bottom:1px solid rgba(56,189,248,.08); box-shadow:0 2px 20px rgba(0,0,0,.35); color:#fff;} #pgen .brand{display:flex; align-items:center; gap:12px;} #pgen .brand-mark{width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:17px; color:#04121f; background:linear-gradient(135deg,var(--cy2),var(--cy)); box-shadow:0 4px 14px var(--cy-glow);} #pgen .brand-text{display:flex; flex-direction:column; line-height:1.25;} #pgen .brand-text strong{font-size:13.5px; font-weight:700; letter-spacing:-.01em;} #pgen .brand-text span{font-size:10px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; color:var(--cy2);} #pgen .panel{padding:16px; overflow-y:auto; min-height:0;} #pgen .panel::-webkit-scrollbar{width:6px;} #pgen .panel::-webkit-scrollbar-track{background:transparent;} #pgen .panel::-webkit-scrollbar-thumb{border-radius:3px; background:rgba(56,189,248,.15);} #pgen .panel::-webkit-scrollbar-thumb:hover{background:rgba(56,189,248,.3);} #pgen .form::-webkit-scrollbar-thumb{background:rgba(56,189,248,.15);} #pgen .form::-webkit-scrollbar-thumb:hover{background:rgba(56,189,248,.3);} #pgen .preview-wrap::-webkit-scrollbar-thumb{background:rgba(14,165,233,.2);} #pgen .preview-wrap::-webkit-scrollbar-thumb:hover{background:rgba(14,165,233,.35);} #pgen .form{background:linear-gradient(180deg,var(--nav-1) 0%,var(--nav-2) 40%,var(--nav-3) 100%); border-right:1px solid rgba(56,189,248,.06); color:var(--nav-ink); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);} #pgen #formExcel{display:flex; flex-direction:column; height:100%; gap:0;} #pgen #formExcel .card{flex:1; display:flex; flex-direction:column;} #pgen .form h2{font-size:9.5px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; margin:0 0 10px; padding-bottom:7px; border-bottom:1px solid var(--nav-line); display:flex; align-items:center; gap:7px;} #pgen .sec-ic{width:15px; height:15px; flex:0 0 auto;} #pgen .consul-btn-row label .sec-ic{vertical-align:-3px; margin-right:6px;} #pgen .card{background:var(--nav-card); border:1px solid var(--nav-card-bd); border-radius:12px; padding:12px 14px 14px; margin-bottom:8px; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); transition:border-color .2s cubic-bezier(.4,0,.2,1), background-color .2s cubic-bezier(.4,0,.2,1), box-shadow .2s; border-left:3px solid rgba(255,255,255,.06);} #pgen .card:hover{background-color:rgba(255,255,255,.06); box-shadow:0 4px 20px -8px rgba(14,165,233,.12);} #pgen .card-cy{border-left-color:var(--cy); position:relative; z-index:20;} #pgen .card-cy h2{color:var(--cy2);} #pgen .card-cy:hover{border-color:var(--nav-card-bd); border-left-color:var(--cy2);} #pgen .card-am{border-left-color:#f59e0b;} #pgen .card-am h2{color:#fbbf24;} #pgen .card-am:hover{border-color:var(--nav-card-bd); border-left-color:#fbbf24;} #pgen .card-gn{border-left-color:#22c55e;} #pgen .card-gn h2{color:#4ade80;} #pgen .card-gn:hover{border-color:var(--nav-card-bd); border-left-color:#4ade80;} #pgen label{display:block; font-size:11px; font-weight:600; color:var(--nav-muted); margin:8px 0 4px; letter-spacing:.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} #pgen input,#pgen textarea,#pgen select{width:100%; min-width:0; box-sizing:border-box; padding:8px 11px; border:1px solid var(--nav-line); border-radius:var(--radius); font-size:12.5px; font-family:inherit; color:var(--nav-ink); background-color:var(--nav-field); color-scheme:dark; transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease;} #pgen input:hover,#pgen textarea:hover,#pgen select:hover{border-color:rgba(56,189,248,.25); background-color:rgba(255,255,255,.07);} #pgen input:focus,#pgen textarea:focus,#pgen select:focus{outline:none; border-color:var(--cy); background-color:rgba(14,165,233,.08); box-shadow:var(--ring);} #pgen input::placeholder,#pgen textarea::placeholder{color:var(--nav-faint);} #pgen select{appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:30px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2338bdf8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 11px center;} #pgen select option{background-color:var(--nav-2); color:var(--nav-ink);} #pgen textarea{resize:vertical; min-height:56px; line-height:1.5;} #pgen .row{display:flex; gap:8px;} #pgen .row > *{flex:1; min-width:0;} /* A coluna do formulário do gerador tem ~280px — as 2 pílulas de "Preencher com" (destModo) não cabem lado a lado no tamanho natural e quebram. Aqui forçamos as duas a dividir a linha meio a meio. Escopado em #pgen: não afeta o trilho de negociações (4 pílulas, que devem quebrar em 2×2 num modal largo). */ #pgen .sg button{flex:1 1 0; min-width:0;} #pgen .row3{display:flex; gap:8px;} #pgen .row3 > *{flex:1; min-width:0;} #pgen .consul-btn-row{display:flex; gap:10px; align-items:flex-end; margin-top:auto; padding-top:10px; border-top:1px solid var(--nav-line);} #pgen .consul-btn-row > *:first-child{flex:1;} #pgen .consul-btn-row .btn{margin-top:0; width:auto; white-space:nowrap;} #pgen .consul-btn-row label{color:var(--cy2);} /* Aviso de "só para assinar" (10/09/2026). Fica FORA da .consul-btn-row, que é flex com o select à esquerda e o botão PDF à direita — dentro dela viraria uma terceira coluna. O corpo do #pgen tem tema próprio e é sempre escuro (as regras de data-theme deste arquivo valem só para a .pgen-bar, que está fora), então uma cor só serve nos dois temas do app. */ #pgen .pgen-ass-nota{margin-top:8px; padding:7px 10px; border-left:2px solid var(--cy); border-radius:0 8px 8px 0; background:var(--nav-card); font-size:11.5px; line-height:1.45; color:var(--nav-muted);} #pgen .btn{background:linear-gradient(135deg,var(--cy2),var(--cy)); color:#04121f; border:none; padding:10px 14px; border-radius:var(--radius); font-size:12.5px; font-weight:700; letter-spacing:.01em; cursor:pointer; width:100%; margin-top:16px; box-shadow:var(--shadow-btn); transition:filter .18s ease, box-shadow .18s ease, transform .08s ease;} #pgen .btn:hover{filter:brightness(1.1); box-shadow:0 6px 22px var(--cy-glow);} #pgen .btn:active{transform:translateY(1px);} #pgen .btn:focus-visible{outline:none; box-shadow:var(--ring);} /* Preview */ #pgen .preview-wrap{background:linear-gradient(180deg,#0f1b2e,#0c1525); padding:16px 12px; overflow-x:auto;} #pgen #doc{background:#fff; width:210mm; height:297mm; min-height:297mm; overflow:hidden; margin:0 auto; padding:18mm 16mm; box-shadow:0 4px 40px rgba(0,0,0,.35), 0 0 0 1px rgba(56,189,248,.06); border-radius:4px; font-size:13px; color:#1f2937; transform-origin:top center;} /* ── Layout Excelência ── */ #pgen #doc.excel{padding:0; display:flex; flex-direction:column;} #pgen #doc.excel .ex-band{width:100%; height:auto; display:block;} #pgen #doc.excel .ex-body{flex:1; padding:12mm 15mm; font-size:13px; line-height:1.55; color:#1f2937;} #pgen #doc.excel .ex-date{text-align:right; font-weight:700; font-size:12px; margin-bottom:16px;} #pgen #doc.excel .ex-to{margin:0 0 14px;} #pgen #doc.excel .ex-par{text-align:justify; margin:0 0 14px;} #pgen #doc.excel .ex-price{width:100%; border-collapse:collapse; margin:16px 0; font-size:12.5px;} #pgen #doc.excel .ex-price th,#pgen #doc.excel .ex-price td{border:1px solid #333; padding:7px 9px;} #pgen #doc.excel .ex-price th{text-align:center; font-weight:700;} #pgen #doc.excel .ex-price tr.c td{text-align:center; font-weight:700;} #pgen #doc.excel .ex-price td.full{text-align:left;} #pgen #doc.excel .ex-price td.it{font-style:italic; font-size:11.5px;} #pgen #doc.excel .ex-price td.lbl{text-align:left;} #pgen #doc.excel .ex-sign{display:flex; justify-content:space-between; gap:24px; margin-top:24px;} #pgen #doc.excel .ex-bank{border:1px solid #333; padding:10px 14px; font-size:11.5px; line-height:1.6; text-align:center; flex:0 1 48%;} #pgen #doc.excel .ex-bank .cnpj{font-size:10px;} #pgen #doc.excel .ex-bank b{display:block;} #pgen #doc.excel .ex-seller{text-align:center; font-size:12px; line-height:1.7; padding-top:16px; flex:0 1 48%;} #pgen #doc.excel .ex-seller b{display:block; font-size:13px;} #pgen #doc.excel .ex-seller a{color:#2563eb; display:block; word-break:break-all;} #pgen #doc.excel .ex-seller span{display:block;} /* Cortesia — linha destacada na tabela */ #pgen #doc.excel .ex-price tr.courtesy td{background:#ecfdf5; color:#065f46; font-weight:700; text-align:center; letter-spacing:.05em;} /* Cortesia — toggle no formulário */ #pgen .courtesy-toggle{display:flex; align-items:center; gap:10px; padding:10px 12px; margin-top:12px; border:1px solid var(--nav-line); border-radius:var(--radius); background:var(--nav-card); cursor:pointer; transition:border-color .2s ease, background-color .2s ease, box-shadow .2s;} #pgen .courtesy-toggle:hover{border-color:rgba(56,189,248,.18); background-color:rgba(255,255,255,.06);} #pgen .courtesy-toggle input[type=checkbox]{width:16px; height:16px; margin:0; cursor:pointer; accent-color:#16a34a; flex:0 0 auto;} #pgen .courtesy-toggle label{margin:0; font-size:12.5px; font-weight:600; color:var(--nav-ink); cursor:pointer; flex:1;} #pgen .courtesy-toggle .hint{font-size:11px; color:var(--nav-muted); font-weight:400; display:block; margin-top:2px;} #pgen .courtesy-toggle.active{border-color:rgba(22,163,74,.4); background:rgba(22,163,74,.10); box-shadow:0 0 0 1px rgba(22,163,74,.2) inset;} #pgen .courtesy-toggle.active label{color:#bbf7d0;} #pgen .courtesy-toggle .courtesy-qty{display:none; align-items:center; gap:6px; font-size:11.5px; color:#bbf7d0; flex:0 0 auto;} #pgen .courtesy-toggle .courtesy-qty input{width:60px; padding:5px 8px; font-size:12px; margin:0;} #pgen .courtesy-toggle.active .courtesy-qty{display:flex;} #pgen .discount-group.disabled{opacity:.4; pointer-events:none;} #pgen .discount-group.disabled input,#pgen .discount-group.disabled select{cursor:not-allowed;} #pgen .org-sug{display:none; position:absolute; left:0; right:0; top:100%; background:var(--nav-2); border:1px solid rgba(56,189,248,.12); border-radius:var(--radius); max-height:180px; overflow-y:auto; z-index:50; box-shadow:0 8px 28px rgba(0,0,0,.5); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);} #pgen .org-sug-item{padding:8px 11px; font-size:12px; color:var(--nav-ink); cursor:pointer; border-bottom:1px solid rgba(56,189,248,.06); transition:background .12s;} #pgen .org-sug-item:hover{background:rgba(14,165,233,.1);} /* ══ Celular: abas, seções recolhíveis e barra de ação — 01/09/2026 ═══════ Estas três peças existem no DOM sempre, mas SÓ APARECEM até 768px. No desktop elas são display:none e o acordeão é desfeito por display:contents, que devolve os campos ao fluxo do .card (que é flex-column) como se o wrapper não existisse — o PC renderiza exatamente como antes. */ #pgen .pgen-mtop,#pgen .pgen-mbar{display:none;} /* display:contents é o que mantém o desktop intacto: o .card continua sendo o pai flex direto dos campos. NÃO trocar por display:block. */ #pgen .pgen-sec-b{display:contents;} #pgen .pgen-sec-c,#pgen .pgen-sec-r{display:none;} /* ── Mobile 768px — stack layout ── */ @media(max-width:768px){ /* MEDIDAS NO CELULAR — duas correções que só têm efeito em aparelho real: 1) 100dvh (dynamic viewport height): no Safari do iPhone, 100vh é a altura SEM a barra de endereço, ou seja, sempre maior que a área visível — o layout fica mais alto que a tela. dvh acompanha a altura realmente visível. A linha 100vh fica como fallback para navegadores antigos (a de baixo vence onde há suporte). 2) env(safe-area-inset-*): a página declara viewport-fit=cover, que manda o iOS estender o conteúdo por baixo do notch/Dynamic Island e da barra de gestos. Sem compensar os insets, o conteúdo fica embaixo deles — cortado nas laterais e no rodapé. Em tela sem notch (desktop/Android comum) os insets valem 0 e estas regras não mudam nada. */ #pgen .app{grid-template-columns:1fr;grid-template-rows:auto auto 1fr;height:auto;min-height:0; padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px); padding-bottom:env(safe-area-inset-bottom,0px)} /* Trava de largura: o A4 do preview tem 794px de layout. Sem isto ele empurra o container e o app corta na lateral (body tem overflow-x:clip). #doc/#docScaler ficam de fora de propósito — o A4 precisa manter 794px, quem encolhe é o zoom. */ /* NÃO incluir #doc/#docScaler aqui: o A4 precisa manter 794px de layout (quem encolhe é o zoom do fitPreview). Capar a largura deles faria o documento refluir e o preview deixaria de corresponder ao PDF. */ #pgen .app,#pgen .panel,#pgen .preview-wrap{max-width:100%} #pgen .preview-wrap{overflow-x:hidden} #pgen .form{border-right:none;border-bottom:1px solid rgba(56,189,248,.06)} #pgen .preview-wrap{padding:16px 10px} /* O #doc NÃO é reflowado no mobile: ele continua A4 real (210x297mm) e o fitPreview() o reduz com transform:scale(). Assim a pré-visualização é uma miniatura FIEL — mesmas quebras de linha do desktop e do PDF. Redimensionar o documento aqui (width:100%/font menor) fazia o preview não corresponder ao documento gerado. */ #pgen .topbar{height:48px;padding:0 14px;gap:8px} #pgen .brand-mark{width:26px;height:26px;font-size:15px;border-radius:7px} #pgen .brand-text strong{font-size:12px} #pgen .brand-text span{font-size:9px} /* ── 0. Navegação: chips leves, SEM calha ───────────────────────────── Duas correções, nesta ordem de importância: (a) o desalinhamento vinha do `style="margin-left:auto;flex:0 0 auto"` INLINE do seletor de modo (`vProp`, comercial.js). No desktop está certo — empurra o trilho para a direita da barra —, mas quando a .pgen-bar quebra em linhas no celular ele continua empurrando: medido em 430px, `eq-tabs` ia de 14 a 221 e o `.sg` de 179 a 416. (b) o PESO não era a altura do botão, era a CALHA em volta de cada grupo (fundo + borda + padding). O chip já é discreto; a moldura é que fazia parecer botão grande. Aqui os grupos perdem a calha e os chips ficam direto sobre o fundo — o padrão do YouTube Music, referência do Rafael. Resultado medido: 178px de altura de navegação -> 42px, e os 4 chips cabem em 430px sem rolar. */ /* `.pgen-shell .pgen-bar` (0,2,0) e não `.pgen-bar` (0,1,0): a regra base do .pgen-bar está DEPOIS deste bloco no arquivo e, com a mesma especificidade, o `flex-wrap:wrap` e o `gap:12px` dela venciam — as calhas voltavam a empilhar mesmo com `nowrap` escrito aqui. */ .pgen-shell .pgen-bar{flex-direction:row;flex-wrap:nowrap;align-items:center;gap:5px; overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch; padding-bottom:9px;border-bottom:1px solid var(--lb-stroke,rgba(255,255,255,.07))} .pgen-shell .pgen-bar::-webkit-scrollbar{display:none} .pgen-shell{gap:10px} /* fora a calha: fundo, borda, sombra e padding dos dois grupos */ .pgen-bar .eq-tabs,.pgen-bar .sg{background:none;border:0;box-shadow:none;padding:0;gap:5px; backdrop-filter:none;-webkit-backdrop-filter:none;border-radius:0;width:auto;flex:0 0 auto; overflow-x:visible;margin:0} /* !important porque o margin-left/flex do seletor de modo é style inline; `auto` aqui abriria um vão no meio da linha */ .pgen-bar .sg{margin-left:0!important;flex:0 0 auto!important; border-left:1px solid var(--lb-stroke,rgba(255,255,255,.12))!important; padding-left:8px;margin-left:3px!important} /* chip: altura de chip, não de botão de formulário. As cores ATIVAS ficam as do app (.eq-tab.on / .sg button.on) — elas já resolvem tema claro e escuro; um chip branco, como no mockup, sumiria no tema claro. */ .pgen-bar .eq-tab,.pgen-bar .sg button,.pgen-bar .sg .sg-btn{flex:0 0 auto; min-height:32px;padding:0 9px;font-size:11.5px;font-weight:600;line-height:1.2; white-space:nowrap;border-radius:16px;box-shadow:none} /* Chip ativo claro com texto escuro, como no mockup aprovado — mas SÓ no tema escuro. No claro a .pgen-bar fica sobre fundo claro e um chip #e8eef8 sumiria; lá o azul do app (.eq-tab.on / .sg button.on) continua valendo. */ [data-theme="dark"] .pgen-bar .eq-tab.on, [data-theme="dark"] .pgen-bar .sg button.on, [data-theme="dark"] .pgen-bar .sg .sg-btn.on{background:#e8eef8;background-image:none; color:#0b1220;font-weight:700;box-shadow:none} /* os ícones somem: com o rótulo no chip eles só roubam largura (idem YT Music) */ .pgen-bar .eq-tab svg,.pgen-bar .sg button svg{display:none} /* ── 1. O gerador é um CARTÃO ───────────────────────────────────────── Antes era uma mancha escura colada no resto da tela — a queixa de "tudo junto". Borda + raio dão o limite, e as abas Formulário|Documento moram dentro dele, com um fio separando do conteúdo. */ #pgen{border:1px solid var(--lb-stroke,rgba(56,189,248,.16));border-radius:16px;overflow:hidden} #pgen .pgen-mtop{display:flex;position:static;margin:0;padding:8px;gap:4px; background:rgba(255,255,255,.03);border:0;border-bottom:1px solid rgba(255,255,255,.07); border-radius:0} /* A cor do INATIVO vem do painel escuro do gerador, não do tema do app: medido, o --lb-muted herdado dava 3,12:1 sobre este fundo. --nav-muted é o cinza do próprio #pgen e dá 6,0:1. */ #pgen .pgen-mtab{flex:1 1 0;min-width:0;justify-content:center;min-height:34px; padding:0 8px;font-size:12.5px;font-weight:700;line-height:1.2;border-radius:9px; white-space:nowrap;color:var(--nav-muted)} /* texto ESCURO sobre o ciano do gerador: branco dá 2,77:1, o ciano é claro */ #pgen .pgen-mtab.on{color:#04121f} #pgen.m-doc .panel.form{display:none} #pgen:not(.m-doc) .preview-wrap{display:none} #pgen.m-doc .preview-wrap{padding:12px 8px 92px} #pgen .topbar{display:none} /* a marca já está no cabeçalho do app */ /* ── 2. Formulário compacto ─────────────────────────────────────────── Os 44px de alvo de toque e os 16px de fonte continuam nos CAMPOS (são pisos: abaixo de 16px o Safari dá zoom sozinho ao focar). O que encolhe é o espaço morto entre rótulo e campo: ~1.720px -> ~1.020px. */ #pgen{background:#0d1729} #pgen .panel{padding:0} #pgen .panel.form{padding:0 14px 92px} #pgen .preview-wrap{background:#0b1220} #pgen label{font-size:11px;margin:0 0 4px;line-height:1.25;color:#8b9cb5} /* Só o espaçamento é ajustado aqui. Altura (44px), raio e fundo do campo vêm do bloco @media(max-width:640px), que está DEPOIS neste arquivo e vence com a mesma especificidade — repetir os valores aqui seria CSS morto. */ #pgen input,#pgen textarea,#pgen select{padding:6px 11px;margin-bottom:12px} #pgen .row{gap:10px;margin-bottom:0} /* ── 3. Seções com divisão de verdade ───────────────────────────────── Um fio acima de cada seção. Curso e Destinatário abrem por padrão; as outras ficam a um toque, com o resumo do conteúdo no cabeçalho. */ #pgen .pgen-sec-b{display:block;padding:0 0 14px} #pgen .pgen-sec:not(.open) .pgen-sec-b{display:none} #pgen #formExcel .pgen-sec{flex:none;display:block;margin:0;padding:0; border:0;border-top:1px solid rgba(255,255,255,.07)} #pgen #formExcel > .card:first-of-type{border-top:0} #pgen .pgen-sec h2{cursor:pointer;margin:0;padding:15px 0 12px;border-bottom:0; min-height:50px;box-sizing:border-box} #pgen .pgen-sec-c{display:block;flex:0 0 auto;width:0;height:0; border-left:5px solid currentColor;border-top:4px solid transparent;border-bottom:4px solid transparent; opacity:.7;transition:transform .18s} #pgen .pgen-sec.open .pgen-sec-c{transform:rotate(90deg)} #pgen .pgen-sec-r{display:block;flex:1 1 auto;min-width:0;text-align:right; font-size:11.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--nav-muted); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #pgen .pgen-sec.open .pgen-sec-r{display:none} /* o Consultor usa o