/* ==========================================================================
   Movimento geral do sistema (usado pelo app e pelo Importador).
   Só transições: não mexe em cores, tamanhos nem layout.
   - Janelas (modais) abrem com fade e um leve zoom.
   - Botões e campos respondem ao mouse e ao clique.
   Quem pede "reduzir movimento" no sistema não recebe nada disso.
   ========================================================================== */
/* Padrões de movimento e camadas (use estas variáveis em vez de números soltos). */
:root {
    --mov-rapida: 120ms;
    --mov-normal: 200ms;
    --mov-lenta: 320ms;
    --mov-entrada: cubic-bezier(0.16, 1, 0.3, 1);
    --mov-saida: cubic-bezier(0.4, 0, 1, 1);
    --z-gaveta: 70;
    --z-visor: 90;
    --z-arquivo: 120;   /* visor de arquivo em tela cheia (ts/ui/visor-arquivo.ts): acima de gavetas e visores, abaixo dos diálogos */
    --z-dialogo: 10000;
}

@media (prefers-reduced-motion: no-preference) {
    @keyframes mov-fundo { from { opacity: 0; } to { opacity: 1; } }
    @keyframes mov-janela {
        from { opacity: 0; transform: translateY(10px) scale(0.97); }
        to { opacity: 1; transform: none; }
    }
    /* Janela centralizada: o fundo escuro aparece e o painel sobe um pouco. */
    .fixed.inset-0.flex.items-center.justify-center:not([data-sem-movimento]) {
        animation: mov-fundo 160ms ease-out;
    }
    .fixed.inset-0.flex.items-center.justify-center:not([data-sem-movimento]) > div:first-child {
        animation: mov-janela 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    /* Botões: cor/sombra suaves e um leve afundar ao clicar (a propriedade "scale" não briga com translate dos botões). */
    button, [role="button"], summary {
        transition-property: background-color, color, border-color, box-shadow, opacity, scale;
        transition-duration: 160ms;
        transition-timing-function: ease;
    }
    button:not(:disabled):active, [role="button"]:active {
        scale: 0.97;
    }
    input, select, textarea {
        transition: box-shadow 160ms ease, border-color 160ms ease, background-color 160ms ease;
    }

    /* Janelas abertas por window.janela (ts/ui/janelas.ts): entrada só na abertura (.mov-entrando) e saída animada (.mov-saindo). */
    @keyframes mov-fundo-sai { from { opacity: 1; } to { opacity: 0; } }
    @keyframes mov-gaveta-entra { from { transform: translateX(100%); } to { transform: none; } }
    @keyframes mov-gaveta-sai { from { transform: none; } to { transform: translateX(100%); } }
    @keyframes mov-janela-sai { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(8px) scale(0.97); } }
    .mov-entrando { animation: mov-fundo var(--mov-normal) ease-out; }
    .mov-entrando[data-mov="gaveta"] > :first-child { animation: mov-gaveta-entra var(--mov-lenta) var(--mov-entrada); }
    .mov-saindo { animation: mov-fundo-sai var(--mov-rapida) ease-in forwards !important; pointer-events: none; }
    .mov-saindo[data-mov="gaveta"] > :first-child { animation: mov-gaveta-sai var(--mov-normal) var(--mov-saida) forwards !important; }
    .mov-saindo[data-mov="modal"] > :first-child { animation: mov-janela-sai var(--mov-rapida) var(--mov-saida) forwards !important; }
    .mov-saindo[data-mov="gaveta"][data-arrastado] > :first-child { animation: none !important; }   /* fechada arrastando: o painel já saiu */

    /* Listas de cartões (.lista-viva): os itens entram em cascata curta. Só "backwards": depois da entrada não sobra
       transform nenhum (hover e janelas fixas dentro do cartão seguem iguais). */
    @keyframes mov-item { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
    .lista-viva > * { animation: mov-item var(--mov-normal) var(--mov-entrada) backwards; }
    .lista-viva > :nth-child(2) { animation-delay: 30ms; }
    .lista-viva > :nth-child(3) { animation-delay: 60ms; }
    .lista-viva > :nth-child(4) { animation-delay: 90ms; }
    .lista-viva > :nth-child(5) { animation-delay: 120ms; }
    .lista-viva > :nth-child(6) { animation-delay: 150ms; }
    .lista-viva > :nth-child(n+7) { animation-delay: 180ms; }

    /* Confirmação: o ✓ do "Salvo" e o ícone do aviso de sucesso dão um pulinho. */
    @keyframes mov-ok { 0% { transform: scale(0.4); opacity: 0; } 60% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(1); } }
    .mov-ok { display: inline-block; animation: mov-ok 320ms var(--mov-entrada); }

    /* Troca de aba: a tela que aparece (tira o "hidden") entra com um fade curto. Só opacidade, para não criar caixa de posicionamento (iframe do Importador, mapas e janelas fixas seguem iguais). */
    @keyframes mov-aba { from { opacity: 0; } to { opacity: 1; } }
    [id^="content"]:not(.hidden):not([data-sem-movimento]) { animation: mov-aba var(--mov-normal) ease-out; }
}

/* Lista ainda vazia (antes do primeiro desenho): mostra um cartão-esqueleto pulsando. Lista sem resultado recebe o
   htmlVazio, então o esqueleto só aparece enquanto carrega. Cor translúcida: serve no tema claro e no escuro. */
.lista-viva:empty::before {
    content: "";
    display: block;
    grid-column: 1 / -1;
    height: 5.5rem;
    border-radius: 1rem;
    background: rgba(148, 163, 184, 0.22);
}
@media (prefers-reduced-motion: no-preference) {
    @keyframes mov-pulso { 50% { opacity: 0.45; } }
    .lista-viva:empty::before { animation: mov-pulso 1.4s ease-in-out infinite; }
}

/* Foco visível ao navegar pelo teclado (Tab): anel dourado com contorno azul, legível em fundo claro e escuro. Campos de texto já têm o seu. */
:is(button, a[href], summary, [role="button"], [tabindex]:not([tabindex="-1"], input, select, textarea)):focus-visible {
    outline: 2px solid #152e50;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #fac043;
}

/* Celular: botões pequenos ganham área de toque de 40 px sem mudar o layout (a área extra é invisível). */
@media (pointer: coarse) {
    button:is(.w-6, .w-7, .w-8, .h-6, .h-7, .h-8):not(.absolute, .fixed, .sticky) { position: relative; }
    button:is(.w-6, .w-7, .w-8, .h-6, .h-7, .h-8)::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: max(100%, 40px);
        height: max(100%, 40px);
        transform: translate(-50%, -50%);
    }
}