/* tutorials.css - tutorial de apresentacao (tour) + tutoriais contextuais.
   Usa as mesmas variaveis de tema de styles.css, entao acompanha claro/escuro
   automaticamente. Z-index: acima dos modais (200) e abaixo do gate de
   atualizacao obrigatoria (9000) e do bloqueio biometrico (9500). */

/* ═══════════════════════════════════════════════════════════
   BOTOES DE AJUDA ("?") injetados em telas e modais
   ═══════════════════════════════════════════════════════════ */
.tut-help-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:4px;
  min-height:44px;padding:6px 8px;border-radius:var(--radius-pill);
  border:1.5px solid var(--border);background:var(--bg2);color:var(--fg2);
  font-family:var(--font-body);font-size:12px;font-weight:600;
  cursor:pointer;transition:background-color var(--motion-fast) var(--ease-out),border-color var(--motion-fast) var(--ease-out),color var(--motion-fast) var(--ease-out);white-space:nowrap
}
.tut-help-btn:hover{border-color:var(--primary);background:var(--primary-light);color:var(--primary)}
.tut-help-btn .material-icons-round{font-size:15px}
/* Variante compacta (cabecalho de modal): so o icone */
.tut-help-btn.icon-only{padding:0;width:44px;height:44px;justify-content:center;border-radius:var(--radius-control);border:none;background:var(--bg2)}
.tut-help-btn.icon-only .material-icons-round{font-size:18px}
/* Chip no cabecalho da pagina */
/* Achatado de verdade: a CAIXA some para ~26px e deixa de engordar a linha do cabeçalho,
   enquanto a ÁREA DE TOQUE continua com 44px através do ::after invisível. Com
   min-height:44px na caixa, o botão empurrava o conteúdo da tela para baixo. */
.page-header .tut-help-btn{position:relative;min-height:0;padding:3px 10px;gap:4px;font-size:var(--text-2xs)}
.page-header .tut-help-btn::after{content:'';position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
.page-header .tut-help-btn .material-icons-round{font-size:14px}
@media(max-width:768px){
  .page-header .tut-help-btn{padding:3px 9px;gap:4px}
}
/* Pulso discreto enquanto o usuario ainda esta no periodo de adaptacao */
.tut-help-btn.tut-fresh{border-color:var(--primary);color:var(--primary);background:var(--primary-light)}

/* ═══════════════════════════════════════════════════════════
   TUTORIAL CONTEXTUAL (coachmark + card)
   ═══════════════════════════════════════════════════════════ */
.tut-overlay{position:fixed;inset:0;z-index:var(--z-tutorial);display:none}
/* Sem elemento destacado o card e centralizado por FLEXBOX, nunca por transform:
   a animacao de entrada usa transform, e as duas coisas se anulariam (o card
   "pulava" para o lado no primeiro quadro de cada passo). Com destaque, o card
   e posicionado em coordenadas absolutas pelo JS. */
.tut-overlay.open{display:block}
.tut-overlay.open:not(.has-spot){
  display:flex;align-items:flex-end;justify-content:center;
  padding:12px 0 calc(16px + env(safe-area-inset-bottom,0px))
}
@media(min-width:640px){.tut-overlay.open:not(.has-spot){align-items:center;padding-bottom:12px}}
.tut-scrim{position:absolute;inset:0;background:rgba(15,15,26,.64);animation:tutFade var(--motion-base) linear}
.tut-overlay.has-spot .tut-scrim{background:transparent}

/* Recorte de destaque: o box-shadow gigante escurece tudo em volta do alvo */
.tut-spot{
  position:absolute;border-radius:12px;pointer-events:none;
  box-shadow:0 0 0 3px var(--primary), 0 0 0 9999px rgba(15,15,26,.64);
  transition:top var(--motion-medium) var(--ease-soft),left var(--motion-medium) var(--ease-soft),
             width var(--motion-medium) var(--ease-soft),height var(--motion-medium) var(--ease-soft)
}
.tut-spot::after{
  content:'';position:absolute;inset:-3px;border-radius:inherit;
  border:2px solid var(--primary);opacity:.55
}
@keyframes tutPulse{
  0%{transform:scale(1);opacity:.55}
  70%{transform:scale(1.06);opacity:0}
  100%{transform:scale(1.06);opacity:0}
}
@keyframes tutFade{from{opacity:0}to{opacity:1}}
@keyframes tutCardIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

.tut-card{
  position:relative;
  width:min(440px,calc(100vw - 24px));
  background:var(--surface-overlay);color:var(--fg);border:1px solid var(--border-default);
  border-radius:var(--radius-panel);padding:20px 20px 16px;
  box-shadow:var(--elevation-raised);
  animation:tutCardIn var(--motion-medium) var(--ease-out);
  max-height:min(76vh,620px);display:flex;flex-direction:column
}
/* Com destaque: o JS ancora o card ao lado do alvo (.anchored, com top/left).
   Se nao couber nem acima nem abaixo, ele volta ao formato de folha embaixo. */
.tut-overlay.has-spot .tut-card{
  position:absolute;left:0;right:0;margin-inline:auto;
  bottom:calc(16px + env(safe-area-inset-bottom,0px))
}
.tut-overlay.has-spot .tut-card.anchored{right:auto;bottom:auto;margin-inline:0}

.tut-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:6px;flex-shrink:0}
.tut-head-icon{
  width:38px;height:38px;border-radius:11px;flex-shrink:0;
  background:var(--primary-light);color:var(--primary);
  display:flex;align-items:center;justify-content:center
}
.tut-head-icon .material-icons-round{font-size:21px}
.tut-head-icon.mu-tut-avatar{width:52px;height:52px;border-radius:var(--radius-button)}
.mu-tut-avatar .mu-character{width:48px;height:48px}
.tut-head-txt{flex:1;min-width:0}
.tut-kicker{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--primary)}
.tut-title{font-family:var(--font-display);font-size:19px;line-height:1.25;color:var(--fg);margin-top:1px}
.tut-close{
  width:44px;height:44px;border-radius:var(--radius-control);flex-shrink:0;border:none;cursor:pointer;
  background:var(--bg2);color:var(--fg2);display:flex;align-items:center;justify-content:center;transition:background-color var(--motion-fast) var(--ease-out),color var(--motion-fast) var(--ease-out)
}
.tut-close:hover{background:var(--border);color:var(--fg)}
.tut-close .material-icons-round{font-size:17px}

.tut-body{overflow-y:auto;margin:10px 0 4px;flex:1;min-height:0}
.tut-step-title{font-size:14.5px;font-weight:700;color:var(--fg);margin-bottom:5px}
.tut-step-text{font-size:13.5px;line-height:1.62;color:var(--fg2)}
.tut-step-text strong{color:var(--fg);font-weight:600}
.tut-step-text ul{margin:7px 0 0;padding-left:18px}
.tut-step-text li{margin-bottom:5px}
.tut-step-text code{background:var(--bg2);padding:1px 5px;border-radius:4px;font-size:12px}
.tut-hl{background:var(--primary-light);color:var(--primary);padding:1px 6px;border-radius:5px;font-weight:600;font-size:12.5px;white-space:nowrap}

.tut-tip{
  display:flex;align-items:flex-start;gap:8px;margin-top:12px;
  background:var(--bg2);border-radius:10px;padding:10px 12px;
  font-size:12.5px;line-height:1.55;color:var(--fg2)
}
.tut-tip .material-icons-round{font-size:16px;color:var(--warning);flex-shrink:0;margin-top:1px}
.tut-tip strong{color:var(--fg)}

.tut-dots{display:flex;gap:5px;justify-content:center;margin:12px 0 10px;flex-wrap:wrap;flex-shrink:0}
.tut-dot{width:6px;height:6px;border-radius:50%;background:var(--border);transition:width var(--motion-base) var(--ease-out),background-color var(--motion-base) var(--ease-out)}
.tut-dot.active{background:var(--primary);width:18px;border-radius:3px}
.tut-dot.done{background:var(--primary);opacity:.4}

.tut-nav{display:flex;align-items:center;gap:8px;flex-shrink:0}
.tut-nav .tut-count{font-size:11.5px;color:var(--fg2);margin-right:auto;font-weight:600}
.tut-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  min-height:44px;padding:9px 16px;border-radius:var(--radius-button);border:none;cursor:pointer;
  font-family:var(--font-body);font-size:13px;font-weight:600;transition:background-color var(--motion-fast) var(--ease-out),color var(--motion-fast) var(--ease-out);white-space:nowrap
}
.tut-btn-primary{background:var(--primary);color:var(--on-primary)}
.tut-btn-primary:hover{background:var(--primary-dark)}
.tut-btn-ghost{background:transparent;color:var(--fg2)}
.tut-btn-ghost:hover{background:var(--bg2);color:var(--fg)}
.tut-btn .material-icons-round{font-size:16px}

.tut-never{
  display:flex;align-items:center;gap:8px;margin-top:12px;padding-top:11px;
  border-top:1px solid var(--border);font-size:12px;color:var(--fg2);cursor:pointer;flex-shrink:0
}
.tut-never input{width:15px;height:15px;accent-color:var(--primary);cursor:pointer;flex-shrink:0}

/* ═══════════════════════════════════════════════════════════
   TOUR DE APRESENTACAO (onboarding geral, tela cheia)
   ═══════════════════════════════════════════════════════════ */
.tour-overlay{
  position:fixed;inset:0;z-index:var(--z-tour);display:none;
  background:var(--bg);
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px)
}
.tour-overlay.open{display:flex;align-items:center;justify-content:center}
.tour-card{
  width:min(480px,100%);height:100%;max-height:100%;
  display:flex;flex-direction:column;background:var(--surface);
  overflow:hidden
}
@media(min-width:640px){
  .tour-overlay.open{padding:24px}
  .tour-card{height:auto;max-height:min(680px,100%);border:1px solid var(--border-default);border-radius:var(--radius-modal);box-shadow:var(--elevation-raised)}
}

.tour-hero{
  background:var(--hero-bg);
  color:var(--hero-amount);padding:26px 24px 22px;position:relative;flex-shrink:0
}
.tour-skip{
  position:absolute;top:14px;right:14px;
  min-height:44px;background:rgba(245,245,240,.14);border:none;color:var(--hero-amount);cursor:pointer;
  font-family:var(--font-body);font-size:12px;font-weight:600;
  padding:6px 12px;border-radius:var(--radius-pill);transition:background-color var(--motion-fast) var(--ease-out)
}
.tour-skip:hover{background:rgba(245,245,240,.24)}
.tour-hero-icon{
  width:56px;height:56px;border-radius:16px;background:rgba(245,245,240,.16);
  display:flex;align-items:center;justify-content:center;margin-bottom:14px
}
.tour-hero-icon .material-icons-round{font-size:30px}
.tour-hero-icon.mu-tour-avatar{width:68px;height:68px;background:rgba(245,245,240,.12)}
.mu-tour-avatar .mu-character{width:64px;height:64px}
.tour-kicker{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.72}
.tour-title{font-family:var(--font-display);font-size:26px;line-height:1.2;margin-top:4px}
.tour-sub{font-size:13.5px;line-height:1.55;opacity:.85;margin-top:8px}

.tour-body{flex:1;overflow-y:auto;padding:20px 24px 8px;min-height:0}
.tour-block{margin-bottom:16px}
.tour-block:last-child{margin-bottom:4px}
.tour-block-label{
  display:flex;align-items:center;gap:6px;
  font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--primary);margin-bottom:5px
}
.tour-block-label .material-icons-round{font-size:14px}
.tour-block-text{font-size:13.5px;line-height:1.65;color:var(--fg2)}
.tour-block-text strong{color:var(--fg);font-weight:600}
.tour-block-text ul{margin:4px 0 0;padding-left:18px}
.tour-block-text li{margin-bottom:4px}

.tour-foot{padding:12px 24px calc(18px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--border);flex-shrink:0}
@media(min-width:640px){.tour-foot{padding-bottom:18px}}
.tour-progress{height:3px;background:var(--border);border-radius:2px;overflow:hidden;margin-bottom:12px}
.tour-progress-fill{height:100%;background:var(--primary);border-radius:2px;transition:width .3s cubic-bezier(.4,0,.2,1)}
.tour-nav{display:flex;align-items:center;gap:10px}
.tour-nav .tour-count{font-size:11.5px;color:var(--fg2);font-weight:600;margin-right:auto}

/* ═══════════════════════════════════════════════════════════
   MU — arte canônica, revisão e reconhecimentos
   ═══════════════════════════════════════════════════════════ */
.mu-character{
  display:inline-flex;width:72px;height:72px;flex:0 0 auto;
  align-items:center;justify-content:center;overflow:visible;position:relative;
  /* 840ms de movimento (8 quadros a 105ms). */
  --mu-motion-duration:calc(var(--motion-medium) + var(--motion-medium) + var(--motion-medium));
  /* Um ciclo = movimento + pausa. O fator 2.4286 poe a pausa em 1,43x o movimento
     (~1,2s), e e por ser um FATOR, e nao um valor fixo, que o 41.18% dos keyframes
     continua valendo se --motion-medium mudar. */
  --mu-motion-cycle:calc(var(--mu-motion-duration) * 2.4286)
}
.mu-character-art{
  display:block;width:100%;height:100%;max-width:none;object-fit:contain;object-position:center;
  pointer-events:none;user-select:none;-webkit-user-drag:none;transform-origin:50% 78%;position:relative;z-index:1
}
.mu-character-motion{position:absolute;inset:0;z-index:2;overflow:hidden;opacity:0;pointer-events:none}
.mu-character-motion-strip{
  display:block;width:800%;height:100%;max-width:none;transform:translateX(0);
  pointer-events:none;user-select:none;-webkit-user-drag:none
}
/* Tres ciclos, nao um. 840ms de movimento passam antes de o olho sair do titulo e do
   texto, entao quem le primeiro perdia a animacao inteira e via so um icone parado.
   A PAUSA entre os ciclos e o que importa: movimento-pausa-movimento le como "ela
   reagiu"; movimento continuo ao lado de um texto de tutorial vira ruido e disputa a
   leitura. Depois do terceiro ciclo ela assenta de vez na pose canonica (`both`). */
.mu-character--motion-ready .mu-character-art{animation:muCanonicalRestore var(--mu-motion-cycle) step-end 3 both}
.mu-character--motion-ready .mu-character-motion{animation:muMotionHide var(--mu-motion-cycle) step-end 3 both}
.mu-character--motion-ready .mu-character-motion-strip{animation:muFrameStrip var(--mu-motion-cycle) linear 3 both}
/* 41.18% = 840ms de 2040ms. Ate la corre a tira; o resto do ciclo e a pausa, com a
   arte canonica no lugar dela. */
@keyframes muCanonicalRestore{0%,41.17%{opacity:0}41.18%,100%{opacity:1}}
@keyframes muMotionHide{0%,41.17%{opacity:1}41.18%,100%{opacity:0}}
@keyframes muFrameStrip{
  0%{transform:translateX(0);animation-timing-function:steps(8,end)}
  41.18%{transform:translateX(-100%)}
  100%{transform:translateX(-100%)}
}
.mu-character--celebrate .mu-character-art{animation:muCelebrate var(--motion-medium) var(--ease-out) 1}
@keyframes muCelebrate{0%{transform:translateY(2px) scale(.98)}65%{transform:translateY(-1px) scale(1.01)}100%{transform:none}}

.mu-overlay{position:fixed;inset:0;z-index:var(--z-mu);display:none;pointer-events:none}
.mu-overlay.open{display:flex;align-items:flex-end;justify-content:center;padding:12px 12px calc(12px + env(safe-area-inset-bottom,0px))}
.mu-overlay.is-blocking{pointer-events:auto}
.mu-overlay.open:not(.is-blocking){padding-bottom:calc(158px + env(safe-area-inset-bottom,0px))}
.mu-scrim{display:none;position:absolute;inset:0;background:rgba(15,15,26,.64);animation:tutFade var(--motion-base) linear}
.mu-overlay.is-blocking .mu-scrim{display:block}
.mu-card{
  position:relative;z-index:1;width:min(430px,100%);max-height:calc(100dvh - 24px);
  overflow-y:auto;pointer-events:auto;background:var(--surface-overlay);color:var(--fg);
  border:1px solid var(--border-default);border-radius:var(--radius-panel);
  box-shadow:var(--elevation-raised);padding:20px;display:grid;
  grid-template-columns:76px minmax(0,1fr);gap:4px 16px;
  animation:tutCardIn var(--motion-medium) var(--ease-out)
}
.mu-card-visual{grid-column:1;grid-row:1 / span 2;display:flex;align-items:flex-start;justify-content:center;padding-top:4px}
.mu-card-copy{grid-column:2;padding-right:30px;min-width:0}
.mu-kicker{font-size:var(--text-2xs);line-height:var(--leading-snug);font-weight:700;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--primary);margin-bottom:3px}
.mu-title{font-family:var(--font-display);font-size:var(--text-lg);line-height:var(--leading-snug);font-weight:400;letter-spacing:var(--track-tight);color:var(--fg)}
.mu-body{font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--fg2);margin-top:6px}
.mu-close{
  position:absolute;top:8px;right:8px;width:44px;height:44px;border:0;border-radius:var(--radius-button);
  background:transparent;color:var(--fg2);display:flex;align-items:center;justify-content:center;cursor:pointer
}
.mu-close:hover{background:var(--bg2);color:var(--fg)}
.mu-close .material-icons-round{font-size:18px}
.mu-progress{height:4px;margin-top:14px;border-radius:var(--radius-pill);overflow:hidden;background:var(--border)}
.mu-progress span{display:block;height:100%;border-radius:inherit;background:var(--primary);transition:width var(--motion-base) var(--ease-out)}
.mu-actions{grid-column:1 / -1;display:flex;justify-content:flex-end;gap:8px;margin-top:14px;flex-wrap:wrap}
.mu-mode-toast{justify-content:flex-end;align-items:flex-end;left:auto}
.mu-mode-toast .mu-card,.mu-overlay:not(.is-blocking) .mu-card{width:min(380px,100%);grid-template-columns:60px minmax(0,1fr);padding:16px}
.mu-mode-toast .mu-card-visual,.mu-overlay:not(.is-blocking) .mu-card-visual{padding-top:0}
.mu-mode-toast .mu-character,.mu-overlay:not(.is-blocking) .mu-character{width:58px;height:58px}

.mu-settings-card{margin-bottom:16px;padding:20px}
.mu-settings-heading{display:flex;align-items:center;gap:12px;margin-bottom:4px}
.mu-settings-heading .mu-character{width:54px;height:54px}
.mu-settings-heading h2{font-family:var(--font-display);font-size:var(--text-lg);font-weight:400;line-height:var(--leading-snug)}
.mu-settings-heading p{font-size:var(--text-xs);line-height:var(--leading-normal);color:var(--fg2);margin-top:2px}
.mu-setting-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 0;border-top:1px solid var(--border)}
.mu-setting-row>div{min-width:0}
.mu-setting-row strong{display:block;font-size:var(--text-sm);line-height:var(--leading-snug);color:var(--fg);font-weight:650}
.mu-setting-row small{display:block;font-size:var(--text-2xs);line-height:var(--leading-normal);color:var(--fg2);margin-top:3px}
.mu-review-fields{display:grid;grid-template-columns:minmax(0,1fr) 126px;gap:10px;padding:13px 0;border-top:1px solid var(--border)}
.mu-review-fields.is-muted{opacity:.5}
.mu-review-fields label{display:grid;gap:5px;font-size:var(--text-xs);font-weight:650;color:var(--fg2)}
.mu-review-now{margin-top:3px}
.mu-analytics-block{margin-top:14px;padding:0 12px 10px;border:1px solid var(--border-subtle);border-radius:var(--radius-button);background:var(--surface-subtle)}
.mu-analytics-block .mu-setting-row{border-top:0}
.mu-analytics-block>p{font-size:var(--text-2xs);line-height:var(--leading-normal);color:var(--fg2)}

@media(min-width:640px){
  .mu-overlay.open{align-items:center;padding:24px}
  .mu-overlay.open:not(.is-blocking){align-items:flex-end;justify-content:flex-end;padding:24px 24px calc(158px + env(safe-area-inset-bottom,0px))}
  .mu-card{border-radius:var(--radius-modal);padding:24px}
}
@media(min-width:769px){.mu-overlay.open:not(.is-blocking){padding-bottom:92px}}
@media(max-width:390px){
  .mu-card{grid-template-columns:58px minmax(0,1fr);gap:4px 12px;padding:16px}
  .mu-card .mu-character{width:58px;height:58px}
  .mu-actions .btn{flex:1}
  .mu-review-fields{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .mu-character,.mu-character *,.mu-card,.mu-scrim,.mu-progress span{animation:none!important;transition:none!important}
  .mu-character-motion{display:none!important}
}