/* Sistema de movimento e acentos dos apps. Incluído em todas as páginas, depois do CSS da página.
   O movimento responde a uma ação: navegar, abrir um resultado, trocar de aba, copiar, apertar. Nada roda sozinho. */
:root{
  --rapido:150ms; --medio:240ms; --entrada:420ms; --curva:cubic-bezier(.2,.8,.2,1);
  /* acento de cada app: --ac pinta preenchimento, --ac-texto pinta texto (AA nos 2 temas), --ac-sobre é o texto em cima do preenchimento */
  --modelos:#7F41F9; --modelos-texto:#7F41F9; --modelos-sobre:#FFFFFF; --modelos-fundo:#F1EBFF;
  --blacklist:#C2412D; --blacklist-texto:#C2412D; --blacklist-sobre:#FFFFFF; --blacklist-fundo:#FBEDE9;
}
:root[data-tema=escuro]{
  --modelos:#7F41F9; --modelos-texto:#B596FF; --modelos-sobre:#FFFFFF; --modelos-fundo:#2A2440;
  --blacklist:#F0785F; --blacklist-texto:#F0785F; --blacklist-sobre:#17181D; --blacklist-fundo:#3A2724;
}
[data-app=modelos]{--ac:var(--modelos);--ac-texto:var(--modelos-texto);--ac-sobre:var(--modelos-sobre);--ac-fundo:var(--modelos-fundo)}
[data-app=blacklist]{--ac:var(--blacklist);--ac-texto:var(--blacklist-texto);--ac-sobre:var(--blacklist-sobre);--ac-fundo:var(--blacklist-fundo)}

/* ---------- navegação entre páginas: cross-fade curto e o nome do app no lugar ---------- */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:220ms;animation-timing-function:var(--curva)}
::view-transition-group(app-modelos),::view-transition-group(app-blacklist),::view-transition-group(modelo-titulo){animation-duration:360ms;animation-timing-function:var(--curva)}
::view-transition-old(app-modelos),::view-transition-new(app-modelos),
::view-transition-old(app-blacklist),::view-transition-new(app-blacklist),
::view-transition-old(modelo-titulo),::view-transition-new(modelo-titulo){height:100%;width:auto;object-fit:contain;object-position:left center;animation-duration:360ms;animation-timing-function:var(--curva)}

/* ---------- marca do app no cabeçalho (divide o nome com o cartão do Início) ---------- */
.nome-app{display:inline-flex;align-items:center;gap:10px;min-width:0;text-decoration:none;color:var(--ac-texto)}
.nome-app .ic-app{flex:none;width:30px;height:30px;border-radius:9px;background:var(--ac);color:var(--ac-sobre);display:grid;place-items:center}
.nome-app .ic-app svg{width:62%;height:62%;display:block}
.nome-app h1,.nome-app h2,.nome-app span.t{font-variation-settings:"opsz" 32;font-weight:600;letter-spacing:-.035em;line-height:1.05;margin:0;font-size:18px;white-space:nowrap;color:var(--ac-texto)}
[data-app=modelos] .nome-app,.nome-app[data-app=modelos]{view-transition-name:app-modelos}
[data-app=blacklist] .nome-app,.nome-app[data-app=blacklist]{view-transition-name:app-blacklist}
.cab-app{display:flex;align-items:center;gap:14px;min-width:0}
.btn-inicio{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px 0 8px;border-radius:999px;border:1px solid var(--linha-2);background:var(--sup);color:var(--suave);font-size:13px;font-weight:500;text-decoration:none;line-height:1;white-space:nowrap;flex:none;transition:border-color var(--rapido),color var(--rapido),background var(--rapido)}
.btn-inicio:hover{border-color:var(--suave);color:var(--tinta)}
.btn-inicio svg{width:14px;height:14px;display:block}
.cab-app .sep{width:1px;height:22px;background:var(--linha-2);flex:none}

/* ---------- hover, foco e aperto ---------- */
a,button,input,textarea,select,summary,[role=tab],[role=switch]{transition-property:color,background-color,border-color,box-shadow,opacity,transform;transition-duration:var(--rapido);transition-timing-function:var(--curva)}
:focus-visible{outline:2px solid var(--tinta);outline-offset:2px}
input:focus-visible,textarea:focus-visible{outline:none}
button:active:not(:disabled),.aperta:active{transform:scale(.98)}

/* ---------- resultado que abre com altura (0fr para 1fr) ---------- */
.revela{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows var(--medio) var(--curva),opacity var(--medio) var(--curva)}
.revela>.revela-in{min-height:0;overflow:hidden}
.revela.aberto{grid-template-rows:1fr;opacity:1}
.revela.aberto>.revela-in{overflow:visible}
.revela.abrindo>.revela-in{overflow:hidden}

/* ---------- seletor segmentado com indicador que desliza ---------- */
.seg-app{position:relative;display:flex;gap:2px;padding:4px;border-radius:13px;background:var(--afundado);width:fit-content;max-width:100%;overflow-x:auto;scrollbar-width:none;isolation:isolate}
.seg-app::-webkit-scrollbar{display:none}
.seg-app [role=tab]{position:relative;z-index:1;flex:none;border:0;background:transparent;border-radius:10px;padding:8px 16px;font-size:14px;font-weight:500;color:var(--suave);white-space:nowrap;cursor:pointer}
.seg-app [role=tab]:hover{color:var(--tinta)}
.seg-app [role=tab][aria-selected=true]{color:var(--tinta)}
.seg-app [role=tab]:active:not(:disabled){transform:none}
.seg-ind{position:absolute;z-index:0;top:4px;left:0;height:calc(100% - 8px);width:0;border-radius:10px;background:var(--sup);box-shadow:var(--e2);transform:translateX(0);transition:transform var(--medio) var(--curva),width var(--medio) var(--curva);pointer-events:none}
.seg-ind.sem-anim{transition:none}
.painel-seg{animation:entra-painel var(--rapido) var(--curva) both}
@keyframes entra-painel{from{opacity:0}to{opacity:1}}

/* ---------- aviso curto (cópia e afins) ---------- */
.aviso-curto{position:fixed;left:50%;bottom:24px;z-index:90;display:inline-flex;align-items:center;gap:8px;max-width:calc(100vw - 32px);padding:10px 16px;border-radius:999px;background:var(--tinta);color:var(--fundo);font:500 14px/1.3 Inter,system-ui,sans-serif;box-shadow:var(--e3);transform:translate(-50%,10px);opacity:0;pointer-events:none;transition:transform var(--medio) var(--curva),opacity var(--medio) var(--curva)}
.aviso-curto.visivel{transform:translate(-50%,0);opacity:1}
.aviso-curto svg{flex:none;width:16px;height:16px;display:block}
.aviso-curto.erro{background:var(--erro);color:#FFFFFF}

/* ---------- interruptor genérico (role=switch) ---------- */
.sw{position:relative;flex:none;width:42px;height:26px;border:0;border-radius:999px;background:var(--linha-2);padding:0;cursor:pointer;transition:background var(--medio) var(--curva)}
.sw i{position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#FFFFFF;box-shadow:0 1px 3px rgba(0,0,0,.28);transition:transform var(--medio) var(--curva)}
.sw[aria-checked=true]{background:var(--ac,var(--verde))}
.sw[aria-checked=true] i{transform:translateX(16px)}
.sw:disabled{opacity:.6;cursor:default}
.sw:active:not(:disabled){transform:none}

@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  *,*::before,*::after{animation-duration:0s!important;animation-delay:0s!important;transition-duration:0s!important;transition-delay:0s!important;scroll-behavior:auto!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  button:active:not(:disabled),.aperta:active{transform:none}
}