/* ============================================================ App Easy Smile — folha de estilo Laboratório 1: Novo caso / Alinhar a face (v1) ============================================================ */ /* PALETA DO DESIGN (08/set — "Referência Design" do Fábio): tons quentes neutros + dourado. Os nomes antigos (--bg, --panel…) apontam pra ela. */ :root{ --p-canvas:#e9e9e7; --p-surface:#fafaf8; --p-control:#f0f0ec; --p-text:#202322; --p-muted:#686e6b; --p-line:#dedfda; --p-gold:#896a31; --p-tint:#eee8db; --p-solid:#222724; --p-on:#fafbf8; --p-palco:#e9e9e7; --frame-vazio:#d3d7d4; --ref-bg:#fff; --welcome-p:#45564b; /* palco = fundo da página (design 'Alinhamento guiado', 08/set); a moldura 3:4 é o que se destaca */ --bg:var(--p-canvas); --stage:var(--p-canvas); --panel:var(--p-surface); --panel-2:var(--p-control); --ink:var(--p-text); --soft:var(--p-muted); --line:var(--p-line); --accent:var(--p-solid); --accent-ink:var(--p-on); --accent-soft:var(--p-tint); --gold:var(--p-gold); --cross:#e0447a; --shadow:0 3px 8px rgba(0,0,0,.04); --radius:12px; } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --p-canvas:#121615; --p-surface:#1b201e; --p-control:#272d29; --p-text:#eef0eb; --p-muted:#aab4ac; --p-line:#39423b; --p-gold:#d1b77f; --p-tint:#383426; --p-solid:#d1b77f; --p-on:#20271f; --p-palco:#121615; --frame-vazio:#252c28; --ref-bg:#151a16; --welcome-p:#c4cdc5; --shadow:0 3px 10px rgba(0,0,0,.4); } } :root[data-theme="dark"]{ --p-canvas:#121615; --p-surface:#1b201e; --p-control:#272d29; --p-text:#eef0eb; --p-muted:#aab4ac; --p-line:#39423b; --p-gold:#d1b77f; --p-tint:#383426; --p-solid:#d1b77f; --p-on:#20271f; --p-palco:#121615; --frame-vazio:#252c28; --ref-bg:#151a16; --welcome-p:#c4cdc5; --shadow:0 3px 10px rgba(0,0,0,.4); } :root[data-theme="light"]{ --p-canvas:#e9e9e7; --p-surface:#fafaf8; --p-control:#f0f0ec; --p-text:#202322; --p-muted:#686e6b; --p-line:#dedfda; --p-gold:#896a31; --p-tint:#eee8db; --p-solid:#222724; --p-on:#fafbf8; --p-palco:#e9e9e7; --frame-vazio:#d3d7d4; --ref-bg:#fff; --welcome-p:#45564b; --shadow:0 3px 8px rgba(0,0,0,.04); } *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} html,body{margin:0;height:100%} body{ background:var(--bg);color:var(--ink);overflow:hidden; font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif; -webkit-font-smoothing:antialiased; -webkit-user-select:none;user-select:none;-webkit-touch-callout:none; touch-action:manipulation; /* desliga o duplo-toque-pra-ampliar nativo do iPad */ } img,canvas,svg{-webkit-user-drag:none;-webkit-touch-callout:none} #app{display:flex;flex-direction:column;height:100dvh} [hidden]{display:none!important} /* ---------- topo (design): título · mapa das 3 etapas · logo ---------- */ .topbar{ display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px;flex:0 0 auto; min-height:68px;padding:8px 12px;padding-top:calc(8px + env(safe-area-inset-top)); /* topo na proporção do design (680 px → iPad 834): logo 170, mapa 52, título 16 (ele, 08/set) */ background:var(--p-surface);border-bottom:1px solid var(--p-line);z-index:20; } .topbar .esq{display:flex;align-items:center;gap:9px;min-width:0} .icon-btn.hamburger{width:48px;height:48px;background:none;border-color:transparent} .icon-btn.hamburger svg{width:24px;height:24px} .icon-btn{width:40px;height:40px;border-radius:11px;border:1px solid var(--p-line);background:var(--p-control);color:var(--p-text);font-size:17px;cursor:pointer;flex:0 0 auto;display:grid;place-items:center} .icon-btn:active{background:var(--p-tint)} .icon-btn svg{width:20px;height:20px} .topbar-title{font-weight:400;font-size:16px;color:var(--p-text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .topbar-title .lab-num{display:none} .step-map{display:flex;align-items:center;gap:7px;justify-self:center} .step-map button{width:52px;height:52px;border-radius:50%;border:0;background:transparent;color:var(--p-muted);display:grid;place-items:center;cursor:pointer;padding:0} /* ícones dele (círculo incluso): scan · máscara · sorriso (12/set) */ .step-map button svg{width:46px;height:46px} .step-map button[aria-current=step]{color:var(--p-gold)} .step-map button:disabled{opacity:.38;cursor:default} .step-map .connector{width:12px;height:1px;background:var(--p-line)} .dir{display:flex;align-items:center;gap:8px;justify-self:end;min-width:0} .map-logo img{width:170px;max-width:100%;height:auto;display:block} .map-logo .escuro{display:none} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .map-logo .claro{display:none} :root:not([data-theme="light"]) .map-logo .escuro{display:block} } :root[data-theme="dark"] .map-logo .claro{display:none} :root[data-theme="dark"] .map-logo .escuro{display:block} @media (max-width:520px){ .map-logo img{width:90px} .topbar-title{font-size:11px;white-space:normal;line-height:1.15} .topbar{gap:5px;padding:6px;min-height:60px} .topbar .esq{gap:2px} .icon-btn.hamburger{width:44px;height:44px} .step-map{gap:3px} .step-map button{width:44px;height:44px} .step-map button svg{width:22px;height:22px} .step-map .connector{width:6px} } @media (max-width:520px){ .corpo{grid-template-columns:78px minmax(0,1fr)} .rail button{min-height:66px;font-size:11px;gap:4px} .rail button svg{width:26px;height:26px} } /* ---------- corpo: trilho · palco · região de ferramentas ---------- */ .corpo{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:96px minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;background:var(--p-canvas)} /* trilho largo (ele: "menu tímido, pode aumentar bem") */ .rail{grid-row:1;display:flex;flex-direction:column;gap:8px;padding:10px 6px;overflow-y:auto;background:var(--p-canvas)} /* fundo do trilho = fundo geral, como antes (ele mandou voltar) */ .rail button{min-height:78px;border-radius:14px;border:1px solid transparent;background:transparent;color:var(--p-muted);font-size:12px;font-weight:600;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:8px 4px;cursor:pointer;line-height:1.1} .rail button svg{width:30px;height:30px;stroke-width:1.6} .rail button[aria-pressed=true]{background:var(--p-tint);border-color:var(--p-gold);color:var(--p-gold)} .rail button:disabled{opacity:.38;cursor:default} .rail:empty{display:none} .corpo.sem-trilho{grid-template-columns:minmax(0,1fr)} .corpo.sem-trilho .stage{grid-column:1} .stage{grid-row:1;grid-column:2} .tool-region{grid-row:2;grid-column:1 / -1;background:var(--p-surface);border-top:1px solid var(--p-line);display:flex;flex-direction:column;min-height:0;max-height:42dvh} .t-title{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:6px 12px;font-size:12px;color:var(--p-text);border-bottom:1px solid var(--p-line);flex:0 0 auto} .t-title #tTitle{margin-right:auto} .t-title .btn{padding:7px 12px;font-size:12px;flex:0 0 auto;min-height:34px} .t-title .btn.ghost{flex:0 0 auto} .t-corpo{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain} #app.recolhido .tool-region .t-corpo{display:none} #app.recolhido .tool-region{max-height:none} /* computador e iPad deitado: ferramentas à direita, altura inteira */ @media (min-aspect-ratio:1/1) and (min-width:900px){ .corpo{grid-template-columns:96px minmax(0,1fr) 340px;grid-template-rows:minmax(0,1fr)} .corpo.sem-trilho{grid-template-columns:minmax(0,1fr) 340px} .corpo.sem-trilho .stage{grid-column:1} .corpo.sem-trilho .tool-region{grid-column:2} .stage{grid-row:1} .tool-region{grid-row:1;grid-column:3;border-top:0;border-left:1px solid var(--p-line);max-height:none} #app.recolhido .corpo{grid-template-columns:96px minmax(0,1fr)} #app.recolhido .corpo.sem-trilho{grid-template-columns:minmax(0,1fr)} #app.recolhido .tool-region{display:none} } /* ---------- menu lateral ---------- */ .menu-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:29} /* CORTINA DE CARREGAMENTO (animação dele, 10/set): logo pulsando com órbitas douradas + o que está acontecendo. Mín. 0,6 s. */ .es-loading{--es-cycle:3.2s;position:fixed;inset:0;z-index:80;background:#080a0c;color:#d5bb76;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif} .es-loading .es-core{width:220px;height:220px;position:relative;display:grid;place-items:center;transform:scale(var(--es-k,2));transform-origin:center;margin:calc(110px * (var(--es-k,2) - 1)) 0} /* 2× no iPad/computador (ele, 10/set: 'mais imponente') */ .es-loading .es-halo{position:absolute;inset:20px;border-radius:50%;background:radial-gradient(circle,#c8a24b18,transparent 68%);animation:es-breathe var(--es-cycle) ease-in-out infinite} .es-loading .es-logo{width:108px;height:108px;position:relative;animation:es-breathe var(--es-cycle) ease-in-out infinite} .es-loading .es-logo img{width:100%;height:100%;object-fit:contain;display:block} .es-loading .es-orbit{position:absolute;inset:12px;border:1px solid #c8a24b20;border-radius:50%;animation:es-spin calc(var(--es-cycle)*2) linear infinite} .es-loading .es-orbit:before{content:'';position:absolute;inset:-1px;border-radius:50%;border:1px solid transparent;border-top-color:#cba952b0;transform:rotate(30deg)} .es-loading .es-orbit:after{content:'';width:5px;height:5px;background:#f0d48a;box-shadow:0 0 12px #d7b664;position:absolute;left:50%;top:-3px;border-radius:50%} .es-loading .es-orbit.es-second{inset:0;border-color:#c8a24b0b;animation-direction:reverse;animation-duration:calc(var(--es-cycle)*3)} .es-loading .es-second:before{border-top-color:#cba95235} .es-loading .es-second:after{width:3px;height:3px;background:#cba95280;box-shadow:none} .es-loading .es-links{position:absolute;inset:0;animation:es-breathe var(--es-cycle) ease-in-out infinite} .es-loading .es-line{position:absolute;top:50%;height:1px;width:26px;background:linear-gradient(90deg,transparent,#c8a24b70);transform-origin:110px center;left:0} .es-loading .es-line:after{content:'';position:absolute;right:0;top:-2px;width:4px;height:4px;border-radius:50%;background:#c8a24b} .es-loading .es-line:nth-child(2){transform:rotate(120deg)} .es-loading .es-line:nth-child(3){transform:rotate(240deg)} .es-loading .es-name{font-size:calc(15px * var(--es-k,2));letter-spacing:calc(5px * var(--es-k,2));margin-top:30px;padding-left:5px;color:#e2c785} .es-loading .es-status{font-size:calc(12px * var(--es-k,2));letter-spacing:1.5px;color:#c9c1ad;margin-top:16px;display:flex;gap:10px;align-items:center} .es-loading .es-dots{display:flex;gap:3px} .es-loading .es-dots i{width:calc(3px * var(--es-k,2));height:calc(3px * var(--es-k,2));border-radius:50%;background:#c8a24b;animation:es-breathe 1.2s ease-in-out infinite} .es-loading .es-dots i:nth-child(2){animation-delay:.2s}.es-loading .es-dots i:nth-child(3){animation-delay:.4s} @media (max-width:520px){ .es-loading{--es-k:1.2} } @keyframes es-spin{to{transform:rotate(360deg)}} @keyframes es-breathe{0%,100%{opacity:.55}50%{opacity:1}} @media(prefers-reduced-motion:reduce){.es-loading *,.es-loading *:after{animation:none!important}} /* caixa de confirmação FLUTUANTE, no meio da tela (ele, 09/set: a caixa no rodapé passava despercebida) */ .modal-fundo{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.55);display:grid;place-items:center;padding:20px;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)} .modal{width:min(100%,440px);background:var(--p-surface);color:var(--p-text);border:1px solid var(--p-gold);border-radius:18px;padding:22px 20px 18px;box-shadow:0 18px 50px rgba(0,0,0,.45);font-size:15px;line-height:1.5} .modal p{margin:0 0 18px} .modal .row{display:flex;gap:10px} .modal .row .btn{flex:1;min-height:50px;font-size:14px} .menu{ position:fixed;top:0;left:0;bottom:0;width:min(84vw,340px);z-index:30; background:var(--panel);border-right:1px solid var(--line); padding:calc(16px + env(safe-area-inset-top)) 14px 16px;display:flex;flex-direction:column;gap:4px; box-shadow:var(--shadow); } .menu-head{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);font-weight:700;padding:4px 8px 10px} .lab-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px} .lab{ display:flex;align-items:center;gap:11px;padding:12px 12px;border-radius:12px; font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;border:1px solid transparent; } .lab .n{width:26px;height:26px;border-radius:8px;background:var(--panel-2);color:var(--soft);display:grid;place-items:center;font-size:13px;flex:0 0 auto} .lab.active{background:var(--accent-soft);border-color:var(--accent)} .lab.active .n{background:var(--accent);color:var(--accent-ink)} .lab.locked{color:var(--soft);cursor:default} .lab.lab-tool em{margin-left:auto;font-style:normal;font-size:11px;color:var(--soft);background:var(--panel-2);padding:3px 8px;border-radius:999px} /* modo AJUSTE FINO no Lab 3: só o painel fino aparece (a foto fica grande) */ #controls3.fino-on > *:not(#dtFinoWrap):not(.sheet-grip){display:none} /* modo PINTAR (07/set): só a gaveta da pintura aparece */ #dtPintarWrap{display:flex;flex-direction:column;gap:11px} /* modo VISUALIZAÇÃO (logo após gerar): só o essencial embaixo — o rosto inteiro fica à vista */ #dtView{display:flex;flex-direction:column;gap:11px} .lab.locked em{margin-left:auto;font-style:normal;font-size:11px;color:var(--soft);background:var(--panel-2);padding:3px 8px;border-radius:999px} .menu-foot{margin-top:auto;font-size:12px;color:var(--soft);line-height:1.45;padding:10px 8px 0;border-top:1px solid var(--line)} /* ---------- palco ---------- */ .stage.mao{cursor:grab} .stage{position:relative;min-width:0;min-height:0;overflow:hidden;background:var(--p-palco);display:grid;place-items:center;padding:6px 10px} .frame{ position:absolute;border-radius:0;overflow:hidden;box-shadow:none; touch-action:none;background:#cbd0d2;transform-origin:center center; /* área de trabalho cinza-clara (design) */ } .frame.vazio{background:var(--frame-vazio)!important} .frame canvas{position:absolute;inset:0;width:100%;height:100%;display:block} #glcanvas{z-index:4;pointer-events:none} #uicanvas{z-index:6;pointer-events:none} #pintcanvas{z-index:3;pointer-events:none} /* 🖌 camada de pintura: entre a foto (#canvas) e os dentes (#glcanvas) */ #labiocanvas{z-index:5;pointer-events:none} /* 👄 FOTO DE CIMA com a boca furada (ideia dele, 12/set): esconde a pintura E O DENTE que passam do lábio (13/set: passou a ficar ACIMA do #glcanvas, e o dente deixou de ter recorte próprio) */ #escrcanvas{z-index:7;pointer-events:none} /* ✍️ anotações: por cima de tudo, inclusive dos dentes */ /* gaveta Pintar: sem caneta sólida; gaveta Escrever: sem pincel, sem conta-gotas, sem intensidade */ #dtPintarWrap.modo-pintura [data-caneta="solida"],#dtPintarWrap.modo-pintura #dtPintCorBtn{display:none} /* Pintar: Pincel · Conta-gotas (com a cor dentro) · Borracha (ele, 11/set) */ #dtPintarWrap.modo-escrita [data-caneta="aero"],#dtPintarWrap.modo-escrita [data-caneta="gotas"],#dtPintarWrap.modo-escrita #dtPintForcaRow{display:none} /* Escrever: Caneta · Cor · Borracha */ #dtPintarWrap.modo-escrita .pint-reguas{grid-template-columns:1fr} .pint-canetas .btn{min-height:48px;font-size:12px;gap:8px} .cor-sw{display:inline-block;width:20px;height:20px;border-radius:6px;border:1px solid rgba(0,0,0,.25);background:#c9857a;flex:0 0 auto} .cor-tx{font-size:11px;color:var(--p-muted);font-variant-numeric:tabular-nums} .pint-reguas .rline{min-height:52px} .pint-reguas .rline span{font-size:12px} .pint-acoes .btn{min-height:44px} /* (13/set, ele: 'conta-gotas do lado do botão limpar, na base dessa tela que abre') — última fileira: Desfazer · Limpar · Conta-gotas. Os três dividem a largura e não quebram de linha; o código da cor sai daqui (o quadradinho já mostra a cor e o espaço é curto). */ .pint-acoes{flex-wrap:nowrap} .pint-acoes .btn{flex:1 1 0;min-width:0} .pint-acoes .gotas-acao{font-size:12px;gap:8px;justify-content:center} .pint-acoes .gotas-acao .cor-tx{display:none} #dtPintarWrap.modo-escrita .gotas-acao{display:none} /* Escrever não tem conta-gotas */ /* cruz (design 'Alinhamento guiado'): linhas finas douradas; alça ⇅ na ponta DIREITA da horizontal, alça ⇆ no TOPO da vertical */ .cross{position:absolute;pointer-events:none;color:#d1b77f;z-index:2;transform-origin:center center} /* por cima dos dentes (ele, 11/set: a linha passava por trás) */ /* (13/set) mora no palco, não no frame: caixa e transform copiados da moldura por posCruzMoldura — fica acima da foto de cima do lábio (z1) e abaixo do overlay (z9) */ .cross-h,.cross-v{position:absolute;background:currentColor;pointer-events:auto} .cross-h{left:0;right:0;height:calc(1px * var(--ct,1));top:50%;cursor:ns-resize} /* (27/set) --ct = espessura proporcional ao zoom (a cruz mora dentro do transform e engrossava ao ampliar, como o pontilhado antes de 21/set) */ .cross-v{top:0;bottom:0;width:calc(1px * var(--ct,1));left:50%;cursor:ew-resize} .cross-h::before{content:"";position:absolute;inset:-14px 0} .cross-v::before{content:"";position:absolute;inset:0 -14px} .cross-grip{ position:absolute;width:42px;height:42px;border-radius:50%;pointer-events:auto; background:#1e251f;border:1px solid #d1b77f;box-shadow:0 0 0 4px rgba(20,27,22,.25); transform:translate(-50%,-50%) scale(var(--cz,1));cursor:grab;touch-action:none; display:grid;place-items:center;color:#d1b77f; } .cross-grip:active{cursor:grabbing} /* (13/set) alças afastadas da borda — em tela cheia a da direita passava por cima dos ícones flutuantes — e destaque ao pegar, pra aparecer na gravação */ #gripLeft{left:auto;right:clamp(76px,9%,112px);transform:translate(50%,-50%) scale(var(--cz,1))} #gripRight{left:clamp(76px,9%,112px)} #gripTop{top:64px} #gripBottom{top:auto;bottom:64px;transform:translate(-50%,50%) scale(var(--cz,1))} #gripBottom.pegando{transform:translate(-50%,50%) scale(calc(var(--cz,1) * 1.3))} .cross-grip{transition:transform .18s cubic-bezier(.3,.8,.35,1.2),box-shadow .18s ease,background .18s ease,color .18s ease} .cross.semtrans .cross-grip{transition:none} /* durante o zoom a bolinha acompanha na hora, sem arrastar atrás do gesto */ .cross-grip.pegando{background:#d1b77f;color:#141b16;transform:translate(-50%,-50%) scale(calc(var(--cz,1) * 1.3));box-shadow:0 0 0 8px rgba(209,183,127,.22),0 0 22px rgba(209,183,127,.85)} #gripLeft.pegando{transform:translate(50%,-50%) scale(calc(var(--cz,1) * 1.3))} .cross.arr-h .cross-h{height:calc(2px * var(--ct,1));box-shadow:0 0 10px rgba(209,183,127,.9)} /* (27/set) acende SÓ a linha que está sendo arrastada, com a mesma regra de espessura */ .cross.arr-v .cross-v{width:calc(2px * var(--ct,1));box-shadow:0 0 10px rgba(209,183,127,.9)} .cross-grip svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;display:block} /* estado vazio: dentro da moldura 3:4 (design) — em cima "importar", embaixo a galeria de casos de treinamento (ele, 09/set) */ .empty{position:absolute;inset:0;z-index:15;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:16px 24px;gap:16px;overflow-y:auto;justify-content:safe center} .empty h2{margin:0;font-size:26px;line-height:1.3;font-weight:500;color:var(--p-text)} .empty p{margin:0;font-size:17px;line-height:1.6;color:var(--welcome-p)} .empty .btn{font-size:18px;font-weight:600;min-height:62px;padding:16px 44px;border-radius:14px;box-shadow:0 6px 18px rgba(0,0,0,.25)} /* destaque (ele, 09/set) */ .empty .ou{display:flex;align-items:center;gap:12px;width:min(100%,420px);margin-top:14px;font-size:12px;letter-spacing:.4px;color:var(--p-muted);text-transform:uppercase} .empty .ou::before,.empty .ou::after{content:"";flex:1;height:1px;background:var(--p-line)} .treinos{display:grid;grid-template-columns:repeat(3,auto);justify-content:center;gap:14px 16px} /* 3 em cima, 3 embaixo; sem rótulo — a pessoa vai pela imagem (ele, 09/set) */ .treino{display:flex;flex-direction:column;align-items:center;gap:8px;background:none;border:0;padding:0;cursor:pointer;color:var(--p-muted);font:inherit} .treino img{width:168px;aspect-ratio:3/4;object-fit:cover;border:1px solid var(--p-gold);border-radius:9px;padding:4px;background:var(--ref-bg);display:block} .treino small{font-size:12px;letter-spacing:.5px} .treino:active img{background:var(--p-tint)} @media (max-width:480px){ .empty{gap:14px} .empty h2{font-size:19px} .empty p{font-size:13px;max-width:270px} .empty .btn{font-size:14px;min-height:48px;padding:12px 26px} .treino img{width:96px} .treinos{gap:8px} } /* ---------- LABS GUIADOS (design "iPad em pé"): Lab 1 = Alinhamento guiado (08/set) · Lab 2 = Máscara do sorriso (09/set): trilha · palco · dica · gaveta · rodapé ---------- */ #app.guiado #rail,#app.guiado #tools,#app.guiado .dir .icon-btn{display:none!important} /* sem trilho lateral; tela cheia e tema ficam no rodapé */ #app.guiado .corpo{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto} #app.guiado .trilha{grid-row:1;grid-column:1} #app.guiado .stage{grid-row:2;grid-column:1} #app.guiado .labui{grid-row:3;grid-column:1;max-height:50dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain} .slider .step.seta{font-size:18px;line-height:1} .trilha{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;padding:6px 12px;background:var(--p-surface)} .trilha button{display:flex;align-items:center;justify-content:center;gap:7px;min-height:42px;font:inherit;font-size:12px;border:1px solid var(--p-line);border-radius:10px;background:none;color:var(--p-text);padding:8px 12px;cursor:pointer} .trilha button:disabled{opacity:.38;cursor:default} .trilha button.active{color:var(--p-gold);border-color:var(--p-gold);background:var(--p-tint)} .trilha .num{width:21px;height:21px;border:1px solid currentColor;border-radius:50%;display:grid;place-items:center;font-size:11px;flex:none} /* trilha de 5 passos (Lab 2): rótulo em duas linhas, alinhado à esquerda do número */ .trilha.cinco{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;padding:6px 10px} .trilha.cinco button{gap:6px;min-height:54px;padding:5px 3px;font-size:11px;line-height:1.25} .trilha.cinco .num{width:20px;height:20px} /* Lab 3 = design "iPad em pé — Montar os dentes" (09/set): trilha de 7 */ .trilha.seis{grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;padding:6px 10px} .trilha.seis button{flex-direction:column;font-size:10.5px;gap:4px;padding:5px 2px;min-height:54px;line-height:1.2} .trilha.seis .num{width:20px;height:20px} .trilha.sete{grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;padding:6px 10px} .trilha.sete button{flex-direction:column;font-size:10px;gap:4px;padding:5px 2px;min-height:54px;line-height:1.2} .trilha.sete .num{width:20px;height:20px} .view-modes.com-legenda{flex-wrap:wrap;align-items:center;gap:4px;padding:7px 12px;border-bottom:1px solid var(--p-line)} .view-caption{flex-basis:100%;font-size:10px;letter-spacing:.8px;text-transform:uppercase;color:var(--p-muted);padding-bottom:3px} .mask-style-panel{padding:8px 12px;background:var(--p-surface);display:grid;gap:7px;font-size:12px;color:var(--p-text)} .mask-style-panel .row>span{flex:0 0 70px} .two{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px} .rline{display:grid;grid-template-columns:1fr;gap:5px;min-height:40px;align-items:center;font-size:11px;color:var(--p-text)} .rline span{font-size:11px} /* PAINEL DE COR (12/set, religado por cima do marco 04 — foto dele): duas colunas, nomes nas pontas (Escurecer ← → Clarear · Frio ← → Quente), Equilibrar + Zerar */ .cor-painel .rline{min-height:64px} .escalas .btn{min-height:46px;font-size:13px;font-weight:600} #app .controls[data-modo="hz"] [data-modo~="hz"]{flex-direction:column} #app .controls[data-modo="hz"] .position-grid{display:grid} .guia-acoes{display:grid;grid-template-columns:1fr 1fr;gap:10px} .guia-acoes .btn{min-height:46px;display:inline-flex;align-items:center;justify-content:center;gap:8px} .guia-acoes .btn svg{width:20px;height:20px;flex:0 0 auto} .guia-acoes #mkRefazerIA{grid-column:1/-1} .guia-ajustando{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .guia-ajustando .nota{flex:1 1 220px;font-size:13px;color:var(--p-muted)} .guia-ajustando .btn{flex:0 0 auto;min-height:46px;padding:8px 18px} .escalas .btn:disabled{opacity:.3} .rline .pontas{display:flex;justify-content:space-between} .equilibrar{min-height:48px;font-size:13px} .cor-acoes{margin-top:4px} .cor-acoes #dtEquilibrar{flex:2} .cor-acoes #dtCorZerar{flex:1} .rline input[type=range]{min-width:0;width:100%} .labui .painel h3{margin:5px 0;font-size:12px;font-weight:500;color:var(--p-text)} .labui .painel section{padding:7px 0;border-bottom:1px solid var(--p-line);display:flex;flex-direction:column;gap:7px} .labui .painel section:last-child{border-bottom:0} .generate-main{width:100%;min-height:60px;font-size:16px;font-weight:600} /* AÇÃO PRINCIPAL DO PAINEL (ele, 13/set): mesmo corpo do Antes × Design — alto, largo, centralizado, com cara de botão em vez de faixa. Vale para Importar a foto, Ler a face com IA, Concluir e salvar posição final, Montar máscara com IA e Gerar o sorriso com IA. */ .btn.acao-principal{width:min(100%,340px);align-self:center;justify-self:center;min-width:0;min-height:68px;padding:0 20px;margin:2px auto 6px;display:flex;font-size:17px;font-weight:600;border-radius:14px;box-shadow:0 8px 22px rgba(0,0,0,.3)} .edit-entry{width:100%;min-height:48px;font-size:14px} /* ação principal do Apresentar (ele, 11/set) — 13/set: mais estreito, mais alto e centralizado, com cara de botão em vez de faixa */ .btn.big-compare{font-size:17px;font-weight:600;min-height:68px;width:min(100%,340px);align-self:center;justify-self:center;min-width:0;padding:0 20px;margin:2px auto 6px;display:flex;border-radius:14px;box-shadow:0 8px 22px rgba(0,0,0,.3)} #app .controls .apresentar[data-modo]{gap:14px;padding-top:4px} .apresentar>*+*{margin-top:6px} /* ritmo vertical: 8 px do grid + 6 = 14 px entre as linhas */ .apresentar-titulo{font-size:12px;font-weight:500;color:var(--p-text);text-align:center;margin-top:12px!important} .apresentar-linha .btn[aria-pressed=false]{color:var(--p-muted)} /* desligado = cinza, sem risco (ele, 11/set) */ .apresentar-linha .btn{min-height:48px;font-size:12px} .apresentar-alpha{min-height:52px} .apresentar-alpha span{font-size:12px} .sair-estilo{width:100%;min-height:56px;font-size:15px;font-weight:600;margin-top:6px;box-shadow:0 6px 18px rgba(0,0,0,.25)} /* porta de saída do Estilo da máscara: dourado, em destaque (ele, 10/set) */ /* seleção dos dentes (FDI 16…26) antes de gerar (ele, 09/set): toca pra marcar/desmarcar */ .sel-dentes{display:flex;flex-direction:column;gap:12px;align-items:center;padding:6px 0 4px} .sel-dentes .nota{font-size:12px;font-weight:500;color:var(--p-text)} .lab3ui .gaveta{padding-top:12px} .lab3ui .controls{gap:12px} /* ritmo vertical constante (ele, 09/set: 'menu embolado') */ .fdi{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:4px;width:100%} .fdi button{min-height:42px;padding:0;font:inherit;font-size:12px;font-weight:500;border:1px solid var(--p-line);border-radius:9px;background:var(--p-control);color:var(--p-muted);cursor:pointer} .fdi button[aria-pressed=true]{color:var(--p-gold);border-color:var(--p-gold);background:var(--p-tint)} .fdi button[data-fdi="11"]{margin-right:8px} .sel-dentes #dtTodos{min-width:200px;flex:0 0 auto} /* (13/set) o Gerar o sorriso fica centralizado e o Desmarcar todos vai pro lado, como o Concluir/Forma original da edicao: ganha altura */ .gerar-fim{display:grid;grid-template-columns:minmax(78px,1fr) auto minmax(78px,1fr);align-items:center;gap:12px} .gerar-fim .acao-principal{grid-column:2;margin:2px 0 0} .gerar-fim #dtTodos{grid-column:3;justify-self:end;min-width:0;padding:10px 14px} @media (max-width:480px){ .fdi{gap:2px} .fdi button{font-size:10px;min-height:36px} } .lab3ui .nota{font-size:12px;color:var(--p-muted)} /* Etapa 4 Editar (ele, 10/set): entrada só com Posição · Contornos · Modelagem 2D; odontograma pra selecionar; área fixa de visualização em 2 linhas acima do rodapé */ .edicao-entrada .btn{min-height:52px;font-size:13px} .det-modos .btn{min-height:56px;font-size:13px;font-weight:600;flex-direction:column;gap:2px;line-height:1.15} .det-modos .btn small{font-size:10px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;opacity:.75} .ed-sub{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--p-muted);margin:14px 0 4px} .ed-fim-so{justify-content:center;margin-top:18px} .edicao-opcoes .btn{font-size:11px;padding:8px 6px;min-height:44px} .sel-dentes.odonto{gap:8px;padding:0} .fdi button:disabled{opacity:.3;cursor:default} .vis4{background:var(--p-surface);border-top:1px solid var(--p-line);padding:8px 12px 10px;display:grid;gap:7px} /* ritmo vertical igual entre título → botões → título → botões (ele, 11/set) */ .vis4-linha{display:grid;grid-template-columns:1fr 1fr;gap:14px} .vis4-titulos span{font-size:10px;letter-spacing:.8px;text-transform:uppercase;color:var(--p-muted)} .vis4-grupo{display:flex;gap:5px} .vis4 button{flex:1 1 0;min-width:0;font:inherit;font-size:11px;min-height:40px;border:1px solid var(--p-line);border-radius:10px;background:var(--p-control);color:var(--p-text);padding:6px 4px;cursor:pointer} .vis4 button[aria-pressed=true],.vis4 button.on{color:var(--p-gold);border-color:var(--p-gold);background:var(--p-tint)} .vis4-forma{display:grid;grid-template-columns:1fr 1fr 1fr minmax(0,1.6fr);gap:5px;align-items:center} /* 3 formas do mesmo tamanho dos outros botões + transparência ao lado */ .vis4-forma button{min-height:40px;padding:6px 4px} .vis4-alpha{display:flex;align-items:center;gap:8px;min-width:0;font-size:10px;letter-spacing:.8px;text-transform:uppercase;color:var(--p-muted);padding-left:10px} .vis4-alpha input{flex:1 1 auto;min-width:60px} .lab3ui .rline[hidden]{display:none} .lab3ui .dt-off{opacity:.4;pointer-events:none} .lab3ui #dtPintarWrap .ctl-row{display:flex;align-items:center;gap:8px} .lab3ui #dtPintarWrap .ctl-label{flex:0 0 70px;font-size:11px} .lab3ui #dtPintarWrap .ctl-val{flex:0 0 52px;text-align:right;font-size:11px} .lab3ui #dtPintarWrap .ctl-seg{gap:6px} .lab3ui #dtPintarWrap .btn{flex:1 1 auto} .lab3ui .gaveta-titulo .btn{min-height:36px;font-size:11px} @media (max-width:480px){ .trilha.seis{grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;padding:6px 10px} .trilha.seis button{flex-direction:column;font-size:10.5px;gap:4px;padding:5px 2px;min-height:54px;line-height:1.2} .trilha.seis .num{width:20px;height:20px} .trilha.sete{gap:2px} .trilha.sete button{font-size:9px} .two{gap:6px 10px} } .trilha .step-label{text-align:left} /* modos de visualização (só no passo Estilos): máscara completa · só guia · só curvas */ .view-modes{display:flex;gap:5px;padding:6px 12px;background:var(--p-surface)} .view-modes button{flex:1;font:inherit;font-size:11px;min-height:44px;border:1px solid var(--p-line);border-radius:10px;background:var(--p-control);color:var(--p-text);padding:8px 6px;cursor:pointer} .view-modes button[aria-pressed=true],.labui .btn.on,.labui .btn[aria-pressed=true]{color:var(--p-gold);border-color:var(--p-gold);background:var(--p-tint)} .labui{display:flex;flex-direction:column;background:var(--p-surface)} #lab1ui.so-rodape .dica,#lab1ui.so-rodape .gaveta,#lab1ui.so-rodape .dialogo{display:none!important} /* tela inicial (sem foto): só o rodapé com tela cheia e tema, como no design */ #lab1ui.so-rodape .rodape{border-top:0} /* Lab 2: curva ligada/desligada (mesmo interruptor da Cruz), grupo de estilos e cor */ .use-curve{display:flex;align-items:center;gap:7px;min-height:36px;font-size:12px;color:var(--p-text);cursor:pointer} .use-curve span{margin-left:auto;color:var(--p-muted)} .use-curve input{appearance:none;-webkit-appearance:none;width:30px;height:18px;border-radius:10px;background:var(--p-line);position:relative;cursor:pointer;margin:0;border:0;flex:none} .use-curve input::before{content:'';position:absolute;width:12px;height:12px;border-radius:50%;left:3px;top:3px;background:#afb6af;transition:left .15s} .use-curve input:checked{background:var(--p-gold)} .use-curve input:checked::before{left:15px;background:#20271f} #mkCurvaCtl,#mkBarras{display:flex;flex-direction:column;gap:7px} .lab2ui .cor-row{gap:7px} .lab2ui .cor-label{display:flex;align-items:center;gap:8px;font-size:12px;flex:1} .lab2ui input[type=color]{width:40px;height:32px;background:var(--p-control);border:1px solid var(--p-line);border-radius:8px;padding:2px;cursor:pointer;flex:none} .style-group{display:grid;grid-template-columns:125px minmax(0,1fr) 85px 65px;gap:7px;align-items:center;font-size:12px;color:var(--p-text)} .style-group .btn{min-width:0;padding:8px 6px} .lab2ui .corGrid.tres{display:grid;grid-template-columns:repeat(3,minmax(0,max-content));justify-content:center;gap:18px clamp(12px,4%,30px);align-items:center} /* as tres colunas centralizadas na tela, com a mesma sobra dos dois lados e o mesmo vao entre elas; encolhem se o painel apertar (ele, 13/set) */ /* as tres colunas centralizadas na tela: mesma sobra dos dois lados (ele, 13/set) */ /* respiro maior entre as duas linhas (ele, 13/set) */ .lab2ui .corGrid.tres .corCol3{grid-column:3;grid-row:1/3;justify-self:start;width:fit-content;display:flex;flex-direction:column;align-items:center;justify-content:start;gap:18px} /* o bloco comeca no inicio da coluna, como os outros itens; so o botao centraliza sob o item */ /* o Cores padrao centraliza no item, nao na coluna (ele, 13/set) */ .lab2ui .corGrid.tres #mkCorReset{min-height:44px;padding:10px 18px;white-space:nowrap} /* 3 por linha: verticais · média · cervicais / incisal · posteriores (ele, 09/set) */ .lab2ui .corGrid.tres .corItem{flex:none} .lab2ui .row.centro{justify-content:center;gap:12px} .lab2ui .row.centro .btn{flex:0 0 auto;min-width:180px} .lab2ui .cor-row .cor-label{display:inline-flex;align-items:center;gap:10px;cursor:pointer} .lab2ui .cor-row .cor-label input[type=color]{width:36px;height:28px;border:1px solid var(--p-line);border-radius:8px;padding:2px;background:var(--p-control);cursor:pointer} .position-grid .slider output[hidden]{display:none} .position-grid .slider:has(output[hidden]) label{grid-column:1/5} .rodape .voltar{grid-column:1;justify-self:start;flex:0 0 auto;gap:6px} /* botão de verdade, como Trocar foto */ .rodape .voltar svg{width:18px;height:18px} .position-grid .celula-btn{display:flex;align-items:end} .position-grid .celula-btn .btn{width:100%;min-height:36px;gap:8px} .position-grid .celula-btn .btn svg{width:18px;height:18px} .rodape #mkMain{grid-column:3;grid-row:1;justify-self:end} .dica{display:none!important} /* a faixa de dica saiu (ele, 12/set): a dica vira o ícone Lâmpada na coluna flutuante; os spans #dicaTxt/#dica2Txt/#dica3Txt continuam recebendo o texto */ .dica>svg{width:16px;height:16px;flex-shrink:0;color:var(--p-gold)} .dica>span{flex:1;min-width:0} .cruz-toggle{display:flex;align-items:center;gap:6px;min-height:44px;white-space:nowrap;color:var(--p-text);padding-left:8px;border-left:1px solid var(--p-line);font-size:11px;cursor:pointer} .cruz-toggle input{appearance:none;-webkit-appearance:none;width:30px;height:18px;border-radius:10px;background:var(--p-line);position:relative;cursor:pointer;margin:0;border:0} .cruz-toggle input::before{content:'';position:absolute;width:12px;height:12px;border-radius:50%;left:3px;top:3px;background:#afb6af;transition:left .15s} .cruz-toggle input:checked{background:var(--p-gold)} .cruz-toggle input:checked::before{left:15px;background:#20271f} .gaveta{background:var(--p-surface);padding:0 12px 7px} .gaveta-titulo{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;min-height:37px;color:var(--p-text)} /* TÍTULO DO PAINEL (entrega do design, 13/set): 18 px seminegrito, barrinha dourada de 3×18 à esquerda, 8 px até o texto, sem caixa nem sombra. A cor vem do tema (no escuro é o #eef0eb do app, o mesmo tom do #F2F1EC pedido) pra não sumir no tema claro. Quebra linha sem travar altura. */ .gaveta-titulo.titulo-painel{justify-content:flex-start;gap:8px;min-height:0;padding:8px 0 0;margin-bottom:14px;font-size:18px;font-weight:400;line-height:1.25;color:var(--p-text)} /* sem seminegrito e com respiro padrao de 14 px ate a primeira estrutura (ele, 13/set) */ .gaveta-titulo.titulo-painel::before{content:'';flex:0 0 3px;width:3px;height:18px;border-radius:2px;background:var(--p-gold);align-self:flex-start;margin-top:3px} .gaveta-titulo.titulo-painel .btn{margin-left:auto} .gaveta-titulo .btn{min-height:36px;font-size:12px;flex:0 0 auto;padding:6px 12px} .labui .controls{display:grid;gap:7px;padding:0 0 8px;font-size:12px;max-height:none;background:none} /* (ele, 13/set) respiro padrao acima da linha do rodape em todas as telas */ .position-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px 18px} .slider{display:grid;grid-template-columns:32px minmax(0,1fr) 32px 36px;align-items:center;gap:5px} .slider label{grid-column:1/4;font-size:11px;color:var(--p-text)} .slider output{grid-column:4;grid-row:1;font-size:11px;text-align:right;color:var(--p-muted);font-variant-numeric:tabular-nums} .slider .step{width:auto;height:36px;min-height:36px;padding:0;display:grid;place-items:center;font-size:15px} /* (ele, 13/set) o nome do ajuste ja esta no botao de cima e o numero aparece na lupa da barra: a linha fica so com − barra + , centralizada e larga */ .ajuste-slider{grid-template-columns:44px minmax(0,1fr) 44px;gap:10px} /* (ele, 13/set) barra larga como as da Posicao inicial, com o Restaurar ajustes do lado, em vez de uma barrinha apertada e uma faixa embaixo */ .ajuste-linha{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px;margin-top:4px} .ajuste-linha #ajReset{min-height:44px;padding:10px 18px;white-space:nowrap;flex:0 0 auto} .ajuste-slider label,.ajuste-slider output{display:none} .ajuste-slider .step{height:44px;min-height:44px} .adjust-select{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:12px} /* caixa de seleção centralizada, título em cima, seta bem visível (ele, 09/set) */ .adjust-select label{font-size:12px;color:var(--p-muted)} .labui select{-webkit-appearance:none;appearance:none;width:min(100%,300px);font:inherit;font-size:14px;font-weight:500;min-height:52px;border:1px solid var(--p-gold);border-radius:12px;background-color:var(--p-control);color:var(--p-text);padding:8px 52px 8px 18px;text-align:center;text-align-last:center;cursor:pointer; background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 14px center;background-size:24px 24px} .ia-antes,.ia-depois,.ia-pontos{gap:10px} .ia-depois .nota{font-size:12px;color:var(--p-text)} .separador{height:1px;background:var(--p-line);margin:4px 0} .ia-pontos span{font-size:12px;color:var(--p-text)} .ia-antes .nota{font-size:12px;color:var(--p-text)} .alignment-options{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:6px} .alignment-options .btn{font-size:11px;padding:6px;min-width:0} .labui .ai-line.on{color:var(--p-gold);border-color:var(--p-gold);background:var(--p-tint)} .labui .row{display:flex;gap:7px;align-items:center;flex-wrap:wrap} .labui .row>*{flex:1} .rodape{container-type:inline-size;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px;padding:6px 12px;background:var(--p-surface);border-top:1px solid var(--p-line)} .rodape .trocar{grid-column:1;justify-self:start;flex:0 0 auto;gap:6px} .rodape .trocar svg{width:18px;height:18px} /* (13/set) o ícone de tela cheia saiu do rodapé — quem faz esse papel é o botão do canto da foto. O ícone do tema fica no centro exato do aplicativo: o "Salvar e sair" sai do fluxo e encosta à esquerda dele. */ .rodape .view-actions{grid-column:2;grid-row:1;justify-self:center;position:relative;display:flex;align-items:center;gap:4px} /* (13/set) o Salvar e sair saiu do rodape: virou a portinha no canto da area de trabalho. Sobra so o tema, maior e no centro. */ .rodape .view-actions .icon-btn{width:50px;height:50px;background:transparent;border-color:transparent;color:var(--p-muted)} /* a CAIXA volta a 50 pra nao levantar a linha do rodape; quem cresceu foi o desenho (ele, 13/set) */ .rodape .view-actions .icon-btn svg{width:30px;height:30px} .rodape #mainBtn,.rodape #dtMain{grid-column:3;grid-row:1;justify-self:end} /* (ele, 13/set) o dtMain nao tinha essa regra e esticava na celula: ficava muito mais largo que o Montar os dentes do Lab 2 */ .montar-ia{display:flex;justify-content:center;padding:18px 12px 14px;background:var(--p-surface)} /* ação principal do Lab 2 sem máscara: em destaque, centralizada acima do rodapé (ele, 09/set) */ .montar-ia .btn{font-size:18px;font-weight:600;min-height:62px;padding:16px 44px;border-radius:14px;box-shadow:0 6px 18px rgba(0,0,0,.25)} .dialogo{padding:16px 12px;background:var(--p-surface);border-top:1px solid var(--p-line);font-size:13px} .dialogo p{margin:0 0 10px;line-height:1.5} @media (max-width:480px){ .trilha{gap:4px;padding:6px} .trilha button{font-size:10px;padding:6px 3px} .trilha.cinco{gap:3px;padding:6px} .trilha.cinco button{flex-direction:column;gap:4px;min-height:70px;font-size:11px} .trilha .step-label{text-align:center} .style-group{grid-template-columns:1fr 1fr} .position-grid{gap:6px 9px} .position-grid .slider{grid-template-columns:30px minmax(0,1fr) 30px 28px;gap:3px} .ajuste-slider{grid-template-columns:58px 36px minmax(0,1fr) 36px 34px;gap:4px} .alignment-options{gap:4px} .rodape{gap:4px;padding:6px 8px} .rodape #mainBtn,.rodape #mkMain{padding:8px;font-size:11px} .rodape .trocar,.rodape .voltar{font-size:11px} .rodape .view-actions{gap:0} } @media (min-aspect-ratio:1/1) and (min-width:900px){ /* EDITOR DEITADO (iPad deitado e computador) — guia do GPT de 26/set: Referência Design/Editor - iPad deitado/Pedido 2026-09-26/. Trilha e rodapé na largura toda; foto à esquerda; painel de 448 px à direita (400 abaixo de 1200). Nada aqui pega o iPad em pé (1032 × 1376): a régua referencia-telas/ tem que continuar "telas iguais". */ #app.guiado .corpo{position:relative;grid-template-columns:minmax(0,1fr) 448px;grid-template-rows:auto minmax(0,1fr) 68px} /* a trilha tem 64 px; escondida (edição dos dentes) a linha some */ #app.guiado .trilha{grid-column:1/-1;grid-row:1;height:64px;padding:8px 16px;gap:10px;border-bottom:1px solid var(--p-line)} #app.guiado .stage{grid-column:1;grid-row:2} #app.guiado .labui{grid-column:2;grid-row:2;max-height:none;min-height:0;overflow:hidden;border-left:1px solid var(--p-line)} /* trilha: uma linha só, nome inteiro de cada passo */ #app.guiado .trilha,#app.guiado .trilha.cinco{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)} #app.guiado .trilha button,#app.guiado .trilha.cinco button{flex-direction:row;min-height:48px;padding:0 10px;gap:8px;font-size:14px;white-space:nowrap} #app.guiado .trilha.cinco button:last-child{grid-column:auto} #app.guiado .trilha .num{width:24px;height:24px;font-size:12px} #app.guiado .trilha br{display:none} /* painel: cabeçalho (etapa + título) fica parado; as ferramentas rolam por dentro sem mexer a foto */ #app.guiado .labui .gaveta{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:0 24px 24px} #app.guiado .labui .gaveta-titulo.titulo-painel{position:sticky;top:0;z-index:2;flex-wrap:wrap;background:var(--p-surface);margin:0 -24px 20px;padding:24px 24px 18px;border-bottom:1px solid var(--p-line);font-size:20px;font-weight:500} #app.guiado .labui .gaveta-titulo.titulo-painel::after{order:-1;flex:0 0 100%;margin-bottom:9px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--p-muted);font-weight:500} #app.guiado #lab1ui .gaveta-titulo.titulo-painel::after{content:'Etapa 1 · Alinhar a face'} #app.guiado #lab2ui .gaveta-titulo.titulo-painel::after{content:'Etapa 2 · Máscara do sorriso'} #app.guiado #lab3ui .gaveta-titulo.titulo-painel::after{content:'Etapa 3 · Montar os dentes'} #app.guiado .lab3ui .gaveta{padding-top:0} #app.guiado .labui .montar-ia{padding:0 24px 24px} #app.guiado .labui .montar-ia .btn,#app.guiado .labui .ia-antes .acao-principal{width:100%;max-width:none;margin:8px 0 0} /* (27/set, ele) deitado: os botões grandes ocupam a largura do painel, logo abaixo do título */ #app.guiado .labui:has(.montar-ia:not([hidden])) .gaveta{flex:0 0 auto} /* sem máscara o Montar máscara com IA fica logo abaixo do título, não no pé do painel */ /* rodapé: sai do painel e ocupa a largura toda embaixo (a .corpo é a referência do absolute) */ #app.guiado .labui .rodape{position:absolute;left:0;right:0;bottom:0;height:68px;padding:8px 16px;gap:16px;z-index:6} #app.guiado .labui .rodape .btn{min-height:52px;font-size:15px;padding:0 18px} #app.guiado .labui .rodape .btn.primary{min-width:260px;font-size:17px;font-weight:600;border-radius:14px} #app.guiado .labui .rodape .view-actions .icon-btn{width:48px;height:48px} #app.guiado .labui .dialogo{position:absolute;left:0;right:0;bottom:68px;z-index:7} /* réguas: uma por linha, − e + de 44 */ #app.guiado .position-grid,#app.guiado .two,#app.guiado #dtToothRows{grid-template-columns:minmax(0,1fr);gap:4px} #app.guiado .labui .slider{grid-template-columns:44px minmax(0,1fr) 44px;gap:8px 12px} #app.guiado .labui .slider label{grid-column:1/3;font-size:13px;color:var(--p-muted)} #app.guiado .labui .slider output{grid-column:3;font-size:12px;color:var(--p-gold)} #app.guiado .labui .slider .step{height:44px;min-height:44px;font-size:18px} #app.guiado .labui .slider input[type=range]{height:44px} /* dentes 16…11 em cima, 21…26 embaixo */ #app.guiado .labui .fdi{grid-template-columns:repeat(6,minmax(44px,1fr));gap:8px} #app.guiado .labui .fdi button{min-height:48px;font-size:14px} #app.guiado .labui .fdi button[data-fdi="11"]{margin-right:0} #app.guiado .labui .btn{min-height:48px;font-size:13px} #app.guiado .labui .slider label,#app.guiado .position-grid .slider:has(output[hidden]) label{grid-column:1/3} #app.guiado .labui .slider{margin-bottom:10px} #app.guiado .labui .slider>button:first-of-type{grid-column:1;grid-row:2} #app.guiado .labui .slider>input{grid-column:2;grid-row:2} #app.guiado .labui .slider>button:last-of-type{grid-column:3;grid-row:2} /* botões principais do painel no tamanho do protótipo (68 px, até 340) e empilhados */ #app.guiado .labui .gerar-fim{display:flex;flex-direction:column;align-items:center;gap:12px} #app.guiado .labui .gerar-fim>span{display:none} #app.guiado .labui .gerar-fim .acao-principal,#app.guiado .labui .big-compare{width:100%;max-width:340px;min-height:68px;margin:8px auto;font-size:17px} #app.guiado .labui .gerar-fim #dtTodos{width:100%;max-width:340px} #app.guiado .labui .edicao-entrada{flex-direction:column;align-items:stretch;gap:12px} #app.guiado .labui .edicao-entrada .btn{min-height:60px;font-size:16px} /* Concluir a edição (posição/ameias/modelagem) vai para o rodapé, à direita; Forma original fica no painel */ #app.guiado .labui .det-modos{flex-direction:column;align-items:stretch;gap:10px} #app.guiado .labui .det-modos .btn{min-height:64px;font-size:17px;gap:3px} #app.guiado .labui .det-modos .btn small{font-size:11px} #app.guiado .labui .edicao-fim.ed-fim-so #dtResetForma{min-height:48px;font-size:14px} #app.guiado .labui .edicao-fim{display:flex;justify-content:stretch} #app.guiado .labui .edicao-fim>span{display:none} #app.guiado .labui .edicao-fim #dtResetForma{flex:1} #app.guiado .labui #dtEdicaoOk{position:absolute;right:16px;bottom:8px;z-index:8;min-width:260px;min-height:52px;height:52px;padding:0 22px;font-size:17px;font-weight:600;border-radius:14px} /* IA facial: os três alinhamentos em botões largos, um por linha; as outras ações logo abaixo */ #app.guiado .labui .alignment-options{grid-template-columns:minmax(0,1fr);gap:10px} #app.guiado .labui .alignment-options .btn{min-height:52px;font-size:14px} #app.guiado .labui .ia-depois .row{flex-direction:column;align-items:stretch;gap:10px} /* (ele, 26/set) os alinhamentos e as ações de edição são coisas diferentes: divisória com respiro e as ações num tom secundário, mais baixas */ #app.guiado .labui .ia-depois .separador{margin:14px 0} #app.guiado .labui .ia-depois .row .btn{min-height:44px;background:transparent;font-size:13px} /* (ele, 26/set) Ajuste da imagem: a barra no padrão das outras (largura toda) e Restaurar ajustes embaixo */ #app.guiado .labui .ajuste-linha{grid-template-columns:minmax(0,1fr);gap:12px} #app.guiado .labui .ajuste-linha #ajReset{width:100%;min-height:48px} #app.guiado .labui select{width:100%} /* Estilos da máscara: espessura em linha própria, Inteira/Pontilhada e Neon lado a lado embaixo */ #app.guiado .labui .style-group{grid-template-columns:1fr 1fr;gap:10px;font-size:15px} #app.guiado .labui .style-group>span,#app.guiado .labui .style-group>input{grid-column:1/-1} #app.guiado .labui .style-group>input{height:44px} #app.guiado .labui .style-group .btn{min-height:48px} #app.guiado #controls3[data-modo="gerar"] .gerar-bloco.com-odonto{margin-top:6px} /* deitado: o título é fixo (sticky), o odontograma não sobe por baixo dele */ #app.guiado .odonto-gerar svg{height:auto} /* ícones flutuantes 48 px sobre a foto */ #app.guiado .flut .fl{width:48px;height:48px;flex-basis:48px} } @media (min-aspect-ratio:1/1) and (min-width:900px) and (max-width:1199px){ #app.guiado .corpo{grid-template-columns:minmax(0,1fr) 400px} #app.guiado .labui .gaveta{padding:0 20px 20px} #app.guiado .labui .gaveta-titulo.titulo-painel{margin:0 -20px 16px;padding:20px 20px 14px} #app.guiado .trilha button,#app.guiado .trilha.cinco button{font-size:13px} #app.guiado .labui .rodape .btn.primary{min-width:240px} } @media (min-aspect-ratio:1/1) and (min-width:900px) and (max-height:800px){ #app.guiado .corpo{grid-template-rows:auto minmax(0,1fr) 64px} #app.guiado .trilha{height:60px} #app.guiado .labui .rodape{height:64px} #app.guiado .labui .dialogo{bottom:64px} #app.guiado .flut{gap:6px} #app.guiado .flut .fl{width:44px;height:44px;flex-basis:44px} } #app.fs .trilha,#app.fs .labui,#app.tela .trilha,#app.tela .labui{display:none!important} /* ---------- controles (conteúdo da região de ferramentas) ---------- */ .controls{flex:0 0 auto;background:transparent;padding:10px 12px calc(10px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:8px;font-size:12px} /* modos do trilho: só as linhas do modo ativo aparecem (linhas sem data-modo aparecem sempre) */ #app .controls[data-modo] [data-modo]{display:none} #app .controls[data-modo] .segv[data-modo]{display:inline-flex} /* .segv usa data-modo pro modo de exibição (recheio/contorno) — não é modo do trilho (sem :not — ele subia a especificidade e escondia tudo) */ /* (com #app na frente pra ganhar das regras por id, tipo #dtPanel{display:flex}) */ #app .controls[data-modo="posicao"] [data-modo~="posicao"],#app .controls[data-modo="ia"] [data-modo~="ia"],#app .controls[data-modo="imagem"] [data-modo~="imagem"],#app .controls[data-modo="pontos"] [data-modo~="pontos"],#app .controls[data-modo="montar"] [data-modo~="montar"],#app .controls[data-modo="mascara"] [data-modo~="mascara"],#app .controls[data-modo="guia"] [data-modo~="guia"],#app .controls[data-modo="curva"] [data-modo~="curva"],#app .controls[data-modo="estilo"] [data-modo~="estilo"],#app .controls[data-modo="gerar"] [data-modo~="gerar"],#app .controls[data-modo="labio"] [data-modo~="labio"],#app .controls[data-modo="cor"] [data-modo~="cor"],#app .controls[data-modo="editar"] [data-modo~="editar"],#app .controls[data-modo="edicao"] [data-modo~="edicao"],#app .controls[data-modo="pintar"] [data-modo~="pintar"],#app .controls[data-modo="escrever"] [data-modo~="escrever"],#app .controls[data-modo="apresentar"] [data-modo~="apresentar"],#app .controls[data-modo="estilomk"] [data-modo~="estilomk"],#app .controls[data-modo="hz"] [data-modo~="hz"]{display:flex} /* hz = Bordos incisais / Colos cervicais (26/set) */ #app .controls [data-modo]:not(.ctl-row):not(.mkhint):not(.position-grid):not(.slider):not(.adjust-select):not(.btn){flex-direction:column;gap:8px} #app .controls[data-modo="posicao"] .position-grid[data-modo~="posicao"],#app .controls[data-modo="imagem"] .slider[data-modo~="imagem"]{display:grid} #app .controls[data-modo="imagem"] .adjust-select[data-modo~="imagem"]{display:flex} #app .controls[data-modo="imagem"] .ajuste-linha[data-modo~="imagem"]{display:grid} #app .controls[data-modo="imagem"] .btn[data-modo~="imagem"],#app .controls[data-modo="posicao"] .btn[data-modo~="posicao"]{display:inline-flex} #app .controls[data-modo="pintar"] #dtPintarWrap,#app .controls[data-modo="escrever"] #dtPintarWrap{display:flex;flex-direction:column;gap:8px} #app .controls[data-modo] .mkhint[data-modo]{display:none} #app .controls[data-modo="posicao"] .mkhint[data-modo~="posicao"],#app .controls[data-modo="ia"] .mkhint[data-modo~="ia"],#app .controls[data-modo="imagem"] .mkhint[data-modo~="imagem"],#app .controls[data-modo="pontos"] .mkhint[data-modo~="pontos"],#app .controls[data-modo="montar"] .mkhint[data-modo~="montar"],#app .controls[data-modo="mascara"] .mkhint[data-modo~="mascara"],#app .controls[data-modo="guia"] .mkhint[data-modo~="guia"],#app .controls[data-modo="curva"] .mkhint[data-modo~="curva"],#app .controls[data-modo="estilo"] .mkhint[data-modo~="estilo"],#app .controls[data-modo="gerar"] .mkhint[data-modo~="gerar"],#app .controls[data-modo="labio"] .mkhint[data-modo~="labio"],#app .controls[data-modo="cor"] .mkhint[data-modo~="cor"],#app .controls[data-modo="editar"] .mkhint[data-modo~="editar"],#app .controls[data-modo="edicao"] .mkhint[data-modo~="edicao"],#app .controls[data-modo="pintar"] .mkhint[data-modo~="pintar"],#app .controls[data-modo="escrever"] .mkhint[data-modo~="escrever"],#app .controls[data-modo="apresentar"] .mkhint[data-modo~="apresentar"],#app .controls[data-modo="estilomk"] .mkhint[data-modo~="estilomk"]{display:block} .t-actions{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap;padding-top:6px;border-top:1px solid var(--p-line)} .ctl-row{display:flex;align-items:center;gap:10px} .ctl-label{flex:0 0 62px;font-size:12px;color:var(--p-text);font-weight:500} .ctl-val{flex:0 0 56px;text-align:right;font-size:12.5px;color:var(--soft);font-variant-numeric:tabular-nums} .ctl-val{flex:0 0 52px;text-align:right;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums} .step{width:40px;height:40px;border-radius:10px;border:1px solid var(--p-line);background:var(--p-control);color:var(--p-text);font-size:18px;font-weight:500;cursor:pointer;flex:0 0 auto} .step:active{background:var(--accent-soft)} input[type=range]{flex:1 1 auto;width:100%;min-width:0;margin:0;accent-color:var(--p-gold)} /* RÉGUA v2 (ele, 12/set: "a do guia é mais encorpada e a bolinha é mais fácil de pegar" → app INTEIRO; religada por cima do marco 04 em 12/set): desenhada por nós, igual no Safari e no Chrome — trilho 6 px com o preenchido dourado (--pct vem do JS, setter de .value + evento input) e bolinha branca de 22 px com borda dourada; área de toque 44 px. */ input[type=range]{-webkit-appearance:none;appearance:none;height:44px;background:transparent;--pct:50%;cursor:pointer} input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(to right,var(--p-gold) var(--pct),var(--p-line) var(--pct))} input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;border:2px solid var(--p-gold);box-shadow:0 2px 6px rgba(0,0,0,.35);margin-top:-8px} input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:var(--p-line)} input[type=range]::-moz-range-progress{height:6px;border-radius:3px;background:var(--p-gold)} input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:2px solid var(--p-gold);box-shadow:0 2px 6px rgba(0,0,0,.35)} /* LUPA DA BARRA (13/set): ao tocar a bolinha, uma pílula de vidro maior acompanha o dedo, com o número em cima */ #reguaLupa{position:fixed;left:0;top:0;z-index:90;pointer-events:none;width:72px;height:44px;margin:-22px 0 0 -36px;border-radius:22px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.6);box-shadow:0 6px 22px rgba(0,0,0,.4),inset 0 0 0 1px rgba(209,183,127,.45);backdrop-filter:blur(10px) saturate(1.5);-webkit-backdrop-filter:blur(10px) saturate(1.5);opacity:0;transform:scale(.5);transition:opacity .12s ease,transform .18s cubic-bezier(.2,.9,.3,1.3)} #reguaLupa.on{opacity:1;transform:scale(1)} #reguaLupa i{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:#fff;border:2px solid var(--p-gold);box-shadow:0 2px 8px rgba(0,0,0,.4)} #reguaLupa b{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);padding:3px 10px;border-radius:12px;background:rgba(20,22,21,.88);border:1px solid var(--p-gold);color:var(--p-gold);font-size:13px;font-weight:600;line-height:1.3;white-space:nowrap} #reguaLupa b:empty{display:none} /* ONDA DOURADA (13/set, pra gravação de tela): anel nasce no ponto do toque de qualquer botão e se espalha; o botão encolhe um pouco e volta */ .onda{position:fixed;left:0;top:0;z-index:95;pointer-events:none;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;border:3px solid #d1b77f;box-shadow:0 0 14px rgba(209,183,127,.75),inset 0 0 8px rgba(209,183,127,.5);animation:onda .5s cubic-bezier(.2,.7,.3,1) forwards} @keyframes onda{0%{transform:scale(.35);opacity:1}100%{transform:scale(4.2);opacity:0}} button.apertado{animation:afunda .44s forwards} /* afunda e volta com suavidade nas duas pontas (ele, 13/set: 'muito rápido e seco, sem transição') */ @keyframes afunda{ 0%{transform:scale(1);filter:none;animation-timing-function:cubic-bezier(.4,0,.25,1)} 42%{transform:scale(.9);filter:brightness(.84);animation-timing-function:cubic-bezier(.35,0,.25,1)} 78%{transform:scale(1.02);filter:brightness(1.03);animation-timing-function:cubic-bezier(.4,0,.4,1)} 100%{transform:scale(1);filter:none} } .ctl-row-btns{flex-wrap:wrap;gap:8px} .btn{border:1px solid var(--p-line);background:var(--p-control);color:var(--p-text);border-radius:10px;padding:10px 14px;min-height:44px;font-size:12px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:8px;justify-content:center;transition:background .15s ease} .btn:disabled{opacity:.4;cursor:default} .btn:active{transform:translateY(1px)} .btn.ghost{flex:1 1 auto} .btn.primary{background:var(--p-solid);color:var(--p-on);border-color:transparent;font-weight:500} .bg-btn{position:relative;overflow:hidden} .bg-btn input[type=color]{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;border:none;padding:0} .hint{font-size:11px;color:var(--p-muted);line-height:1.4;padding:4px 0} .hint b{color:var(--ink)} /* posição travada: controles de imagem apagados */ .controls.is-locked .position-grid,.controls.is-locked .ia-depois .alignment-options,.controls.is-locked .ia-depois .row{opacity:.55} /* posição salva: só olhar (o toque pergunta antes de liberar) */ /* ---------- IA: scanner, pontos e painel ---------- */ .scan{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:6} .marks{position:absolute;inset:0;z-index:7;pointer-events:none} .marks.travado .mark{pointer-events:none} /* os 6 pontos só se arrastam no modo Ajustar pontos (ele, 09/set) */ .marks-line{position:absolute;inset:0;width:100%;height:100%;overflow:visible} .marks-line line{stroke:#d1b77f;stroke-width:2;stroke-dasharray:6 5;opacity:.95} /* linha escolhida (bipupilar…) em dourado */ .mark{ position:absolute;width:15px;height:15px;border-radius:50%;pointer-events:auto; border:2px solid currentColor;background:transparent;transform:translate(-50%,-50%); box-shadow:0 0 0 1.5px rgba(0,0,0,.45), 0 0 4px 1px rgba(0,0,0,.35); touch-action:none;cursor:grab; } .mark::after{content:"";position:absolute;left:50%;top:50%;width:3.5px;height:3.5px;border-radius:50%;background:currentColor;transform:translate(-50%,-50%);box-shadow:0 0 0 1px rgba(0,0,0,.4)} .mark::before{content:"";position:absolute;inset:-15px;border-radius:50%} /* área de toque bem maior que a marca */ .mark:active{cursor:grabbing} /* os 6 pontos de conferência são BRANCOS como os da malha (ele, 08/set: "os mesmos pontos sem ser os coloridos"); a linha escolhida continua colorida */ .mark.pupila,.mark.canto,.mark.comis{color:#fff;box-shadow:0 0 0 1.5px rgba(0,0,0,.35),0 0 9px 3px rgba(209,183,127,.7)} /* bolinha branca do tamanho de sempre, só o brilho virou dourado (ele, 08/set: sem anel a mais) */ /* ---------- Lab 2: máscara do sorriso ---------- */ .mask-layer{position:absolute;inset:0;z-index:8;pointer-events:none} .mask-layer svg{position:absolute;inset:0;width:100%;height:100%;display:block} .mask-layer .h{pointer-events:auto;cursor:grab;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))} .ctl-seg{gap:6px} .ctl-seg .seg{flex:1 1 auto;padding:10px 4px;font-size:13px} .seg.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)} #dtPanel,#dtFinoWrap,#dtFino,#mkPanel,#mkMenu,#mkEstilo{display:flex;flex-direction:column;gap:9px} #dtToothRows{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px} /* 5 alavancas em 2 colunas (Etapa 4, ele, 10/set) */ .segv{flex:1 1 auto;padding:10px 4px;font-size:13px} .segv.on{background:var(--p-tint);color:var(--p-gold);border-color:var(--p-gold)} #dtMascara.off{opacity:.5;text-decoration:line-through} .dt-off{opacity:.35;pointer-events:none} .btn.ghost.on{background:var(--p-tint);color:var(--p-gold);border-color:var(--p-gold)} .corGrid{display:flex;flex-wrap:wrap;gap:9px} .corItem{flex:1 1 44%;display:flex;align-items:center;gap:8px;cursor:pointer} .corItem input[type=color]{width:40px;height:30px;flex:0 0 auto;border:1px solid var(--line);border-radius:8px;padding:2px;background:var(--panel-2);cursor:pointer} .corItem span{font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--soft);line-height:1.15} .mkhint{font-size:12px;color:var(--soft);line-height:1.4;padding:0 2px} /* tela cheia (esconde topo e controles) */ #app.fs .topbar,#app.fs .rail,#app.fs .tool-region{display:none!important} #app.fs .corpo{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:minmax(0,1fr)!important}#app.fs .stage{grid-column:1!important;grid-row:1!important} /* no Lab 1 o palco mora na linha 2 do grid; em tela cheia volta pra 1 (senão some) */ .fs-exit{ /* sair da tela cheia: mesmo lugar do botão de entrar (rodapé, centro), setas no sentido contrário (ele, 08/set) */ position:fixed;left:calc(50% - 52px);bottom:calc(6px + env(safe-area-inset-bottom));z-index:50; width:62px;height:62px;display:grid;place-items:center; background:rgba(0,0,0,.6);color:#d1b77f;border:2px solid rgba(209,183,127,.85);border-radius:18px; padding:0;cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px); } .fs-exit svg{width:30px;height:30px} /* (13/set) com a barra Simetria na base da foto, o sair da tela cheia sobe pra cima dela, com o mesmo respiro dos ícones */ #app.com-base .fs-exit{left:calc(50% - 31px);bottom:calc(82px + env(safe-area-inset-bottom))} /* com a cruz ligada sobe mais um pouco: a alça de baixo ocupa até 85 px da borda (ele, 13/set: 'a bolinha ficou atrás do ícone de minimizar') */ #app.com-cruz .fs-exit,#app.com-ba .fs-exit{left:calc(50% - 31px);bottom:calc(100px + env(safe-area-inset-bottom))} #app:not(.guiado) .fs-exit{left:auto;right:12px;bottom:auto;top:calc(10px + env(safe-area-inset-top))} /* Lab 3: o botão de entrar ainda está no topo, à direita */ /* ---------- ANTES / DEPOIS (ordem dele 07/set): linha vertical arrastável; esquerda = foto do paciente, direita = dentes com a máscara labial. Abre em tela cheia ---------- */ .ba{position:absolute;inset:0;pointer-events:none;z-index:12} .ba-line{position:absolute;top:0;bottom:0;left:0;width:2px;transform:translateX(-1px);background:#d1b77f;box-shadow:0 0 0 1px rgba(18,22,20,.5),0 0 7px rgba(0,0,0,.45);pointer-events:auto;touch-action:none;cursor:ew-resize;will-change:transform} /* (13/set) dourada sobre sombra grafite, como o resto do app */ /* posição via transform (mover por `left` deixava rastro da linha no Chrome da tela grande) */ .ba-line::before{content:"";position:absolute;top:0;bottom:0;left:-22px;right:-22px} /* área de pegar mais larga que a linha */ /* ALÇAS DO ANTES × DESIGN (13/set): uma em cima e outra embaixo, no padrão das alças da cruz — miolo grafite, anel dourado, afastadas das bordas */ .ba-grip{position:absolute;left:50%;width:56px;height:56px;border-radius:50%;background:#1e251f;border:1px solid #d1b77f;box-shadow:0 0 0 4px rgba(20,27,22,.25);display:grid;place-items:center;color:#d1b77f;pointer-events:auto;touch-action:none;cursor:ew-resize;transition:transform .18s cubic-bezier(.3,.8,.35,1.2),background .18s ease,color .18s ease,box-shadow .18s ease} .ba-grip svg{width:24px;height:24px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;display:block} #baTopo{top:64px;transform:translate(-50%,-50%)} #baBase{bottom:64px;transform:translate(-50%,50%)} .ba-grip.pegando{background:#d1b77f;color:#141b16;box-shadow:0 0 0 8px rgba(209,183,127,.22),0 0 22px rgba(209,183,127,.85)} #baTopo.pegando{transform:translate(-50%,-50%) scale(1.3)} #baBase.pegando{transform:translate(-50%,50%) scale(1.3)} .ba-line.arrastando{width:3px;box-shadow:0 0 0 1px rgba(18,22,20,.5),0 0 14px rgba(209,183,127,.9)} .ba-tag{position:absolute;bottom:calc(16px + env(safe-area-inset-bottom));font-size:12px;letter-spacing:.2em;text-transform:uppercase;padding:7px 13px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;font-weight:700;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)} .ba-antes{left:14px} .ba-depois{right:14px;background:var(--accent);color:var(--accent-ink)} /* 🖌 anel do tamanho da ponta e lupa do conta-gotas: elementos DOM (mexem na hora, sem esperar o canvas redesenhar) */ .pint-anel{position:absolute;left:0;top:0;border-radius:50%;pointer-events:none;z-index:13;border:1.5px solid rgba(255,255,255,.95);box-shadow:0 0 0 1.5px rgba(0,0,0,.7),inset 0 0 0 1.5px rgba(0,0,0,.7);transform:translate(-50%,-50%);will-change:transform} .labio-lupa{position:absolute;left:0;top:0;width:160px;height:160px;z-index:14;pointer-events:none;will-change:transform} .labio-lupa canvas{display:block;width:160px;height:160px;border-radius:50%;box-sizing:border-box;box-shadow:0 0 0 4px #d1b77f,0 0 0 6px rgba(20,27,22,.9),0 10px 26px rgba(0,0,0,.55)} .labio-lupa .cabo{position:absolute;left:50%;bottom:-38px;width:12px;height:46px;margin-left:-6px;border-radius:6px;background:linear-gradient(90deg,#8f7a4e,#d1b77f 45%,#8f7a4e);box-shadow:0 4px 10px rgba(0,0,0,.45);transform-origin:50% 0} .labio-lupa.embaixo .cabo{bottom:auto;top:-38px;transform-origin:50% 100%} .pint-lupa{position:absolute;left:0;top:0;width:88px;height:88px;border-radius:50%;pointer-events:none;z-index:13;box-sizing:border-box;border:22px solid #888;box-shadow:0 0 0 1.5px rgba(255,255,255,.9),inset 0 0 0 2px #000;transform:translate(-50%,-50%);will-change:transform} /* ---------- 📺 ESPELHO AO VIVO: a tela grande (modo tela) só mostra o palco; nada de menus nem toque ---------- */ #app.tela .topbar,#app.tela .rail,#app.tela .tool-region{display:none!important} #app.tela .corpo{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:minmax(0,1fr)!important}#app.tela .stage{grid-column:1!important;grid-row:1!important} #app.tela .stage{pointer-events:none} html.tela #fsExit{display:none!important} .tela-aviso{position:fixed;left:50%;top:14px;transform:translateX(-50%);z-index:60;background:rgba(0,0,0,.6);color:#fff;border-radius:999px;padding:9px 16px;font-size:13px;font-weight:600;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)} #espelhoBox{border-top:1px solid var(--line);padding-top:10px;font-size:13px;line-height:1.5} #espelhoBox b{font-size:26px;letter-spacing:.2em;color:var(--accent);display:block;margin:4px 0} #espelhoBox .btn{margin-top:6px} /* toast */ /* AVISO IMPORTANTE (ele, 12/set): caixa dourada no meio, fundo escurece, botão Entendi (mesma .modal do Confirmar). O toast branco saiu; o que não é importante não avisa. */ .modal.aviso{text-align:center} .aviso-ic{width:44px;height:44px;margin:0 auto 12px;border-radius:50%;border:2px solid var(--p-gold);color:var(--p-gold);display:grid;place-items:center;font-size:22px;font-weight:700;line-height:1} .modal.aviso p{font-size:15px;white-space:pre-line} /* ================= ÍCONES FLUTUANTES DE VISUALIZAÇÃO (dele, 12/set) ================= */ /* Estilo = entrega do design ('Entrega - Icones flutuantes', 12/set): botão 56 px sem fundo/borda próprios (o círculo já está no SVG), ativo #d1b77f / inativo #aab4ac, pontinho no canto = 'tem opções', etiqueta no toque longo, mini-menu com fundo #1b201e e borda dourada, itens com ícone 38 px + nome. */ .flut{position:absolute;top:12px;right:12px;z-index:30;display:flex;flex-direction:column;gap:8px} .flut .fl{position:relative;display:block;width:56px;height:56px;flex:0 0 56px;padding:0;border:0;background:transparent;border-radius:50%;color:#d1b77f;cursor:pointer;touch-action:manipulation} .flut .fl svg{display:block;width:100%;height:100%;max-width:none;max-height:none} .flut .fl[aria-pressed=false]{color:#aab4ac} .flut .fl .fl-dot{display:none} .flut.esq{left:12px;right:auto} /* (ele, 26/set) a coluna fixa da esquerda: Pintura · Escrita · Câmera · Cruz · Lâmpada */ .flut-tip.esq{right:auto;left:66px} #app.fs .flut{top:calc(12px + env(safe-area-inset-top))} /* tela cheia: o primeiro ícone ficava embaixo do relógio do iPad */ /* MARCA NO COMPARADOR (guia do design, 13/set): logotipo dourado 164 px sobre base grafite, canto superior esquerdo da fotografia, 16 px das bordas. Fica FORA do #frame, que recebe a transformação do zoom, então não amplia nem se move ao arrastar o divisor. Não intercepta toque. */ .es-marca{position:absolute;z-index:20;display:block;padding:10px 12px;border-radius:6px;background:rgba(23,30,26,.92);pointer-events:none;user-select:none;-webkit-user-select:none} .es-marca img{display:block;width:164px;height:auto;max-width:none} .es-marca.larga img{width:230px} /* (ele, 26/set) tela cheia DEITADA: marca maior, no canto do palco (posMarca) */ #app.fs #sairCanto{display:none!important} /* (26/set, teste dele) GERAR com o odontograma (arcada de cima, 16…26). 2ª rodada (ele): centralizado, números embaixo, a frase no lugar do Selecionar todos e o Gerar em destaque ao lado, centralizado na altura. Em pé: desenho + frase à esquerda, Gerar à direita; deitado: um embaixo do outro */ .odonto-gerar svg{display:block;width:100%;height:170px;max-width:none;stroke:none;fill:none} .odonto-gerar .dente{cursor:pointer} .odonto-gerar .hit{stroke:none} .odonto-gerar .dente .sel{display:none}.odonto-gerar .dente.on .sel{display:inline}.odonto-gerar .dente.on .rep{display:none} .odonto-gerar .num{font:500 64px -apple-system,BlinkMacSystemFont,Inter,sans-serif;fill:var(--p-muted)} .odonto-gerar .dente.on .num{fill:#d1b77f} .odonto-frase{display:none;margin:6px 0 0;text-align:center;font-size:14px;color:var(--p-muted)} #app #controls3[data-modo="gerar"] .gerar-bloco.com-odonto{display:flex;flex-direction:column;align-items:center;gap:0;margin-top:-44px} /* (ele, 26/set) peça central: odontograma centralizado, as raízes sobem pro lado do título "Gerar sorriso", o Gerar embaixo */ .gerar-bloco.com-odonto .odonto-gerar svg{height:180px} /* (ele, 26/set) o mesmo odontograma nos 3 modos do Editar, no lugar dos números */ .sel-dentes.odonto.com-odonto{display:flex;flex-direction:column;align-items:center;gap:6px} .sel-dentes.odonto.com-odonto .fdi{display:none} .sel-dentes.odonto.com-odonto .odonto-gerar{width:100%} #dtOdontoEdicao svg{height:160px} .odonto-gerar .dente.off{opacity:.28;pointer-events:none} .gerar-bloco.com-odonto .sel-dentes .fdi{display:none} .gerar-bloco.com-odonto .sel-dentes{display:block;width:100%;min-width:0} .gerar-bloco.com-odonto .odonto-frase{display:block} .gerar-bloco.com-odonto #dtTodos{display:none} .gerar-bloco.com-odonto .gerar-fim{display:flex;flex-direction:column;justify-content:center;align-items:stretch} .gerar-bloco.com-odonto .gerar-fim>span{display:none} .gerar-bloco.com-odonto .gerar-fim{width:100%;align-items:center;margin-top:14px} .gerar-bloco.com-odonto .gerar-fim .acao-principal{width:100%;max-width:420px;margin:0;min-height:64px;font-size:18px;box-shadow:0 8px 22px rgba(0,0,0,.28)} .gerar-bloco.com-odonto .gerar-fim{display:flex;flex-direction:column;align-items:stretch;gap:10px} .gerar-bloco.com-odonto .gerar-fim>span{display:none} .gerar-bloco.com-odonto .gerar-fim .acao-principal{width:100%;margin:0} /* (ele, 26/set) na tela cheia só o minimizar; o Salvar e sair confundia (em pé e deitado) */ /* AMPLIAR / REDUZIR (ele, 13/set): canto inferior direito da área de trabalho, fora da coluna de visualização — é uma ação, não um modo de ver. Maior que os ícones (68 contra 56) porque não disputa mais com eles; sobe quando a etiqueta DESIGN do Antes × Design está na tela. */ .fs-canto{position:absolute;right:14px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:31;width:68px;height:68px;display:grid;place-items:center; border-radius:50%;background:#0f1311;border:0;box-shadow:0 0 0 2px rgba(209,183,127,.9),0 0 16px rgba(209,183,127,.45); color:#d1b77f;padding:0;cursor:pointer;touch-action:manipulation} .fs-canto svg{width:30px;height:30px} #app.fs .fs-canto{background:#d1b77f;color:#141b16;box-shadow:0 0 0 2px rgba(209,183,127,1),0 0 24px rgba(209,183,127,.75)} #app.com-ba .fs-canto{bottom:calc(72px + env(safe-area-inset-bottom))} /* acima da etiqueta DESIGN */ /* SAIDA (ele, 13/set): canto oposto ao da tela cheia. O circulo ja faz parte do desenho do design, entao o botao e transparente. */ .sair-canto{position:absolute;left:14px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:31;width:68px;height:68px;padding:0;border:0;background:transparent;border-radius:50%;color:#d1b77f;cursor:pointer;touch-action:manipulation;box-shadow:0 0 16px rgba(209,183,127,.35)} .sair-canto svg{display:block;width:100%;height:100%} #app.com-ba .sair-canto{bottom:calc(72px + env(safe-area-inset-bottom))} /* acima da etiqueta ANTES */ .fs-exit{display:none} /* substituído pelo botão do canto (13/set) */ /* BOTÕES FLUTUANTES NA BASE DA FOTO (13/set): Simetria (usado o tempo todo na edição) + Forma original (menor, afastado, pra não escorregar o dedo). Só nos 3 modos de edição */ .flut-base{position:absolute;left:0;right:0;bottom:14px;z-index:30;display:flex;justify-content:center;align-items:center;gap:22px;pointer-events:none} /* (ele, 13/set): sem vidro — 'ficaram quase apagados'. Mesmo estilo dos ícones flutuantes: fundo preto sólido, dourado ligado, cinza claro desligado, bem visível pro toque rápido */ .wh-hud{position:absolute;z-index:29;transform:translate(-50%,0);display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 20px 11px;border-radius:14px;background:rgba(14,18,16,.82);border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:#eef0eb;pointer-events:none;white-space:nowrap} .wh-grupo{font:600 11px/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#aab4ac} .wh-linha{display:flex;align-items:center;gap:10px;font:500 14px/1 Inter,sans-serif;letter-spacing:.02em} .wh-linha b{font-size:24px;font-weight:700;letter-spacing:-.01em;transition:font-size .15s} .wh-drag .wh-linha b{font-size:30px} .wh-dot{width:10px;height:10px;border-radius:50%;background:currentColor} .wh-h .wh-linha{color:#5fd68a}.wh-a .wh-linha{color:#e6b84a}.wh-d .wh-linha{color:#ff6b6b} .ajuste-ok{position:absolute;z-index:30;height:58px;padding:0 36px;border-radius:12px;background:#d1b77f;color:#20271f;border:0;box-shadow:0 6px 18px rgba(0,0,0,.4);font:600 17px/1 Inter,sans-serif;cursor:pointer;touch-action:manipulation} /* retângulo de canto arredondado, o formato dos botões do app (ele, 26/set: 'fugiu do padrão') */ .flut-base .fb{pointer-events:auto;display:flex;align-items:center;gap:10px;height:56px;padding:0 24px;border-radius:28px;background:#0f1311;border:2px solid currentColor;box-shadow:0 4px 16px rgba(0,0,0,.5);color:#aab4ac;font:600 16px/1 Inter,sans-serif;cursor:pointer;touch-action:manipulation;transition:color .15s} .flut-base .fb svg{width:28px;height:28px;display:block} .flut-base .fb[aria-pressed=true]{color:#d1b77f} .flut-base .fb.fb-ico{width:56px;padding:0;border:0;background:none;box-shadow:none;color:#d1b77f;justify-content:center} .flut-base .fb.fb-ico svg{width:56px;height:56px} .flut-base .fb.fb-ico:disabled{color:#aab4ac;opacity:.55;cursor:default} /* Fim da edição (13/set): Concluir alto e estreito no centro, Forma original à direita, afastado */ .edicao-fim{display:grid;grid-template-columns:minmax(78px,1fr) auto minmax(78px,1fr);align-items:center;gap:12px;margin:8px 0 0} /* respiro até o rodapé (ele, 13/set: 'muito colado'); as laterais nunca ficam menores que o Forma original, senão ele monta por cima do Concluir no iPad deitado */ .edicao-fim .edicao-ok{grid-column:2;min-width:0;min-height:60px;padding:0 32px;font-size:16px;font-weight:600;border-radius:14px;box-shadow:0 6px 18px rgba(0,0,0,.25)} .edicao-fim #dtResetForma{grid-column:3;justify-self:end;min-width:0;min-height:44px;padding:10px 14px} .edicao-fim.ed-fim-so{display:flex;justify-content:stretch;margin-top:16px} .edicao-fim.ed-fim-so #dtResetForma{flex:1;min-height:50px;font-size:15px;padding:0 16px;color:var(--p-muted)} /* (27/set) largura toda, sem o destaque dos botões principais */ .flut-menu{position:absolute;right:70px;max-width:calc(100% - 92px);z-index:31;display:flex;flex-wrap:wrap;gap:6px;padding:8px;background:#1b201e;border:1px solid #d1b77f;border-radius:12px;box-shadow:0 8px 25px #0005} .flut-menu button{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:96px;padding:8px 8px 10px;border:1px solid #39423b;border-radius:12px;background:#272d29;color:#eef0eb;font:12px/1.15 Inter,sans-serif;text-align:center;cursor:pointer} /* bolas grandes com legenda (ele, 12/set: 'bolinha pequena fica tímido') */ .flut-menu button svg{width:56px;height:56px;display:block} .flut-menu button svg.apagado{opacity:.35} .flut-menu button[aria-pressed=true]{border-color:#d1b77f;color:#d1b77f} .flut-tip{position:absolute;right:66px;z-index:32;white-space:nowrap;padding:10px;background:#1b201e;border:1px solid #39423b;border-radius:8px;color:#eef0eb;font-size:14px;pointer-events:none} /* Painel flutuante ESTILO DA MÁSCARA (ele, 12/set: 'estilo abre uma caixa com borda dourada com as barrinhas; a pessoa não pode sair de onde está') */ .flut-estilo{position:absolute;top:12px;right:80px;z-index:31;width:min(560px,calc(100% - 100px));display:flex;flex-direction:column;gap:12px;padding:12px 14px;background:#1b201e;border:1px solid #d1b77f;border-radius:14px;box-shadow:0 8px 25px #0005} .flut-estilo-cab{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:14px;font-weight:600;color:#eef0eb;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none} /* (27/set) a caixa se move pelo cabeçalho (ele: 'às vezes fica em cima da área que vou ajustar') */ .flut-estilo-cab:active{cursor:grabbing} @media (hover:hover) and (pointer:fine){ /* computador (27/set, ele: 'a caixa está muito grande'): caixas e mini-menu mais compactos */ .flut-estilo{width:min(420px,calc(100% - 100px));gap:10px;padding:10px 12px} .flut-pint{width:min(440px,calc(100% - 100px))} .flut-menu button{min-width:76px;padding:6px 6px 8px;font-size:11px} .flut-menu button svg{width:44px;height:44px} } .flut-estilo-cab .btn{min-height:40px;padding:8px 14px;flex:0 0 auto} .flut-estilo [data-modo="estilo"]{display:flex;flex-direction:column;gap:10px} .flut-estilo .corGrid{display:flex;flex-wrap:wrap;gap:8px} .flut-pint{width:min(600px,calc(100% - 100px))} .flut-alpha{width:min(420px,calc(100% - 100px))} /* caixa dourada da transparência: só a barra (13/set) */ .flut-alpha .rline{gap:8px} .flut-pint-acoes{display:flex;gap:8px} .flut-pint #dtPintarWrap{display:flex;flex-direction:column;gap:10px} /* Caixa de DICA (lâmpada): a mesma caixa dourada dos avisos, com lâmpada e letra maior pra ler com conforto (ele, 12/set) */ .modal.aviso.dica-box .aviso-ic{font-size:0;width:56px;height:56px;border:0} .modal.aviso.dica-box .aviso-ic svg{width:56px;height:56px;color:var(--p-gold)} .modal.aviso.dica-box p{font-size:18px;line-height:1.55;text-align:left} .modal.aviso.dica-box{width:min(100%,560px)} /* ================= LOGIN (entrega do design 'Login', 19/set — valores exatos do login.css dele, escopados em #telaLogin) ================= Verde profundo com luz difusa, logo dourado, uma coluna: e-mail · senha · Entrar · Esqueci minha senha. SEMPRE escuro, seja qual for o tema da área de trabalho (não mexe na preferência salva). Cadastro/convite continuam com os mesmos campos e cores (guia). */ #telaLogin.lg{position:fixed;inset:0;overflow:auto;-webkit-overflow-scrolling:touch;color-scheme:dark;color:#eef0eb;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; display:grid;place-items:center; padding:max(36px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(36px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left)); background:radial-gradient(ellipse at 54% -12%,rgba(95,136,117,.38),transparent 55%),radial-gradient(ellipse at 5% 102%,rgba(47,83,67,.35),transparent 48%),radial-gradient(ellipse at 98% 55%,rgba(25,54,46,.24),transparent 45%),linear-gradient(130deg,#0b1915 0%,#07100e 49%,#020605 100%)} #telaLogin .lg-conteudo{width:min(100%,460px);padding-bottom:18px} #telaLogin .lg-marca{margin:0 0 39px;line-height:0} #telaLogin .lg-marca img{display:block;width:108%;max-width:none;height:auto;margin-left:-4%} #telaLogin #lgForm{display:flex;flex-direction:column;gap:18px} #telaLogin #lgTitulo{margin:0;font-size:24px;font-weight:500;text-align:center} #telaLogin .lg-sub{margin:-8px 0 4px;text-align:center;color:#bfc8c1;font-size:15px} #telaLogin .lg-field{position:relative;height:68px;display:flex;align-items:center;gap:23px;padding:0 23px;border:1px solid #d6c9a5;border-radius:12px;background:rgba(2,10,8,.32);box-shadow:inset 0 1px 0 rgba(255,255,255,.02);transition:border-color .18s,box-shadow .18s} #telaLogin .lg-field svg{flex:none;width:25px;height:25px;fill:none;stroke:#edd780;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round} #telaLogin .lg-field input{width:100%;min-width:0;height:100%;border:0;outline:0;color:#f1f0eb;background:transparent;font:400 19px/1 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;border-radius:inherit;padding:0} #telaLogin .lg-field input::placeholder{color:#eceee8;opacity:1} #telaLogin .lg-field:focus-within{border-color:#ffe5a1;box-shadow:0 0 0 3px rgba(209,183,127,.16)} #telaLogin .lg-field input:-webkit-autofill{-webkit-text-fill-color:#eef0eb;box-shadow:0 0 0 100px #0e1b16 inset;caret-color:#eef0eb} #telaLogin .lg-mostrar{flex:none;border:0;background:transparent;color:#f3db83;font:600 13px/1 Inter,sans-serif;padding:10px 0 10px 10px;cursor:pointer} /* Mostrar/Ocultar a senha (função que já existia; o mockup não cobre) */ #telaLogin .lg-entrar{margin-top:20px;height:72px;border-radius:13px;border:1px solid #ffe6a2;color:#15160f;background:linear-gradient(167deg,#ffe5a1 0%,#f0cc82 39%,#d1a65c 78%,#bb8c47 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 6px 24px rgba(0,0,0,.15);font:450 26px Inter,-apple-system,sans-serif;cursor:pointer;transition:filter .18s,transform .18s} #telaLogin .lg-entrar:hover{filter:brightness(1.07)} #telaLogin .lg-entrar:active{transform:translateY(1px)} #telaLogin .lg-entrar:disabled{opacity:.75;cursor:default} #telaLogin .lg-links{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:18px} #telaLogin .lg-link{min-height:44px;padding:8px 0;background:none;border:0;color:#f3db83;font:400 17px Inter,sans-serif;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px;cursor:pointer} #telaLogin #lgAlternar{font-size:15px;color:#bfc8c1} #telaLogin .lg-erro{padding:12px 16px;border:1px solid #b45b5b;border-radius:12px;color:#f0b3b3;font-size:15px;line-height:1.5;background:rgba(2,10,8,.32)} #telaLogin button:focus-visible{outline:2px solid #ffe5a1;outline-offset:5px} /* SÓ nos botões (login.css dele). No input o foco é a borda do campo (:focus-within); com outline no input o iPad desenhava uma 2ª caixa por dentro (bug dele, 19/set 20h57) */ #telaLogin .lg-field input:focus,#telaLogin .lg-field input:focus-visible{outline:0} #telaLogin .sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap} @media (min-width:1100px) and (min-height:750px){ #telaLogin .lg-conteudo{width:480px} } @media (max-width:480px){ #telaLogin .lg-conteudo{width:100%} #telaLogin .lg-marca{margin-bottom:28px} #telaLogin .lg-field{height:60px;gap:18px;padding:0 20px} #telaLogin .lg-field input{font-size:17px} #telaLogin .lg-entrar{height:62px;font-size:23px;margin-top:14px} #telaLogin .lg-link{font-size:16px} #telaLogin .lg-links{margin-top:12px} #telaLogin #lgForm{gap:15px} } @media (max-height:600px){ #telaLogin.lg{padding-top:24px;padding-bottom:24px} #telaLogin .lg-conteudo{width:min(100%,390px);padding-bottom:0} #telaLogin .lg-marca{margin-bottom:16px} #telaLogin .lg-marca img{width:76%;margin-inline:auto} #telaLogin .lg-field{height:52px} #telaLogin #lgForm{gap:12px} #telaLogin .lg-entrar{height:54px;margin-top:8px;font-size:23px} #telaLogin .lg-links{margin-top:4px} } .pj{position:fixed;inset:0;display:flex;flex-direction:column;background:var(--p-canvas);color:var(--p-text)} .pj-topo{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 20px;padding-top:calc(10px + env(safe-area-inset-top));min-height:64px;background:var(--p-surface);border-bottom:1px solid var(--p-line)} .pj-topo-dir{display:flex;align-items:center;gap:8px} .pj-usuario{font-size:12px;color:var(--p-muted);margin-right:6px} .pj-topo .btn{min-height:40px;padding:8px 14px;flex:0 0 auto} .pj-corpo{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:280px minmax(0,1fr)} .pj-lat{padding:18px 12px;border-right:1px solid var(--p-line);overflow-y:auto;background:var(--p-surface)} .pj-lat{padding:22px 14px} .pj-lat-item{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:14px 18px;margin-bottom:10px;min-height:58px;border:1px solid transparent;border-radius:14px;background:transparent;color:var(--p-text);font:500 16px Inter,-apple-system,sans-serif;cursor:pointer} /* (14/set, ele duas vezes: "muito pequenininho, se ficar pequeno quebra") */ .pj-lat-item svg{width:22px;height:22px;flex:0 0 auto} .pj-lat-rodape{color:var(--p-muted);font-size:13px;line-height:1.6;margin:80px 16px 20px;max-width:180px} .pj-lat-item.on{background:var(--p-tint);border-color:var(--p-gold);color:var(--p-gold)} .pj-lat-titulo{margin:18px 14px 6px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--p-muted)} .pj-lat-nova{margin-top:8px;padding:10px 14px;border:0;background:transparent;color:var(--p-gold);font:14px Inter,sans-serif;cursor:pointer;text-align:left;width:100%} .pj-main{padding:22px 28px;overflow-y:auto;-webkit-overflow-scrolling:touch} .pj-caminho{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--p-muted);flex-wrap:wrap} .pj-crumb{border:0;background:transparent;color:var(--p-muted);font:13px Inter,sans-serif;padding:4px 2px;cursor:pointer} .pj-crumb:last-child{color:var(--p-text)} .pj-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin:12px 0 18px} .pj-cab h1{margin:0;font-size:32px;font-weight:500} .pj-cab p{margin:6px 0 0;color:var(--p-muted)} .pj-cab .btn{min-height:48px;padding:10px 18px;flex:0 0 auto} .pj-ferr{display:flex;gap:10px;align-items:center;margin-bottom:22px} .pj-ferr input{flex:1 1 auto;min-height:46px;padding:0 14px;border:1px solid var(--p-line);border-radius:12px;background:var(--p-control);color:var(--p-text);font:14px Inter,sans-serif} .pj-ferr .btn{min-height:46px;flex:0 0 auto} .pj-secao{font-size:16px;font-weight:600;margin:6px 0 12px} .pj-pastas{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin-bottom:26px} .pj-pasta{position:relative;display:grid;grid-template-columns:28px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;text-align:left;padding:16px 36px 16px 16px;border:1px solid var(--p-line);border-radius:14px;background:var(--p-surface);color:var(--p-text);font:14px Inter,sans-serif;cursor:pointer} .pj-pasta svg{grid-row:1/3;width:26px;height:26px;color:var(--p-gold)} .pj-pasta-nome{font-weight:600} .pj-pasta-n{font-size:12px;color:var(--p-muted)} .pj-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px} .pj-card{position:relative;display:flex;flex-direction:column;border:1px solid var(--p-line);border-radius:16px;background:var(--p-surface);color:var(--p-text);overflow:hidden;cursor:pointer;padding:0;text-align:left;font:14px Inter,sans-serif} .pj-foto{aspect-ratio:3/4;background:var(--p-control);display:grid;place-items:center;overflow:hidden} .pj-foto img{width:100%;height:100%;object-fit:cover;display:block} .pj-semfoto{font-size:34px;color:var(--p-muted)} .pj-info{display:flex;flex-direction:column;gap:3px;padding:10px 12px 12px} .pj-nome{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pj-estado{font-size:11px;color:var(--p-muted)} .pj-estado.em_andamento{color:var(--p-gold)} .pj-estado.concluido{color:#7fc79a} .pj-ren{position:absolute;top:8px;right:8px;width:32px;height:32px;border-radius:50%;border:1px solid var(--p-line);background:rgba(0,0,0,.45);color:#fff;display:grid;place-items:center;cursor:pointer;padding:0} .pj-ren svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;pointer-events:none} /* (14/set) era o caractere ✎ em 14 px: sumia do lado da lixeira. Agora é desenho, do mesmo tamanho dela */ .pj-pasta .pj-ren{background:transparent;color:var(--p-muted);border-color:transparent} /* (13/set) apagar projeto: mesma bolinha do renomear, à esquerda dela */ .pj-del{position:absolute;top:8px;right:46px;width:32px;height:32px;border-radius:50%;border:1px solid var(--p-line);background:rgba(0,0,0,.45);color:#fff;display:grid;place-items:center;cursor:pointer;padding:0} .pj-del svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;pointer-events:none} .pj-del:hover{border-color:#e08b7d;color:#e08b7d} .pj-confirma-txt{color:var(--p-muted);font-size:14px} .btn.perigo{background:#a8443a;border-color:#a8443a;color:#fff} .btn.perigo:hover{background:#933a31;border-color:#933a31} .pj-novo{border-style:dashed} .pj-vazio{padding:28px;border:1px dashed var(--p-line);border-radius:14px;color:var(--p-muted);margin-bottom:18px} .pj-campo{width:100%;min-height:48px;padding:0 14px;margin-bottom:16px;border:1px solid var(--p-line);border-radius:12px;background:var(--p-control);color:var(--p-text);font:16px Inter,sans-serif} @media (max-width:820px){ .pj-corpo{grid-template-columns:1fr} .pj-lat{display:none} .pj-main{padding:16px} .pj-cab h1{font-size:26px} .pj-cards{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))} } .sair-projeto{min-height:40px;padding:8px 14px;flex:0 0 auto;font-size:13px} @media (max-width:520px){ .sair-projeto{font-size:11px;padding:6px 8px} } /* ================= MOCKUP COM IA (14/set/2026) — módulo vendido à parte do design ================= Mora ao lado de "Meus projetos" (mesma casca .pj-*), nunca dentro do editor. Sem o módulo: cadeado + oferta. O contador de vídeos fica SEMPRE à vista (ordem dele: "essa questão de crédito tem que ser muito especificada"). */ .vd-cadeado{margin-left:auto;display:grid;place-items:center;color:var(--p-muted)} .vd-cadeado svg{width:15px;height:15px} .vd-carregando{padding:40px;color:var(--p-muted)} /* contador de créditos, no cabeçalho de toda tela do módulo */ .vd-selo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;flex:0 0 auto;min-width:108px;padding:10px 16px;border:1px solid var(--p-line);border-radius:14px;background:var(--p-surface)} .vd-selo strong{font-size:26px;font-weight:600;line-height:1;color:var(--p-gold)} .vd-selo span{font-size:11px;color:var(--p-muted);text-align:center} .vd-selo-pouco{border-color:var(--p-gold)} .vd-selo-vazio strong{color:#a8443a} .vd-acao-topo{display:flex;justify-content:center;margin:6px 0 26px} .vd-trilha{grid-template-columns:repeat(3,1fr);background:transparent;padding:0;margin-bottom:22px} /* estados vazios / oferta */ .vd-oferta,.vd-primeiro,.vd-escolha,.vd-falha,.vd-gerando{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:46px 22px;border-style:dashed} .vd-oferta h2,.vd-primeiro h2,.vd-escolha h2,.vd-falha h2,.vd-gerando h2{margin:0;font-size:24px;font-weight:500;color:var(--p-text)} .vd-oferta p,.vd-primeiro p,.vd-escolha p,.vd-falha p,.vd-gerando p{margin:0;max-width:460px;line-height:1.6} .vd-oferta-ic{width:64px;height:64px;border:1px solid var(--p-line);border-radius:18px;display:grid;place-items:center;color:var(--p-gold)} .vd-oferta-ic svg{width:28px;height:28px} .vd-oferta-lista{list-style:none;margin:6px 0;padding:0;display:flex;flex-direction:column;gap:10px;text-align:left;font-size:14px;color:var(--p-text)} .vd-oferta-lista li{display:flex;align-items:center;gap:10px} .vd-oferta-lista svg{width:18px;height:18px;color:var(--p-gold);flex:0 0 auto} .vd-ou{display:flex;align-items:center;gap:12px;width:min(100%,420px);font-size:11px;letter-spacing:.12em;color:var(--p-muted)} .vd-ou::before,.vd-ou::after{content:"";flex:1;height:1px;background:var(--p-line)} /* mesa: prévia grande + painel de 340 (mesma proporção do editor) */ .vd-mesa{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start} .vd-previa{position:relative;background:#080a0c;border:1px solid var(--p-line);border-radius:16px;overflow:hidden;display:grid;place-items:center;min-height:340px} .vd-previa img,.vd-previa video{width:100%;max-height:min(620px,64dvh);object-fit:contain;display:block} .vd-tag{position:absolute;top:12px;left:12px;padding:4px 9px;border-radius:999px;font-size:11px;background:var(--p-tint);color:var(--p-gold)} .vd-painel{padding:22px;background:var(--p-surface);border:1px solid var(--p-line);border-radius:16px} .vd-painel h2{margin:0 0 6px;font-size:18px;font-weight:500} .vd-painel>p{margin:0 0 16px;color:var(--p-muted);line-height:1.6;font-size:13px} .vd-duplo{display:grid;grid-template-columns:1fr 1fr;gap:8px} .vd-duplo .btn{min-height:56px;font-size:13px} .vd-campo{margin:18px 0} .vd-campo label,.vd-divisor label{display:block;font-size:12px;font-weight:600;margin-bottom:8px;color:var(--p-text)} .vd-campo textarea{width:100%;min-height:120px;padding:12px 14px;border:1px solid var(--p-line);border-radius:12px;background:var(--p-control);color:var(--p-text);font:15px/1.6 Inter,-apple-system,sans-serif;resize:vertical} .vd-campo textarea:focus{outline:2px solid var(--p-gold);outline-offset:2px} .vd-conta{text-align:right;font-size:11px;color:var(--p-muted);margin:6px 0 4px;font-variant-numeric:tabular-nums} .vd-campo small,.vd-nota{font-size:11px;color:var(--p-muted);line-height:1.5} .vd-divisor{border-top:1px solid var(--p-line);padding-top:16px;margin-top:18px} .vd-divisor p{margin:0;color:var(--p-muted);font-size:13px;line-height:1.6} .vd-nota{display:block;text-align:center;margin-top:10px} .vd-painel .acao-principal{width:100%;max-width:none;margin:18px 0 0} /* cartões de vídeo */ .vd-foto{position:relative} .vd-play{position:absolute;inset:0;display:grid;place-items:center;color:var(--p-gold)} .vd-play svg{width:46px;height:46px;padding:13px;border:1px solid var(--p-gold);border-radius:50%;background:rgba(8,10,12,.55)} .vd-trabalhando{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:5px;background:rgba(8,10,12,.45)} .vd-trabalhando i{width:6px;height:6px;border-radius:50%;background:var(--p-gold);animation:vd-pisca 1.2s ease-in-out infinite} .vd-trabalhando i:nth-child(2){animation-delay:.2s}.vd-trabalhando i:nth-child(3){animation-delay:.4s} @keyframes vd-pisca{0%,100%{opacity:.35}50%{opacity:1}} .vd-card .vd-tag{top:10px;left:10px} .vd-apagar{display:grid} /* cartão flutuante da fila: dá pra sair da tela e continuar trabalhando */ .vd-fila{position:fixed;right:20px;bottom:20px;z-index:60;width:min(340px,calc(100% - 32px));display:flex;flex-direction:column;gap:12px;padding:18px 20px;background:var(--p-surface);border:1px solid var(--p-gold);border-radius:18px;box-shadow:0 18px 50px rgba(0,0,0,.45)} .vd-fila-ic{width:54px;height:54px;margin:0 auto;padding:10px;border:1px solid var(--p-gold);border-radius:50%;animation:vd-pulsa 2s ease-in-out infinite} .vd-fila-ic img{width:100%;height:100%;object-fit:contain;display:block} .vd-fila-txt{text-align:center;display:flex;flex-direction:column;gap:3px} .vd-fila-txt strong{font-size:14px;font-weight:600} .vd-fila-txt span{font-size:12px;color:var(--p-muted)} @keyframes vd-pulsa{50%{opacity:.5;box-shadow:0 0 0 8px rgba(209,183,127,.07)}} .vd-barra{height:4px;border-radius:4px;background:var(--p-line);overflow:hidden} .vd-barra i{display:block;width:35%;height:100%;background:var(--p-gold);animation:vd-corre 2s linear infinite} @keyframes vd-corre{from{transform:translateX(-100%)}to{transform:translateX(350%)}} .vd-orbita{width:92px;height:92px;padding:16px;border:1px solid var(--p-gold);border-radius:50%;animation:vd-pulsa 2s ease-in-out infinite} .vd-orbita img{width:100%;height:100%;object-fit:contain;display:block} .vd-gerando .vd-barra{width:min(100%,300px)} /* player e escolha de projeto */ .vd-player{width:min(100%,760px)} .vd-player-topo{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px} .vd-player video{width:100%;max-height:60dvh;background:#080a0c;border-radius:12px;display:block} .vd-player-acoes{margin-top:16px} .vd-player-acoes .btn{flex:1;min-height:48px;text-decoration:none} .vd-modal-largo{width:min(100%,720px);max-height:86dvh;overflow-y:auto} .vd-escolher-projeto{margin:14px 0 4px;grid-template-columns:repeat(auto-fill,minmax(140px,1fr))} @media (max-width:1100px){ .vd-mesa{grid-template-columns:1fr} .vd-painel .acao-principal{max-width:340px;margin-inline:auto} } @media (max-width:820px){ .vd-selo{min-width:0;padding:8px 12px} .vd-selo strong{font-size:20px} .vd-fila{right:12px;left:12px;bottom:12px;width:auto} .vd-previa{min-height:240px} } /* o sprite não traz tamanho próprio: dentro dos botões do módulo o ícone tem que ser miúdo (sem isto o "Criar novo vídeo" nasce com um ícone gigante — visto no teste de 14/set) */ #vdMain .btn svg,.vd-fila .btn svg,.vd-player .btn svg{width:18px;height:18px;flex:0 0 auto} #vdMain .pj-crumb svg{width:14px;height:14px} #vdMain .acao-principal svg{width:20px;height:20px} /* "ligado" no módulo de vídeo: a regra .btn.on do app só valia dentro do editor (.labui) */ #vdMain .btn.on{background:var(--p-tint);color:var(--p-gold);border-color:var(--p-gold)} /* --- O ASSISTENTE: CSS COPIADO DA ENTREGA DO DESIGN (14/set). Ordem dele: "quero idêntico". --- */ .vd-fluxo{margin:0 0 26px;padding-bottom:18px;border-bottom:1px solid var(--p-line)} .vd-fluxo>small{color:var(--p-gold);display:block;font-size:13px;margin-bottom:10px} .vd-fluxo>span{display:flex;gap:12px;flex-wrap:wrap;color:var(--p-muted);font-size:14px;align-items:center} .vd-fluxo .now{color:var(--p-gold);font-weight:600} .vd-acoes{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:28px 0} .vd-acoes>.btn:first-child{background:transparent;font-size:15px;min-height:50px} .vd-acoes .acao-principal{margin:0} .vd-acoes-um{justify-content:flex-start} /* paciente: dois cartões grandes */ .vd-sexos{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:760px} .vd-sexo{display:flex;flex-direction:column;gap:22px;padding:36px;min-height:240px;align-items:flex-start;text-align:left;cursor:pointer;color:var(--p-text);font:inherit} .vd-sexo svg{width:60px;height:60px;color:var(--p-gold);stroke-width:1.3} .vd-sexo strong{font-size:23px;font-weight:500} .vd-sexo>span{color:var(--p-gold);font-size:16px} .vd-sexo.on{border-color:var(--p-gold)} /* roupa e lugar: cartões em duas colunas com marca de escolha */ .vd-ops{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} .vd-op-linha{display:flex;align-items:center;min-height:114px;background:var(--p-surface);border:1px solid var(--p-line);text-align:left;justify-content:flex-start;padding:22px;gap:20px;border-radius:14px;color:var(--p-text);font:inherit;cursor:pointer} .vd-op-linha>svg{width:32px;height:32px;color:var(--p-gold);flex:0 0 auto} .vd-op-linha>span{flex:1 1 auto;min-width:0} .vd-op-linha strong{display:block;font-size:17px;font-weight:500;margin-bottom:8px} .vd-op-linha small{display:block;font-size:14px;line-height:1.5;color:var(--p-muted)} .vd-op-linha.on{border-color:var(--p-gold);background:var(--p-tint)} .vd-op-linha.on strong{color:var(--p-gold)} .vd-op-linha>span.vd-marca{flex:0 0 26px;width:26px;height:26px;aspect-ratio:1;border:1px solid var(--p-line);border-radius:50%;display:grid;place-items:center;color:var(--p-gold);min-width:26px} /* precisa do >span pra ganhar de .vd-op-linha>span{flex:1}, senão o círculo estica (14/set) */ .vd-op-linha.on .vd-marca{border-color:var(--p-gold)} .vd-marca svg{width:15px;height:15px} /* painel do assistente */ .vd-painel-largo,.vd-livre{max-width:760px;margin-top:14px} .vd-painel label{display:block;font-size:16px;font-weight:500;margin-bottom:10px} .vd-painel textarea{width:100%;font-size:17px;min-height:140px;padding:14px;border:1px solid var(--p-line);border-radius:12px;background:var(--p-control);color:var(--p-text);font-family:Inter,-apple-system,sans-serif;line-height:1.6;resize:vertical;-webkit-user-select:text;user-select:text} .vd-painel textarea:focus{outline:2px solid var(--p-gold);outline-offset:2px} .vd-vozes{display:grid;grid-template-columns:1fr 1fr;gap:14px} .vd-vozes button{display:flex;align-items:center;gap:18px;padding:22px;min-height:104px;text-align:left;border:1px solid var(--p-line);border-radius:14px;background:var(--p-control);color:var(--p-text);font:inherit;cursor:pointer} .vd-vozes svg{width:32px;height:32px;color:var(--p-gold);flex:0 0 auto} .vd-vozes strong{display:block;font-size:17px;font-weight:500;margin-bottom:8px} .vd-vozes small{display:block;font-size:14px;line-height:1.5;color:var(--p-muted)} .vd-vozes button.on{border-color:var(--p-gold);background:var(--p-tint)} .vd-vozes button.on strong{color:var(--p-gold)} .vd-tempo{display:grid;grid-template-columns:1fr auto;gap:10px;margin:18px 0} .vd-tempo span{padding:14px 18px;border:1px solid var(--p-line);border-radius:12px;background:var(--p-control);color:var(--p-muted);font-size:15px} .vd-tempo .on{border-color:var(--p-gold);color:var(--p-gold);background:var(--p-tint)} .vd-conta{text-align:right;font-size:13px;color:var(--p-muted);margin:8px 0 6px;font-variant-numeric:tabular-nums} .vd-ajuda{font-size:14px;color:var(--p-muted);line-height:1.6;margin:0 0 16px} .vd-pronto{font-size:16px;color:var(--p-muted);margin:18px 0 0} .vd-campo{margin-top:18px} /* conferir */ .vd-conferir h2{margin:0 0 10px} .vd-selo-tempo{display:inline-block;padding:5px 12px;border-radius:999px;font-size:12px;background:var(--p-tint);color:var(--p-gold);margin:0 0 10px} .vd-conferir-linha{display:flex;gap:12px;justify-content:space-between;align-items:center;border-bottom:1px solid var(--p-line);padding:16px 0} .vd-conferir-linha>div{min-width:0} .vd-conferir-linha small{font-size:13px;color:var(--p-muted)} .vd-conferir-linha p{color:var(--p-text);margin:5px 0 0;overflow-wrap:anywhere;font-size:16px} .vd-conferir-linha .btn{background:transparent;font-size:14px;flex-shrink:0;min-height:40px} .vd-conferir .acao-principal{margin:22px 0 16px} @media(max-width:1150px){ .vd-op-linha{padding:18px;gap:12px} } @media(max-width:820px){ .vd-ops,.vd-vozes,.vd-sexos{grid-template-columns:1fr} .vd-acoes{flex-wrap:wrap} .vd-acoes .acao-principal{width:100%;max-width:none;order:-1} .vd-fluxo>span{font-size:12px;gap:8px} .vd-sexo{padding:24px 16px;min-height:0} } /* --- cadastro dos prompts: SÓ do dono --- */ .vd-so-dono{margin-left:10px} .vd-aviso-dono{display:flex;align-items:flex-start;gap:8px;padding:12px 14px;margin-bottom:22px;border:1px solid var(--p-gold);border-radius:12px;background:var(--p-tint);font-size:12px;line-height:1.5} .vd-aviso-dono svg{width:18px;height:18px;color:var(--p-gold);flex:0 0 auto} .vd-moldes{display:flex;flex-direction:column;gap:14px} .vd-moldes textarea{width:100%;padding:12px 14px;border:1px solid var(--p-line);border-radius:12px;background:var(--p-control);color:var(--p-text);font:13px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;resize:vertical} .vd-moldes-acoes{max-width:520px;margin:16px 0 30px} .vd-secao-op{display:flex;align-items:center;justify-content:space-between;gap:12px} .vd-lista-op{display:flex;flex-direction:column;gap:8px;margin-bottom:26px} .vd-linha-op{display:grid;grid-template-columns:minmax(120px,1fr) minmax(180px,2fr) auto auto auto;gap:8px;align-items:center} .vd-linha-op.desligada{opacity:.5} .vd-linha-op input{min-height:44px;padding:0 12px;border:1px solid var(--p-line);border-radius:10px;background:var(--p-control);color:var(--p-text);font:13px Inter,-apple-system,sans-serif;min-width:0} .vd-linha-op .btn{min-height:44px;padding:8px 12px;font-size:12px} .vd-prompt{white-space:pre-wrap;word-break:break-word;font:12px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--p-control);border:1px solid var(--p-line);border-radius:12px;padding:14px;max-height:50dvh;overflow:auto;margin:12px 0} @media (max-width:820px){ .vd-galeria{grid-template-columns:repeat(2,minmax(0,1fr))} .vd-linha-op{grid-template-columns:1fr 1fr;gap:6px} .vd-linha-op .btn{grid-column:auto} } /* --- arrastar projeto pra dentro/fora de pasta (14/set, pedido dele) — feito pra DEDO, o aparelho é iPad --- */ body.pj-arrastando{-webkit-user-select:none;user-select:none;touch-action:none} .pj-levantado{opacity:.35} .pj-fantasma{position:fixed;z-index:90;transform:translate(-50%,-50%);pointer-events:none;padding:10px 16px;border:1px solid var(--p-gold);border-radius:12px;background:var(--p-surface);color:var(--p-text);font:13px/1 Inter,-apple-system,sans-serif;box-shadow:0 12px 30px rgba(0,0,0,.5);max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pj-alvo{border-color:var(--p-gold)!important;background:var(--p-tint)!important;color:var(--p-gold)!important} .pj-alvo svg{color:var(--p-gold)} /* --- os TRÊS tipos de vídeo: CSS COPIADO DA ENTREGA DO DESIGN (14/set), não redesenhado. Ordem dele: "segue à risca o que o design fez". Só troquei os nomes das classes para o padrão vd-*. --- */ .vd-tipos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:30px} .vd-tipo{display:block;text-align:left;padding:0;overflow:hidden;background:var(--p-surface);border:1px solid var(--p-line);border-radius:16px;transition:border-color .15s;color:var(--p-text);font:inherit;cursor:pointer;width:100%} .vd-tipo:hover,.vd-tipo.on{border-color:var(--p-gold)} .vd-tipo-arte{height:auto;min-height:0;padding:0;background:var(--p-control);border-bottom:1px solid var(--p-line);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:0;color:var(--p-gold)} .vd-modelo{position:relative;width:100%;height:260px;overflow:hidden;background:#080a0c} .vd-modelo>img{width:100%;height:100%;object-fit:cover;object-position:50% 32%} .vd-modelo-play{position:absolute;right:12px;bottom:12px;background:#121615b8;border:1px solid #d1b77f;border-radius:50%;padding:10px;display:flex} .vd-modelo-play svg{width:20px;height:20px;stroke-width:1.7} .vd-modelo-tag{position:absolute;top:12px;left:12px;border-radius:999px;padding:6px 10px;background:#121615cc;color:#d1b77f;font-size:11px;letter-spacing:.12em} .vd-modelo.cenario{background:#777258} .vd-modelo.cenario>img{width:76%;margin-left:12%;border-radius:90px 90px 0 0;position:relative;z-index:1} .vd-modelo.cenario:before,.vd-modelo.cenario:after{content:'';position:absolute;background:#444f40;border-radius:50%;width:160px;height:280px;bottom:-120px;left:-80px;transform:rotate(-30deg)} .vd-modelo.cenario:after{left:auto;right:-100px;background:#b3a077;bottom:-100px} .vd-modelo.cenario .vd-modelo-tag,.vd-modelo.cenario .vd-modelo-play{z-index:2} .vd-tipo-rotulo{display:block;padding:12px;font-size:13px} .vd-tipo-txt{padding:22px} .vd-tipo-txt strong{display:block;font-size:22px;font-weight:500;line-height:1.3;margin:12px 0} .vd-tipo-txt>span{display:block;font-size:16px;min-height:100px;color:var(--p-muted);line-height:1.6} .vd-tipo-txt small{font-size:12px;color:var(--p-muted)} .vd-tipo-txt em{display:flex;align-items:center;justify-content:space-between;font-style:normal;color:var(--p-gold);font-size:15px;font-weight:600;margin-top:24px} .vd-nota-tipos{font-size:14px;text-align:center;margin:26px auto;max-width:560px} .vd-navega-um{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:28px 0} .vd-navega-um .btn{background:transparent;font-size:15px;min-height:50px} @media(max-width:1150px){ .vd-tipos{grid-template-columns:1fr} .vd-tipo{display:grid;grid-template-columns:210px 1fr} .vd-modelo{height:220px} .vd-tipo-arte{border-right:1px solid var(--p-line);border-bottom:0;height:100%} .vd-tipo-rotulo{margin:auto} .vd-tipo-txt{padding:22px} .vd-tipo-txt>span{min-height:0} .vd-tipo-txt strong{margin-top:12px} .vd-tipo-txt em{margin-top:24px} } @media(max-width:540px){ .vd-tipo{grid-template-columns:112px 1fr} .vd-modelo{height:100%;min-height:226px} .vd-tipo-rotulo{display:none} .vd-modelo-tag{font-size:9px;left:6px;top:8px;padding:5px} .vd-modelo-play{right:8px;bottom:8px;padding:6px} .vd-modelo-play svg{width:16px;height:16px} .vd-tipo-txt{padding:16px} .vd-tipo-txt strong{font-size:21px} .vd-tipo-txt>span{font-size:15px} .vd-tipo-txt em{font-size:14px} } .vd-linha-op{grid-template-columns:minmax(110px,1fr) minmax(130px,1.2fr) minmax(160px,1.6fr) auto auto auto} .vd-op-d{min-width:0} /* (14/set) A caixa FLUTUANTE de pintura mora no palco, fora de .labui — então as fileiras ".row" do bloco ficavam sem flex nenhum: os botões encostavam um no outro e o Pincel encolhia até a palavra (ele: "achatado, desproporcional"). Aqui as duas fileiras ganham o mesmo respiro do "Visível · Fechar" do cabeçalho (8 px) e a largura passa a acompanhar a palavra. */ .flut-pint .pint-canetas,.flut-pint .pint-acoes{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .flut-pint .pint-canetas .btn,.flut-pint .pint-acoes .btn{flex:0 0 auto;min-width:0;padding:10px 18px} /* ================= 🏠 A CASA: PACIENTES · DESIGN DO SORRISO · VÍDEOS COM IA (15/set) ================= Etapa 2 do guia "Pacientes, designs e vídeos". As medidas são as dele (guia §3 e protótipo): topo 64px + área segura · lateral 260px · card de paciente 3:4 raio 16 · título 32/500 · toque ≥ 44px. Tudo escopado em .casa pra não encostar no editor. Cores = os tokens --p-* que já existem (nada de paleta nova). */ /* A CASA OCUPA A TELA E O MIOLO ROLA POR DENTRO (15/set, ele: 'a tela está travada, não consigo deslizar pra cima' na conferência do vídeo). O body tem overflow:hidden (o editor precisa); com min-height a casa CRESCIA além da tela e nada rolava. Agora a altura é fixa e cada coluna rola sozinha (a lateral já rolava). */ .casa{display:flex;flex-direction:column;height:100dvh;min-height:100dvh;background:var(--p-canvas);color:var(--p-text)} /* regra base do guia: SVG sem tamanho vira um bloco de 300x150 no navegador — todo ícone da casa nasce 22px de traço */ .casa svg,.modal.casa svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0} .casa .ic-sorriso,.modal.casa .ic-sorriso{fill:currentColor;stroke:none} .casa-topo{height:calc(64px + env(safe-area-inset-top));padding:10px 24px;padding-top:calc(10px + env(safe-area-inset-top));background:var(--p-surface);border-bottom:1px solid var(--p-line);display:flex;justify-content:space-between;align-items:center;flex:0 0 auto} .casa-topo .map-logo img{width:170px} /* SEM display aqui (19/set, bug dele): com display:block esta regra ganhava de '.map-logo .escuro{display:none}' e no tema claro os DOIS logos apareciam empilhados, subindo pra fora do topo */ .casa-topo-dir{display:flex;align-items:center;gap:18px} .casa-usuario{font-size:12px;color:var(--p-muted)} .casa-corpo{display:grid;grid-template-columns:260px 1fr;flex:1 1 auto;min-height:0} .casa-lat{background:var(--p-surface);border-right:1px solid var(--p-line);padding:22px 12px;overflow-y:auto} /* MENU MAIOR (ordem dele, 15/set, pela 2ª vez): "o menu lateral esquerdo, os botões serem maiores — fica a tela inteira do iPad e três botões pequenos lá em cima, escondidos". */ .casa-lat{padding:22px 14px} .casa-lat .lat-item{width:100%;min-height:64px;display:flex;align-items:center;justify-content:flex-start;gap:16px;border:1px solid transparent;border-radius:14px;background:none;color:var(--p-text);text-align:left;font:inherit;font-size:18px;margin-bottom:12px;padding:16px 18px;cursor:pointer} /* todos os ícones da lateral ocupam a MESMA coluna de 28px, centralizados — é o que alinha um embaixo do outro */ .casa-lat .lat-item svg{width:28px;height:28px;color:var(--p-gold);flex-shrink:0} /* o ícone do sorriso é o da marca (arquivo do design), preenchido. MESMA caixa de 22px dos outros dois — é o que mantém os três textos alinhados na mesma coluna (ele, 15/set: 'alinhado com os outros e não deslocado à direita'). Ele parece maior porque o desenho é largo e baixo (viewBox 72×44) e ocupa a caixa inteira na largura. */ /* o sorriso é largo e baixo (viewBox 72×44): numa caixa quadrada ele encolhe e parece deslocado. Aqui a caixa é a MESMA dos outros (28px) e o desenho é esticado até preenchê-la, centralizado. */ .casa-lat .lat-item .ic-sorriso{width:28px;height:28px;fill:currentColor;stroke:none;color:var(--p-gold)} .casa-lat .lat-item.on{background:var(--p-tint);color:var(--p-gold);border-color:var(--p-gold)} .casa-lat .eyebrow{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--p-muted);margin:28px 14px 16px} .casa-lat .lat-pasta{display:flex;align-items:center} .casa-lat .lat-pasta .lat-item{flex:1;min-width:0} .casa-lat .lat-pasta .lat-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .casa-lat .lat-pasta .lat-lapis{width:44px;min-height:44px;padding:8px;border:0;background:none;color:var(--p-gold);cursor:pointer} .casa-lat .lat-fim{margin-top:24px;font-size:12px;color:var(--p-muted);line-height:1.6;padding:0 14px} .casa-main{padding:26px 30px 60px;max-width:1500px;width:100%;margin:0 auto;min-width:0;min-height:0;height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain} .casa .crumb{display:flex;align-items:center;gap:10px;color:var(--p-muted);font-size:13px;margin-bottom:24px;flex-wrap:wrap} .casa .crumb button{border:0;padding:0;background:none;font:inherit;font-size:13px;color:var(--p-muted);cursor:pointer} .casa h1{font-size:32px;font-weight:500;letter-spacing:-.5px;margin:0 0 10px} .casa h2{font-size:19px;font-weight:500;margin:0 0 12px} .casa p{line-height:1.6;color:var(--p-muted);margin:8px 0 18px} .casa .cab{display:flex;align-items:center;justify-content:space-between;gap:22px;margin-bottom:26px} .casa .cab .btn.primary{min-height:56px;font-weight:600} .casa .ferr{display:flex;gap:12px;margin:24px 0} .casa .ferr input{flex:1;min-height:48px;border:1px solid var(--p-line);border-radius:12px;background:var(--p-control);color:var(--p-text);padding:12px 14px;font:inherit;-webkit-user-select:text;user-select:text} /* pastas */ .casa .pastas{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin:20px 0 30px} .casa .pasta-tile{position:relative;min-width:0} .casa .pasta-card{width:100%;height:100%;padding:20px 52px 20px 20px;background:var(--p-surface);border:1px solid var(--p-line);border-radius:12px;display:flex;align-items:flex-start;gap:12px;text-align:left;color:var(--p-text);cursor:pointer;font:inherit;min-height:46px} .casa .pasta-lapis{position:absolute;right:6px;top:8px;background:none;border:0;padding:10px;color:var(--p-gold);cursor:pointer;min-height:44px} .casa .voltar{margin-bottom:16px} .casa .voltar .btn{min-height:46px;font-size:15px} .casa .contagem{font-size:16px;font-weight:600;margin:0 0 12px} .casa .pasta-card svg{color:var(--p-gold);width:28px;height:28px;flex-shrink:0} .casa .pasta-card strong{display:block;font-weight:500} .casa .pasta-card small{display:block;color:var(--p-muted);font-size:12px} /* cards de paciente */ .casa .pacientes{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px} .casa .pac-card{position:relative;border:1px solid var(--p-line);border-radius:16px;padding:0;overflow:hidden;background:var(--p-surface);text-align:left} .casa .pac-abrir{display:block;width:100%;padding:0;border:0;background:none;text-align:left;color:var(--p-text);cursor:pointer;font:inherit} .casa .retrato{height:210px;background:var(--p-control);display:flex;align-items:center;justify-content:center;overflow:hidden} .casa .retrato img{width:100%;height:100%;object-fit:cover;object-position:50% 30%} .casa .iniciais{font-size:46px;font-weight:300;color:var(--p-gold)} .casa .pac-corpo{padding:16px} .casa .pac-corpo strong{font-size:16px;font-weight:500;display:block;margin-bottom:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .casa .pac-corpo small{color:var(--p-muted);font-size:12px;line-height:1.6} .casa .pac-menu{position:absolute;top:10px;right:10px;width:44px;min-height:44px;padding:8px;border-radius:50%;background:#121615b8;border:0;color:#eef0eb;cursor:pointer} /* área do paciente */ .casa .faixa{display:flex;align-items:center;gap:18px} .casa .faixa p{margin:0} .casa .avatar{position:relative;width:80px;height:80px;border-radius:16px;background:var(--p-control);display:grid;place-items:center;font-size:30px;color:var(--p-gold);flex-shrink:0;overflow:hidden} .casa .avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .casa .selo{font-size:12px;padding:5px 10px;border:1px solid var(--p-line);border-radius:999px;color:var(--p-gold);display:inline-block} .casa .abas{display:flex;gap:8px;overflow:auto;margin:28px 0;border-bottom:1px solid var(--p-line);padding-bottom:14px;scrollbar-width:none} .casa .abas::-webkit-scrollbar{display:none} .casa .abas .btn{white-space:nowrap;background:none} /* 'ligado' dentro da casa: a regra .btn.on do app só valia dentro do editor (.labui) */ .casa .btn.on{background:var(--p-tint);color:var(--p-gold);border-color:var(--p-gold)} .casa .secoes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px} .casa .secao-card{background:var(--p-surface);border:1px solid var(--p-line);border-radius:16px;padding:24px;text-align:left;display:flex;align-items:flex-start;gap:18px;min-height:155px;color:var(--p-text);cursor:pointer;font:inherit} .casa .secao-ic{color:var(--p-gold);padding:13px;border:1px solid var(--p-line);border-radius:14px;flex-shrink:0} .casa .secao-ic svg{width:26px;height:26px} .casa .secao-card h2{margin:0 0 8px} .casa .secao-card p{font-size:14px;margin:0 0 12px} .casa .secao-card .seta{margin-left:auto;color:var(--p-gold)} .casa .secao-card>div:nth-child(2){min-width:0} .casa .secoes+.contagem{margin-top:30px} /* 15/set: 'Adicionados recentemente' estava colado no cartao de cima */ .casa .recentes{background:var(--p-surface);border:1px solid var(--p-line);border-radius:16px;padding:8px 22px} .casa .linha-arq{display:flex;gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid var(--p-line)} .casa .linha-arq:last-child{border:0} .casa .linha-arq>svg{color:var(--p-gold)} .casa .linha-arq>div{flex:1;min-width:0} .casa .linha-arq strong{font-weight:500;display:block;overflow-wrap:anywhere} /* grades de mídia e vazios */ .casa .midia{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px} .casa .midia-card{position:relative;border:1px solid var(--p-line);border-radius:16px;overflow:hidden;background:var(--p-surface);min-width:0} .casa .midia-abrir{width:100%;display:block;padding:0;border:0;border-radius:0;background:none;text-align:left;color:var(--p-text);cursor:pointer;font:inherit} .casa .midia-thumb{aspect-ratio:3/4;position:relative;overflow:hidden;background:var(--p-control)} .casa .midia-thumb img{width:100%;height:100%;object-fit:cover} .casa .midia-vazia{height:100%;display:grid;place-items:center;color:var(--p-gold)} .casa .midia-vazia svg{width:48px;height:48px} .casa .midia-leg{padding:12px 14px} .casa .midia-leg strong{display:block;font-size:14px;font-weight:600;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;margin-bottom:5px} .casa .vazio{border:1px dashed var(--p-line);border-radius:16px;padding:45px 22px;text-align:center;background:var(--p-surface)} .casa .vazio>svg{width:40px;height:40px;color:var(--p-gold);margin-bottom:18px} .casa .nota{border:1px solid var(--p-line);border-radius:12px;padding:16px 20px;margin-top:20px;color:var(--p-muted);font-size:13px;line-height:1.6} .casa .escolhas{display:grid;gap:14px} .casa .escolhas .btn{padding:22px;text-align:left;justify-content:flex-start;background:var(--p-surface);min-height:46px} .casa .escolhas strong,.casa .escolhas small{display:block} .casa .escolhas small{color:var(--p-muted);font-size:12px} .casa .escolhas svg{color:var(--p-gold)} .casa-hamb{display:none} @media (max-width:1000px){ .casa .secoes{grid-template-columns:1fr} .casa .secao-card{min-height:125px} } @media (max-width:820px){ .casa-corpo{grid-template-columns:1fr} .casa-lat{display:none} .casa-lat.aberta{display:block;position:fixed;top:calc(64px + env(safe-area-inset-top));bottom:0;width:260px;z-index:10;overflow:auto} .casa-hamb{display:inline-flex} .casa-topo{padding-left:16px;padding-right:16px} .casa-usuario{display:none} .casa-main{padding:22px 16px 60px} .casa .cab{flex-wrap:wrap} .casa .pacientes{grid-template-columns:repeat(auto-fill,minmax(145px,1fr))} .casa .retrato{height:190px} .casa .faixa h1{font-size:27px} .casa .ferr{flex-wrap:wrap} .casa .ferr input{min-width:100%} .casa .secao-card{padding:18px;gap:12px} .casa .secao-ic{padding:10px} .casa h1{font-size:28px} .casa .linha-arq{gap:10px} .casa .avatar{width:62px;height:62px} } /* ---- 20/set · leva 3: FORA do paciente não há lateral (as três portas morreram); o miolo ocupa a largura toda ---- */ .casa.sem-lateral .casa-lat{display:none!important} .casa.sem-lateral .casa-corpo{grid-template-columns:1fr} .casa.sem-lateral .casa-hamb{display:none!important} .casa.sem-lateral .casa-main{max-width:none;padding-left:max(30px,calc(50% - 430px));padding-right:max(30px,calc(50% - 430px))} /* a lista de pacientes no miolo do protótipo (página de 920 px centrada). 27/set: quem rola ocupa a LARGURA TODA e a página fica centrada pela margem — com max-width a barra de rolagem aparecia no meio da tela do computador e sobrava um vão vazio à direita */ @media (max-width:820px){ .casa.sem-lateral .casa-main{padding-left:16px;padding-right:16px} } /* '← Voltar ao início' (protótipo .es-back) + busca com rótulo em cima (.es-field) — ele, 20/set: "gosto mais assim" */ .casa .btn-voltar{border:0;background:transparent;color:var(--p-muted);display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0;font:inherit;font-size:17px;cursor:pointer;margin-bottom:22px} /* ele, 20/set: o de 13 px 'está tímido' */ .casa .btn-voltar svg{width:24px;height:24px;color:var(--p-muted)} .casa .cab h1{margin:0} .casa .cab > .btn:not(.primary){min-height:48px;padding:12px 18px;font-size:14px;font-weight:500;border-radius:9px;background:var(--p-surface)} /* só o neutro ('+ Criar paciente'); o dourado (Novo design…) continua dourado */ .casa.sem-lateral .cab{margin:0 0 28px} .casa .campo-busca{display:flex;flex-direction:column;gap:9px;font-size:15px;margin:0 0 30px} .casa .campo-busca input{width:100%;min-height:58px;border:1px solid var(--p-line);border-radius:12px;background:var(--p-surface);color:var(--p-text);padding:14px 18px;font:inherit;font-size:18px;-webkit-user-select:text;user-select:text} .casa .campo-busca input::placeholder{color:var(--p-muted)} .casa .campo-busca input:focus{outline:0;border-color:var(--p-gold);box-shadow:0 0 0 1px var(--p-gold)} /* borda dourada no foco, como no print dele */ /* tela Criar paciente (protótipo .es-patient-form) — ele, 20/set: "aqui também tem que seguir" */ .casa .form-card{max-width:560px;background:var(--p-surface);padding:28px;border-radius:14px;border:1px solid var(--p-line)} .casa .form-foto{display:flex;gap:16px;align-items:center;margin-bottom:24px} .casa .form-foto .avatar{width:64px;height:64px;border-radius:50%;border:1px solid var(--p-line)} .casa .form-foto .avatar.avatar-vazio svg{width:22px;height:22px;color:var(--p-gold)} .casa .form-foto .campo{margin:0;min-width:0;flex:1} .casa .campo{display:flex;flex-direction:column;gap:8px;font-size:14px;margin:0 0 22px} .casa .campo small{color:var(--p-muted);font-size:12px} .casa .campo input[type=text]{width:100%;min-height:54px;border:1px solid var(--p-line);border-radius:10px;background:var(--p-surface);color:var(--p-text);padding:13px 16px;font:inherit;font-size:17px;-webkit-user-select:text;user-select:text} .casa .campo input[type=text]::placeholder{color:var(--p-muted)} .casa .campo input[type=text]:focus{outline:0;border-color:var(--p-gold);box-shadow:0 0 0 1px var(--p-gold)} /* o campo da foto é uma caixa igual à do nome (protótipo: .es-field input, 47 px, padding 12) e o botão nativo segue o tema escuro */ .casa .campo input[type=file]{font-size:13px;min-height:54px;padding:12px 14px;border-radius:10px;max-width:100%;border:1px solid var(--p-line);border-radius:9px;background:var(--p-surface);color:var(--p-text);color-scheme:dark} .casa .campo input[type=file]::file-selector-button{background:var(--p-control);color:var(--p-text);border:1px solid var(--p-line);border-radius:6px;padding:5px 10px;margin-right:10px;font:inherit;font-size:12px} .casa.sem-lateral h1{font-size:30px;font-weight:400;letter-spacing:-.8px;line-height:1.22} /* títulos das telas do protótipo (fora do paciente): 30/400 */ .casa .resumo-prof{padding:15px;background:var(--p-control);border-radius:9px;margin:4px 0 20px;font-size:13px} .casa .resumo-prof small{display:block;color:var(--p-muted);margin-bottom:6px} .casa .resumo-prof strong{font-weight:500;display:block} .casa .resumo-prof strong + small{margin:4px 0 0} .casa .form-nota{font-size:12px;color:var(--p-muted);margin:0 0 4px} .casa .form-fim{display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap;margin-top:25px} .casa .form-fim .btn{min-height:48px;padding:12px 18px;font-size:14px;font-weight:500;border-radius:9px;background:var(--p-surface)} /* .es-action */ .casa .form-fim .btn.primary{background:var(--p-solid);border-color:var(--p-solid);color:var(--p-on)} .casa .form-fim .btn svg{width:16px;height:16px} /* ---- 19/set · ÁREA DO PACIENTE (leva 2): a lateral vira o menu DO PACIENTE, cabeçalho com foto + nome + profissional ---- */ .casa-lat.paciente{display:flex;flex-direction:column} .casa-lat.paciente > .lat-item{display:none} /* as três portas somem enquanto um paciente está aberto */ .casa-lat.paciente #casaLatPastas{display:flex;flex-direction:column;flex:1 1 auto;min-height:0} .casa-lat.paciente .eyebrow{margin:6px 14px 18px;font-size:14px;letter-spacing:.16em;color:var(--p-text)} /* ele, 20/set: "aumenta o título ÁREA DO PACIENTE" */ .casa-lat .lat-menu{display:flex;flex-direction:column} .casa-lat .lat-item .ic-menu-dele{width:30px;height:30px;fill:none;stroke:none} /* ícones dele (menus novos): a cor já é currentColor por dentro */ .casa-lat .lat-rodape{margin-top:auto;padding-top:20px;border-top:1px solid var(--p-line)} .casa-lat .lat-fechar{color:var(--p-muted);font-size:16px;min-height:56px;margin-bottom:0} .casa-lat .lat-fechar svg{color:var(--p-muted);width:24px;height:24px} /* a faixa do paciente com fundo próprio, de borda a borda do miolo (protótipo .es-context) — ele, 20/set: "destaca um pouco mais" */ .casa .contexto{display:flex;align-items:center;justify-content:space-between;gap:22px;margin:-26px -30px 28px;padding:16px 30px;background:var(--p-surface);border-bottom:1px solid var(--p-line)} /* ele, 20/set: "tem espaço dentro do retângulo e ficou tudo espremido" — foto maior e texto com ar, SEM crescer o retângulo (20+96+20 = 28+80+28) */ .casa .contexto .avatar{width:96px;height:96px;border-radius:50%;border:1px solid var(--p-line);font-size:34px} .casa .contexto h1{margin:0;font-size:30px;line-height:1.15;overflow-wrap:anywhere} .casa .contexto .faixa{gap:22px} .casa .contexto .ctx-eyebrow{font-size:11px;margin-bottom:7px} .casa .contexto .ctx-prof{margin-top:9px;font-size:13px;line-height:1.3} .casa .contexto .ctx-prof span{font-size:15px;margin-top:3px} .casa .ctx-eyebrow{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--p-gold);margin-bottom:5px;font-weight:500} .casa .ctx-prof{margin:7px 0 0;font-size:13px;color:var(--p-muted);line-height:1.4} .casa .ctx-prof span{display:block;color:var(--p-text);margin-top:2px} .casa .abas-paciente{display:none} @media (max-width:820px){ .casa .abas-paciente{display:flex;margin-top:0} .casa .contexto{flex-wrap:wrap;margin:-22px -16px 22px;padding:22px 16px} .casa-lat.paciente{display:none} /* no celular a lateral (também a do paciente) só abre pelo ☰ */ .casa-lat.paciente.aberta{display:flex} } /* ================= 🚪 PORTA DE ENTRADA POR PACIENTE (19/set) ================= Medidas do protótipo 'Porta de entrada - Pacientes' (iPad em pé): miolo 730 px centrado, padding 65/42, título 32, cartão em linha (ícone 52 · texto · seta), título do cartão 19, texto 14, cantos 14. Cores = tokens do app. */ .entrada .en-corpo{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;width:100%;max-width:730px;margin:0 auto;padding:65px 42px 42px} .entrada .en-eyebrow{font-size:11px;letter-spacing:2px;color:var(--p-gold);margin-bottom:12px;font-weight:500} .entrada h1{font-size:32px;font-weight:400;letter-spacing:-.8px;line-height:1.22;margin:0} .entrada .en-sub{color:var(--p-muted);margin:12px 0 0;max-width:550px;font-size:14px;line-height:1.5} .entrada .en-escolhas{display:grid;grid-template-columns:1fr;gap:16px;margin-top:34px} .entrada .en-escolha{min-height:125px;display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:19px;padding:24px;background:var(--p-surface);border:1px solid var(--p-line);border-radius:14px;color:var(--p-text);text-align:left;font:inherit;cursor:pointer} .entrada .en-escolha:first-child{border-color:var(--p-gold)} /* o primeiro cartão é o destaque (protótipo) */ .entrada .en-escolha:active{background:var(--p-control);border-color:var(--p-gold)} .entrada .en-escolha-ic{width:52px;height:52px;border:1px solid var(--p-line);border-radius:50%;display:grid;place-items:center;color:var(--p-gold)} .entrada .en-escolha-ic svg{width:26px;height:26px} .entrada .en-escolha-txt{display:flex;flex-direction:column;gap:8px;min-width:0} .entrada .en-escolha-txt strong{font-size:19px;font-weight:500;line-height:1.3} .entrada .en-escolha-txt span{font-size:14px;line-height:1.5;color:var(--p-muted);max-width:350px} .entrada .en-seta{width:22px;height:22px;color:var(--p-gold)} /* o profissional no topo: monograma + nome + área; toque = perfil */ .entrada .en-conta{display:flex;align-items:center;gap:10px;border:0;background:transparent;padding:4px 8px 4px 4px;border-radius:9px;min-height:46px;max-width:260px;color:var(--p-text);font:inherit;font-size:13px;text-align:left;cursor:pointer} .entrada .en-conta:active{background:var(--p-control)} .entrada .en-monograma{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--p-line);border-radius:50%;font-size:12px;background:var(--p-control);flex-shrink:0} .entrada .en-conta-txt{display:flex;flex-direction:column;min-width:0} .entrada .en-conta-txt span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .entrada .en-conta-txt small{color:var(--p-muted);font-size:11px} /* perfil */ .en-perfil h2{margin:0 0 18px} .en-perfil .en-campo{display:flex;flex-direction:column;gap:8px;font-size:12px;font-weight:600;margin-bottom:18px} .en-perfil .en-campo .pj-campo{margin:0;font-weight:400} .en-perfil .en-opcoes{display:flex;gap:8px;flex-wrap:wrap} .en-perfil .en-opcoes .btn{flex:1 1 auto;font-weight:400;font-size:14px} .en-perfil .en-nota{font-size:13px;color:var(--p-muted);margin:0 0 20px;font-weight:400} @media (max-width:620px){ .entrada .casa-topo{padding-left:16px;padding-right:16px} .entrada .en-conta-txt{display:none} .entrada .en-corpo{padding:42px 22px} .entrada h1{font-size:27px} .entrada .en-escolha{grid-template-columns:42px minmax(0,1fr);padding:19px;gap:14px;min-height:0} .entrada .en-escolha-ic{width:42px;height:42px} .entrada .en-escolha-txt strong{font-size:17px} .entrada .en-escolha-txt span{font-size:13px} .entrada .en-seta{display:none} } /* ⚠️ a caixa flutuante usa a classe .casa pra herdar os estilos da casa — mas .casa tem min-height:100dvh (é o esqueleto da tela inteira). Sem isto a caixinha ocupava a altura toda do iPad. */ .sh-escolha-designs{display:flex;flex-direction:column;gap:10px;margin:14px 0 6px} .sh-escolha-designs .btn{min-height:52px;justify-content:space-between;font-size:15px} .sh-escolha-designs .btn small{color:var(--p-muted);font-weight:500} .modal-fundo .modal.casa{display:block;height:auto;min-height:0;width:min(100%,520px);max-height:90dvh;overflow:auto;scrollbar-width:none} .modal-fundo .modal.casa::-webkit-scrollbar{display:none} .modal-fundo .modal.casa h2{margin:0 0 8px} /* dentro da caixa, a ação principal continua dourada (a regra .casa .escolhas .btn ganhava de .btn.primary) */ .casa .escolhas .btn.primary{background:var(--p-solid);color:var(--p-on);border-color:transparent} .casa .escolhas .btn.primary svg{color:var(--p-on)} .casa .escolhas .btn.primary small{color:var(--p-on);opacity:.75} /* visualizador de fotos (guia, revisão visual das galerias): anterior/próxima, contador e setas do teclado */ .modal-fundo .modal.casa.visor{width:min(900px,calc(100% - 32px))} .casa .visor-img{width:100%;height:60dvh;object-fit:contain;background:#080a0c;border-radius:12px} .casa .slide-ctrl{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:18px} .casa .slide-ctrl span{font-size:13px;color:var(--p-muted)} .casa .btn:disabled{opacity:.35;cursor:default} /* Design do sorriso: a ação principal e o "Casos para treinamento" lado a lado */ .casa .acoes-dupla{display:flex;gap:12px;flex-wrap:wrap} /* Meus treinamentos: as ações dentro do card */ .casa .treino-acoes{display:flex;flex-wrap:wrap;gap:8px;padding:0 12px 14px} .casa .treino-acoes .btn{font-size:12px;padding:8px 10px;min-height:40px} /* vídeo pronto: marca de reprodução no card */ .casa .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#121615aa;border:1px solid var(--p-gold);color:var(--p-gold);width:58px;height:58px;border-radius:50%;display:grid;place-items:center;font-size:26px} @media (max-width:600px){ .casa .visor-img{height:52dvh} .casa .slide-ctrl .btn{font-size:13px;padding:10px} } /* ================= AÇÃO PRINCIPAL IMPONENTE (ordem dele, 15/set) ================= "esse botão novo paciente… deixa ele mais largo, mais imponente, ele tá estreito, pequeno, tem que chamar atenção" · e em Design do sorriso / Vídeos com IA a ação desce pro meio da tela. */ /* 20/set (ele, print do protótipo): botão da seção do paciente no tamanho do .es-action.es-primary — 48 px, letra 14, sem largura mínima */ .casa .cab .btn.primary{min-width:0;min-height:48px;padding:12px 18px;font-size:14px;font-weight:500;border-radius:9px} .casa .cab .btn.primary svg{width:18px;height:18px} .casa-lat.paciente ~ .casa-main .cab h2,.casa .contexto ~ .cab h2,.casa .contexto ~ .abas-paciente ~ .cab h2,.casa .pj-miolo .cab h2{font-size:22px;font-weight:400;letter-spacing:-.45px;margin:0 0 7px} /* título da seção (protótipo .es-content h2: 22/400) */ .casa .contexto ~ .cab p,.casa .contexto ~ .abas-paciente ~ .cab p,.casa .pj-miolo .cab p{font-size:13px;margin:0} .casa .cab-lado{display:flex;align-items:center;justify-content:center;min-width:260px} .casa .cab-lado .btn{min-height:56px;padding:14px 22px} /* o bloco do meio: ícone grande, a frase e o botão, tudo centralizado */ .casa .hero{border:1px dashed var(--p-line);border-radius:16px;background:var(--p-surface);padding:46px 24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px;margin-bottom:30px} .casa .hero .hero-ic{width:76px;height:76px;color:var(--p-gold)} .casa .hero .ic-sorriso.hero-ic{fill:currentColor;stroke:none} .casa .hero .hero-titulo{font-size:24px;font-weight:500;margin:0} .casa .hero .hero-frase{font-size:16px;line-height:1.6;color:var(--p-muted);margin:0;max-width:560px} .casa .hero .hero-btn{min-height:64px;min-width:300px;padding:18px 34px;font-size:18px;font-weight:600} /* a promessa de onde o trabalho vai ficar guardado (ele, 15/set) */ .casa .hero .hero-nota{font-size:13px;color:var(--p-muted);margin:0;opacity:.85} /* selo dos créditos no topo de Vídeos com IA (o mesmo do módulo) */ .casa .vd-selo{display:inline-flex;align-items:baseline;gap:8px;border:1px solid var(--p-line);border-radius:999px;padding:10px 18px;color:var(--p-gold)} .casa .vd-selo strong{font-size:20px;font-weight:600} .casa .vd-selo span{font-size:12px;color:var(--p-muted)} .casa .vd-selo-pouco{border-color:var(--p-gold)} .casa .vd-selo-vazio{border-color:#b45b5b;color:#e0a0a0} .casa .midia-vazia .ic-sorriso{width:48px;height:48px;fill:currentColor;stroke:none} /* o sorriso da marca onde quer que ele apareça na casa: preenchido, nunca traço */ .casa .ic-sorriso,.modal.casa .ic-sorriso{fill:currentColor;stroke:none} .casa .secao-ic .ic-sorriso{width:26px;height:26px} .casa .vazio>.ic-sorriso{width:40px;height:40px} .casa .linha-arq>.ic-sorriso{width:22px;height:22px} @media (max-width:820px){ .casa .cab .btn.primary{min-width:0;width:100%} .casa .cab-lado{min-width:0;width:100%} .casa .hero{padding:34px 18px} .casa .hero .hero-ic{width:60px;height:60px} .casa .hero .hero-titulo{font-size:21px} .casa .hero .hero-btn{min-width:0;width:100%} } /* ================= 📷 FOTO DA ÁREA DE TRABALHO (15/set): o "clique" — clarão + a foto encolhendo pro canto ================= */ .foto-flash{position:absolute;inset:0;z-index:40;background:#fff;opacity:.85;pointer-events:none;transition:opacity .45s ease} .foto-flash.some{opacity:0} .foto-voa{position:absolute;z-index:41;pointer-events:none;object-fit:cover;border:2px solid #d1b77f;border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,.55);transform-origin:left top;opacity:1;transition:transform .85s cubic-bezier(.2,.8,.2,1),opacity .35s ease .75s} .foto-voa.vai{opacity:0} /* ================= ▶ MODO DE APRESENTAÇÃO (15/set): tela cheia, dedo, setas do teclado e play automático ================= */ .apresenta{position:fixed;inset:0;z-index:200;background:#000;color:#fff;-webkit-user-select:none;user-select:none;touch-action:none;overflow:hidden} .apresenta>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .5s ease;pointer-events:none} .apresenta>img.on{opacity:1} .apresenta .ap-topo{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;padding-top:calc(14px + env(safe-area-inset-top));background:linear-gradient(rgba(0,0,0,.65),transparent);transition:opacity .4s} .apresenta .ap-seta{position:absolute;top:calc(50% - 28px);z-index:2;width:56px;height:56px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.45);color:#fff;cursor:pointer;transition:opacity .4s} .apresenta .ap-seta.esq{left:14px}.apresenta .ap-seta.dir{right:14px} /* 24/set (ele): centralizada por top:calc(50% - 28px), SEM transform — no iPad o toque mexia no translateY e a seta descia e voltava; o efeito de onda do iPad fica igual ao do visualizador */ .apresenta.quieto .ap-topo,.apresenta.quieto .ap-seta{opacity:0} .apresenta .ap-btn{min-height:44px;padding:8px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.45);color:#fff;font:inherit;font-size:14px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:8px} .apresenta .ap-btn.on{background:#d1b77f;color:#20271f;border-color:#d1b77f} .apresenta svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block;margin:auto} .apresenta .ap-cont{font-size:13px;letter-spacing:.08em;color:rgba(255,255,255,.85);white-space:nowrap} .apresenta .ap-nome{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1} .apresenta .ap-dir{display:flex;align-items:center;gap:10px;flex-shrink:0} /* ================= SELEÇÃO PRA APRESENTAR (15/set): toca nas fotos, marca, e apresenta só as marcadas ================= */ .casa .cab-acoes{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end} .casa .contagem-sel{font-size:14px;color:var(--p-muted);white-space:nowrap} .casa .marca-sel{display:none;position:absolute;top:10px;left:10px;width:30px;height:30px;border-radius:50%;background:rgba(18,22,20,.7);border:2px solid #fff;color:#fff;font-weight:700;font-size:16px;line-height:26px;text-align:center} .casa .midia.selecionando .midia-thumb{position:relative} .casa .midia.selecionando .marca-sel{display:block} .casa .midia.selecionando .midia-card.on{outline:3px solid var(--p-gold);outline-offset:-3px} .casa .midia.selecionando .midia-card.on .marca-sel{background:var(--p-gold);border-color:var(--p-gold);color:#20271f} /* vídeo: foto da ficha do paciente (botão maior, ele 15/set) e o painel do dono no rodapé */ .vd-da-ficha{min-height:56px;font-size:16px;padding:0 26px} .vd-rodape-dono{margin:44px 0 0;text-align:center;opacity:.55} /* ================= LABORATÓRIO DE PROMPTS (só do dono, 15/set) ================= */ .vd-lab{display:grid;grid-template-columns:220px minmax(0,1fr);gap:18px;padding:18px;border:1px solid var(--p-line);border-radius:14px;background:var(--p-surface);margin-bottom:18px} .vd-lab-foto{display:flex;flex-direction:column;gap:10px;align-items:stretch} .vd-lab-foto img,.vd-lab-semfoto{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:12px;background:var(--p-control)} .vd-lab-semfoto{display:grid;place-items:center;color:var(--p-muted)} .vd-lab-semfoto svg{width:36px;height:36px} .vd-lab-form{display:flex;flex-direction:column;gap:10px;min-width:0} .vd-lab-form label{font-size:12px;font-weight:600} .vd-lab-form textarea{width:100%;min-height:150px;border:1px solid var(--p-line);border-radius:12px;background:var(--p-control);color:var(--p-text);padding:12px 14px;font:inherit;font-size:14px;line-height:1.5;resize:vertical;-webkit-user-select:text;user-select:text} .vd-lab-linha{display:flex;gap:10px;align-items:center;flex-wrap:wrap} .vd-lab-dur{display:inline-flex;align-items:center;gap:8px;font-size:13px} .vd-lab-dur select{min-height:44px;border:1px solid var(--p-line);border-radius:10px;background:var(--p-control);color:var(--p-text);padding:0 10px;font:inherit} .vd-lab-form small{color:var(--p-muted);font-size:12px} .vd-lab-lista{display:flex;flex-direction:column;gap:12px;margin-bottom:34px} .vd-lab-item{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;padding:12px;border:1px solid var(--p-line);border-radius:12px;background:var(--p-surface)} .vd-lab-item.falhou{border-color:#a34a4a} .vd-lab-poster{width:96px;aspect-ratio:3/4;border-radius:8px;background:var(--p-control);overflow:hidden} .vd-lab-poster img{width:100%;height:100%;object-fit:cover;display:block} .vd-lab-info{min-width:0} .vd-lab-erro{color:#e08484;font-size:12px;margin:6px 0 0} .vd-lab-prompt{margin:8px 0;max-height:120px;overflow:auto;font-size:12px} .vd-lab-acoes{display:flex;gap:8px;flex-wrap:wrap} @media (max-width:640px){ .vd-lab{grid-template-columns:1fr} .vd-lab-foto img,.vd-lab-semfoto{max-width:220px} } /* laboratório enxuto (15/set): status, barra andando e o vídeo pronto no lugar */ .vd-lab-form textarea{min-height:210px} .vd-lab-topo{display:flex;align-items:center;justify-content:space-between;gap:10px} .vd-lab-status{margin:8px 0;color:var(--p-muted);font-size:14px} .vd-lab-video{display:block;width:100%;max-width:420px;border-radius:12px;background:#000;margin-top:10px} .vd-barra-anda{height:100%;width:40%;background:var(--p-gold);border-radius:4px;animation:vdAnda 1.4s ease-in-out infinite} @keyframes vdAnda{0%{transform:translateX(-100%)}100%{transform:translateX(260%)}} /* frases sugeridas do Word (15/set): um toque e a frase entra */ .vd-frases{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px} .vd-frases .btn{white-space:normal;text-align:left;font-size:14px} .vd-frases .btn.on{background:var(--p-tint);color:var(--p-gold);border-color:var(--p-gold)} /* resultado do vídeo (15/set): já salvo na ficha — só o aviso; botões com respiro */ .vd-salvo{display:flex;align-items:center;gap:8px;margin:14px 0 18px;padding:12px 14px;border:1px solid var(--p-gold);border-radius:12px;background:var(--p-tint);color:var(--p-text);font-size:14px} .vd-salvo svg{width:18px;height:18px;color:var(--p-gold);flex:0 0 auto} .vd-duplo-solto{gap:12px;margin-top:6px} .vd-duplo-solto .btn{min-height:52px} /* cartão de vídeo na ficha (15/set): imagem do vídeo + play; toca e abre o player */ .casa .midia-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;background:rgba(18,22,20,.72);border:1px solid #d1b77f;display:grid;place-items:center;color:#d1b77f;pointer-events:none} .casa .midia-play svg{width:24px;height:24px} .casa .midia-abrir:disabled{cursor:default;opacity:.7} .vd-ir-ficha{margin-top:14px} /* a animação do logo usada DENTRO de uma tela (15/set): sem fundo, sem posição fixa, no tamanho original do arquivo dele (k = 1) */ .es-loading.es-inline{--es-k:1;position:static;inset:auto;z-index:auto;background:transparent;padding:6px 0 2px} .es-loading.es-inline .es-core{margin:0} .es-loading.es-inline .es-name{margin-top:18px} .vd-outro-ambiente{width:100%;margin-top:12px;min-height:52px} /* tela vazia dentro de um design de paciente (15/set): foto da ficha + voltar */ #empty .vazio-ficha{margin-top:10px} #empty .vazio-voltar{margin-top:18px;background:transparent} /* ================= 📋 ANAMNESE ESTÉTICA (20/set) — CSS do protótipo v2 do design, escopado em .casa .ae, com os tokens do app ================= Medidas do GUIA-ESTETICO-ANAMNESE.md: pergunta em card (surface, borda, raio 16, padding 24, 18 entre cards), número 32×32 raio 10, título 18/500, opções em 2 colunas com checkbox/radio NATIVOS de 22 px visíveis, opção ≥ 60 px raio 12, campo livre 54 px, botões 48/50, resumo 17/1.75. */ .casa .ae{max-width:960px} .casa .ae .ae-btn{border:1px solid var(--p-line);background:var(--p-control);color:var(--p-text);border-radius:9px;padding:12px 18px;min-height:48px;font:inherit;font-size:14px;font-weight:500;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-align:center;line-height:1.4;cursor:pointer;touch-action:manipulation} .casa .ae .ae-btn.ae-primary{background:var(--p-solid);color:var(--p-on);border-color:transparent} .casa .ae .ae-btn.ae-quiet{background:transparent} .casa .ae .ae-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px} .casa .ae h2{font-size:22px;line-height:1.3;letter-spacing:-.45px;font-weight:400;margin:0} .casa .ae .ae-muted{font-size:14px;line-height:1.6;color:var(--p-muted);margin:7px 0 0;max-width:540px} .casa .ae .ae-back{background:transparent;border:0;color:var(--p-muted);padding:10px 0;min-height:44px;display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:14px;margin:0 0 12px;cursor:pointer} .casa .ae .ae-workflow{display:flex;flex-wrap:wrap;gap:12px 24px;padding:0 0 22px;color:var(--p-muted);font-size:13px} .casa .ae .ae-workflow span{display:flex;align-items:center;gap:8px} .casa .ae .ae-workflow .ae-current{color:var(--p-gold);font-weight:500} .casa .ae .ae-question{min-width:0;padding:24px;border:1px solid var(--p-line);border-radius:16px;background:var(--p-surface);margin:0 0 18px} .casa .ae legend{float:left;display:flex;align-items:flex-start;gap:12px;margin:0 0 16px;padding:0;width:100%} .casa .ae legend>span:last-child{display:block;font-size:18px;font-weight:500;line-height:1.45;margin:3px 0 0} .casa .ae .ae-number{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;flex:0 0 32px;border-radius:10px;background:var(--p-tint);color:var(--p-gold);font-size:13px;font-weight:500} .casa .ae .ae-question-meta{clear:both;display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px} .casa .ae .ae-mode{font-size:13px;font-weight:500;color:var(--p-gold)} .casa .ae .ae-selection-count{font-size:12px;color:var(--p-muted)} .casa .ae .ae-hint{font-size:13px;margin:0 0 16px;color:var(--p-muted)} .casa .ae .ae-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .casa .ae .ae-choice{display:flex;align-items:center;gap:12px;min-height:60px;padding:14px;border:1px solid var(--p-line);border-radius:12px;background:var(--p-control);font-size:16px;line-height:1.45;cursor:pointer;transition:border-color .12s,background .12s} .casa .ae .ae-choice.ae-long{grid-column:1/-1} .casa .ae .ae-choice input{position:static;appearance:auto;-webkit-appearance:auto;opacity:1;width:22px;height:22px;flex:0 0 22px;margin:0;accent-color:var(--p-gold)} .casa .ae .ae-choice:has(input:checked){border-color:var(--p-gold);background:var(--p-tint);color:var(--p-text)} .casa .ae .ae-choice:has(input:focus-visible){outline:2px solid var(--p-gold);outline-offset:3px} .casa .ae .ae-field{display:block;width:100%;background:var(--p-control);border:1px solid var(--p-line);border-radius:12px;min-height:54px;padding:12px 14px;color:var(--p-text);font:inherit;font-size:16px;line-height:1.6;margin-top:12px;-webkit-user-select:text;user-select:text} .casa .ae .ae-field:focus{outline:2px solid var(--p-gold);outline-offset:4px} .casa .ae .ae-other{margin-top:14px} .casa .ae .ae-other label{font-size:13px;font-weight:500;color:var(--p-muted)} .casa .ae .ae-range-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:12px 0 2px} .casa .ae .ae-range-top output{font-size:20px;color:var(--p-gold);font-variant-numeric:tabular-nums} .casa .ae .ae-range-top span{font-size:13px;color:var(--p-muted)} .casa .ae .ae-limits{display:flex;justify-content:space-between;font-size:13px;color:var(--p-muted)} .casa .ae .ae-actions{display:flex;justify-content:flex-end;align-items:center;gap:12px;flex-wrap:wrap;border-top:1px solid var(--p-line);padding-top:20px;margin-top:24px} .casa .ae .ae-actions .ae-btn{min-height:50px} .casa .ae .ae-action-help{font-size:13px;color:var(--p-muted);margin-right:auto} .casa .ae .ae-card{display:block;border:1px solid var(--p-line);border-radius:16px;background:var(--p-surface);padding:20px;color:var(--p-text);text-align:left;width:100%;min-width:0;font:inherit} .casa .ae .ae-summary{padding:26px} .casa .ae .ae-summary h3{margin:0 0 16px;font-size:14px;font-weight:500;color:var(--p-gold)} .casa .ae .ae-summary p{font-size:17px;line-height:1.75;margin:0;white-space:pre-wrap;color:var(--p-text)} .casa .ae .ae-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:16px} .casa .ae .ae-record{min-height:142px;padding:22px;cursor:pointer} .casa .ae .ae-record strong{font-size:16px;font-weight:500;display:block;margin-bottom:14px} .casa .ae .ae-record span{display:block;font-size:14px;color:var(--p-muted);white-space:nowrap;text-overflow:ellipsis;overflow:hidden} .casa .ae .ae-empty{text-align:center;padding:40px 22px} .casa .ae .ae-empty p{margin:0 0 24px;font-size:17px;color:var(--p-text)} .casa .ae .ae-answers-title{font-size:17px;font-weight:500;margin:32px 0 6px} .casa .ae .ae-answer{padding:20px 0;border-bottom:1px solid var(--p-line)} .casa .ae .ae-answer h4{margin:0 0 10px;font-size:16px;font-weight:500;line-height:1.5} .casa .ae .ae-answer p{font-size:16px;margin:0;line-height:1.6;color:var(--p-muted)} .casa .ae .ae-delete{color:#d78780;margin-top:28px} :root[data-theme="light"] .casa .ae .ae-delete{color:#a8443a} @media (max-width:560px){ .casa .ae .ae-question{padding:20px 16px} .casa .ae .ae-options{grid-template-columns:1fr} .casa .ae .ae-actions .ae-action-help{width:100%} .casa .ae .ae-head{align-items:flex-start;flex-wrap:wrap} .casa .ae .ae-head>.ae-btn{width:100%} .casa .ae .ae-actions>.ae-btn{flex:1 1 100%} .casa .ae .ae-summary{padding:20px} .casa .ae .ae-summary p{font-size:16px} .casa .ae legend>span:last-child{font-size:17px} } /* ================= 📸 FOTO STUDIO IA (22/set) — CSS do guia do Codex (Referência Design/Foto Studio IA/Redesign 2026-09-22/styles.css), escopado em .casa .fs ================= Substitui a versão de 20/set. Cabeçalho no padrão do Design IA (.ae .page-heading) + cápsula do saldo + Novo ensaio · lista = um cartão por ensaio (3 miniaturas, nome, data, Abrir, •••) · trilho de 4 etapas + Voltar/Continuar FIXOS no topo (sticky no #pjMain) · escolhas em cartões (imagem 230 px contain · roupa 160 px · fundo 210 px) com rádio + borda dourada · conferência em 3 painéis + poses · visualizador de tela inteira (.fs-visor). */ .casa .fs{max-width:none} .casa .fs .studio-heading-actions{display:flex;align-items:center;gap:20px;flex-shrink:0} .casa .fs .credit-balance{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:154px;padding:9px 20px;border:1px solid var(--p-line);border-radius:999px;background:var(--p-surface);color:var(--p-muted);text-align:center} .casa .fs .credit-number{font-size:28px;line-height:30px;font-weight:600;color:var(--p-gold);font-variant-numeric:tabular-nums} .casa .fs .credit-copy strong{font-size:12px;line-height:20px;font-weight:400;color:var(--p-muted)} .casa .fs .page-heading .ae-btn{min-height:44px;padding:9px 16px;font-size:13px;line-height:20px;font-weight:600;border-radius:10px;gap:8px;flex-shrink:0;white-space:nowrap} .casa .fs .page-heading .ae-btn svg{width:20px;height:20px} .casa .fs .ae-btn:disabled{opacity:.4;cursor:default} .casa .fs .ft-vazio .ae-btn{margin-top:12px} .casa .fs .ft-vazio .fs-acoes{margin-top:12px} /* lista */ .casa .fs .fs-lista{display:grid;gap:16px} .casa .fs .fs-conjunto{max-width:840px;background:var(--p-surface);border:1px solid var(--p-line);border-radius:14px;padding:12px} .casa .fs .fs-triptych{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;border-radius:10px;overflow:hidden;width:100%;padding:0;margin:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer;text-align:left} .casa .fs .fs-shot{aspect-ratio:9/16;background:var(--p-control);overflow:hidden;min-width:0} .casa .fs .fs-shot img{display:block;width:100%;height:100%;object-fit:cover} .casa .fs .fs-gerando .fs-shot{background:linear-gradient(90deg,var(--p-control),var(--p-surface),var(--p-control));background-size:200% 100%;animation:fs-brilho 1.6s infinite linear} @keyframes fs-brilho{from{background-position:200% 0}to{background-position:-200% 0}} .casa .fs .fs-carregando .fs-triptych{max-width:840px;opacity:.6} .casa .fs .fs-conjunto-pe{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 8px 4px} .casa .fs .fs-conjunto-pe>div:first-child{min-width:0;flex:1} .casa .fs .fs-conjunto-pe h2{font-size:16px;line-height:24px;font-weight:600;margin:0 0 4px;letter-spacing:-.15px;overflow-wrap:anywhere} .casa .fs .fs-conjunto-pe p{margin:0;font-size:12px;line-height:19px;color:var(--p-muted)} .casa .fs .fs-acoes{display:flex;align-items:center;gap:12px;flex-shrink:0} .casa .fs .fs-acoes .ae-btn{min-height:44px;padding:9px 16px;font-size:13px;line-height:20px;font-weight:600;border-radius:10px;white-space:nowrap} .casa .fs .fs-opc{position:relative} .casa .fs .fs-opcoes{position:static;width:44px;height:44px;color:var(--p-text);background:var(--p-control);border-color:var(--p-line)} .casa .fs .fs-opc .di-menu{top:52px;right:0} .casa .fs .progress{height:4px;border-radius:8px;background:var(--p-line);overflow:hidden;margin-top:12px;max-width:320px} .casa .fs .progress:after{content:'';display:block;width:40%;height:100%;background:var(--p-gold);animation:fs-loading 1.8s infinite ease-in-out} @keyframes fs-loading{from{transform:translateX(-100%)}to{transform:translateX(350%)}} /* trilho + ações fixos no topo (o #pjMain é quem rola) */ .casa .fs .fs-flowbar{position:sticky;top:0;z-index:10;background:var(--p-canvas);padding:16px 0;border-bottom:1px solid var(--p-line);margin-top:-8px} .casa .fs .fs-steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);padding:0;margin:0 0 16px;gap:12px} .casa .fs .fs-steps li{color:var(--p-muted);font-size:13px;line-height:20px;padding-top:10px;border-top:2px solid var(--p-line)} .casa .fs .fs-steps li.current,.casa .fs .fs-steps li.done{color:var(--p-gold);border-color:var(--p-gold)} .casa .fs .fs-steps span{margin-right:8px} .casa .fs .fs-flow-actions{display:flex;align-items:center;gap:12px} .casa .fs .fs-flow-actions .ae-btn{min-height:44px;padding:9px 16px;font-size:13px;line-height:20px;font-weight:600;border-radius:10px;white-space:nowrap} .casa .fs .fs-hint{flex:1;text-align:right;color:var(--p-muted);font-size:12px;line-height:18px} .casa .fs .fs-etapa{padding-top:16px} .casa .fs .fs-titulo{font-size:20px;line-height:28px;font-weight:600;margin:0 0 6px;letter-spacing:-.3px;outline:0;color:var(--p-text)} .casa .fs .fs-lead{margin:0 0 14px;color:var(--p-muted);font-size:14px;line-height:22px} .casa .fs .fs-choices+.fs-lead{margin-top:28px} /* escolhas */ .casa .fs .fs-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} .casa .fs .fs-choice{display:block;overflow:hidden;background:var(--p-surface);border:1px solid var(--p-line);border-radius:14px;cursor:pointer;transition:border-color .15s;color:var(--p-text);min-width:0} .casa .fs .fs-choice:hover{border-color:color-mix(in srgb,var(--p-gold) 55%,var(--p-line))} .casa .fs .fs-choice:has(input:checked),.casa .fs .fs-choice.on{border-color:var(--p-gold);background:var(--p-tint)} .casa .fs .fs-choice:has(input:focus-visible){outline:2px solid var(--p-text);outline-offset:3px} .casa .fs .fs-choice input[type=radio]{width:18px;height:18px;accent-color:var(--p-gold);margin:0 8px 0 0;flex:none;appearance:auto;-webkit-appearance:auto;vertical-align:-3px} .casa .fs .fs-choice input:focus{outline:none} .casa .fs .fs-legenda{display:block;padding:14px;font-size:13px;line-height:21px;min-height:64px} .casa .fs .fs-quadro{display:block;position:relative;height:230px;background:#090c0b} .casa .fs .fs-quadro img{display:block;width:100%;height:100%;object-fit:contain} .casa .fs .fs-lupa{width:40px;height:40px;top:10px;right:10px;font-size:0;letter-spacing:0;padding:0} .casa .fs .fs-lupa svg{width:18px;height:18px} .casa .fs .fs-garment{display:flex;justify-content:center;align-items:center;height:160px;background:radial-gradient(ellipse at 50% 20%,#39423d,#202724);overflow:hidden} .casa .fs .fs-garment svg{height:100%;width:100%} .casa .fs .fs-garment img{height:100%;width:100%;object-fit:contain} .casa .fs .fs-roupa-txt{font-size:13px;color:var(--p-muted);padding:12px;text-align:center} .casa .fs .fs-backdrop{display:block;height:210px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 30%,#fff,#d4d4d3);border-bottom:1px solid var(--p-line)} /* 23/set (ele): preto e cinza sem o arco de luz na base; o cinza copia o "cinza carvão" azulado que o Google entrega (medido na foto gerada: ~#23262e), com uma luz suave no alto pra se distinguir do preto, que é preto de verdade */ .casa .fs .fs-backdrop.preto{background:radial-gradient(ellipse at 50% 30%,#161616,#030303 75%)} .casa .fs .fs-backdrop.cinza{background:radial-gradient(ellipse at 50% 30%,#434852,#2a2d35 55%,#1c1e24)} .casa .fs .fs-backdrop.preto i,.casa .fs .fs-backdrop.cinza i{display:none} .casa .fs .fs-backdrop i{position:absolute;bottom:-45%;left:10%;width:80%;height:60%;border-radius:50%;box-shadow:0 -20px 60px #ffffff18} /* conferir */ .casa .fs .fs-review{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} .casa .fs .fs-panel{background:var(--p-surface);border:1px solid var(--p-line);border-radius:14px;padding:20px;min-width:0} .casa .fs .fs-panel h3{font-size:15px;line-height:22px;font-weight:600;margin:0 0 8px;color:var(--p-text)} .casa .fs .fs-panel p{margin:0 0 12px;color:var(--p-muted);font-size:13px;line-height:21px} .casa .fs .fs-panel .ae-btn{min-height:44px;padding:9px 16px;font-size:13px;line-height:20px;font-weight:600;border-radius:10px} .casa .fs .fs-review-img{display:block;width:100%;height:180px;object-fit:contain;background:#090c0b;border-radius:8px;margin-bottom:12px} .casa .fs .fs-garment.compact,.casa .fs .fs-backdrop.compact{height:120px;border-radius:8px;margin-bottom:12px;border:0} .casa .fs .fs-output{margin-top:20px} .casa .fs .fs-poses{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;text-align:center} .casa .fs .fs-poses>div{min-width:0} .casa .fs .fs-poses svg{width:100%;max-width:120px;height:110px;display:block;margin:auto} .casa .fs .fs-poses strong{font-size:12px;overflow-wrap:anywhere;color:var(--p-text)} .casa .fs .fs-nota{margin:14px 0 0;font-size:12px} /* visualizador de tela inteira */ body.fs-vendo{overflow:hidden} .fs-visor{position:fixed;inset:0;z-index:85;display:flex;flex-direction:column;gap:12px;padding:20px 28px;padding-top:max(20px,env(safe-area-inset-top));background:#090c0b;color:#eef0eb;overflow:auto} .fs-visor .fs-visor-cab{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-shrink:0} .fs-visor h2{margin:0;font-size:18px;line-height:26px;font-weight:600} .fs-visor p{margin:4px 0;color:#aab4ac;font-size:13px} .fs-visor .ae-btn{border:1px solid #39423b;background:#272d29;color:#eef0eb;border-radius:10px;min-height:44px;padding:9px 16px;font:inherit;font-size:13px;line-height:20px;font-weight:600;display:inline-flex;align-items:center;gap:8px;cursor:pointer} .fs-visor .ae-btn svg{width:18px;height:18px} .fs-visor .fs-visor-palco{min-height:180px;flex:1;display:flex;align-items:center;justify-content:center;gap:20px} .fs-visor .fs-visor-foto{position:relative;flex-shrink:0;height:min(58dvh,720px);aspect-ratio:9/16;max-width:calc(100vw - 180px)} .fs-visor .fs-visor-foto img{display:block;width:100%;height:100%;object-fit:contain;border-radius:8px;background:#000} .fs-visor .fs-visor-seta,.fs-visor .fs-visor-expandir{display:grid;place-items:center;width:48px;height:48px;border-radius:999px;background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.33);color:#fff;padding:0;cursor:pointer;flex-shrink:0} .fs-visor .fs-visor-seta svg,.fs-visor .fs-visor-expandir svg{width:20px;height:20px;stroke-width:1.5} .fs-visor .fs-visor-seta:disabled{opacity:.3;cursor:default} .fs-visor .fs-visor-expandir{position:absolute;top:12px;right:12px;width:44px;height:44px} .fs-visor .fs-visor-pe{text-align:center;flex-shrink:0} .fs-visor .fs-minis{display:flex;justify-content:center;gap:12px} .fs-visor .fs-minis button{width:140px;border:1px solid #39423b;background:#1b201e;border-radius:8px;color:#eef0eb;padding:4px;font:inherit;cursor:pointer} .fs-visor .fs-minis button[aria-pressed=true]{border-color:#d1b77f;background:#383426} .fs-visor .fs-minis img{display:block;height:60px;width:46px;margin:auto;object-fit:cover;border-radius:4px} .fs-visor .fs-minis span{display:block;font-size:11px;margin:4px} .fs-visor .fs-visor-meta{display:flex;justify-content:center;gap:24px;align-items:center;font-size:12px;color:#aab4ac;margin-top:8px;flex-wrap:wrap} /* cabeçalho (correção do designer, 22/set 16h — Vídeos IA/styles.css, "substitui a quebra automática herdada do Studio"): texto pode quebrar, as ações ficam na mesma linha */ .casa .ae.fs .page-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px} .casa .ae.fs .page-heading>div:first-child{min-width:0} .casa .ae.fs .page-heading .subtitle{max-width:48ch} .casa .fs .studio-heading-actions{margin-left:0;flex-wrap:nowrap} @media (min-width:601px) and (max-width:1100px){ .casa .ae.fs .page-heading{gap:16px} .casa .fs .studio-heading-actions{gap:12px} .casa .fs .credit-balance{min-width:136px;padding:8px 14px} .casa .fs .credit-copy strong{font-size:11px} } @media (max-width:1100px){ .casa .fs .fs-wardrobe{grid-template-columns:repeat(2,minmax(0,1fr))} .casa .fs .fs-quadro{height:185px} } @media (max-width:820px){ .casa .fs .fs-conjunto-pe{flex-wrap:wrap} } @media (max-width:600px){ .casa .ae.fs .page-heading{grid-template-columns:1fr;gap:16px} .casa .fs .studio-heading-actions{width:100%;gap:12px;justify-content:space-between} .casa .fs .credit-number{font-size:26px} .casa .fs .credit-balance{min-width:144px;padding:8px 16px} .casa .fs .credit-copy strong{font-size:11px} .casa .fs .fs-choices,.casa .fs .fs-review{grid-template-columns:1fr} .casa .fs .fs-wardrobe{grid-template-columns:repeat(2,minmax(0,1fr))} .casa .fs .fs-garment{height:120px} .casa .fs .fs-steps{gap:6px} .casa .fs .fs-steps li{font-size:11px} .casa .fs .fs-steps span{margin-right:4px} .casa .fs .fs-flow-actions{flex-wrap:wrap} .casa .fs .fs-hint{font-size:11px;text-align:center;order:3;flex-basis:100%} .casa .fs .fs-flow-actions .ae-btn{padding:9px 11px;flex:1} .casa .fs .fs-poses{gap:4px} .casa .fs .fs-poses strong{font-size:10px} .casa .fs .fs-conjunto-pe{align-items:flex-start} .casa .fs .fs-acoes{gap:4px} .fs-visor{padding:12px} .fs-visor .fs-visor-palco{gap:6px} .fs-visor .fs-visor-foto{max-width:calc(100vw - 120px);height:auto;width:100%;max-height:53dvh;aspect-ratio:auto} .fs-visor .fs-visor-foto img{max-height:53dvh} .fs-visor .fs-visor-meta{gap:8px} .fs-visor h2{font-size:15px} .fs-visor .fs-minis button{width:30%} .fs-visor .fs-minis span{font-size:10px} } @media (prefers-reduced-motion:reduce){ .casa .fs .progress:after,.casa .fs .fs-gerando .fs-shot{animation:none} } /* 20/set: Mulher/Homem no cadastro (dois botões) + as três pastas dentro de Fotografias */ .casa .escolha-sexo{display:flex;gap:10px} .casa .escolha-sexo .btn{flex:1;min-height:54px;font-size:17px;justify-content:center} .casa .form-cadastro .campo{margin-bottom:18px} .casa .form-cadastro .campo input[type=text]{width:100%;min-height:54px;border:1px solid var(--p-line);border-radius:10px;background:var(--p-control);color:var(--p-text);padding:13px 16px;font:inherit;font-size:17px;-webkit-user-select:text;user-select:text} .casa .abas.sub-fotos{margin:0 0 22px;padding-bottom:12px} /* ================= 🧭 REDESIGN 21/set (GPT · Referência Design/Anamnese estética/Redesign 2026-09-21/styles.css) ================= Cabeçalho 72 px (64 abaixo de 960), lateral 232/208/192 px, faixa do paciente de borda a borda com miolo de 1008 px + 32 de margem, e as duas telas da anamnese (lista em card largo · detalhe com Resumo clínico e Respostas). Tokens do app; medidas do GUIA-IMPLEMENTACAO.md. */ .casa-topo{height:calc(72px + env(safe-area-inset-top));padding:0 32px;padding-top:env(safe-area-inset-top);gap:24px} .casa-topo .map-logo img{width:170px} .casa-topo-dir{gap:8px} .casa-usuario{font-size:13px;font-weight:500;color:var(--p-text);margin-right:16px} .casa-topo .icon-btn{width:44px;height:44px;border-radius:11px} .casa-topo .btn{min-height:44px;padding:9px 16px;font-size:13px;line-height:20px;font-weight:600;border-radius:10px} .casa-topo #pjConta{background:var(--p-control);border-color:var(--p-line)} .casa-topo #pjSair{background:transparent;border-color:transparent;color:var(--p-muted);padding-inline:12px} .casa-corpo{grid-template-columns:232px minmax(0,1fr)} .casa-lat.paciente{padding:28px 16px 24px;min-height:0} .casa-lat.paciente .eyebrow{font-size:11px;letter-spacing:1.1px;font-weight:650;color:var(--p-muted);margin:0 12px 18px} .casa-lat .lat-menu{gap:6px} .casa-lat.paciente .lat-item{min-height:48px;padding:12px;gap:12px;font-size:14px;font-weight:500;line-height:20px;border-radius:12px;margin-bottom:0} .casa-lat.paciente .lat-item.on{background:var(--p-tint);color:var(--p-gold);border-color:color-mix(in srgb,var(--p-gold) 55%,var(--p-line))} .casa-lat.paciente .lat-item svg{width:28px;height:28px} .casa-lat.paciente .lat-item .ic-sorriso,.casa-lat.paciente .lat-item .ic-menu-dele{width:30px;height:30px} .casa .ic-menu-alto,.casa-lat.paciente .lat-item .ic-menu-alto{width:30px;height:36px;margin-top:-6px} /* 22/set: Design IA · Foto Studio IA · Show IA — viewBox 16 0 70 84 (a estrela afastada precisa de altura); regra do designer: 30×36 com margem -6, nunca espremer num quadrado */ .casa-lat .lat-rodape{padding-top:14px;margin-bottom:0} .casa-lat .lat-fechar{font-size:14px;min-height:48px} .casa-lat .lat-fechar svg{width:28px;height:28px} .casa-lat.paciente ~ .casa-main{padding:0 0 64px;max-width:none} .casa .contexto{display:block;margin:0;padding:0} .casa .ctx-inner{max-width:1072px;margin:0 auto;padding:20px 32px;display:flex;align-items:center;gap:16px;min-height:104px} .casa .ctx-inner .faixa{gap:16px;min-width:0;flex:1 1 auto} .casa .ctx-copy{min-width:0} .casa .contexto .avatar{width:80px;height:80px;font-size:26px;font-weight:500;border-color:color-mix(in srgb,var(--p-gold) 55%,var(--p-line))} /* 22/set (ele): foto maior na faixa do paciente (era 56); padding e gap da faixa ficam iguais — a faixa cresce em altura, não em respiro */ .casa .contexto .ctx-eyebrow{font-size:10px;font-weight:650;letter-spacing:1.5px;line-height:16px;margin-bottom:0} .casa .contexto h1{font-size:21px;line-height:28px;font-weight:600;letter-spacing:-.4px;margin:2px 0} .casa .contexto .ctx-prof{margin:0;font-size:12px;line-height:1.5} .casa .contexto .ctx-prof span{display:inline;font-size:12px;margin:0;color:var(--p-text)} .casa .ctx-inner>.btn{margin-left:auto;flex-shrink:0;min-height:44px;padding:9px 16px;font-size:13px;font-weight:600;border-radius:10px;background:var(--p-control);border-color:var(--p-line)} .casa .pj-miolo{width:100%;max-width:1072px;margin:0 auto;padding:36px 32px 64px} .casa .pj-miolo .cab{margin-bottom:26px} /* --- anamnese: lista --- */ .casa .ae{max-width:none} .casa .ae .page-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:28px} .casa .ae .page-heading>div{min-width:0} .casa .ae h1{margin:0;font-size:28px;line-height:36px;letter-spacing:-.8px;font-weight:600} .casa .ae .subtitle{margin:6px 0 0;color:var(--p-muted);font-size:14px;line-height:22px} .casa .ae .page-heading .ae-btn{min-height:44px;padding:9px 16px;font-size:13px;line-height:20px;font-weight:600;border-radius:10px;gap:8px;flex-shrink:0;white-space:nowrap} .casa .ae .page-heading .ae-btn svg{width:20px;height:20px} .casa .ae .record-list{list-style:none;padding:0;margin:0;display:grid;gap:12px} .casa .ae .record-card{width:100%;display:grid;grid-template-columns:minmax(0,1fr) 24px;gap:24px;background:var(--p-surface);border:1px solid var(--p-line);border-radius:16px;padding:26px 28px;color:var(--p-text);text-align:left;font:inherit;cursor:pointer;transition:background .16s ease,border-color .16s ease} .casa .ae .record-card:hover{background:var(--p-control);border-color:color-mix(in srgb,var(--p-gold) 55%,var(--p-line))} .casa .ae .record-card>div{min-width:0} .casa .ae .record-date{display:flex;gap:8px;align-items:center;color:var(--p-muted);font-size:12px;line-height:20px} .casa .ae .record-title{margin:12px 0 6px;font-size:18px;line-height:26px;font-weight:550;letter-spacing:-.2px} .casa .ae .record-excerpt{margin:0;color:var(--p-muted);font-size:14px;line-height:23px;max-width:68ch;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .casa .ae .record-arrow{align-self:center;width:24px;height:24px;color:var(--p-gold);transition:transform .16s ease} .casa .ae .record-card:hover .record-arrow{transform:translateX(3px)} .casa .ae .record-count{color:var(--p-muted);font-size:12px;margin:16px 0 0} .casa .ae .record-empty{background:var(--p-surface);border:1px solid var(--p-line);border-radius:16px;padding:26px 28px} .casa .ae .record-empty p{margin:0 0 4px;font-size:18px;line-height:26px;font-weight:550} .casa .ae .record-empty small{color:var(--p-muted);font-size:14px} /* --- anamnese: detalhe --- */ .casa .ae .breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:10px;color:var(--p-muted);font-size:12px;line-height:20px;margin:0 0 18px} .casa .ae .breadcrumb-back{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0;border:0;background:transparent;color:var(--p-muted);font:inherit;font-size:12px;cursor:pointer} .casa .ae .breadcrumb-back:hover{color:var(--p-gold)} .casa .ae .breadcrumb-back svg{width:16px;height:16px} .casa .ae .breadcrumb-current{color:var(--p-muted)} .casa .ae .detail-heading{margin-bottom:24px} .casa .ae .summary{border-radius:16px;border:1px solid var(--p-line);background:var(--p-surface);padding:28px} .casa .ae .section-heading{margin:0;font-size:18px;line-height:26px;letter-spacing:-.2px;font-weight:600;color:var(--p-text)} .casa .ae .summary .section-heading{color:var(--p-gold)} .casa .ae .section-description{margin:4px 0 0;font-size:12px;line-height:20px;color:var(--p-muted)} .casa .ae .summary-intro{margin:24px 0 0;display:grid;gap:24px;padding-bottom:24px;border-bottom:1px solid var(--p-line)} .casa .ae .summary-layout{margin-top:24px;display:grid;grid-template-columns:minmax(0,1fr) 172px;gap:28px} .casa .ae .clinical-grid{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:24px} .casa .ae .clinical-field{min-width:0} .casa .ae .clinical-field dt{color:var(--p-muted);font-size:12px;font-weight:500;margin-bottom:7px} .casa .ae .clinical-field dd{margin:0;font-size:15px;line-height:24px;max-width:66ch;overflow-wrap:anywhere;color:var(--p-text)} .casa .ae .expectation dd{max-width:72ch;white-space:pre-line} /* expectativa INTEIRA: parágrafos preservados, altura automática, sem clamp nem rolagem própria */ .casa .ae .ae-vazio{color:var(--p-muted)} .casa .ae .chips{display:flex;gap:7px;flex-wrap:wrap} .casa .ae .chip{display:inline-block;color:var(--p-text);font-size:12px;line-height:19px;background:var(--p-control);border:1px solid var(--p-line);border-radius:999px;padding:4px 10px;max-width:100%;overflow-wrap:anywhere} .casa .ae .score{border-left:1px solid var(--p-line);padding-left:24px} .casa .ae .score-label{font-size:12px;line-height:19px;color:var(--p-muted);margin:0} .casa .ae .score-value{margin:16px 0 12px;font-size:56px;line-height:60px;font-weight:400;letter-spacing:-2px;color:var(--p-gold)} .casa .ae .score-value span{font-size:20px;line-height:28px;color:var(--p-muted);letter-spacing:0} .casa .ae .score-value .score-nada{font-size:15px;line-height:24px;letter-spacing:0} .casa .ae .score-scale{display:flex;gap:4px} .casa .ae .score-scale i{flex:1;height:5px;border-radius:2px;background:var(--p-line)} .casa .ae .score-scale i.filled{background:var(--p-gold)} .casa .ae .score-caption{font-size:11px;line-height:18px;color:var(--p-muted);margin:10px 0 0} .casa .ae .answers{margin-top:36px} .casa .ae .answer-list{list-style:none;padding:0;margin:8px 0 0} .casa .ae .answer{padding:24px 0;border-bottom:1px solid color-mix(in srgb,var(--p-line) 65%,transparent)} .casa .ae .answer:last-child{border-bottom:0;padding-bottom:0} .casa .ae .answer h3{margin:0 0 10px;font-size:14px;line-height:23px;font-weight:550;color:var(--p-text)} .casa .ae .answer-number{color:var(--p-muted);margin-right:8px;font-weight:400} .casa .ae .answer p{margin:0;color:var(--p-muted);font-size:15px;line-height:24px;max-width:72ch;overflow-wrap:anywhere;white-space:pre-line} .casa .ae .answer .chip{font-size:13px;padding:5px 10px} .casa .ae .ae-delete{margin-top:36px} @media (max-width:1199px){ .casa-topo{padding:0 24px;padding-top:env(safe-area-inset-top)} .casa-corpo{grid-template-columns:208px minmax(0,1fr)} .casa-lat.paciente{padding-inline:12px} .casa-lat.paciente .lat-item{font-size:13px;gap:10px} .casa .ctx-inner,.casa .pj-miolo{padding-inline:24px} .casa .ae .summary{padding:24px} .casa .ae .summary-layout{grid-template-columns:minmax(0,1fr) 148px;gap:20px} .casa .ae .score{padding-left:20px} .casa .ae .clinical-grid{gap:20px} } @media (max-width:959px){ .casa-topo{height:calc(64px + env(safe-area-inset-top));padding:0 20px;padding-top:env(safe-area-inset-top)} .casa-corpo{grid-template-columns:192px minmax(0,1fr)} .casa-usuario{display:none} .casa-lat.paciente{padding:24px 10px 20px} .casa-lat.paciente .eyebrow{margin-inline:10px;font-size:10px} .casa-lat.paciente .lat-item{padding:11px 10px} .casa .ctx-inner{gap:12px;flex-wrap:wrap;padding:18px 20px} .casa .contexto .avatar{width:64px;height:64px;font-size:22px} .casa .contexto h1{font-size:19px;line-height:26px} .casa .pj-miolo{padding:28px 20px 48px} .casa .ae h1{font-size:24px;line-height:32px} .casa .ae .page-heading{align-items:flex-start;flex-wrap:wrap;gap:16px;margin-bottom:24px} .casa .ae .summary{padding:20px} .casa .ae .summary-layout{grid-template-columns:1fr;gap:24px} .casa .ae .score{border-left:0;border-top:1px solid var(--p-line);padding:20px 0 0;display:grid;grid-template-columns:minmax(0,1fr) 136px;column-gap:20px;align-items:center} .casa .ae .score-value{margin:0;grid-column:2;grid-row:1/3;font-size:48px;text-align:right} .casa .ae .score-scale{max-width:180px;margin-top:12px} .casa .ae .score-caption{grid-column:1/-1} .casa .ae .clinical-grid{grid-template-columns:1fr} .casa .ae .record-card{padding:22px;gap:16px} } @media (max-width:820px){ .casa-corpo{grid-template-columns:1fr} .casa-topo{padding-left:16px;padding-right:16px} .casa-topo{justify-content:flex-start;gap:6px} /* ☰ e o logo juntos à esquerda, como no protótipo; o grupo da conta vai pra direita */ .casa-topo-dir{margin-left:auto} .casa .contexto{margin:0;padding:0} .casa .ctx-inner{min-height:104px;flex-wrap:wrap} .casa .abas.abas-paciente{display:flex;margin:0;padding:12px 20px;border-bottom:1px solid var(--p-line);background:var(--p-surface);gap:8px} .casa .abas-paciente .btn{min-height:44px;padding:9px 12px;font-size:13px;border-radius:12px} .casa .pj-miolo{padding-top:24px} } @media (max-width:520px){ .casa-topo{gap:8px;padding-left:10px;padding-right:10px} .casa-topo .map-logo img{width:112px} .casa-topo-dir{gap:4px} .casa-topo .btn{padding-inline:7px;font-size:11px} .casa .ctx-inner{padding-inline:20px} .casa .abas.abas-paciente{padding-inline:16px} .casa .ae .record-card,.casa .ae .summary{padding:20px} } @media (prefers-reduced-motion:reduce){ .casa .ae .record-card,.casa .ae .record-arrow{transition:none} } /* ================= 📷 FOTOGRAFIAS 21/set (Codex · Referência Design/Fotografias/Redesign 2026-09-21/styles.css, aprovado por ele) ================= Título + subtítulo + '+ Importar' no padrão da Anamnese (.ae .page-heading) · QUATRO pastas em cartões (ativa = borda dourada + tint + linha de 2 px em cima) · barra da galeria (título 18/26 + descrição 12 · Selecionar · ▶ Apresentar pasta) · cartões 3:4 com a foto INTEIRA (object-fit contain), legenda 15/22 e metadados 12/18 · ••• de 44 px · seleção com ✓ · visualizador em caixa de 880 px · apresentação com o nome da pasta. Prefixo .ft- pra não colidir com o editor (lição da leva 4b: .empty/.step). */ .casa .ft .page-heading{margin-bottom:28px} .casa .ft-pastas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 32px} .casa .ft-pasta{position:relative;display:grid;grid-template-columns:1fr auto;align-content:start;gap:12px 8px;padding:18px;min-height:140px;text-align:left;border:1px solid var(--p-line);border-radius:14px;background:var(--p-surface);color:var(--p-text);font:inherit;cursor:pointer;transition:border-color .15s,background .15s;touch-action:manipulation} .casa .ft-pasta:hover{border-color:color-mix(in srgb,var(--p-gold) 55%,var(--p-line));background:var(--p-control)} .casa .ft-pasta[aria-current="page"]{border-color:var(--p-gold);background:var(--p-tint);box-shadow:inset 0 2px var(--p-gold)} .casa .ft-icone{width:30px;height:30px;color:var(--p-gold)} .casa .ft-icone.ic-menu-dele{stroke:none;fill:none} /* 22/set: a câmera das pastas é o glifo sem círculo (#mn-camera), 30 px como os outros */ .casa .ft-icone.ic-menu-alto{width:30px;height:36px;margin-top:-6px} /* 25/set: ícones com a estrela (Capturas automáticas = Design IA · Foto Studio IA) nas pastas: nunca espremer num quadrado (regra do designer) */ .casa .ft-conta{font-size:12px;line-height:26px;min-width:27px;height:27px;padding:0 4px;text-align:center;border:1px solid var(--p-line);border-radius:8px;color:var(--p-muted);justify-self:end} .casa .ft-pasta[aria-current] .ft-conta{border-color:color-mix(in srgb,var(--p-gold) 55%,var(--p-line));color:var(--p-gold)} .casa .ft-copy{grid-column:1/-1;min-width:0} .casa .ft-copy strong{display:block;font-size:14px;font-weight:600;line-height:20px} .casa .ft-copy small{display:block;color:var(--p-muted);font-size:11px;line-height:17px;margin-top:4px} .casa .ft-barra{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px} .casa .ft-barra>div{min-width:0} .casa .ft-barra h2{font-size:18px;line-height:26px;letter-spacing:-.3px;margin:0;font-weight:600} .casa .ft-barra p{color:var(--p-muted);font-size:12px;line-height:18px;margin:4px 0 0} .casa .ft-acoes{display:flex;align-items:center;gap:8px;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end} .casa .ft .ft-acoes .ae-btn{min-height:44px;padding:9px 12px;font-size:12px;line-height:20px;font-weight:600;border-radius:10px;gap:8px;white-space:nowrap} .casa .ft .ft-acoes .ae-btn svg{width:18px;height:18px} .casa .ft .ae-btn:disabled{opacity:.4;cursor:default} .casa .ft-contagem{font-size:12px;color:var(--p-gold);white-space:nowrap} .casa .ft-galeria{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px} .casa .ft-card{position:relative;border:1px solid var(--p-line);border-radius:14px;background:var(--p-surface);overflow:hidden;min-width:0;transition:border-color .15s,transform .15s} .casa .ft-card:hover{border-color:color-mix(in srgb,var(--p-gold) 55%,var(--p-line));transform:translateY(-2px)} .casa .ft-card.on{border-color:var(--p-gold);box-shadow:0 0 0 1px var(--p-gold)} .casa .ft-abrir{display:block;width:100%;padding:0;margin:0;background:none;border:0;color:var(--p-text);font:inherit;text-align:left;cursor:pointer;touch-action:manipulation} .casa .ft-quadro{display:grid;place-items:center;width:100%;aspect-ratio:3/4;background:#060807;overflow:hidden;position:relative} .casa .ft-quadro img{width:100%;height:100%;object-fit:contain;display:block} .casa .ft-leg{display:block;padding:16px 16px 17px} .casa .ft-leg strong{display:block;font-size:15px;line-height:22px;font-weight:600;overflow-wrap:anywhere;min-height:22px} .casa .ft-leg small{display:block;margin-top:5px;font-size:12px;line-height:18px;color:var(--p-muted)} .casa .ft-opcoes,.casa .ft-marca{position:absolute;top:12px;right:12px;width:44px;height:44px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.15);border-radius:50%;color:#fff;background:rgba(11,16,15,.79);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font:inherit;padding:0;cursor:pointer} .casa .ft-opcoes{letter-spacing:2px;font-size:20px;padding-bottom:9px;padding-left:2px} .casa .ft-marca{width:30px;height:30px;top:16px;right:16px;pointer-events:none;font-size:16px;font-weight:700} .casa .ft-card.on .ft-marca{background:var(--p-gold);color:#20271f;border-color:var(--p-gold)} .casa .ft-vazio{border:1px dashed var(--p-line);padding:48px 24px;text-align:center;color:var(--p-muted);border-radius:14px;display:flex;flex-direction:column;align-items:center;gap:8px} .casa .ft-vazio svg{width:36px;height:36px;color:var(--p-gold);margin-bottom:6px} .casa .ft-vazio h2{margin:0;font-size:18px;line-height:26px;font-weight:600;color:var(--p-text)} .casa .ft-vazio p{margin:0;font-size:14px;line-height:22px;max-width:52ch} .casa .ft-vazio .ae-btn{margin-top:12px} /* visualizador (guia §8): 880 px, borda dourada discreta, foto inteira, setas + contador, Apresentar */ .modal-fundo .modal.casa.visor{width:min(880px,calc(100% - 40px));max-height:calc(100dvh - 40px);padding:20px;border-color:color-mix(in srgb,var(--p-gold) 45%,var(--p-line))} .modal.casa.visor>.row:last-child{display:none} /* o X do cabeçalho fecha; o 'Fechar' padrão da caixa não entra */ .casa .ft-visor-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:14px} .casa .ft-visor-cab>div{min-width:0} .modal.casa.visor h2{font-size:18px;line-height:26px;font-weight:600;margin:0;overflow-wrap:anywhere} .casa .ft-visor-cab p{margin:4px 0 0;font-size:12px;line-height:18px;color:var(--p-muted)} .casa .ft-visor-x,.casa .ft-pager-btn{width:44px;min-height:44px;padding:0;display:grid;place-items:center;border-radius:12px;flex-shrink:0} .casa .ft-visor-x{background:transparent} .casa .visor-img{width:100%;height:min(720px,calc(100dvh - 230px));object-fit:contain;background:#050706;border-radius:10px} .casa .ft-visor-pe{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:14px} .casa .ft-pager{display:flex;gap:16px;align-items:center} .casa .ft-pager span{min-width:44px;text-align:center;color:var(--p-muted);font-size:12px} .casa .ft-pager-btn:disabled{opacity:.4} .casa .ft-visor-pe .btn.primary,.casa .ft-visor-acoes .btn{min-height:44px;padding:9px 16px;font-size:13px;font-weight:600;border-radius:10px;gap:8px} .casa .ft-visor-acoes{display:flex;gap:10px;align-items:center} /* 24/set: Salvar ao lado de Apresentar (exportar limpo) */ .fs-visor .fs-visor-acoes{display:flex;gap:10px;flex-wrap:wrap;justify-content:center} /* apresentação (guia §9): nome da pasta em cima da legenda; Reproduzir/Pausar */ .apresenta .ap-esq{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px} .apresenta .ap-pasta{font-size:11px;line-height:16px;color:#c4c7c5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .apresenta .ap-nome{flex:none;font-size:17px;line-height:24px} /* 26/set (ele): Capturas manuais e automáticas = um cartão por design, no molde do cartão do ensaio; título grande em cima */ .casa .ft-conjuntos{display:grid;gap:16px} .casa .ft-conjunto{background:var(--p-surface);border:1px solid var(--p-line);border-radius:14px;padding:14px 14px 12px} .casa .ft-conjunto-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 2px 12px} .casa .ft-conjunto-cab>div:first-child{min-width:0;flex:1} .casa .ft-conjunto-cab h2{font-size:22px;line-height:28px;font-weight:600;margin:0 0 4px;letter-spacing:-.3px;overflow-wrap:anywhere} .casa .ft-conjunto-cab p{margin:0;font-size:13px;line-height:20px;color:var(--p-muted)} .casa .ft-conjunto .fs-acoes{display:flex;align-items:center;gap:12px;flex-shrink:0} .casa .ft-conjunto .fs-acoes .ae-btn{min-height:44px;padding:9px 16px;font-size:13px;line-height:20px;font-weight:600;border-radius:10px;white-space:nowrap} .casa .ft-conjunto .ft-opcoes{position:static} .casa .ft-triptych{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:3px;width:100%;padding:0;margin:0;border:0;background:none;border-radius:10px;overflow:hidden;cursor:pointer;font:inherit;color:inherit} .casa .ft-shot{position:relative;display:block;width:100%;aspect-ratio:3/4;background:#060807;overflow:hidden;min-width:0} .casa .ft-shot img{display:block;width:100%;height:100%;object-fit:cover} .casa .ft-shot.vazio{background:var(--p-control)} .casa .ft-mais{position:absolute;inset:0;display:grid;place-items:center;background:rgba(11,16,15,.62);color:#fff;font-size:22px;font-weight:600} .casa .ft-voltar{margin-bottom:14px} .casa .ae-btn.ae-perigo{color:#ff7b7b;border-color:rgba(255,123,123,.45)} .casa .ft-barra h2.ft-titulo-design{font-size:24px;line-height:30px} @media (max-width:620px){ .casa .ft-triptych{grid-template-columns:repeat(3,minmax(0,1fr))} .casa .ft-conjunto-cab{flex-wrap:wrap} } @media (min-width:1500px){ .casa .ft-galeria{gap:24px} } @media (max-width:1199px){ .casa .ft-pastas{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:28px} .casa .ft-pasta{min-height:100px;grid-template-columns:34px 1fr auto;align-items:center;gap:14px;padding:16px} .casa .ft-copy{grid-column:2;grid-row:1} .casa .ft-conta{grid-column:3;grid-row:1} .casa .ft-galeria{gap:14px} .casa .ft-leg{padding:13px} .casa .ft-leg strong{font-size:14px} .casa .ft-barra{align-items:flex-start;flex-wrap:wrap} .casa .ft-acoes{margin-left:auto} } @media (max-width:959px){ .casa .ft-galeria{grid-template-columns:repeat(2,minmax(0,1fr))} .casa .ft-pasta{padding:14px;gap:10px} .casa .ft-copy strong{font-size:13px} } @media (max-width:820px){ .casa .ft-galeria{grid-template-columns:repeat(3,minmax(0,1fr))} } @media (max-width:620px){ .casa .ft-galeria{grid-template-columns:repeat(2,minmax(0,1fr))} .casa .ft-pasta{grid-template-columns:1fr auto;min-height:122px;padding:14px} .casa .ft-copy{grid-column:1/-1;grid-row:2} .casa .ft-conta{grid-column:2;grid-row:1} .casa .ft-copy small{font-size:10px} .casa .ft-pastas{gap:10px;margin-bottom:24px} .casa .ft-acoes{margin:0} .casa .ft-barra{gap:12px} .casa .ft-barra h2{font-size:17px} .casa .ft .page-heading{gap:14px} .casa .ft-leg{padding:12px} .casa .ft-leg strong{font-size:13px;line-height:19px} .casa .ft-leg small{font-size:10px} .casa .ft-opcoes{top:8px;right:8px} .modal-fundo .modal.casa.visor{width:calc(100% - 20px);max-height:calc(100dvh - 20px);padding:14px} .casa .visor-img{height:calc(100dvh - 210px)} .casa .ft-visor-pe{flex-wrap:wrap;justify-content:center;gap:12px} .modal.casa.visor h2{font-size:16px} } @media (max-height:520px){ .casa .visor-img{height:calc(100dvh - 190px)} } @media (prefers-reduced-motion:reduce){ .casa .ft-card,.casa .ft-pasta{transition:none} .casa .ft-card:hover{transform:none} } /* 🦷 DESIGN IA 22/set (guia do Codex em Referência Design/Design IA/Redesign 2026-09-22/styles.css, copiado como está): grade de 3 (2 entre 821–959 e ≤ 620; gap 20 → 16 abaixo de 1200 → 12 no celular) · cartão borda 1 px raio 14, miniatura 3:4 inteira (contain), título INTEIRO 16/24 600 (15/23 tablet, 14/21 celular) · selo do estado separado da data · ••• de 44 px com 12 px de margem (o mesmo .ft-opcoes das fotos) · menu de 184 px encostado no cartão, itens ≥ 44 px, Apagar em vermelho · contagem 12 px embaixo. */ .casa .di-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px} .casa .di-card{position:relative;min-width:0;background:var(--p-surface);border:1px solid var(--p-line);border-radius:14px;transition:border-color .15s} .casa .di-card:hover{border-color:color-mix(in srgb,var(--p-gold) 55%,var(--p-line))} .casa .di-abrir{display:block;width:100%;padding:0;margin:0;border:0;background:none;text-align:left;border-radius:14px;color:var(--p-text);font:inherit;cursor:pointer;touch-action:manipulation} .casa .di-quadro{aspect-ratio:3/4;background:#050706;border-radius:13px 13px 0 0;overflow:hidden;position:relative;display:grid;place-items:center} .casa .di-quadro img{display:block;width:100%;height:100%;object-fit:contain} .casa .di-sem-foto svg{width:44px;height:44px;color:var(--p-muted);opacity:.6} .casa .di-leg{padding:17px 18px 19px} .casa .di .di-leg h2{font-size:16px;line-height:24px;font-weight:600;letter-spacing:-.15px;margin:0 0 10px;overflow-wrap:anywhere;color:var(--p-text)} .casa .di-meta{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;font-size:12px;line-height:19px;color:var(--p-muted)} .casa .di-status{display:inline-flex;align-items:center;gap:6px;font-size:11px;padding:3px 8px;background:var(--p-control);border:1px solid var(--p-line);border-radius:6px;color:var(--p-text)} .casa .di-status:before{content:'';width:5px;height:5px;background:var(--p-gold);border-radius:50%} .casa .di-opcoes:hover,.casa .di-opcoes[aria-expanded=true]{border-color:var(--p-gold);color:var(--p-gold)} .casa .di-menu{position:absolute;z-index:5;top:64px;right:12px;width:184px;background:var(--p-control);border:1px solid var(--p-line);border-radius:12px;padding:6px;box-shadow:0 12px 36px rgba(0,0,0,.5)} .casa .di-menu button{width:100%;display:flex;align-items:center;gap:10px;padding:11px 12px;min-height:44px;background:none;border:0;border-radius:7px;text-align:left;font:inherit;font-size:13px;color:var(--p-text);cursor:pointer} .casa .di-menu button:hover,.casa .di-menu button:focus-visible{background:var(--p-tint);outline:none} .casa .di-menu button svg{width:18px;height:18px;flex-shrink:0} .casa .di-menu .perigo{color:#edaaa3} :root[data-theme=light] .casa .di-menu .perigo{color:#a7352d} .casa .di-count{color:var(--p-muted);font-size:12px;margin:18px 0} .casa .di .ft-vazio h2{margin:0} #pjNome .modal{width:min(100%,460px)} .pj-rotulo{display:block;font-size:13px;color:var(--p-muted);margin:0 0 8px} @media (max-width:1199px){ .casa .di-grid{gap:16px} .casa .di-leg{padding:16px} .casa .di .di-leg h2{font-size:15px;line-height:23px} } @media (min-width:821px) and (max-width:959px){ .casa .di-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:620px){ .casa .di-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .casa .di-leg{padding:12px} .casa .di .di-leg h2{font-size:14px;line-height:21px} .casa .di-meta{font-size:11px} .casa .di-status{font-size:10px} .casa .di-opcoes{top:8px;right:8px} .casa .di-menu{width:min(184px,calc(100vw - 48px));right:0;top:60px} } /* 🫙 TELA VAZIA PADRÃO (22/set, ele: "ícone pequeno, tem que ser igual ao ícone novo, botão ruim, o mesmo padrão inicial na Anamnese"): o ícone do próprio menu em 64 px (os três com a estrela: 64×77), título 18/26, frase, e o MESMO botão do cabeçalho (44 px, '+'). */ .casa .vz{border:1px dashed var(--p-line);border-radius:14px;padding:56px 24px;text-align:center;color:var(--p-muted);display:flex;flex-direction:column;align-items:center;gap:8px;background:var(--p-surface)} .casa .vz .vz-ic{display:block;margin-bottom:10px;color:var(--p-gold)} .casa .vz .vz-ic svg{width:64px;height:64px;fill:none;stroke:none;margin:0} .casa .vz .vz-ic svg.ic-sorriso{fill:currentColor} /* o sorriso da marca é preenchido */ .casa .vz .vz-ic svg.ic-menu-alto{width:64px;height:77px;margin-top:-13px} .casa .vz h2{margin:0;font-size:18px;line-height:26px;font-weight:600;color:var(--p-text);letter-spacing:-.2px} .casa .vz p{margin:0;font-size:14px;line-height:22px;max-width:52ch} .casa .vz .ae-btn,.casa .vz .fs-acoes{margin-top:14px} .casa .vz .ae-btn{min-height:56px;padding:14px 30px;font-size:16px;line-height:22px;font-weight:600;border-radius:12px;gap:10px;white-space:nowrap} /* 22/set (ele): o botão do box é o ÚNICO quando não há nada — maior que o do cabeçalho */ .casa .vz .ae-btn svg{width:22px;height:22px} .casa .vz .fs-acoes{display:flex;gap:12px;justify-content:center} .casa .vz .fs-acoes .ae-btn{margin-top:0} /* 23/set (ele): a marca Easy Smile no MODO DE APRESENTAÇÃO — por cima da foto, fixa no canto inferior esquerdo, não some com os controles. As fotos em si não levam a marca (vão pro Foto Studio IA e pros Vídeos IA). Mesmo selo da tela cheia do editor (.es-marca). */ .apresenta .ap-marca{position:absolute;left:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:3} @media (max-width:620px){ .apresenta .ap-marca{padding:8px 10px} .apresenta .ap-marca img{width:120px} } /* 23/set: as fotos das roupas no cartão do Foto Studio IA (PNG recortado → webp 640×640 transparente, a peça na mesma escala em todas) */ .casa .fs .fs-garment .fs-roupa-foto{height:100%;width:100%;object-fit:contain;padding:8px 0} .casa .fs .fs-garment svg[hidden]{display:none} /* 23/set (ele): escolha da imagem no Foto Studio IA por BOTÃO (a bolinha saiu). A foto é um botão que amplia; embaixo, o botão largo com o nome da forma. */ .casa .fs .fs-choice-img{cursor:default} .casa .fs .fs-choice-img .fs-quadro{width:100%;padding:0;margin:0;border:0;cursor:zoom-in;font:inherit;color:inherit;border-radius:0} .casa .fs .fs-choice-img .fs-lupa{pointer-events:none} .casa .fs .fs-escolher{padding:12px} .casa .fs .fs-escolher .ae-btn{width:100%;min-height:48px;font-size:14px;font-weight:600;border-radius:10px;gap:8px} .casa .fs .fs-escolher .ae-btn svg{width:18px;height:18px} .casa .fs .fs-choice-img.on{border-color:var(--p-gold);background:var(--p-tint)} /* 23/set (ele): o cartão da forma MAIOR, no padrão dos cartões do app (foto 3:4), com o sorriso recortado do supercílio até abaixo do lábio */ .casa .fs .fs-choice-img .fs-quadro{height:auto;aspect-ratio:3/4;position:relative;overflow:hidden;cursor:pointer} .casa .fs .fs-choice-img .fs-quadro img{object-fit:contain} .casa .fs .fs-choice-img .fs-quadro.recortada img{object-fit:fill} /* 23/set (ele): em toda geração, o logo animado da cortina DENTRO do cartão (Foto Studio IA: por cima das três janelas; Vídeo IA: na miniatura) */ .es-loading.es-cartao{position:absolute;inset:0;z-index:1;padding:0;justify-content:center;background:rgba(8,10,12,.35);pointer-events:none} .es-loading.es-cartao .es-status{font-size:14px;letter-spacing:.3px;margin-top:22px;text-align:center;padding:0 12px} .es-loading.es-cartao .es-dots i{width:4px;height:4px} .casa .fs .fs-gerando .fs-triptych{position:relative;cursor:default} .casa .midia-thumb .es-cartao{--es-k:.5} .casa .midia-thumb .es-cartao .es-core{margin:-55px 0} .casa .midia-thumb .es-cartao .es-status{font-size:12px;margin-top:10px} @media (max-width:620px){ .casa .fs .fs-gerando .es-cartao{--es-k:.55} .casa .fs .fs-gerando .es-cartao .es-core{margin:-50px 0} .casa .fs .fs-gerando .es-cartao .es-status{font-size:12px;margin-top:8px} } @media(prefers-reduced-motion:reduce){.es-cartao *,.es-cartao *:after{animation:none!important}} /* 23/set (ele): Conferir do Foto Studio IA — o Gerar grande embaixo dos três quadros + o aviso de que a IA pode errar */ .casa .fs .fs-gerar{margin-top:28px;display:flex;flex-direction:column;align-items:center;gap:14px} .casa .fs .fs-gerar .ae-btn{width:100%;max-width:520px;min-height:60px;font-size:17px;font-weight:600;border-radius:12px} .casa .fs .fs-aviso-ia{max-width:520px;margin:0;text-align:center;color:var(--p-muted);font-size:13px;line-height:20px} /* ================= 🎬 VÍDEOS IA (23/set, guia do Codex em Referência Design/Vídeos IA/Redesign 2026-09-22/) ================= Mora em .ae.fs.vi: reaproveita o cabeçalho, a cápsula, o trilho fixo e os cartões de escolha do Foto Studio IA. O que é só do vídeo vem aqui. */ .casa .vi .vi-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px} .casa .vi .vi-card{background:var(--p-surface);border:1px solid var(--p-line);border-radius:14px;min-width:0} .casa .vi .vi-card-vazio{aspect-ratio:4/5;background:linear-gradient(90deg,var(--p-control),var(--p-surface),var(--p-control));background-size:200% 100%;animation:fs-brilho 1.6s infinite linear} .casa .vi .vi-thumb{position:relative} .casa .vi .vi-abrir{position:relative;display:block;width:100%;aspect-ratio:4/5;padding:0;border:0;background:#080b09;border-radius:14px 14px 0 0;overflow:hidden;cursor:pointer;color:inherit;touch-action:manipulation} .casa .vi .vi-abrir:disabled{cursor:default} .casa .vi .vi-abrir>img{display:block;width:100%;height:100%;object-fit:cover} .casa .vi .vi-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:48px;height:48px;background:rgba(0,0,0,.53);border:1px solid var(--p-gold);border-radius:50%;color:var(--p-gold);pointer-events:none} .casa .vi .vi-play svg{width:22px;height:22px;stroke-width:1.5} .casa .vi .vi-falhou{position:absolute;bottom:12px;left:12px;background:var(--p-surface);color:#d0a09b;font-size:12px;padding:4px 10px;border-radius:20px} .casa .vi .vi-opc{position:absolute;top:12px;right:12px} .casa .vi .vi-opc .fs-opcoes{background:rgba(9,12,11,.8);color:#fff;border-color:rgba(255,255,255,.2);border-radius:50%} .casa .vi .vi-copy{padding:16px} .casa .vi .vi-copy h2{font-size:15px;line-height:23px;font-weight:600;margin:0 0 10px;overflow-wrap:anywhere;color:var(--p-text)} .casa .vi .vi-copy p{font-size:12px;line-height:18px;margin:0;color:var(--p-muted)} .casa .vi .vi-status{color:var(--p-gold)}.casa .vi .vi-status.falha{color:#d0a09b} .casa .vi .vi-choice .fs-legenda strong{font-weight:600} .casa .vi .vi-choice .fs-legenda small{display:block;margin:4px 0 0 26px;font-size:13px;line-height:20px;color:var(--p-muted)} .casa .vi .vi-duas{grid-template-columns:repeat(2,minmax(0,1fr))} .casa .vi .vi-modelo,.casa .vi .vi-foto{display:block;height:180px;background:#090c0b} .casa .vi .vi-modelo img,.casa .vi .vi-foto img{display:block;width:100%;height:100%;object-fit:contain} .casa .vi .vi-quadro{height:230px} .casa .vi .vi-roupa{height:160px} .casa .vi .vi-roupa img{height:100%;width:auto;max-width:100%;object-fit:contain} .casa .vi .vi-grupo{margin-top:6px} .casa .vi .fs-choices+.vi-grupo{margin-top:28px} .casa .vi .vi-upload-escolha{margin-top:16px} .casa .vi .vi-upload{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:20px} .casa .vi .vi-upload small{font-size:12px;color:var(--p-muted)} .casa .vi .vi-sem{margin:0 0 8px;color:var(--p-muted);font-size:14px;line-height:22px} .casa .vi .vi-voz{margin-top:20px} .casa .vi .vi-voz-tit{margin:0 0 12px;color:var(--p-muted);font-size:14px} .casa .vi .vi-sugestoes{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px} .casa .vi .vi-sugestoes .ae-btn{white-space:normal;text-align:left} .casa .vi .vi-voz label{font-size:14px;color:var(--p-text)} .casa .vi .vi-voz textarea{display:block;width:100%;background:var(--p-control);color:var(--p-text);border:1px solid var(--p-line);border-radius:10px;padding:14px;font:inherit;font-size:16px;resize:vertical;margin-top:10px} .casa .vi .vi-conta{margin:10px 0 0;font-size:13px;color:var(--p-muted)} .casa .vi .vi-review{display:grid;grid-template-columns:240px 1fr;gap:20px} .casa .vi .vi-review-img{height:260px} .casa .vi .vi-origem{margin:0;font-size:13px;color:var(--p-muted)} .casa .vi .vi-review h3{font-size:15px;margin:0 0 6px} .casa .vi .vi-desc{margin:0 0 6px;color:var(--p-muted);font-size:14px;line-height:22px} .casa .vi .vi-linha{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0;border-bottom:1px solid var(--p-line)} .casa .vi .vi-linha>div{min-width:0;overflow-wrap:anywhere} .casa .vi .vi-linha small{font-size:12px;color:var(--p-muted)} .casa .vi .vi-linha p{margin:4px 0;font-size:14px;color:var(--p-text)} .casa .vi .vi-linha .ae-btn{min-height:44px;padding:9px 16px;font-size:13px;flex-shrink:0} .casa .vi .vi-nota{margin:14px 0 0;font-size:12px;color:var(--p-muted)} /* o player (guia: diálogo focado no vídeo, fundo preto, altura limitada pela tela) */ .modal-fundo .modal.casa.vi-player{width:min(760px,calc(100vw - 32px));max-width:760px;max-height:calc(100dvh - 32px);overflow:auto;padding:20px;border-color:color-mix(in srgb,var(--p-gold) 45%,var(--p-line))} .vi-player .vi-player-cab{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px} .vi-player .vi-player-cab h2{margin:0;font-size:18px;line-height:26px;font-weight:600;overflow-wrap:anywhere;min-width:0} .vi-player video{display:block;width:100%;height:min(60dvh,600px);background:#000;object-fit:contain;border-radius:10px} .vi-player .vi-player-pe{display:flex;justify-content:flex-end;margin-top:14px} .vi-player .ae-btn{border:1px solid var(--p-line);background:var(--p-control);color:var(--p-text);border-radius:10px;min-height:44px;padding:9px 16px;font:inherit;font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:8px;cursor:pointer;flex-shrink:0;touch-action:manipulation} .vi-player .ae-btn svg{width:18px;height:18px} @media (max-width:1000px){ .casa .vi .vi-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .casa .vi .vi-review{grid-template-columns:190px 1fr} } @media (max-width:600px){ .casa .vi .vi-grid{gap:12px} .casa .vi .vi-copy{padding:12px} .casa .vi .vi-copy h2{font-size:13px} .casa .vi .vi-opc{right:6px;top:6px} .casa .vi .vi-duas,.casa .vi .vi-review{grid-template-columns:1fr} .casa .vi .fs-steps{grid-template-columns:repeat(3,minmax(0,1fr))!important} .casa .vi .vi-modelo,.casa .vi .vi-foto{height:160px} .casa .vi .vi-review-img{height:180px} } .casa .vi .vi-abrir .es-cartao{--es-k:.7}.casa .vi .vi-abrir .es-cartao .es-core{margin:-33px 0} @media (max-width:600px){ .casa .vi .vi-abrir .es-cartao{--es-k:.42} .casa .vi .vi-abrir .es-cartao .es-core{margin:-64px 0} .casa .vi .vi-abrir .es-cartao .es-status{font-size:11px;margin-top:6px} } /* 23/set (ele): cartões do Modelo em 3:4 com a foto do paciente; Ambiente com a paisagem de cada lugar (9:16 mostrada em 3:4, cheia) */ .casa .vi .vi-modelo{height:auto;aspect-ratio:3/4;overflow:hidden} .casa .vi .vi-modelo img{object-fit:contain} .casa .vi .vi-modelo.paisagem img,.casa .vi .vi-lugar img{object-fit:cover} .casa .vi .vi-lugar{display:block;aspect-ratio:3/4;overflow:hidden;background:#090c0b} .casa .vi .vi-lugar img{display:block;width:100%;height:100%} /* ==================================================================================================================== 🎬 SHOW IA (25/set — Parte 1). Os SLIDES são sempre escuros com o dourado da marca (é uma apresentação, não uma tela do app). Tudo dentro do slide é medido em --u = 1% do lado menor do slide (posto por shEncaixar): o mesmo desenho serve na miniatura e no Play, com o iPad em pé ou deitado, na TV ou no computador. O designer refina depois (decisão dele). ==================================================================================================================== */ .sh-slide{--u:8px;position:absolute;inset:0;display:flex;flex-direction:column;gap:calc(var(--u)*3.5);padding:calc(var(--u)*6);overflow:hidden;color:#f3f1ea; background:#0b1915;text-align:left;font-family:inherit} /* 25/set (ele): cor LISA — o degradê suave fazia 'degraus' no iPad que pareciam uma linha no fundo */ .sh-slide .sh-eyebrow{display:block;font-size:calc(var(--u)*2.2);line-height:1.3;letter-spacing:.14em;text-transform:uppercase;color:#d1b77f;font-weight:600} .sh-slide .sh-cab h2{margin:calc(var(--u)*.8) 0 0;font-size:calc(var(--u)*5.2);line-height:1.15;font-weight:600;letter-spacing:-.01em;color:#f3f1ea} .sh-slide .sh-fotos{flex:1;min-height:0;display:flex;align-items:center;justify-content:center} .sh-slide figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*1.4);min-width:0} .sh-slide .sh-quadro{position:relative;overflow:hidden;border-radius:calc(var(--u)*1.6);background:#000;box-shadow:0 0 0 max(1px,calc(var(--u)*.18)) #d1b77f} /* 25/set (ele): moldura dourada fina */ .sh-slide .sh-quadro img{width:100%;height:100%;object-fit:cover;display:block} .sh-slide .sh-quadro video{width:100%;height:100%;object-fit:contain;background:#000;display:block} .sh-slide figcaption{font-size:calc(var(--u)*2.4);line-height:1.2;color:#cfcac0;letter-spacing:.02em} .sh-slide .sh-texto{flex:1;min-height:0;overflow:hidden} .sh-slide .sh-texto p{margin:0;max-width:62ch;font-size:calc(var(--u)*3.4);line-height:1.55;color:#e9e6de} .sh-slide .sh-capa{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:calc(var(--u)*1.6)} .sh-slide .sh-capa-foto{position:relative;width:calc(var(--u)*30);height:calc(var(--u)*30);border-radius:50%;overflow:hidden;box-shadow:0 0 0 calc(var(--u)*.45) #d1b77f;display:grid;place-items:center;background:#1b201e;font-size:calc(var(--u)*9);color:#d1b77f;margin-bottom:calc(var(--u)*2)} .sh-slide .sh-capa-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} /* 25/set: dentro do grid o height:100% não pegava e a foto ficava cortada (mesma armadilha de 15/set) */ .sh-slide .sh-capa .sh-eyebrow{font-size:calc(var(--u)*2.6);letter-spacing:.2em} .sh-slide .sh-capa-nome{margin:0;font-size:calc(var(--u)*7);line-height:1.1;font-weight:600;letter-spacing:-.02em;color:#f3f1ea} .sh-slide .sh-capa-prof{margin:0;font-size:calc(var(--u)*2.8);color:#cfcac0} .sh-slide .sh-play-ic{position:absolute;inset:0;display:grid;place-items:center} .sh-slide .sh-play-ic svg{width:calc(var(--u)*8);height:calc(var(--u)*8);padding:calc(var(--u)*2);border-radius:50%;background:rgba(0,0,0,.5);color:#fff;fill:none;stroke:currentColor;stroke-width:2} /* a tela do menu: miniaturas */ .casa .sh .sh-barra{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 16px} .casa .sh .sh-meta{font-size:14px;line-height:20px;color:var(--p-muted);margin:0} .casa .sh .sh-grade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px} @media (min-width:821px) and (max-width:959px){ .casa .sh .sh-grade{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:620px){ .casa .sh .sh-grade{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} } .casa .sh .sh-mini{display:flex;flex-direction:column;gap:8px;padding:0;border:0;background:none;text-align:left;cursor:pointer;color:var(--p-text);font:inherit;min-width:0} .casa .sh .sh-mini-quadro{position:relative;aspect-ratio:4/3;border-radius:12px;overflow:hidden;border:1px solid var(--p-line);pointer-events:none} .casa .sh .sh-mini:hover .sh-mini-quadro,.casa .sh .sh-mini:focus-visible .sh-mini-quadro{border-color:var(--p-gold)} .casa .sh .sh-mini-leg{font-size:13px;line-height:18px;color:var(--p-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .casa .sh .sh-mini-leg b{color:var(--p-gold);font-weight:600;margin-right:4px} .casa .sh .sh-gerando{position:relative;min-height:min(62vh,640px)} /* 25/set (ele): sem a caixa tracejada, a animação centrada e maior */ .casa .sh .sh-gerando .es-cartao{--es-k:1.2;background:transparent} .casa .sh .sh-slide svg{margin:0} /* o Play */ .sh-play{position:fixed;inset:0;z-index:200;background:#0b1915;color:#fff;-webkit-user-select:none;user-select:none;touch-action:none;overflow:hidden} .sh-play .sh-camada{position:absolute;inset:0;opacity:0;transition:opacity .6s ease;pointer-events:none} .sh-play .sh-camada.on{opacity:1;pointer-events:auto} .sh-play .sh-slide{padding-top:calc(var(--u)*5 + 64px + env(safe-area-inset-top));padding-bottom:calc(var(--u)*5 + 76px + env(safe-area-inset-bottom))} .sh-play .sh-topo{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;align-items:center;gap:12px;padding:14px 18px;padding-top:calc(14px + env(safe-area-inset-top));transition:opacity .4s} .sh-play .sh-topo-nome{flex:1;min-width:0;font-size:13px;letter-spacing:.04em;color:#c4c7c5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sh-play .sh-cont{font-size:13px;letter-spacing:.08em;color:rgba(255,255,255,.85);white-space:nowrap} .sh-play .sh-btn{width:44px;height:44px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.45);color:#fff;cursor:pointer} .sh-play .sh-seta{position:absolute;top:calc(50% - 28px);z-index:2;width:56px;height:56px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.45);color:#fff;cursor:pointer;transition:opacity .4s} /* sem transform (regra do iPad, 24/set) */ .sh-play .sh-seta.esq{left:14px}.sh-play .sh-seta.dir{right:14px} .sh-play .sh-seta:disabled{opacity:.2;cursor:default} .sh-play.quieto .sh-topo,.sh-play.quieto .sh-seta{opacity:0} .sh-play .sh-topo svg,.sh-play .sh-seta svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block;margin:auto} .sh-play .ap-marca{position:absolute;left:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:3} @media (max-width:620px){ .sh-play .ap-marca img{width:120px} } .sh-slide .sh-assina{position:absolute;right:calc(var(--u)*4);bottom:calc(var(--u)*3);font-size:calc(var(--u)*2.2);line-height:1.2;color:#cfcac0;letter-spacing:.02em;white-space:nowrap} .sh-play .sh-slide .sh-assina{right:28px;bottom:calc(16px + env(safe-area-inset-bottom));height:72px;display:flex;align-items:center;font-size:18px;font-weight:500;letter-spacing:.03em;color:#e6e1d6} /* 25/set (ele): alinhado com a marca — mesma distância da borda (a imagem da marca começa a 28 px) e centrado na altura da caixa dela (72 px) */ @media (max-width:620px){ .sh-play .sh-slide .sh-assina{right:26px;height:58px;font-size:15px} } .casa .sh .sh-aviso{margin:0 0 16px;padding:12px 16px;border:1px solid var(--p-gold);border-radius:12px;background:var(--p-tint, rgba(209,183,127,.08));color:var(--p-text);font-size:14px;line-height:21px} html.sh-tocando,html.sh-tocando body{background:#0b1915!important} /* 25/set: a faixa do risquinho do iPad (fora da tela do Play) fica da mesma cor */ /* 🎬 Show IA — o slide da anamnese (25/set, ele: "o resumo clínico, com a nota que tem visual bacana") */ .sh-slide .sh-an{--f:1;flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:calc(var(--u)*3*var(--f))} .sh-slide .sh-an-rot{display:block;font-size:calc(var(--u)*1.9*var(--f));line-height:1.3;letter-spacing:.06em;text-transform:uppercase;color:#9fa39d;margin-bottom:calc(var(--u)*1*var(--f))} .sh-slide .sh-an-val{font-size:calc(var(--u)*2.7*var(--f));line-height:1.4;color:#f3f1ea} .sh-slide .sh-chips{display:flex;flex-wrap:wrap;gap:calc(var(--u)*1.1*var(--f))} .sh-slide .sh-chips span{font-size:calc(var(--u)*2.4*var(--f));line-height:1.25;padding:calc(var(--u)*.9*var(--f)) calc(var(--u)*1.8*var(--f));border:1px solid rgba(209,183,127,.55);border-radius:999px;color:#f3f1ea;background:rgba(209,183,127,.08)} .sh-slide .sh-an-exp{margin:0;font-size:calc(var(--u)*3.4*var(--f));line-height:1.4;color:#f3f1ea;font-style:italic;border-left:max(2px,calc(var(--u)*.35)) solid #d1b77f;padding-left:calc(var(--u)*2*var(--f))} .sh-slide .sh-an-grade{display:grid;grid-template-columns:1fr 1fr calc(var(--u)*30);gap:calc(var(--u)*3*var(--f)) calc(var(--u)*3.5*var(--f));padding-top:calc(var(--u)*3*var(--f));border-top:1px solid rgba(255,255,255,.12)} .sh-slide .sh-an-nota{grid-column:3;grid-row:1 / span 3;border-left:1px solid rgba(255,255,255,.12);padding-left:calc(var(--u)*3.5*var(--f));display:flex;flex-direction:column;justify-content:center} .sh-slide .sh-an-num{font-size:calc(var(--u)*11*var(--f));line-height:1;font-weight:600;color:#d1b77f;margin:calc(var(--u)*1*var(--f)) 0} .sh-slide .sh-an-num small{font-size:.35em;font-weight:500;color:#cfcac0;margin-left:.3em} .sh-slide .sh-an-escala{display:flex;gap:calc(var(--u)*.6);margin:calc(var(--u)*1.5*var(--f)) 0} .sh-slide .sh-an-escala i{flex:1;height:max(3px,calc(var(--u)*.6));border-radius:999px;background:rgba(255,255,255,.18)} .sh-slide .sh-an-escala i.on{background:#d1b77f} .sh-slide .sh-an-leg{font-size:calc(var(--u)*1.9*var(--f));color:#9fa39d} /* 📤 Show IA — exportar (25/set): o slide é montado FORA da tela no tamanho do iPad deitado; a marca e o nome ficam como no Play */ .sh-exporta{position:fixed;left:-20000px;top:0;overflow:hidden;background:#0b1915;pointer-events:none} .sh-exporta .sh-slide{padding-bottom:calc(var(--u)*5 + 76px)} .sh-exporta .sh-slide .sh-assina{right:28px;bottom:16px;height:72px;display:flex;align-items:center;font-size:18px;font-weight:500;letter-spacing:.03em;color:#e6e1d6} .sh-exporta .es-marca{left:16px;bottom:16px} .sh-exportando{position:fixed;inset:0;z-index:400;background:rgba(8,10,12,.82)} .casa .sh .studio-heading-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end} /* 25/set (ele): Exportar e Apresentar não podem ficar grudados */ /* ==================================================================================================================== 🎬 SHOW IA — ACABAMENTO DO GUIA VISUAL DO GPT (25/set, "Guia visual 2026-09-25/GUIA-VISUAL-SHOW-IA-V2.pdf", decidido por mim a pedido dele). Títulos mais leves · legenda embaixo da foto, à esquerda · moldura dourada fina · marca SEM placa, alinhada com o nome · "Simulação do planejamento" discreto · capa/encerramento com retrato grande · anamnese em dois slides. Estas regras vêm DEPOIS e valem por cima das de cima. ==================================================================================================================== */ .sh-slide{padding:calc(var(--u)*5) calc(var(--u)*5.5)} .sh-slide .sh-eyebrow{font-size:calc(var(--u)*1.9);letter-spacing:.12em} .sh-slide .sh-cab h2{font-size:calc(var(--u)*4.8);font-weight:500;letter-spacing:-.01em} .sh-slide figure{align-items:flex-start} .sh-slide figcaption{font-size:calc(var(--u)*2.2);color:#e6e1d6;letter-spacing:.01em} .sh-slide .sh-quadro{border-radius:calc(var(--u)*.6);box-shadow:0 0 0 max(1px,calc(var(--u)*.12)) #d1b77f} .sh-slide .sh-simul{position:absolute;right:calc(var(--u)*4);bottom:calc(var(--u)*6.8);font-size:calc(var(--u)*1.6);color:#9fa39d;letter-spacing:.02em;white-space:nowrap} /* capa e encerramento: em pé = texto em cima, retrato embaixo; deitado = texto à esquerda, retrato à direita */ .sh-slide .sh-capa{flex:1;min-height:0;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;text-align:left;gap:calc(var(--u)*4)} .sh-slide .sh-capa.sem-foto{justify-content:center} .sh-slide .sh-capa-txt{display:flex;flex-direction:column;gap:calc(var(--u)*1.4)} .sh-slide .sh-capa .sh-fotos{flex:1;min-height:0} .sh-slide.sh-deitado .sh-capa{flex-direction:row;align-items:center;gap:calc(var(--u)*6)} .sh-slide.sh-deitado .sh-capa-txt{flex:1 1 44%;min-width:0} .sh-slide.sh-deitado .sh-capa .sh-fotos{flex:1 1 56%;align-self:stretch} .sh-slide .sh-capa .sh-eyebrow{font-size:calc(var(--u)*2.1);letter-spacing:.16em} .sh-slide .sh-capa-nome{font-size:calc(var(--u)*7.5);font-weight:500;line-height:1.08} .sh-slide .sh-fim-tit{margin:0;font-size:calc(var(--u)*6);font-weight:400;line-height:1.15;color:#f3f1ea;letter-spacing:-.01em} .sh-slide .sh-capa-prof{font-size:calc(var(--u)*2.6);color:#cfcac0;margin-top:calc(var(--u)*1)} /* anamnese — 1º slide: a fala do paciente em destaque + incômodos + cor, e a nota ao lado (deitado) ou embaixo (em pé) */ .sh-slide .sh-an1{display:flex;flex-direction:column;justify-content:center;gap:calc(var(--u)*4*var(--f))} .sh-slide.sh-deitado .sh-an1{flex-direction:row;align-items:center;gap:calc(var(--u)*6*var(--f))} .sh-slide .sh-an-esq{flex:1;min-width:0;display:flex;flex-direction:column;gap:calc(var(--u)*3.5*var(--f))} .sh-slide .sh-an1 .sh-an-exp{font-size:calc(var(--u)*4.4*var(--f));line-height:1.3;font-weight:400} .sh-slide .sh-an1 .sh-an-nota{grid-column:auto;grid-row:auto;flex:0 0 auto;width:calc(var(--u)*30);border-left:0;padding-left:0;border-top:1px solid rgba(255,255,255,.12);padding-top:calc(var(--u)*3*var(--f))} .sh-slide.sh-deitado .sh-an1 .sh-an-nota{border-top:0;padding-top:0;border-left:1px solid rgba(255,255,255,.12);padding-left:calc(var(--u)*4*var(--f))} /* anamnese — 2º slide: o contexto relatado, em grade (deitado) ou uma coluna (em pé) */ .sh-slide .sh-an2{display:grid;grid-template-columns:1fr;align-content:center;gap:calc(var(--u)*4*var(--f))} .sh-slide.sh-deitado .sh-an2{grid-template-columns:1fr 1fr;column-gap:calc(var(--u)*6*var(--f))} .sh-slide .sh-an2 .sh-an-rot{color:#d1b77f} .sh-slide .sh-an2 .sh-an-val{font-size:calc(var(--u)*3.2*var(--f));line-height:1.35} /* rodapé: a marca SEM a placa escura, alinhada com o nome do profissional (mesma distância da borda, mesma linha) */ .sh-play .ap-marca,.sh-exporta .es-marca{background:transparent;padding:0;border-radius:0} .sh-play .ap-marca{left:28px;bottom:calc(26px + env(safe-area-inset-bottom))} .sh-exporta .es-marca{left:28px;bottom:26px} .sh-play .sh-slide .sh-assina{right:28px;bottom:calc(26px + env(safe-area-inset-bottom));height:52px;font-size:17px;font-weight:400;color:#d8d3c7} .sh-exporta .sh-slide .sh-assina{right:28px;bottom:26px;height:52px;font-size:17px;font-weight:400;color:#d8d3c7} .sh-play .sh-slide .sh-simul{right:28px;bottom:calc(86px + env(safe-area-inset-bottom));font-size:12px} .sh-exporta .sh-slide .sh-simul{right:28px;bottom:86px;font-size:12px} .sh-play .sh-slide{padding-bottom:calc(var(--u)*4 + 104px + env(safe-area-inset-bottom))} .sh-exporta .sh-slide{padding-bottom:calc(var(--u)*4 + 104px)} @media (max-width:620px){ .sh-play .sh-slide .sh-assina{height:38px;font-size:14px} } /* a tela do menu: miniaturas com largura mínima (2 colunas no iPad em pé) e legenda em até duas linhas */ .casa .sh .sh-grade{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))} @media (max-width:620px){ .casa .sh .sh-grade{grid-template-columns:repeat(2,minmax(0,1fr))} } .casa .sh .sh-mini-leg{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:18px} /* ✏️ SHOW IA — o EDITOR (25/set). Deitado: miniaturas numa coluna à esquerda; em pé: numa fileira embaixo (guia do GPT, p. 33–34). Botões ≥ 48 px. */ .sh-slide .sh-quadro img.sh-inteira{object-fit:contain} .casa .sh-ed .sh-ed-corpo{display:grid;grid-template-columns:176px minmax(0,1fr);gap:20px;align-items:start} .casa .sh-ed .sh-ed-lista{display:flex;flex-direction:column;gap:14px;max-height:calc(100dvh - 300px);overflow-y:auto;padding:6px 6px 6px 2px;touch-action:pan-y;-webkit-overflow-scrolling:touch} .casa .sh-ed .sh-ed-mini{position:relative;flex:0 0 auto;width:100%;padding:0;border:0;background:none;cursor:pointer;display:flex;flex-direction:column;gap:6px;color:var(--p-muted);font:inherit;text-align:left;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none} .casa .sh-ed .sh-ed-mini .sh-mini-quadro{aspect-ratio:4/3;position:relative;border-radius:10px;overflow:hidden;border:1px solid var(--p-line);pointer-events:none} .casa .sh-ed .sh-ed-mini.on .sh-mini-quadro{border-color:var(--p-gold);box-shadow:0 0 0 2px var(--p-gold)} .casa .sh-ed .sh-ed-mini.oculto .sh-mini-quadro{opacity:.4} .casa .sh-ed .sh-ed-mini.pego{opacity:.3} .casa .sh-ed .sh-ed-num{font-size:12px;line-height:16px} .casa .sh-ed .sh-ed-num em{color:var(--p-gold);font-style:normal} .casa .sh-ed .sh-ed-mini.antes::before,.casa .sh-ed .sh-ed-mini.depois::after{content:'';position:absolute;left:0;right:0;height:3px;border-radius:2px;background:var(--p-gold)} .casa .sh-ed .sh-ed-mini.antes::before{top:-9px}.casa .sh-ed .sh-ed-mini.depois::after{bottom:-9px} .sh-ed-fantasma{position:fixed;z-index:500;pointer-events:none;opacity:.92;transform:rotate(-2deg);box-shadow:0 14px 34px rgba(0,0,0,.55);border-radius:10px} .sh-ed-fantasma .sh-mini-quadro{aspect-ratio:4/3;position:relative;overflow:hidden;border-radius:10px;border:2px solid #d1b77f} .sh-ed-fantasma .sh-ed-num{display:none} .casa .sh-ed .sh-ed-previa{position:relative;aspect-ratio:4/3;border-radius:12px;overflow:hidden;border:1px solid var(--p-line);cursor:text;background:#0b1915} .casa .sh-ed .sh-ed-previa.oculto .sh-slide{opacity:.45} .casa .sh-ed .sh-ed-tarja{position:absolute;left:12px;top:12px;z-index:3;padding:6px 12px;border-radius:999px;background:rgba(0,0,0,.72);color:#e6e1d6;font-size:13px} .casa .sh-ed .sh-ed-falta,.sh-ed-fantasma .sh-ed-falta{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:12px;color:var(--p-muted);font-size:13px;background:#0b1915} .casa .sh-ed .sh-ed-acoes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px} .casa .sh-ed .sh-ed-acoes .ae-btn{min-height:48px;justify-content:center} .casa .sh-ed .sh-ed-excluir{color:#e39a9a} .casa .sh-ed .sh-ed-dica{font-size:13px;line-height:19px;color:var(--p-muted);margin:12px 0 0} .casa .sh-ed .sh-ed-sujo{color:var(--p-gold)} @media (orientation:portrait),(max-width:900px){ .casa .sh-ed .sh-ed-corpo{grid-template-columns:minmax(0,1fr)} .casa .sh-ed .sh-ed-lista{order:2;flex-direction:row;max-height:none;overflow-x:auto;overflow-y:hidden;touch-action:pan-x;padding:10px 4px 6px} .casa .sh-ed .sh-ed-mini{width:150px} .casa .sh-ed .sh-ed-mini.antes::before{top:0;bottom:22px;left:-9px;right:auto;width:3px;height:auto} .casa .sh-ed .sh-ed-mini.depois::after{top:0;bottom:22px;right:-9px;left:auto;width:3px;height:auto} } @media (max-width:620px){ .casa .sh-ed .sh-ed-acoes{grid-template-columns:repeat(2,minmax(0,1fr))} } /* as caixas do editor */ .modal.sh-ed-modal{width:min(100%,660px);max-height:88dvh;display:flex;flex-direction:column} .sh-ed-modal h2{margin:0 0 6px;font-size:19px;font-weight:600} .sh-ed-modal .sh-ed-escolha{overflow:auto;max-height:58dvh;margin:6px 0 14px;-webkit-overflow-scrolling:touch} .sh-ed-modal .sh-ed-grupo h3{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--p-gold);margin:14px 0 8px;font-weight:600} .sh-ed-modal .sh-ed-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px} .sh-ed-modal .sh-ed-quadros{margin:12px 0} .sh-ed-modal .sh-ed-op{display:flex;flex-direction:column;gap:6px;padding:6px;border:1px solid var(--p-line);border-radius:10px;background:var(--p-control);color:var(--p-text);font:inherit;font-size:12px;text-align:left;cursor:pointer;min-width:0} .sh-ed-modal .sh-ed-op img,.sh-ed-modal .sh-ed-op i{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:6px;background:#000;display:block} .sh-ed-modal .sh-ed-op span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sh-ed-modal .sh-ed-op.on{border-color:var(--p-gold);box-shadow:0 0 0 2px var(--p-gold)} .sh-ed-modal .sh-ed-campo{display:flex;flex-direction:column;gap:6px;margin:12px 0} .sh-ed-modal .sh-ed-campo span{font-size:13px;color:var(--p-muted)} .sh-ed-modal .sh-ed-campo input,.sh-ed-modal .sh-ed-campo textarea{font:inherit;font-size:16px;padding:12px 14px;border-radius:10px;border:1px solid var(--p-line);background:var(--p-control);color:var(--p-text);resize:vertical} .sh-ed-modal .sh-ed-nota{font-size:13px;line-height:19px;color:var(--p-muted);margin:8px 0} .sh-ed-modal .sh-ed-saida{display:flex;flex-direction:column;gap:10px;margin-top:8px} .sh-ed-modal .sh-ed-saida .btn,.sh-ed-modal .row .btn{min-height:50px} .casa .sh-ed .sh-ed-previa{width:min(100%,calc((100dvh - 380px) * 4 / 3));min-width:min(100%,320px);margin:0 auto} /* a prévia nunca empurra os botões pra fora da tela */ /* 🎬 Show IA — 25/set (2º retorno dele): a linha do Antes × Design, o ensaio em 4:5 e a anamnese mais DELICADA ("bruta, textos muito grandes") */ .sh-slide .sh-quadro img.sh-e45{object-fit:cover;object-position:50% 18%} .sh-slide .sh-comp{touch-action:none;cursor:ew-resize} .sh-slide .sh-comp>img{position:absolute} .sh-slide .sh-comp-dir{position:absolute;top:0;bottom:0;right:0;left:var(--x,50%);overflow:hidden} .sh-slide .sh-comp-in{position:absolute;top:0;right:0;height:100%;width:100%} .sh-slide .sh-comp-in img{display:block} .sh-slide .sh-comp-linha{position:absolute;top:0;bottom:0;left:var(--x,50%);width:max(2px,calc(var(--u)*.25));margin-left:calc(max(2px,calc(var(--u)*.25)) / -2);background:#d1b77f;pointer-events:none} .sh-slide .sh-comp-alca{position:absolute;top:50%;left:var(--x,50%);width:calc(var(--u)*6);height:calc(var(--u)*6);margin:calc(var(--u)*-3) 0 0 calc(var(--u)*-3);border-radius:50%;background:#0b1915;border:max(2px,calc(var(--u)*.25)) solid #d1b77f;pointer-events:none;box-shadow:0 2px 10px rgba(0,0,0,.5)} .sh-slide .sh-comp-rot{position:absolute;bottom:calc(var(--u)*1.6);padding:calc(var(--u)*.6) calc(var(--u)*1.4);border-radius:999px;font-size:calc(var(--u)*1.7);letter-spacing:.12em;text-transform:uppercase;font-weight:600;pointer-events:none} .sh-slide .sh-comp-rot.esq{left:calc(var(--u)*1.6);background:rgba(0,0,0,.6);color:#fff} .sh-slide .sh-comp-rot.dir{right:calc(var(--u)*1.6);background:#d1b77f;color:#20271f} /* anamnese mais delicada: letras menores, textos com largura de leitura, tudo centrado na altura */ .sh-slide .sh-an1 .sh-an-exp{font-size:calc(var(--u)*3.6*var(--f));line-height:1.35;max-width:32ch} .sh-slide .sh-an .sh-an-rot{font-size:calc(var(--u)*1.6*var(--f));letter-spacing:.1em} .sh-slide .sh-an .sh-an-val{font-size:calc(var(--u)*2.4*var(--f))} .sh-slide .sh-chips span{font-size:calc(var(--u)*2*var(--f));padding:calc(var(--u)*.7*var(--f)) calc(var(--u)*1.5*var(--f))} .sh-slide .sh-an1 .sh-an-num{font-size:calc(var(--u)*8.5*var(--f))} .sh-slide .sh-an1 .sh-an-nota{width:calc(var(--u)*26)} .sh-slide .sh-an2{max-width:calc(var(--u)*120)} .sh-slide .sh-an2 .sh-an-val{font-size:calc(var(--u)*2.5*var(--f));line-height:1.4;max-width:34ch} .sh-slide .sh-an2 .sh-an-rot{margin-bottom:calc(var(--u)*.8*var(--f))} .sh-slide .sh-an1 .sh-an-esq{flex:0 1 auto} /* em pé: o bloco não estica — a nota fica logo abaixo, tudo centrado na altura */ .sh-slide.sh-deitado .sh-an1 .sh-an-esq{flex:1 1 auto} /* 🎬 Show IA — 4º retorno (25/set): a linha IGUAL à do editor, enquadramento, antes/depois em vídeo lado a lado, editor por toque */ .sh-slide .sh-aj{position:absolute;inset:0;transform-origin:50% 50%} .sh-slide .sh-comp-alca{display:none} .sh-slide .sh-comp-linha{box-shadow:0 0 0 1px rgba(18,22,20,.5),0 0 7px rgba(0,0,0,.45)} .sh-slide .sh-comp-grip{position:absolute;left:50%;width:calc(var(--u)*6.5);height:calc(var(--u)*6.5);border-radius:50%;background:#1e251f;border:1px solid #d1b77f;box-shadow:0 0 0 calc(var(--u)*.5) rgba(20,27,22,.25);display:grid;place-items:center;color:#d1b77f;transition:background .18s,color .18s} .sh-slide .sh-comp-grip.topo{top:calc(var(--u)*7);transform:translate(-50%,-50%)} .sh-slide .sh-comp-grip.base{bottom:calc(var(--u)*7);transform:translate(-50%,50%)} .sh-slide .sh-comp-grip svg{width:43%;height:43%;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;display:block} .sh-slide .sh-comp.pegando .sh-comp-grip{background:#d1b77f;color:#141b16;box-shadow:0 0 0 calc(var(--u)*1) rgba(209,183,127,.22),0 0 calc(var(--u)*2.5) rgba(209,183,127,.85)} .sh-slide .sh-comp-rot{font-size:calc(var(--u)*1.5);letter-spacing:.2em;font-weight:700} .sh-slide .sh-v2 .sh-quadro video{object-fit:cover} .sh-slide .sh-v2 figure{cursor:pointer} .sh-slide .sh-som{position:absolute;right:calc(var(--u)*1.4);top:calc(var(--u)*1.4);width:calc(var(--u)*5);height:calc(var(--u)*5);border-radius:50%;background:rgba(0,0,0,.55);display:grid;place-items:center;color:#fff;opacity:.55} .sh-slide .sh-som svg{width:55%;height:55%;stroke:currentColor;fill:none;stroke-width:2} .sh-slide .sh-v2 figure.som .sh-som{opacity:1;background:#d1b77f;color:#141b16} /* editor: tocar na foto / ajustar enquadramento */ .casa .sh-ed .sh-ed-previa figure .sh-quadro{cursor:pointer} .casa .sh-ed .sh-ed-previa .sh-quadro.sh-ajustavel{outline:2px dashed #d1b77f;outline-offset:3px;cursor:move;touch-action:none} .casa .sh-ed .sh-ed-previa.ajustando figure:not(:has(.sh-ajustavel)){opacity:.45} .casa .sh-ed .sh-ed-ajbar{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;justify-content:space-between;margin-top:14px} .casa .sh-ed .sh-ed-ajbar span{font-size:13px;color:var(--p-muted)} .casa .sh-ed .sh-ed-ajbar div{display:flex;gap:8px;flex-wrap:wrap} .casa .sh-ed .sh-ed-ajbar .ae-btn{min-height:48px} .sh-ed-modal .sh-ed-ensaio{display:flex;flex-direction:column;gap:8px;width:100%;padding:10px;margin:0 0 10px;border:1px solid var(--p-line);border-radius:12px;background:var(--p-control);color:var(--p-text);font:inherit;font-size:13px;text-align:left;cursor:pointer} .sh-ed-modal .sh-ed-ensaio.on{border-color:var(--p-gold);box-shadow:0 0 0 2px var(--p-gold)} .sh-ed-modal .sh-ed-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:6px} .sh-ed-modal .sh-ed-trio img{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:6px;background:#000} /* 25/set: ".casa .ae h2" (22px) passava por cima dos títulos da capa e do encerramento nas miniaturas — agora os do slide mandam */ .sh-slide h2.sh-capa-nome{margin:0;font-size:calc(var(--u)*7.5);font-weight:500;line-height:1.08;color:#f3f1ea;letter-spacing:-.02em} .sh-slide h2.sh-fim-tit{margin:0;font-size:calc(var(--u)*6);font-weight:400;line-height:1.15;color:#f3f1ea;letter-spacing:-.01em} /* 🎬 JUNTAR VÍDEOS (25/set, ele): o dentista toca nos vídeos na ordem; o número dourado mostra a ordem */ .casa .vi .vi-juntar .fs-titulo{font-size:22px;font-weight:600;margin:4px 0 6px} .casa .vi .vi-juntar .fs-lead{margin:0 0 4px} .casa .vi .vi-juntar-dica{margin:0 0 18px;color:var(--p-muted);font-size:14px;line-height:21px} .casa .vi .vi-junta.on{border-color:#d1b77f;box-shadow:0 0 0 1px #d1b77f} .casa .vi .vi-junta-n{position:absolute;top:12px;left:12px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:18px;font-weight:700;background:#d1b77f;color:#20271f;box-shadow:0 2px 8px rgba(0,0,0,.35)} .casa .vi .vi-junta-n.vazio{background:rgba(20,27,22,.55);border:2px solid rgba(255,255,255,.85)} .casa .vi .vi-juntar-acoes{display:flex;align-items:center;gap:12px;margin-top:20px;position:sticky;bottom:0;padding:14px 0;background:var(--p-canvas)} .casa .vi .vi-juntar-conta{flex:1;text-align:center;color:var(--p-muted);font-size:14px} /* 🎬 SHOW IA — a linha do Antes × Design mais fina (ele, 25/set: "afina mais um pouco") */ .sh-slide .sh-comp-linha{width:max(1.5px,calc(var(--u)*.15));margin-left:calc(max(1.5px,calc(var(--u)*.15)) / -2);box-shadow:0 0 0 .5px rgba(18,22,20,.5),0 0 5px rgba(0,0,0,.4)} /* ❤️ A forma preferida (25/set) */ .sh-slide .sh-coracao{position:absolute;right:calc(var(--u)*1.4);bottom:calc(var(--u)*1.4);z-index:2;width:max(44px,calc(var(--u)*6));height:max(44px,calc(var(--u)*6));padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.7);background:rgba(11,25,21,.55);color:#fff;display:grid;place-items:center;cursor:pointer;touch-action:manipulation} .sh-slide .sh-coracao svg{width:52%;height:52%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;display:block} .sh-slide .sh-coracao.on{background:#d1b77f;border-color:#d1b77f;color:#20271f} .sh-slide .sh-coracao.on svg{fill:currentColor} .sh-slide span.sh-coracao{width:calc(var(--u)*4.5);height:calc(var(--u)*4.5);cursor:default} /* ✍️ Apontador e Caneta no Play (25/set) */ .sh-play .sh-ferr-area{position:absolute;inset:0;z-index:1;pointer-events:none} .sh-play .sh-ferr-area canvas{position:absolute;inset:0;width:100%;height:100%;display:block} .sh-play.ferramenta .sh-ferr-area{pointer-events:auto;cursor:crosshair} .sh-play.ferramenta:not(.com-caneta) .sh-ferr-area{cursor:none} .sh-play .sh-ferr-btn.on{background:#d1b77f;border-color:#d1b77f;color:#20271f} .sh-play .sh-ferr-btn:disabled{opacity:.3;cursor:default} .sh-play .sh-recado{position:absolute;left:50%;bottom:calc(30px + env(safe-area-inset-bottom));z-index:4;max-width:calc(100% - 32px);padding:12px 20px;border-radius:999px;background:rgba(11,25,21,.92);border:1px solid #d1b77f;color:#f3efe6;font-size:15px;text-align:center;opacity:0;pointer-events:none;transition:opacity .3s;margin-left:0;translate:-50% 0} .sh-play .sh-recado.on{opacity:1} .sh-play .sh-limpar{display:none} .sh-play.com-caneta .sh-limpar{display:block} /* 25/set (ele): o Limpar só aparece com a caneta ligada */ /* 25/set (ele): Apontador · Caneta · Limpar em coluna na lateral direita, logo abaixo da seta */ .sh-play .sh-ferrs{position:absolute;right:20px;top:calc(50% + 44px);z-index:2;display:flex;flex-direction:column;gap:12px;transition:opacity .4s} .sh-play .sh-ferrs .sh-btn{width:48px;height:48px} .sh-play .sh-ferrs svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block;margin:auto} .sh-play.quieto .sh-ferrs{opacity:0} .sh-play.ferramenta.quieto .sh-ferrs{opacity:1} /* 🔗 CONEXÃO LAB (25/set) — a tela do dentista (no padrão da Anamnese / Vídeo IA) */ .casa .lb .page-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:26px} .casa .lb .page-heading h1{font-size:28px;font-weight:600;margin:0 0 6px} .casa .lb .subtitle{margin:0;color:var(--p-muted);font-size:15px} .casa .lb .ae-back{margin-bottom:14px} .casa .lb .lb-lista{display:flex;flex-direction:column;gap:14px;max-width:840px} .casa .lb .lb-card{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;background:var(--p-surface);border:1px solid var(--p-line);border-radius:14px;padding:18px 20px} .casa .lb .lb-card-vazio{min-height:96px;opacity:.5} .casa .lb .lb-card h2{font-size:17px;font-weight:600;margin:2px 0 4px} .casa .lb .lb-card p{margin:0;color:var(--p-muted);font-size:14px} .casa .lb .lb-quando{font-size:12px !important;letter-spacing:.06em} .casa .lb .lb-card-acoes{display:flex;gap:10px;flex-wrap:wrap} .casa .lb .lb-apagar{color:#e58a7c} .casa .lb .ae-btn svg{width:18px;height:18px} .casa .lb .lb-bloco{background:var(--p-surface);border:1px solid var(--p-line);border-radius:14px;padding:20px 22px;margin:0 0 16px;max-width:980px} .casa .lb .lb-bloco h2{font-size:17px;font-weight:600;margin:0 0 6px} .casa .lb .lb-bloco label,.casa .lb .lb-dica{display:block;color:var(--p-muted);font-size:14px;margin:0 0 4px} .casa .lb .lb-datas{display:grid;grid-template-columns:1fr 1fr;gap:20px} .casa .lb .lb-hoje{font-size:20px;font-weight:600;margin:14px 0 0} .casa .lb input[type=date].ae-field{color-scheme:dark;max-width:320px} .casa .lb .lb-odonto{margin:14px 0 6px;background:#10201b;border-radius:12px;padding:12px} .casa .lb .lb-odonto svg{width:100%;height:auto;display:block} .casa .lb .lb-odonto .dente{cursor:pointer} .casa .lb .lb-odonto .dente .sel{display:none}.casa .lb .lb-odonto .dente.on .sel{display:inline}.casa .lb .lb-odonto .dente.on .rep{display:none} .casa .lb .lb-odonto-carregando{aspect-ratio:3020/1490} .casa .lb .lb-odonto-acoes{display:flex;justify-content:flex-end;margin-bottom:8px} .casa .lb .lb-trabalho{font-size:16px;line-height:1.55;margin:8px 0 0} .casa .lb .lb-trabalho strong{color:#e7d3a3} .casa .lb .lb-formas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:12px} .casa .lb .lb-forma{display:flex;flex-direction:column;gap:10px;padding:0;border:1px solid var(--p-line);border-radius:14px;background:var(--p-canvas);color:var(--p-text);cursor:pointer;overflow:hidden;text-align:center} .casa .lb .lb-forma.on{border-color:#d1b77f;box-shadow:0 0 0 1px #d1b77f} .casa .lb .lb-forma-img{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;background:#000} .casa .lb .lb-forma-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .casa .lb .lb-forma-nome{padding:0 10px 12px;font-weight:600;font-size:15px;display:flex;align-items:center;justify-content:center;gap:6px} .casa .lb .lb-forma.on .lb-forma-nome{color:#d1b77f} .casa .lb .lb-forma-nome svg{width:16px;height:16px} .casa .lb textarea.ae-field{min-height:110px;resize:vertical} .casa .lb .lb-contato-ok{color:var(--p-muted);margin:0 0 16px} .casa .lb .lb-contato-ok strong{color:var(--p-text)} .casa .lb .lb-aviso{display:flex;gap:12px;align-items:flex-start;max-width:980px;background:rgba(209,183,127,.1);border:1px solid rgba(209,183,127,.5);border-radius:14px;padding:14px 16px;margin:0 0 16px} .casa .lb .lb-aviso svg{width:22px;height:22px;flex:none;color:#d1b77f} .casa .lb .lb-aviso p{margin:0;line-height:1.5} .casa .lb .lb-gerar{display:flex;gap:12px;align-items:center;margin:22px 0 40px;flex-wrap:wrap} .casa .lb .lb-grande{min-height:56px;padding:0 28px;font-size:16px} .casa .lb .lb-gerando{position:relative;min-height:min(62vh,640px)} /* 25/set (ele): a mesma animação do Show IA — centrada e maior, sem caixa */ .casa .lb .lb-gerando .es-cartao{--es-k:1.2;background:transparent} .casa .lb .lb-pronta{max-width:640px;margin:10px auto 40px;text-align:center;background:var(--p-surface);border:1px solid var(--p-line);border-radius:16px;padding:34px 26px} .casa .lb .lb-ok{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:50%;background:#d1b77f;color:#20271f;margin-bottom:12px} .casa .lb .lb-ok svg{width:30px;height:30px} .casa .lb .lb-pronta h2{font-size:24px;font-weight:600;margin:0 0 8px} .casa .lb .lb-pronta p{color:var(--p-muted);margin:0 0 10px;line-height:1.5} .casa .lb .lb-link{font-size:13px;word-break:break-all;color:var(--p-text) !important;opacity:.8} .casa .lb .lb-pronta-acoes{display:flex;flex-direction:column;align-items:stretch;gap:10px;margin-top:20px} @media (max-width:700px){ .casa .lb .lb-datas{grid-template-columns:1fr} .casa .lb .lb-formas{gap:8px} } /* 🔗 o PDF da requisição (montado fora da tela, A4 794×1123, fundo branco) */ .lbd-palco{position:fixed;left:-99999px;top:0;z-index:-1} .lbd-pg{position:relative;background:#fff;color:#1d2420;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif} .lbd-corpo{position:absolute;left:48px;right:48px;top:40px;bottom:64px;overflow:hidden} .lbd-rodape{position:absolute;left:48px;right:48px;bottom:26px;font-size:10px;color:#8a918c;border-top:1px solid #e3e0d6;padding-top:8px} .lbd-topo{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px} .lbd-topo img{width:128px;height:auto;display:block} .lbd-topo span{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#a88b4a;font-weight:600} .lbd-h1{font-size:24px;font-weight:600;margin:0 0 16px;color:#1d2420} .lbd-meta{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin:0 0 16px} .lbd-meta div{border:1px solid #e3e0d6;border-radius:8px;padding:8px 10px} .lbd-meta dt{font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;color:#7c847f;margin-bottom:4px} .lbd-meta dd{margin:0;font-size:12.5px;font-weight:600} .lbd-prazo{color:#8a6a2a} .lbd-odonto{border:1px solid #e3e0d6;border-radius:8px;padding:6px;margin:0 0 10px} .lbd-odonto img{width:100%;height:auto;display:block} .lbd-trab{font-size:13px;line-height:1.5;margin:0 0 14px} .lbd-trab strong{color:#8a6a2a} .lbd-caixa{border:1px solid #e3e0d6;border-radius:8px;padding:10px 12px;margin:0 0 12px;font-size:12px;line-height:1.5} .lbd-caixa p{margin:0 0 6px} .lbd-caixa h3,.lbd-fotos h3{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:#a88b4a;margin:0 0 6px;font-weight:600} .lbd-pre{white-space:pre-line} .lbd-link{color:#8a6a2a;word-break:break-all} .lbd-h2{font-size:16px;font-weight:600;margin:6px 0 12px} .lbd-fotos{margin:0 0 14px} .lbd-grade{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start} .lbd-fotos.n1 .lbd-grade{grid-template-columns:1fr} .lbd-fotos figure{margin:0} .lbd-fotos img{width:100%;height:auto;display:block;border-radius:4px;box-shadow:0 0 0 1px #d1b77f} .lbd-fotos.n1 img{max-height:430px;width:auto;max-width:100%;margin:0 auto} .lbd-fotos figcaption{font-size:10px;color:#7c847f;margin-top:4px} .casa .lb .lb-odonto svg{width:100%;height:auto;stroke:none;fill:none} /* a regra dos ícones (.casa svg: traço currentColor) desenhava as áreas de toque */ .casa .lb .lb-odonto .hit{stroke:none} /* 🔗 a requisição aberta dentro do app (25/set, ele): a página do laboratório na tela toda + barra com Fechar · PDF · Enviar */ .lb-visor{position:fixed;inset:0;z-index:250;display:flex;flex-direction:column;background:#0b1915} .lb-visor-barra{display:flex;align-items:center;gap:12px;padding:12px 16px;padding-top:calc(12px + env(safe-area-inset-top));background:#10201b;border-bottom:1px solid #2a3a33;color:#eef0eb} .lb-visor-barra .ae-btn{min-height:44px;display:inline-flex;align-items:center;gap:8px;white-space:nowrap} .lb-visor-barra .ae-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .lb-visor-tit{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} .lb-visor-tit strong{font-size:16px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .lb-visor-tit span{font-size:13px;color:#aab4ac} .lb-visor-pagina{flex:1;width:100%;border:0;background:#0b1915} @media (max-width:620px){ .lb-visor-tit span{display:none} .lb-visor-barra{gap:8px;padding-left:10px;padding-right:10px} } .lb-visor-barra .ae-btn{padding:0 16px;border-radius:12px;border:1px solid #2a3a33;background:#16271f;color:#eef0eb;font:600 15px/1 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;cursor:pointer} .lb-visor-barra .ae-btn.ae-primary{background:#d1b77f;border-color:#d1b77f;color:#20271f} /* 25/set (ele): "Compartilhar link com o laboratório" maior e em destaque — é a única ação da requisição aberta */ .lb-visor-barra .ae-btn.lb-visor-principal{min-height:56px;padding:0 26px;font-size:17px;border-radius:14px;box-shadow:0 0 0 4px rgba(209,183,127,.22),0 6px 18px rgba(0,0,0,.35)} .lb-visor-barra .ae-btn.lb-visor-principal svg{width:22px;height:22px} @media (max-width:620px){ .lb-visor-barra .ae-btn.lb-visor-principal{font-size:15px;padding:0 16px} }