/* ============================================================================
   a11y.css — piso de acessibilidade
   Auditoria de design 2026-08-18, Etapa 1. Ver AUDITORIA_DESIGN_2026-08-18.md §5.

   Carregado por ÚLTIMO em index.html e login.html: o projeto resolve cascata por
   source-order (docs/css-architecture.md §2), então quem vem depois vence.

   Estado anterior: 0 regras `:focus-visible` contra 20 `outline: none`,
   0 `prefers-reduced-motion` contra 236 declarações de motion,
   0 `prefers-reduced-transparency` contra 9 superfícies com backdrop-filter.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. Foco visível no teclado
   ---------------------------------------------------------------------------
   Os 20 `outline: none` do legado foram MANTIDOS de propósito: eles suprimem o
   anel no clique de mouse, que é o comportamento desejado. `:focus-visible` só
   casa quando o navegador julga que o foco veio do teclado — então esta regra
   devolve o anel a quem navega por Tab sem reintroduzir o anel no clique.

   `!important` é necessário: `.login-input:focus{outline:none}` tem
   especificidade 0-2-0 e venceria um `:focus-visible` genérico.
   -------------------------------------------------------------------------- */
:focus-visible {
    outline: 2px solid var(--accent-color, #E5F75A) !important;
    outline-offset: 2px !important;
}

/* Sobre superfície lima (botão primário), o anel lima some — inverte para escuro. */
.btn-primary:focus-visible,
.dm-btn-primary:focus-visible,
.modal-btn-primary:focus-visible,
.login-button:focus-visible,
.lg-btn-primary:focus-visible {
    outline-color: var(--bg-primary, #000) !important;
    outline-offset: 3px !important;
}

/* Elementos com overflow oculto precisam do anel para fora, senão ele é cortado. */
.menu-link:focus-visible,
.app-menu a:focus-visible {
    outline-offset: -2px !important;
}

/* Link "pular para o conteúdo" — só aparece quando focado pelo teclado. */
.a11y-skip-link {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -150%);
    z-index: 2147483646;
    padding: 0.625rem 1.25rem;
    background: var(--accent-color, #E5F75A);
    color: #000;
    font-weight: 600;
    font-size: 0.875rem;
    border-radius: 0 0 0.75rem 0.75rem;
    text-decoration: none;
    transition: transform 150ms ease-out;
}
.a11y-skip-link:focus {
    transform: translate(-50%, 0);
}

/* ---------------------------------------------------------------------------
   2. Movimento reduzido
   ---------------------------------------------------------------------------
   Não é "sem feedback" — é feedback sem vestíbulo. Opacidade e cor continuam
   comunicando; deslocamento, escala e loop infinito param.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 150ms !important;
        transition-timing-function: linear !important;
        scroll-behavior: auto !important;
    }

    /* Cross-fade no lugar de deslocar/escalar. */
    .modal-overlay .modal-content,
    .modal-content,
    .view-animate-in,
    .apple-toast,
    .rel-panel,
    .metric-menu-dropdown {
        transform: none !important;
    }

    /* Loops infinitos: 5 nuvens borradas em movimento no login (css/login.css:141),
       shimmer de progresso e spinners. O spinner precisa continuar girando para
       comunicar "carregando", mas mais devagar. */
    .login-clouds,
    .login-cloud {
        animation: none !important;
        opacity: 0.35 !important;
    }
    .apple-progress-fill::after,
    .skeleton,
    [class*="shimmer"] {
        animation: none !important;
    }
    [class*="spinner"],
    .uil-spinner {
        animation-duration: 1.5s !important;
        animation-iteration-count: infinite !important;
    }
}

/* ---------------------------------------------------------------------------
   3. Transparência reduzida
   ---------------------------------------------------------------------------
   9 superfícies usam backdrop-filter. Quem pede menos transparência recebe
   fundo sólido — inclusive porque o tema claro empilha vidro sobre vidro.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-transparency: reduce) {
    .app-menu,
    .app-header__pill,
    .app-header__cluster > *,
    .apple-toast,
    .modal-overlay.show,
    .modal-content {
        background: var(--bg-secondary) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

/* ---------------------------------------------------------------------------
   4. Contraste elevado
   -------------------------------------------------------------------------- */
@media (prefers-contrast: more) {
    .app-header__pill,
    .card,
    .modal-content,
    .app-menu {
        background: var(--bg-secondary) !important;
        border: 1px solid var(--text-secondary) !important;
        backdrop-filter: none !important;
    }
    :focus-visible {
        outline-width: 3px !important;
    }
}

/* ---------------------------------------------------------------------------
   5. Utilitário para leitor de tela
   -------------------------------------------------------------------------- */
.a11y-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================================
   Titulo da view (2026-08-18, reposicionado em 2026-08-21)
   ----------------------------------------------------------------------------
   O bloco de titulo dentro de cada view ocupava ~110px de altura em largura
   total para exibir duas linhas de texto, enquanto a faixa ao lado do seletor
   de cliente ficava vazia. O titulo passa para la; o conteudo recupera a
   altura. Preenchido por showView() em public/js/main.js.

   2026-08-21: era `position: fixed` com o `left` medido em runtime. Isso deixava
   o titulo solto e por cima da sidebar em dois momentos: (1) antes de a medicao
   rodar, o fallback de 17rem = 272px cai DENTRO da sidebar expandida (244px +
   2rem = 276px); (2) durante a animacao de recolher, a medicao ficava velha.
   Agora ele e o primeiro elemento EM FLUXO do .app-content, irmao do
   #main-content — herda a mesma borda esquerda sem medir nada e nao tem como
   invadir o menu.
   ========================================================================== */
.app-content__title {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-height: 2.6875rem;             /* mesma altura das pills do cluster */
    /* Mesmo topo do cluster flutuante. NAO somar --hub-env-banner-h aqui: a
       faixa de ambiente e fixed + `body{padding-top}`, entao o .app-content ja
       nasce abaixo dela (so os elementos fixed precisam do deslocamento). */
    margin-top: 0.75rem;
    /* 2,5rem = 1rem do #main-content + 1,5rem do padding lateral das views, que
       e o valor usado por Documentos, Relatorios, Clientes, Gestao de Dados,
       Analises Estrategicas, Analise de Credito, Bot BPO, Lancamentos e Gerador.
       Constante de proposito: a versao anterior media a borda do conteudo da view
       ativa e reaplicava o valor nos reapply de showView (120/400/1000/2200ms),
       entao o titulo se mexia ate assentar — e, pior, mudava de lugar a cada tela.
       Como faixa de topo ele tem de ficar SEMPRE no mesmo x. Fica 8px a direita no
       CRM (padding 1rem) e 24px a direita do conteudo da DRE (sem padding). */
    padding-left: 2.5rem;
    padding-right: 1rem;
    /* Reserva a faixa direita do cluster flutuante (seletor de cliente + 2
       icones ~19rem); o texto elipsa antes de encostar nele. */
    max-width: max(12rem, calc(100% - 19rem));
    font-size: var(--ds-text-xl, 1.25rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

/* Antes da primeira navegacao o elemento esta vazio: sem isto ele reservaria
   os ~43px de altura mostrando nada. */
.app-content__title:empty { display: none; }

/* O #main-content reserva no topo a altura das pills flutuantes (4.25rem).
   Com o titulo em fluxo ocupando essa faixa, a reserva viraria espaco morto —
   o conteudo desceria ~3rem. Vale so onde o titulo aparece (>1024px);
   a11y.css e o ultimo stylesheet, entao vence a regra base do index.html. */
@media (min-width: 1025px) {
    #main-content { padding-top: 0.75rem; }
    /* Sem titulo (view sem entrada em TITULOS) a reserva original volta. */
    .app-content__title:empty + #main-content { padding-top: 4.25rem; }
}

/* Em telas onde o cluster ja disputa espaco, o titulo sai de cena:
   a navegacao ativa no menu ja diz onde o usuario esta. */
@media (max-width: 1024px) {
    .app-content__title { display: none; }
}

/* O bloco de titulo redundante dentro da view. Aplicado por showView() apenas
   ao padrao conhecido (h2.text-2xl.font-bold + <p> irmao), preservando
   cabecalhos customizados como o da DRE. */
.view-title-hoisted { display: none !important; }

/* Com o titulo no header, o container da view nao precisa mais do padding de
   topo que existia para separar o bloco de titulo do topbar — senao a linha de
   acoes fica sozinha numa faixa vazia. */
.view-title-hoisted-parent {
    padding-top: 0.5rem !important;
}