/**
 * Pague Azul Cliente - Visual opcional "Atlas" (linguagem do modo Atlas/Espaco do painel, estilo visionOS)
 *
 * Visual COMPLEMENTAR e OPCIONAL, como claro/escuro: o padrao de todos e o Classico (sem nada daqui).
 * So vale com <html data-visual="atlas">, posto ANTES da primeira pintura por assets/js/v2/visual.js
 * (escolha em Perfil > Aparencia ou no menu lateral; preferencia no aparelho em localStorage pa_visual;
 * atalho de teste ?visual=atlas / ?visual=atual). Carregado em TODAS as paginas DEPOIS dos CSS da tela
 * e SO sobrescreve: mesma marcacao, mesmos fluxos, mesmas chamadas de API. O tema claro/escuro continua
 * independente (html[data-tema]) e funciona dentro do Atlas.
 * Referencia: pague_azul_system/assets/css/v2/espaco.css (ceu, vidro, sombras) e login.css (variacao D).
 *
 * Direcao: vidro fosco translucido sobre fundo ambiente FIXO (claro luminoso / escuro grafite QUENTE),
 * cantos bem arredondados, pilulas, profundidade por camadas + sombra suave. Cor da marca da cidade
 * (--v2-primaria*, vinda do tema.js) SO como acento. Nada de neon/brilho/azul-marinho.
 *
 * Legibilidade ao sol (contas sobre o PIOR ponto do fundo, vidro ja composto):
 *   claro : vidro .74 branco sobre #CFE2FF ~ L .89 -> texto #0A1530 16:1, suave #2E3A55 10:1
 *   escuro: vidro rgba(66,62,58,.52) sobre #555049 = #4B4741 (L .064) -> texto #F5F2EE 12:1,
 *           suave #E6E2DC 7.1:1 (o fundo e fixo: o vidro nunca fica sobre algo mais claro que isso)
 *   Camadas que ficam sobre conteudo que ROLA ou sobre o MAPA (cabecalho, barras, menu, modais,
 *   toasts, listas suspensas, paineis do mapa) usam vidro quase opaco (--at-painel / --at-vidro-barra)
 *   para o texto manter >= 7:1 qualquer que seja o conteudo por baixo.
 *   Texto em cor de estado/acento escurecido (claro) ou clareado (escuro) para >= 7:1 sobre o vidro.
 * Toques: botoes >= 48px, acao principal 56px.
 * Desempenho: backdrop-filter so em barras fixas, saldo e camadas flutuantes (como no espaco.css).
 * Sem prefers-*: tudo depende de atributos no <html> (funciona igual no WebView do APK).
 */

/* ==================== TOKENS (claro: ceu luminoso) ==================== */
html[data-visual="atlas"] {
  --at-ceu:
    radial-gradient(120% 70% at 50% 108%, #FFE7D6 0%, rgba(255, 231, 214, 0) 60%),
    radial-gradient(60% 40% at 8% 18%, rgba(150, 135, 255, 0.22) 0%, rgba(150, 135, 255, 0) 70%),
    radial-gradient(55% 38% at 96% 42%, rgba(110, 200, 255, 0.22) 0%, rgba(110, 200, 255, 0) 70%),
    linear-gradient(180deg, #CFE2FF 0%, #E4EEFF 42%, #F4F1F6 70%, #FBEDE3 100%);
  background: #E4EEFF;
}
html[data-visual="atlas"] .pa-v2 {
  --at-vidro: rgba(255, 255, 255, 0.74);
  --at-vidro-forte: rgba(255, 255, 255, 0.86);
  --at-vidro-barra: rgba(255, 255, 255, 0.70);
  --at-aresta: rgba(255, 255, 255, 0.90);            /* fio de luz na borda de cima do vidro */
  --at-linha: rgba(20, 34, 72, 0.08);
  --at-preench: rgba(20, 34, 72, 0.06);              /* preenchimento tonal (segmento, botao fantasma) */
  --at-texto: #0A1530;
  --at-texto-2: #2E3A55;
  --at-sombra: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 16px 34px -20px rgba(26, 48, 112, 0.38);
  --at-sombra-flutua: 0 24px 48px -22px rgba(26, 48, 112, 0.45), 0 8px 18px -12px rgba(26, 48, 112, 0.25);
  --at-blur: blur(28px) saturate(170%);

  /* ponte: os componentes v2 passam a ler a paleta Atlas */
  --v2-fundo: transparent;
  --v2-superficie: var(--at-vidro);
  --v2-superficie-2: var(--at-preench);
  --v2-neutro: var(--at-preench);
  --v2-borda: var(--at-linha);
  --v2-borda-forte: rgba(20, 34, 72, 0.14);
  --v2-texto-forte: var(--at-texto);
  --v2-texto: var(--at-texto);
  --v2-texto-suave: var(--at-texto-2);
  --v2-trilho: rgba(20, 34, 72, 0.10);
  --v2-barra: var(--at-vidro-barra);
  --v2-segmento-ativo: rgba(255, 255, 255, 0.95);
  --v2-anel-central: transparent;
  --v2-sombra-1: var(--at-sombra);
  /* saldo: vidro forte claro, numero escuro */
  --v2-saldo-de: var(--at-vidro-forte);
  --v2-saldo-ate: var(--at-vidro-forte);
  --v2-saldo-borda: var(--at-aresta);
  --v2-saldo-texto: var(--at-texto);
  --v2-saldo-suave: var(--at-texto-2);
  --v2-saldo-fantasma: var(--at-preench);
  --v2-saldo-brilho: 0;
  /* campos, controles, camadas */
  --v2-campo: rgba(255, 255, 255, 0.86);
  --v2-campo-borda: rgba(20, 34, 72, 0.18);
  --v2-controle: #6E7790;
  --v2-skeleton: rgba(20, 34, 72, 0.08);
  --v2-skeleton-brilho: rgba(255, 255, 255, 0.7);
  --v2-toque: rgba(20, 34, 72, 0.06);
  --v2-overlay: rgba(16, 24, 48, 0.36);
  --v2-sombra-3: var(--at-sombra-flutua);
  /* texto na cor de acento: escurecido ate ~7:1 sobre o vidro claro (vence o style="" do tema.js) */
  --v2-primaria-forte: color-mix(in srgb, var(--v2-primaria) 66%, #0A1530) !important;
  /* texto de estado >= 7:1 sobre o vidro claro */
  --v2-sucesso-texto: #08461F;
  --v2-alerta-texto: #7A3705;
  --v2-erro-texto: #8E1515;
  /* cantos bem arredondados */
  --v2-r-sm: 14px;
  --v2-r-md: 20px;
  --v2-r-lg: 26px;
  --v2-r-xl: 30px;
  background: transparent;
}

/* ==================== TOKENS (escuro: grafite quente, sem azul-marinho) ==================== */
html[data-visual="atlas"][data-tema="escuro"] {
  --at-ceu:
    radial-gradient(90% 55% at 50% 112%, rgba(146, 135, 122, 0.20) 0%, rgba(146, 135, 122, 0) 70%),  /* brilho baixo: .20 mantem texto suave legivel no rodape */
    radial-gradient(60% 40% at 10% 16%, rgba(214, 150, 90, 0.14) 0%, rgba(214, 150, 90, 0) 70%),
    linear-gradient(180deg, #1E1915 0%, #29241F 26%, #35302B 52%, #45403B 74%, #555049 100%);
  background: #29241F;
}
html[data-visual="atlas"][data-tema="escuro"] .pa-v2 {
  --at-vidro: rgba(66, 62, 58, 0.52);
  --at-vidro-forte: rgba(62, 58, 54, 0.74);
  --at-vidro-barra: rgba(58, 54, 50, 0.88);   /* .88: texto 7:1 mesmo com conteudo claro rolando por baixo */
  --at-aresta: rgba(255, 255, 255, 0.14);
  --at-linha: rgba(255, 255, 255, 0.10);
  --at-preench: rgba(0, 0, 0, 0.20);              /* preenchimento tonal ESCURECE (clarear derrubava o contraste) */
  --at-texto: #F5F2EE;
  --at-texto-2: #E6E2DC;
  --at-sombra: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 18px 36px -20px rgba(0, 0, 0, 0.60);
  --at-sombra-flutua: 0 26px 50px -22px rgba(0, 0, 0, 0.70), 0 8px 18px -12px rgba(0, 0, 0, 0.50);
  --at-blur: blur(28px) saturate(110%);
  --v2-borda-forte: rgba(255, 255, 255, 0.16);
  --v2-trilho: rgba(255, 255, 255, 0.12);
  --v2-segmento-ativo: #F2EEE9;                  /* pilula escolhida clara, texto grafite (regra abaixo) */
  /* tint da marca sobre grafite quente (o tint padrao do escuro e azul-marinho).
     !important: o tema.js grava a paleta da cidade em style="" do <body>; aqui o Atlas precisa vencer. */
  --v2-primaria-tint: #4A4640 !important;
  --v2-primaria-tint: color-mix(in srgb, var(--v2-primaria) 20%, #34302C) !important;
  /* texto na cor de acento: clareado ate ~7:1 sobre o vidro grafite */
  --v2-primaria-forte: color-mix(in srgb, var(--v2-primaria) 30%, #FFFFFF) !important;
  /* neutros do escuro padrao sao azulados: versao grafite quente */
  --v2-campo: rgba(40, 36, 32, 0.72);
  --v2-campo-borda: rgba(255, 255, 255, 0.20);
  --v2-controle: #9A938A;
  --v2-skeleton: rgba(255, 255, 255, 0.10);
  --v2-skeleton-brilho: rgba(255, 255, 255, 0.08);
  --v2-toque: rgba(255, 255, 255, 0.08);
  --v2-overlay: rgba(14, 11, 9, 0.62);
  --v2-sombra-3: 0 26px 50px -22px rgba(0, 0, 0, 0.70), 0 8px 18px -12px rgba(0, 0, 0, 0.50);
  /* texto de estado >= 7:1 sobre o vidro (#4B4741) */
  --v2-sucesso-texto: #A8F0C6;
  --v2-alerta-texto: #FBD9A2;
  --v2-erro-texto: #FFC4BF;
  --v2-sucesso-tint: #1F3A2A;
  --v2-alerta-tint: #3D2E16;
  --v2-erro-tint: #432222;
}

/* Fundo ambiente FIXO (nao rola com o conteudo: o vidro sempre tem o mesmo contraste) */
html[data-visual="atlas"] body.pa-v2 { background: transparent; }
html[data-visual="atlas"] body.pa-v2::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--at-ceu);
  pointer-events: none;
}

/* ==================== BASE: vidro, pilulas, toques ==================== */
html[data-visual="atlas"] .pa-v2 .pa-cartao {
  border: 1px solid var(--at-aresta);
  box-shadow: var(--at-sombra);
}
html[data-visual="atlas"] .pa-v2 .pa-btn {
  min-height: 48px;
  border-radius: 999px;
  font-weight: 600;
}
html[data-visual="atlas"] .pa-v2 .pa-btn-lg { min-height: 56px; }
html[data-visual="atlas"] .pa-v2 .pa-btn-secundario,
html[data-visual="atlas"] .pa-v2 .pa-btn-fantasma {
  background: var(--at-preench);
  color: var(--at-texto);
  border-color: transparent;
}
html[data-visual="atlas"] .pa-v2 .pa-btn-primario {
  box-shadow: 0 10px 22px -14px rgba(0, 0, 0, 0.45);
}
html[data-visual="atlas"] .pa-v2 .pa-btn-icone { border-radius: 999px; }
html[data-visual="atlas"] .pa-v2 .pa-selo { border-radius: 999px; }

/* Barra inferior: ornamento de vidro flutuante (como o dock do Atlas) */
html[data-visual="atlas"] .pa-v2 .footer-nav {
  left: 12px;
  right: 12px;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  max-width: 496px;
  margin: 0 auto;
  padding: 6px;
  border: 1px solid var(--at-aresta);
  border-radius: 30px;
  background: var(--at-vidro-barra);
  -webkit-backdrop-filter: var(--at-blur);
  backdrop-filter: var(--at-blur);
  box-shadow: var(--at-sombra-flutua);
}
html[data-visual="atlas"] .pa-v2 .footer-nav .nav-item { min-height: 56px; color: var(--at-texto-2); }
html[data-visual="atlas"] .pa-v2 .footer-nav .nav-item.active { color: var(--at-texto); }
html[data-visual="atlas"] .pa-v2 .footer-nav .nav-ico { border-radius: 999px; }
html[data-visual="atlas"] .pa-v2 .footer-nav .nav-item.active .nav-ico { background: var(--at-preench); }
html[data-visual="atlas"] .pa-v2 .footer-nav .nav-item.nav-central .nav-ico {
  box-shadow: 0 0 0 4px var(--at-vidro-forte), 0 12px 24px -12px rgba(0, 0, 0, 0.45);
}

/* ==================== INICIO (home) ==================== */
html[data-visual="atlas"] .pa-v2 .v2-home {
  padding-bottom: calc(118px + env(safe-area-inset-bottom, 0px));
}
html[data-visual="atlas"] .pa-v2 .v2-topo-linha .pa-btn-icone,
html[data-visual="atlas"] .pa-v2 .v2-avatar {
  background: var(--at-vidro);
  border: 1px solid var(--at-aresta);
  box-shadow: var(--at-sombra);
  color: var(--at-texto);
}
html[data-visual="atlas"] .pa-v2 .v2-topo-linha .btn-hamburger { margin-left: 0; }
html[data-visual="atlas"] .pa-v2 .v2-saudacao-texto { color: var(--at-texto-2); font-weight: 500; }
html[data-visual="atlas"] .pa-v2 .v2-saudacao-nome { font-weight: 700; }
/* Selo da marca sobre o vidro: aro claro (como os icones do lancador do Atlas) */
html[data-visual="atlas"] .pa-v2 .v2-topo-logo {
  box-shadow: 0 0 0 4px var(--at-vidro-forte), 0 10px 20px -12px rgba(0, 0, 0, 0.45);
}
html[data-visual="atlas"] .pa-v2 .pa-pill-cidade {
  min-height: 40px;
  padding: 0 14px 0 12px;
  border: 1px solid var(--at-aresta);
  border-radius: 999px;
  background: var(--at-vidro);
  box-shadow: var(--at-sombra);
  color: var(--at-texto);
}
html[data-visual="atlas"] .pa-v2 .pa-pill-cidade-nome { font-weight: 600; color: var(--at-texto); }

/* Saldo: painel de vidro forte (unico cartao com blur) */
html[data-visual="atlas"] .pa-v2 .pa-saldo {
  margin-top: 14px;
  background: var(--at-vidro-forte);
  -webkit-backdrop-filter: var(--at-blur);
  backdrop-filter: var(--at-blur);
  box-shadow: var(--at-sombra-flutua);
}
html[data-visual="atlas"] .pa-v2 .pa-saldo::before { display: none; }
html[data-visual="atlas"] .pa-v2 .pa-saldo-rotulo { color: var(--at-texto-2); font-weight: 500; }
html[data-visual="atlas"] .pa-v2 .pa-saldo-numero { font-weight: 700; letter-spacing: -0.04em; }
html[data-visual="atlas"] .pa-v2 .pa-saldo-acoes .pa-btn { min-height: 52px; }
html[data-visual="atlas"] .pa-v2 .pa-saldo-acoes .pa-btn-fantasma { background: var(--at-preench); color: var(--at-texto); }
html[data-visual="atlas"] .pa-v2 .pa-saldo-acoes .pa-btn-fantasma .pa-ico { color: var(--at-texto-2); }

html[data-visual="atlas"] .pa-v2 .v2-secao-titulo { font-weight: 700; letter-spacing: -0.02em; }
html[data-visual="atlas"] .pa-v2 .pa-ticket-id,
html[data-visual="atlas"] .pa-v2 .pa-ticket-linha { color: var(--at-texto-2); }
html[data-visual="atlas"] .pa-v2 .pa-ticket-linha.is-forte { color: var(--at-texto); font-weight: 600; }
html[data-visual="atlas"] .pa-v2 .pa-ticket .pa-anel-rotulo { color: var(--at-texto-2); }
html[data-visual="atlas"] .pa-v2 .pa-ticket-acoes .pa-btn { min-height: 52px; }

/* Atalhos: icone em circulo de vidro (como o lancador do Atlas); o item continua sem cartao */
html[data-visual="atlas"] .pa-v2 .pa-atalho-icone {
  border: 1px solid var(--at-aresta);
  border-radius: 50%;
  background: var(--at-vidro);
  color: var(--at-texto);
  box-shadow: var(--at-sombra);
}
html[data-visual="atlas"] .pa-v2 .pa-atalho-titulo { color: var(--at-texto); font-weight: 600; }

/* ==================== COMPRAR TICKET ==================== */
html[data-visual="atlas"] .pa-v2 .compra { padding-bottom: calc(10.5rem + env(safe-area-inset-bottom, 0px)); }
/* Cabecalho preso: vidro para o conteudo nao "vazar" por baixo ao rolar */
html[data-visual="atlas"] .pa-v2 .pa-cabecalho {
  background: var(--at-vidro-barra);
  -webkit-backdrop-filter: var(--at-blur);
  backdrop-filter: var(--at-blur);
  border-bottom: 1px solid var(--at-linha);
}
html[data-visual="atlas"] .pa-v2 .compra .pa-cabecalho-titulo { font-weight: 700; letter-spacing: -0.02em; }

html[data-visual="atlas"] .pa-v2 .compra-etapa-titulo { font-weight: 700; }
html[data-visual="atlas"] .pa-v2 .compra-etapa-num {
  background: var(--at-vidro-forte);
  color: var(--at-texto);
  box-shadow: inset 0 0 0 1px var(--at-linha);
}
html[data-visual="atlas"] .pa-v2 .compra-etapa-num.is-feito { background: var(--v2-primaria); color: var(--v2-sobre-primaria); box-shadow: none; }

/* Segmento "Meus veiculos | Digitar placa": trilho de vidro + pilula escolhida */
html[data-visual="atlas"] .pa-v2 .compra-segmento,
html[data-visual="atlas"] .pa-v2 .pa-segmento {
  padding: 4px;
  border-radius: 999px;
  background: var(--at-preench);
}
html[data-visual="atlas"] .pa-v2 .compra-segmento > *,
html[data-visual="atlas"] .pa-v2 .pa-segmento > * {
  min-height: 44px;
  border-radius: 999px;
  color: var(--at-texto-2);
}
html[data-visual="atlas"] .pa-v2 .compra-segmento > [aria-selected="true"],
html[data-visual="atlas"] .pa-v2 .pa-segmento > [aria-selected="true"] {
  color: var(--at-texto);
  box-shadow: 0 6px 14px -10px rgba(0, 0, 0, 0.40);
}

/* Opcoes (veiculos, pagamento) e tempos: vidro; escolhido = acento da cidade */
html[data-visual="atlas"] .pa-v2 .compra-opcao,
html[data-visual="atlas"] .pa-v2 .tarifa-card,
html[data-visual="atlas"] .pa-v2 .pagamento-option {
  border: 1px solid var(--at-aresta);
  box-shadow: var(--at-sombra);
}
html[data-visual="atlas"] .pa-v2 .compra-opcao-detalhe,
html[data-visual="atlas"] .pa-v2 .pagamento-desc,
html[data-visual="atlas"] .pa-v2 .tarifa-descricao,
html[data-visual="atlas"] .pa-v2 .tarifa-desc,
html[data-visual="atlas"] .pa-v2 .tarifa-valor { color: var(--at-texto-2); }
html[data-visual="atlas"] .pa-v2 .compra-opcao.is-selecionado,
html[data-visual="atlas"] .pa-v2 .compra-opcao.selected,
html[data-visual="atlas"] .pa-v2 .pagamento-option.selected {
  border-color: var(--v2-primaria);
  box-shadow: inset 0 0 0 1px var(--v2-primaria), var(--at-sombra);
}
html[data-visual="atlas"] .pa-v2 .tarifa-tempo { font-weight: 700; letter-spacing: -0.03em; color: var(--at-texto); }
/* Tempo escolhido: pilula solida na cor da marca (le-se ao sol) */
html[data-visual="atlas"] .pa-v2 .tarifa-card.selected {
  border-color: var(--v2-primaria);
  background: var(--v2-primaria);
  box-shadow: 0 12px 24px -16px rgba(0, 0, 0, 0.50);
}
html[data-visual="atlas"] .pa-v2 .tarifa-card.selected .tarifa-tempo,
html[data-visual="atlas"] .pa-v2 .tarifa-card.selected .tarifa-valor,
html[data-visual="atlas"] .pa-v2 .tarifa-card.selected .tarifa-descricao,
html[data-visual="atlas"] .pa-v2 .tarifa-card.selected .tarifa-desc { color: var(--v2-sobre-primaria); }
html[data-visual="atlas"] .pa-v2 .tarifa-card.selected .tarifa-check { background: var(--v2-sobre-primaria); color: var(--v2-primaria); }
html[data-visual="atlas"] .pa-v2 .pagamento-icon { border-radius: 50%; }
html[data-visual="atlas"] .pa-v2 .resumo-label { color: var(--at-texto-2); }

/* Barra de compra: painel de vidro flutuante com total + botao em pilula de 56px */
html[data-visual="atlas"] .pa-v2 .compra-barra {
  left: 12px;
  right: 12px;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  max-width: 496px;
  margin: 0 auto;
  padding: 10px 10px 10px 20px;
  border: 1px solid var(--at-aresta);
  border-radius: 30px;
  background: var(--at-vidro-barra);
  -webkit-backdrop-filter: var(--at-blur);
  backdrop-filter: var(--at-blur);
  box-shadow: var(--at-sombra-flutua);
}
html[data-visual="atlas"] .pa-v2 .compra-barra-rotulo { color: var(--at-texto-2); }
html[data-visual="atlas"] .pa-v2 .compra-barra-valor { font-weight: 700; letter-spacing: -0.03em; color: var(--at-texto); }
html[data-visual="atlas"] .pa-v2 .compra-barra .btn-comprar { min-height: 56px; border-radius: 999px; }
html[data-visual="atlas"] .pa-v2 .pa-btn-primario:disabled,
html[data-visual="atlas"] .pa-v2 .pa-btn-primario[disabled] {
  opacity: 1;
  background: var(--at-preench);
  color: var(--at-texto-2);
  box-shadow: none;
}

/* ==================== CAMADAS OPACAS (vidro forte com blur): menu, modais, avisos ==================== */
/* Estes ficam por cima de conteudo com texto: precisam de vidro quase opaco para o contraste se manter */
html[data-visual="atlas"] .pa-v2 {
  --at-painel: rgba(246, 248, 252, 0.94);
}
html[data-visual="atlas"][data-tema="escuro"] .pa-v2 {
  --at-painel: rgba(52, 48, 44, 0.96);
}
html[data-visual="atlas"] .pa-v2 .modal-box,
html[data-visual="atlas"] .pa-v2 .toast {
  background: var(--at-painel);
  -webkit-backdrop-filter: var(--at-blur);
  backdrop-filter: var(--at-blur);
  border: 1px solid var(--at-aresta);
}
html[data-visual="atlas"] .pa-v2 .modal-box { border-radius: 30px; }
html[data-visual="atlas"] .pa-v2 #menu-sidebar,
html[data-visual="atlas"] .pa-v2 #menu-sidebar [data-menu-inicial] { background: var(--at-painel) !important; }

/* ==================== TODAS AS TELAS (componentes v2) ==================== */
/* Estrutura: cabecalho preso de vidro em todas as telas (acima ja vale para todos os .pa-cabecalho) */
html[data-visual="atlas"] .pa-v2 .pa-cabecalho-titulo { font-weight: 700; letter-spacing: -0.02em; }
html[data-visual="atlas"] .pa-v2 .pa-titulo { font-weight: 700; letter-spacing: -0.03em; }
html[data-visual="atlas"] .pa-v2 .pa-secao-titulo { font-weight: 700; letter-spacing: -0.02em; }
/* Paginas com barra inferior flutuante: respiro para o ultimo item nao ficar sob o dock */
html[data-visual="atlas"] .pa-v2 .pa-pagina:not(.sem-barra) { padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)); }

/* Cartoes e listas: vidro com fio de luz + sombra suave */
html[data-visual="atlas"] .pa-v2 .pa-lista:not(.sem-cartao),
html[data-visual="atlas"] .pa-v2 .compra-recibo,
html[data-visual="atlas"] .pa-v2 .qr-recibo,
html[data-visual="atlas"] .pa-v2 .comprovante-container,
html[data-visual="atlas"] .pa-v2 .chat-balao,
html[data-visual="atlas"] .pa-v2 .cidade-selector {
  border-color: var(--at-aresta);
  box-shadow: var(--at-sombra);
}
html[data-visual="atlas"] .pa-v2 .pa-item-icone,
html[data-visual="atlas"] .pa-v2 .pa-vazio-icone { border-radius: 50%; }
html[data-visual="atlas"] .pa-v2 .pa-item-detalhe,
html[data-visual="atlas"] .pa-v2 .pa-texto-suave,
html[data-visual="atlas"] .pa-v2 .pa-subtitulo { color: var(--at-texto-2); }
html[data-visual="atlas"] .pa-v2 .pa-vazio-icone {
  background: var(--at-vidro-forte);
  border: 1px solid var(--at-aresta);
  box-shadow: var(--at-sombra);
}
html[data-visual="atlas"] .pa-v2 .pa-aviso { border: 1px solid var(--at-aresta); }

/* Botoes: pilulas (inclusive .btn do main.css usados nos modais e telas antigas) */
html[data-visual="atlas"] .pa-v2 .pa-btn-contorno {
  background: var(--at-vidro);
  border-color: var(--at-aresta);
  color: var(--at-texto);
}
html[data-visual="atlas"] .pa-v2 .btn { border-radius: 999px; min-height: 48px; }
html[data-visual="atlas"] .pa-v2 .modal-box .btn-secondary {
  background: var(--at-preench);
  color: var(--at-texto);
}
html[data-visual="atlas"] .pa-v2 .pa-btn-icone.is-quadrado { border-radius: 999px; }

/* Formularios: campos de vidro claro/grafite, cantos de 14px, foco com anel da cor da cidade */
html[data-visual="atlas"] .pa-v2 .pa-input,
html[data-visual="atlas"] .pa-v2 .pa-select,
html[data-visual="atlas"] .pa-v2 .pa-textarea,
html[data-visual="atlas"] .pa-v2 .form-control,
html[data-visual="atlas"] .pa-v2 .chat-campo {
  min-height: 52px;
  background: var(--v2-campo);
  border-color: var(--v2-campo-borda);
  color: var(--at-texto);
}
html[data-visual="atlas"] .pa-v2 .pa-textarea,
html[data-visual="atlas"] .pa-v2 textarea.form-control { min-height: 112px; }
html[data-visual="atlas"] .pa-v2 .pa-rotulo,
html[data-visual="atlas"] .pa-v2 .form-label { color: var(--at-texto); font-weight: 600; }
html[data-visual="atlas"][data-tema="escuro"] .pa-v2 .pa-select option { color: #F5F2EE; background: #3A3632; }

/* Chips e segmentos: pilulas */
html[data-visual="atlas"] .pa-v2 .pa-chip {
  min-height: 40px;
  background: var(--at-vidro);
  border-color: var(--at-aresta);
  color: var(--at-texto);
}
html[data-visual="atlas"] .pa-v2 .pa-chip.is-ativo,
html[data-visual="atlas"] .pa-v2 .pa-chip[aria-pressed="true"],
html[data-visual="atlas"] .pa-v2 .pa-chip[aria-selected="true"] {
  background: var(--v2-primaria);
  border-color: var(--v2-primaria);
  color: var(--v2-sobre-primaria);
}
html[data-visual="atlas"] .pa-v2 .pa-segmento > .is-ativo,
html[data-visual="atlas"] .pa-v2 .pa-segmento > [aria-pressed="true"] {
  color: var(--at-texto);
  box-shadow: 0 6px 14px -10px rgba(0, 0, 0, 0.40);
}

/* Escuro: pilula escolhida e clara -> texto grafite (>= 7:1) */
html[data-visual="atlas"][data-tema="escuro"] .pa-v2 .pa-segmento > :is(.is-ativo, .active, [aria-selected="true"], [aria-pressed="true"]),
html[data-visual="atlas"][data-tema="escuro"] .pa-v2 .compra-segmento > :is(.is-ativo, .active, [aria-selected="true"], [aria-pressed="true"]) { color: #1E1915; }

/* Placa Mercosul: continua placa (opaca), so arredonda um pouco mais */
html[data-visual="atlas"] .pa-v2 .pa-placa { box-shadow: 0 6px 14px -10px rgba(0, 0, 0, 0.45); }

/* ==================== CAMADAS SOBRE CONTEUDO QUE ROLA / SOBRE O MAPA ==================== */
/* Vidro quase opaco: o texto mantem >= 7:1 qualquer que seja o conteudo por baixo */
html[data-visual="atlas"] .pa-v2 .ajuda-guias-barra {
  background: var(--at-vidro-barra);
  -webkit-backdrop-filter: var(--at-blur);
  backdrop-filter: var(--at-blur);
}
html[data-visual="atlas"] .pa-v2 .chat-composer,
html[data-visual="atlas"] .pa-v2 .bulk-bar,
html[data-visual="atlas"] .pa-v2 .cidade-dropdown,
html[data-visual="atlas"] .pa-v2 .cidade-alerta-box,
html[data-visual="atlas"] .pa-v2 .mapa-flutuante,
html[data-visual="atlas"] .pa-v2 .mapa-stat,
html[data-visual="atlas"] .pa-v2 .leaflet-popup-content-wrapper,
html[data-visual="atlas"] .pa-v2 .leaflet-popup-tip,
html[data-visual="atlas"] .pa-v2 .leaflet-bar a,
html[data-visual="atlas"] .pa-v2 .loading-overlay {
  background: var(--at-painel);
  -webkit-backdrop-filter: var(--at-blur);
  backdrop-filter: var(--at-blur);
  border-color: var(--at-aresta);
}
html[data-visual="atlas"] .pa-v2 .bulk-bar {
  bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  border-radius: 30px;
  box-shadow: var(--at-sombra-flutua);
}
html[data-visual="atlas"] .pa-v2 .cidade-dropdown,
html[data-visual="atlas"] .pa-v2 .cidade-alerta-box,
html[data-visual="atlas"] .pa-v2 .mapa-flutuante { border-radius: 24px; box-shadow: var(--at-sombra-flutua); }
html[data-visual="atlas"] .pa-v2 .leaflet-bar { border-radius: 999px; overflow: hidden; }
/* Mapa: a tela e o proprio mapa; o fundo ambiente nao aparece */
html[data-visual="atlas"] .pa-v2 .mapa-page { background: transparent; }

/* Modais / folhas inferiores / toasts (base acima): sombra flutuante, folha com cantos de cima grandes */
html[data-visual="atlas"] .pa-v2 .modal-box { box-shadow: var(--at-sombra-flutua); }
html[data-visual="atlas"] .pa-v2 .toast { border-radius: 22px; box-shadow: var(--at-sombra-flutua); color: var(--at-texto); }
html[data-visual="atlas"] .pa-v2 .toast-message { color: var(--at-texto); }
html[data-visual="atlas"] .pa-v2 #menu-sidebar { -webkit-backdrop-filter: var(--at-blur); backdrop-filter: var(--at-blur); }
html[data-visual="atlas"] .pa-v2 #menu-sidebar .menu-item { border-radius: 999px; }

/* ==================== LOGIN / CADASTRO / REDEFINIR / ABERTURA ==================== */
html[data-visual="atlas"] .pa-v2 .sem-barra .pa-cabecalho {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 0;
}
html[data-visual="atlas"] .pa-v2 .sem-barra .pa-cabecalho .pa-btn-icone,
html[data-visual="atlas"] .pa-v2 .pa-tema-btn {
  background: var(--at-vidro);
  border: 1px solid var(--at-aresta);
  box-shadow: var(--at-sombra);
  color: var(--at-texto);
}
html[data-visual="atlas"] .pa-v2 .splash-v2 .pa-marca-logo,
html[data-visual="atlas"] .pa-v2 .pa-marca:not(.is-linha) .pa-marca-logo {
  box-shadow: 0 0 0 7px var(--at-vidro-forte), 0 18px 32px -18px rgba(0, 0, 0, 0.45);
}

/* Textos longos (Termos, Privacidade, Excluir conta): o texto corrido fica num painel de vidro */
html[data-visual="atlas"] .pa-v2 .info-legal {
  padding: 20px;
  border: 1px solid var(--at-aresta);
  border-radius: 26px;
  background: var(--at-vidro);
  box-shadow: var(--at-sombra);
}

/* ==================== SELETOR DE VISUAL (Perfil > Aparencia e menu lateral) ==================== */
/* Base em componentes.css (.pa-visual-escolha, existe nos dois visuais); no Atlas vira pilula de 48px */
html[data-visual="atlas"] .pa-v2 .pa-visual-escolha > * { min-height: 44px; }
/* pilula escolhida com contorno: visivel tambem sobre o painel quase branco do menu */
html[data-visual="atlas"] .pa-v2 .pa-segmento > [aria-pressed="true"] { box-shadow: 0 0 0 1px var(--v2-borda-forte), 0 6px 14px -10px rgba(0, 0, 0, 0.40); }