/* ============================================================================
   banco BV / FENAUTO 2026 - tema Azul, componentes do pacote oficial do designer (D-75).
   Carregar logo depois de tema-azul.css:  <link rel="stylesheet" href="../shared/css/tema-azul-pacote.css">
   Tudo aqui usa os sprites de shared/assets/sprites/ (nunca recriados em CSS ou SVG) e so atua com data-theme="azul".
   Sem amarelo nem ambar: aviso e destaque usam os azuis e o branco da BV. Lista de classes: docs/v3/VISUAL.md.
   ============================================================================ */

/* ---------------- icones (tamanho nativo do sprite: nitidos em 1x, use a classe sem esticar) ---------------- */
[data-theme="azul"] .az-icone { display: inline-block; flex: 0 0 auto; width: 48px; height: 48px; vertical-align: middle; background: center / contain no-repeat; }
[data-theme="azul"] .az-icone-calendario { width: 24px; height: 24px; background-image: url("../assets/sprites/icon-Calendario.png"); }
[data-theme="azul"] .az-icone-relogio { width: 48px; height: 48px; background-image: url("../assets/sprites/icon-clock.png"); }
[data-theme="azul"] .az-icone-presente { width: 45px; height: 45px; background-image: url("../assets/sprites/icon-Gift.png"); }
[data-theme="azul"] .az-icone-proprietario { width: 48px; height: 48px; background-image: url("../assets/sprites/icon-proprietario.png"); }
[data-theme="azul"] .az-icone-vendedor { width: 48px; height: 48px; background-image: url("../assets/sprites/icon-vendedor.png"); }
[data-theme="azul"] .az-icone-saldo { width: 64px; height: 64px; background-image: url("../assets/sprites/icon-saldoBrindes.png"); }

/* ---------------- cartao branco do pacote (Bem-vindo, Status Retirada, Saldo de brindes) ---------------- */
[data-theme="azul"] .az-card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: 6px 6px 30px 6px; background: #FFFFFF; color: var(--az-profundo); }
[data-theme="azul"] .az-card h2, [data-theme="azul"] .az-card h3 { margin: 0; font-size: 22px; line-height: 1.1; color: var(--az-profundo); }
[data-theme="azul"] .az-card p { margin: 0; font-size: 16px; font-weight: 300; color: var(--az-profundo); }
[data-theme="azul"] .az-card-rotulo { font-size: 18px; font-weight: 400; color: var(--az-profundo); }
[data-theme="azul"] .az-card-faixa { margin: 0 calc(var(--az-card-pad, 20px) * -1) calc(var(--az-card-pad, 20px) * -1); padding: 8px 20px; border-radius: 0 0 30px 0; background: var(--az-brilho); color: #FFFFFF; text-align: center; font-size: 20px; font-weight: 700; }
[data-theme="azul"] .az-card-status { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 6px 6px 26px 6px; background: var(--az-claro); color: var(--az-profundo); }
[data-theme="azul"] .az-card-status b { font-size: 26px; font-weight: 700; line-height: 1.1; }
[data-theme="azul"] .az-card-status small { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 300; }
[data-theme="azul"] .az-card-linha { display: flex; align-items: center; gap: 14px; }
[data-theme="azul"] .az-card-linha > div { min-width: 0; }
[data-theme="azul"] .az-card-saldo { flex-direction: row; align-items: center; gap: 16px; min-height: 96px; padding: 16px 20px; }
[data-theme="azul"] .az-card-saldo .az-card-num { font-size: 44px; font-weight: 700; line-height: 1; }
[data-theme="azul"] .az-card-saldo small { font-size: 16px; font-weight: 400; }

/* ---------------- moldura da foto e do QR (Mobile-bordaImagem.png, 267 x 386: contorno branco de 5 px, canto superior esquerdo e inferior direito redondos) ----------------
   O sprite e um contorno (miolo transparente): fatiado em 9 partes (cantos no tamanho nativo), serve para qualquer proporcao de foto sem distorcer o traco. */
[data-theme="azul"] .az-moldura { position: relative; display: block; width: 100%; max-width: 267px; margin: 0 auto; padding: 5px; box-sizing: border-box; overflow: hidden; border-radius: 14px 0 16px 0; color: var(--az-profundo); }
[data-theme="azul"] .az-moldura::after { content: ""; position: absolute; inset: 0; pointer-events: none; border: 18px solid transparent; border-image: url("../assets/sprites/Mobile-bordaImagem.png") 18 / 18px / 0 stretch; }
[data-theme="azul"] .az-moldura > img, [data-theme="azul"] .az-moldura > canvas { display: block; width: 100%; height: 100%; object-fit: cover; }
[data-theme="azul"] .az-moldura-qr { background: #FFFFFF; padding: 20px; }
[data-theme="azul"] .az-moldura-qr > img, [data-theme="azul"] .az-moldura-qr > canvas { height: auto; }

/* ---------------- cartao de brindes (bg-Brindes.png, 338 x 209): so a arte; o conteudo e do app. Pronto: .az-saldo ---------------- */
[data-theme="azul"] .az-card-brindes { position: relative; width: 100%; max-width: 420px; aspect-ratio: 338 / 209; padding: 18px; border-radius: 6px 6px 30px 6px; color: #FFFFFF; background: var(--az-card-azul) url("../assets/sprites/bg-Brindes.png") left top / 100% 100% no-repeat; }

/* ---------------- opcao grande com icone (Proprietario, Vendedor) ---------------- */
[data-theme="azul"] .az-papel { display: flex; align-items: center; gap: 18px; width: 100%; min-height: 96px; padding: 16px 20px; border: 0; border-radius: 6px 6px 30px 6px; background: #FFFFFF; color: var(--az-profundo); text-align: left; cursor: pointer; touch-action: manipulation; font-family: var(--font-titulo); -webkit-tap-highlight-color: transparent; transition: transform 120ms var(--ease-az); }
[data-theme="azul"] .az-papel:active { transform: scale(0.985); }
[data-theme="azul"] .az-papel:focus-visible { outline: none; box-shadow: var(--focus-ring); }
[data-theme="azul"] .az-papel b { display: block; font-size: clamp(26px, 8vw, 32px); font-weight: 700; line-height: 1.05; }
[data-theme="azul"] .az-papel small { display: block; margin-top: 2px; font-size: 15px; font-weight: 400; line-height: 1.2; }

/* ---------------- select estilizado: campo branco, seta azul (Selecione o brinde) ---------------- */
[data-theme="azul"] select.az-select {
  width: 100%; min-height: 48px; padding: 0 48px 0 16px; border: 2px solid transparent; border-radius: 8px 8px 22px 8px; background-color: #FFFFFF; color: var(--az-profundo);
  font-family: var(--font); font-size: 18px; font-weight: 400; cursor: pointer; -webkit-appearance: none; appearance: none; box-sizing: border-box; text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='12' viewBox='0 0 20 12'%3E%3Cpath d='M2 2l8 8 8-8' fill='none' stroke='%23002BAB' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 20px 12px;
}
[data-theme="azul"] select.az-select:focus { outline: none; border-color: #31C7ED; box-shadow: var(--focus-ring); }
[data-theme="azul"] select.az-select:invalid, [data-theme="azul"] select.az-select.vazio-sel { color: #6B7587; }
[data-theme="azul"] select.az-select:disabled { background-color: #C9CCD2; color: #15191E; }

/* ---------------- campo somente leitura em cinza (Gerente vinculado) ---------------- */
[data-theme="azul"] .az-leitura { display: flex; align-items: center; min-height: 48px; padding: 0 16px; border-radius: 8px 8px 22px 8px; border: 0; background: #C9CCD2; color: #15191E; font-size: 18px; overflow-wrap: anywhere; }

/* ---------------- aviso em azul (substitui todo amarelo): atencao sem alarme; vermelho so em erro real (.msg.erro) ---------------- */
[data-theme="azul"] .az-aviso, [data-theme="azul"] .msg.aviso { padding: 12px 16px; border-left: 4px solid var(--az-brilho); border-radius: 6px 6px 16px 6px; background: var(--az-claro); color: var(--az-profundo); font-size: 16px; font-weight: 400; }
[data-theme="azul"] .az-selo { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; background: var(--az-claro); color: var(--az-profundo); font-size: 13px; font-weight: 700; }
[data-theme="azul"] .az-selo-forte { background: var(--az-brilho); color: #FFFFFF; }

/* fundos em WebP com PNG de fallback (so muda a origem (tema-azul.css declara o PNG; aqui o WebP) do bitmap; variavel personalizada nao tem fallback por declaracao repetida, entao o @supports escolhe) */
@supports (background-image: image-set(url("x.webp") type("image/webp"), url("x.png") type("image/png"))) { :root[data-theme="azul"] {
  --bg-sprite: image-set(url("../assets/sprites/Mobile-bg.webp") type("image/webp"), url("../assets/sprites/Mobile-bg.png") type("image/png"));
  --bg-sprite-largo: image-set(url("../assets/sprites/Ativacao-bg.webp") type("image/webp"), url("../assets/sprites/Ativacao-bg.png") type("image/png")); } }