/* Login e cadastro do app (POL-134): só o visual, igual às telas Entrar (Figma 33:598) e Criar conta (18:358) do site.
   Tokens com os mesmos nomes de site/css/portal.css (cópia mínima: o domínio do app não serve o css do site).
   Tudo sob body.av-pagina: mais específico que o Tailwind do CDN, que entra depois no <head>. Não muda comportamento.
   Arquivo com ?v= sai com cache imutável de 1 ano: ao editar este CSS, troque o ?v= em login.html e register.html (o teste confere que é o mesmo). */
:root {
  --cor-navy-900: #141238;
  --cor-navy-800: #1E1B4B;
  --cor-azul-600: #2851DE;
  --cor-azul-700: #1D3FB8;
  --cor-acento-400: #7FA2F9;
  --cor-acento-300: #A4B8FC;
  --cor-azul-200: #C7D6FE;
  --cor-azul-100: #E0E9FF;
  --cor-azul-50: #F0F4FF;
  --cor-branco: #FFFFFF;
  --cor-texto-suave: #55597A;
  --raio-sm: 8px;
  --raio-md: 12px;
  --raio-lg: 16px;
  --raio-xl: 24px;
  --raio-foto: 48px;
  --raio-pilula: 999px;
  --av-foco: 0 0 0 3px color-mix(in srgb, var(--cor-azul-600) 18%, transparent);
}

/* ---------- lado da foto (esquerda) ---------- */
body.av-pagina .av-foto { position: relative; overflow: hidden; isolation: isolate; border-radius: 0 var(--raio-foto) var(--raio-foto) 0; background: var(--cor-navy-900); padding: 64px clamp(32px, 6.7vw, 96px); justify-content: center; }
body.av-pagina .av-foto .bg-photo { background-image: url('../img/acesso-torres.webp'); background-size: cover; background-position: center; filter: none; z-index: -2; }
body.av-pagina .av-foto .bg-overlay { background: linear-gradient(90deg, color-mix(in srgb, var(--cor-navy-900) 92%, transparent) 0%, color-mix(in srgb, var(--cor-navy-900) 55%, transparent) 100%); z-index: -1; }
body.av-pagina .av-foto .bg-overlay::after { content: none; }
.av-foto__corpo { position: relative; display: flex; flex-direction: column; gap: 24px; max-width: 600px; }
.av-foto__ladrilho { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: var(--raio-xl); background: var(--cor-branco); }
.av-foto__ladrilho img { width: 40px; height: 40px; }
.av-foto__titulo { margin: 0; font: 800 clamp(40px, 4.45vw, 64px)/0.98 'Plus Jakarta Sans', sans-serif; letter-spacing: -0.03em; color: var(--cor-branco); }
.av-foto__titulo .av-ponto { color: var(--cor-acento-400); }
.av-foto__sub { margin: 0; font: 500 18px/1.5 'Plus Jakarta Sans', sans-serif; color: var(--cor-azul-200); }
.av-info { margin: 0; padding: 20px; list-style: none; display: flex; flex-direction: column; gap: 14px; border: 1px solid color-mix(in srgb, var(--cor-branco) 18%, transparent); border-radius: var(--raio-lg); background: color-mix(in srgb, var(--cor-branco) 8%, transparent); }
.av-info li { display: flex; align-items: center; gap: 12px; font: 400 16px/1.55 'Plus Jakarta Sans', sans-serif; color: var(--cor-branco); }
.av-info i { width: 18px; text-align: center; font-size: 16px; color: var(--cor-acento-400); }
.av-foto__credito { position: absolute; left: 24px; bottom: 16px; margin: 0; font: 500 12px/1.4 'Plus Jakarta Sans', sans-serif; color: var(--cor-branco); opacity: .85; }

/* ---------- lado do formulário (direita) ---------- */
body.av-pagina .av-lado { overflow-y: auto; }
body.av-pagina .av-coluna { max-width: 440px; }
body.av-pagina .av-logo { display: block; width: 158px; margin-bottom: 20px; }
body.av-pagina .av-logo img { display: block; width: 158px; height: 32px; }
body.av-pagina .av-titulo { margin: 0 0 6px; font: 800 48px/0.98 'Plus Jakarta Sans', sans-serif; letter-spacing: -0.03em; color: var(--cor-navy-800); }
body.av-pagina .av-titulo .av-ponto { color: var(--cor-azul-600); }
body.av-pagina .av-sub { margin: 0 0 20px; font: 400 16px/1.55 'Plus Jakarta Sans', sans-serif; color: var(--cor-texto-suave); }
/* rodapé: alinhado à coluna do formulário, com respiro */
body.av-pagina .av-rodape { width: 100%; max-width: 440px; margin-left: auto; margin-right: auto; padding-top: 24px; }

/* títulos das outras telas (redefinir senha, nova senha, conectar organização) */
body.av-pagina h1:not(.av-titulo) { font-weight: 800; font-size: 32px; line-height: 1.05; letter-spacing: -0.02em; color: var(--cor-navy-800); }

body.av-pagina label.block { margin-bottom: 8px; font: 700 15px/1 'Plus Jakarta Sans', sans-serif; color: var(--cor-navy-800); }
body.av-pagina .input-field { min-height: 56px; padding: 14px 16px; border: 1.5px solid var(--cor-azul-200); border-radius: var(--raio-md); background-color: var(--cor-branco); color: var(--cor-navy-800); font-size: 16px; line-height: 1.55; text-align: left; }
body.av-pagina .input-field.pr-12 { padding-right: 48px; }
body.av-pagina .input-field::placeholder { color: var(--cor-texto-suave); opacity: 1; }
body.av-pagina .input-field:focus { outline: none; border-color: var(--cor-azul-600); box-shadow: var(--av-foco); }
body.av-pagina .input-field:disabled { background-color: var(--cor-azul-50); color: var(--cor-texto-suave); border-color: var(--cor-azul-100); opacity: 1; cursor: not-allowed; }
/* sem os ícones à esquerda dos campos (o Figma não tem); setas de select e o olho da senha ficam */
body.av-pagina .relative > i.left-4 { display: none; }
body.av-pagina .relative > button.absolute { color: var(--cor-texto-suave); }
body.av-pagina .relative > button.absolute:hover { color: var(--cor-navy-800); }

body.av-pagina .btn-primary { min-height: 44px; padding: 14px 22px; border-radius: var(--raio-pilula); background: var(--cor-azul-600); font: 700 15px/1 'Plus Jakarta Sans', sans-serif; transition: background .15s; }
body.av-pagina .btn-primary:hover:not(:disabled) { background: var(--cor-azul-700); transform: none; box-shadow: none; }
body.av-pagina .btn-primary:disabled { opacity: .7; }
body.av-pagina button.border.border-gray-200.rounded-xl:not(.h-11):not(.h-12) { border: 1.5px solid var(--cor-azul-200); border-radius: var(--raio-pilula); background: var(--cor-branco); color: var(--cor-navy-800); font-weight: 700; }   /* botão Voltar do cadastro */
body.av-pagina .btn-primary.flex-\[2\] { flex: 2; }

/* caixas de marcar (lembrar de mim, termos, rede): 18 px, borda azul-200, raio 8 como no Figma */
body.av-pagina input[type="checkbox"] { appearance: none; -webkit-appearance: none; display: inline-grid; place-content: center; flex: none; width: 18px; height: 18px; margin: 0; border: 1px solid var(--cor-azul-200); border-radius: var(--raio-sm); background: var(--cor-branco); cursor: pointer; accent-color: var(--cor-azul-600); }
body.av-pagina input[type="checkbox"]::before { content: ''; width: 10px; height: 8px; background: var(--cor-branco); clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%); transform: scale(0); transition: transform .1s; }
body.av-pagina input[type="checkbox"]:checked { border-color: var(--cor-azul-600); background: var(--cor-azul-600); }
body.av-pagina input[type="checkbox"]:checked::before { transform: scale(1); }
body.av-pagina input[type="checkbox"]:focus-visible, body.av-pagina a:focus-visible, body.av-pagina button:focus-visible { outline: 3px solid var(--cor-azul-600); outline-offset: 2px; }

/* o indigo do app vira o azul do Figma (as classes primary-* vêm da configuração do Tailwind, que não se mexe) */
body.av-pagina .text-primary-600, body.av-pagina .hover\:text-primary-700:hover, body.av-pagina .text-primary-600.font-semibold { color: var(--cor-azul-600); }
body.av-pagina .bg-primary-600 { background-color: var(--cor-azul-600); }
body.av-pagina .bg-primary-950 { background-color: var(--cor-navy-900); }
body.av-pagina .bg-primary-50 { background-color: var(--cor-azul-50); }
body.av-pagina .border-primary-200 { border-color: var(--cor-azul-200); }
body.av-pagina .accent-primary-600 { accent-color: var(--cor-azul-600); }
body.av-pagina .hover\:text-primary-600:hover { color: var(--cor-azul-700); }
body.av-pagina .hover\:bg-primary-50:hover { background-color: var(--cor-azul-50); }
body.av-pagina .hover\:bg-primary-700:hover { background-color: var(--cor-azul-700); }
body.av-pagina .step.bg-gray-200 { background-color: var(--cor-azul-100); color: var(--cor-azul-700); }

/* select pesquisável do cadastro (js/searchable-select.js injeta o CSS dele; aqui só o mesmo formato dos campos) */
body.av-pagina .pcs-control { min-height: 56px; padding: 14px 16px; border: 1.5px solid var(--cor-azul-200); border-radius: var(--raio-md); font-size: 16px; color: var(--cor-navy-800); }
body.av-pagina .pcs-control:hover { border-color: var(--cor-azul-200); }
body.av-pagina .pcs.open .pcs-control { border-color: var(--cor-azul-600); box-shadow: var(--av-foco); }
body.av-pagina .pcs-value.placeholder { color: var(--cor-texto-suave); }
body.av-pagina .pcs-caret { color: var(--cor-texto-suave); }
body.av-pagina .pcs-panel { border-color: var(--cor-azul-200); border-radius: var(--raio-md); }
body.av-pagina .pcs-search:focus { border-color: var(--cor-azul-600); }
body.av-pagina .pcs-opt.active, body.av-pagina .pcs-opt:hover { background: var(--cor-azul-50); }
body.av-pagina .pcs-opt.selected { color: var(--cor-azul-700); }

/* a seta fixa do select original duplica a do select pesquisável; e o placeholder da Cidade cabe na meia coluna */
body.av-pagina .pcs ~ i.fa-chevron-down { display: none; }
body.av-pagina #cidade { text-overflow: ellipsis; }
body.av-pagina #cidade::placeholder { font-size: 14px; }

/* indicador de passos do cadastro */
body.av-pagina .step-indicator .step.active { background: var(--cor-azul-600); color: var(--cor-branco); }
body.av-pagina .step-indicator .line.active { background: var(--cor-azul-600); }

/* "Já tem conta?" / "Não tem conta?": divisor + texto centralizado */
body.av-pagina .av-trocar { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--cor-azul-100); text-align: center; }
body.av-pagina .av-trocar p { font: 400 16px/1.55 'Plus Jakarta Sans', sans-serif; color: var(--cor-texto-suave); }
body.av-pagina .av-trocar a { font-weight: 700; color: var(--cor-azul-600); }
body.av-pagina .av-trocar a:hover { text-decoration: underline; }

/* login social (mantido; só o formato) */
body.av-pagina button.h-11, body.av-pagina button.h-12 { height: 48px; border: 1.5px solid var(--cor-azul-200); border-radius: var(--raio-pilula); }
body.av-pagina button.h-11:hover, body.av-pagina button.h-12:hover { background: var(--cor-azul-50); border-color: var(--cor-azul-200); }
body.av-pagina .bg-gray-200 { background-color: var(--cor-azul-100); }

/* colunas da grade do cadastro podem encolher (nomes longos de cidade, painel do select) */
body.av-pagina .grid > * { min-width: 0; }

/* desktop com pouca altura (notebook com barras do navegador): o painel da foto não corta o texto */
@media (min-width: 1024px) and (max-height: 760px) {
  body.av-pagina .av-foto { padding-top: 32px; padding-bottom: 48px; }
  body.av-pagina .av-foto__corpo { gap: 16px; }
  body.av-pagina .av-foto__titulo { font-size: 40px; }
  body.av-pagina .av-info { display: none; }
}

/* alto contraste (Windows): o fundo some, então a marca da caixa marcada usa a cor do texto do sistema */
@media (forced-colors: active) {
  body.av-pagina input[type="checkbox"]:checked::before { background: CanvasText; }
}

@media (max-width: 767px) {
  body.av-pagina .av-titulo { font-size: 36px; }
  body.av-pagina h1:not(.av-titulo) { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) { body.av-pagina * { transition: none !important; } }