/*
 * Tema Pampulha — base comum do portal Potential (etapa 2 da reavaliação de UX/UI, aprovada em 29/10/2026).
 * Carregado em todas as páginas e apps (o build-portal.mjs injeta o <link> em cada app).
 *
 * Ideia: o modernismo da Pampulha. Branco frio e grafite, ações em azul azulejo,
 * dourado só na marca, títulos em Archivo expandido e texto em Plus Jakarta Sans.
 *
 * Os apps originais têm variáveis próprias (--acc, --ink, --pi-ink…). Aqui elas são remapeadas
 * para os tokens abaixo com ":root:root" (mais forte que o ":root" de cada app, sem depender da ordem).
 * Fiance e FiancePay mantêm o azul-marinho da marca Fiance; recebem só neutros, letra, foco e movimento.
 * O build marca cada app no <html> com data-pa-app="<app>", para os ajustes por app.
 */
/* Letras hospedadas no próprio servidor (licença OFL em /fonts): carregam mesmo sem acesso ao Google Fonts. */
@font-face { font-family: "Archivo"; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 62% 125%; src: url("/fonts/archivo-latin-standard-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Archivo"; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 62% 125%; src: url("/fonts/archivo-latin-ext-standard-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-display: swap; font-weight: 200 800; src: url("/fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-display: swap; font-weight: 200 800; src: url("/fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

:root:root {
  /* Cores (contraste conferido: texto ≥ 4,5:1 sobre o fundo e os cartões) */
  --pa-fundo: #f7f8f9;
  --pa-cartao: #ffffff;
  --pa-grafite: #22262b;       /* texto e faixas escuras — 14,3:1 */
  --pa-grafite-2: #3a4048;
  --pa-mudo: #5a616b;          /* texto secundário — 5,9:1 */
  --pa-linha: #e3e6ea;
  --pa-linha-forte: #cfd5dc;
  --pa-azulejo: #1f4f9a;       /* ações e links — 7,5:1 */
  --pa-azulejo-escuro: #163a73;
  --pa-azulejo-claro: #e8eef7;
  --pa-ouro: #b8912b;          /* só marca e detalhes, nunca texto sobre claro */
  --pa-ouro-escuro: #8a6a1c;   /* dourado para texto sobre claro — 5,0:1 */
  --pa-ouro-no-escuro: #c9a24a;
  --pa-ok: #1f6f4a;
  --pa-ok-claro: #e6f2ec;
  --pa-aviso: #8a5300;
  --pa-aviso-claro: #fbf1dd;
  --pa-erro: #b3261e;
  --pa-erro-claro: #fbe9e7;

  /* Letras */
  --pa-letra: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --pa-titulo: "Archivo", "Plus Jakarta Sans", system-ui, sans-serif;

  /* Cantos por hierarquia: controles 8, cartões 12, painéis 16 */
  --pa-r-p: 8px;
  --pa-r-m: 12px;
  --pa-r-g: 16px;

  /* Sombras em camadas (no lugar de bordas cinzas chapadas) */
  --pa-sombra: 0 0 0 1px rgba(34, 38, 43, .06), 0 1px 2px rgba(34, 38, 43, .06);
  --pa-sombra-alta: 0 0 0 1px rgba(34, 38, 43, .06), 0 1px 2px rgba(34, 38, 43, .06), 0 10px 28px -14px rgba(31, 79, 154, .35);

  /* Movimento: curto e só em resposta a um toque */
  --pa-rapido: 150ms;
  --pa-curva: cubic-bezier(.2, .7, .2, 1);

  /* ---- Portal (início) ---- */
  --pi-ink: var(--pa-grafite);
  --pi-ink2: var(--pa-grafite-2);
  --pi-mut: var(--pa-mudo);
  --pi-line: var(--pa-linha);
  --pi-bg: var(--pa-fundo);
  --pi-card: var(--pa-cartao);
  --pi-gold: var(--pa-ouro-no-escuro);
  --pi-soft: var(--pa-azulejo-claro);
  --pi-f: var(--pa-letra);
  --pi-sh: var(--pa-sombra);

  /* ---- Agenda, Manutenção, Assinatura, Laudo (mesmo esquema de variáveis) ---- */
  --bg: var(--pa-fundo);
  --card: var(--pa-cartao);
  --ink: var(--pa-grafite);
  --mut: var(--pa-mudo);
  --line: var(--pa-linha);
  --ok: var(--pa-ok);
  --warn: var(--pa-aviso);
  --bad: var(--pa-erro);
  --info: var(--pa-azulejo);

  /* ---- Potential Pay, Calculadoras (esquema --surface/--muted/--brand) ---- */
  --surface: var(--pa-cartao);
  --muted: var(--pa-mudo);
  --soft: var(--pa-azulejo-claro);

  /* ---- Loja, Consulta, Buscar imóveis ---- */
  --gold: var(--pa-ouro);
  --warn-bg: var(--pa-aviso-claro);
}

/* Cor de ação: azul azulejo nos apps da Potential (Fiance e FiancePay ficam com o azul-marinho próprio). */
:root:root:not([data-pa-app="fiance"]):not([data-pa-app="fiancepay"]) {
  --acc: var(--pa-azulejo);
  --brand: var(--pa-grafite);
  --brand-2: var(--pa-grafite-2);
  --brand-ink: #ffffff;
  --accent: var(--pa-ouro-no-escuro);
  --f-display: var(--pa-titulo);
  --f-body: var(--pa-letra);
  --f-num: var(--pa-letra);
  --f: var(--pa-letra);
}
:root:root:is([data-pa-app="fiance"], [data-pa-app="fiancepay"]) { --f: var(--pa-letra); }
/* Calculadoras: o "--brand" é a cor dos botões de ação. */
:root:root:root[data-pa-app="calculos"] { --brand: var(--pa-azulejo); --brand-ink: #ffffff; }

/* ---- Letra e acabamento de texto ---- */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body { font-family: var(--pa-letra) !important; font-variant-numeric: tabular-nums; }
:where(h1, h2) { font-family: var(--pa-titulo); font-stretch: 112%; letter-spacing: -.005em; text-wrap: balance; }
:where(h3, h4) { text-wrap: balance; }
:where(p, li, dd) { text-wrap: pretty; }
:where(button, input, select, textarea) { font-family: inherit; }

/* ---- Foco visível em tudo o que se usa pelo teclado (WCAG 2.4.7) ---- */
:focus-visible { outline: 2px solid var(--pa-azulejo) !important; outline-offset: 2px !important; }

/* ---- Toque: resposta imediata e transições curtas, só de cor, sombra e escala ---- */
:where(button, a, [role="button"], input, select, textarea, summary) {
  transition-property: background-color, border-color, color, box-shadow, transform, opacity;
  transition-duration: var(--pa-rapido);
  transition-timing-function: var(--pa-curva);
}
:where(button, [role="button"]):not(:disabled):active { transform: scale(.97); }
:where(input, select, textarea)::placeholder { color: #7a828c; opacity: 1; }

/* ---- Área de toque mínima no celular (WCAG 2.5.8; alvo de 44 px) ---- */
@media (pointer: coarse) {
  :where(button, select, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"])) { min-height: 44px; }
  :where(input[type="checkbox"], input[type="radio"]) { min-width: 20px; min-height: 20px; }
}

/* ---- Movimento reduzido: tudo para ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Portal: títulos de seção em frase normal, sem maiúsculas espaçadas ---- */
.pi-sec {
  font-family: var(--pa-titulo) !important;
  font-stretch: 112%;
  font-size: 19px !important;
  font-weight: 650 !important;
  letter-spacing: -.005em !important;
  text-transform: none !important;
  color: var(--pa-grafite) !important;
}

/* ---- Loja: cartões sem a borda dourada pesada; botão de pagar na cor de ação ---- */
[data-pa-app="loja"] .plan { border: 0; box-shadow: var(--pa-sombra); }
[data-pa-app="loja"] .pay { background: var(--pa-azulejo); color: #ffffff; }
[data-pa-app="loja"] .pay:not(:disabled):hover { background: var(--pa-azulejo-escuro); }

/* ---- Calculadoras: rótulos e etiquetas em frase normal ---- */
[data-pa-app="calculos"] label,
[data-pa-app="calculos"] .tag,
[data-pa-app="calculos"] .result .top .k { text-transform: none; letter-spacing: 0; }
[data-pa-app="calculos"] label { font-size: 13px; }

/* ======================================================================
 * Portal: início (etapa 4). A estrutura é montada por /portal-inicio.js.
 * ==================================================================== */
[data-pa-app="portal"] .cover.pa-hero {
  min-height: 0 !important; display: block; text-align: left;
  background: var(--pa-grafite) !important;
  padding: 28px 16px 72px !important;
}
.cover.pa-hero::before {
  content: ""; display: block; position: absolute; inset: 0 0 0 38%; height: auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' fill='none'%3E%3Crect x='.5' y='.5' width='63' height='63' stroke='%233d5f93'/%3E%3Cpath d='M0 32A32 32 0 0 1 32 0M32 64A32 32 0 0 1 64 32' stroke='%233d5f93'/%3E%3Cpath d='M32 18 46 32 32 46 18 32Z' stroke='%23c9a24a'/%3E%3C/svg%3E") 0 0 / 64px 64px repeat;
  opacity: .5; -webkit-mask-image: linear-gradient(90deg, transparent, #000 55%); mask-image: linear-gradient(90deg, transparent, #000 55%);
  pointer-events: none;
}
.cover.pa-hero::after { display: none; }
.pa-hero .cover-inner { max-width: 1048px; margin: 0 auto; position: relative; }
.pa-hero .cover-img { width: min(240px, 58vw); height: auto; margin: 0 0 32px; display: block; }
.pa-hero-t { margin: 0 0 12px; max-width: 660px; color: #ffffff; font-family: var(--pa-titulo); font-stretch: 118%; font-weight: 650; font-size: clamp(30px, 5vw, 46px); line-height: 1.08; letter-spacing: -.01em; }
.pa-hero-p { margin: 0; max-width: 600px; color: #c4cad2; font-size: clamp(15px, 2vw, 17px); line-height: 1.55; }

.pa-principais { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: -64px 0 44px; position: relative; z-index: 2; }
@media (max-width: 900px) { .pa-principais { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
.pa-principais .pa-acao {
  box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; width: 100%; min-height: 0; margin: 0;
  padding: 20px; background: var(--pa-cartao); color: var(--pa-grafite); border: 0; border-radius: var(--pa-r-g);
  box-shadow: var(--pa-sombra-alta); text-decoration: none; text-align: left; font: inherit; cursor: pointer;
}
.pa-principais .pa-acao:hover { box-shadow: 0 0 0 1px rgba(31,79,154,.25), 0 14px 30px -14px rgba(31,79,154,.45); }
.pa-acao .pi-ic { width: 44px; height: 44px; border-radius: 10px; border: 0; background: var(--pa-azulejo-claro); color: var(--pa-azulejo); font-size: 21px; display: grid; place-items: center; }
.pa-acao .pi-lb { font-size: 17px; font-weight: 700; line-height: 1.25; }
.pa-acao-d { margin-top: -6px; font-size: 14px; line-height: 1.45; color: var(--pa-mudo); font-weight: 400; }
@media (max-width: 520px) { .pa-principais .pa-acao { padding: 16px; } .pa-acao .pi-lb { font-size: 15.5px; } .pa-acao-d { font-size: 13px; } }

.pa-grupos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 40px; margin: 0 0 36px; }
@media (max-width: 860px) { .pa-grupos { grid-template-columns: 1fr; } }
.pa-grupo-t { margin: 0 0 4px; font-size: 20px; font-weight: 650; color: var(--pa-grafite); }
.pa-grupo .pa-linha, .pa-equipe .pa-linha {
  box-sizing: border-box; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; margin: 0; padding: 6px 2px;
  background: none; color: var(--pa-grafite); border: 0; border-bottom: 1px solid var(--pa-linha); border-radius: 0;
  font: 500 15px/1.35 var(--pa-letra); text-align: left; text-decoration: none; cursor: pointer; box-shadow: none;
}
.pa-linha .pi-ic { width: 32px; height: 32px; border-radius: 8px; border: 0; background: var(--pa-azulejo-claro); color: var(--pa-azulejo); font-size: 16px; display: grid; place-items: center; flex: none; }
.pa-linha .pi-lb { flex: 1; }
.pa-linha::after {
  content: ""; flex: none; width: 18px; height: 18px; background: var(--pa-mudo);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pa-linha[target="_blank"]::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10M7 17 17 7'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10M7 17 17 7'/%3E%3C/svg%3E");
}
.pa-linha:hover { color: var(--pa-azulejo); }
.pa-linha:hover::after { background: var(--pa-azulejo); }

.pa-equipe { margin: 0 0 36px; padding: 20px 24px 12px; background: var(--pa-cartao); border-radius: var(--pa-r-g); box-shadow: var(--pa-sombra); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; }
.pa-equipe .pa-grupo-t { grid-column: 1 / -1; }
@media (max-width: 860px) { .pa-equipe { grid-template-columns: 1fr; padding: 16px 16px 8px; } }
.pa-equipe-convite { margin: -12px 0 36px; color: var(--pa-mudo); font-size: 14px; }
.pa-link { display: inline; min-height: 0 !important; padding: 0; margin: 0; background: none; border: 0; color: var(--pa-azulejo); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Cadeado dos apps internos: ícone de traço no lugar do emoji. */
html .piLock .pi-lb::after, html .piLock:not(.pa-linha):not(.pa-acao)::after {
  content: ""; display: inline-block; width: .85em; height: .85em; margin-left: .4em; vertical-align: -.06em; background: currentColor; opacity: .6;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Chat "Pergunte à Potential" e janelas do portal na cor de ação. */
html form#chatForm button { background: var(--pa-azulejo) !important; }
html form#chatForm { border-color: var(--pa-linha-forte) !important; }
html .chip:hover { border-color: var(--pa-azulejo) !important; background: #f3f6fa !important; }
html .helpBtn:hover { border-color: rgba(31,79,154,.35) !important; }
html .helpBtn::after { color: var(--pa-mudo); }

.pa-rodape { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px 24px; margin: 40px 0 0; padding: 24px 0 8px; border-top: 1px solid var(--pa-linha); color: var(--pa-mudo); font-size: 13px; }
.pa-rodape-marca { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.pa-rodape-marca img { display: block; width: 130px; height: auto; }
.pa-rodape-end { font-style: normal; }
.pa-rodape-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.pa-rodape-links a { color: var(--pa-azulejo); }

/* Botão e janelas da Área da equipe (portal-bridge.js), no tema. */
html #piTeam > button { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; background: rgba(34,38,43,.92) !important; color: #ffffff !important; border: 1px solid #4a525c !important; border-radius: 8px !important; box-shadow: none !important; font: 600 13px var(--pa-letra) !important; padding: 8px 14px !important; }
html #piTeam .m { background: var(--pa-grafite) !important; border-color: #4a525c !important; }
html #piTeam .m a, html #piTeam .m button { font-family: var(--pa-letra) !important; }
html #piTeam .m a:hover, html #piTeam .m button:hover { background: #343a42 !important; }
html #piLogin form, html #piInfo .c { background: var(--pa-grafite) !important; border-color: #4a525c !important; font-family: var(--pa-letra) !important; }
html #piLogin h2, html #piInfo h2 { color: #ffffff !important; font-family: var(--pa-titulo); font-stretch: 112%; }
html #piLogin input { background: #1b1e22 !important; border-color: #4a525c !important; }
html #piLogin button, html #piInfo .r a, html #piInfo .r button { font-family: var(--pa-letra) !important; border-color: #4a525c !important; }
html #piLogin button.p, html #piInfo .r a.p { background: var(--pa-azulejo) !important; border-color: var(--pa-azulejo) !important; color: #ffffff !important; }
html #piLogin a { color: #9db8e6 !important; }