/*
 * Animações e estados de carregamento reutilizáveis.
 * As classes podem sinalizar consulta, registro, alteração, exclusão, pop-up e saída.
 */
@keyframes entrada-suave { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes entrada-lateral { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }
@keyframes crescer-suave { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
@keyframes pulso-indicador { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 85, 0, .34); } 50% { box-shadow: 0 0 0 6px rgba(255, 85, 0, 0); } }
@keyframes girar-carregamento { to { transform: rotate(360deg); } }
@keyframes girar-inverso { to { transform: rotate(-360deg); } }
@keyframes pulsar-carregamento { 0%, 100% { opacity: .35; transform: scale(.82); } 50% { opacity: 1; transform: scale(1); } }
@keyframes saltar-ponto { 0%, 80%, 100% { opacity: .32; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-6px); } }
@keyframes deslizar-esqueleto { from { transform: translateX(-120%); } to { transform: translateX(320%); } }
@keyframes barras-carregamento { 0%, 100% { transform: scaleY(.45); } 50% { transform: scaleY(1); } }

/* Entradas genéricas para páginas, cartões e painéis laterais. */
.animar-entrada { animation: entrada-suave 420ms cubic-bezier(.2, .7, .2, 1) backwards; }
.animar-lateral { animation: entrada-lateral 360ms cubic-bezier(.2, .7, .2, 1) both; }
.animar-crescimento { animation: crescer-suave 260ms cubic-bezier(.2, .7, .2, 1) both; }
.atraso-1 { animation-delay: 70ms; }
.atraso-2 { animation-delay: 140ms; }
.atraso-3 { animation-delay: 210ms; }

/* Spinner automático usado pelo JS em todos os formulários enviados. */
.carregando, [aria-busy="true"] { position: relative; pointer-events: none; cursor: progress !important; }
.carregando::before, button[aria-busy="true"]::before { display: inline-block; flex: 0 0 auto; width: 16px; height: 16px; content: ""; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: girar-carregamento .7s linear infinite; }

/* Spinner circular simples com três tamanhos. */
.carregador-circular { display: inline-block; width: 22px; height: 22px; color: var(--cor-primaria-700); border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; vertical-align: -5px; animation: girar-carregamento .7s linear infinite; }
.carregador-pequeno { width: 16px; height: 16px; border-width: 2px; }
.carregador-grande { width: 38px; height: 38px; border-width: 3px; }
.carregador-laranja { color: var(--cor-laranja); }
.carregador-branco { color: #fff; }

/* Spinner orbital para operações em pop-ups ou exclusões demoradas. */
.carregador-orbita { position: relative; display: inline-grid; width: 42px; height: 42px; color: var(--cor-primaria-700); border: 2px solid rgba(0, 102, 204, .16); border-top-color: currentColor; border-radius: 50%; place-items: center; animation: girar-carregamento .85s linear infinite; }
.carregador-orbita::after { width: 20px; height: 20px; content: ""; border: 2px solid rgba(255, 85, 0, .17); border-bottom-color: var(--cor-laranja); border-radius: 50%; animation: girar-inverso .55s linear infinite; }

/* Spinner de pontos para consultas curtas e atualização de listas. */
.carregador-pontos { display: inline-flex; min-height: 18px; align-items: center; gap: 4px; }
.carregador-pontos::before, .carregador-pontos::after, .carregador-pontos span, .carregador-pontos > i { width: 7px; height: 7px; content: ""; background: currentColor; border-radius: 50%; animation: saltar-ponto 1s ease-in-out infinite; }
.carregador-pontos span, .carregador-pontos > i { animation-delay: .14s; }
.carregador-pontos::after { animation-delay: .28s; }

/* Spinner em barras indicado para saída e sincronizações. */
.carregador-barras { display: inline-flex; height: 24px; align-items: center; gap: 3px; }
.carregador-barras::before, .carregador-barras::after, .carregador-barras span, .carregador-barras > i { width: 4px; height: 20px; content: ""; background: currentColor; border-radius: 4px; transform-origin: center; animation: barras-carregamento .8s ease-in-out infinite; }
.carregador-barras span, .carregador-barras > i { animation-delay: .12s; }
.carregador-barras::after { animation-delay: .24s; }

/* Sobreposição global opcional para qualquer operação bloqueante. */
.sobreposicao-carregamento { position: fixed; z-index: 30000; inset: 0; display: grid; padding: 20px; background: rgba(8, 25, 43, .28); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; visibility: hidden; place-items: center; transition: opacity 180ms ease, visibility 180ms ease; }
.sobreposicao-carregamento.visivel, .sobreposicao-carregamento[aria-hidden="false"] { opacity: 1; visibility: visible; }
.cartao-carregamento { display: grid; width: min(360px, calc(100vw - 32px)); padding: 25px 28px; justify-items: center; gap: 12px; color: var(--cor-texto); background: rgba(255, 255, 255, .97); border: 1px solid var(--cor-linha); border-radius: var(--raio-grande); box-shadow: var(--sombra-elevada); text-align: center; animation: crescer-suave 220ms ease both; }
.cartao-carregamento strong { font-size: 15px; }
.cartao-carregamento small { color: var(--cor-texto-suave); }

/* Carregamento local e esqueleto para cartões ou resultados de consulta. */
.area-carregando { position: relative !important; min-height: 90px; pointer-events: none; }
.area-carregando::after { position: absolute; z-index: 3; inset: 0; display: grid; content: ""; background: rgba(255, 255, 255, .72); border-radius: inherit; backdrop-filter: blur(1px); }
.area-carregando > .carregador-circular, .area-carregando > .carregador-orbita { position: absolute; z-index: 4; top: calc(50% - 19px); left: calc(50% - 19px); }
.esqueleto { position: relative; min-height: 14px; overflow: hidden; background: #e9eff1; border-radius: 7px; }
.esqueleto::after { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent); animation: deslizar-esqueleto 1.35s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}