/* Arquifesta — estilos do sistema. Cores, fontes, espaços, raios e foco vêm de tokens.css (kit oficial da identidade, v1.0).
   Tema claro da marca: fundo papel, superfícies brancas, violeta nas ações, lima/coral como acentos (docs/IDENTIDADE-VISUAL.md). */
:root{color-scheme:light}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--color-background);color:var(--color-text);font:400 16px/24px var(--font-body)}
main{flex:1;width:100%;max-width:1120px;margin:0 auto;padding:var(--space-32) var(--space-16) var(--space-48)}
main:focus{outline:none}
h1,h2,h3{font-family:var(--font-display);font-weight:700;color:var(--color-text);margin:0 0 var(--space-12)}
h1{font-size:40px;line-height:48px}h2{font-size:28px;line-height:36px}h3{font-size:20px;line-height:28px}
@media (max-width:640px){h1{font-size:30px;line-height:38px}h2{font-size:24px;line-height:32px}}
a{color:var(--color-primary);text-underline-offset:3px}
p{margin:var(--space-8) 0}
code{background:var(--color-primarySoft);color:var(--color-text);padding:0 6px;border-radius:6px;font-size:.9em}
small,.meta{font-size:12px;line-height:18px;color:var(--color-muted)}
.ico{width:20px;height:20px;flex:none}

/* Acessibilidade: atalho para o conteúdo (o foco visível vem de tokens.css) */
.pular{position:absolute;left:-9999px;top:var(--space-8)}
.pular:focus{left:var(--space-8);z-index:100;background:var(--color-surface);padding:var(--space-12) var(--space-16);border:2px solid var(--color-primary);border-radius:var(--radius-control)}

/* Topo e rodapé */
.topo{display:flex;align-items:center;gap:var(--space-24);flex-wrap:wrap;padding:var(--space-12) var(--space-24);background:var(--color-surface);border-bottom:1px solid var(--color-borderSoft)}
.marca{display:block;line-height:0}.marca img{display:block;height:40px;width:auto}      /* horizontal: mínimo 180 px de largura */
.menu{display:flex;gap:var(--space-8);flex-wrap:wrap}
.menu a{display:inline-flex;align-items:center;gap:var(--space-8);min-height:44px;padding:0 var(--space-12);border-radius:var(--radius-control);color:var(--color-text);font-weight:700;text-decoration:none;transition:background var(--motion-fast)}
.menu a:hover{background:var(--color-primarySoft)}
.menu a[aria-current=page]{background:var(--color-accentLime);color:var(--color-text)}      /* seleção lima com texto tinta */
.usuario{margin-left:auto;display:flex;align-items:center;gap:var(--space-12);flex-wrap:wrap;font-size:14px;line-height:20px;color:var(--color-muted)}
.usuario a{display:inline-flex;align-items:center;min-height:44px}
.rodape{padding:var(--space-24) var(--space-16);text-align:center;font-size:14px;line-height:20px;color:var(--color-muted);border-top:1px solid var(--color-borderSoft)}
.rodape strong{color:var(--color-primary)}

/* Botões e campos */
button,.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-8);min-height:44px;padding:10px 20px;border:2px solid var(--color-primary);border-radius:var(--radius-control);background:var(--color-primary);color:#fff;font:700 16px/24px var(--font-body);text-decoration:none;cursor:pointer;transition:filter var(--motion-fast)}
button:hover,.btn:hover{filter:brightness(.92)}
button:disabled{opacity:.6;cursor:not-allowed}
.btn-sec,button.btn-sec{background:var(--color-surface);color:var(--color-primary)}
.btn-peq{padding:6px 14px;font-size:14px;line-height:20px}
.link-btn,button.link-btn{min-height:44px;padding:0 var(--space-8);border:0;background:none;color:var(--color-primary);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.inline{display:inline;margin:0}
label{display:block;font:700 14px/20px var(--font-body);color:var(--color-text)}
input,select{display:block;width:100%;min-height:44px;margin-top:var(--space-4);padding:10px 12px;border:1.5px solid var(--color-border);border-radius:var(--radius-control);background:var(--color-surface);color:var(--color-text);font:400 16px/24px var(--font-body)}
input::placeholder{color:var(--color-muted);opacity:1}
input[type=checkbox],input[type=radio]{display:inline-block;flex:none;width:24px;height:24px;min-height:0;margin:0;accent-color:var(--color-primary)}
.check{display:flex;align-items:center;justify-content:center;gap:var(--space-8);margin:var(--space-16) 0;font-weight:400;font-size:16px}
.regras{margin:var(--space-8) 0;padding-left:var(--space-24);font-size:14px;line-height:20px;color:var(--color-muted);text-align:left}

/* Mensagens de estado: sempre ícone + texto (nunca só cor) */
.msg{display:flex;gap:var(--space-12);align-items:flex-start;margin:var(--space-12) 0;padding:var(--space-12) var(--space-16);border-radius:var(--radius-control);text-align:left;font-size:14px;line-height:20px;font-weight:700}
.msg .ico{margin-top:1px}.msg ul{margin:0;padding-left:var(--space-16);font-weight:400}.msg p{margin:0;font-weight:400}
.msg-erro{background:var(--color-dangerBg);color:var(--color-danger)}
.msg-ok{background:var(--color-successBg);color:var(--color-success)}
.msg-aviso{background:var(--color-warningBg);color:var(--color-warning)}
.erro{color:var(--color-danger)}.ok{color:var(--color-success)}

/* Cartões de entrada (login, 2FA, troca de senha, erro) */
.entrada{max-width:440px;margin:var(--space-16) auto 0;text-align:center}
.logo-vertical{display:block;width:240px;max-width:70%;height:auto;margin:0 auto var(--space-24)}
.logo-simbolo{display:block;width:64px;height:64px;margin:0 auto var(--space-16)}
.card{background:var(--color-surface);border:1px solid var(--color-borderSoft);border-radius:var(--radius-card);padding:var(--space-32) var(--space-24);text-align:center}
.card h1{font-size:28px;line-height:36px}
.card label{margin:var(--space-16) 0;text-align:left}
.card button,.card .btn{display:flex;width:100%;margin:var(--space-24) 0 var(--space-4)}
.card .msg{margin-top:0}
.card .regras{margin-bottom:0}
.isca{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}   /* campos-isca: invisíveis para pessoas */
.passo{margin:var(--space-24) 0 var(--space-8);font:700 12px/18px var(--font-body);letter-spacing:.06em;color:var(--color-muted)}
.qr{display:inline-block;background:#fff;padding:var(--space-16);border:3px solid var(--color-text);border-radius:var(--radius-card);line-height:0}
.qr img{display:block;width:220px;height:220px;max-width:100%}
.codigo-manual{display:inline-block;font:700 16px/24px ui-monospace,Consolas,monospace;letter-spacing:.12em;background:var(--color-background);border:1px dashed var(--color-border);padding:var(--space-8) var(--space-12);border-radius:var(--radius-control);user-select:all;overflow-wrap:anywhere}
.otp{text-align:center;font-size:24px;line-height:32px;letter-spacing:.35em;font-variant-numeric:tabular-nums;padding-left:calc(12px + .35em)}
.codigos{list-style:none;padding:0;margin:var(--space-16) 0;display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8)}
.codigos li{background:var(--color-background);border:1px solid var(--color-borderSoft);border-radius:var(--radius-control);padding:var(--space-8);font:700 16px/24px ui-monospace,Consolas,monospace;letter-spacing:.1em}

/* Acervo: busca, resultados em cartões com prévia em destaque */
.busca{display:flex;gap:var(--space-16);flex-wrap:wrap;align-items:flex-end;margin:var(--space-16) 0}
.campo-busca{flex:1 1 320px}.campo-tipo{flex:0 1 220px}
.limpar{display:inline-flex;align-items:center;min-height:44px;font-weight:700}
.resumo{margin:var(--space-16) 0;color:var(--color-muted)}.resumo strong{color:var(--color-text)}
.vazio{display:flex;flex-direction:column;align-items:center;gap:var(--space-8);margin:var(--space-48) auto;max-width:520px;padding:var(--space-32) var(--space-24);text-align:center;background:var(--color-surface);border:1px dashed var(--color-border);border-radius:var(--radius-card)}
.vazio .ico{width:40px;height:40px;color:var(--color-primary)}.vazio h2{font-size:20px;line-height:28px;margin:0}.vazio p{margin:0;color:var(--color-muted)}
.cards{list-style:none;margin:var(--space-24) 0;padding:0;display:grid;gap:var(--space-24);grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.arte{display:flex;flex-direction:column;background:var(--color-surface);border:1px solid var(--color-borderSoft);border-radius:var(--radius-card);overflow:hidden}
.previa{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;background:var(--color-primarySoft)}
.previa img{display:block;width:100%;height:100%;object-fit:cover}                    /* miniaturas mantêm as cores originais */
.sem-previa{display:flex;flex-direction:column;align-items:center;gap:var(--space-8);color:var(--color-primary);font-weight:700}
.sem-previa .ico{width:40px;height:40px}
.arte-corpo{display:flex;flex-direction:column;gap:var(--space-8);flex:1;padding:var(--space-16)}
.arte-titulo{margin:0;font-size:20px;line-height:28px;overflow-wrap:anywhere}
.locais{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-12)}
.locais>li{padding-top:var(--space-12);border-top:1px solid var(--color-borderSoft)}
.fonte{display:inline-block;padding:0 10px;border-radius:99px;background:var(--color-primarySoft);color:var(--color-primary);font:700 12px/20px var(--font-body)}
.caminho{display:block;margin:var(--space-4) 0 var(--space-8);font-size:12px;line-height:18px;color:var(--color-muted);overflow-wrap:anywhere}
.acoes-local{display:flex;flex-wrap:wrap;gap:var(--space-8)}
.paginas{display:flex;justify-content:center;align-items:center;gap:var(--space-16);margin:var(--space-24) 0}

/* Configurações e integrações */
.grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--space-16);margin:var(--space-16) 0}
.painel,.form-larga{background:var(--color-surface);border:1px solid var(--color-borderSoft);border-radius:var(--radius-card);padding:var(--space-24)}
.painel h2{display:flex;align-items:center;gap:var(--space-8);flex-wrap:wrap;font-size:20px;line-height:28px}
.painel p{color:var(--color-muted);font-size:14px;line-height:20px}
.form-larga{max-width:640px;margin-top:var(--space-16)}
.form-larga label{margin:var(--space-16) 0}
.form-larga label small{display:block;font-weight:400;margin-top:var(--space-4)}
.form-larga h2{font-size:20px;line-height:28px}
.acoes{display:flex;gap:var(--space-12);flex-wrap:wrap;margin-top:var(--space-24)}
.copiavel{display:block;font:14px/20px ui-monospace,Consolas,monospace;background:var(--color-background);border:1px solid var(--color-borderSoft);border-radius:var(--radius-control);padding:var(--space-8) var(--space-12);user-select:all;overflow-wrap:anywhere}
.selo{display:inline-flex;align-items:center;gap:6px;padding:0 10px;border-radius:99px;background:var(--color-borderSoft);color:var(--color-text);font:700 12px/20px var(--font-body)}
.selo.conectada{background:var(--color-successBg);color:var(--color-success)}
.selo.erro{background:var(--color-dangerBg);color:var(--color-danger)}
.selo.configurada{background:var(--color-primarySoft);color:var(--color-primary)}
.selo.breve{background:var(--color-accentLime);color:var(--color-text)}
.voltar{display:inline-flex;align-items:center;gap:var(--space-4);min-height:44px;font-weight:700}

/* ---------- Trilha de navegação: bandeirinhas de festa entre as etapas, etapa atual em lima ---------- */
.trilha{margin:0 0 var(--space-16)}
.trilha ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;margin:0;padding:0}
.trilha li{display:flex;align-items:center}
.trilha li+li::before{content:"";flex:none;width:12px;height:16px;margin:0 var(--space-8);background:var(--color-accentCoral);clip-path:polygon(0 0,100% 50%,0 100%)}
.trilha li:nth-child(3)::before{background:var(--color-primary)}
.trilha li:nth-child(4)::before{background:var(--color-accentLime)}
.trilha li:nth-child(5)::before{background:var(--color-accentCoral)}
.trilha a,.trilha [aria-current]{display:inline-flex;align-items:center;gap:var(--space-8);min-height:44px;padding:0 var(--space-12);border-radius:99px;font-weight:700;text-decoration:none}
.trilha a{background:var(--color-surface);border:1px solid var(--color-borderSoft);color:var(--color-primary);transition:background var(--motion-fast)}
.trilha a:hover{background:var(--color-primarySoft)}
.trilha [aria-current]{background:var(--color-accentLime);color:var(--color-text)}
.trilha .inicio img{display:block;width:20px;height:20px}

/* ---------- Diálogo de sucesso: check verde que se desenha ---------- */
.modal-sucesso{width:calc(100% - 32px);max-width:420px;padding:var(--space-32) var(--space-24);border:0;border-radius:var(--radius-modal);background:var(--color-surface);color:var(--color-text);text-align:center;box-shadow:0 24px 60px rgba(36,27,53,.35)}
.modal-sucesso::backdrop{background:rgba(36,27,53,.55)}
.modal-sucesso[open]{animation:modal-entra var(--motion-fast) ease-out}
.modal-sucesso h2{font-size:24px;line-height:32px;margin:0 0 var(--space-8)}
.modal-sucesso p{margin:0 0 var(--space-24);color:var(--color-muted);overflow-wrap:anywhere}
.modal-sucesso button{width:100%}
.selo-check{display:flex;align-items:center;justify-content:center;width:88px;height:88px;margin:0 auto var(--space-16);border-radius:50%;background:var(--color-successBg);animation:check-pop .5s ease-out}
.check-anim{width:60px;height:60px}
.check-anim circle{fill:none;stroke:var(--color-success);stroke-width:3;stroke-dasharray:151;animation:desenha-circulo .6s ease-out}
.check-anim path{fill:none;stroke:var(--color-success);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:36;animation:desenha-marca .4s .5s ease-out both}
@keyframes desenha-circulo{from{stroke-dashoffset:151}to{stroke-dashoffset:0}}
@keyframes desenha-marca{from{stroke-dashoffset:36}to{stroke-dashoffset:0}}
@keyframes check-pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
@keyframes modal-entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
button.ocupado::before{content:"";width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:gira .8s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}

/* ---------- Passo a passo das integrações e formulários em blocos ---------- */
.guia{background:var(--color-surface);border:1px solid var(--color-borderSoft);border-radius:var(--radius-card);padding:var(--space-8) var(--space-24);margin:var(--space-16) 0;max-width:760px}
.guia>summary{display:flex;align-items:center;gap:var(--space-8);min-height:44px;font:700 20px/28px var(--font-display);cursor:pointer}
.guia h3{margin:var(--space-24) 0 var(--space-8)}
.passos{counter-reset:passo;list-style:none;margin:0 0 var(--space-16);padding:0}
.passos li{counter-increment:passo;position:relative;margin:var(--space-12) 0;padding-left:44px}
.passos li::before{content:counter(passo);position:absolute;left:0;top:-2px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--color-primarySoft);color:var(--color-primary);font-weight:700}
.guia .links{display:flex;flex-wrap:wrap;gap:var(--space-8);margin:var(--space-8) 0 var(--space-16)}
fieldset.bloco{border:0;margin:0;padding:0}
fieldset.bloco>legend{display:flex;align-items:center;gap:var(--space-8);padding:0;margin:0 0 var(--space-4);font:700 20px/28px var(--font-display)}
.bloco+.bloco{margin-top:var(--space-32);padding-top:var(--space-24);border-top:1px solid var(--color-borderSoft)}
.exemplo{margin:var(--space-8) 0 0;padding:var(--space-8) var(--space-12);border-left:4px solid var(--color-accentLime);border-radius:0 var(--radius-control) var(--radius-control) 0;background:var(--color-background);font-size:14px;line-height:20px;font-weight:400}
.exemplo code{white-space:normal}
.copia-linha{display:flex;gap:var(--space-8);flex-wrap:wrap;align-items:center}.copia-linha .copiavel{flex:1 1 280px}

/* ---------- Transferências ---------- */
progress{display:block;width:100%;height:16px;border:0;border-radius:99px;overflow:hidden;accent-color:var(--color-primary);background:var(--color-borderSoft)}
.contadores{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--space-12);margin:var(--space-16) 0}
.contador{padding:var(--space-12) var(--space-16);background:var(--color-surface);border:1px solid var(--color-borderSoft);border-radius:var(--radius-card)}
.contador strong{display:block;font:700 28px/36px var(--font-display)}.contador span{font-size:12px;line-height:18px;color:var(--color-muted)}
.tabela-rolagem{overflow-x:auto}
.tabela{width:100%;border-collapse:collapse;font-size:14px;line-height:20px}
.tabela th{padding:var(--space-8) var(--space-12);text-align:left;font-weight:700;color:var(--color-muted);border-bottom:2px solid var(--color-borderSoft)}
.tabela td{padding:var(--space-12);border-bottom:1px solid var(--color-borderSoft);vertical-align:top;overflow-wrap:anywhere}
.tabela td.num{white-space:nowrap}
.opcoes{border:0;margin:var(--space-16) 0 0;padding:0}.opcoes legend{padding:0;font:700 14px/20px var(--font-body)}
.opcoes label.escolha{display:flex;align-items:flex-start;gap:var(--space-12);margin:var(--space-8) 0;padding:var(--space-12);border:1.5px solid var(--color-border);border-radius:var(--radius-control);background:var(--color-surface);font-weight:400;font-size:16px;cursor:pointer}
.opcoes label.escolha input{flex:none;margin-top:2px}
.opcoes label.escolha small{display:block;margin-top:var(--space-4)}
.setas{display:flex;align-items:center;gap:var(--space-8);flex-wrap:wrap}
.selo.pendente,.selo.cancelada{background:var(--color-borderSoft);color:var(--color-text)}
.selo.executando{background:var(--color-primarySoft);color:var(--color-primary)}
.selo.concluida{background:var(--color-successBg);color:var(--color-success)}
.selo.parcial{background:var(--color-warningBg);color:var(--color-warning)}
.selo.falhou{background:var(--color-dangerBg);color:var(--color-danger)}
.selo.copiado{background:var(--color-successBg);color:var(--color-success)}
.selo.ignorado{background:var(--color-borderSoft);color:var(--color-text)}

/* ---------- Minha conta ---------- */
.ficha{display:grid;grid-template-columns:max-content 1fr;gap:var(--space-8) var(--space-24);margin:var(--space-16) 0}
.ficha dt{color:var(--color-muted);font-size:14px;line-height:24px}.ficha dd{margin:0;font-weight:700;overflow-wrap:anywhere}
@media (max-width:520px){.ficha{grid-template-columns:1fr;gap:0}.ficha dd{margin-bottom:var(--space-12)}}

/* acabamentos */
progress{appearance:none;-webkit-appearance:none}
progress::-webkit-progress-bar{background:var(--color-borderSoft);border-radius:99px}
progress::-webkit-progress-value{background:var(--color-primary);border-radius:99px;transition:width var(--motion-fast)}
progress::-moz-progress-bar{background:var(--color-primary);border-radius:99px}
.tabela-larga{min-width:680px}
.tabela td.col-larga{min-width:230px}                       /* no celular a tabela rola dentro da caixa em vez de espremer as colunas */
.tabela .selo{white-space:nowrap}
.tabela code{overflow-wrap:normal;white-space:nowrap}
.acoes+h2{margin-top:var(--space-32)}