/* ════════════════════════════════════════════════════════════════════════
   site.css — layouts específicos do ADG Conecta (shell + telas)
   ════════════════════════════════════════════════════════════════════════ */

/* ──────── Barra de demonstração (só no protótipo Fase 0) ──────── */
.demo-bar {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  padding: var(--space-2) var(--space-4);
  background: var(--neutral-900); color: var(--neutral-100);
  font-size: var(--text-xs);
}
.demo-bar__tag { font-weight: var(--fw-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--accent-blue-100); }
.demo-bar__links { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.demo-bar a {
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-full);
  text-decoration: none; color: var(--neutral-100);
  border: 1px solid var(--neutral-700);
}
.demo-bar a:hover { background: var(--neutral-800); }
.demo-bar a.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ──────── Containers ──────── */
.page { max-width: 1040px; margin: 0 auto; padding: var(--space-6) var(--space-5) var(--space-12); }
.page--narrow { max-width: 480px; }

/* ════════════════════════════════════════════════════════════════════════
   SUPERFÍCIE DO VISITANTE (portal · identificação · checkout · sucesso)
   White-label: a cor da marca do local vem em --brand (JS).
   Default = "Hospitalidade" (terracota/areia, calmo, pegada Söhne/Mews).
   Base compartilhada: .vs
   ════════════════════════════════════════════════════════════════════════ */
.vs {
  /* Monocromático premium (Stripe/Linear/Vercel/Notion). Botão é o destaque; acento só nos ícones. */
  --brand:       #202020;   /* primário: botão/CTA (o herói) */
  --brand-2:     #303030;   /* hover */
  --vs-accent:   #2d8cff;   /* acento — SÓ nos ícones */
  --vs-bg-color: #f6f2ec;
  --vs-ink:      #1b1b1b;
  --vs-ink-soft: #5c564e;
  --vs-ink-mute: #9a938a;
  --vs-card:     #fffefb;
  --vs-card-bd:  #e9e2d6;
  --vs-hair:     #e9e2d6;
  position: relative; min-height: 100dvh; isolation: isolate;
  display: flex; flex-direction: column; align-items: center;
  padding: calc(var(--space-10) + var(--safe-top)) var(--space-5) calc(var(--space-10) + var(--safe-bottom));
  color: var(--vs-ink); background: var(--vs-bg-color); overflow: hidden;
}
/* fundo premium: creme + linhas concêntricas (cobertura de sinal / topográfico) muito sutis */
.vs__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-color: var(--vs-bg-color);
  background-image: url('/assets/img/bg-visitor.svg');
  background-repeat: no-repeat; background-position: center top; background-size: cover; }
.vs__inner { position: relative; width: 100%; max-width: 440px; display:flex; flex-direction:column; align-items:center; }
.vs__inner > * { animation: vs-rise 500ms var(--ease-out) both; }
@keyframes vs-rise { from { opacity:0; transform: translateY(6px);} to { opacity:1; transform:none; } }
.vs__back {
  align-self:flex-start; display:inline-flex; align-items:center; gap:var(--space-2);
  background: var(--vs-card); border:1px solid var(--vs-card-bd); color:var(--vs-ink-soft);
  padding:var(--space-2) var(--space-3); border-radius:var(--radius-full); font-size:var(--text-sm);
  cursor:pointer; margin-bottom:var(--space-6); transition: border-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}
.vs__back:hover { border-color: var(--brand); color: var(--vs-ink); }

/* cartão sólido, hairline, sombra quase imperceptível — sem vidro/blur */
.glass {
  background: var(--vs-card); border: 1px solid var(--vs-card-bd);
  border-radius: var(--radius-xl); box-shadow: 0 1px 2px rgba(60,45,30,0.04), 0 10px 26px rgba(60,45,30,0.05);
}

/* botões das telas do visitante — sólidos, discretos, formato pill (pegada Mews) */
.btn--vs { background: var(--brand); color:#fff; border:none; box-shadow:none; border-radius: var(--radius-full); }
.btn--vs:hover { background: var(--brand-2); transform:none; filter:none; }
.btn--vs-ghost { background: transparent; color: var(--vs-ink); border:1px solid var(--vs-card-bd); border-radius: var(--radius-full); }
.btn--vs-ghost:hover { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 5%, transparent); }

/* ──────── PORTAL ──────── */
.portal__head { text-align:center; display:flex; flex-direction:column; align-items:center; gap:var(--space-4); margin: var(--space-4) 0 var(--space-10); }
.portal__logo {
  width: 56px; height: 56px; display:grid; place-items:center; border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--brand) 9%, var(--vs-card)); border:1px solid var(--vs-card-bd);
  color: var(--brand); font-size: var(--text-xl); font-weight: var(--fw-semibold); box-shadow:none;
}
.portal__logo .icon { width:26px; height:26px; }
/* quando o logo é imagem (marca ADG ou do local) — sem o "chip", símbolo direto */
.portal__logo--img { width:auto; height:auto; background:transparent; border:none; box-shadow:none; }
.portal:not(.portal--photo) .portal__logo--img { background:transparent; border-color:transparent; }
.portal__brandimg { height:58px; width:auto; display:block; }
/* nome do local = display confiante, tracking apertado (pegada Söhne/Mews) */
.portal__name { font-size: var(--text-4xl); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tighter); line-height:1.05; text-wrap:balance; }
.portal__welcome { font-size: var(--text-lg); color: var(--vs-ink-soft); max-width: 30ch; line-height:1.55; }
/* tagline da marca (a "cereja") — maiúsculas espaçadas, discreta */
.portal__tagline { margin-top: var(--space-2); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.26em; color: var(--vs-ink-mute); }

/* CTA grátis — sólido na cor da marca, plano, sem glow */
.portal__free {
  position:relative; width:100%; text-align:left; cursor:pointer; overflow:hidden;
  display:flex; flex-direction:column; gap:2px;
  padding: var(--space-5) var(--space-6); border:none; border-radius: var(--radius-xl); color:#fff;
  background: var(--brand); box-shadow: 0 1px 2px rgba(60,45,30,0.10);
  transition: background var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease);
}
.portal__free:hover { background: var(--brand-2); transform: translateY(-1px); }
.portal__free-badge { align-self:flex-start; margin-bottom:2px; font-size:var(--text-xs); font-weight:var(--fw-semibold); letter-spacing:var(--tracking-wide);
  background:rgba(255,255,255,0.18); padding:2px 10px; border-radius:var(--radius-full); }
.portal__free-title { font-size:var(--text-lg); font-weight:var(--fw-semibold); }
.portal__free-desc { font-size:var(--text-sm); opacity:.85; }
.portal__free-arrow { position:absolute; right:var(--space-5); bottom:var(--space-5); opacity:.85; }
.portal__free-arrow .icon { width:22px; height:22px; }

.portal__divider { display:flex; align-items:center; gap:var(--space-3); width:100%; margin: var(--space-6) 0;
  color: var(--vs-ink-mute); font-size: var(--text-xs); text-transform:uppercase; letter-spacing: var(--tracking-wide); }
.portal__divider::before, .portal__divider::after { content:''; flex:1; height:1px; background: var(--vs-hair); }

.portal__plans { width:100%; display:flex; flex-direction:column; gap:var(--space-3); }
.planx {
  display:flex; align-items:center; gap:var(--space-4); width:100%; text-align:left; cursor:pointer;
  padding: var(--space-4) var(--space-5); color: var(--vs-ink);
  background: var(--vs-card); border:1px solid var(--vs-card-bd); border-radius: var(--radius-lg);
  transition: border-color var(--duration-fast) var(--ease), background var(--duration-fast) var(--ease);
}
.planx:hover { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 4%, var(--vs-card)); }
.planx__icon { width:44px; height:44px; flex:0 0 auto; display:grid; place-items:center; border-radius:var(--radius-md);
  color: var(--vs-accent); background: color-mix(in srgb, var(--vs-accent) 12%, var(--vs-card)); }
.planx__icon .icon { width:22px; height:22px; }
.planx__info { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.planx__name { font-weight:var(--fw-medium); font-size:var(--text-base); }
.planx__desc { font-size:var(--text-xs); color: var(--vs-ink-mute); }
.planx__price { font-weight:var(--fw-semibold); font-size:var(--text-base); white-space:nowrap; }

.portal__legal { margin-top: var(--space-8); font-size: var(--text-xs); color: var(--vs-ink-mute); text-align:center; max-width: 42ch; }
.portal__powered { margin-top: var(--space-4); display:flex; align-items:center; justify-content:center; gap:var(--space-2);
  font-size: var(--text-xs); color: var(--vs-ink-mute); letter-spacing: var(--tracking-wide); }
.portal__poweredlogo { height:18px; width:auto; opacity:.85; }
/* no modo foto o rodapé é claro → símbolo branco combina melhor */
.portal--photo .portal__poweredlogo { filter: brightness(0) invert(1); opacity:.9; }

/* ──────── PORTAL: fundo universal (motivo de conexão) + foto opcional (white-label) ──────── */
/* Padrão universal: "ondas de sinal" sutis saindo do topo, na cor da marca, sobre o creme.
   Fala do PRODUTO (Wi-Fi/conexão), não de um lugar — serve camping, interior, evento, etc. */
.portal .planx { box-shadow: 0 1px 2px rgba(60,45,30,0.05); }

/* ── variantes de fundo (seletor ao vivo p/ escolher; default = topográfico) ── */
.bg-limpo .vs__bg { background: var(--vs-bg-color); }
.bg-textura .vs__bg { background-color: var(--vs-bg-color); background-image: url('/assets/img/bg-grain.svg'); background-repeat: repeat; background-size: 220px 220px; }
.bg-pontos .vs__bg { background-color: var(--vs-bg-color);
  background-image: radial-gradient(circle, #d8d1c8 1.1px, transparent 1.6px); background-size: 22px 22px; background-position: center; }
.bg-malha .vs__bg { background:
  radial-gradient(42% 32% at 16% 12%, rgba(216,209,200,0.55), transparent 62%),
  radial-gradient(46% 34% at 88% 20%, rgba(216,209,200,0.45), transparent 62%),
  radial-gradient(55% 45% at 60% 104%, rgba(216,209,200,0.40), transparent 60%),
  var(--vs-bg-color); }

/* seletor de fundo (demo — removível depois) */
.bg-switch { position:fixed; left:50%; transform:translateX(-50%); bottom:calc(var(--space-3) + var(--safe-bottom)); z-index:var(--z-toast);
  display:flex; gap:3px; padding:5px; border-radius:var(--radius-full); background:rgba(24,24,24,0.92); backdrop-filter:blur(8px); box-shadow:var(--shadow-lg); }
.bg-switch button { border:none; background:transparent; color:#ddd; font-size:var(--text-xs); font-weight:var(--fw-medium); padding:6px 11px; border-radius:var(--radius-full); cursor:pointer; }
.bg-switch button.is-active { background:#fff; color:#111; }

/* Monocromático: cabeçalho SEM card colorido — só o logo (preto) + nome, discreto.
   O destaque é o botão "Conectar", não o topo. */
.portal:not(.portal--photo) .portal__head { margin: var(--space-6) 0 var(--space-8); }

/* Modo foto (quando o local sobe a própria foto): full-bleed + escurecimento + textos claros */
.portal--photo .vs__bg {
  background-image:
    linear-gradient(180deg, color-mix(in srgb, var(--brand) 14%, transparent) 0%, transparent 32%),
    linear-gradient(180deg, rgba(18,13,15,0.42) 0%, rgba(18,13,15,0.30) 34%, rgba(18,13,15,0.80) 100%),
    var(--portal-photo);
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.portal--photo .portal__logo { background: rgba(255,255,255,0.94); border-color: transparent; color: var(--brand); box-shadow: 0 4px 18px rgba(0,0,0,0.18); }
.portal--photo .portal__name { color:#fff; text-shadow: 0 1px 24px rgba(0,0,0,0.4); }
.portal--photo .portal__welcome { color: rgba(255,255,255,0.9); text-shadow: 0 1px 16px rgba(0,0,0,0.35); }
.portal--photo .portal__divider { color: rgba(255,255,255,0.8); }
.portal--photo .portal__divider::before, .portal--photo .portal__divider::after { background: rgba(255,255,255,0.3); }
.portal--photo .portal__legal, .portal--photo .portal__powered { color: rgba(255,255,255,0.75); text-shadow: 0 1px 10px rgba(0,0,0,0.35); }
.portal--photo .portal__free { box-shadow: 0 8px 24px rgba(0,0,0,0.24); }
.portal--photo .planx { box-shadow: 0 6px 18px rgba(0,0,0,0.16); }

/* ──────── IDENTIFICAÇÃO (antes do PIX) ──────── */
.identify__inner { justify-content:center; min-height:100dvh; }
.identify__card { width:100%; padding: var(--space-8) var(--space-6); text-align:center; }
.identify__title { font-size: var(--text-2xl); font-weight: var(--fw-semibold); }
.identify__sub { color: var(--vs-ink-soft); margin-top:var(--space-2); margin-bottom: var(--space-6); font-size: var(--text-sm); line-height:1.55; }
.identify__price { color: var(--vs-ink); font-weight: var(--fw-semibold); }
.oauth {
  display:flex; align-items:center; justify-content:center; gap:var(--space-3); width:100%;
  padding: var(--space-4); border-radius: var(--radius-full); cursor:pointer; margin-bottom: var(--space-3);
  font-size: var(--text-base); font-weight: var(--fw-medium); border:1px solid var(--vs-card-bd);
  transition: border-color var(--duration-fast) var(--ease), background var(--duration-fast) var(--ease);
}
.oauth:hover { border-color: var(--vs-ink-mute); }
.oauth svg { width:20px; height:20px; }
.oauth--google { background:#fff; color:#1f1f1f; }
.oauth--whats { background:#25d366; color:#fff; border-color:transparent; }
.identify__or { display:flex; align-items:center; gap:var(--space-3); margin: var(--space-5) 0;
  color: var(--vs-ink-mute); font-size:var(--text-xs); letter-spacing:var(--tracking-wide); }
.identify__or::before, .identify__or::after { content:''; flex:1; height:1px; background: var(--vs-hair); }
.identify__form { display:flex; flex-direction:column; gap:var(--space-3); text-align:left; }
.identify__form .field__label { color: var(--vs-ink-soft); }
.identify__form .field__input { background: var(--vs-card); border:1px solid var(--vs-card-bd); color: var(--vs-ink); }
.identify__form .field__input::placeholder { color: var(--vs-ink-mute); }
.identify__legal { font-size: var(--text-xs); color: var(--vs-ink-mute); margin-top: var(--space-5); line-height:1.6; }

/* ──────── CHECKOUT / PIX ──────── */
.checkout__card { width:100%; max-width: 400px; text-align:center; padding: var(--space-6); }
.checkout__title { font-size: var(--text-xl); font-weight: var(--fw-semibold); margin-top: var(--space-4); }
.checkout__plan { display:flex; justify-content:space-between; align-items:center; padding: var(--space-4);
  background: color-mix(in srgb, var(--brand) 5%, var(--vs-card)); border:1px solid var(--vs-card-bd); border-radius: var(--radius-md); margin: var(--space-5) 0; }
.checkout__plan strong { font-size: var(--text-xl); }
.checkout__qr { width: 220px; height: 220px; margin: 0 auto var(--space-4); display:grid; place-items:center;
  background:#fff; border:1px solid var(--vs-card-bd); border-radius: var(--radius-md); padding: var(--space-3); }
.checkout__qr img, .checkout__qr svg { width:100%; height:100%; }
.checkout__copy { display:flex; gap:var(--space-2); margin-bottom: var(--space-4); }
.checkout__copy .field__input { flex:1; font-family: var(--font-mono); font-size: var(--text-xs); overflow:hidden; text-overflow:ellipsis;
  background: var(--vs-card); border:1px solid var(--vs-card-bd); color: var(--vs-ink); }
.checkout__timer { font-size: var(--text-sm); color: var(--vs-ink-mute); margin-bottom: var(--space-4); }
.checkout__status { display:flex; align-items:center; justify-content:center; gap:var(--space-2); font-size: var(--text-sm);
  color: var(--vs-ink-soft); background: color-mix(in srgb, var(--brand) 5%, var(--vs-card)); border:1px solid var(--vs-card-bd); padding: var(--space-3); border-radius: var(--radius-md); }
.checkout__pulse { width:8px; height:8px; border-radius:50%; background: var(--vs-accent); animation: vs-breathe 1.8s var(--ease) infinite; }
@keyframes vs-breathe { 0%,100% { opacity:.3; } 50% { opacity:1; } }

/* ──────── ACESSO LIBERADO ──────── */
.success { justify-content:center; text-align:center; gap: var(--space-4); }
.success__badge { width:92px; height:92px; display:grid; place-items:center; border-radius:var(--radius-full);
  background: color-mix(in srgb, #6a9a76 16%, var(--vs-card)); color:#4a7355; border:1px solid color-mix(in srgb, #6a9a76 26%, var(--vs-card-bd)); box-shadow:none; }
.success__badge .icon { width:44px; height:44px; }
.success__title { font-size: var(--text-2xl); font-weight: var(--fw-semibold); }
.success__sub { color: var(--vs-ink-soft); }
.success__countdown { font-family: var(--font-mono); font-size: var(--text-4xl); font-weight: var(--fw-semibold); line-height:1.1; color: var(--brand); }
.success__card { width:100%; max-width: 380px; padding: var(--space-5); margin-top: var(--space-4); }

/* ──────── TEMAS do visitante (modificadores de .vs) ──────── */
/* Claro minimalista */
.vs--light {
  --vs-bg-color:#f6f7fb; --vs-ink:#0f1222; --vs-ink-soft:#565b70; --vs-ink-mute:#8b90a4;
  --vs-card:#ffffff; --vs-card-bd:#e7e9f1; --vs-hair:#e7e9f1; --brand:#4f46e5; --brand-2:#7c3aed;
}
.vs--light .vs__bg { background:
  radial-gradient(60% 40% at 12% 2%, color-mix(in srgb,var(--brand) 13%, transparent), transparent 60%),
  radial-gradient(55% 40% at 92% 0%, color-mix(in srgb,var(--brand-2) 13%, transparent), transparent 55%),
  var(--vs-bg-color); }
.vs--light .vs__bg::after,
.vs--fun .vs__bg::after,
.vs--warm .vs__bg::after { display:none; }
.vs--light .planx, .vs--fun .planx, .vs--warm .planx { box-shadow: var(--shadow-sm); backdrop-filter:none; -webkit-backdrop-filter:none; }

/* Dark premium (dourado sutil) */
.vs--dark {
  --vs-bg-color:#0c0d11; --vs-ink:#f4f4f5; --vs-ink-soft:#b6b7bd; --vs-ink-mute:#7d7e86;
  --vs-card:rgba(255,255,255,0.04); --vs-card-bd:rgba(255,255,255,0.09); --vs-hair:rgba(255,255,255,0.09);
  --brand:#e0b64e; --brand-2:#b8860b;
}
.vs--dark .vs__bg { background:
  radial-gradient(70% 50% at 50% -12%, color-mix(in srgb,var(--brand) 20%, transparent), transparent 60%),
  var(--vs-bg-color); }

/* Colorido amigável (claro) */
.vs--fun {
  --vs-bg-color:#fff6fb; --vs-ink:#231b2e; --vs-ink-soft:#6a5b76; --vs-ink-mute:#a596ad;
  --vs-card:#ffffff; --vs-card-bd:#f2e3f0; --vs-hair:#f2e3f0; --brand:#ff5a7a; --brand-2:#ffab3d;
}
.vs--fun .vs__bg { background:
  radial-gradient(50% 40% at 8% 2%, color-mix(in srgb,var(--brand) 22%, transparent), transparent 55%),
  radial-gradient(50% 40% at 95% 0%, color-mix(in srgb,var(--brand-2) 24%, transparent), transparent 55%),
  var(--vs-bg-color); }

/* Hospitalidade (areia/aconchego) */
.vs--warm {
  --vs-bg-color:#fbf5ec; --vs-ink:#2c2418; --vs-ink-soft:#6b5d49; --vs-ink-mute:#a4967f;
  --vs-card:#fffdf8; --vs-card-bd:#ece1cf; --vs-hair:#ece1cf; --brand:#dd8a3c; --brand-2:#b45309;
}
.vs--warm .vs__bg { background:
  radial-gradient(60% 45% at 15% 2%, color-mix(in srgb,var(--brand) 18%, transparent), transparent 60%),
  var(--vs-bg-color); }

/* ──────── GALERIA DE ESTILOS (protótipo) ──────── */
.gallery { min-height:100dvh; background:#0f1115; color:#f5f5f5; padding: calc(var(--space-8) + var(--safe-top)) var(--space-5) var(--space-12); }
.gallery__head { max-width:520px; margin:0 auto var(--space-8); text-align:center; }
.gallery__title { font-size:var(--text-3xl); font-weight:var(--fw-bold); letter-spacing:var(--tracking-tight); }
.gallery__sub { color:#a1a1aa; margin-top:var(--space-2); }
.gallery__grid { max-width:520px; margin:0 auto; display:flex; flex-direction:column; gap:var(--space-8); }
.style-card__head { display:flex; align-items:baseline; gap:var(--space-3); margin-bottom:var(--space-3); }
.style-card__num { font-size:var(--text-xl); font-weight:var(--fw-bold); color:var(--accent-blue-100); }
.style-card__name { font-size:var(--text-lg); font-weight:var(--fw-semibold); }
.style-card__desc { color:#a1a1aa; font-size:var(--text-sm); margin-bottom:var(--space-4); }
.style-frame { position:relative; height:520px; overflow:hidden; border-radius:var(--radius-2xl); border:1px solid #2a2d36; box-shadow:var(--shadow-xl); }
.style-frame .vs { min-height:520px; }
.style-frame__click { position:absolute; inset:0; z-index:5; cursor:pointer; background:transparent; border:none; }
.style-card__cta { margin-top:var(--space-4); display:flex; gap:var(--space-3); }

/* barra fixa da pré-visualização em tela cheia */
.preview-bar { position:fixed; left:0; right:0; bottom:0; z-index:var(--z-toast);
  display:flex; gap:var(--space-3); justify-content:center; padding:var(--space-3) var(--space-4) calc(var(--space-3) + var(--safe-bottom));
  background:rgba(10,10,20,0.72); backdrop-filter:blur(12px); border-top:1px solid rgba(255,255,255,0.12); }

/* ──────── VITRINE DE LOGOS (protótipo p/ escolher o símbolo) ──────── */
.logos { --rose:#ef3f66; }
.logo-card { display:flex; align-items:center; gap:var(--space-5); padding:var(--space-5); border-radius:var(--radius-xl);
  background:#16181f; border:1px solid #262a33; }
.logo-badge { width:88px; height:88px; flex:0 0 auto; border-radius:22px; display:grid; place-items:center;
  background:var(--rose); color:#fff; box-shadow:0 10px 28px rgba(239,63,102,0.35); }
.logo-badge svg { width:46px; height:46px; }
.logo-card__info { flex:1; min-width:0; }
.logo-card__row { display:flex; align-items:center; gap:var(--space-2); }
.logo-card__num { font-size:var(--text-sm); font-weight:var(--fw-bold); color:var(--rose); }
.logo-card__name { font-size:var(--text-lg); font-weight:var(--fw-semibold); }
.logo-card__desc { font-size:var(--text-sm); color:#a1a1aa; margin-top:2px; }
.logo-card__chips { display:flex; align-items:center; gap:var(--space-2); margin-top:var(--space-3); }
.logo-chip { width:34px; height:34px; border-radius:9px; display:grid; place-items:center; }
.logo-chip svg { width:20px; height:20px; }
.logo-chip--light { background:#fff; color:var(--rose); }
.logo-chip--ink { background:#0f1115; border:1px solid #2a2f3a; color:#fff; }
.logo-chip__wordmark { display:inline-flex; align-items:center; gap:6px; font-weight:var(--fw-semibold); letter-spacing:var(--tracking-tight); color:#f5f5f5; }
.logo-inline { width:20px; height:20px; color:var(--rose); }

/* ──────── PRÉVIA DA MARCA (lockup estilo monograma sobre creme) ──────── */
.brandshow { --rose:#ef3f66; --ink:#2a2420; --cream:#f7f2ec;
  min-height:100dvh; background:var(--cream); color:var(--ink);
  display:flex; flex-direction:column; align-items:center;
  padding: calc(var(--space-12) + var(--safe-top)) var(--space-5) var(--space-16); gap:var(--space-16); }
.lockup { display:flex; flex-direction:column; align-items:center; gap:var(--space-4); text-align:center; }
.lockup__mark { width:88px; height:88px; }
.lockup__name { font-size:var(--text-4xl); font-weight:var(--fw-semibold); letter-spacing:var(--tracking-tighter); }
.lockup__tag { font-size:var(--text-xs); letter-spacing:0.34em; text-transform:uppercase; color:color-mix(in srgb, var(--ink) 55%, var(--cream)); }
.lockup--rose { color:var(--rose); }
.lockup--rose .lockup__tag { color:color-mix(in srgb, var(--rose) 70%, var(--ink)); }
.brand-sep { width:44px; height:1px; background:color-mix(in srgb, var(--ink) 18%, var(--cream)); }
.brand-caption { font-size:var(--text-sm); color:color-mix(in srgb, var(--ink) 55%, var(--cream)); letter-spacing:var(--tracking-wide); text-transform:uppercase; }
.brand-icons { display:flex; gap:var(--space-5); align-items:center; }
.appicon { width:76px; height:76px; border-radius:20px; display:grid; place-items:center; }
.appicon svg { width:42px; height:42px; }
.appicon--rose { background:var(--rose); color:#fff; box-shadow:0 10px 26px rgba(239,63,102,0.28); }
.appicon--ink  { background:var(--ink);  color:var(--cream); }
.appicon--cream{ background:#fff; color:var(--rose); border:1px solid color-mix(in srgb, var(--ink) 12%, var(--cream)); }

/* ════════════════════════════════════════════════════════════════════════
   PAINEL (cliente + master)
   ════════════════════════════════════════════════════════════════════════ */
.tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--border); margin-bottom: var(--space-6); overflow-x: auto; }
.tab {
  padding: var(--space-3) var(--space-4); background: none; border: none; cursor: pointer;
  font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--text-muted); white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab:hover { color: var(--text); }
.tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }

/* grid de stats */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-8); }
.stat { padding: var(--space-5); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-xl); }
.stat__label { font-size: var(--text-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.stat__value { font-size: var(--text-3xl); font-weight: var(--fw-bold); margin-top: var(--space-2); letter-spacing: var(--tracking-tight); }
.stat__delta { font-size: var(--text-xs); margin-top: var(--space-1); }
.stat__delta--up { color: var(--success); }

/* lista / tabela */
.list { display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; }
.list__row { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-subtle); }
.list__row:last-child { border-bottom: none; }
.list__row--head { background: var(--bg-subtle); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-muted); }
.list__cell { flex: 1; min-width: 0; font-size: var(--text-sm); }
.list__cell--main { font-weight: var(--fw-medium); }
.list__cell--right { text-align: right; flex: 0 0 auto; }
.list__cell--mono { font-family: var(--font-mono); }

/* empty state */
.empty { text-align: center; padding: var(--space-16) var(--space-5); color: var(--text-muted); }
.empty .icon { width: 40px; height: 40px; margin: 0 auto var(--space-4); color: var(--text-subtle); }

/* toolbar de seção */
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); flex-wrap: wrap; }

/* login */
.auth { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-8) var(--space-5); }
.auth__card { width: 100%; max-width: 380px; }
.auth__logo { width: 48px; height: 48px; margin: 0 auto var(--space-4); display: grid; place-items: center; background: var(--accent-bg); color: var(--accent); border-radius: var(--radius-xl); }
.auth__brand { display:block; width: 210px; max-width: 80%; height:auto; margin: 0 auto var(--space-5); }
.auth__title { text-align: center; font-size: var(--text-xl); margin-bottom: var(--space-6); }

/* helpers de layout */
.row { display: flex; align-items: center; gap: var(--space-3); }
.row--between { justify-content: space-between; }
.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }

/* ════════ Painel master (extras) ════════ */
.note-demo { display:flex; align-items:center; gap:var(--space-2); margin-bottom:var(--space-5);
  padding:var(--space-3) var(--space-4); background:var(--info-bg); border:1px solid var(--info-border);
  border-radius:var(--radius-lg); color:var(--text-secondary); font-size:var(--text-sm); }
.note-demo .icon { color:var(--info); flex:0 0 auto; }

.chart { display:flex; align-items:flex-end; gap:var(--space-2); height:140px; margin-top:var(--space-4); }
.chart__col { flex:1; display:flex; flex-direction:column; align-items:center; gap:var(--space-2); height:100%; justify-content:flex-end; }
.chart__bar { width:100%; max-width:38px; background:var(--accent); border-radius:var(--radius-sm) var(--radius-sm) 0 0; }
.chart__lbl { font-size:var(--text-xs); color:var(--text-muted); }

.status-dot--offline { background:var(--text-subtle); }

.card--soft { background:var(--accent-bg); border-color:var(--accent-border); }

.cfg-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:var(--space-4); }
.cfg-ico { width:40px; height:40px; flex:0 0 auto; display:grid; place-items:center; border-radius:var(--radius-lg); background:var(--bg-muted); color:var(--text-secondary); }
.cfg-val { margin-top:var(--space-4); font-weight:var(--fw-semibold); }

/* Seções de pagamento (estilo Minha Renda) */
.pay { display:grid; gap:var(--space-5); grid-template-columns:1fr; margin-bottom:var(--space-8); }
@media (min-width:760px){ .pay { grid-template-columns:1fr 1fr; } }
.pay__card { display:flex; flex-direction:column; }
.pay__head { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); }
.pay__row { display:flex; align-items:center; justify-content:space-between; padding:var(--space-3) 0; border-bottom:1px solid var(--border); }
.pay__card .field { margin-top:var(--space-4); }
.pay__copy { display:flex; gap:var(--space-2); }
.pay__copy .field__input { flex:1; }

/* tooltip de ajuda (i) — hover no desktop, toque (focus) no mobile */
.help { position:relative; display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px;
  margin-left:4px; border-radius:var(--radius-full); color:var(--text-subtle); cursor:help; vertical-align:middle; }
.help .icon { width:14px; height:14px; }
.help:hover, .help:focus { color:var(--accent); outline:none; }
.help__tip { position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%);
  width:230px; max-width:70vw; padding:10px 12px; z-index:var(--z-tooltip);
  background:#111418; color:#e9eaed; font-size:var(--text-xs); line-height:1.5; font-weight:var(--fw-regular);
  text-transform:none; letter-spacing:normal; text-align:left; border-radius:var(--radius-md); box-shadow:var(--shadow-xl);
  opacity:0; visibility:hidden; transition:opacity var(--duration-fast) var(--ease); pointer-events:none; }
.help:hover .help__tip, .help:focus .help__tip, .help:focus-within .help__tip { opacity:1; visibility:visible; }

/* KPIs coloridos (dashboard master) — cada métrica com sua cor p/ leitura rápida */
.kpi-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(172px,1fr)); gap:var(--space-4); margin-bottom:var(--space-8); }
.kpi { padding:var(--space-5); border-radius:var(--radius-xl); background:var(--kpi-bg); border:1px solid var(--kpi-bd); box-shadow:var(--shadow-sm); }
.kpi__ico { width:40px; height:40px; display:grid; place-items:center; border-radius:var(--radius-lg); background:var(--kpi-accent); color:#fff; margin-bottom:var(--space-4); }
.kpi__ico .icon { width:20px; height:20px; }
.kpi__label { font-size:var(--text-xs); color:var(--text-muted); text-transform:uppercase; letter-spacing:var(--tracking-wide); }
.kpi__value { font-size:var(--text-2xl); font-weight:var(--fw-bold); margin-top:var(--space-1); letter-spacing:var(--tracking-tight); line-height:1.15; }
.kpi__delta { font-size:var(--text-xs); color:var(--success); margin-top:var(--space-1); }
.kpi--emerald { --kpi-accent:var(--accent-emerald-600); --kpi-bg:var(--accent-emerald-50); --kpi-bd:var(--accent-emerald-100); }
.kpi--blue    { --kpi-accent:var(--accent-blue-600);    --kpi-bg:var(--accent-blue-50);    --kpi-bd:var(--accent-blue-100); }
.kpi--purple  { --kpi-accent:var(--accent-purple-600);  --kpi-bg:var(--accent-purple-50);  --kpi-bd:var(--accent-purple-100); }
.kpi--amber   { --kpi-accent:var(--accent-amber-600);   --kpi-bg:var(--accent-amber-50);   --kpi-bd:var(--accent-amber-100); }
.kpi--rose    { --kpi-accent:#ef3f66; --kpi-bg:#fdeef2; --kpi-bd:#fbd9e2; }
.kpi--teal    { --kpi-accent:#0d9488; --kpi-bg:#effcf9; --kpi-bd:#ccf3ec; }

/* ════════════════════════════════════════════════════════════════════════
   TEMA ESCURO — Painel Master (alto contraste; ativado por body.theme-dark)
   ════════════════════════════════════════════════════════════════════════ */
body.theme-dark { background:#0f1116; }

.theme-dark .topbar { background:#14171e; border-bottom-color:#242a35; }
.theme-dark .topbar__name { color:#f2f3f6; }
.theme-dark .topbar__logo { color:#ef3f66; }
.theme-dark .topbar__user { color:#9aa1ad; }
.theme-dark .footer { background:#14171e; border-top-color:#242a35; color:#8b919d; }
.theme-dark .footer a { color:#9aa1ad; }
.theme-dark .footer a:hover { color:#e9eaed; }

.theme-dark .section-header__title { color:#f2f3f6; }
.theme-dark .section-header__sub, .theme-dark .u-muted { color:#8b919d; }
.theme-dark .card__title { color:#e9eaed; }

.theme-dark .tabs { border-bottom-color:#242a35; }
.theme-dark .tab { color:#9aa1ad; }
.theme-dark .tab:hover { color:#e9eaed; }
.theme-dark .tab.is-active { color:#ef3f66; border-bottom-color:#ef3f66; }

.theme-dark .card, .theme-dark .list, .theme-dark .stat { background:#1a1d25; border-color:#2a303c; }
.theme-dark .list__row { border-bottom-color:#242a35; }
.theme-dark .list__row--head { background:#20242e; color:#9aa1ad; }
.theme-dark .list__cell { color:#d4d8e0; }
.theme-dark .list__cell--main { color:#f2f3f6; }
.theme-dark .stat__label { color:#8b919d; }
.theme-dark .stat__value { color:#f2f3f6; }

.theme-dark .note-demo { background:rgba(45,140,255,0.10); border-color:rgba(45,140,255,0.28); color:#c3c9d4; }
.theme-dark .note-demo .icon { color:#4d9bff; }

.theme-dark .chart__bar { background:#ef3f66; }
.theme-dark .chart__lbl { color:#8b919d; }

.theme-dark .cfg-ico { background:#20242e; color:#c3c9d4; }
.theme-dark .cfg-val { color:#f2f3f6; }
.theme-dark .card--soft { background:rgba(239,63,102,0.09); border-color:rgba(239,63,102,0.22); }

.theme-dark .btn--secondary { background:#20242e; color:#e9eaed; border-color:#2f3542; }
.theme-dark .btn--secondary:hover { background:#272c37; }
.theme-dark .btn--ghost { color:#c3c9d4; }
.theme-dark .btn--ghost:hover { background:#20242e; }
.theme-dark .btn--accent { background:#ef3f66; border-color:#ef3f66; color:#fff; }
.theme-dark .btn--accent:hover { background:#d5335a; border-color:#d5335a; }

.theme-dark .badge { background:#262c37; color:#c3c9d4; }
.theme-dark .badge--success { background:rgba(16,185,129,0.16); color:#4ade80; }
.theme-dark .badge--warning { background:rgba(217,119,6,0.18); color:#fbbf24; }

/* KPIs no escuro: card grafite + ícone colorido brilhando + borda tingida na cor */
.theme-dark .kpi { background:#1a1d25; border-color:color-mix(in srgb, var(--kpi-accent) 34%, #2a303c); }
.theme-dark .kpi__label { color:#8b919d; }
.theme-dark .kpi__value { color:#f4f5f8; }

/* inputs/labels no tema escuro (seções de config/pagamento) */
.theme-dark .field__input { background:#20242e; border-color:#2f3542; color:#e9eaed; }
.theme-dark .field__input:focus { border-color:#ef3f66; }
.theme-dark .field__input::placeholder { color:#6b7280; }
.theme-dark .field__label { color:#c3c9d4; }
.theme-dark .pay__row { border-bottom-color:#242a35; }
.theme-dark .help__tip { background:#000; }