/* Cartao-Scanner POC — re-skin marca AIP (escuro + ouro). Estrutura, nomes de
   classe e densidade preservados; so a linguagem visual mudou. Tokens canonicos
   em design-tokens.css (carregado ANTES deste ficheiro). Regras de marca:
   ouro <10% do ecra (so CTA primario, preco e estado-chave), texto escuro
   (--aip-ink-on-gold) sobre ouro, secundarios = borda + cream sobre surface. */
:root {
  /* fundo / superficies (mapeados para os tokens AIP) */
  --bg: var(--aip-base-900);
  --bg-card: var(--aip-surface-700);
  --ink: var(--aip-ink);
  --ink-soft: var(--aip-ink-muted);
  --line: var(--aip-border);
  /* acento secundario: ouro SO em bordas finas/icones pequenos (permitido pela
     marca); NUNCA como preenchimento de controlos secundarios. */
  --brand: var(--aip-gold-500);
  /* texto sobre superficies tintadas -> cream (controlos secundarios) */
  --brand-dark: var(--aip-ink);
  /* fundos "tintados" do tema antigo -> superficie elevada escura */
  --brand-soft: var(--aip-surface-600);
  /* ouro pleno (CTA primario / preco / estado-chave) */
  --gold-grad: var(--aip-gold-gradient);
  --amber: var(--aip-warning);
  --amber-bg: var(--aip-warning-bg);
  --amber-line: var(--aip-gold-border-soft);
  --ok: var(--aip-success);
  --danger: var(--aip-danger);
  --radius: var(--aip-radius-card);
  --shadow: var(--aip-shadow-2);
  font-synthesis: none;
}

* { box-sizing: border-box; }

/* icones SVG inline (line icons estilo Lucide + glifos de marca). Herdam a cor
   por currentColor; dimensao relativa ao font-size do contexto (botao/tile/badge).
   flex:none impede o encolhimento dentro de containers flex. */
.icon {
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.15em;
  display: inline-block;
  flex: none;
}

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  font-family: var(--aip-font-body);
  color: var(--ink);
  background:
    radial-gradient(1200px 600px at 80% -10%, var(--aip-surface-700) 0%, transparent 55%),
    radial-gradient(1000px 500px at -10% 110%, var(--aip-base-800) 0%, transparent 50%),
    var(--bg);
  -webkit-font-smoothing: antialiased;
  padding: 0 0 48px;
}

/* foco uniforme em todos os interativos: anel border-strong + glow dourado */
:where(button, a, input, select, textarea):focus-visible {
  outline: none;
  border-color: var(--aip-border-strong);
  box-shadow: var(--aip-glow-gold);
}

.app {
  max-width: 520px;
  margin: 0 auto;
  padding: 20px 16px;
}

header.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--aip-ink);
  padding: 8px 4px 18px;
}

/* logotipo da marca (app-icon AIP) no slot quadrado do cabecalho. O icone ja e
   ouro, por isso o fundo do slot e superficie escura (nao o gradiente ouro) para
   o ouro destacar; object-fit contain preserva as proporcoes sem distorcer. */
.logo {
  width: 104px; height: 104px;
  border-radius: 24px;
  background: var(--aip-surface-700);
  object-fit: contain;
  display: block;
  box-shadow: var(--shadow);
}

.brand h1 { font-size: 20px; margin: 0; letter-spacing: -.02em; font-weight: 700; font-family: var(--aip-font-display); }
.brand p  { font-size: 12.5px; margin: 2px 0 0; color: var(--aip-ink-muted); }
.brand-text { min-width: 0; }

/* selector de idioma — discreto, alinhado a direita no header */
.lang-select {
  margin-left: auto;
  align-self: flex-start;
  flex: 0 0 auto;
  background: var(--aip-surface-600);
  color: var(--aip-ink);
  border: 1px solid var(--aip-border-strong);
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 12.5px;
  font-family: inherit;
  cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.lang-select:hover { background: var(--aip-surface-700); }
.lang-select:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
.lang-select option { color: var(--aip-base-900); background: var(--aip-ink); }

.card {
  background: var(--bg-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--aip-border);
  padding: 20px;
  margin-bottom: 16px;
}

.step-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--aip-gold-500);
  font-family: var(--aip-font-mono);
  margin: 0 0 12px;
}

.capture-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

button {
  font: inherit;
  cursor: pointer;
  border: 0;
  border-radius: 12px;
  padding: 13px 16px;
  font-weight: 600;
  transition: transform .06s ease, box-shadow .15s ease, background .15s ease;
}
button:active { transform: translateY(1px); }

.btn-primary {
  background: var(--aip-gold-gradient);
  color: var(--aip-ink-on-gold);
  box-shadow: var(--aip-shadow-1);
}
.btn-primary:hover { box-shadow: var(--aip-glow-gold); }

.btn-ghost {
  background: var(--aip-surface-700);
  color: var(--aip-ink);
  border: 1px solid var(--aip-border-strong);
}
.btn-ghost:hover { background: var(--aip-surface-600); }

.btn-block { width: 100%; }

.btn-row { display: flex; gap: 10px; margin-top: 14px; }
.btn-row > * { flex: 1; }

.hidden { display: none !important; }

/* ===================== PASSO DE RECORTE ===================== */
#cropWrap { margin-top: 14px; }
.crop-help {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  margin: 0 2px 10px;
  text-align: center;
}
.crop-stage {
  position: relative;
  width: 100%;
  height: 60vh;
  max-height: 420px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--aip-base-800);
  touch-action: none;            /* impedir scroll/zoom durante o arrasto */
  -webkit-user-select: none; user-select: none;
}
#cropImg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;            /* mostra a imagem inteira -> mapeamento previsível */
  pointer-events: none;
  display: block;
}
/* máscara: caixa transparente com sombra gigante a escurecer tudo à volta */
.crop-mask {
  position: absolute;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, .68);
  pointer-events: none;          /* cliques passam para a caixa por baixo */
  border-radius: 2px;
}
.crop-box {
  position: absolute;
  border: 2px solid var(--aip-gold-500);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .4);
  cursor: move;
  touch-action: none;
}
.crop-handle {
  position: absolute;
  width: 26px; height: 26px;     /* alvo touch generoso */
  background: var(--aip-ink);
  border: 2px solid var(--brand);
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
  touch-action: none;
}
.crop-handle-nw { left: -13px; top: -13px; cursor: nwse-resize; }
.crop-handle-ne { right: -13px; top: -13px; cursor: nesw-resize; }
.crop-handle-sw { left: -13px; bottom: -13px; cursor: nesw-resize; }
.crop-handle-se { right: -13px; bottom: -13px; cursor: nwse-resize; }

/* camera / preview */
#cameraWrap, #previewWrap {
  margin-top: 14px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--aip-base-800);
}
video, #previewImg {
  width: 100%;
  display: block;
  border-radius: 12px;
}

.hint {
  font-size: 12.5px;
  color: var(--ink-soft);
  margin: 10px 2px 0;
  line-height: 1.5;
}

/* loading */
.loading {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink-soft);
  font-size: 14px;
}
.spinner {
  width: 22px; height: 22px;
  border: 3px solid var(--line);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* form de confirmacao */
.field { margin-bottom: 14px; }
.field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.field input, .field textarea {
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 11px 12px;
  font: inherit;
  color: var(--ink);
  background: var(--aip-surface-600);
  transition: border .15s ease, box-shadow .15s ease;
}
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: var(--aip-glow-gold);
}
.field textarea { resize: vertical; min-height: 64px; }

/* campo baixa-confianca (empresa) */
.field.low-confidence input {
  border-color: var(--amber-line);
  background: var(--amber-bg);
}
.field.low-confidence .conf-note {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--aip-warning);
  margin-top: 6px;
  font-weight: 500;
}

.suggest-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
  padding: 5px 10px;
  background: var(--aip-surface-600);
  border: 1px dashed var(--amber-line);
  border-radius: 999px;
  font-size: 12px;
  color: var(--aip-warning);
  cursor: pointer;
}
.suggest-chip:hover { background: var(--amber-bg); }
.suggest-chip b { color: var(--ink); }

.section-sep {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 18px 0;
}

.morada-block {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 10px;
  background: var(--aip-surface-600);
}
.morada-block .field:last-child { margin-bottom: 0; }
.morada-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--aip-gold-500);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 8px;
  font-family: var(--aip-font-mono);
}

.meta-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.meta-pill {
  font-size: 11px;
  background: var(--aip-surface-600);
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 4px 10px;
  font-weight: 500;
}

/* envio */
.send-result {
  margin-top: 12px;
  padding: 11px 13px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
}
.send-result.ok { background: var(--aip-success-bg); color: var(--ok); border: 1px solid var(--aip-success); }
.send-result.err { background: var(--aip-danger-bg); color: var(--danger); border: 1px solid var(--aip-danger); }

/* campo primario (evento) */
.field.field-primary {
  background: var(--aip-surface-600);
  border: 1.5px solid var(--aip-gold-border-soft);
  border-radius: 14px;
  padding: 13px 14px;
  margin-bottom: 16px;
}
.field.field-primary label { color: var(--aip-ink); }
.field.field-primary .primary-tag {
  display: inline-block;
  background: var(--aip-gold-500);
  color: var(--aip-ink-on-gold);
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  margin-left: 6px;
  letter-spacing: .04em;
  vertical-align: middle;
}
.field.field-primary input {
  border-color: var(--aip-gold-border-soft);
  background: var(--aip-surface-700);
}
.field.field-primary .primary-note {
  font-size: 11.5px;
  color: var(--aip-ink-muted);
  margin-top: 6px;
}

/* conexao: tipo (select) + valor (input) */
.conexao-row { display: flex; gap: 8px; }
.conexao-row select {
  flex-shrink: 0;
  border: 1.5px solid var(--aip-border-strong);
  border-radius: 10px;
  padding: 11px 10px;
  font: inherit;
  color: var(--ink);
  background: var(--aip-surface-600);
  font-weight: 600;
}
.conexao-row select:focus {
  outline: none;
  box-shadow: var(--aip-glow-gold);
}
.conexao-row input { flex: 1; }

/* roll-up: enviar e guardar */
.rollup {
  border: 1.5px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--aip-surface-700);
}
.rollup-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--aip-surface-600);
  border-radius: 0;
  padding: 14px 16px;
  text-align: left;
}
.rollup-head:hover { background: var(--aip-surface-700); }
.rollup-title { margin: 0; }
.rollup-chevron {
  color: var(--aip-gold-500);
  font-size: 14px;
  transition: transform .18s ease;
}
.rollup.open .rollup-chevron { transform: rotate(90deg); }
.rollup-body {
  padding: 12px;
  display: grid;
  gap: 8px;
}
.rollup-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: var(--aip-surface-600);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  text-align: left;
  font-weight: 600;
  color: var(--aip-ink);
}
.rollup-item:hover { background: var(--aip-surface-700); border-color: var(--aip-gold-border-soft); }
.rollup-item-ico { font-size: 20px; flex-shrink: 0; }
.rollup-item-txt { display: flex; flex-direction: column; gap: 1px; }
.rollup-item-txt b { color: var(--ink); font-size: 14px; }
.rollup-item-txt small { color: var(--ink-soft); font-size: 11.5px; font-weight: 500; }
.rollup-webhook { margin: 4px 2px 0; }
.btn-save-contact {
  margin-bottom: 6px;
  font-size: 15px;
  padding: 14px 16px;
}

/* local + GPS */
.local-row { display: flex; gap: 8px; }
.local-row input { flex: 1; }
.btn-gps {
  flex-shrink: 0;
  background: var(--aip-surface-700);
  color: var(--aip-ink);
  border: 1px solid var(--aip-border-strong);
  font-size: 13px;
  padding: 0 14px;
  white-space: nowrap;
}
.btn-gps:hover { background: var(--aip-surface-600); }
.btn-gps:disabled { opacity: .6; cursor: default; }
.gps-note { font-size: 12px; color: var(--ink-soft); margin-top: 6px; }

/* aviso de duplicado */
.dup-warn {
  margin-top: 12px;
  padding: 11px 13px;
  border-radius: 10px;
  font-size: 13px;
  background: var(--amber-bg);
  border: 1px solid var(--aip-warning);
  color: var(--aip-warning);
  line-height: 1.45;
}

/* grelha de destinos */
.dest-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 4px;
}
.dest-grid .btn-primary { grid-column: 1 / -1; }

/* link partilhavel */
.share-box {
  margin-top: 14px;
  padding: 12px;
  background: var(--aip-surface-600);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.share-label { font-size: 12px; color: var(--ink-soft); margin-bottom: 7px; font-weight: 600; }
.share-row { display: flex; gap: 8px; }
.share-row input {
  flex: 1;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 10px 11px;
  font: inherit;
  font-size: 12.5px;
  color: var(--ink);
  background: var(--aip-surface-700);
}
.share-row .btn-ghost { flex-shrink: 0; padding: 0 16px; }

.footer-note {
  text-align: center;
  color: var(--aip-ink-faint);
  font-size: 11.5px;
  margin-top: 22px;
}

/* ===================== NAVEGACAO: Scan / Contactos ===================== */
.nav-tabs {
  display: flex;
  gap: 6px;
  background: var(--aip-surface-700);
  border: 1px solid var(--aip-border);
  border-radius: 12px;
  padding: 5px;
  margin: 0 4px 16px;
}
.nav-tab {
  flex: 1;
  background: transparent;
  color: var(--aip-ink-muted);
  border-radius: 9px;
  padding: 10px 14px;
  font-size: 13.5px;
  font-weight: 600;
}
.nav-tab:hover { color: var(--aip-ink); background: var(--aip-surface-600); }
.nav-tab.active {
  background: var(--aip-surface-600);
  color: var(--aip-ink);
  border: 1px solid var(--aip-border-strong);
  box-shadow: var(--aip-shadow-1);
}

/* ===================== HUB DE CONTACTOS ===================== */
.hub-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 14px;
}
.hub-head .step-title { margin: 0; }
.hub-count { font-size: 12.5px; color: var(--ink-soft); font-weight: 600; font-family: var(--aip-font-mono); }
/* botao de ajuda do AI CRM (substitui o "?" solto): icone claro + nota explicativa */
.hub-help {
  margin-left: auto; align-self: center;
  width: 28px; height: 28px; padding: 0; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--aip-border); background: var(--aip-surface-700);
  color: var(--aip-ink-muted); border-radius: 999px; cursor: pointer;
}
.hub-help .icon { width: 16px; height: 16px; }
.hub-help:hover { border-color: var(--aip-gold-border-soft); color: var(--aip-ink); }
.hub-help:focus-visible { outline: none; box-shadow: var(--aip-glow-gold); }
.hub-help-note {
  margin: -4px 0 14px; padding: 10px 12px;
  font-size: 12.5px; line-height: 1.5; color: var(--aip-ink-muted);
  background: var(--aip-surface-600); border: 1px solid var(--aip-border);
  border-radius: var(--aip-radius-md);
}
/* botao de ajuda do AI CRM (substitui o "?" solto): icone claro + nota toggle */
.hub-help {
  margin-left: auto; flex: 0 0 auto;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: 1px solid var(--aip-border); border-radius: 999px;
  background: var(--aip-surface-700); color: var(--aip-ink-muted); cursor: pointer;
}
.hub-help .icon { width: 16px; height: 16px; }
.hub-help:hover { border-color: var(--aip-gold-border-soft); color: var(--aip-ink); }
.hub-help:focus-visible { outline: none; box-shadow: var(--aip-glow-gold); }
.hub-help-note {
  margin: -6px 0 12px; padding: 10px 12px;
  font-size: 12.5px; color: var(--aip-ink-muted);
  background: var(--aip-surface-600); border: 1px solid var(--aip-border);
  border-radius: var(--aip-radius-md);
}

.hub-controls { margin-bottom: 10px; }
.hub-search {
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 11px 12px;
  font: inherit;
  color: var(--ink);
  background: var(--aip-surface-600);
  margin-bottom: 8px;
}
.hub-search:focus { outline: none; border-color: var(--brand); box-shadow: var(--aip-glow-gold); }
/* filtros numa unica linha com scroll horizontal (compacto, sem 2 filas) */
.hub-filters {
  display: flex; gap: 8px;
  flex-wrap: nowrap; overflow-x: auto;
  -webkit-overflow-scrolling: touch; padding-bottom: 2px;
  scrollbar-width: thin;
}
.hub-filter {
  flex: 0 0 auto;
  min-width: 132px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 9px 10px;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  background: var(--aip-surface-600);
}
.hub-filter:focus { outline: none; border-color: var(--brand); box-shadow: var(--aip-glow-gold); }

.hub-export { display: flex; gap: 8px; margin: 10px 0 16px; }
.hub-export .btn-ghost { flex: 1; font-size: 13px; padding: 9px 12px; }

.hub-list { display: grid; gap: 12px; }

.contact-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--aip-surface-700);
  box-shadow: var(--aip-shadow-1);
}
/* ---- linha compacta (sempre visivel): checkbox + resumo + accoes rapidas ---- */
.cc-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; flex-wrap: wrap; }
/* resumo clicavel (expande/colapsa) — botao "nu", ocupa o espaco disponivel */
.cc-summary {
  flex: 1 1 200px; min-width: 0;
  display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap;
  text-align: left; font: inherit; color: inherit;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.cc-summary:focus-visible { outline: none; box-shadow: var(--aip-glow-gold); border-radius: 8px; }
.cc-summary .cc-id { flex: 0 1 auto; }
.cc-badges { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* badge de estado (leitura) na linha compacta — cor por status (slug estavel) */
.cc-status-badge {
  font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--aip-border); background: var(--aip-surface-600); color: var(--aip-ink);
  white-space: nowrap;
}
.cc-status-badge.status-novo             { color: var(--ink-soft); border-color: var(--line); }
.cc-status-badge.status-lead-inicial     { color: var(--aip-ink); border-color: var(--aip-gold-border-soft); }
.cc-status-badge.status-lead-qualificada { color: var(--aip-warning); border-color: var(--amber-line); background: var(--amber-bg); }
.cc-status-badge.status-cliente          { color: var(--aip-success); border-color: var(--aip-success); background: var(--aip-success-bg); }
.cc-status-badge.status-arquivado        { color: var(--aip-ink-faint); border-color: var(--line); background: var(--aip-base-800); }
/* cluster direito da linha compacta: estrela + accoes rapidas + chevron */
.cc-quick { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; margin-left: auto; }
/* chevron de expansao */
.cc-chevron {
  width: var(--aip-tap-target-min); height: var(--aip-tap-target-min);
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: none; color: var(--aip-ink-muted); cursor: pointer;
  border-radius: var(--aip-radius-sm);
}
.cc-chevron .icon { transition: transform var(--aip-motion-fast) var(--aip-ease-standard); }
.contact-card.is-expanded .cc-chevron .icon { transform: rotate(180deg); }
.cc-chevron:hover { color: var(--aip-ink); }
.cc-chevron:focus-visible { outline: none; box-shadow: var(--aip-glow-gold); }
/* ---- expansao (detalhe): escondida por defeito ---- */
.cc-expand { display: none; padding: 0 14px 14px; }
.contact-card.is-expanded .cc-expand { display: block; }
.cc-expand .cc-thumb-col, .cc-expand .cc-thumb-ph { margin-bottom: 10px; }
/* coluna da miniatura (na expansao) — largura fixa, alinhada a esquerda */
.cc-thumb-col { flex: 0 0 auto; align-self: flex-start; }
.cc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.cc-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cc-id b { font-size: 15px; color: var(--ink); }
.cc-empresa { font-size: 12.5px; color: var(--ink-soft); }

.cc-meta { font-size: 12.5px; color: var(--ink-soft); margin-top: 6px; word-break: break-word; }
.cc-meta .cc-sep { margin: 0 6px; color: var(--line); }
.cc-empty { color: var(--aip-ink-faint); }

.cc-sub { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cc-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--aip-surface-600);
  color: var(--aip-ink);
  border: 1px solid var(--aip-border);
}
.cc-tag-lead { background: var(--amber-bg); color: var(--aip-warning); border-color: var(--aip-gold-border-soft); }
.cc-date { font-size: 11.5px; color: var(--ink-soft); }

.cc-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.cc-status-lbl {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 700;
  color: var(--ink-soft);
  font-family: var(--aip-font-mono);
}
.cc-status-select {
  flex: 1;
  border: 1.5px solid var(--aip-border-strong);
  border-radius: 10px;
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  background: var(--aip-surface-600);
}
.cc-status-select:focus { outline: none; box-shadow: var(--aip-glow-gold); }
/* ===================== COR POR STATUS (slug estavel `status-<slug>`) ===================== */
/* Novo = neutro/cinza · Lead Inicial = superficie/cream · Lead Qualificada = ambar
   Cliente = verde-jade · Arquivado = apagado. Subtil, profissional, legivel sobre escuro. */
.cc-status-select.status-novo            { border-color: var(--aip-border-strong); color: var(--ink-soft); }
.cc-status-select.status-lead-inicial    { border-color: var(--aip-gold-border-soft); color: var(--aip-ink); background: var(--aip-surface-600); }
.cc-status-select.status-lead-qualificada{ border-color: var(--amber-line); color: var(--aip-warning); background: var(--amber-bg); }
.cc-status-select.status-cliente         { border-color: var(--aip-success); color: var(--aip-success); background: var(--aip-success-bg); }
.cc-status-select.status-arquivado       { border-color: var(--line); color: var(--aip-ink-faint); background: var(--aip-base-800); }

/* mesmos tons nos chips de stats do topo (status-<slug> no chip clicavel) */
.hub-stat-btn.status-lead-inicial    { border-color: var(--aip-gold-border-soft); }
.hub-stat-btn.status-lead-inicial b  { color: var(--aip-ink); }
.hub-stat-btn.status-lead-qualificada{ border-color: var(--amber-line); }
.hub-stat-btn.status-lead-qualificada b { color: var(--aip-warning); }
.hub-stat-btn.status-cliente         { border-color: var(--aip-success); }
.hub-stat-btn.status-cliente b       { color: var(--aip-success); }
.hub-stat-btn.status-arquivado       { border-color: var(--line); }
.hub-stat-btn.status-arquivado b     { color: var(--aip-ink-faint); }
.hub-stat-btn.status-novo            { border-color: var(--line); }
/* o chip activo (filtro aplicado) mantem o destaque existente por cima da cor de status */

.cc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.cc-act {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  color: var(--aip-ink);
  background: var(--aip-surface-600);
  border: 1px solid var(--aip-border-strong);
  border-radius: 9px;
  padding: 7px 11px;
  cursor: pointer;
}
.cc-act:hover { background: var(--aip-surface-700); }
.cc-act-ico { font-size: 13px; }
.cc-act-btn { font: inherit; font-weight: 600; }
/* accao destrutiva (apagar) no card */
.cc-act-danger { color: var(--danger); background: var(--aip-danger-bg); border-color: var(--aip-danger); }
.cc-act-danger:hover { background: var(--aip-danger-bg); filter: brightness(1.15); }

/* botao "Limpar tudo" no cabecalho do hub */
.btn-clear-all {
  margin-left: auto;
  font-size: 12px;
  padding: 6px 11px;
  color: var(--danger);
  background: var(--aip-danger-bg);
  border-color: var(--aip-danger);
}
.btn-clear-all:hover { background: var(--aip-danger-bg); filter: brightness(1.15); }

/* stats no topo do hub */
.hub-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0 0 12px;
  font-size: 12.5px;
  color: var(--ink-soft);
}
.hub-stat b { color: var(--ink); font-size: 14px; font-family: var(--aip-font-mono); }
/* chips de stat clicaveis (filtram por status) */
.hub-stat-btn {
  font: inherit;
  font-size: 12.5px;
  color: var(--ink-soft);
  background: var(--aip-surface-700);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 11px;
  cursor: pointer;
}
.hub-stat-btn:hover { background: var(--aip-surface-600); border-color: var(--aip-border-strong); }
.hub-stat-btn.is-active {
  background: var(--aip-surface-600);
  border-color: var(--aip-gold-border-soft);
  color: var(--aip-ink);
}
.hub-stat-btn.is-active b { color: var(--aip-ink); }

/* seletor de follow-up dentro do card */
.cc-fu-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.cc-fu-input {
  flex: 1;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 6px 9px;
  font: inherit;
  font-size: 12.5px;
  color: var(--ink);
  background: var(--aip-surface-600);
}
.cc-fu-input:focus { outline: none; border-color: var(--brand); box-shadow: var(--aip-glow-gold); }

/* accao de merge dentro do aviso de duplicado */
.dup-actions { margin-top: 9px; }
.btn-merge {
  font-size: 12.5px;
  padding: 7px 13px;
  font-weight: 600;
}

/* miniatura no card do hub — coluna fixa a direita, formato PAISAGEM (cartao de visita) */
.cc-thumb {
  width: 120px;
  aspect-ratio: 1.6 / 1;   /* horizontal: preenche sem bandas vazias */
  object-fit: cover;        /* preenche a caixa, pode cortar ligeiramente o fundo */
  border-radius: 10px;
  border: 1px solid var(--line);
  display: block;
  flex-shrink: 0;
}
/* placeholder do card sem foto (manual/link) — mesma caixa paisagem da miniatura,
   superficie escura + borda ouro suave + iniciais/icone em ouro. NUNCA um <img>. */
.cc-thumb-ph {
  align-self: flex-start;
  display: flex; align-items: center; justify-content: center;
  background: var(--aip-surface-600);
  border-color: var(--aip-gold-border-soft);
  color: var(--aip-gold-500);
  overflow: hidden;
}
.cc-thumb-ph .cc-thumb-ph-ini {
  font-family: var(--aip-font-mono);
  font-weight: var(--aip-fw-display);
  font-size: 22px; letter-spacing: 1px; opacity: .85;
}
.cc-thumb-ph .icon { width: 26px; height: 26px; opacity: .7; }
/* ecra estreito (telemovel): miniatura mais pequena, continua paisagem lado a lado */
@media (max-width: 420px) {
  .cc-thumb { width: 92px; }   /* aspect-ratio 1.6/1 mantido -> ~57px de altura */
  .cc-thumb-ph .cc-thumb-ph-ini { font-size: 18px; }
}

/* badge de follow-up */
.cc-fu {
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
  align-self: flex-start;
}
.cc-fu-today { background: var(--aip-info-bg); color: var(--aip-info); }
.cc-fu-overdue { background: var(--aip-danger-bg); color: var(--danger); }

/* badge Premium Card (cartao fisico AIP-NFC21) */
.card-premium-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--aip-gold-bg);
  color: var(--aip-gold-500);
  border: 1px solid var(--aip-gold-border-soft);
  margin-bottom: 10px;
}

/* ===================== MODAL: DETALHE / EDICAO ===================== */
.detail-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .62);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 12px;
  overflow-y: auto;
  z-index: 50;
}
.detail-panel {
  background: var(--bg-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--aip-border);
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}
.detail-head .step-title { margin: 0; }
.detail-x {
  background: var(--aip-surface-600);
  color: var(--ink-soft);
  border-radius: 9px;
  padding: 6px 11px;
  font-size: 14px;
  font-weight: 700;
}
.detail-x:hover { background: var(--aip-surface-700); }
.detail-body { padding: 18px; }
/* foto no detalhe — HORIZONTAL, preenche TODO o espaco (altura natural, zero bandas) */
.detail-thumb {
  width: 100%;
  height: auto;          /* altura natural -> sem caixa fixa, sem bandas vazias */
  display: block;
  border-radius: 12px;
  border: 1px solid var(--line);
  margin-bottom: 16px;
}
/* placeholder do detalhe sem foto — mesma largura da miniatura, caixa paisagem */
.detail-thumb-ph {
  width: 100%;
  aspect-ratio: 1.6 / 1;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  border: 1px solid var(--aip-gold-border-soft);
  background: var(--aip-surface-600);
  color: var(--aip-gold-500);
  margin-bottom: 16px;
}
.detail-thumb-ph .cc-thumb-ph-ini {
  font-family: var(--aip-font-mono);
  font-weight: var(--aip-fw-display);
  font-size: 40px; letter-spacing: 2px; opacity: .85;
}
.detail-thumb-ph .icon { width: 44px; height: 44px; opacity: .7; }
.detail-status {
  width: 100%;
  border: 1.5px solid var(--aip-border-strong);
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  background: var(--aip-surface-600);
}
.detail-status:focus { outline: none; box-shadow: var(--aip-glow-gold); }
#d_ctx_type {
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 11px 12px;
  font: inherit;
  color: var(--ink);
  background: var(--aip-surface-600);
}
.btn-add-morada {
  width: 100%;
  font-size: 13px;
  padding: 9px 12px;
  margin-top: 2px;
}
.detail-foot {
  display: flex;
  gap: 10px;
  padding: 14px 18px;
  border-top: 1px solid var(--line);
  background: var(--aip-base-800);
}
.detail-foot > * { flex: 1; }
#detailResult { padding: 0 18px 16px; }

/* ===================== O MEU PERFIL (OUTPUT F1) ===================== */
#btnProfileSave { margin-top: 4px; }
#profileSaveResult { margin-top: 4px; }
#profileShare { margin-top: 16px; }
#profileShare .share-row { align-items: stretch; }
#profileShare .share-row .btn-ghost { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.profile-qr { margin-top: 14px; text-align: center; }
.profile-qr .share-label { text-align: left; }
#profileQr {
  width: 168px; height: 168px;
  background: var(--aip-ink);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px;
  display: inline-block;
}
.prof-opened {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  background: var(--aip-surface-600);
  border: 1px solid var(--aip-gold-border-soft);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.prof-opened b { color: var(--aip-gold-500); font-size: 18px; font-family: var(--aip-font-mono); }
.prof-sub {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink-soft);
  margin: 14px 0 8px;
  font-family: var(--aip-font-mono);
}
/* mini serie temporal: barras por dia */
.prof-byday {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  min-height: 70px;
  padding: 8px 4px 0;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}
.prof-bar-col { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 0 0 auto; }
.prof-bar {
  width: 22px;
  background: var(--aip-gold-gradient);
  border-radius: 5px 5px 0 0;
  min-height: 4px;
}
.prof-bar-n { font-size: 11px; font-weight: 700; color: var(--aip-gold-500); font-family: var(--aip-font-mono); }
.prof-bar-day { font-size: 10px; color: var(--ink-soft); white-space: nowrap; }
.prof-empty { font-size: 12.5px; color: var(--ink-soft); }
/* lista de aberturas recentes */
.prof-recent { display: grid; gap: 8px; }
.prof-open-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--aip-surface-600);
  font-size: 13px;
}
.prof-open-when { color: var(--ink); font-weight: 600; }
.prof-open-dev { color: var(--ink-soft); font-size: 12px; }

/* cliques por link (breakdown por target) */
.prof-clicks { display: grid; gap: 8px; }
.prof-click-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px;
  background: var(--aip-surface-600); font-size: 13px;
}
.prof-click-tg { color: var(--ink); font-weight: 600; }
.prof-click-n {
  background: var(--aip-gold-500); color: var(--aip-ink-on-gold); font-weight: 700; font-size: 12px;
  min-width: 26px; text-align: center; border-radius: 999px; padding: 2px 8px;
  font-family: var(--aip-font-mono);
}

/* ===================== PERFIL: FOTO + CAMPOS REPETIVEIS ===================== */
.prof-photo-row { display: flex; align-items: center; gap: 14px; }
.prof-photo-preview {
  width: 72px; height: 72px; border-radius: 50%; overflow: hidden; flex: 0 0 auto;
  /* aro dourado de prestigio (foto de IDENTIDADE do dono): anel fino com o ouro da marca */
  background: var(--aip-surface-600); border: 2px solid var(--aip-gold-500);
  display: grid; place-items: center; color: var(--ink-soft); font-size: 11px;
}
.prof-photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.prof-photo-actions { display: flex; flex-direction: column; gap: 6px; }
.repeat-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 2px 0 8px;
}
.repeat-title { margin: 0; }
.btn-add-row { padding: 5px 12px; font-size: 12.5px; flex: 0 0 auto; }
.repeat-list { display: grid; gap: 8px; }
.repeat-row { display: flex; gap: 8px; align-items: center; }
.repeat-label { flex: 0 0 38%; min-width: 0; }
.repeat-value { flex: 1 1 auto; min-width: 0; }
.repeat-rm {
  flex: 0 0 auto; padding: 0 12px; line-height: 1; color: var(--danger);
  align-self: stretch;
}

/* ===================== CARTAO DE ERRO DO SCAN ===================== */
.scan-error { text-align: center; padding: 8px 4px; }
.scan-error-ico { font-size: 40px; line-height: 1; margin-bottom: 8px; color: var(--aip-warning); }
.scan-error-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 8px;
  font-family: var(--aip-font-display);
}
.scan-error-msg {
  font-size: 13px;
  color: var(--danger);
  background: var(--aip-danger-bg);
  border: 1px solid var(--aip-danger);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 0 0 10px;
  word-break: break-word;
  line-height: 1.45;
}
.scan-error-hint {
  font-size: 12.5px;
  color: var(--ink-soft);
  margin: 0 0 16px;
  line-height: 1.5;
}

/* ====================== SOLUCOES AIP (destino do funil) ====================== */
.sol-filters { margin-top: 14px; }
.sol-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.sol-chip {
  border: 1px solid var(--aip-border-strong);
  background: var(--aip-surface-700);
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  cursor: pointer;
  transition: all .15s ease;
}
.sol-chip:hover { border-color: var(--aip-gold-border-soft); color: var(--aip-ink); }
.sol-chip.active {
  background: var(--aip-surface-600);
  border-color: var(--aip-gold-border-soft);
  color: var(--aip-ink);
}
.sol-list { display: flex; flex-direction: column; gap: 14px; }
.sol-loading { color: var(--ink-soft); font-size: 13px; padding: 8px 2px; }
.sol-empty { color: var(--ink-soft); font-size: 13px; padding: 8px 2px; }
.sol-item { padding: 18px; }
.sol-item-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sol-badge {
  display: inline-block;
  background: var(--aip-gold-bg);
  color: var(--aip-gold-500);
  border: 1px solid var(--aip-gold-border-soft);
  border-radius: 8px;
  padding: 3px 9px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .3px;
  font-family: var(--aip-font-mono);
}
.sol-name { margin: 0; font-size: 16px; color: var(--ink); line-height: 1.3; font-family: var(--aip-font-display); }
.sol-horas {
  margin: 12px 0;
  background: var(--aip-success-bg);
  border: 1px solid var(--aip-success);
  border-radius: 12px;
  padding: 10px 14px;
  color: var(--ok);
  font-size: 14px;
}
.sol-horas b { font-size: 20px; font-family: var(--aip-font-mono); }
.sol-block { margin-top: 12px; }
.sol-block-title {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--ink-soft);
  font-family: var(--aip-font-mono);
}
.sol-check, .sol-x { list-style: none; margin: 0; padding: 0; }
.sol-check li, .sol-x li {
  position: relative;
  padding: 3px 0 3px 22px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink);
}
.sol-check li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--ok);
  font-weight: 700;
}
.sol-x li::before {
  content: "\2717";
  position: absolute;
  left: 0;
  color: var(--danger);
  font-weight: 700;
}
.sol-block-probs .sol-x li { color: var(--ink-soft); }
.sol-cta { margin-top: 16px; }

/* ---- Afiliado / Convidar e ganhar ---- */
.card-ref-banner {
  background: var(--aip-surface-600);
  border: 1px solid var(--aip-gold-border-soft);
  border-radius: 12px;
  padding: 10px 14px;
  margin: 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--aip-gold-500);
}
.aff-earned {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  background: var(--aip-surface-600);
  border: 1px solid var(--aip-gold-border-soft);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 12px 0;
  font-size: 14px;
  color: var(--ink-soft);
}
.aff-earned strong { font-size: 22px; color: var(--aip-gold-500); font-family: var(--aip-font-mono); }
.aff-redeem { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px; }
.aff-code {
  display: inline-block;
  background: var(--aip-success-bg);
  border: 1px solid var(--aip-success);
  color: var(--aip-success);
  border-radius: 8px;
  padding: 6px 10px;
  font-family: var(--aip-font-mono);
  font-weight: 700;
  letter-spacing: .5px;
}
.aff-list { margin-top: 4px; }
.aff-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.aff-row:last-child { border-bottom: 0; }
.aff-who { color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.aff-st {
  font-size: 12px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.aff-st-pending { background: var(--amber-bg); color: var(--aip-warning); }
.aff-st-qualified { background: var(--aip-info-bg); color: var(--aip-info); }
.aff-st-paid { background: var(--aip-success-bg); color: var(--aip-success); }
.aff-st-void { background: var(--aip-danger-bg); color: var(--aip-danger); }
#affLink { flex: 1 1 auto; min-width: 0; }
/* servico pre-preenchido no topo do modal de demo */
.demo-service {
  background: var(--aip-surface-600);
  border: 1px solid var(--aip-gold-border-soft);
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 14px;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* =====================================================================
   A3 — camada de UI do AI CRM (favoritos, redes sociais, dashboard 2
   linhas, icones de accao so-icone, zoom do cartao). Tokens AIP, WCAG AA.
   ===================================================================== */

/* ---- cabecalho do card: cluster direito (estrela + badge) ---- */
.cc-head-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* ---- estrela de favorito (1 toque, aria-pressed) ---- */
.cc-fav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--aip-tap-target-min);
  height: var(--aip-tap-target-min);
  border: 0;
  background: none;
  border-radius: var(--aip-radius-sm);
  cursor: pointer;
  margin: -8px -6px -8px 0;   /* alvo 44px sem inchar a linha do cabecalho */
  font-size: 20px;
  line-height: 1;
  color: var(--aip-ink-faint);   /* contorno inactivo */
  transition: color var(--aip-motion-fast) var(--aip-ease-standard),
              transform var(--aip-motion-fast) var(--aip-ease-standard);
}
.cc-fav:hover { color: var(--aip-gold-600); }
.cc-fav.is-on { color: var(--aip-gold-500); }   /* preenchida = ouro */
.cc-fav.is-on:hover { color: var(--aip-gold-600); }
.cc-fav:active { transform: scale(.9); }
.cc-fav:focus-visible { outline: none; border-radius: 999px; box-shadow: var(--aip-glow-gold); }

/* ---- linha de redes sociais (badges so-icone, abrem o perfil) ---- */
.cc-socials { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.cc-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--aip-tap-target-min);
  height: var(--aip-tap-target-min);
  border: 1px solid var(--aip-border-strong);
  background: var(--aip-surface-600);
  border-radius: var(--aip-radius-sm);
  color: var(--aip-ink);
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  transition: border-color var(--aip-motion-fast) var(--aip-ease-standard),
              background var(--aip-motion-fast) var(--aip-ease-standard);
}
.cc-social:hover { border-color: var(--aip-gold-border-soft); background: var(--aip-surface-700); }
.cc-social:focus-visible { outline: none; box-shadow: var(--aip-glow-gold); }
.cc-social-ico { font-family: var(--aip-font-body); line-height: 1; }
.cc-social-facebook .cc-social-ico { font-family: var(--aip-font-display); font-style: italic; }
.cc-social-linkedin .cc-social-ico { font-size: 13px; text-transform: lowercase; letter-spacing: -.02em; }

/* ---- linha de icones de accao: so-icone, sem legenda, alvo 44px ---- */
.cc-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.cc-act.cc-ico {
  width: var(--aip-tap-target-min);
  height: var(--aip-tap-target-min);
  padding: 0;
  justify-content: center;
  gap: 0;
  font-size: 16px;
}
.cc-act.cc-ico .cc-act-ico { font-size: 16px; }
/* estado desabilitado (dado em falta): esmaecido + cursor + aria-disabled no markup */
.cc-act.cc-ico.is-disabled {
  opacity: .4;
  cursor: not-allowed;
  pointer-events: none;
  color: var(--aip-ink-faint);
}

/* ---- dashboard de stats em 2 linhas + cabecalho ---- */
.hub-stats { flex-direction: column; align-items: stretch; gap: 8px; }
.hub-stat-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* fila enxuta de filtros rapidos accionaveis (chips) */
.hub-quick-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ---- filtro rapido Favoritos (chip toggle) ---- */
.hub-quickfilters { display: flex; gap: 8px; margin: 0 0 12px; }
.fav-filter {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: var(--aip-tap-target-min);
  padding: 7px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: var(--aip-fw-semibold);
  color: var(--aip-ink-muted);
  background: var(--aip-surface-700);
  border: 1px solid var(--aip-border);
  border-radius: var(--aip-radius-pill);
  cursor: pointer;
}
.fav-filter:hover { border-color: var(--aip-border-strong); background: var(--aip-surface-600); }
.fav-filter:focus-visible { outline: none; border-color: var(--aip-border-strong); box-shadow: var(--aip-glow-gold); }
.fav-filter .fav-filter-star { color: var(--aip-ink-faint); font-size: 15px; line-height: 1; }
.fav-filter.is-on {
  color: var(--aip-ink);
  background: var(--aip-gold-bg);
  border-color: var(--aip-gold-border-soft);
}
.fav-filter.is-on .fav-filter-star { color: var(--aip-gold-500); }

/* ---- 2 filtros lado a lado, sem scroll horizontal (cabem a 390px) ---- */
.hub-filters-2 { flex-wrap: nowrap; overflow: visible; }
.hub-filters-2 .hub-filter { flex: 1 1 0; min-width: 0; }

/* ---- painel de KPIs do AI CRM (montra de valor): numero grande ouro + rotulo ---- */
.crm-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(74px, 1fr));
  gap: 8px;
  width: 100%;
  margin: 0 0 4px;
}
.crm-kpi {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 11px 12px;
  background: var(--aip-surface-700);
  border: 1px solid var(--aip-border);
  border-radius: var(--aip-radius-md, 12px);
  text-align: left;
}
.crm-kpi-num {
  font-family: var(--aip-font-display);
  font-weight: var(--aip-fw-display, 700);
  font-size: 26px; line-height: 1.04;
  color: var(--aip-gold-500);
}
.crm-kpi-label {
  font-size: 11.5px; color: var(--aip-ink-muted); line-height: 1.2;
}
.crm-kpi-btn { cursor: pointer; font: inherit; }
.crm-kpi-btn:hover { border-color: var(--aip-gold-border-soft); background: var(--aip-surface-600); }
.crm-kpi-btn:focus-visible { outline: none; box-shadow: var(--aip-glow-gold); }
.crm-kpi-btn.is-active { border-color: var(--aip-gold-border-soft); background: var(--aip-gold-bg); }
/* tile de alerta "Atrasados" (so aparece se >0) — realce discreto em tom de aviso */
.crm-kpi-alert { border-color: var(--amber-line); background: var(--aip-warning-bg); }
.crm-kpi-alert .crm-kpi-num { color: var(--aip-warning); }
.crm-kpi-alert.is-active { border-color: var(--aip-warning); }

/* ---- ordenacao: controlo compacto a parte (na fila dos quickfilters) ---- */
.hub-sort-wrap {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: auto;
  padding: 6px 11px;
  background: var(--aip-surface-700);
  border: 1px solid var(--aip-border);
  border-radius: var(--aip-radius-pill);
}
.hub-sort-wrap:focus-within { border-color: var(--aip-border-strong); box-shadow: var(--aip-glow-gold); }
.hub-sort-ico { color: var(--aip-ink-faint); font-size: 13px; line-height: 1; }
.hub-sort {
  font: inherit; font-size: 12.5px;
  color: var(--aip-ink-muted);
  background: none; border: 0; padding: 0; cursor: pointer;
}
.hub-sort:focus { outline: none; }

/* ===================== AI CRM premium — KPIs + filtros 2 + ordenacao ===================== */
/* 2 filtros lado a lado, sem scroll horizontal (cabem a 390px) */
.hub-filters-2 { flex-wrap: nowrap; overflow: visible; }
.hub-filters-2 .hub-filter { flex: 1 1 0; min-width: 0; }

/* painel de KPIs (montra de valor): numero grande em ouro + rotulo pequeno */
.crm-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(76px, 1fr));
  gap: 8px;
  width: 100%;
  margin: 0 0 2px;
}
.crm-kpi {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 11px 12px;
  background: var(--aip-surface-700);
  border: 1px solid var(--aip-border);
  border-radius: var(--aip-radius-md, 12px);
  text-align: left;
}
.crm-kpi-num {
  font-family: var(--aip-font-display);
  font-weight: var(--aip-fw-display, 700);
  font-size: 26px; line-height: 1.05;
  color: var(--aip-gold-500);
}
.crm-kpi-label {
  font-size: 11.5px; line-height: 1.2;
  color: var(--aip-ink-muted);
}
.crm-kpi-btn { cursor: pointer; font: inherit; }
.crm-kpi-btn:hover { border-color: var(--aip-gold-border-soft); background: var(--aip-surface-600); }
.crm-kpi-btn:focus-visible { outline: none; box-shadow: var(--aip-glow-gold); }
.crm-kpi-btn.is-active {
  border-color: var(--aip-gold-border-soft);
  background: var(--aip-gold-bg);
}
/* tom de alerta discreto para "Atrasados" (so aparece quando >0) */
.crm-kpi-alert { border-color: var(--amber-line); background: var(--aip-warning-bg); }
.crm-kpi-alert .crm-kpi-num { color: var(--aip-warning); }
.crm-kpi-alert.is-active { border-color: var(--aip-warning); }

/* ordenacao = controlo compacto a parte (na fila dos quickfilters, alinhado a direita) */
.hub-sort-wrap {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: auto;
  padding: 6px 11px;
  background: var(--aip-surface-700);
  border: 1px solid var(--aip-border);
  border-radius: var(--aip-radius-pill);
}
.hub-sort-wrap:focus-within { border-color: var(--aip-border-strong); box-shadow: var(--aip-glow-gold); }
.hub-sort-ico { color: var(--aip-gold-500); font-size: 13px; line-height: 1; }
.hub-sort {
  font: inherit; font-size: 12.5px;
  color: var(--aip-ink-muted);
  background: none; border: 0; padding: 0;
  cursor: pointer;
}
.hub-sort:focus { outline: none; }

/* ---- miniatura no card vira botao (abre zoom): zera estilo de botao ---- */
button.cc-thumb-col {
  border: 0;
  background: none;
  padding: 0;
  cursor: zoom-in;
}
button.cc-thumb-col:focus-visible { outline: none; box-shadow: var(--aip-glow-gold); border-radius: 10px; }

/* ---- modal de ZOOM do cartao ---- */
.card-zoom {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, .85);
}
.card-zoom.hidden { display: none; }
.card-zoom-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--aip-radius-md);
  box-shadow: var(--aip-shadow-2);
}
.card-zoom-x {
  position: absolute;
  top: 14px;
  right: 14px;
  width: var(--aip-tap-target-min);
  height: var(--aip-tap-target-min);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--aip-border-strong);
  background: var(--aip-surface-700);
  color: var(--aip-ink);
  border-radius: var(--aip-radius-sm);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
}
.card-zoom-x:hover { background: var(--aip-surface-600); }
.card-zoom-x:focus-visible { outline: none; box-shadow: var(--aip-glow-gold); }

/* =====================================================================
   A4 — partilha multicanal do link de afiliado. Tokens AIP, WCAG AA,
   alvos de toque 44px, aria-labels por canal.
   ===================================================================== */
.aff-share { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 4px 0 14px; }
.aff-share-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 700;
  color: var(--ink-soft);
  font-family: var(--aip-font-mono);
}
.aff-share-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.aff-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--aip-tap-target-min);
  height: var(--aip-tap-target-min);
  border: 1px solid var(--aip-border-strong);
  border-radius: var(--aip-radius-sm);
  background: var(--aip-surface-600);
  color: var(--aip-ink);
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--aip-motion-fast) var(--aip-ease-standard),
              background var(--aip-motion-fast) var(--aip-ease-standard);
}
.aff-share-btn:hover { border-color: var(--aip-gold-border-soft); background: var(--aip-surface-700); }
.aff-share-btn:focus-visible { outline: none; box-shadow: var(--aip-glow-gold); }
.aff-share-ico { font-size: 16px; font-weight: 700; line-height: 1; font-family: var(--aip-font-body); }
.aff-share-linkedin .aff-share-ico { font-size: 13px; text-transform: lowercase; letter-spacing: -.02em; }
.aff-share-native .aff-share-ico { font-size: 15px; }

/* =====================================================================
   A5 — accoes do card em LINHA UNICA: 3 primarios inline + kebab de overflow.
   Tokens AIP, WCAG AA, alvos 44px, menu acessivel (role=menu).
   ===================================================================== */
/* a linha de accoes nunca envolve (4 itens cabem na coluna estreita do card) */
.cc-actions { flex-wrap: nowrap; }
/* na linha compacta as accoes vivem no cluster direito: sem a margem de topo do detalhe */
.cc-quick .cc-actions { margin-top: 0; }

/* kebab "⋯" + menu de overflow ancorado ao botao */
.cc-more { position: relative; flex: 0 0 auto; }
.cc-more-menu {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 30;
  min-width: 184px;
  padding: 6px;
  background: var(--aip-surface-700);
  border: 1px solid var(--aip-border-strong);
  border-radius: var(--aip-radius-md);
  box-shadow: var(--aip-shadow-2);
}
.cc-more.is-open .cc-more-menu { display: block; }
.cc-more-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: var(--aip-tap-target-min);
  padding: 8px 12px;
  border: 0;
  border-radius: var(--aip-radius-sm);
  background: none;
  color: var(--aip-ink);
  font: inherit;
  font-size: 13px;
  font-weight: var(--aip-fw-medium);
  text-align: left;
  cursor: pointer;
}
.cc-more-item:hover { background: var(--aip-surface-600); }
.cc-more-item:focus-visible { outline: none; box-shadow: var(--aip-glow-gold); }
.cc-more-ico { width: 20px; text-align: center; font-size: 15px; line-height: 1; flex: 0 0 auto; }
.cc-more-item-danger { color: var(--danger); }
.cc-more-item-danger:hover { background: var(--aip-danger-bg); }

/* =============================================================
   PASSAGEM DE UI v2 (@Uma 2026-06-27) — 6 itens
   Tokens AIP, WCAG AA, alvos 44px, zero hex hardcoded.
   ============================================================= */

/* ---- item 2: cabecalho personalizado (avatar + nome + funcao) ---- */
/* faixa unica: [logo] a esquerda e [identidade + controlos] a direita, tudo
   centrado verticalmente na mesma linha base. Sem o titulo a competir, o logo,
   a identidade, o idioma, o saldo e as configuracoes cabem numa so linha; o
   wrap so dispara se mesmo nao couber num ecra muito estreito. */
header.brand { flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.brand-lead {
  display: flex; align-items: center; gap: 12px;
  flex: 0 0 auto; min-width: 0;
}
.brand-text { min-width: 0; }
.brand-id {
  flex: 0 0 auto;
  margin-left: auto;
  display: flex; align-items: center; gap: 9px; max-width: 100%;
}
.brand-id-meta {
  display: flex; flex-direction: column; align-items: flex-end;
  line-height: 1.2; min-width: 0;
}
.brand-id-name {
  font-size: 13px; font-weight: var(--aip-fw-semibold); color: var(--aip-ink);
  font-family: var(--aip-font-body);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px;
}
.brand-id-role {
  font-size: 11px; color: var(--aip-ink-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px;
}
.brand-id-avatar {
  flex: 0 0 auto;
  width: 38px; height: 38px; border-radius: var(--aip-radius-pill);
  background: var(--aip-surface-600);
  /* aro dourado de prestigio (peca de IDENTIDADE): anel fino com o ouro da marca */
  border: 2px solid var(--aip-gold-500);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  font-family: var(--aip-font-mono); font-size: 13px; font-weight: var(--aip-fw-display);
  color: var(--aip-gold-500);
}
.brand-id-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* controlos compactos a seguir a identidade, na mesma linha; margin-left:auto
   empurra-os (e a identidade) para a direita mesmo antes do login (quando a
   identidade esta oculta e so o idioma aparece) */
.brand-controls {
  flex: 0 0 auto;
  margin-left: auto;
  display: flex; flex-wrap: nowrap; align-items: center;
  gap: 8px; justify-content: flex-end;
}
/* pilula de controlo unificada (idioma · contactos · configuracoes) */
.ctrl {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--aip-surface-600);
  color: var(--aip-ink);
  border: 1px solid var(--aip-border-strong);
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 12.5px;
  font-family: inherit;
  line-height: 1;
  cursor: pointer;
}
.ctrl:hover { background: var(--aip-surface-700); }
.ctrl:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.ctrl-ico { display: inline-flex; align-items: center; color: var(--aip-ink-muted); }
.ctrl-ico .icon { width: 15px; height: 15px; vertical-align: 0; }
.ctrl-caret { display: inline-flex; align-items: center; color: var(--aip-ink-muted); }
.ctrl-caret .icon { width: 14px; height: 14px; vertical-align: 0; }
#saldoValue { font-family: var(--aip-font-mono); font-weight: 600; }

/* menu de configuracoes (dropdown da engrenagem) */
.settings-wrap { position: relative; flex: 0 0 auto; }
.settings-menu {
  position: absolute; right: 0; top: calc(100% + 6px);
  min-width: 180px; z-index: 60;
  background: var(--aip-surface-700);
  border: 1px solid var(--aip-border-strong);
  border-radius: 12px;
  box-shadow: var(--aip-shadow-1);
  padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
}
.settings-menu[hidden] { display: none; }
.settings-menu button {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  background: transparent; border: 0; color: var(--aip-ink);
  font: inherit; font-size: 13px;
  padding: 9px 10px; border-radius: 8px; cursor: pointer;
}
.settings-menu button:hover { background: var(--aip-surface-600); }
.settings-menu button:focus-visible { outline: none; box-shadow: var(--aip-glow-gold); }
.settings-menu .icon { width: 16px; height: 16px; color: var(--aip-ink-muted); flex: none; }
/* idioma dentro do menu: rotulo + globo + select nativo sem moldura propria */
.settings-lang {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 8px;
  font-size: 13px; color: var(--aip-ink);
}
.settings-lang .ctrl-ico { color: var(--aip-ink-muted); flex: none; }
.settings-lang .ctrl-ico .icon { width: 16px; height: 16px; }
.settings-lang-label { flex: 1 1 auto; }
.settings-lang select {
  background: transparent; border: 0; color: var(--aip-ink);
  font: inherit; font-size: 13px; padding: 2px 4px; margin: 0; cursor: pointer;
  -webkit-appearance: none; appearance: none; text-align: right;
}
.settings-lang select:focus-visible { outline: none; box-shadow: var(--aip-glow-gold); border-radius: 6px; }
.settings-lang select option { color: var(--aip-base-900); background: var(--aip-ink); }

/* ---- item 3: hub de aquisicao (separador Adicionar) ---- */
.acq-hub .acq-grid { display: grid; gap: 10px; }
.acq-tile {
  display: flex; align-items: center; gap: 12px; text-align: left;
  width: 100%; padding: 14px; min-height: var(--aip-tap-target-min);
  background: var(--aip-surface-600);
  border: 1px solid var(--aip-border);
  border-radius: var(--aip-radius-md);
  color: var(--aip-ink);
}
.acq-tile:hover { background: var(--aip-surface-700); border-color: var(--aip-border-strong); }
.acq-tile.is-active { border-color: var(--aip-border-strong); box-shadow: var(--aip-shadow-1); }
.acq-tile-primary { border-color: var(--aip-gold-border-soft); }
.acq-tile-primary.is-active { box-shadow: var(--aip-glow-gold); }
.acq-ico {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; background: var(--aip-surface-700);
}
.acq-tile-primary .acq-ico { color: var(--aip-gold-500); }
.acq-tile-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.acq-title { font-size: 15px; font-weight: var(--aip-fw-semibold); color: var(--aip-ink); }
.acq-sub { font-size: 12.5px; color: var(--aip-ink-muted); }

/* ---- item 4: decomposicao de preco do cartao (server authoritative) ---- */
.card-price {
  margin: 12px 0 14px; padding: 14px 16px;
  background: var(--aip-surface-700);
  border: 1px solid var(--aip-border);
  border-radius: var(--aip-radius-md);
}
.card-price-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.card-price-anchor-row { justify-content: flex-end; }
/* linha secundaria: ancora riscada (297) + desconto inline (-150, EARLYBIRDS150) */
.card-price-sub-row {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.card-price-anchor {
  color: var(--aip-ink-muted); font-size: var(--aip-fs-price-strike);
  font-family: var(--aip-font-body); text-decoration: line-through;
}
.card-price-disc-inline { font-size: 14px; color: var(--aip-success); font-family: var(--aip-font-mono); }
.card-price-disc-coupon { color: var(--aip-ink-muted); font-size: 12px; }
.card-price-disc-coupon b { color: var(--aip-ink); font-weight: var(--aip-fw-semibold); }
.card-price-disc-row { margin-top: 4px; }
.card-price-disc-label { font-size: 13px; color: var(--aip-ink-muted); }
.card-price-disc-label b { color: var(--aip-ink); font-family: var(--aip-font-mono); font-weight: var(--aip-fw-semibold); }
.card-price-disc-value { color: var(--aip-success); font-family: var(--aip-font-mono); font-size: 14px; }
/* NUMERO-HEROI: 147 grande, ouro */
.card-price-hero {
  margin: 6px 0 2px;
  font-size: 44px; line-height: 1.05;
  font-weight: var(--aip-fw-display); color: var(--aip-gold-500);
  font-family: var(--aip-font-display); letter-spacing: -0.01em;
}
/* indicador de estado VIES (a verificar / valido / invalido) */
.card-price-vies {
  margin: 4px 0 6px; font-size: 13px; font-family: var(--aip-font-mono);
  color: var(--aip-ink-muted); line-height: 1.4;
}
.card-price-vies.is-ok { color: var(--aip-success); }
.card-price-vies.is-err { color: var(--aip-danger); }
.card-price-vat { margin: 4px 0 0; font-size: 13px; color: var(--aip-ink-muted); line-height: 1.45; }
.card-price-total-row { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--aip-border); }
.card-price-total-label {
  font-size: 13px; font-weight: var(--aip-fw-semibold); color: var(--aip-ink);
  text-transform: uppercase; letter-spacing: .04em; font-family: var(--aip-font-mono);
}
.card-price-total-value {
  font-size: 24px; font-weight: var(--aip-fw-display); color: var(--aip-gold-500);
  font-family: var(--aip-font-display);
}
/* linha do NIF: prefixo do pais (2 letras) + numero (digitos) + "Verificar" */
.card-nif-row { display: flex; gap: 8px; align-items: stretch; }
.card-nif-row #cardNif { flex: 1 1 auto; }
.card-nif-verify { flex: 0 0 auto; white-space: nowrap; }
/* prefixo de pais (estatico, derivado do <select> de pais) */
.card-nif-prefix {
  flex: 0 0 auto;
  display: inline-flex; align-items: center;
  padding: 0 12px; min-height: 44px;
  border: 1.5px solid var(--line); border-radius: 10px;
  background: var(--aip-surface-700); color: var(--ink-soft);
  font: inherit; font-family: var(--aip-font-mono); font-weight: 600;
}
/* nota do gate VIES: morada + pagamento bloqueados ate "Verificar" */
.card-vies-gate-hint {
  margin: -2px 0 12px; font-size: 12px; color: var(--ink-soft); line-height: 1.45;
}
/* estado bloqueado (gate): morada/pagamento desativados ate verificar o VIES */
.field textarea:disabled, .field input:disabled {
  opacity: .55; cursor: not-allowed; background: var(--aip-surface-700);
}
.btn-primary:disabled, .btn-primary[disabled] {
  opacity: .5; cursor: not-allowed; filter: grayscale(.35); box-shadow: none;
}

/* ---- item 5: bloco de argumentos de venda (upsell do cartao) ---- */
.card-sell {
  margin: 14px 0;
  padding: 14px 16px;
  background: var(--aip-surface-600);
  border: 1px solid var(--aip-border);
  border-radius: var(--aip-radius-md);
}
.card-sell-title {
  margin: 0 0 10px; font-size: 14px; font-weight: var(--aip-fw-semibold);
  color: var(--aip-ink); font-family: var(--aip-font-display);
}
.card-sell-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 7px; }
.card-sell-list li { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: var(--aip-ink); }
.card-sell-tick { color: var(--aip-gold-500); font-weight: var(--aip-fw-display); flex: 0 0 auto; }
.card-sell-vs { margin: 0 0 6px; font-size: 12.5px; color: var(--aip-ink-muted); line-height: 1.5; }
.card-sell-result { margin: 0; font-size: 13px; font-weight: var(--aip-fw-semibold); color: var(--aip-gold-500); }

/* ===================== GDPR / "Meus dados" (modal escuro + ouro) =====================
   Submenu de 2 niveis (menu -> Exportar | Apagar). Construido dinamicamente em app.js;
   o tema vem destas classes (zero cores hardcoded, so var(--aip-*)). */
.gdpr-overlay {
  position: fixed; inset: 0; z-index: 1000; display: none;
  background: rgba(0, 0, 0, .62);
  align-items: flex-start; justify-content: center;
  padding: 24px 12px; overflow-y: auto;
}
.gdpr-overlay.open { display: flex; }
.gdpr-box {
  background: var(--aip-surface-700); color: var(--aip-ink);
  border: 1px solid var(--aip-border); border-radius: var(--aip-radius-lg);
  box-shadow: var(--aip-shadow-2);
  width: 100%; max-width: 560px; padding: 24px;
  font-size: 15px; line-height: 1.55;
}
.gdpr-head { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; }
.gdpr-title {
  margin: 0; font-size: 20px; color: var(--aip-ink); font-family: var(--aip-font-display);
}
.gdpr-back {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--aip-surface-600); color: var(--aip-ink);
  border: 1px solid var(--aip-border); border-radius: var(--aip-radius-sm);
  padding: 7px 13px; cursor: pointer; font-weight: 600; font-size: 14px;
}
.gdpr-back:hover { border-color: var(--aip-border-strong); }
.gdpr-back:focus-visible { outline: none; box-shadow: var(--aip-glow-gold); }
.gdpr-back[hidden] { display: none; }
/* submenu (cartoes clicaveis) */
.gdpr-menu { display: flex; flex-direction: column; gap: 12px; }
.gdpr-item {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  background: var(--aip-surface-600); color: var(--aip-ink);
  border: 1px solid var(--aip-border); border-radius: var(--aip-radius-md);
  padding: 16px 18px; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.gdpr-item:hover { border-color: var(--aip-gold-border-soft); background: var(--aip-surface-700); }
.gdpr-item:focus-visible { outline: none; box-shadow: var(--aip-glow-gold); }
.gdpr-item-ico {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; font-size: 20px;
  border-radius: var(--aip-radius-sm);
  background: var(--aip-gold-bg); color: var(--aip-gold-500);
}
.gdpr-item.danger .gdpr-item-ico { background: var(--aip-danger-bg); color: var(--aip-danger); }
.gdpr-item-txt { flex: 1 1 auto; min-width: 0; }
.gdpr-item-lbl { display: block; font-weight: 600; font-size: 15px; color: var(--aip-ink); }
.gdpr-item-chev { flex: 0 0 auto; color: var(--aip-ink-faint); font-size: 24px; line-height: 1; }
/* vistas (menu / exportar / apagar) */
.gdpr-view { display: none; }
.gdpr-view.active { display: block; }
.gdpr-lead { margin: 0 0 14px; color: var(--aip-ink-muted); font-size: 14px; }
.gdpr-note { margin: 0 0 8px; color: var(--aip-ink-muted); font-size: 13.5px; }
.gdpr-label { display: block; margin: 6px 0 6px; font-weight: 600; color: var(--aip-ink); }
.gdpr-input {
  width: 100%; box-sizing: border-box; padding: 11px 12px;
  border: 1px solid var(--aip-border); border-radius: var(--aip-radius-sm);
  background: var(--aip-surface-600); color: var(--aip-ink);
  font: inherit; margin-bottom: 12px;
}
.gdpr-input:focus-visible { outline: none; border-color: var(--aip-border-strong); box-shadow: var(--aip-glow-gold); }
.gdpr-btn-gold {
  background: var(--aip-gold-gradient); color: var(--aip-ink-on-gold);
  border: 0; border-radius: var(--aip-radius-sm);
  padding: 11px 16px; cursor: pointer; font-weight: 600; font-size: 15px;
}
.gdpr-btn-gold:hover { filter: brightness(1.04); }
.gdpr-btn-gold:disabled { opacity: .55; cursor: default; filter: none; }
.gdpr-btn-danger {
  background: var(--aip-danger); color: #fff;
  border: 0; border-radius: var(--aip-radius-sm);
  padding: 11px 16px; cursor: pointer; font-weight: 600; font-size: 15px;
}
.gdpr-btn-danger:hover { filter: brightness(1.05); }
.gdpr-btn-danger:disabled { opacity: .55; cursor: default; filter: none; }
.gdpr-hint { margin: 10px 0 0; font-size: 13px; min-height: 1.2em; color: var(--aip-ink-muted); }
.gdpr-hint.danger { color: var(--aip-danger); }
.gdpr-foot { text-align: right; margin-top: 22px; }

/* ===================== MEU PERFIL: menu de seccoes (1o nivel) =====================
   Cartoes clicaveis (id-card / credit-card / bar-chart / clock / user-plus / wallet)
   que abrem cada vista; "‹ Voltar" e Escape regressam ao menu. Espelha o submenu
   "Os meus dados" (zero cores hardcoded, so var(--aip-*)). Mobile-first (cabe a 390px). */
.pmenu { display: flex; flex-direction: column; gap: 12px; }
.pmenu-item {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  background: var(--aip-surface-700); color: var(--aip-ink);
  border: 1px solid var(--aip-border); border-radius: var(--aip-radius-md);
  padding: 16px 18px; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.pmenu-item:hover { border-color: var(--aip-gold-border-soft); background: var(--aip-surface-600); }
.pmenu-item:focus-visible { outline: none; box-shadow: var(--aip-glow-gold); }
.pmenu-item[hidden] { display: none; }
.pmenu-ico {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border-radius: var(--aip-radius-sm);
  background: var(--aip-gold-bg); color: var(--aip-gold-500);
}
.pmenu-txt { flex: 1 1 auto; min-width: 0; }
.pmenu-lbl { display: block; font-weight: 600; font-size: 15px; color: var(--aip-ink); }
.pmenu-chev { flex: 0 0 auto; color: var(--aip-ink-faint); font-size: 24px; line-height: 1; }

/* vistas do Meu Perfil (cada uma com o seu "‹ Voltar") */
.pview[hidden] { display: none; }
.profile-back {
  display: inline-flex; align-items: center; gap: 5px; margin: 0 0 16px;
  background: var(--aip-surface-600); color: var(--aip-ink);
  border: 1px solid var(--aip-border); border-radius: var(--aip-radius-sm);
  padding: 7px 13px; cursor: pointer; font-weight: 600; font-size: 14px;
}
.profile-back:hover { border-color: var(--aip-border-strong); }
.profile-back:focus-visible { outline: none; box-shadow: var(--aip-glow-gold); }
.aff-balance-note { margin-top: 14px; font-style: italic; }

/* ============ BARRA STICKY "Gravar" (editor do cartao) ============
   Escopo: vive APENAS dentro do #profileCard (vista pvCard) -> nao toca
   scan/CRM/contactos. position: sticky bottom mantem o botao SEMPRE visivel
   enquanto o editor esta no ecra; sendo o ultimo filho do cartao, ao chegar
   ao fundo descansa na sua posicao natural sem tapar o QR/ultimo campo. */
#profileCard { padding-bottom: 4px; }
.profile-save-bar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  /* sangra ate aos limites do cartao (que tem padding: 20px) -> barra full-width */
  margin: 16px -20px -20px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--aip-surface-700);
  border-top: 1px solid var(--aip-border);
  box-shadow: 0 -8px 24px -12px rgba(0, 0, 0, .55);
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}

/* indicador "alteracoes por guardar" — VISUAL-ONLY (sem i18n):
   ponto ambar pulsante no canto do botao Gravar quando ha edicoes por gravar.
   Limpo pelo JS (clearProfileDirty) apos um save com sucesso. */
#btnProfileSave { position: relative; overflow: visible; }
#btnProfileSave.is-dirty::after {
  content: "";
  position: absolute;
  top: -5px; right: -5px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--amber);
  border: 2px solid var(--aip-surface-700);
  box-shadow: 0 0 0 0 rgba(224, 165, 46, .55);
  animation: aipDirtyPulse 1.8s ease-out infinite;
}
@keyframes aipDirtyPulse {
  0%   { box-shadow: 0 0 0 0 rgba(224, 165, 46, .55); }
  70%  { box-shadow: 0 0 0 8px rgba(224, 165, 46, 0); }
  100% { box-shadow: 0 0 0 0 rgba(224, 165, 46, 0); }
}
@media (prefers-reduced-motion: reduce) {
  #btnProfileSave.is-dirty::after { animation: none; }
}