; a navegação é o link do rodapé */ .kpi-link-seta { margin-left: auto; color: var(--text-faint); transition: transform .18s, color .18s; } a.kpi:hover .kpi-link-seta { color: var(--primary); transform: translateX(3px); } /* Rodapé do card: link "Ver paradas" (esquerda) + botão "Justificar" (direita). */ .maquina-card-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--border-soft); } .maquina-card-link { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; color: var(--text-dim); font-size: .8rem; font-weight: 600; text-decoration: none; transition: color .18s; } .maquina-card-link:hover { color: var(--primary); } .maquina-card-link:hover .ms { transform: translateX(3px); transition: transform .18s; } /* Itens de justificativa nos modais do dashboard (FLU-01). */ .justificar-item { padding: 14px 0; border-top: 1px solid var(--border-soft); } .justificar-item:first-of-type { border-top: 0; padding-top: 2px; } .justificar-item-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .justificar-rejeicao { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; color: var(--erro); font-size: .82rem; } /* ---- Componente de filtro fluido (ver app.js) ---- */ /* A barra .filtros (toolbar) é estilizada em style.css; aqui fica o estado de carregamento da região de resultados trocada via AJAX. */ .filtros .btn { align-self: end; } /* "Filtrar"/"Limpar" alinham com os campos */ /* Região de resultados durante a requisição AJAX: leve opacidade + spinner. */ #filtro-resultado { position: relative; transition: opacity .18s, transform .18s; } #filtro-resultado.is-carregando { opacity: .55; pointer-events: none; } #filtro-resultado.is-carregando::after { content: ""; position: absolute; top: 28px; left: 50%; width: 30px; height: 30px; margin-left: -15px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--primary); animation: filtro-spin .7s linear infinite; z-index: 5; } @keyframes filtro-spin { to { transform: rotate(360deg); } } /* Troca de conteúdo (D3): o JS marca .is-trocando com o conteúdo novo já no DOM (esmaecido + deslocado) e remove no frame seguinte, animando a entrada. Coexiste com .is-carregando (que cobre o intervalo da requisição). */ #filtro-resultado.is-trocando { opacity: 0; transform: translateY(6px); } /* Filtro de texto client-side (D6): as linhas sem match recebem .is-oculta e somem com fade curto antes de sair do fluxo. transition-behavior allow-discrete adia o display:none até o fim do fade; navegadores sem suporte apenas snapam. */ tr[data-busca] { transition: opacity .12s ease; } tr[data-busca].is-oculta { opacity: 0; display: none; transition: opacity .12s ease, display .12s allow-discrete; } /* Barra de busca server-side (busca_tabela): o campo ocupa a largura toda. */ .filtros-busca { display: flex; align-items: center; gap: 12px; } .filtros-busca .campo-busca { flex: 1; } /* ---- Navegação por páginas (paginacao_nav) ---- */ .paginacao { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 16px; } .paginacao-info { color: var(--text-dim); font-size: .85rem; } .paginacao-info strong { color: var(--text-hi); font-weight: 700; } .paginacao-paginas { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .paginacao-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 8px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface, transparent); color: var(--text-dim); font-size: .85rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: border-color .15s, color .15s, background .15s; } .paginacao-btn:hover { border-color: var(--primary); color: var(--primary); } .paginacao-btn.is-atual { background: color-mix(in srgb, var(--primary) 16%, transparent); border-color: var(--primary); color: var(--primary); cursor: default; } .paginacao-btn.is-disabled { opacity: .4; cursor: default; pointer-events: none; } .paginacao-elipse { color: var(--text-faint); padding: 0 2px; user-select: none; } @media (max-width: 560px) { .paginacao { justify-content: center; } .paginacao-info { width: 100%; text-align: center; } } /* ============================================================ Movimento reduzido (D7) — ponto único de controle das animações introduzidas nesta camada de feedback/UX. Quando o usuário pede menos movimento, zeramos durações e removemos os transforms de entrada/saída, preservando a função (toast, troca de conteúdo, modal e filtro seguem operando, apenas sem o deslocamento). Vive no último arquivo carregado para vencer por ordem as regras normais de mesma especificidade. ============================================================ */ @media (prefers-reduced-motion: reduce) { /* Toasts: sem deslizar entrada/saída. */ .toast { animation: none; } .toast.toast-saindo { transition: opacity .01s; transform: none; } /* Troca de conteúdo AJAX: sem fade/translate. */ #filtro-resultado { transition: none; } #filtro-resultado.is-trocando { opacity: 1; transform: none; } /* Entrada de página: sem stagger nem deslocamento. */ .conteudo > *:not(.modal-overlay):not(#toasts) { animation: none; } /* Modais: aparecem/somem sem transição de movimento. */ .modal-overlay, .modal { transition: none; } .modal { transform: none; } /* Filtro de texto: alterna sem fade. */ tr[data-busca], tr[data-busca].is-oculta { transition: none; } }