/* DNA Motivacional — identidade visual
   Uma cor por eixo: Desejos (teal), Necessidades (ocre), Agraciações (ameixa). */

:root{
  --ground:#F6F7F5; --surface:#FFFFFF; --surface-2:#EDF0EC;
  --ink:#151D1A; --ink-2:#3F4B47; --ink-3:#6B7873;
  --rule:#DCE2DD; --rule-strong:#C3CCC5;
  --d:#0E6B62; --n:#9E5B14; --a:#6E3B63;
  --d-soft:#E2F0EE; --n-soft:#F6EBDC; --a-soft:#EFE4EC;
  --flag:#A82F1C; --flag-soft:#FBE9E5;
  --ok:#1F7A4C;
  --shadow:0 1px 2px rgba(21,29,26,.05), 0 8px 24px -16px rgba(21,29,26,.18);
  --raio:.6rem;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#101512; --surface:#171E1A; --surface-2:#1E2622;
    --ink:#E7EDE9; --ink-2:#B4C0BA; --ink-3:#828F89;
    --rule:#2A332E; --rule-strong:#3A453F;
    --d:#5FBDB2; --n:#D9A055; --a:#BE8FB4;
    --d-soft:#12312D; --n-soft:#33260F; --a-soft:#2C1E29;
    --flag:#F0907C; --flag-soft:#331813;
    --ok:#5FBF8C;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -16px rgba(0,0,0,.6);
  }
}

*{box-sizing:border-box;}
html,body{margin:0;}
body{
  background:var(--ground); color:var(--ink);
  font-family:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:Spectral,Georgia,"Times New Roman",serif;
            text-wrap:balance; margin:0; font-weight:600;}
h1{font-size:clamp(1.8rem,5vw,2.6rem); line-height:1.15; letter-spacing:-.015em;}
h2{font-size:1.35rem;}
h3{font-size:1.1rem;}
p{margin:0;}
a{color:var(--d);}
:focus-visible{outline:2px solid var(--d); outline-offset:3px; border-radius:3px;}

.eyebrow{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.7rem;
         text-transform:uppercase; letter-spacing:.14em; color:var(--ink-3);}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums;}

/* ---------- botoes ---------- */
.btn{
  font:inherit; font-weight:500; cursor:pointer; border:1px solid var(--rule-strong);
  background:var(--surface); color:var(--ink); padding:.6rem 1.1rem;
  border-radius:.45rem; text-decoration:none; display:inline-block; transition:.15s;
}
.btn:hover{border-color:var(--ink-3);}
.btn.primario{background:var(--d); border-color:var(--d); color:#fff;}
.btn.primario:hover{filter:brightness(1.1);}
.btn.discreto{border-color:transparent; color:var(--ink-3); padding-left:0;}
.btn.perigo{border-color:transparent; color:var(--flag); padding:.25rem .5rem; font-size:.8rem;}

input[type=text],input[type=password]{
  font:inherit; width:100%; padding:.75rem .9rem; border-radius:.45rem;
  border:1px solid var(--rule-strong); background:var(--surface); color:var(--ink);
}

/* ---------- layout do teste (celular primeiro) ---------- */
.teste{min-height:100dvh; display:flex; flex-direction:column;
       max-width:34rem; margin:0 auto; padding:0 1.25rem;}
.teste-topo{padding:1.5rem 0 .5rem;}

.progresso{display:flex; align-items:center; gap:.75rem; padding:1rem 0 .25rem;}
.barra{flex:1; height:4px; background:var(--surface-2); border-radius:2px; overflow:hidden;}
.barra i{display:block; height:100%; border-radius:2px; transition:width .3s ease;}
.b-d .barra i{background:var(--d);} .b-n .barra i{background:var(--n);} .b-a .barra i{background:var(--a);}
.b-d .selo{background:var(--d-soft); color:var(--d);}
.b-n .selo{background:var(--n-soft); color:var(--n);}
.b-a .selo{background:var(--a-soft); color:var(--a);}
.selo{font-family:"IBM Plex Mono",monospace; font-size:.68rem; text-transform:uppercase;
      letter-spacing:.1em; padding:.2rem .5rem; border-radius:.25rem;}
.contador{font-family:"IBM Plex Mono",monospace; font-size:.78rem; color:var(--ink-3);
          font-variant-numeric:tabular-nums;}

.pergunta{flex:1; display:flex; flex-direction:column; justify-content:center;
          gap:1rem; padding:1.5rem 0;}
.pergunta .instrucao{font-family:Spectral,Georgia,serif; font-size:1.05rem;
                     color:var(--ink-3); text-align:center; margin-bottom:.25rem;}
.escolha{
  width:100%; text-align:left; font:inherit; cursor:pointer;
  background:var(--surface); border:1px solid var(--rule);
  border-radius:var(--raio); padding:1.15rem 1.2rem; box-shadow:var(--shadow);
  font-size:1.02rem; line-height:1.45; color:var(--ink); transition:.15s;
}
.escolha:hover{border-color:var(--rule-strong); transform:translateY(-1px);}
.escolha:active{transform:translateY(0);}
.b-d .escolha:hover{border-color:var(--d);}
.b-n .escolha:hover{border-color:var(--n);}
.b-a .escolha:hover{border-color:var(--a);}
.escolha.marcada{border-width:2px; padding:calc(1.15rem - 1px) calc(1.2rem - 1px);}
.b-d .escolha.marcada{border-color:var(--d); background:var(--d-soft);}
.b-n .escolha.marcada{border-color:var(--n); background:var(--n-soft);}
.b-a .escolha.marcada{border-color:var(--a); background:var(--a-soft);}
.ou{text-align:center; font-family:"IBM Plex Mono",monospace; font-size:.7rem;
    letter-spacing:.15em; color:var(--ink-3); text-transform:uppercase;}
.teste-rodape{padding:1rem 0 2rem; display:flex; justify-content:space-between;
              align-items:center; font-size:.82rem; color:var(--ink-3);}

/* ---------- tela inicial e enquadramento ---------- */
.cartao{background:var(--surface); border:1px solid var(--rule);
        border-radius:var(--raio); padding:1.35rem 1.5rem; box-shadow:var(--shadow);}
.enquadramento{display:flex; flex-direction:column; gap:.9rem;}
.enquadramento .destaque{font-family:Spectral,Georgia,serif; font-size:1.15rem; color:var(--ink);}
.enquadramento p{color:var(--ink-2); font-size:.93rem;}
.aviso{border-left:2px solid var(--n); padding-left:.9rem; font-size:.87rem; color:var(--ink-2);}

/* ---------- resultado ---------- */
.resultado{max-width:38rem; margin:0 auto; padding:2.5rem 1.25rem 4rem;
           display:flex; flex-direction:column; gap:1.25rem;}
.perfil-cabeca{display:flex; flex-direction:column; gap:.4rem;}
.perfil-cabeca .sigla-grande{
  font-family:"IBM Plex Mono",monospace; font-size:.85rem; font-weight:600;
  letter-spacing:.18em; color:var(--d);}
.formula{font-family:"IBM Plex Mono",monospace; font-size:.75rem; color:var(--ink-3);}

.eixo{display:flex; flex-direction:column; gap:.4rem; padding:.9rem 0;
      border-top:1px solid var(--rule);}
.eixo-topo{display:flex; justify-content:space-between; align-items:baseline; gap:1rem;}
.eixo-nome{font-size:.9rem;} .eixo-nome b{font-weight:600;}
.eixo .valores{font-family:"IBM Plex Mono",monospace; font-size:.8rem;
               font-variant-numeric:tabular-nums; color:var(--ink-3);}
.balanca{display:flex; height:10px; border-radius:5px; overflow:hidden; background:var(--surface-2);}
.balanca i{display:block; transition:width .4s ease;}
.e-d .balanca i:first-child{background:var(--d);}
.e-d .balanca i:last-child{background:var(--d-soft);}
.e-n .balanca i:first-child{background:var(--n);}
.e-n .balanca i:last-child{background:var(--n-soft);}
.e-a .balanca i:first-child{background:var(--a);}
.e-a .balanca i:last-child{background:var(--a-soft);}

.listas{display:grid; grid-template-columns:1fr 1fr; gap:1rem;}
@media (max-width:520px){.listas{grid-template-columns:1fr;}}
.listas h4{font-family:"IBM Plex Mono",monospace; font-size:.68rem; text-transform:uppercase;
           letter-spacing:.1em; margin-bottom:.4rem;}
.listas .mot h4{color:var(--d);} .listas .desmot h4{color:var(--flag);}
.listas ul{margin:0; padding-left:1.05rem; font-size:.88rem; line-height:1.5; color:var(--ink-2);}

/* ---------- admin ---------- */
.painel{max-width:64rem; margin:0 auto; padding:0 1.5rem 5rem;}
.painel-topo{display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap;
             padding:2.5rem 0 1.25rem; border-bottom:1px solid var(--rule); margin-bottom:2rem;}
.painel-topo .btn{margin-left:auto;}

.tabela{width:100%; border-collapse:collapse; font-size:.9rem;}
.tabela th{text-align:left; font-family:"IBM Plex Mono",monospace; font-size:.68rem;
           text-transform:uppercase; letter-spacing:.1em; color:var(--ink-3);
           padding:.5rem .75rem; border-bottom:1px solid var(--rule); font-weight:500;}
.tabela td{padding:.7rem .75rem; border-bottom:1px solid var(--rule);}
.tabela tr:hover td{background:var(--surface);}
.tabela .num{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums;}
.rolagem{overflow-x:auto;}

.conducao{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:2rem;
          align-items:start;}
@media (max-width:820px){.conducao{grid-template-columns:1fr;}}
.qr-caixa{background:var(--surface); border:1px solid var(--rule); border-radius:var(--raio);
          padding:1.5rem; text-align:center; box-shadow:var(--shadow);}
.qr-caixa svg{width:100%; max-width:19rem; height:auto; display:block; margin:0 auto;}
.qr-caixa .link{font-family:"IBM Plex Mono",monospace; font-size:.85rem; word-break:break-all;
                margin-top:1rem; color:var(--ink-2);}
.codigo{font-family:"IBM Plex Mono",monospace; font-size:2rem; font-weight:600;
        letter-spacing:.22em; color:var(--ink); margin-top:.5rem;}

.placar{display:flex; align-items:baseline; gap:.6rem; margin-bottom:1rem;}
.placar b{font-family:Spectral,Georgia,serif; font-size:3rem; line-height:1;
          font-variant-numeric:tabular-nums;}
.placar span{color:var(--ink-3); font-size:.95rem;}

.pessoas{display:flex; flex-wrap:wrap; gap:.4rem;}
.pessoa{display:inline-flex; align-items:center; gap:.4rem; font-size:.85rem;
        background:var(--surface); border:1px solid var(--rule);
        border-radius:1rem; padding:.25rem .7rem;}
.pessoa.pendente{color:var(--ink-3); border-style:dashed;}
.pessoa .tag-sigla{font-family:"IBM Plex Mono",monospace; font-size:.68rem; font-weight:600;
                   color:var(--d);}
.ponto{width:6px; height:6px; border-radius:50%; background:var(--ok); flex:none;}
.pessoa.pendente .ponto{background:var(--rule-strong);}

.grade-perfis{display:grid; grid-template-columns:repeat(auto-fill,minmax(13rem,1fr)); gap:.75rem;}
.caixa-perfil{background:var(--surface); border:1px solid var(--rule);
              border-radius:.5rem; padding:.9rem 1rem; min-height:6.5rem;}
.caixa-perfil.vazia{background:transparent; border-style:dashed;}
.caixa-perfil h4{font-size:.98rem; margin-bottom:.1rem;}
.caixa-perfil .formula{margin-bottom:.6rem;}
.caixa-perfil .nomes{display:flex; flex-wrap:wrap; gap:.3rem;}
.caixa-perfil .nomes span{font-size:.82rem; background:var(--surface-2);
                          border-radius:.9rem; padding:.15rem .6rem;}

.aviso-caixa{background:var(--n-soft); border-radius:.5rem; padding:.9rem 1.1rem;
             font-size:.87rem; color:var(--ink-2); margin-bottom:1.5rem;}
.aviso-caixa b{color:var(--n);}

.erro{color:var(--flag); font-size:.88rem; margin-top:.5rem;}
.vazio{color:var(--ink-3); font-size:.9rem; padding:2rem 0; text-align:center;}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important;}
}

/* ---------- pizzas por pergunta ---------- */
.grade-pizzas{display:grid; grid-template-columns:repeat(auto-fill,minmax(21rem,1fr)); gap:1rem;}
.pizza-item{display:flex; gap:1rem; align-items:center; background:var(--surface);
            border:1px solid var(--rule); border-radius:.5rem; padding:1rem;}
.pizza{
  width:5.5rem; height:5.5rem; border-radius:50%; flex:none; position:relative;
  display:grid; place-items:center;
  background:conic-gradient(var(--cheia) 0 var(--fatia), var(--vazia) var(--fatia) 100%);
}
.pizza b{font-family:"IBM Plex Mono",monospace; font-size:.85rem; font-weight:600;
         background:var(--surface); width:2.9rem; height:2.9rem; border-radius:50%;
         display:grid; place-items:center; font-variant-numeric:tabular-nums;}
.g-d{--cheia:var(--d); --vazia:var(--d-soft);}
.g-n{--cheia:var(--n); --vazia:var(--n-soft);}
.g-a{--cheia:var(--a); --vazia:var(--a-soft);}
.pizza-legenda{font-size:.83rem; line-height:1.4; display:flex; flex-direction:column; gap:.45rem;}
.pizza-legenda p{color:var(--ink-2); display:flex; gap:.45rem; align-items:baseline;}
.pizza-legenda .mono{color:var(--ink-3); font-size:.75rem; margin-left:auto; flex:none;}
.marca{width:.55rem; height:.55rem; border-radius:50%; flex:none; margin-top:.35rem;}
.g-d .cheia{background:var(--d);} .g-d .vazia{background:var(--d-soft);}
.g-n .cheia{background:var(--n);} .g-n .vazia{background:var(--n-soft);}
.g-a .cheia{background:var(--a);} .g-a .vazia{background:var(--a-soft);}