/* Assessor, painel admin. Microinterações (docs/microinteracoes.md na raiz do projeto, itens 1 a 50).
   Só usa tokens do sistema visual. Só anima opacity, transform, cor e a altura de linha que colapsa.
   Sob prefers-reduced-motion o bloco do fim zera tudo: o estado final continua legível (cor, rótulo, borda). */

/* ---------- Quadros de entrada reutilizados ---------- */
@keyframes micro-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes micro-entra-curto { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes micro-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes micro-desliza-dir { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
@keyframes micro-desliza-esq { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
@keyframes micro-pulso-escala { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.4); } }
@keyframes micro-pulso-borda { 0%, 100% { border-color: var(--linha); } 40% { border-color: var(--destaque); } }
@keyframes micro-tremor { 0%, 100% { transform: none; } 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
@keyframes micro-traco { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }
@keyframes micro-varre { from { background-size: 0 1.5px; } to { background-size: 100% 1.5px; } }
@keyframes micro-bolinha { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

.micro-entra { animation: micro-entra var(--t-medio) var(--suave); }
.micro-fade { animation: micro-fade var(--t-curto) var(--suave); }
.micro-desliza-dir { animation: micro-desliza-dir var(--t-medio) var(--suave); }
.micro-desliza-esq { animation: micro-desliza-esq var(--t-medio) var(--suave); }
.micro-pulso { animation: micro-pulso-escala var(--t-pulso) var(--suave); }
.micro-pulso-borda { animation: micro-pulso-borda var(--t-pulso) var(--suave); }
.micro-tremor { animation: micro-tremor var(--t-pulso) linear; }

/* Item 11, 7, 6, 34, 17, 37: o que passa de oculto a visível entra com fade e 8px de subida (CSS puro, vale a cada troca) */
.tela:not([hidden]),
#entrar form:not([hidden]),
#onboarding form:not([hidden]),
#tf-modo-lista:not([hidden]), #tf-modo-quadro:not([hidden]),
#chat-confirma:not([hidden]) { animation: micro-entra var(--t-medio) var(--suave); }
#tf-modo-lista:not([hidden]), #tf-modo-quadro:not([hidden]) { animation-name: micro-fade; animation-duration: var(--t-curto); }
#menu-adiar:not([hidden]) { animation: micro-entra-curto var(--t-curto) var(--suave); }

/* ---------- A. Acesso e onboarding ---------- */
/* 1: foco do campo, borda lima sem mexer no rótulo */
.campo input, .campo select, .campo textarea { transition: border-color var(--t-curto) var(--suave); }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible { border-color: var(--destaque); box-shadow: var(--foco); }
/* 2: Mostrar/Ocultar */
.campo__ver { transition: background-color var(--t-curto) var(--suave), color var(--t-curto) var(--suave); touch-action: manipulation; }
.campo__ver.micro-tap, .micro-tap { background-color: var(--cartao-3); }
/* 3 e 4: erro entra com fade e 4px de subida; campo inválido com borda de perigo */
.micro-erro-entra { animation: micro-entra-curto var(--t-medio) var(--suave); }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--perigo); }
.campo input, .campo textarea, .campo select { transition-property: border-color; }
/* 5: envio em andamento, ponto de pulsação à esquerda, largura reservada pelo JS (min-width) */
button.micro-ocupado { cursor: progress; }
button.micro-ocupado::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: currentColor; animation: micro-bolinha 900ms ease-in-out infinite; vertical-align: middle; }
/* 6: sublinhado único que desliza entre as abas */
.abas { position: relative; }
.abas[data-micro-ind] [role="tab"][aria-selected="true"]::after { display: none; }
.micro-ind { position: absolute; left: 0; bottom: -1px; width: 1px; height: 2px; background: var(--lima); border-radius: 2px; transform-origin: 0 50%; pointer-events: none; opacity: 0; }
.micro-ind--pronto { opacity: 1; transition: transform var(--t-medio) var(--suave); }
.cartao__cab .abas .micro-ind { bottom: 0; }
/* 8: botão confirmado por 1800ms */
.micro-confirmado { background-color: var(--verde-suave) !important; color: var(--verde) !important; }

/* ---------- B. Navegação e estrutura ---------- */
/* 9 e 10: item ativo e pressão de toque; rótulo do ativo entra por fade no celular */
.nav :is(a, button), .gaveta__nav a { transition: background-color var(--t-curto) var(--suave), color var(--t-curto) var(--suave), border-color var(--t-curto) var(--suave), transform var(--t-curto) var(--suave); touch-action: manipulation; }
.nav :is(a, button):active, .gaveta__nav a:active, .btn:active, .btn-circ:active, .seg__item:active, .pilula:active, .escolha__op:active { transform: scale(.97); }
.nav a[aria-current="page"] .nav__txt { animation: micro-fade var(--t-curto) var(--suave); }
.nav__ic { transition: background-color var(--t-curto) var(--suave), border-color var(--t-curto) var(--suave); }
/* 13: troca de tema em cross-fade de cor (classe posta pelo JS por 300ms) */
html.micro-tema *, html.micro-tema *::before, html.micro-tema *::after { transition: background-color var(--t-curto) var(--suave), color var(--t-curto) var(--suave), border-color var(--t-curto) var(--suave), fill var(--t-curto) var(--suave), stroke var(--t-curto) var(--suave) !important; }
.seg__item { transition: background-color var(--t-curto) var(--suave), color var(--t-curto) var(--suave), transform var(--t-curto) var(--suave); touch-action: manipulation; }
/* 14: ponto do sino dá um pulso único quando chega lembrete */
.btn-circ--sino .ponto.micro-pulso { animation: micro-pulso-escala var(--t-pulso) var(--suave); }

/* ---------- C. Criar e editar ---------- */
/* 15: o + gira 90 graus ao tocar */
[data-novo] svg { transition: transform var(--t-curto) var(--suave); }
[data-novo]:active svg, [data-novo]:hover svg, [data-novo]:focus-visible svg { transform: rotate(90deg); }
/* 19: atalhos de data */
.pilula { transition: background-color var(--t-curto) var(--suave), color var(--t-curto) var(--suave), border-color var(--t-curto) var(--suave), transform var(--t-curto) var(--suave); touch-action: manipulation; }
.gl.micro-pulso-borda { border-radius: 8px; }
/* 20: ícone da categoria troca com fade */
.micro-troca { animation: micro-fade var(--t-curto) var(--suave); }
/* 22: Salvar com visto */
#novo-salvar.micro-salvo { background: var(--verde); color: var(--branco); }
:root[data-tema="claro"] #novo-salvar.micro-salvo { background: var(--verde); }
/* 23: item recém-criado, fundo lima suave que esvanece em 1800ms */
.item.micro-novo, .qcard.micro-novo { background: var(--lima-suave); border-radius: 12px; }
.item, .qcard { transition: background-color var(--t-feedback) var(--suave); }
/* 24: contador de caracteres */
.micro-contador { display: block; margin: 4px 0 0; text-align: right; font-size: .75rem; color: var(--texto-mudo); font-variant-numeric: tabular-nums; transition: color var(--t-curto) var(--suave); }
.micro-contador--90 { color: var(--alerta); }
.micro-contador--100 { color: var(--perigo); font-weight: var(--peso-medio); }

/* ---------- D. Gastos ---------- */
/* 25 e 26 e 27 */
.chip.micro-entra-chip { animation: micro-chip var(--t-curto) var(--suave); }
@keyframes micro-chip { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
.chip.micro-sai { opacity: 0; transition: opacity var(--t-curto) var(--suave); }
#g-lista.micro-fade, #g-cat.micro-fade { animation: micro-fade var(--t-curto) var(--suave); }
#g-limpar svg { transition: transform var(--t-curto) var(--suave); }
#g-limpar.micro-gira svg { transform: rotate(180deg); }
/* 28: barras, as demais baixam a 60% em hover e em foco (só onde há hover real) */
.barra { transition: opacity var(--t-curto) var(--suave); }
.barras:has(.barra:focus-visible) .barra:not(:focus-visible) { opacity: .6; }
@media (hover: hover) { .barras:has(.barra:hover) .barra:not(:hover) { opacity: .6; } }
.barra:focus-visible .barra__etq, .barra:hover .barra__etq { opacity: 1; visibility: visible; }
.barra:focus-visible .barra__pilula { background-image: repeating-linear-gradient(135deg, transparent 0 5px, rgba(0, 0, 0, .18) 5px 6px); }
/* 29: donut e legenda, nos dois sentidos */
.donut__svg circle { transition: opacity var(--t-curto) var(--suave), stroke-width var(--t-curto) var(--suave); }
.donut.micro-foco .donut__svg circle:not(.donut__fundo):not(.micro-seg) { opacity: .5; }
.donut.micro-foco .donut__svg circle.micro-seg { stroke-width: 22; }
.donut .legenda li { transition: background-color var(--t-curto) var(--suave), opacity var(--t-curto) var(--suave); border-radius: 12px; }
.donut.micro-foco .legenda li:not(.micro-leg) { opacity: .5; }
.donut .legenda li.micro-leg { background: var(--cartao-2); }
.donut .legenda li:focus-visible { box-shadow: var(--foco); }
/* 30: "Ver mais" entra em cascata de 30ms (mais 7 itens, no máximo 210ms) */
.micro-cascata { animation: micro-entra-curto var(--t-curto) var(--suave) both; animation-delay: calc(var(--i, 0) * 30ms); }

/* ---------- E. Tarefas ---------- */
/* 31: check desenha o visto; título ganha riscado em varredura */
.check { transition: background-color var(--t-curto) var(--suave), border-color var(--t-curto) var(--suave), transform var(--t-curto) var(--suave); touch-action: manipulation; }
.check:active { transform: scale(.9); }
.check.micro-feito svg path { stroke-dasharray: 24; animation: micro-traco var(--t-medio) var(--suave) both; }
.item--feita.micro-feito-item .item__tit { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 55% / 100% 1.5px no-repeat; animation: micro-varre var(--t-medio) var(--suave) both; }
/* 32: linha esmaece e colapsa; a altura vem do JS */
.item.micro-saindo { opacity: .45; overflow: hidden; transition: opacity var(--t-medio) var(--suave), height var(--t-medio) var(--suave), min-height var(--t-medio) var(--suave), padding var(--t-medio) var(--suave); }
.item.micro-colapsa { height: 0 !important; min-height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; opacity: 0; }
/* 33 e 40: o aviso com Desfazer já existe (.aviso-toast); só entra por fade */
.aviso-toast:not([hidden]) { animation: micro-entra var(--t-medio) var(--suave); }
/* 35: coluna alvo e cartão arrastado */
.quadro__col { transition: border-color var(--t-curto) var(--suave), background-color var(--t-curto) var(--suave); border: 1.5px dashed transparent; }
.quadro__col--alvo { border-color: var(--destaque); }
.qcard { transition: transform var(--t-curto) var(--suave), background-color var(--t-feedback) var(--suave); }
.qcard--arrastando { transform: translateY(-4px); box-shadow: 0 8px 24px var(--sombra); }
/* 36: sincronizar, visto ao fim */
#ag-sync[aria-busy="true"] { cursor: progress; }
.micro-sync-ok { color: var(--verde); }
/* 37: itens do menu de adiar */
#menu-adiar button { transition: background-color var(--t-curto) var(--suave); }
#menu-adiar button:hover, #menu-adiar button:focus-visible { background: var(--cartao-3); }

/* ---------- F. Lembretes ---------- */
/* 38: selo troca por cross-fade, a palavra muda junto */
.selo.micro-selo-troca { animation: micro-fade var(--t-medio) var(--suave); }
/* 39: contagem regressiva, só texto */
.micro-cd { color: var(--destaque); font-variant-numeric: tabular-nums; }

/* ---------- G. Agenda ---------- */
/* 41, 42: navegação e visões; 43: cascata dos eventos do dia */
#ag-grade.micro-fade { animation: micro-fade var(--t-curto) var(--suave); }
.dias__btn { transition: background-color var(--t-curto) var(--suave), border-color var(--t-curto) var(--suave), color var(--t-curto) var(--suave), transform var(--t-curto) var(--suave); touch-action: manipulation; }
/* 44: véu na célula e destaque no evento, também em foco */
.mes__num::after { transition: background-color var(--t-curto) var(--suave); }
.mes__ev { transition: background-color var(--t-curto) var(--suave); }
.mes__ev:focus-visible { background: var(--cartao); box-shadow: var(--foco); }
.mes__dia:has(.mes__num:focus-visible) .mes__num::after { background: color-mix(in srgb, var(--texto) 4%, transparent); }

/* ---------- H. Documentos, conversa e integrações ---------- */
/* 45: área de soltura e progresso */
.doc-arq { transition: border-color var(--t-curto) var(--suave), background-color var(--t-curto) var(--suave); }
.doc-arq.micro-solta { border: 1.5px dashed var(--destaque); background: var(--lima-suave); }
.micro-prog { height: 4px; margin-top: 12px; border-radius: 2px; background: var(--barra); overflow: hidden; flex-basis: 100%; }
.micro-prog[hidden] { display: none; }
.micro-prog i { display: block; width: 40%; height: 100%; background: var(--lima); border-radius: 2px; animation: micro-prog 1s linear infinite; }
@keyframes micro-prog { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
/* 46: pontos em onda de 150ms (já em conversa.css); texto estático sob movimento reduzido fica no bloco do fim */
.micro-digitando { display: none; }
/* 47: bolha entra por fade e 8px; botão para a última mensagem */
.bal.micro-entra { animation: micro-entra var(--t-medio) var(--suave); }
.micro-ultima { position: sticky; bottom: 8px; align-self: center; z-index: 2; min-height: 44px; padding: 0 18px; border: 1px solid var(--linha-forte); border-radius: var(--raio-pilula); background: var(--cartao-3); color: var(--texto); font: inherit; font-size: .875rem; box-shadow: 0 8px 24px var(--sombra); animation: micro-entra var(--t-curto) var(--suave); }
.micro-ultima[hidden] { display: none; }
/* 48: resposta escolhida fica pressionada, a outra esmaece */
.chat__botoes button { transition: opacity var(--t-curto) var(--suave), background-color var(--t-curto) var(--suave), transform var(--t-curto) var(--suave); }
.chat__botoes button[aria-pressed="true"] { transform: scale(.97); }
.chat__botoes button[aria-pressed="false"][disabled].micro-esmaece { opacity: .45; }
/* 49: pulso das caixas do código copiado */
#wa-codigo.micro-pulso-borda { border-radius: var(--raio-campo); }
#wa-copiar span { display: inline-block; min-width: 7.5em; text-align: left; }
/* 50: selo troca por cross-fade; ponto pulsa uma vez ao conectar */
.int__cab .selo.micro-selo-troca, #cwa-selo.micro-selo-troca { animation: micro-fade var(--t-medio) var(--suave); }
.selo.micro-conectou::before { animation: micro-pulso-escala var(--t-pulso) var(--suave); }
#dlg-confirmar.micro-confirmar-desconexao { background-color: var(--perigo); color: var(--branco); }

/* ---------- Toque: sem atraso de clique nos botões ---------- */
button, [role="button"], .btn, .btn-circ { touch-action: manipulation; }

/* ---------- Movimento reduzido: troca de movimento por troca de estado ---------- */
@media (prefers-reduced-motion: reduce) {
  .micro-ind--pronto { transition: none; }
  button.micro-ocupado::before { animation: none; }
  .micro-prog i { animation: none; width: 100%; opacity: .6; }
  .micro-digitando { display: inline; margin-left: 6px; color: var(--texto-suave); font-size: .875rem; }
  #ag-sync.girando svg { opacity: .5; }
  .item.micro-saindo, .item.micro-colapsa { transition: none; }
}