/* ============================================================================
   Design tokens do Portal de Ferramentas — Suporte Maplink
   ============================================================================

   ESTE É O ÚNICO ARQUIVO QUE MUDA NA TROCA DE IDENTIDADE VISUAL.

   Nenhuma página deve escrever cor literal (#hex, rgb()) no CSS ou no HTML.
   Todas consomem as variáveis daqui. Trocar a marca = editar este arquivo.

   FONTE DAS CORES: o CSS de maplink.global
   ----------------------------------------------------------------------------
   Os valores de marca vêm dos custom properties do site institucional, para o
   portal usar exatamente as cores dele:

     --color-brand-purple #4b007f · --color-brand-purple-light #a74ff3
     --color-navy #1c1c1c · --color-ink #161616 · --color-surface #f2f2f2
     --color-line #e6eaf2 · laranja #ff6700 · laranja escuro #e65d00

   Havia três fontes concorrendo (o SVG da logo dava roxo #45008E, a paleta
   Platform dava laranja #F66516, e o site dá #4b007f/#ff6700). O site ganhou
   por ser sistema vivo e mantido, e por já concordar com a paleta Platform no
   preto #161616 e no azul #0092e1.

   Grupos de cor definidos, na ordem em que aparecem:

     1. MARCA — `--brand`, `--brand-solid`, `--action-bg`, `--accent`, degradês.
        É o que a interface consome.
     2. PALETA PLATFORM — `--brand-orange-primary`, `--brand-blue-accent`, ...
        Definidos e disponíveis, sem componente consumindo. Tabela de
        correspondência com o grupo 1 no fim daquele bloco.
     3. NEUTROS e STATUS.

   Depois do `:root` vem o bloco TEMA ESCURO, que redefine o necessário.

   ----------------------------------------------------------------------------
   REGRA DE USO DO LARANJA — é acessibilidade, não preferência
   ----------------------------------------------------------------------------
   Contraste medido (WCAG 2.1), e ele INVERTE entre os temas:

     laranja #FF6700 sobre branco ......... 2.92:1  REPROVA (mínimo 4.5:1 para
                                              texto, e 3.0:1 até para texto grande)
     branco sobre laranja #FF6700 ......... 2.92:1  REPROVA
     roxo #4B007F sobre branco ............ 13.08:1 AAA
     laranja #FF6700 sobre o card escuro .. 5.18:1  AA
     roxo #4B007F sobre o card escuro ..... 1.01:1  REPROVA

   No TEMA CLARO: o roxo carrega a interface (texto, botões, links, foco) e o
   laranja é só decoração — degradê, ladrilho de ícone, faixa de acento. Isso é
   coerente com a própria logo, em que o wordmark é roxo e o símbolo é laranja.
   Se precisar de laranja legível em texto claro, use --accent-text (#BF4D00,
   4.91:1) — nunca --accent.

   No TEMA ESCURO isso vira do avesso: o laranja passa a servir como texto e o
   roxo profundo deixa de servir. Por isso a cor de ação (--brand) clareia no
   escuro, e existem tokens separados para superfície de marca (--brand-solid) e
   para botão primário (--action-bg): no escuro o botão precisa saltar do card
   enquanto o card destacado precisa recuar, o que um token único não resolve.
   ============================================================================ */

/* Outfit — fonte oficial da marca. Pesos: 400 regular, 500 medium, 600 semibold,
   700 bold. `display=swap` pra não bloquear a renderização do texto. */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap');

:root {
  /* -------------------------------------------------------------- tipografia */
  --font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
               'Liberation Mono', monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ------------------------------------------------------------------ marca
     Valores extraídos dos custom properties do CSS de maplink.global, para o
     portal usar exatamente as cores do site institucional:

       --color-brand-purple        #4b007f
       --color-brand-purple-600    #3d0068
       --color-brand-purple-light  #a74ff3
       --color-navy                #1c1c1c
       --color-ink                 #161616
       --color-surface             #f2f2f2
       --color-line                #e6eaf2

     O roxo carrega a interface no tema claro: 13.08:1 sobre branco (AAA). */
  --brand:           #4B007F;
  --brand-dark:      #3D0068;   /* hover — o purple-600 deles */
  --brand-darker:    #2E004E;   /* active */
  --brand-light:     #A74FF3;   /* purple-light deles; decoração no tema claro */
  --brand-contrast:  #FFFFFF;

  /* Dois papeis distintos, e a diferenca so aparece no tema escuro:
       --brand        cor de ACAO (texto, link, foco) — precisa contrastar com o
                      FUNDO, entao no escuro ela CLAREIA;
       --brand-solid  cor de SUPERFICIE de marca (botao primario, card destacado) —
                      segue roxo profundo nos dois temas, com texto claro em cima.
     Sem essa separacao, um `--brand` unico teria que ser claro e escuro ao mesmo
     tempo. */
  --brand-solid:     #4B007F;
  --on-brand-solid:  #FFFFFF;   /* 13.08:1 sobre --brand-solid, AAA */

  /* Botão primário — separado de --brand-solid porque no tema escuro os dois
     papéis divergem: o BOTÃO precisa saltar do card (ficar mais claro que ele) e
     a SUPERFÍCIE de marca precisa recuar (ficar mais escura). Com um token só, um
     dos dois sai errado: no escuro o botão ficava #3D0068 contra um card #262626,
     ou seja 1.01:1 — luminância praticamente idêntica, e deixava de parecer botão. */
  --action-bg:       #4B007F;
  --action-bg-hover: #3D0068;
  --on-action:       #FFFFFF;   /* 13.08:1 */
  --brand-tint:      #F1EBF6;   /* fundo suave (roxo a 8%) */
  --brand-tint-2:    #E2D6EC;   /* hover do fundo suave (roxo a 16%) */

  /* Laranja oficial. No tema CLARO é decoração apenas (2.92:1 sobre branco).
     No tema ESCURO ele passa a servir como texto — ver o bloco do tema escuro. */
  --accent:          #FF6700;
  --accent-deep:     #E65D00;   /* o laranja escuro que o site usa */
  --accent-tint:     #FFF0E6;
  /* Único laranja legível como texto sobre branco (4.91:1, AA). */
  --accent-text:     #BF4D00;

  /* Degradê de ELEMENTO: roxo -> laranja, 120deg com duas paradas. Esta é a
     convenção do site (`linear-gradient(120deg,#4b007f,#ff6700)`), e não uma
     escolha nossa. Vale para cabeçalho de marca, ladrilho de ícone e barra de
     progresso — nunca atrás de texto de leitura, porque a ponta laranja reprova
     em contraste. */
  --grad-from:  #4B007F;
  --grad-to:    #FF6700;
  --grad-brand: linear-gradient(120deg, var(--grad-from), var(--grad-to));

  /* Degradê de FUNDO DE PÁGINA. No site é outro degradê, escuro
     (`linear-gradient(#181129fc 0%,#080612 100%)`) — é o "preto" da identidade.
     Aqui o tema claro recebe uma versão suave, com o mesmo eixo roxo->laranja,
     clara o suficiente para texto escuro continuar legível em cima. */
  /* Tres paradas: lilas -> rosa claro -> pessego. O eixo roxo->laranja da marca,
     mas em tom claro o suficiente para texto ESCURO continuar legivel em cima —
     inclusive fora dos cards (rotulo de secao, footnote).
     Parada mais escura: #FFDFC2. Contra ela, --fg da 14.29:1 e o --fg-muted
     escurecido abaixo da 4.63:1. */
  --grad-page: linear-gradient(160deg, #EDE3F7 0%, #F7E9F3 40%, #FFDFC2 100%);

  /* ==========================================================================
     PALETA PLATFORM  (ecossistema "Platform")
     ==========================================================================
     Grupo de tokens próprio, separado da marca Maplink Cloud acima. Os seis
     valores abaixo são os oficiais da paleta; o resto do bloco é derivado deles
     (estados de interação, fundos suaves e variantes legíveis em texto).

     Nenhum componente deste portal consome estes tokens ainda — eles estão aqui
     disponíveis para uso. Ver a nota "Platform x Maplink Cloud" no fim do bloco.

     ----------------------------------------------------------------------
     CONTRASTE MEDIDO (WCAG 2.1) — decide o que cada cor pode ser
     ----------------------------------------------------------------------
       token                  em branco        em --brand-black
       brand-orange-primary    3.09:1  reprova   5.85:1  AA
       brand-orange-light      2.05:1  reprova   8.82:1  AAA
       brand-blue-accent       3.39:1  reprova   5.34:1  AA
       brand-gray-light        1.30:1  reprova  13.97:1  AAA
       brand-gray-medium       4.19:1  reprova   4.31:1  reprova
       brand-black            18.10:1  AAA           —

     Duas consequências que mudam como a paleta se usa:

     1. **Texto branco reprova sobre TODAS as cores Platform** (o melhor caso é
        3.39:1, no azul). Sobre preenchimento colorido desta paleta o texto é
        `--brand-black` — que passa AA ou AAA em todos eles. Isso é o inverso do
        padrão do roxo Maplink Cloud, onde o texto sobre a marca é branco.

     2. **Três tokens não servem para texto corrido em branco**, justamente os que
        alguém tenderia a usar para isso:
          - `--brand-blue-accent` (3.39:1) é a cara de uma cor de link, e reprova.
          - `--brand-gray-medium` (4.19:1) é a cara de um texto secundário, e fica
            pouco abaixo do mínimo de 4.5:1 — reprova por pouco, mas reprova.
          - `--brand-orange-primary` (3.09:1) só passa em texto grande.
        Para cada um existe a variante `-strong`, que é o mesmo matiz escurecido
        até passar AA. Use a `-strong` em texto e a base em preenchimento.

     Regra curta: **base = preenchimento, `-strong` = texto, `--brand-black` = texto
     sobre preenchimento.**
     ========================================================================== */

  /* ------------------------------------------------- Platform: oficiais */
  --brand-orange-primary:  #F66516;
  --brand-orange-light:    #FCA105;
  --brand-blue-accent:     #0092E1;
  --brand-gray-light:      #E2E2E2;
  --brand-gray-medium:     #7F7B78;
  --brand-black:           #161616;

  /* --------------------------------- Platform: variantes legíveis em texto
     Mesmo matiz e saturação, escurecidos até 4.5:1 sobre branco (AA). */
  --brand-orange-primary-strong: #C75212;  /* 4.52:1 */
  --brand-orange-light-strong:   #A56A03;  /* 4.50:1 */
  --brand-blue-accent-strong:    #007CC0;  /* 4.52:1 */
  --brand-gray-medium-strong:    #7A7673;  /* 4.50:1 */

  /* ------------------------------------ Platform: estados de interação */
  --brand-orange-primary-hover:  #D85913;
  --brand-orange-primary-active: #BB4D11;
  --brand-blue-accent-hover:     #0080C6;
  --brand-blue-accent-active:    #006FAB;

  /* ----------------------------------------- Platform: fundos suaves */
  --brand-orange-primary-tint:   #FEF3EC;  /* laranja a 8% sobre branco */
  --brand-orange-primary-tint-2: #FEE9DE;  /* laranja a 14% */
  --brand-blue-accent-tint:      #EBF6FD;  /* azul a 8% */
  --brand-blue-accent-tint-2:    #DBF0FB;  /* azul a 14% */

  /* ------------------------------------------------- Platform: apoio
     Cor de texto a usar sobre qualquer preenchimento Platform. Existe como token
     próprio para que o componente não precise saber que "é o preto": se a regra
     mudar, muda aqui. */
  --brand-on-platform: var(--brand-black);

  /* Anel de foco e sombra em cima do laranja Platform. */
  --brand-platform-focus-ring: 0 0 0 3px rgba(246, 101, 22, 0.35);
  --brand-platform-shadow:     0 8px 25px rgba(246, 101, 22, 0.30);

  /* Degradê laranja principal -> laranja claro.
     ATENÇÃO: derivado, NÃO vem de manual de marca. Os dois laranjas são oficiais,
     mas a combinação em degradê é escolha nossa. Confirmar antes de usar em peça
     que saia do time. */
  --grad-platform: linear-gradient(45deg,
                     var(--brand-orange-primary) 0%,
                     var(--brand-orange-light) 100%);

  /* ----------------------------------------------------------------------
     Platform x Maplink Cloud — os dois grupos coexistem
     ----------------------------------------------------------------------
     Alguns papéis se sobrepõem entre as duas paletas, com valores próximos mas
     diferentes. Se algum dia a interface migrar para a Platform, é aqui que a
     correspondência precisa ser decidida — não dá pra trocar por engano:

       papel            Platform            interface hoje
       laranja          #F66516 (3.09:1)    #FF6700 (2.92:1)  --accent
       texto principal  #161616 (18.10:1)   #1F2937 (14.68:1) --fg
       linha/borda      #E2E2E2 (1.30:1)    #E2E8F0 (1.23:1)  --line
       texto secundário #7F7B78 (4.19:1)    #6B7280 (4.83:1)  --fg-muted

     Nota sobre o texto secundário: o `--fg-muted` atual passa AA (4.83:1) e o
     `--brand-gray-medium` não (4.19:1). Uma migração direta de um para o outro
     REBAIXA a acessibilidade do portal — nesse caso o certo é
     `--brand-gray-medium-strong`.
     ---------------------------------------------------------------------- */

  /* ---------------------------------------------------------------- neutros
     Também do site: surface #f2f2f2, ink #161616, line #e6eaf2. */
  --bg:            #F2F2F2;   /* --color-surface deles */
  --surface:       #FFFFFF;
  /* Superficie translucida: e por ela que o degrade aparece atraves dos cards.
     O fundo efetivo do texto passa a ser a COMPOSICAO do card com o degrade, e e
     essa composicao que precisa passar AA. Sobre a parada mais escura do degrade
     (#FFDFC2), a 50% da: fundo efetivo #FFEFE0, --fg 16.09:1, --fg-muted 5.21:1. */
  --surface-glass: rgba(255, 255, 255, 0.50);

  /* Degradê dos cards de ferramenta: roxo -> vinho, translúcido a 78%.
     Para em 30% do caminho até o laranja porque é onde o contraste ainda passa —
     ver a nota do bloco .tool. Na pior composição (sobre a parada mais clara do
     fundo): título 5.70:1, descrição 4.81:1. */
  --grad-tool: linear-gradient(120deg,
                 rgba(75, 0, 127, 0.78),
                 rgba(129, 31, 89, 0.78));
  --surface-2:     #EEF1F7;   /* --color-line-2 deles */
  --line:          #E6EAF2;   /* --color-line deles */
  --line-strong:   #CBD5E1;

  --fg:            #161616;   /* --color-ink deles — 18.10:1, AAA */
  /* Escurecido de #6A7282 para sustentar o degrade forte: o texto fora dos cards
     (rotulo de secao, footnote) fica DIRETO sobre o degrade, e ali #6A7282 dava
     3.82:1 e reprovava. Agora da 4.63:1 sobre a pior parada e 5.86:1 no card. */
  --fg-muted:      #5E6573;
  --fg-subtle:     #99A1AF;
  --fg-on-brand:   var(--on-brand-solid);

  /* Logo a usar no tema atual. As páginas apontam para var(--logo-src) via
     content/background, ou o portal.js troca o src — assim a troca de tema não
     deixa a logo preta sobre fundo escuro. */
  --logo-variante: 'preto';

  /* ----------------------------------------------------------- status/estado
     Semântica das ferramentas de pedágio:
       ok      = CORRETO (HML == PROD) / ANTT existe na Movemais
       erro    = ERRADO (valores diferentes) / ANTT divergente
       alerta  = SEM VALOR / DESCONHECIDO (não deu pra comparar)
       neutro  = ainda não processado                                        */
  --ok:            #15803D;
  --ok-bg:         #F0FDF4;
  --ok-line:       #BBF7D0;

  --erro:          #B91C1C;
  --erro-bg:       #FEF2F2;
  --erro-line:     #FECACA;

  --alerta:        #A16207;
  --alerta-bg:     #FEFCE8;
  --alerta-line:   #FEF08A;

  --info:          #1D4ED8;
  --info-bg:       #EFF6FF;
  --info-line:     #BFDBFE;

  /* --------------------------------------------------------------- espaço */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;

  /* --------------------------------------------------------------- formas */
  --radius-sm: 0.375rem;
  --radius:    0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;

  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow:    0 4px 12px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.12);
  /* Sombra colorida do card em degradê. Puxa pro laranja, que é o que domina
     visualmente no degradê. */
  --shadow-brand: 0 8px 25px rgba(255, 103, 0, 0.32);

  --focus-ring: 0 0 0 3px rgba(75, 0, 127, 0.40);

  --transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================================
   TEMA ESCURO
   ============================================================================
   Duas portas de entrada, de proposito:

     @media (prefers-color-scheme: dark)  -> respeita a preferencia do sistema
     [data-theme="dark"]                  -> a escolha explicita no botao vence

   O `:root:not([data-theme="light"])` dentro do media query e o que permite
   forcar o tema claro mesmo com o sistema no escuro. O bloco `[data-theme="dark"]`
   depois garante o inverso.

   Base: --color-navy #1c1c1c do site. O card fica um degrau acima (#262626); a
   separacao entre os dois e baixa de proposito (1.2:1), entao quem desenha a
   borda e --line, e nao o contraste de fundo.

   O QUE INVERTE NO ESCURO
   -----------------------
   - O roxo #4b007f cai para 1.30:1 e deixa de servir como cor de acao. Entra o
     purple-light clareado #CC99F8 (6.30:1). A superficie de marca segue roxo
     profundo (--brand-solid), com texto claro.
   - O laranja #FF6700 SOBE para 4.78:1 e passa a servir como texto — no tema
     claro ele era so decoracao.
   - O hover do roxo CLAREIA em vez de escurecer; escurecer no escuro reduziria
     contraste em vez de aumentar.
   - O fundo de pagina vira o degrade escuro do proprio site (#181129 -> #080612),
     que e o "preto" da identidade.
   ============================================================================ */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg:            #1C1C1C;
    --surface:       #262626;
  /* Sobre a parada mais clara do degrade escuro (#2A1445), a 58% da fundo
     efetivo #281E33: --fg 14.17:1, --fg-muted 7.65:1, laranja 5.43:1. */
  --surface-glass: rgba(38, 38, 38, 0.58);
  --grad-tool: linear-gradient(120deg,
                 rgba(61, 0, 104, 0.78),
                 rgba(119, 31, 73, 0.78));
    /* Sobre a parada mais clara do degrade escuro (#2A1445), a 58% da fundo
       efetivo #281E33: --fg 14.17:1, --fg-muted 7.65:1, laranja 5.43:1. */
    --surface-glass: rgba(38, 38, 38, 0.58);
    --grad-tool: linear-gradient(120deg,
                   rgba(61, 0, 104, 0.78),
                   rgba(119, 31, 73, 0.78));
    --surface-2:     #2F2F2F;
    --line:          #383838;
    --line-strong:   #4A4A4A;

    --fg:            #F2F2F2;
    --fg-muted:      #B4B4B4;
    --fg-subtle:     #8A8A8A;

    --brand:         #CC99F8;
    --brand-dark:    #DDB5FA;
    --brand-darker:  #EBD3FC;
    --brand-light:   #A74FF3;
    --brand-tint:    #2A1B3D;
    --brand-tint-2:  #382550;

    --brand-solid:     #3D0068;
    --on-brand-solid:  #F2F2F2;
    --brand-contrast:  #F2F2F2;

    /* No escuro o botão CLAREIA e o texto nele fica escuro. É o purple-light do
       site (#A74FF3) clareado UM passo, mesmo matiz (272°): no valor original o
       texto escuro dava 4.36:1 e reprovava AA por pouco.
         texto #161616 sobre o botão : 4.64:1  (mínimo 4.5)
         botão contra o card #262626 : 3.88:1  (mínimo 3.0 p/ limite de componente) */
    --action-bg:       #AB56F5;
    --action-bg-hover: #C065FF;
    --on-action:       #161616;

    --accent:        #FF6700;
    --accent-deep:   #FF8534;
    --accent-tint:   #3A1F0C;
    --accent-text:   #FF8534;

    --ok:      #4ADE80;  --ok-bg:      #10281A;  --ok-line:      #1F5133;
    --erro:    #F87171;  --erro-bg:    #2E1414;  --erro-line:    #5C2626;
    --alerta:  #FBBF24;  --alerta-bg:  #2C2008;  --alerta-line:  #574010;
    --info:    #60A5FA;  --info-bg:    #101F33;  --info-line:    #1E3D66;

    /* Roxo -> quase preto -> marrom quente. Mesmo eixo do tema claro,
       na escala escura do site. */
    --grad-page: linear-gradient(160deg, #2A1445 0%, #12081F 55%, #331608 100%);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow:    0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
    --focus-ring: 0 0 0 3px rgba(204, 153, 248, 0.45);
  }
}

/* Escolha explicita no botao — repete os mesmos valores para vencer em qualquer
   preferencia de sistema. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:            #1C1C1C;
  --surface:       #262626;
  --surface-2:     #2F2F2F;
  --line:          #383838;
  --line-strong:   #4A4A4A;

  --fg:            #F2F2F2;
  --fg-muted:      #B4B4B4;
  --fg-subtle:     #8A8A8A;

  --brand:         #CC99F8;
  --brand-dark:    #DDB5FA;
  --brand-darker:  #EBD3FC;
  --brand-light:   #A74FF3;
  --brand-tint:    #2A1B3D;
  --brand-tint-2:  #382550;

  --brand-solid:     #3D0068;
  --on-brand-solid:  #F2F2F2;
  --brand-contrast:  #F2F2F2;

  /* Ver a nota do bloco acima: botão clareia, texto nele escurece. */
  --action-bg:       #AB56F5;
  --action-bg-hover: #C065FF;
  --on-action:       #161616;

  --accent:        #FF6700;
  --accent-deep:   #FF8534;
  --accent-tint:   #3A1F0C;
  --accent-text:   #FF8534;

  --ok:      #4ADE80;  --ok-bg:      #10281A;  --ok-line:      #1F5133;
  --erro:    #F87171;  --erro-bg:    #2E1414;  --erro-line:    #5C2626;
  --alerta:  #FBBF24;  --alerta-bg:  #2C2008;  --alerta-line:  #574010;
  --info:    #60A5FA;  --info-bg:    #101F33;  --info-line:    #1E3D66;

  /* Roxo -> quase preto -> marrom quente. Mesmo eixo do tema claro,
     na escala escura do site. */
  --grad-page: linear-gradient(160deg, #2A1445 0%, #12081F 55%, #331608 100%);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow:    0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
  --focus-ring: 0 0 0 3px rgba(204, 153, 248, 0.45);
}

/* ============================================================================
   Reset e base
   ============================================================================ */

*,
*::before,
*::after { box-sizing: border-box; }

/* O atributo `hidden` tem que vencer qualquer `display` de componente.
   ===========================================================================
   O navegador esconde `[hidden]` com um `display: none` que vem da folha de
   estilo DELE (user agent). Qualquer `display` declarado aqui, na folha do
   autor, ganha dessa regra por precedência de origem — não por especificidade.

   Então `.gate { display: grid }` fazia o `<div id="gate" hidden>` continuar
   visível, e o gate nunca saía da frente depois do login. O mesmo valia para
   `.btn`, `.progress`, `.summary` e `.alert`.

   O `!important` aqui é proposital: garante que o comportamento continue certo
   mesmo que alguém declare `display` num componente novo mais adiante no
   arquivo. Para mostrar/esconder, use `el.hidden = true/false` — nunca
   `el.style.display`, que voltaria a criar o mesmo conflito. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: var(--weight-bold);
  line-height: 1.25;
}

p { margin: 0; }

img { max-width: 100%; height: auto; }

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-dark); }

/* Foco visível só para navegação por teclado — não aparece no clique de mouse. */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* Acessível a leitor de tela, invisível na tela. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================================
   Layout
   ============================================================================ */

.page {
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--space-5) var(--space-4) var(--space-8);
}

.page--narrow { max-width: 56rem; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--space-6);
}

.topbar__brand { display: flex; align-items: center; gap: var(--space-3); }

/* O logo é trocado por arquivo, não por CSS. A altura fixa evita o "salto" de
   layout enquanto o SVG carrega. */
.topbar__logo { height: 2rem; width: auto; object-fit: contain; }

.topbar__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--fg);
}

.breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--brand);
  margin-bottom: var(--space-5);
}

.pagehead { margin-bottom: var(--space-6); }
.pagehead__title { font-size: var(--text-2xl); color: var(--fg); }
.pagehead__sub {
  margin-top: var(--space-2);
  color: var(--fg-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  max-width: 60ch;
}

/* ============================================================================
   Cards de ferramenta (grid do hub)
   ============================================================================ */

.tools {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--space-4);
}

/* Card de ferramenta — os três são idênticos: roxo translúcido em degradê.
   ===========================================================================
   O degradê vai de roxo a vinho, e NÃO chega ao laranja. Isso não é escolha
   estética, é o limite medido: o card é translúcido, então o fundo do texto é a
   composição (card sobre degradê da página), e ela varia ao longo do card. Com o
   card a 78% sobre a parada mais clara do fundo, andando de #4B007F na direção
   de #FF6700:

     30% do caminho (#811F59) -> título 5.70:1, descrição 4.81:1   ok
     40% do caminho (#93294C) -> título 5.04:1, descrição 4.30:1   REPROVA
     100% (laranja puro)      -> título 2.46:1                     REPROVA

   Então o card para em 30%, com margem. O laranja da marca aparece onde não há
   texto de leitura em cima: o ladrilho do ícone, a faixa de acento e o fundo da
   página. */
.tool {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  /* Translúcido, para o degradê da página aparecer através do card. O blur separa
     o card do fundo sem precisar de opacidade — onde não há suporte, o rgba
     sozinho já sustenta o contraste. */
  background: var(--grad-tool);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  /* Borda clara: uma borda de --line (cinza) sumiria sobre o roxo. */
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
  color: rgba(255, 255, 255, 0.88);
}

.tool:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-brand);
  border-color: rgba(255, 255, 255, 0.28);
}

.tool__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: var(--space-4);
  border-radius: var(--radius);
  transition: transform var(--transition);
}

/* Ladrilho do ícone: é aqui que o laranja da marca aparece de verdade. Não há
   texto dentro — só o traço do SVG, em 2px sobre 20px, e decorativo
   (aria-hidden), então o limite de contraste de texto não se aplica. */
.tool__icon,
.tool__icon--grad {
  background: var(--grad-brand);
  color: #FFFFFF;
}
.tool:hover .tool__icon { transform: scale(1.05); }

/* Texto do card é claro nos DOIS temas: o card é roxo em ambos, então não segue
   --fg (que é escuro no tema claro e ficaria ilegível aqui). */
.tool__name {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
  color: #FFFFFF;
}

.tool__desc {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.55;
}

.tool__arrow {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  color: rgba(255, 255, 255, 0.7);
  transition: color var(--transition);
}
.tool:hover .tool__arrow { color: #FFFFFF; }

/* ============================================================================
   Cartão de conteúdo
   ============================================================================ */

.card {
  background: var(--surface-glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}

.card + .card { margin-top: var(--space-4); }

.card__title {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-4);
}

/* ============================================================================
   Formulário
   ============================================================================ */

.field { display: block; margin-bottom: var(--space-4); }

.field__label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-2);
}

.field__hint {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--fg-muted);
}

.input,
.select,
.textarea {
  width: 100%;
  padding: 0.625rem var(--space-3);
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--fg);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: var(--focus-ring);
}

/* Campo recusado. A borda vermelha diz QUAL campo está errado — a mensagem de
   erro sozinha, acima do formulário, passa batido. Vence o :focus de propósito:
   o campo continua vermelho enquanto a pessoa corrige, até o próximo envio. */
.input--erro,
.input--erro:focus {
  border-color: var(--erro);
}
.input--erro:focus {
  box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.35);
}

.textarea {
  font-family: var(--font-mono);
  min-height: 9rem;
  resize: vertical;
  line-height: 1.6;
}

.row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--space-4);
}

/* Duas colunas que viram uma sozinhas. Igual ao .row, mas com o minimo maior: e
   para BLOCO (dropzone + formulario, seletor + saida), nao para campo. */
.row--largo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: var(--space-5);
}

/* ============================================================================
   Area de soltar arquivo
   ============================================================================
   Borda tracejada é a convenção de "solte aqui" — mantida mesmo onde o clique é o
   caminho principal, porque é o que faz a area ser reconhecida como alvo de
   arquivo em vez de um card qualquer. */

.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-6);
  text-align: center;
  border: 2px dashed var(--line-strong);
  border-radius: var(--radius);
  background: transparent;
  transition: background var(--transition), border-color var(--transition);
}

.dropzone:hover { background: var(--surface-2); }

.dropzone__icone { color: var(--fg-subtle); }

.dropzone__texto {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--fg-muted);
}

.dropzone__arquivo {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--brand);
}

/* ============================================================================
   Botões
   ============================================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.625rem var(--space-5);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition),
              transform var(--transition), opacity var(--transition);
}

.btn:active { transform: translateY(1px); }

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.btn--primary { background: var(--action-bg); color: var(--on-action); }
.btn--primary:hover:not(:disabled) { background: var(--action-bg-hover); }
.btn--primary:active:not(:disabled) { background: var(--action-bg-hover); }

.btn--ghost {
  background: var(--surface);
  color: var(--fg);
  border-color: var(--line-strong);
}
.btn--ghost:hover:not(:disabled) { background: var(--surface-2); }

/* Botão quadrado só com ícone (o de trocar o tema). O tamanho não desce de
   2.25rem: é o mínimo confortável para toque. */
.btn--icon {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  flex: none;
  background: var(--surface);
  color: var(--fg-muted);
  border-color: var(--line-strong);
}
.btn--icon:hover:not(:disabled) { background: var(--surface-2); color: var(--fg); }


/* ============================================================================
   Fundo em degradê
   ============================================================================
   `--grad-page` é o degradê de FUNDO DE PÁGINA, e ele é ciente de tema: suave no
   claro (para texto escuro continuar legível em cima) e o roxo-para-preto do
   próprio site no escuro.

   `background-attachment: fixed` mantém o degradê preso à viewport, senão ele se
   repetiria a cada altura de tela ao rolar uma página longa. */
.bg-gradiente {
  background: var(--grad-page);
  background-attachment: fixed;
}

/* Barra de acento com o degradê da MARCA (roxo -> laranja).
   É aqui que o degradê forte aparece — como faixa, não como fundo de texto. A
   ponta laranja dá 2.92:1 com branco, então nada de leitura vai em cima dele. */
.faixa-marca {
  height: 4px;
  border-radius: 999px;
  background: var(--grad-brand);
  border: none;
  margin: 0 0 var(--space-5);
}

.btn--danger { background: var(--erro); color: #FFFFFF; }

/* Botão que ocupa a linha inteira — usado nos formulários do gate, onde o alvo de
   clique tem de ser óbvio e não competir com nada ao lado. */
.btn--bloco {
  display: flex;
  width: 100%;
}

.btn-row {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  align-items: center;
}

/* ============================================================================
   Selos de status
   ============================================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.125rem var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}

.badge--ok      { color: var(--ok);      background: var(--ok-bg);      border-color: var(--ok-line); }
.badge--erro    { color: var(--erro);    background: var(--erro-bg);    border-color: var(--erro-line); }
.badge--alerta  { color: var(--alerta);  background: var(--alerta-bg);  border-color: var(--alerta-line); }
.badge--info    { color: var(--info);    background: var(--info-bg);    border-color: var(--info-line); }
.badge--neutro  { color: var(--fg-muted); background: var(--surface-2); border-color: var(--line); }

/* Numero da etapa, no titulo do card ("1 Importar Planilha").
   Todas as etapas usam a MESMA cor de acao: numerar e ordem, nao severidade. A
   etapa 3 ja foi vermelha porque trata erro, e isso a fazia parecer um alerta em
   vez do terceiro passo. */
.step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  background: var(--action-bg);
  color: var(--on-action);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}

/* Card com titulo que tem etapa: o titulo vira linha flex para o numero e o texto
   ficarem alinhados pelo centro. */
.card__title--step {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* ============================================================================
   Pilulas de filtro
   ============================================================================
   Alternam qual subconjunto da tabela aparece. Diferente de .badge, que so INFORMA
   status: pilula e controle, tem estado ativo e responde a hover. */

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.375rem var(--space-4);
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--fg-muted);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition),
              color var(--transition);
}

.pill:hover:not(.pill--ativo) { background: var(--surface-2); }

.pill--ativo {
  color: var(--on-action);
  background: var(--action-bg);
  border-color: var(--action-bg);
}

/* Contador dentro da pilula. Tabular para o numero nao dancar ao mudar de 9 para
   10 enquanto o lote roda. */
.pill__count { font-variant-numeric: tabular-nums; opacity: 0.75; }

/* ============================================================================
   Tabela de resultados
   ============================================================================ */

/* O wrapper é que rola na horizontal — o body da página nunca deve rolar. */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

/* Tabela longa: rola dentro do wrapper em vez de esticar a pagina. O sticky do
   thead (ver .table thead th) e o que mantem o cabecalho visivel durante a rolagem. */
.table-wrap--alta {
  max-height: 31rem;
  overflow-y: auto;
}

/* Barra de rolagem discreta nos elementos que rolam por conta propria. Prefixada
   -webkit-: e a unica forma suportada em Chrome/Edge, e onde nao funciona o
   navegador usa a barra padrao, que serve. */
.table-wrap::-webkit-scrollbar,
.textarea::-webkit-scrollbar,
.select::-webkit-scrollbar { width: 6px; height: 6px; }
.table-wrap::-webkit-scrollbar-track,
.textarea::-webkit-scrollbar-track,
.select::-webkit-scrollbar-track { background: var(--surface-2); }
.table-wrap::-webkit-scrollbar-thumb,
.textarea::-webkit-scrollbar-thumb,
.select::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 999px;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.table th,
.table td {
  padding: var(--space-3);
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.table thead th {
  position: sticky;
  top: 0;
  background: var(--surface-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fg-muted);
  white-space: nowrap;
}

.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--bg); }

.table td.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.table .notes {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-4);
  font-size: var(--text-xs);
  color: var(--fg-muted);
  line-height: 1.5;
}

.row--pendente { opacity: 0.55; }

/* ============================================================================
   Progresso
   ============================================================================ */

.progress {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--fg-muted);
}

.progress__bar {
  flex: 1;
  height: 0.5rem;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
}

.progress__fill {
  height: 100%;
  width: 0;
  background: var(--grad-brand);
  border-radius: 999px;
  transition: width 240ms ease-out;
}

/* Roda de carregando, para dentro de botao.
   `currentColor` na borda: assim ela herda a cor do texto do botao e funciona
   tanto no primario (texto claro) quanto no ghost (texto escuro). Estava fixa em
   branco e desaparecia em botao claro. */
.spinner {
  width: 1rem;
  height: 1rem;
  flex: none;
  border: 2px solid currentColor;
  border-left-color: transparent;
  border-radius: 50%;
  animation: girar 1s linear infinite;
}

@keyframes girar {
  to { transform: rotate(360deg); }
}

/* Respeita quem pediu menos animacao — o bloco no fim do arquivo desliga
   transicoes, e a roda tem de parar tambem. */
@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 3s; }
}

/* ============================================================================
   Avisos
   ============================================================================ */

.alert {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
}

.alert--erro   { color: var(--erro);   background: var(--erro-bg);   border-color: var(--erro-line); }
.alert--alerta { color: var(--alerta); background: var(--alerta-bg); border-color: var(--alerta-line); }
.alert--info   { color: var(--info);   background: var(--info-bg);   border-color: var(--info-line); }

.summary {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.stat {
  flex: 1 1 8rem;
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.stat__value {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.stat__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fg-muted);
  margin-top: var(--space-1);
}

.stat--ok     .stat__value { color: var(--ok); }
.stat--erro   .stat__value { color: var(--erro); }
.stat--alerta .stat__value { color: var(--alerta); }

/* ============================================================================
   Tela de senha
   ============================================================================ */

.gate {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: var(--space-4);
}

/* Cartão de login — mesmo tratamento dos cards de ferramenta: roxo translúcido em
   degradê (--grad-tool), texto claro nos dois temas. */
.gate__card {
  width: 100%;
  max-width: 22rem;
  padding: var(--space-6);
  background: var(--grad-tool);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  text-align: center;
  color: rgba(255, 255, 255, 0.88);
}

/* Logo do gate: a variante BRANCA, fixa nos dois temas.
   O cartão é roxo em ambos, então a preta não serve em nenhum — sobre as
   composições do cartão ela fica entre 1.36:1 e 3.69:1, contra 5.70:1 a 15.44:1 da
   branca. Por isso a <img> do gate não leva `data-logo`: ela não deve entrar na
   troca por tema que o syncLogos() faz nas outras logos do portal. */
.gate__logo {
  height: 2rem;
  width: auto;
  display: inline-block;
  margin-bottom: var(--space-5);
}

/* Erro dentro do cartão de login.
   O `.alert--erro` padrão é calibrado para o fundo da PÁGINA. Sobre o cartão roxo
   ele fica discreto no tema escuro (vermelho apagado sobre vermelho apagado) e a
   pessoa não vê que errou a senha. Aqui vale um vermelho cheio com texto quase
   branco — 6.9:1 — igual nos dois temas, porque o cartão é roxo em ambos. */
.gate__card .alert--erro {
  align-items: center;
  text-align: left;
  font-weight: var(--weight-semibold);
  color: #FFE4E4;
  background: rgba(153, 27, 27, 0.92);
  border-color: rgba(255, 255, 255, 0.28);
}

/* Campos do cartão de login.
   O gate tinha UM campo (a senha compartilhada do time) e por isso o input vinha
   solto no cartão, centralizado. Com login por usuário são dois campos — e três na
   tela de definir senha — então eles precisam de rótulo visível e alinhamento à
   esquerda: rótulo só em sr-only funcionava com um campo ("é a senha"), mas com
   três campos de senha na mesma tela ninguém adivinha qual é qual.
   Não usa .field/.field__label do design system porque aqueles são calibrados para
   o fundo da PÁGINA; aqui o fundo é o cartão roxo, e o texto tem de ser claro. */
.gate__campos { text-align: left; }

.gate__campo { margin-bottom: var(--space-4); }

.gate__label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: var(--space-2);
}

.gate__acao { margin-top: var(--space-4); }

/* Nota de pé do cartão: regra da senha, quem está logado, quem procurar sem acesso.
   Mais apagada que o subtítulo, mas ainda 4.6:1 sobre o cartão. */
.gate__nota {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.72);
}

.gate__title {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
  color: #FFFFFF;
}
.gate__sub {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: var(--space-5);
}

/* --fg-muted, e nao --fg-subtle: esta nota fica DIRETO sobre o degrade, fora de
   qualquer card, e ali o --fg-subtle dava 2.05:1. */
.footnote {
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  font-size: var(--text-xs);
  color: var(--fg-muted);
}

/* ============================================================================
   Respeita quem pediu menos animação
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}