/* selfie_1710 (Gorki, 17/10/2026): a foto do perfil feita por IA a partir de uma selfie — a tela "Sua foto", o aviso do topo e
   a foto no lugar das iniciais. Carregado em todas as telas (base.html): o aviso e o avatar valem em toda parte. */

/* ---------------------------------------------------------------- o avatar com foto e o aviso do topo */
a.avatar.com-foto{padding:0;overflow:hidden;background:#EDE9FE;box-shadow:0 0 0 2px #fff,0 0 0 4px #C4B5FD}
a.avatar.com-foto img{width:100%;height:100%;object-fit:cover;display:block}
a.avatar:not(.com-foto):hover{filter:brightness(1.08)}
.sf-faixa{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 0;padding:10px 24px;background:linear-gradient(100deg,#F5F3FF,#EEF2FF);border-bottom:1px solid #DDD6FE;color:#3B0764;font-size:14px}
.sf-faixa .sf-faixa-ico{flex:0 0 30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#7C3AED;color:#fff}
.sf-faixa a{margin-left:auto;display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:9px;background:linear-gradient(100deg,#4635D5,#7134E6);color:#fff;font-weight:600;font-size:13.5px;text-decoration:none}
.sf-faixa a:hover{filter:brightness(1.07);color:#fff}
.ava-lista{width:26px;height:26px;border-radius:50%;object-fit:cover;vertical-align:-7px;margin-right:8px;box-shadow:0 0 0 2px #EDE9FE}
.ava-lista.sem{display:inline-grid;place-items:center;background:#EDE9FE;color:#5B21B6;font-size:11px;font-weight:700}

/* ---------------------------------------------------------------- a tela */
.sf{display:flex;flex-direction:column;gap:18px}
.sf-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center}
.sf-hero .etapa{margin:0;font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#7C3AED}
.sf-hero h1,.sf-cel h1{font-family:'Playfair Display',Georgia,serif;font-size:clamp(30px,3vw,42px);line-height:1.1;margin:6px 0 10px}
.sf-hero p{margin:0;max-width:720px;color:#475569}
.sf-atual{margin:0;display:flex;flex-direction:column;align-items:center;gap:6px}
.sf-atual img{width:120px;height:120px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 4px #fff,0 0 0 6px #C4B5FD,0 14px 30px rgba(76,29,149,.18)}
.sf-atual figcaption{font-size:12px;color:#64748B;font-weight:600}
.sf-passo h2{display:flex;align-items:center;gap:10px;font-size:18px;margin:0 0 14px}
.sf-num{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#5C23E6;color:#fff;font-size:14px;font-weight:800}

.sf-estilos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.sf-estilo{position:relative;display:flex;gap:14px;align-items:center;padding:14px;border:1.5px solid #E2E8F0;border-radius:16px;background:#fff;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.sf-estilo:hover{border-color:#C4B5FD}
.sf-estilo input{position:absolute;opacity:0;pointer-events:none}
.sf-estilo:has(input:checked){border-color:#7C3AED;box-shadow:0 0 0 3px #EDE9FE;background:linear-gradient(120deg,#FBF9FF,#fff)}
.sf-estilo:has(input:focus-visible){outline:2px solid #7C3AED;outline-offset:2px}
.sf-estilo-arte svg{width:72px;height:72px;display:block}
.sf-estilo-txt{display:flex;flex-direction:column;gap:2px}
.sf-estilo-txt strong{font-size:15.5px}
.sf-estilo-txt small{font-size:13px;color:#64748B}
.sf-estilos.compacto{grid-template-columns:1fr 1fr;gap:8px}.sf-estilos.compacto .sf-estilo{padding:10px}
.sf-aceite{display:flex;gap:10px;align-items:flex-start;margin-top:14px;font-size:13.5px;color:#334155;cursor:pointer}
.sf-aceite input{width:18px;height:18px;margin-top:2px;accent-color:#7C3AED;flex:0 0 auto}

.sf-camera{display:grid;grid-template-columns:minmax(260px,420px) minmax(0,1fr);gap:22px;align-items:start}
.sf-palco{position:relative;aspect-ratio:1/1;border-radius:22px;overflow:hidden;background:#1E1B4B center/cover no-repeat;box-shadow:0 14px 34px rgba(30,27,75,.22)}
.sf-palco video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1);opacity:0;transition:opacity .2s}
.sf-palco.ligada video{opacity:1}
.sf-palco.congelada video{opacity:0}
.sf-oval{position:absolute;left:50%;top:47%;width:58%;height:72%;transform:translate(-50%,-50%);border-radius:50%;border:2.5px dashed rgba(255,255,255,.85);box-shadow:0 0 0 999px rgba(15,23,42,.38);pointer-events:none;opacity:0;transition:opacity .2s}
.sf-palco.ligada .sf-oval{opacity:1}
.sf-palco-vazio{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#C4B5FD;font-size:14px;font-weight:600}
.sf-conta{position:absolute;inset:0;display:grid;place-items:center;font:800 120px/1 Inter,system-ui,sans-serif;color:#fff;text-shadow:0 6px 30px rgba(0,0,0,.45)}
.sf-palco.flash::after{content:"";position:absolute;inset:0;background:#fff;animation:sf-flash .18s ease-out}
@keyframes sf-flash{from{opacity:.9}to{opacity:0}}
.sf-lado{display:flex;flex-direction:column;gap:14px}
.sf-dicas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:14px;color:#334155}
.sf-dicas li{display:flex;gap:8px;align-items:center}
.sf-dicas li::before{content:"";flex:0 0 18px;height:18px;border-radius:50%;background:#DCFCE7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23166534' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/11px no-repeat}
.sf-botoes{display:flex;flex-wrap:wrap;gap:10px}
.sf-bt{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 18px;border-radius:11px;border:0;font:600 14.5px Inter,system-ui,sans-serif;cursor:pointer;text-decoration:none;transition:filter .15s,transform .15s}
.sf-bt:hover{filter:brightness(1.07)}.sf-bt:active{transform:translateY(1px)}.sf-bt:disabled{opacity:.55;cursor:default;filter:none}
.sf-bt.roxo{background:linear-gradient(100deg,#4635D5,#7134E6);color:#fff}
.sf-bt.verde{background:#15803D;color:#fff}
.sf-bt.azul{background:#E0ECFF;color:#1D4ED8}
.sf-bt.ambar{background:#FEF3C7;color:#92400E}
.sf-bt.claro{background:#fff;color:#334155;border:1px solid #CBD5E1}
.sf-bt.peq{height:36px;padding:0 12px;font-size:13px}
.sf-miniaturas{display:flex;gap:10px;margin:6px 0 12px}
.sf-mini{padding:0;border:0;border-radius:12px;overflow:hidden;width:78px;height:78px;cursor:pointer;box-shadow:0 0 0 2px #E2E8F0;background:#fff}
.sf-mini img{width:100%;height:100%;object-fit:cover;display:block}
.sf-mini.sel{box-shadow:0 0 0 3px #7C3AED,0 6px 14px rgba(124,58,237,.25)}
.sf-fotos p{margin:0}
.sf-msg{margin:0;padding:10px 12px;border-radius:10px;background:#FFF7ED;color:#9A3412;font-size:13.5px;border:1px solid #FED7AA}
.sf-celular{display:flex;flex-direction:column;gap:8px;padding:14px;border:1.5px dashed #CBD5E1;border-radius:14px;font-size:13.5px;color:#475569;margin-top:4px}
.sf-celular strong{color:#0F172A;font-size:14px}
.sf-celular .sf-bt{align-self:flex-start}
.sf-celular.destaque{border-color:#7C3AED;background:#FBF9FF}
.sf-celular.esperando::after{content:"Esperando a selfie do celular…";font-weight:600;color:#5B21B6;animation:sf-pisca 1.4s ease-in-out infinite}
@keyframes sf-pisca{50%{opacity:.45}}
.sf-link{display:flex;gap:8px}.sf-link input{flex:1;min-width:0;height:36px;border:1px solid #CBD5E1;border-radius:9px;padding:0 10px;font:13px Inter,system-ui,sans-serif;color:#334155}

.sf-gerando{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border:1px solid #E4DCFF;border-radius:14px;background:linear-gradient(120deg,#FBF9FF,#fff)}
.sf-gerando > div{flex:1;display:flex;flex-direction:column;gap:6px}
.sf-gerando strong{font-size:15px;color:#3B0764}
.sf-gerando small{color:#64748B}
.sf-gerando #sf-pct-txt{font-weight:700;color:#6D28D9;font-size:13px}
.sf-pulso{flex:0 0 14px;height:14px;margin-top:4px;border-radius:50%;background:#7C3AED;animation:sf-bate 1.1s ease-in-out infinite}
@keyframes sf-bate{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(124,58,237,.45)}50%{transform:scale(1.15);box-shadow:0 0 0 8px rgba(124,58,237,0)}}
.sf-opcoes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.sf-opcoes:empty{display:none}
.sf-opcao{margin:0;display:flex;flex-direction:column;gap:10px;padding:10px;border:1px solid #E4DCFF;border-radius:18px;background:#fff;box-shadow:0 10px 26px rgba(30,40,97,.06)}
.sf-opcao img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:12px;display:block;background:#EEE8FF}
.sf-opcao figcaption{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.sf-opcao figcaption span{font-size:12.5px;font-weight:600;color:#6D28D9;background:#EDE9FE;border-radius:999px;padding:3px 10px}
.sf-opcao .sf-bt{height:38px;font-size:13.5px}
.sf-vazio-3{margin:0}
.sf-obrig{margin:0}

/* o celular (link assinado) */
.sf-cel-corpo{background:#F8FAFC}
.sf-cel{max-width:560px;margin:0 auto;padding:22px 16px 40px}
.sf-cel .etapa{margin:0;font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#7C3AED}
.sf-cel .sf-camera{grid-template-columns:1fr}

@media (max-width:900px){
  .sf-camera{grid-template-columns:1fr}
  .sf-palco{max-width:420px;width:100%;margin:0 auto}
  .sf-opcoes{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .sf-hero{grid-template-columns:1fr}
  .sf-estilos{grid-template-columns:1fr}
  .sf-opcoes{grid-template-columns:1fr}
  .sf-faixa{padding:10px 16px}
  .sf-faixa a{margin-left:0}
}