/* ══════════════════════════════════════════════════════════════════════
   PORTAL DO CLIENTE — TEMA "ESCURO PREMIUM"
   Usa os tokens e componentes de admin-premium.css (carregado antes) e
   acrescenta as telas do cliente. Ativado por <body class="ui-premium pg-…">.
══════════════════════════════════════════════════════════════════════ */

/* Base para as páginas que não carregam o style.css */
body.ui-premium { margin: 0; line-height: 1.5; }
body.ui-premium a { color: var(--ui-brand-text); }
body.ui-premium a:hover { color: #ffffff; }

/* ── Entrada (consulta por CPF/CNPJ) ────────────────────────────────────── */
body.ui-premium #screen-home {
  background:
    radial-gradient(760px 520px at 88% 8%, color-mix(in srgb, var(--ui-brand) 13%, transparent), transparent 70%),
    radial-gradient(620px 480px at 6% 96%, rgba(124, 135, 249, .10), transparent 70%),
    var(--bg) !important;
}
body.ui-premium #screen-home::before, body.ui-premium #screen-home::after,
body.ui-premium .login-bg, body.ui-premium .login-glow { display: none !important; }
body.ui-premium .login-logo .logo-name, body.ui-premium .logo-name { font-family: var(--font-display); font-weight: 700; color: #ffffff; }
body.ui-premium .logo-sub { color: var(--text-faint); }
body.ui-premium .eyebrow { color: var(--ui-brand-text) !important; letter-spacing: .1em; }
body.ui-premium .hero-title {
  font-family: var(--font-display) !important; font-weight: 600 !important; color: #ffffff !important;
  letter-spacing: -.035em !important; line-height: 1.04 !important;
}
body.ui-premium .hero-title::after { background: var(--ui-brand) !important; }
body.ui-premium .hero-text { color: var(--text-dim) !important; }
body.ui-premium .feature-item {
  background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: 14px !important;
  box-shadow: none !important; color: var(--text-muted) !important;
}
body.ui-premium .feature-icon {
  background: var(--ui-brand-soft) !important; color: var(--ui-brand) !important; box-shadow: none !important;
}
body.ui-premium .login-card::before { background: var(--ui-brand) !important; }
body.ui-premium #screen-home .login-card { box-shadow: var(--sombra-modal) !important; border: 1px solid var(--border) !important; }
body.ui-premium .login-trust-note, body.ui-premium .login-footer { color: var(--text-dim) !important; }
body.ui-premium .trust-shield { background: var(--ui-brand-soft) !important; color: var(--ui-brand) !important; border-color: var(--ui-brand-line) !important; }
body.ui-premium .login-card .login-footer a, body.ui-premium .login-card a { color: var(--ui-brand-text); }
body.ui-premium .login-card [class*="kicker"], body.ui-premium .login-card .eyebrow { color: var(--text-faint) !important; }
body.ui-premium .btn-theme-toggle { display: none !important; }
body.ui-premium .big-spinner, body.ui-premium .spinner { border-color: var(--border2) !important; border-top-color: var(--ui-brand) !important; }

/* ── Área do cliente (após consultar) ───────────────────────────────────── */
body.ui-premium .screen { background: var(--bg); }
body.ui-premium .header {
  background: var(--header-bg) !important; border-bottom: 1px solid var(--border) !important;
  backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px); box-shadow: none !important;
}
body.ui-premium .header-inner { min-height: 68px; }
body.ui-premium .header-title { font-family: var(--font-display); font-weight: 700; color: #ffffff; font-size: 1rem; }
body.ui-premium .btn-logout {
  min-height: 42px; padding: 0 14px; border-radius: 12px;
  background: transparent !important; border: 1px solid var(--border2) !important; color: var(--text-muted) !important; font-weight: 600;
}
body.ui-premium .btn-logout:hover { background: var(--surface3) !important; color: #ffffff !important; }

body.ui-premium .main { padding-top: 28px; }
body.ui-premium .cliente-banner {
  background:
    radial-gradient(520px 240px at 100% 0%, color-mix(in srgb, var(--ui-brand) 12%, transparent), transparent 70%),
    var(--surface) !important;
  border: 1px solid var(--border) !important; border-radius: 20px !important; box-shadow: none !important; padding: 24px 26px !important;
}
body.ui-premium .cliente-doc { font-family: var(--font-display) !important; color: #ffffff !important; font-size: 1.35rem !important; letter-spacing: 0 !important; font-weight: 600 !important; }
body.ui-premium .cliente-info { color: var(--text-dim); }
body.ui-premium .cliente-plano {
  background: var(--surface3) !important; border: 1px solid var(--border2) !important; color: var(--text-muted) !important;
  border-radius: 999px !important;
}
body.ui-premium .cliente-banner-status {
  background: var(--ui-brand-soft) !important; color: var(--ui-brand-text) !important; border: 1px solid var(--ui-brand-line) !important;
  box-shadow: none !important;
}

/* Abas do portal (Cobranças / Contratos) e abas da tabela */
body.ui-premium .portal-tabs, body.ui-premium .cobranca-tabs {
  display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px !important;
  background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: 14px !important; box-shadow: none !important;
}
body.ui-premium .portal-tab {
  min-height: 42px; padding: 0 18px !important; border: 0 !important; border-radius: 10px !important;
  background: transparent !important; color: var(--text-dim) !important; font-weight: 600; box-shadow: none !important;
}
body.ui-premium .portal-tab:hover { color: #ffffff !important; }
body.ui-premium .portal-tab.active { background: var(--surface3) !important; color: #ffffff !important; box-shadow: inset 0 0 0 1px var(--border2) !important; }
body.ui-premium .portal-tab-badge, body.ui-premium .tab-count {
  background: var(--ui-brand-soft) !important; color: var(--ui-brand-text) !important; border: 1px solid var(--ui-brand-line) !important;
  border-radius: 999px !important; font-weight: 700;
}
body.ui-premium .tab-aba-btn.active .tab-count { background: var(--ui-brand) !important; color: var(--ui-brand-ink) !important; }

/* Cartões de resumo do cliente */
body.ui-premium #screen-result .card-stat:hover { transform: none !important; }
body.ui-premium #screen-result .card-stat:nth-child(2) { background: var(--surface) !important; border-color: var(--ui-brand-line) !important; }
body.ui-premium #screen-result .card-stat .stat-value { font-size: 1.6rem; }

/* Seções (tabela de cobranças, contratos) */
body.ui-premium .result-section { overflow: hidden; }
body.ui-premium .result-section .table-scroll { border: 0 !important; border-radius: 0 !important; }
body.ui-premium .portal-section-heading .eyebrow { color: var(--ui-brand-text) !important; }
body.ui-premium .portal-contracts-live {
  background: var(--ui-brand-soft) !important; color: var(--ui-brand-text) !important; border: 1px solid var(--ui-brand-line) !important; box-shadow: none !important;
}
body.ui-premium .portal-contract-icon { background: var(--surface3) !important; color: var(--ui-brand) !important; border: 1px solid var(--border2) !important; }
body.ui-premium .portal-contract-empty, body.ui-premium .portal-contract-copy { color: var(--text-dim) !important; }
body.ui-premium .portal-contracts-list > * { border-color: var(--border) !important; background: transparent !important; }

body.ui-premium .btn-boleto, body.ui-premium .btn-detail, body.ui-premium .btn-copy {
  min-height: 38px; padding: 0 14px; border-radius: 10px;
  background: transparent !important; border: 1px solid var(--border2) !important; color: var(--text) !important; font-weight: 600;
}
body.ui-premium .btn-boleto:hover, body.ui-premium .btn-detail:hover, body.ui-premium .btn-copy:hover { background: var(--surface3) !important; color: #ffffff !important; }

/* Modal de detalhes e Pix */
body.ui-premium .detail-row { border-color: var(--border) !important; }
body.ui-premium .detail-key { color: var(--text-dim) !important; }
body.ui-premium .detail-val { color: #ffffff !important; font-weight: 600; }
body.ui-premium .pix-heading { color: #ffffff; font-family: var(--font-display); }
body.ui-premium .pix-value-box {
  background: var(--surface3) !important; border: 1px solid var(--border2) !important; border-radius: 14px !important; color: #ffffff !important;
}
body.ui-premium .pix-qrcode { background: #ffffff !important; padding: 10px !important; border-radius: 14px !important; }
body.ui-premium .pix-help { color: var(--text-dim) !important; }
body.ui-premium .pix-live { background: var(--ui-brand-soft) !important; color: var(--ui-brand-text) !important; border-color: var(--ui-brand-line) !important; }

/* ── Link de pagamento (/cobrar/…) ──────────────────────────────────────── */
body.pg-pagamento {
  background:
    radial-gradient(700px 480px at 90% 0%, color-mix(in srgb, var(--ui-brand) 12%, transparent), transparent 70%),
    var(--bg) !important;
}
body.pg-pagamento .pay-shell { max-width: 640px; padding: 28px 18px 56px; }
body.pg-pagamento .pay-brand { font-family: var(--font-display); font-size: 1.05rem; color: #ffffff; padding-bottom: 24px; }
body.pg-pagamento .pay-brand-mark { border-radius: 10px; background: var(--ui-brand) !important; color: var(--ui-brand-ink) !important; }
body.pg-pagamento .pay-card {
  background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: 24px !important;
  box-shadow: var(--sombra-modal) !important;
}
body.pg-pagamento .pay-kicker { color: var(--ui-brand-text) !important; }
body.pg-pagamento .pay-title { font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em; color: #ffffff; }
body.pg-pagamento .pay-subtitle { color: var(--text-dim) !important; }
body.pg-pagamento .pay-summary, body.pg-pagamento .pay-row { border-color: var(--border) !important; }
body.pg-pagamento .pay-row span:first-child { color: var(--text-dim) !important; }
body.pg-pagamento .pay-row strong { color: #ffffff; font-weight: 600; }
body.pg-pagamento .pay-total { color: var(--ui-brand) !important; font-family: var(--font-display); font-size: 1.3rem !important; }
body.pg-pagamento .pay-late {
  color: var(--yellow-text) !important; background: var(--yellow-bg); border: 1px solid rgba(251,146,60,.28);
  padding: 10px 14px; border-radius: 12px;
}
body.pg-pagamento .pay-pix { background: #0e131c !important; border: 1px solid var(--border2) !important; border-radius: 18px !important; padding: 24px !important; }
body.pg-pagamento .pay-pix h2 { font-family: var(--font-display); font-weight: 600; color: #ffffff; }
body.pg-pagamento .pay-pix-value { font-family: var(--font-display); font-weight: 600 !important; color: #ffffff; letter-spacing: -.02em; }
body.pg-pagamento .pay-qr { border-radius: 16px !important; padding: 12px !important; }
body.pg-pagamento .pay-copy {
  background: var(--surface) !important; border: 1px solid var(--border2) !important; border-radius: 12px !important;
  color: var(--text-muted) !important; font-family: ui-monospace, 'JetBrains Mono', monospace; font-size: .78rem;
}
body.pg-pagamento .pay-button {
  min-height: 48px !important; padding: 0 22px !important; border-radius: 12px !important;
  background: var(--ui-brand) !important; color: var(--ui-brand-ink) !important; font-weight: 700 !important;
}
body.pg-pagamento .pay-status { background: var(--surface3) !important; color: var(--text-muted) !important; border-radius: 12px; }
body.pg-pagamento .pay-error { color: var(--red-text) !important; }
body.pg-pagamento .pay-foot { color: var(--text-faint) !important; }

/* ── Páginas com caixa central (contrato, verificações, privacidade) ────── */
body.pg-documento { padding: 32px 20px 56px !important; background: var(--bg) !important; color: var(--text) !important; font-family: var(--font) !important; }
body.pg-documento .box {
  background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: 24px !important;
  box-shadow: var(--sombra-modal) !important; color: var(--text);
}
body.pg-documento h1, body.pg-documento h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em; color: #ffffff !important; }
body.pg-documento .eyebrow { color: var(--ui-brand-text) !important; }
body.pg-documento .hint, body.pg-documento .rotulo { color: var(--text-dim) !important; }
body.pg-documento .valor { color: #ffffff; }
body.pg-documento .marca { border-bottom: 1px solid var(--border) !important; }
body.pg-documento .marca strong { color: #ffffff !important; font-family: var(--font-display); }
body.pg-documento .linha { border-color: var(--border) !important; }
body.pg-documento .grupo { color: var(--ui-brand-text) !important; letter-spacing: .08em; font-size: .78rem; }
body.pg-documento label { color: var(--text-muted); }
body.pg-documento .check { color: var(--text-muted); }
body.pg-documento input[type="file"] { padding: 10px; color: var(--text-muted) !important; }
body.pg-documento button {
  min-height: 48px; border: 0 !important; border-radius: 12px !important;
  background: var(--ui-brand) !important; color: var(--ui-brand-ink) !important; font-weight: 700; font-family: var(--font);
}
body.pg-documento button.secondary { background: transparent !important; border: 1px solid var(--border2) !important; color: var(--text) !important; }
body.pg-documento .msg.success, body.pg-documento .success { color: var(--green-text) !important; }
body.pg-documento .msg.error, body.pg-documento .error { color: var(--red-text) !important; }
body.pg-documento .code-box, body.pg-documento #verificacao {
  background: var(--ui-brand-soft) !important; border: 1px solid var(--ui-brand-line) !important; border-radius: 14px !important; color: var(--text);
}
body.pg-documento #verificacao img { background: #ffffff; padding: 8px; border-radius: 12px; }
body.pg-documento .assinatura { border-top-color: var(--border) !important; }
body.pg-documento .status { background: var(--green-bg) !important; color: var(--green-text) !important; border: 1px solid var(--green-border); border-radius: 12px !important; }
body.pg-documento .status.invalido { background: var(--red-bg) !important; color: var(--red-text) !important; border-color: var(--red-border); }
body.pg-documento .form { background: #0e131c !important; border: 1px solid var(--border2) !important; border-radius: 16px !important; }
body.pg-documento .resultado.ok, body.pg-documento .ok { background: var(--green-bg) !important; color: var(--green-text) !important; border: 1px solid var(--green-border); border-radius: 14px; }
body.pg-documento .resultado.erro, body.pg-documento .erro { background: var(--red-bg) !important; color: var(--red-text) !important; border: 1px solid var(--red-border); border-radius: 14px; }
body.pg-documento .notice {
  background: var(--ui-brand-soft) !important; border: 1px solid var(--ui-brand-line) !important; border-left-width: 1px !important;
  color: var(--text-muted) !important; border-radius: 14px !important;
}
body.pg-documento .back { color: var(--ui-brand-text) !important; }

/* O texto do contrato fica numa "folha" clara, como um documento de verdade */
body.pg-documento .conteudo {
  background: #fbfbfa !important; color: #1f2937 !important; border: 0 !important; border-radius: 16px !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
}
body.pg-documento .conteudo .c-parte {
  background: #f1f5f4 !important; border-left-color: #0f766e !important; color: #134e4a !important;
}
body.pg-documento .conteudo .c-item b { color: #0f766e !important; }

@media print {
  body.pg-documento { background: #ffffff !important; color: #111827 !important; padding: 0 !important; }
  body.pg-documento .box { background: #ffffff !important; border: 0 !important; box-shadow: none !important; }
  body.pg-documento h1, body.pg-documento .marca strong { color: #111827 !important; }
}

/* ── Celular ────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  body.pg-documento { padding: 14px 10px 32px !important; }
  body.pg-documento .box { border-radius: 18px !important; }
  body.ui-premium .cliente-banner { padding: 18px !important; }
  body.ui-premium .cliente-doc { font-size: 1.1rem !important; }
}

/* Botões de texto longo podem quebrar linha nas páginas de documento */
body.pg-documento button { white-space: normal; }
body.pg-documento { color-scheme: dark; }

/* Links das páginas de documento sempre na cor da marca */
body.ui-premium.pg-documento a, body.ui-premium.pg-pagamento a, body.ui-premium.pg-ativar a { color: var(--ui-brand-text) !important; }
body.ui-premium.pg-documento a:hover, body.ui-premium.pg-pagamento a:hover, body.ui-premium.pg-ativar a:hover { color: #ffffff !important; }

/* Correção: no celular o style.css forçava a tela de entrada sempre visível
   (display:block !important), e ela ficava por cima da área do cliente após a consulta. */
@media (max-width: 900px) {
  body.ui-premium #screen-home[style*="none"] { display: none !important; }
}

/* Celular: números do resumo do cliente sem quebrar no meio */
@media (max-width: 640px) {
  body.ui-premium #screen-result .card-stat { flex-direction: column; align-items: flex-start; gap: 6px; }
  body.ui-premium #screen-result .stat-value { font-size: 1.3rem !important; white-space: nowrap; }
}