/* Tutorial da Calculadora da Pena: telas animadas (sem GIF, só CSS + classes trocadas pelo
   tutorial.js) e o exemplo interativo. Reaproveita as variáveis e os componentes do estilo.css.
   As telas reproduzem a página única: pena mínima e máxima, art. 59, critério e as duas
   fases seguintes. O exemplo de referência é o roubo simples, de 4 a 10 anos. */
.tutorial{max-width:980px}
.tutorial__lead{font-size:1.08rem}
.tutorial__resumo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:6px}
.tutorial__resumo > div{display:flex;align-items:center;gap:12px;background:var(--bg-3);border-radius:12px;padding:12px 14px;font-size:.95rem;font-weight:600;color:var(--ink)}
.tutorial__resumo b{display:grid;place-items:center;width:30px;height:30px;border-radius:999px;background:var(--navy);color:var(--navy-ink);font-size:.85rem;flex:none}

/* passos */
.passo-t{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:26px;align-items:center;padding:26px 0 8px;border-top:1px solid var(--line);margin-top:10px}
.passo-t__n{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:999px;background:var(--navy);color:var(--navy-ink);font-weight:700;font-size:.9rem;margin-bottom:12px}
.tutorial .passo-t h2{margin:0 0 8px;padding:0;border:0;font-size:1.35rem}
.passo-t p{font-size:1rem}

/* tela animada */
.demo{position:relative;background:var(--bg-3);border-radius:16px;box-shadow:0 0 0 1px var(--line);padding:14px;font-size:12.5px;line-height:1.35;overflow:hidden;user-select:none;color:var(--ink);min-height:190px}
/* Medição: o tutorial.js percorre os estados da linha do tempo para descobrir a altura
   máxima de cada tela e reservá-la, para que a página abaixo não balance a cada estado.
   Durante a medição, transições e animações ficam desligadas e tudo o que aparece fica visível. */
.demo.is-medindo,.demo.is-medindo *{transition:none!important;animation:none!important}
.demo.is-medindo .d-add,.demo.is-medindo .d-item{max-height:120px;opacity:1;margin:0}
.demo__tela{background:var(--bg-2);border-radius:12px;box-shadow:0 0 0 1px var(--line);padding:14px;display:flex;flex-direction:column;gap:10px;position:relative}
.cur{position:absolute;left:0;top:0;width:18px;height:18px;border-radius:50%;background:var(--navy);opacity:0;box-shadow:0 0 0 4px rgba(16,42,67,.18),0 2px 6px rgba(0,0,0,.25);transition:transform .75s cubic-bezier(.45,0,.2,1),opacity .3s,width .15s,height .15s;z-index:5;pointer-events:none;margin:-9px 0 0 -9px}
:root[data-theme="dark"] .cur{background:var(--teal);box-shadow:0 0 0 4px rgba(95,192,198,.25),0 2px 6px rgba(0,0,0,.5)}
.demo[data-on~="cursor"] .cur{opacity:.9}
.cur.is-click{width:13px;height:13px;margin:-6.5px 0 0 -6.5px}

/* campos */
.d-campo{display:flex;flex-direction:column;gap:4px;position:relative;min-width:0}
.d-rot{font-size:.78rem;font-weight:600;color:var(--ink-2)}
.d-grade{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.d-tempo{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-2);border:1px solid var(--line-2);border-radius:8px;overflow:hidden}
.d-tempo--2{grid-template-columns:1fr 1fr}
.d-tempo span{display:flex;flex-direction:column;background:var(--bg-2);padding:4px 8px 5px;transition:background .3s}
.d-tempo i{font-style:normal;font-size:.62rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:700;order:-1}
.d-tempo b{font-size:1rem}
.d-min::after,.d-max::after{content:"0"}
.demo[data-on~="digitado"] .d-min::after{content:"4"}
.demo[data-on~="digitado"] .d-max::after{content:"10"}
.demo[data-on~="digitado"] .d-tempo span{background:var(--teal-bg)}
/* a frase que ocupa o lugar do resultado enquanto a fase não fecha */
.d-espera{color:var(--muted);font-size:.82rem;transition:opacity .3s}
.demo[data-on~="res"] .d-espera{display:none}
.d-surge{opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s}
.demo[data-on~="res"] .d-surge{opacity:1;transform:none}

/* circunstâncias do art. 59: nome e botões na primeira linha, dica embaixo */
.d-vet{display:flex;flex-direction:column;gap:5px;box-shadow:0 0 0 1px var(--line);border-radius:10px;padding:8px 10px;transition:background .3s,box-shadow .3s}
.d-vet__cab{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap}
.d-vet b{font-size:.85rem}
.d-vet small{display:block;color:var(--muted);font-size:.72rem;line-height:1.35}
.demo[data-on~="desf"] .d-vet[data-vet="1"]{background:var(--vermelho-bg);box-shadow:0 0 0 1.5px var(--vermelho)}
.d-contagem{color:var(--muted);font-size:.76rem}
.d-cont::after{content:"0 de 8 marcadas como desfavoráveis."}
.demo[data-on~="desf"] .d-cont::after{content:"1 de 8 marcada como desfavorável."}

/* botões segmentados e perguntas sim/não */
.d-seg{display:inline-flex;border:1px solid var(--line-2);border-radius:999px;overflow:hidden;background:var(--bg-2);flex:none}
.d-seg span{padding:5px 10px;font-size:.75rem;font-weight:600;color:var(--ink-2);transition:background .25s,color .25s}
.d-seg span + span{border-left:1px solid var(--line)}
.d-seg span.is-on{background:var(--navy);color:var(--navy-ink)}
.demo[data-on~="desf"] .d-vet[data-vet="1"] .d-seg span.is-on{background:none;color:var(--ink-2)}
.demo[data-on~="desf"] .d-vet[data-vet="1"] .d-seg span[data-alvo]{background:var(--navy);color:var(--navy-ink)}
.demo[data-on~="sim"] .d-perg .d-seg span[data-alvo]{background:var(--navy);color:var(--navy-ink)}
.d-perg{display:flex;justify-content:space-between;gap:10px;align-items:center}
.d-perg p{margin:0;font-weight:700;font-size:.9rem}

/* critério: três opções em rádio */
.d-opcoes{display:flex;flex-direction:column;gap:6px}
.d-opcao{display:flex;align-items:center;gap:9px;padding:8px 11px;border-radius:10px;box-shadow:0 0 0 1px var(--line);font-size:.82rem;transition:background .25s,box-shadow .25s}
.d-opcao i{flex:none;width:14px;height:14px;border-radius:50%;border:1.5px solid var(--line-2);background:var(--bg-2);position:relative;transition:border-color .25s}
.d-opcao.is-on{box-shadow:0 0 0 1.5px var(--teal);background:var(--teal-bg)}
.d-opcao.is-on i{border-color:var(--teal)}
.d-opcao.is-on i::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--teal)}
.demo[data-on~="escolhido"] .d-opcao{box-shadow:0 0 0 1px var(--line);background:none}
.demo[data-on~="escolhido"] .d-opcao i{border-color:var(--line-2)}
.demo[data-on~="escolhido"] .d-opcao i::after{content:none}
.demo[data-on~="escolhido"] .d-opcao[data-alvo]{box-shadow:0 0 0 1.5px var(--teal);background:var(--teal-bg)}
.demo[data-on~="escolhido"] .d-opcao[data-alvo] i{border-color:var(--teal)}
.demo[data-on~="escolhido"] .d-opcao[data-alvo] i::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--teal)}

/* item acrescentado e frações */
.d-add,.d-item{display:flex;flex-direction:column;gap:4px;max-height:0;opacity:0;overflow:hidden;transition:max-height .45s,opacity .35s,margin .35s;margin:-10px 0 0}
.demo[data-on~="sim"] .d-add,.demo[data-on~="add"] .d-item,.d-item.is-vis{max-height:120px;opacity:1;margin:0}
.d-linha{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}
.d-sel{min-height:30px;border:1px solid var(--line-2);border-radius:8px;padding:6px 26px 6px 9px;background:var(--bg-2);position:relative;display:flex;align-items:center}
.d-sel::after{content:"";position:absolute;right:10px;top:9px;width:7px;height:7px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg)}
.d-sel__v--agr::after{content:"Reincidência (art. 61, I)";font-weight:600}
.d-btn{display:inline-flex;align-items:center;justify-content:center;padding:7px 12px;border-radius:9px;background:var(--bg-2);box-shadow:0 0 0 1px var(--line),var(--sombra-3);font-weight:600;font-size:.8rem;transition:transform .15s,background .2s;white-space:nowrap}
.demo[data-on~="add"] .d-btn[data-alvo="add"]{transform:scale(.96)}
.d-item{box-shadow:0 0 0 1px var(--line);border-radius:10px;padding:8px 10px}
.d-item.is-vis{padding:8px 10px}
.d-item b{font-size:.85rem}
.d-item small{color:var(--muted);font-size:.72rem}
.d-tag{align-self:flex-start;font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;font-weight:800;padding:2px 8px;border-radius:999px;border:1px solid}
.d-tag--mais{color:var(--vermelho);border-color:var(--vermelho);background:var(--vermelho-bg)}
.d-fr{display:flex;gap:6px;flex-wrap:wrap}
.d-fr span{padding:5px 11px;border-radius:999px;border:1px solid var(--line-2);font-weight:700;font-size:.8rem;color:var(--ink-2);transition:background .25s,color .25s,border-color .25s}
.d-fr span.is-on,.demo[data-on~="f13"] .d-fr span[data-alvo]{background:var(--navy);border-color:var(--navy);color:var(--navy-ink)}

/* cartões de resultado, um por fase, com os números do exemplo do roubo */
.d-card{box-shadow:0 0 0 1px var(--line);border-left:5px solid var(--gold);border-radius:10px;padding:9px 12px;display:flex;flex-direction:column;gap:1px;background:var(--bg-2);transition:box-shadow .3s,background .3s}
.d-card > span{font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700}
.d-card strong{font-size:1.15rem;letter-spacing:-.02em;line-height:1.2}
.d-card small{color:var(--muted);font-size:.74rem}
.demo[data-on~="res"] .d-card,.demo[data-on~="escolhido"] .d-card{background:var(--gold-bg);box-shadow:0 0 0 1.5px var(--gold)}
.d-p1::after{content:"4 anos"}
.d-p1s::after{content:"nenhuma circunstância desfavorável: a pena fica no mínimo"}
.d-p2::after{content:"4 anos"}.d-p2s::after{content:"nenhuma circunstância desfavorável: a pena fica no mínimo"}
.demo[data-on~="res"] .d-p2::after{content:"4 anos e 9 meses"}
.demo[data-on~="res"] .d-p2s::after{content:"1 circunstância desfavorável, 1/8 do intervalo cada"}
.d-p3::after{content:"4 anos e 9 meses"}.d-p3s::after{content:"1 circunstância desfavorável, 1/8 do intervalo cada"}
.demo[data-on~="escolhido"] .d-p3::after{content:"4 anos e 8 meses"}
.demo[data-on~="escolhido"] .d-p3s::after{content:"1 circunstância desfavorável, 1/6 da pena mínima cada"}
.d-p4::after{content:"4 anos e 9 meses"}.d-p4s::after{content:"sem agravantes nem atenuantes: igual à pena-base"}
.demo[data-on~="res"] .d-p4::after{content:"5 anos, 6 meses e 15 dias"}
.demo[data-on~="res"] .d-p4s::after{content:"1 agravante e 0 atenuantes"}
.d-p5::after{content:"5 anos, 6 meses e 15 dias"}.d-p5s::after{content:"fração a informar"}
.demo[data-on~="res"] .d-p5::after{content:"7 anos, 4 meses e 20 dias"}
.demo[data-on~="res"] .d-p5s::after{content:"aumento de 1/3 sobre a pena intermediária"}

/* exemplo interativo */
.exp{margin-top:18px;padding:26px;border-radius:20px;background:var(--bg-3);box-shadow:0 0 0 1px var(--line);display:flex;flex-direction:column;gap:16px}
.tutorial .exp h2{margin:0;padding:0;border:0;font-size:1.5rem}
.exp__grade{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:22px;align-items:start}
.exp__ctl{display:flex;flex-direction:column;gap:14px}
.exp .fr{padding:7px 13px;min-width:44px;background:var(--bg-2)}
.exp .fr.is-on{background:var(--navy);color:var(--navy-ink)}
.exp .grade-2{gap:10px}
.exp__res{position:sticky;top:24px;display:flex;flex-direction:column;gap:10px}
/* o trifásico saiu do estilo.css quando o assistente acabou; aqui ele continua sendo útil */
.exp__res .trifasico{display:flex;flex-direction:column;gap:10px}
.exp__res .trifasico__item{box-shadow:0 0 0 1px var(--line);border-left:5px solid var(--line-2);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:2px;background:var(--bg-2);min-width:0}
.exp__res .trifasico__item .rotulo{font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.exp__res .trifasico__item strong{font-size:1.2rem;letter-spacing:-.02em;line-height:1.2;overflow-wrap:anywhere}
.exp__res .trifasico__item.is-1{border-left-color:var(--teal)}
.exp__res .trifasico__item.is-2{border-left-color:var(--navy)}
.exp__res .trifasico__item.is-3{border-left-color:var(--gold)}
.exp__res .trifasico__item.is-atual{background:var(--gold-bg);box-shadow:0 0 0 1.5px var(--gold);border-left-color:var(--gold)}
.exp__res .trifasico__item.is-atual .rotulo{color:var(--ambar)}
.exp__res .trifasico__item.is-atual strong{font-size:1.35rem}
.exp__passos{list-style:none;margin:6px 0 0;padding:6px 0 0;border-top:1px dashed var(--line);display:flex;flex-direction:column;gap:3px;font-size:.8rem;color:var(--ink-2)}
.exp__passos li{display:flex;justify-content:space-between;gap:10px}
.exp__passos li span:last-child{font-weight:700;color:var(--ink);white-space:nowrap}
.exp__passos li.is-mais span:last-child{color:var(--vermelho)}
.exp__passos li.is-menos span:last-child{color:var(--verde)}
.exp__passos li.is-total{border-top:1px solid var(--line);padding-top:4px;margin-top:2px}
.exp .acoes{margin-top:4px}
.tutorial__faq{margin-top:16px}
.tutorial .tutorial__faq h2{margin-bottom:12px}

@media (max-width:820px){
  .passo-t{grid-template-columns:1fr;gap:14px}
  .exp__grade{grid-template-columns:1fr}
  .exp__res{position:static}
  .tutorial__resumo{grid-template-columns:1fr}
}
@media (max-width:700px){
  .exp{padding:18px}
  .d-grade{grid-template-columns:1fr}
  .d-vet__cab,.d-perg{flex-direction:column;align-items:flex-start}
  .d-seg{width:100%}
  .d-seg span{flex:1;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .cur{display:none}
  .d-add,.d-item,.d-card,.d-seg span,.d-fr span,.d-opcao,.d-tempo span,.d-btn,.d-surge{transition:none}
}