/* ═══════════════════════════════════════════════════════════════════════════
   PORTAL DO CLIENTE e TELAS DE ACESSO — Visual 3 (padrão OS MVMS-Ti)
   Carregado junto com o painel-v3.css (que traz as cores e os componentes).
   Telas de entrada: painel escuro arredondado à esquerda + cartão branco.
   Área do cliente: topo branco, faixa escura com os dados do cliente,
   cartões de números e tabela ocupando a largura toda.
═══════════════════════════════════════════════════════════════════════════ */

/* ─── Telas de entrada (login da equipe, portal, treinamentos) ──────────── */
body.ui-v3 .login-bg, body.ui-v3 .login-glow { display: none !important; }
body.ui-v3 .login-brand, body.ui-v3 #screen-home .login-hero {
  background: #0f172a !important; color: #e2e8f0; border: 0 !important; border-radius: 28px; position: relative; overflow: hidden;
}
body.ui-v3 .login-brand::before, body.ui-v3 #screen-home .login-hero::before {
  content: ''; position: absolute; width: 420px; height: 420px; right: -160px; bottom: -160px; top: auto; left: auto;
  border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--primary) 30%, transparent), transparent 65%);
  pointer-events: none; opacity: .55; display: block;
}
body.ui-v3 .login-brand::after, body.ui-v3 #screen-home .login-hero::after { display: none !important; }
body.ui-v3 .login-brand > *, body.ui-v3 #screen-home .login-hero > * { position: relative; z-index: 1; }
body.ui-v3 .login-brand .brand-name, body.ui-v3 #screen-home .logo-name { color: #ffffff !important; font-weight: 800; font-family: var(--font); }
body.ui-v3 .login-brand .brand-sub, body.ui-v3 #screen-home .logo-sub, body.ui-v3 .brand-bottom { color: #94a3b8 !important; }
body.ui-v3 .brand-headline, body.ui-v3 #screen-home .hero-title {
  color: #ffffff !important; font-family: var(--font) !important; font-weight: 800; letter-spacing: -.03em; line-height: 1.12;
  font-size: clamp(1.9rem, 3vw, 2.7rem) !important; background: none !important; -webkit-text-fill-color: currentColor;
}
body.ui-v3 #screen-home .hero-title::after { display: none !important; }
body.ui-v3 .brand-headline span { color: var(--primary) !important; }
body.ui-v3 #screen-home .hero-text { color: #a5b4c8 !important; font-size: .98rem; max-width: 440px; }
body.ui-v3 .brand-feature { color: #dbe3ee !important; font-size: .92rem; font-weight: 600; }
body.ui-v3 .brand-feature-icon { background: rgba(255,255,255,.08) !important; color: var(--primary) !important; border: 0 !important; border-radius: 12px; }
body.ui-v3 #screen-home .hero-features { display: flex; flex-direction: column; gap: 12px; max-width: none; }
body.ui-v3 #screen-home .feature-item {
  flex-direction: row; align-items: center; gap: 12px; min-height: 0; padding: 0; background: none !important; border: 0 !important;
  color: #dbe3ee; font-size: .92rem; font-weight: 600;
}
body.ui-v3 #screen-home .feature-icon { width: 34px; height: 34px; border-radius: 11px; background: rgba(255,255,255,.08) !important; color: var(--primary) !important; border: 0 !important; display: flex; align-items: center; justify-content: center; }

body.ui-v3 .login-form-side { background: transparent !important; border: 0 !important; box-shadow: none !important; display: flex; flex-direction: column; align-items: center; justify-content: center; }
body.ui-v3 .login-card {
  width: 100%; max-width: 440px; background: var(--surface) !important; border: 1px solid var(--border) !important;
  border-radius: 24px !important; box-shadow: var(--shadow-card), 0 24px 60px -32px rgba(15,23,42,.25) !important; padding: 36px 34px !important;
}
body.ui-v3 .login-card::before, body.ui-v3 .login-card::after { display: none !important; }
body.ui-v3 .login-title { font-family: var(--font) !important; font-weight: 800; letter-spacing: -.02em; font-size: 1.6rem !important; color: var(--text) !important; }
body.ui-v3 .login-desc { color: var(--text-muted) !important; }
body.ui-v3 .login-card .field label { font-size: .84rem; font-weight: 700; color: var(--text); }
body.ui-v3 .login-card input { min-height: 50px; border-radius: 14px; font-size: .95rem; }
body.ui-v3 .login-card .btn-primary { min-height: 52px; border-radius: 14px; font-size: 1rem; font-weight: 800; width: 100%; }
body.ui-v3 .login-card a { color: var(--ui-accent-text); }
body.ui-v3 .login-trust-note { color: var(--text-dim) !important; }
body.ui-v3 .trust-shield { background: var(--green-bg) !important; color: var(--green-text) !important; border: 0 !important; }
body.ui-v3 .login-footer { color: var(--text-dim); border-color: var(--border) !important; }
body.ui-v3 .btn-theme-toggle { display: inline-flex !important; width: 44px; height: 44px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-xs); }

/* Portal: tela de entrada vira painel escuro + cartão (como o OS) */
body.ui-v3 #screen-home { background: var(--bg) !important; min-height: 100vh; }
@media (min-width: 900px) {
  body.ui-v3 #screen-home .login-container {
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 16px; max-width: none; width: 100%;
    min-height: 100vh; padding: 16px; align-items: stretch; box-sizing: border-box;
  }
  body.ui-v3 #screen-home .login-hero { max-width: none; padding: 44px 48px; justify-content: center; }
  body.ui-v3 #screen-home .login-card { align-self: center; justify-self: center; }
  body.ui-v3 .login-brand { margin: 16px; min-height: calc(100vh - 32px); padding: 44px 48px; box-sizing: border-box; }
  body.ui-v3:has(> .login-brand) { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}
@media (max-width: 899px) {
  body.ui-v3 #screen-home .login-container { padding: 16px; gap: 16px; flex-direction: column; }
  body.ui-v3 #screen-home .login-hero { padding: 26px 22px; gap: 18px; }
  body.ui-v3 #screen-home .hero-title { font-size: 1.7rem !important; }
  body.ui-v3 #screen-home .hero-features { display: none; }
  body.ui-v3 .login-card { padding: 26px 20px !important; border-radius: 22px !important; }
}

/* ─── Área do cliente ───────────────────────────────────────────────────── */
body.ui-v3 .screen { background: var(--bg); }
body.ui-v3 .header {
  background: var(--surface) !important; border-bottom: 1px solid var(--border) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important;
}
body.ui-v3 .header-inner { max-width: none; min-height: 70px; padding: 12px clamp(16px, 3vw, 44px); }
body.ui-v3 .header-title { font-family: var(--font); font-weight: 800; color: var(--text) !important; font-size: 1rem; }
body.ui-v3 .btn-logout {
  min-height: 42px; padding: 0 14px; border-radius: 12px; display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface) !important; border: 1px solid var(--border2) !important; color: var(--text) !important; font-weight: 600;
}
body.ui-v3 .btn-logout:hover { background: var(--surface2) !important; }
body.ui-v3 .main { max-width: none; padding: 24px clamp(16px, 3vw, 44px) 64px; }

/* Faixa escura com o documento e o plano do cliente */
body.ui-v3 .cliente-banner {
  background: #0f172a !important; color: #ffffff; border: 0 !important; border-radius: 22px !important;
  box-shadow: none !important; padding: 24px 28px !important; position: relative; overflow: hidden;
}
body.ui-v3 .cliente-banner::before {
  content: ''; position: absolute; width: 360px; height: 360px; right: -140px; top: -160px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--primary) 30%, transparent), transparent 65%); opacity: .6; pointer-events: none;
}
body.ui-v3 .cliente-banner::after { display: none !important; }
body.ui-v3 .cliente-banner > * { position: relative; z-index: 1; }
body.ui-v3 .cliente-doc { font-family: var(--font) !important; color: #ffffff !important; font-size: 1.4rem !important; font-weight: 800 !important; letter-spacing: -.01em !important; }
body.ui-v3 .cliente-info { color: #a5b4c8 !important; }
body.ui-v3 .cliente-plano { background: rgba(255,255,255,.1) !important; border: 0 !important; color: #e2e8f0 !important; border-radius: 999px !important; }
body.ui-v3 .cliente-banner-status { background: rgba(255,255,255,.1) !important; color: #e2e8f0 !important; border: 0 !important; box-shadow: none !important; }

/* Abas (Cobranças / Contratos) */
body.ui-v3 .portal-tabs, body.ui-v3 .cobranca-tabs {
  display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px !important; width: fit-content;
  background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: 14px !important; box-shadow: var(--shadow-xs) !important;
}
body.ui-v3 .portal-tab, body.ui-v3 .tab-aba-btn {
  min-height: 40px; padding: 0 18px !important; border: 0 !important; border-radius: 10px !important;
  background: transparent !important; color: var(--text-muted) !important; font-weight: 700; box-shadow: none !important;
}
body.ui-v3 .portal-tab:hover, body.ui-v3 .tab-aba-btn:hover { color: var(--text) !important; }
body.ui-v3 .portal-tab.active, body.ui-v3 .tab-aba-btn.active { background: var(--rail-bg) !important; color: #ffffff !important; }
html[data-theme="dark"] body.ui-v3 .portal-tab.active, html[data-theme="dark"] body.ui-v3 .tab-aba-btn.active { background: var(--primary) !important; color: var(--ui-on-accent) !important; }
body.ui-v3 .portal-tab-badge, body.ui-v3 .tab-count {
  background: color-mix(in srgb, var(--primary) 18%, transparent) !important; color: var(--ui-accent-text) !important; border: 0 !important; border-radius: 999px !important; font-weight: 700;
}
body.ui-v3 .portal-tab.active .portal-tab-badge, body.ui-v3 .tab-aba-btn.active .tab-count { background: rgba(255,255,255,.18) !important; color: #ffffff !important; }

/* Cartões de números do cliente (sem ícone) */
body.ui-v3.pg-portal .resumo-cards { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
body.ui-v3.pg-portal .card-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
body.ui-v3.pg-portal .card-stat .stat-label { order: 0; }
body.ui-v3.pg-portal .card-stat .stat-value { order: 1; font-size: 1.7rem; width: 100%; }
body.ui-v3.pg-portal .card-stat:nth-child(1) { --stat-c: var(--blue); }
body.ui-v3.pg-portal .card-stat:nth-child(2) { --stat-c: var(--yellow); }
body.ui-v3.pg-portal .card-stat:nth-child(3) { --stat-c: var(--red); }
body.ui-v3.pg-portal .card-stat:nth-child(4) { --stat-c: var(--green); }

/* Tabela e contratos */
body.ui-v3 .result-section { overflow: hidden; }
body.ui-v3 .result-section .table-scroll { border: 0 !important; border-radius: 0 !important; background: transparent; }
body.ui-v3 .table-header { padding: 14px 18px; border-bottom: 1px solid var(--border); }
body.ui-v3 .portal-section-heading { background: none !important; border-bottom: 1px solid var(--border); }
body.ui-v3 .portal-section-heading .eyebrow { color: var(--ui-accent-text) !important; }
body.ui-v3 .portal-section-heading h2 { color: var(--text) !important; font-family: var(--font); font-weight: 800; }
body.ui-v3 .portal-contracts-live { background: var(--green-bg) !important; color: var(--green-text) !important; border: 0 !important; box-shadow: none !important; }
body.ui-v3 .portal-contract-icon { background: var(--surface2) !important; color: var(--ui-accent-text) !important; border: 1px solid var(--border) !important; }
body.ui-v3 .portal-contracts-list > * { border-color: var(--border) !important; background: transparent !important; }
body.ui-v3 .btn-boleto, body.ui-v3 .btn-detail, body.ui-v3 .btn-copy {
  min-height: 38px; padding: 0 14px; border-radius: 10px;
  background: var(--surface) !important; border: 1px solid var(--border2) !important; color: var(--text) !important; font-weight: 600;
}
body.ui-v3 .btn-boleto:hover, body.ui-v3 .btn-detail:hover, body.ui-v3 .btn-copy:hover { background: var(--surface2) !important; }
body.ui-v3 .detail-row { border-color: var(--border) !important; }
body.ui-v3 .detail-key { color: var(--text-dim) !important; }
body.ui-v3 .detail-val { color: var(--text) !important; font-weight: 600; }
body.ui-v3.pg-portal .modal-overlay { left: 0 !important; }
@media (max-width: 640px) {
  body.ui-v3 .cliente-banner { padding: 18px !important; border-radius: 18px !important; }
  body.ui-v3 .cliente-doc { font-size: 1.15rem !important; }
  body.ui-v3.pg-portal .resumo-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.ui-v3.pg-portal .card-stat .stat-value { font-size: 1.25rem; }
  body.ui-v3 .header-inner { min-height: 60px; }
}

/* ─── Compatibilidade com as regras das páginas avulsas (portal-premium.css) ─
   Contrato, link de pagamento, verificações, privacidade e ativação de acesso
   continuam usando o portal-premium.css para o layout; aqui ele ganha as
   cores claras do visual 3 (antes tudo era branco sobre fundo escuro). */
body.ui-v3 {
  --ui-brand: var(--primary); --ui-brand-ink: var(--ui-on-accent);
  --ui-brand-soft: color-mix(in srgb, var(--primary) 12%, transparent);
  --ui-brand-line: color-mix(in srgb, var(--primary) 35%, transparent);
  --ui-brand-text: var(--ui-accent-text);
  --text-faint: var(--text-dim); --sombra-modal: var(--shadow-elevated); --surface3: var(--surface3, #e8edf5);
}
html:not([data-theme="dark"]) body.pg-documento, html:not([data-theme="dark"]) body.pg-pagamento { color-scheme: light; }
body.ui-v3.pg-pagamento { background: var(--bg) !important; }
body.ui-v3.pg-pagamento .pay-brand, body.ui-v3.pg-pagamento .pay-title, body.ui-v3.pg-pagamento .pay-row strong,
body.ui-v3.pg-pagamento .pay-pix h2, body.ui-v3.pg-pagamento .pay-pix-value,
body.ui-v3.pg-documento h1, body.ui-v3.pg-documento h2, body.ui-v3.pg-documento .valor, body.ui-v3.pg-documento .marca strong,
body.ui-v3 .pix-heading, body.ui-v3 .pix-value-box { color: var(--text) !important; font-family: var(--font) !important; }
body.ui-v3.pg-pagamento .pay-title, body.ui-v3.pg-documento h1 { font-weight: 800 !important; }
body.ui-v3.pg-pagamento .pay-pix, body.ui-v3.pg-documento .form { background: var(--surface2) !important; border-color: var(--border) !important; }
body.ui-v3 .pix-value-box { background: var(--surface2) !important; border-color: var(--border) !important; }
body.ui-v3.pg-documento a, body.ui-v3.pg-pagamento a, body.ui-v3.pg-ativar a { color: var(--ui-accent-text) !important; }
body.ui-v3.pg-documento a:hover, body.ui-v3.pg-pagamento a:hover, body.ui-v3.pg-ativar a:hover { color: var(--text) !important; }
html:not([data-theme="dark"]) body.ui-v3.pg-documento .conteudo { box-shadow: inset 0 0 0 1px var(--border); }

/* Celular: a tela de entrada não pode ficar por cima da área do cliente depois da consulta */
@media (max-width: 900px) {
  body.ui-v3 #screen-home[style*="none"] { display: none !important; }
  body.ui-v3 #screen-result .card-stat .stat-value { white-space: nowrap; }
}

/* Tela de entrada do portal: ocupa exatamente a janela, sem enfeites atrás */
body.ui-v3 #screen-home::before, body.ui-v3 #screen-home::after { display: none !important; }
body.ui-v3 #screen-home .hero-content { align-items: flex-start; text-align: left; }
body.ui-v3 #screen-home .hero-features { align-items: flex-start; }
@media (min-width: 900px) {
  body.ui-v3 #screen-home { padding: 0 !important; display: block; overflow: hidden; height: 100vh; height: 100dvh; }
  body.ui-v3 #screen-home .login-container { height: 100%; min-height: 0; margin: 0; }
  body.ui-v3 #screen-home .login-hero { height: 100%; min-height: 0; overflow: hidden; }
  body.ui-v3 #screen-home .login-card { max-height: 100%; overflow-y: auto; }
}