/* ═══════════════════════════════════════════════════════════════
   ÁREA DA CLIENTE — formulários (mesmo sistema do /acesso)
   Shell: fundo escuro ("mesa") + sidebar flutuante + painel creme arredondado.
   Carregar DEPOIS de impar-padrao.css / impar-dim2.css, junto com impar-app.js.
   Só age quando o JS marca <body class="impar-app"> e embrulha o conteúdo em .ia-main.
   Tokens vêm de impar-ui.css (importado abaixo). Fontes: Bricolage Grotesque + Manrope.
   ═══════════════════════════════════════════════════════════════ */
@import url('/impar-ui.css');
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Manrope:wght@400;500;600;700;800&display=swap');

/* ── SIDEBAR FLUTUANTE ── */
.ia-side{
  position:fixed;top:var(--ui-pad);left:var(--ui-pad);bottom:var(--ui-pad);width:var(--ui-side-w);
  background:var(--ui-panel);border-radius:var(--ui-r-panel);box-shadow:inset 0 1px 0 rgba(245,237,216,.08);
  z-index:900;display:flex;flex-direction:column;font-family:var(--ui-font-text)
}
.ia-side-marca{min-height:128px;padding:26px 20px 12px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:10px;text-decoration:none}
.ia-side-marca img{height:34px;width:auto;display:block;filter:brightness(0) invert(1);opacity:.95}
.ia-side-marca span{font-size:10px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--ui-gold)}
.ia-side-nav{flex:1;overflow-y:auto;padding:6px 14px 96px;display:flex;flex-direction:column;gap:4px;scrollbar-width:thin;scrollbar-color:rgba(245,237,216,.18) transparent}
.ia-side-nav::before{content:"NAVEGAÇÃO";display:block;padding:14px 14px 8px;font-size:10px;font-weight:800;letter-spacing:.2em;color:rgba(245,237,216,.45)}
.ia-side-voltar{display:block;padding:10px 14px;margin-bottom:4px;font-size:13px;font-weight:700;color:rgba(245,237,216,.75);text-decoration:none;border-radius:14px;transition:background .15s,color .15s}
.ia-side-voltar:hover{background:rgba(245,237,216,.07);color:var(--ui-cream)}
.ia-dim{display:grid;grid-template-columns:32px 1fr;column-gap:12px;align-items:center;padding:9px 14px;border-radius:14px;text-decoration:none;transition:background .15s}
.ia-dim:hover{background:rgba(245,237,216,.07)}
.ia-dim-num{width:32px;height:32px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:rgba(245,237,216,.09);color:var(--ui-cream);font-family:var(--ui-font-display);font-size:14px;font-weight:600}
.ia-dim-nome{font-size:14.5px;font-weight:700;color:var(--ui-cream)}
.ia-dim.atual{background:var(--ui-gold)}
.ia-dim.atual .ia-dim-num{background:var(--ui-ink);color:var(--ui-cream)}
.ia-dim.atual .ia-dim-nome{color:var(--ui-ink)}
.ia-side-cta{position:absolute;left:14px;right:14px;bottom:14px;background:var(--ui-rose);border-radius:999px;padding:14px 12px;text-align:center;text-decoration:none;box-shadow:0 14px 26px -14px rgba(168,92,107,.85)}
.ia-side-cta:hover{background:var(--ui-rose-h)}
.ia-side-cta span{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ui-cream)}

/* ── PÁGINA: mesa escura + painel creme ── */
body.impar-app{
  background:var(--ui-mesa) !important;
  padding:var(--ui-pad) var(--ui-pad) var(--ui-pad) calc(var(--ui-pad) + var(--ui-side-w) + var(--ui-gap)) !important;
  min-height:100vh;color:var(--ui-ink);font-family:var(--ui-font-text)
}
body.impar-app .ia-main{
  background:var(--ui-work);border-radius:var(--ui-r-panel);min-height:calc(100vh - 2 * var(--ui-pad));
  padding:8px clamp(8px,2vw,32px) 24px;box-shadow:0 40px 80px -40px rgba(0,0,0,.55);position:relative
}
body.impar-app .wrap{padding-bottom:40px}

/* Fontes: texto Manrope, títulos Bricolage (sobrescreve Playfair/DM Sans dos formulários) */
body.impar-app :is(p,span,div,label,button,input,textarea,select,a,li,td,th,small,strong,em){font-family:var(--ui-font-text) !important}
body.impar-app :is(h1,h2,h3,h4,.h1,.titulo,.etapa-tit,.etapa-titulo,.step-tit,.res-titulo,.res-nome,.rel-nome,.bloco-tit,.sec-t,.sec-tit,.ld-tit,.gate-titulo,.msg-txt,.msg-texto,.card-titulo,.look-nome,.look-alt-nome,.resultado-titulo,.venda-titulo,.oport-tit,.chave-tit,.menu-titulo,.impar-footer-logo,.perg-txt,.pergunta-texto,.prop-badge,.veredicto-txt,.proposta-txt,.silhueta-nome,.sens-nome,.peca-nome,.leitor-nome,.semana-tema,.inv-reconhece-tit,.rel-tagline,.res-sub){
  font-family:var(--ui-font-display) !important;font-weight:600 !important;letter-spacing:-.02em;color:var(--ui-ink)
}
body.impar-app :is(.h1,.titulo,.etapa-tit,.etapa-titulo,.res-titulo,.gate-titulo,.step-tit,.rel-nome,.res-nome) em{font-style:normal !important;color:var(--ui-rose) !important}
body.impar-app :is(.dim-n,.dif-n,.dc-n,.card-num,.bloco-num,.cal-num,.acao-n,.ponto-n,.padrao-n,.pri-n,.score-num,.score-n,.regra-num,.look-num,.look-n,.trilha-n,.etapa-num,.val-ordem,.slider-id,.slider-val,.prog-ct,.msg-aspas,.msg-quot,.serif){font-family:var(--ui-font-display) !important}

/* Sidebar já traz marca e "Voltar ao painel" */
body.impar-app .voltar-fixo{display:none !important}
body.impar-app .header > img{display:none !important}

/* Botões — pílula rosé */
body.impar-app .btn-pri,
body.impar-app .btn-next,
body.impar-app .bnext,
body.impar-app .btn-primary,
body.impar-app .btn-submit,
body.impar-app .btn-gerar,
body.impar-app button[type="submit"]{
  background:var(--ui-rose) !important;color:var(--ui-cream) !important;border-radius:999px !important;
  box-shadow:0 14px 26px -14px rgba(168,92,107,.85) !important;
  letter-spacing:.1em !important;text-transform:uppercase !important;font-size:12.5px !important;font-weight:800 !important
}
body.impar-app .btn-pri:hover,
body.impar-app .btn-next:hover,
body.impar-app .bnext:hover,
body.impar-app .btn-primary:hover,
body.impar-app .btn-submit:hover,
body.impar-app .btn-gerar:hover,
body.impar-app button[type="submit"]:hover{background:var(--ui-rose-h) !important;opacity:1 !important}
body.impar-app .btn-pri:disabled,
body.impar-app .btn-next:disabled,
body.impar-app .bnext:disabled,
body.impar-app .btn-gerar:disabled{box-shadow:none !important}
body.impar-app .btn-sec,
body.impar-app .btn-prev,
body.impar-app .bprev,
body.impar-app .btn-secondary,
body.impar-app .btn-voltar{border-radius:999px !important;letter-spacing:.1em !important;text-transform:uppercase !important;font-size:12px !important;font-weight:700 !important;border:1px solid rgba(30,22,16,.2) !important;color:var(--ui-ink) !important}

/* Campos */
body.impar-app input[type="text"],
body.impar-app input[type="number"],
body.impar-app input[type="email"],
body.impar-app input[type="tel"],
body.impar-app input[type="password"],
body.impar-app input[type="url"],
body.impar-app textarea,
body.impar-app select{
  background:var(--ui-surface) !important;border:1px solid rgba(30,22,16,.14) !important;border-radius:14px !important;
  font-family:var(--ui-font-text) !important;font-weight:500 !important;font-size:15.5px !important;color:var(--ui-ink) !important
}
body.impar-app input:focus,
body.impar-app textarea:focus,
body.impar-app select:focus{border-color:var(--ui-rose) !important;box-shadow:0 0 0 3px rgba(168,92,107,.15) !important}
body.impar-app :is(a,button,input,textarea,select):focus-visible{outline:2px solid var(--ui-rose);outline-offset:2px}
body.impar-app input::placeholder,body.impar-app textarea::placeholder{font-family:var(--ui-font-text) !important;font-style:normal !important;color:rgba(30,22,16,.4) !important}

/* Rótulos e acentos */
body.impar-app :is(label,.lbl,.campo-label){color:var(--ui-ink) !important;font-weight:700 !important}
body.impar-app .eyebrow,
body.impar-app .res-eyebrow,
body.impar-app .gate-eyebrow,
body.impar-app .rel-tag,
body.impar-app .prog-lbl,
body.impar-app .prog-etapa,
body.impar-app .bloco-num,
body.impar-app .sec-n,
body.impar-app .msg-autor,
body.impar-app .impar-footer-mentoria,
body.impar-app .impar-footer-logo span{color:var(--ui-rose) !important;font-weight:800 !important}
body.impar-app .eyebrow::before,
body.impar-app .eyebrow::after{background:var(--ui-rose)}
body.impar-app .prog-fill,body.impar-app .progress-fill{background:var(--ui-rose) !important}

/* Cards, sliders e opções */
body.impar-app :is(.card,.slider-wrap,.val-card,.perfil-card,.gap-lado,.look-alt,.msg-final,.upload-zona){border-radius:var(--ui-r-card)}

/* Botão flutuante de feedback */
body.impar-app #pg-fb-btn{background:var(--ui-rose) !important;color:var(--ui-cream) !important;box-shadow:0 14px 26px -14px rgba(168,92,107,.85) !important}
body.impar-app #pg-fb-btn:hover{background:var(--ui-rose-h) !important}

/* ── TABLET / CELULAR: barra de marca no topo, painel sobe por cima ── */
@media(max-width:1024px){
  body.impar-app{padding:0 !important}
  .ia-side{position:static;width:100%;border-radius:0;flex-direction:row;align-items:center;justify-content:space-between;padding-bottom:12px}
  .ia-side-marca{min-height:0;flex-direction:row;align-items:center;padding:14px 18px;gap:10px}
  .ia-side-marca img{height:28px}
  .ia-side-nav{flex:0 0 auto;padding:0 14px 0 0;overflow:visible}
  .ia-side-nav::before{display:none}
  .ia-side-nav .ia-dim,.ia-side-cta{display:none}
  .ia-side-voltar{margin:0;padding:8px 14px;font-size:12px;border:1px solid rgba(245,237,216,.18);border-radius:999px}
  body.impar-app .ia-main{margin-top:-2px;border-radius:22px 22px 0 0;min-height:0;box-shadow:none;padding:4px 4px 16px}
}
@media(max-width:420px){
  .ia-side-marca span{display:none}
}
@media print{
  .ia-side{display:none}
  body.impar-app{padding:0 !important;background:#fff !important}
  body.impar-app .ia-main{border-radius:0;box-shadow:none}
}

/* Itens do menu nunca encolhem; o menu rola quando a tela é baixa */
.ia-dim,.ia-side-voltar{flex:0 0 auto;box-sizing:border-box}
.ia-dim{min-height:52px}
.ia-dim-num{flex:none;justify-self:start}
@media(max-height:760px) and (min-width:1025px){
  .ia-dim{min-height:46px;padding-top:6px;padding-bottom:6px}
}

/* ── Caixas arredondadas em todos os formulários ── */
body.impar-app :is(
  .ad-card,
  .affirmation-card,
  .alert-paula,
  .analise-item,
  .aplicacao-card,
  .arq-group,
  .ausencia,
  .bio-card,
  .bloco,
  .boas-vindas-card,
  .briefing-box,
  .briefing-text,
  .calibracao-card,
  .campo-num,
  .card-mini,
  .chave-field,
  .check-box,
  .check-opt,
  .conclusion-section,
  .copy-area,
  .cor-card,
  .cor-sens,
  .critica-item,
  .cta-inicio,
  .ctx-item,
  .ctx-resultado,
  .cue,
  .dado-item,
  .dados-card,
  .dim-analise,
  .dim-check,
  .dim-intro-card,
  .dim-mini,
  .dim-status-item,
  .ent-extra,
  .entrada-item,
  .err-box,
  .erro,
  .escala-item,
  .est-item,
  .estacao-wrap,
  .etapa-card,
  .etapa-jornada,
  .fala-card,
  .form-card,
  .foto-mini,
  .foto-opcoes,
  .foto-preview-trocar,
  .foto-preview-wrap,
  .gap-barra,
  .gate-input,
  .hist-item,
  .ic.green,
  .ic.orange,
  .indicacao-destaque,
  .info-card,
  .insight-card,
  .instr-item,
  .intro-info,
  .leit-card,
  .leitor-card,
  .leitor-palavra,
  .loja-card,
  .look-card,
  .mapa-ctx,
  .mapa-wrap,
  .mensagem-final,
  .meta-card,
  .mini,
  .mini-box,
  .modal-box,
  .mood-item,
  .msg-box,
  .msg-campos-obrigatorios,
  .msg-paula,
  .msg.bussula,
  .nivel-card,
  .objecao-card,
  .op,
  .op-alinha,
  .opcao,
  .opcao-card,
  .opcao-resultado,
  .oport-card,
  .orc-box,
  .orc-total,
  .palavra,
  .peca,
  .peca-card,
  .peca-prioridade,
  .pergunta-destaque,
  .pilar-card,
  .pitch-novo,
  .plataforma-card,
  .ponto-card,
  .potencial,
  .preco-card,
  .preview-box,
  .preview-card,
  .pri-card,
  .principios,
  .progresso,
  .proposta-bloco,
  .proposta-destaque,
  .radio-item,
  .rec-b.ideal,
  .rec-b.warn,
  .resposta-card,
  .result-block,
  .result-hero,
  .result-section,
  .roteiro-card,
  .roteiro-secao,
  .ruptura-card,
  .scale-item,
  .score-item,
  .score-wrap,
  .secao-palestra,
  .semaforo-item,
  .semana-card,
  .sensorial-secao,
  .silhueta-res,
  .silhueta-wrap,
  .simbolo,
  .slider-traco,
  .sucesso,
  .tex-item,
  .timer-banner,
  .tipo-item,
  .titulo-alt,
  .treino-card,
  .tutorial-card,
  .ultima,
  .upload-troca,
  .upload-zone,
  .val-busca,
  .valor-destaque,
  .veredicto.coerente,
  .veredicto.incoerente,
  .veredicto.tensao,
  .versao-card,
  button.opc,
  button.opcao
){border-radius:14px !important}
body.impar-app :is(
  .btn-assinar-outline,
  .btn-back,
  .btn-comecar,
  .btn-copy,
  .btn-ghost,
  .btn-nav,
  .btn-next,
  .btn-novo,
  .btn-outline,
  .btn-prev,
  .btn-print,
  .btn-sec,
  .camera-fechar,
  .chip,
  .copy-btn,
  .dc-status,
  .dim-btn,
  .dim-status-badge,
  .emocao,
  .ent-emocao,
  .escala-btn,
  .foto-btn,
  .hdr-badge,
  .hero-badge,
  .imprimir,
  .ls-salvo,
  .mapa-tag,
  .opc-ck,
  .opcao-check,
  .opt-btn,
  .peca-tag,
  .perfil-tag,
  .ponto-status,
  .prop-tag,
  .ptag,
  .qualidade-tag,
  .res-badge,
  .result-tag,
  .roteiro-tag,
  .sc,
  .scale-btn,
  .score-tag,
  .sp-tag,
  .sug,
  .tag,
  .test-btn,
  .tool-badge,
  .trilha-badge,
  button.bnext,
  button.bprev,
  button.btn-add,
  button.btn-copiar,
  button.btn-gerar,
  button.btn-nova,
  button.btn-novo,
  button.btn-print,
  button.btn-sec,
  button.send-btn
){border-radius:999px !important}
body.impar-app .opcoes.chips button.opcao{border-radius:999px !important}