/*
 * Tela inicial (catálogo de apps) na identidade visual da rengaw (2026-10-02).
 * Fonte: canvas do Claude Design "rengaw (2) (Landing page) (2)" (paleta, tipografia, landing page).
 * Carregado só por apps_compartilhados/autenticacao/templates/autenticacao/home.html (bloco `page_css`
 * de templates/base.html), e tudo aqui fica escopado em `body.pagina-inicial`: os apps continuam com o
 * tema do Velzon. Substitui o bloco "saas" que ficava em tokens.css.
 *
 * Paleta: Azul rengaw #0090F4 (destaque em fundo escuro), Azul royal #006ECB (botões e links em fundo
 * claro), Azul profundo #003387, Marinho #00336A (textos), Noite #061C3D (fundos escuros), Grafite #5D6A79,
 * Gelo #F4F7FB (fundos claros). Títulos em Exo 2, textos em IBM Plex Sans, legendas em IBM Plex Mono.
 * Contraste conferido: #4F5D6E sobre branco 6,6:1; #B8C4D6 sobre #061C3D 10,6:1; #006ECB sobre #F4F7FB 4,9:1.
 */

body.pagina-inicial {
    --rw-azul: #0090F4;
    --rw-royal: #006ECB;
    --rw-profundo: #003387;
    --rw-marinho: #00336A;
    --rw-noite: #061C3D;
    --rw-gelo: #F4F7FB;

    --rw-fundo: var(--rw-gelo);
    --rw-texto: var(--rw-marinho);
    --rw-texto-suave: #4F5D6E;
    --rw-legenda: #5D6A79;
    --rw-card: #FFFFFF;
    --rw-borda: #DCE3EC;
    --rw-acento: var(--rw-royal);
    --rw-icone-fundo: #E8F1FB;

    --rw-titulo: "Exo 2", system-ui, sans-serif;
    --rw-texto-fonte: "IBM Plex Sans", system-ui, sans-serif;
    --rw-mono: "IBM Plex Mono", ui-monospace, monospace;

    /* Componentes do Velzon/Bootstrap usados aqui (alertas, badges, ribbons) seguem a marca. */
    --vz-font-family-primary: var(--rw-texto-fonte);
    --vz-headings-font-family: var(--rw-titulo);
    --vz-primary: #006ECB;
    --vz-primary-rgb: 0, 110, 203;
    --vz-link-color: #006ECB;
    --vz-link-color-rgb: 0, 110, 203;
    --vz-link-hover-color: #003387;
    --vz-link-hover-color-rgb: 0, 51, 135;
    --vz-body-bg: var(--rw-fundo);
    --vz-body-color: var(--rw-texto);

    background: var(--rw-fundo);
    color: var(--rw-texto);
    font-family: var(--rw-texto-fonte);
    font-size: 1rem;
}

[data-bs-theme="dark"] body.pagina-inicial {
    --rw-fundo: var(--rw-noite);
    --rw-texto: #F4F7FB;
    --rw-texto-suave: #B8C4D6;
    --rw-legenda: #8FA3BF;
    --rw-card: #0B2A57;
    --rw-borda: #1F4478;
    --rw-acento: #5DB8FF;
    --rw-icone-fundo: #12366B;
    --vz-primary: #0090F4;
    --vz-primary-rgb: 0, 144, 244;
    --vz-link-color: #5DB8FF;
    --vz-link-color-rgb: 93, 184, 255;
    --vz-link-hover-color: #9DD3FF;
}

body.pagina-inicial a:focus-visible,
body.pagina-inicial button:focus-visible {
    outline: 3px solid var(--rw-azul);
    outline-offset: 3px;
}

/* ---------- Barra superior (sempre escura, como no site) ---------- */
.rw-topo {
    background: var(--rw-noite);
    border-bottom: 1px solid #1B3560;
    /* Fixa no topo ao rolar o catálogo (2026-10-04). */
    position: sticky;
    top: 0;
    z-index: 1030;
}
/* Em telas estreitas o menu aberto rola dentro da barra, sem passar da janela. */
@media (max-width: 991.98px) {
    .rw-topo .navbar-collapse {
        max-height: calc(100vh - 4.5rem);
        overflow-y: auto;
    }
}
.rw-topo .navbar {
    min-height: 4.5rem;
}
.rw-topo .navbar-brand {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    margin-right: 1.5rem;
}
.rw-topo .rw-logo {
    display: block;
    /* 2026-10-24: mesmo tamanho da vitrine (/conheca/): 168px de largura; a barra continua com 4,5rem. */
    width: 168px;
    height: auto;
}
.rw-topo .rw-produto {
    font-family: var(--rw-mono);
    font-size: 0.8125rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #5DB8FF;
    padding-left: 0.875rem;
    border-left: 1px solid #2D4A75;
}
.rw-topo .nav-link,
.rw-topo .rw-topo-nome {
    color: #F4F7FB;
    font-size: 0.9375rem;
}
.rw-topo .nav-link:hover,
.rw-topo .nav-link:focus {
    color: #5DB8FF;
}
.rw-topo .rw-topo-nome {
    font-weight: 600;
}
.rw-topo .navbar-toggler {
    border-color: #2D4A75;
}
.rw-topo .navbar-toggler-icon {
    filter: invert(1) brightness(2);
}
.rw-topo .rw-sair {
    border: 1px solid #2D4A75;
    border-radius: 0.625rem;
    padding: 0.5rem 1rem;
}

/* ---------- Faixa de boas-vindas ---------- */
.rw-hero {
    position: relative;
    overflow: hidden;
    background: var(--rw-noite);
    color: #F4F7FB;
}
.rw-hero-simbolo {
    position: absolute;
    right: -6rem;
    top: -1rem;
    width: 26rem;
    height: auto;
    opacity: 0.16;
    pointer-events: none;
}
.rw-hero-conteudo {
    position: relative;
    padding: 3.5rem 0 4rem;
    max-width: 46rem;
}
.rw-sobretitulo {
    font-family: var(--rw-mono);
    font-size: 0.8125rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--rw-acento);
    margin-bottom: 0.875rem;
}
.rw-hero .rw-sobretitulo {
    color: var(--rw-azul);
}
.rw-hero h1 {
    font-family: var(--rw-titulo);
    font-weight: 600;
    font-size: clamp(2rem, 4.2vw, 3.25rem);
    line-height: 1.08;
    letter-spacing: -0.01em;
    color: #F4F7FB;
    margin: 0 0 1rem;
}
.rw-hero p {
    font-size: 1.125rem;
    line-height: 1.6;
    color: #B8C4D6;
    margin: 0;
}
.rw-hero-contagem {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    padding: 0.5rem 0.875rem;
    border: 1px solid #2D4A75;
    border-radius: 999px;
    font-size: 0.9375rem;
    color: #F4F7FB;
}
.rw-hero-contagem i {
    color: var(--rw-azul);
}

/* ---------- Catálogo ---------- */
.rw-catalogo {
    padding: 3rem 0 4rem;
}
.rw-categorias {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

/* Filtro por categoria (2026-10-04) */
.rw-filtro-categorias {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 2rem;
}
.rw-filtro-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4375rem 0.875rem;
    border: 1px solid var(--rw-borda);
    border-radius: 999px;
    background: var(--rw-card);
    color: var(--rw-texto);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.rw-filtro-chip:hover { border-color: var(--rw-acento); }
.rw-filtro-chip:focus-visible { outline: 2px solid var(--rw-acento); outline-offset: 2px; }
.rw-filtro-chip[aria-pressed="true"] {
    background: var(--rw-acento);
    border-color: var(--rw-acento);
    color: #FFFFFF;
}
.rw-filtro-contador {
    padding: 0 0.4375rem;
    border-radius: 999px;
    background: var(--rw-fundo);
    font-family: var(--rw-mono);
    font-size: 0.75rem;
}
.rw-filtro-chip[aria-pressed="true"] .rw-filtro-contador {
    /* Fundo mais escuro que o do botão: o branco fica acima de 4,5:1 (acessibilidade, 2026-10-24). */
    background: rgba(6, 28, 61, 0.35);
    color: #FFFFFF;
}
[data-bs-theme="dark"] body.pagina-inicial .rw-filtro-chip[aria-pressed="true"] .rw-filtro-contador {
    background: rgba(255, 255, 255, 0.45);
}
.rw-categoria-titulo {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.rw-categoria-titulo h2 {
    font-family: var(--rw-mono);
    font-weight: 500;
    font-size: 0.8125rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--rw-acento);
    margin: 0;
    white-space: nowrap;
}
.rw-categoria-titulo h2 { display: inline-flex; align-items: center; }
@media (max-width: 575.98px) { .rw-categoria-titulo h2 { flex-wrap: wrap; white-space: normal; row-gap: 0.375rem; } }
.rw-categoria-qtd { margin-left: 0.5rem; color: var(--rw-texto-suave); }
.rw-categoria-titulo::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--rw-borda);
}

.rw-app {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    height: 100%;
    padding: 1.5rem;
    background: var(--rw-card);
    border: 1px solid var(--rw-borda);
    border-radius: 1rem;
    color: var(--rw-texto);
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.rw-app:hover {
    color: var(--rw-texto);
    border-color: var(--rw-acento);
    box-shadow: 0 10px 28px rgba(6, 28, 61, 0.10);
    transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
    .rw-app,
    .rw-app:hover {
        transition: none;
        transform: none;
    }
}
.rw-app-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    font-size: 1.5rem;
    flex-shrink: 0;
}
.rw-app-icone-marca {
    background: var(--rw-icone-fundo);
    color: var(--rw-acento);
}
.rw-app h3 {
    font-family: var(--rw-titulo);
    font-weight: 600;
    font-size: 1.3125rem;
    line-height: 1.2;
    color: var(--rw-texto);
    margin: 0;
}
.rw-app p {
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--rw-texto-suave);
    margin: 0;
    flex-grow: 1;
}
.rw-app-abrir {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--rw-acento);
}
.rw-app:hover .rw-app-abrir i {
    transform: translateX(3px);
}
.rw-app-abrir i {
    transition: transform 0.15s ease;
}
/* Os ribbons do Velzon ficam presos ao cartão (position relative do .ribbon-box). */
.rw-app.ribbon-box {
    position: relative;
}

.rw-vazio {
    padding: 2rem;
    background: var(--rw-card);
    border: 1px dashed var(--rw-borda);
    border-radius: 1rem;
    color: var(--rw-texto-suave);
}

body.pagina-inicial footer {
    font-family: var(--rw-mono);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--rw-legenda) !important;
    border-top: 1px solid var(--rw-borda);
}

/* Rodapé sempre no fim da janela, mesmo com poucos apps (o conteúdo ocupa o espaço que sobra). */
body.pagina-inicial {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
body.pagina-inicial #layout-wrapper {
    flex: 1 0 auto;
}

/* Telas a partir de 1500px: a página alarga para caber 5 apps por linha com os cards do mesmo tamanho dos 4 por
 * linha (container de 1140px: ~267px cada, 16px entre eles). Abaixo disso continua a grade de 1 a 4 colunas. */
@media (min-width: 1500px) {
    body.pagina-inicial .container { max-width: 1424px; }
    body.pagina-inicial .rw-apps-grade > * { flex: 0 0 auto; width: 20%; }
}

/* Filtro ativo no modo escuro: texto Noite sobre o azul claro (branco ficaria abaixo do contraste AA). */
[data-bs-theme="dark"] body.pagina-inicial .rw-filtro-chip[aria-pressed="true"],
[data-bs-theme="dark"] body.pagina-inicial .rw-filtro-chip[aria-pressed="true"] .rw-filtro-contador { color: var(--rw-noite); }

/* Carrossel por categoria (2026-10-15): sem filtro, a categoria cujos apps não cabem numa linha vira uma faixa que rola
 * para o lado (rolagem nativa: toque, roda do mouse, teclado), com setas ao lado do título. A largura de cada cartão é a
 * mesma da grade; com filtro (body sem .rw-modo-carrossel na seção), a grade volta a quebrar linha. */
.rw-categoria-titulo::after { order: 2; }
.rw-carrossel-setas { order: 3; display: inline-flex; gap: 0.375rem; flex-shrink: 0; }
.rw-carrossel-setas[hidden] { display: none; }
.rw-carrossel-seta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 1px solid var(--rw-borda);
    border-radius: 999px;
    background: var(--rw-card);
    color: var(--rw-texto);
    font-size: 1.25rem;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.rw-carrossel-seta:hover:not(:disabled) { border-color: var(--rw-acento); color: var(--rw-acento); }
.rw-carrossel-seta:focus-visible { outline: 2px solid var(--rw-acento); outline-offset: 2px; }
.rw-carrossel-seta:disabled { opacity: 0.4; cursor: default; }
.rw-categoria.rw-modo-carrossel .rw-apps-grade {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding-bottom: 1.25rem;
    margin-bottom: -1.25rem;
}
.rw-categoria.rw-modo-carrossel .rw-apps-grade::-webkit-scrollbar { display: none; }
.rw-categoria.rw-modo-carrossel .rw-apps-grade > * { scroll-snap-align: start; }
@media (max-width: 575.98px) {
    /* No celular o próximo cartão aparece pela metade, mostrando que dá para deslizar. */
    .rw-categoria.rw-modo-carrossel .rw-apps-grade > * { width: 85%; }
}
@media (prefers-reduced-motion: reduce) {
    .rw-categoria.rw-modo-carrossel .rw-apps-grade { scroll-behavior: auto; }
}