/* ============================================================================
banco BV / FENAUTO 2026 - tema Azul (D-02, ARQUITETURA 4.4). Um unico arquivo.
Ativado por . Carregar DEPOIS de tokens.css e base.css:
Sem o atributo, nenhuma regra deste arquivo se aplica: os apps v2 continuam no tema Branco.
Todo seletor comeca por [data-theme="azul"] (teste: shared/test/tema-azul.test.mjs); os @keyframes
az-* sao inofensivos sem o atributo.
Pacote oficial do designer (D-75): fundo, logo, moldura e cartao de brindes vem de shared/assets/sprites/*.png;
fontes BV Leve Titulos em tokens.css. Sem amarelo nem ambar em lugar nenhum. Componentes novos do pacote
(icones, moldura da foto, select, cartoes) ficam em tema-azul-pacote.css (limite de linhas deste arquivo).
Atributos opcionais: (coluna larga), (fundo do
totem), (BvRota), (fundo com a
forma branca no canto superior esquerdo, o de Ativacao e Download).
Movimento: so transform e opacity; telas 200 a 300 ms; prefers-reduced-motion desliga no fim.
Componentes novos: .az-saldo .az-opcao .az-seletor .az-tabs .az-qr .az-palco-qr .az-scan .az-anel
.az-sucesso .az-estado .az-banner-rede .az-foto .az-duas-colunas (lista completa: README-tema.md).
============================================================================ */
:root[data-theme="azul"] {
/* paleta amostrada das telas (docs/v3/telas) */
--az-fundo-0: #0139AC; --az-fundo-1: #0A45C0; --az-profundo: #002BAB;
--az-brilho: #2E7CF6; --az-brilho-hover: #2468D8; --az-card-azul: #1953D7;
--az-linha: #4F8DF7; --az-claro: #D0E3FF; --az-scrim-qr: #8095D5;
--card-inner: #D0E3FF; --ok-dot: #30D328;
/* semanticos do tema (ARQUITETURA 4.4) */
--bg: var(--az-fundo-0);
--bg-grad: linear-gradient(180deg, #0139AC, #0A45C0);
--bg-grad-totem: linear-gradient(180deg, #00219A 0%, #02279B 30%, #0049BF 100%);
--bg-camada: var(--bg-grad);
--bg-sprite: url("../assets/sprites/Mobile-bg.png"); --bg-sprite-largo: url("../assets/sprites/Ativacao-bg.png");
--font: var(--font-titulo); --fw-black: 700;
--titulo: #FFFFFF;
--campo-label: #FFFFFF;
--texto-suave: rgba(255, 255, 255, 0.86);
--on-bg: #FFFFFF;
--btn-bg: var(--az-brilho); --btn-bg-hover: var(--az-brilho-hover); --btn-fg: #FFFFFF;
--btn-radius: 6px 6px 22px 6px; --btn-h: 48px;
/* remapeamento dos tokens v2 */
--surface: #FFFFFF;
--text: #15191E;
--text-muted: #546373;
--primary: var(--az-profundo);
--primary-hover: #00208A;
--accent: var(--bv-cyan);
--border: #CAD0F6;
--focus-ring: 0 0 0 3px #FFFFFF, 0 0 0 6px #31C7ED;
--radius-card: 6px 6px 30px 6px;
--radius-btn: var(--btn-radius);
--radius-input: 8px 8px 22px 8px;
--radius-chip: 999px;
--shadow-card: 0 8px 24px rgba(0, 18, 84, 0.28);
--shadow-pop: 0 16px 48px rgba(0, 12, 60, 0.5);
--decor-h: clamp(72px, 15vh, 140px);
--tabbar-h: 64px;
--ease-az: cubic-bezier(0.22, 1, 0.36, 1);
--dur-tela: 240ms; --dur-fade: 200ms; --dur-pop: 360ms;
--err-claro: #FFD6DC;
/* linha do topo (logo e Voltar de 44 px) e espacamento: um so lugar para todos os apps */
--az-gutter: clamp(20px, 8vw, 32px); --az-topo-pt: 28px; --az-topo-pb: 8px; --az-logo-w: 76px; --az-logo-h: 56px; --az-voltar-h: 44px;
--az-tela-pt: 20px; --az-gap: 16px; --az-fs-h1: clamp(28px, 10vw, 44px); --az-fs-sub: clamp(16px, 4.6vw, 18px);
color-scheme: light;
}
:root[data-theme="azul"][data-layout="amplo"] { --col-max: 960px; }
/* ---------------- fundo, padrao e decoracao ---------------- */
html[data-theme="azul"] {
background-color: var(--az-fundo-0);
background-image: var(--bg-grad);
background-repeat: no-repeat;
background-attachment: scroll;
min-height: 100%;
}
html[data-theme="azul"][data-modo="totem"] { background-image: var(--bg-grad-totem); --bg-camada: var(--bg-grad-totem); }
[data-theme="azul"] body {
position: relative; margin: 0; background: transparent; color: var(--on-bg);
font-size: 16px; overflow-x: hidden; overflow-x: clip; /* iOS 15 nao conhece clip: hidden propaga para o viewport */
}
/* camada fixa do pacote: Mobile-bg.png (402 x 714, ja traz o padrao e as formas do rodape) no celular; Ativacao-bg.png (1080 x 1920) acima de 600 px
e nas paginas data-decor="topo" (traz a forma branca do canto). cover, nunca distorce; nunca interfere no toque */
/* fundo FIXO: a camada tem a altura do viewport grande (lvh), entao nao muda de tamanho nem "cai" quando a barra do navegador do celular
aparece ou some; o degrade vem junto nela, so o conteudo rola por cima */
[data-theme="azul"] body::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100lvh; z-index: -1; pointer-events: none;
background: var(--bg-sprite) center bottom / cover no-repeat, var(--bg-camada); transform: translateZ(0); }
html[data-theme="azul"] { overscroll-behavior-y: none; }
@media (min-width: 601px) { [data-theme="azul"] body::before { background-image: var(--bg-sprite-largo), var(--bg-camada); } }
[data-theme="azul"] body[data-decor~="topo"]::before { background-image: var(--bg-sprite-largo), var(--bg-camada); background-position: center top, 0 0; }
/* paisagem (PC, notebook): as formas dos cantos ficariam sobre o texto; sem corte nas formas, so o padrao */
@media (min-width: 601px) and (orientation: landscape) { [data-theme="azul"] body::before, [data-theme="azul"] body[data-decor~="topo"]::before { background-position: center 45%, 0 0; } }
/* paginas de quiosque (totem, check-in da IA): sem selecao, sem menu de toque longo, sem puxar para atualizar */
[data-theme="azul"] body.quiosque { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; overscroll-behavior: none; touch-action: manipulation; }
[data-theme="azul"] body.quiosque .input { -webkit-user-select: text; user-select: text; }
[data-theme="azul"] body.app { min-height: 100vh; min-height: 100dvh; background: transparent; }
/* ---------------- topo: so o logo sobre o fundo ---------------- */
[data-theme="azul"] .topo { background: transparent; color: var(--on-bg); min-height: 0; overflow: visible; }
[data-theme="azul"] .topo-inner { min-height: 0; justify-content: space-between; padding: var(--az-topo-pt) var(--az-gutter) var(--az-topo-pb); }
[data-theme="azul"] .topo .logo { width: var(--az-logo-w); height: var(--az-logo-h); fill: #FFFFFF; }
/* logo oficial (Ativacao-LogoBV-branco.png, 240 x 177, exibido em 76 x 56: nitido em tela de alta densidade e no totem): o