/* =========================================================
   CredIA (antigo UpCredito) — camada visual do redesign (2026-10-21)
   Carregada DEPOIS do style.css: só sobrescreve visual, nunca muda id/classe
   usada pelo app.js. Marca (public/brand/LEIA-ME.txt): Azul Crédito #0E2A47,
   Verde Up #12B76A (#32D583 em fundo escuro), Névoa #F5F7FA, Plus Jakarta Sans.
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --upc-navy:    #0E2A47;
  --upc-navy-2:  #0A2139;
  --upc-verde:   #12B76A;
  --upc-verde-h: #0E9A59;
  --upc-verde-e: #32D583;
  --upc-nevoa:   #F5F7FA;

  /* tokens antigos, remapeados pra marca (inline styles do HTML usam estes) */
  --green-dark:   #0B7A4B;
  --green-mid:    #0E9A59;
  --green-accent: #32D583;
  --green-btn:    #12B76A;
  --green-btn-h:  #0E9A59;
  --gray-50:  #F9FAFB;
  --gray-100: #F2F4F7;
  --gray-200: #E4E7EC;
  --gray-300: #D0D5DD;
  --gray-400: #98A2B3;
  --gray-500: #667085;
  --gray-600: #475467;
  --gray-700: #344054;
  --gray-800: #101828;
  --blue:   #2E90FA;
  --yellow: #F79009;
  --red:    #F04438;
  --orange: #FB6514;
  /* usados no style.css mas nunca definidos — agora existem */
  --text-primary:   #101828;
  --text-secondary: #475467;
  --text-muted:     #667085;
  --muted:          #667085;
  --border:         #E4E7EC;
  --surface:        #FFFFFF;
  --surface-2:      #F9FAFB;

  --radius: 10px;
  --shadow: 0 1px 2px rgba(16,24,40,.05);
  --shadow-md: 0 8px 24px -6px rgba(16,24,40,.12), 0 2px 6px rgba(16,24,40,.04);
  --shadow-lg: 0 24px 48px -12px rgba(16,24,40,.24);
  --ring: 0 0 0 3px rgba(18,183,106,.22);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --font-titulo: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;

  /* aliases usados pelas telas novas (whatsapp/sobre, copiados do sellerup.next) */
  --color-bg: var(--upc-nevoa);
  --color-surface: #FFFFFF;
  --color-surface-2: #F9FAFB;
  --color-surface-hover: #F2F4F7;
  --color-fg: #101828;
  --color-fg-muted: #475467;
  --color-fg-subtle: #98A2B3;
  --color-border: #E4E7EC;
  --color-border-strong: #D0D5DD;
  --color-accent: var(--upc-verde);
  --color-accent-soft: rgba(18,183,106,.10);
  --color-accent-fg-soft: #0B7A4B;
  --color-neutral-soft: #F2F4F7;
  --color-info: #2E90FA;
  --color-info-soft: #EFF8FF;
  --color-success: #12B76A;
  --color-success-soft: #ECFDF3;
  --color-danger: #F04438;
  --color-danger-soft: #FEF3F2;
  --color-warning: #F79009;
  --color-warning-soft: #FFFAEB;
  --gradient-brand: linear-gradient(135deg, #0E9A59 0%, #12B76A 50%, #32D583 100%);
  --gradient-hero: radial-gradient(120% 80% at 0% 0%, #17406B 0%, transparent 60%), radial-gradient(90% 70% at 100% 100%, rgba(50,213,131,.28) 0%, transparent 60%), #0E2A47;
  --up-teal-300: #6CE9A6;
  --up-teal-400: #32D583;
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --ease-out: var(--ease);
  --shadow-xs: var(--shadow);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

body{ font-family:"Inter", -apple-system, "Segoe UI", Roboto, sans-serif; background:var(--upc-nevoa); color:var(--gray-800); -webkit-font-smoothing:antialiased; }
::selection{ background:rgba(18,183,106,.22); }
*{ scrollbar-width:thin; scrollbar-color:var(--gray-300) transparent; }

/* ---------- menu lateral ---------- */
.sidebar{ background:linear-gradient(180deg, var(--upc-navy) 0%, var(--upc-navy-2) 100%); border-right:1px solid rgba(255,255,255,.05); }
.sidebar-logo{ padding:18px 16px; min-height:64px; }
.sidebar-logo .sb-logo{ height:30px; width:auto; display:block; }
.sidebar-logo .sb-simbolo{ height:30px; width:30px; display:none; }
.sidebar.collapsed .sidebar-logo .sb-logo{ display:none; }
.sidebar.collapsed .sidebar-logo .sb-simbolo{ display:block; }
.sidebar-collapse-btn{ background:rgba(255,255,255,.06); color:rgba(226,232,240,.6); }

.sidebar-nav{ padding:12px; }
.nav-item{ position:relative; color:rgba(226,232,240,.72); font-weight:500; font-size:13.5px; padding:9px 11px; border-radius:9px; }
.nav-item:hover{ background:rgba(255,255,255,.05); color:#F1F5F9; }
.nav-item.active{ background:rgba(50,213,131,.14); color:#fff; font-weight:600; box-shadow:none; }
.nav-item.active .nav-icon{ color:var(--upc-verde-e); opacity:1; }
.nav-item.active::before{ content:""; position:absolute; left:-12px; top:8px; bottom:8px; width:3px; border-radius:0 3px 3px 0; background:var(--upc-verde-e); box-shadow:0 0 12px var(--upc-verde-e); }
.nav-item.nav-sub{ padding-left:14px; font-size:13.5px; }
.nav-group{ margin-top:10px; }
.nav-group-header{ color:rgba(148,163,184,.7); font-size:10.5px; letter-spacing:.09em; padding:6px 11px; }
.nav-group-header .nav-icon{ display:none; }
.nav-group.expanded > .nav-group-items{ max-height:400px; }
.nav-badge{ background:rgba(247,144,9,.18); color:#FDB022; }

.sb-wpp{ display:flex; align-items:center; gap:10px; margin:0 12px 8px; padding:10px 11px; border-radius:10px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); color:rgba(226,232,240,.75); font-size:12.5px; cursor:pointer; text-align:left; font-family:inherit; }
.sb-wpp:hover{ background:rgba(255,255,255,.07); }
.sb-wpp-txt{ min-width:0; }
.sb-wpp b{ display:block; color:#F1F5F9; font-weight:600; font-size:12.5px; white-space:nowrap; }
.sb-wpp small{ display:block; color:rgba(148,163,184,.7); font-size:11px; }
.sidebar.collapsed .sb-wpp{ margin:0 8px 8px; justify-content:center; padding:10px 0; }
.sidebar.collapsed .sb-wpp-txt{ display:none; }
.dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; background:#64748B; display:inline-block; }
.dot.on{ background:#22C55E; box-shadow:0 0 0 3px rgba(34,197,94,.18); animation:upcPulse 2.4s ease-in-out infinite; }
.dot.off{ background:#EF4444; box-shadow:0 0 0 3px rgba(239,68,68,.18); }
.dot.wait{ background:#F59E0B; }
@keyframes upcPulse{ 50%{ box-shadow:0 0 0 5px rgba(34,197,94,.06), 0 0 12px rgba(34,197,94,.6); } }

.sidebar-user{ border-top:1px solid rgba(255,255,255,.06); padding:12px; }
.user-avatar{ background:var(--gradient-brand); border-radius:50%; font-family:var(--font-titulo); }
.btn-logout{ background:transparent; }
.btn-logout:hover{ background:rgba(240,68,56,.15); color:#FDA29B; }
.sidebar.collapsed .nav-item::after{ background:#0B1F35; border-radius:8px; font-weight:500; }

/* ---------- área principal / páginas ---------- */
.main-content{ background:var(--upc-nevoa); }
.page{ padding:26px 32px 40px; }
.page.active{ animation:upcIn .25s var(--ease) both; }
@keyframes upcIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.page-header{ margin-bottom:20px; gap:16px; flex-wrap:wrap; }
.page-title{ font-family:var(--font-titulo); font-size:22px; font-weight:800; letter-spacing:-.02em; color:var(--upc-navy); }
.page-head-main{ display:flex; gap:14px; align-items:center; }
.page-icon{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:rgba(18,183,106,.10); color:var(--upc-verde); border:1px solid rgba(18,183,106,.2); flex-shrink:0; }
.page-icon .nav-icon, .page-icon svg{ width:20px; height:20px; }
.page-sub{ margin:2px 0 0; font-size:13px; color:var(--gray-600); }
.dash-section-label{ font-family:var(--font-titulo); color:var(--gray-500); letter-spacing:.06em; }
.btn-refresh{ width:38px; height:38px; border-radius:10px; border:1px solid var(--gray-200); background:var(--upc-card); color:var(--gray-600); display:inline-flex; align-items:center; justify-content:center; box-shadow:var(--shadow); cursor:pointer; transition:all .15s; }
.btn-refresh:hover{ color:var(--upc-verde); border-color:var(--gray-300); }

/* ---------- cards de KPI ---------- */
.stats-grid{ gap:14px; }
.stat-card{ background:var(--upc-card); border:1px solid var(--gray-200); border-radius:14px; box-shadow:var(--shadow); padding:16px 18px; transition:box-shadow .15s, transform .15s, border-color .15s; }
.stat-card.clickable:hover{ box-shadow:var(--shadow-md); transform:translateY(-1px); border-color:var(--gray-300); }
.stat-card .stat-icon{ border-radius:11px; }
.stat-card.green .stat-icon{ background:#ECFDF3; color:var(--upc-verde); }
.stat-card.yellow .stat-icon{ background:#FFFAEB; color:#DC6803; }
.stat-card.red .stat-icon{ background:#FEF3F2; color:var(--red); }
.stat-card.blue .stat-icon{ background:#EFF8FF; color:var(--blue); }
.stat-card .label{ text-transform:none; letter-spacing:0; font-size:12.5px; font-weight:500; color:var(--gray-600); }
.stat-card .value{ font-family:var(--font-titulo); font-size:26px; font-weight:800; letter-spacing:-.02em; }
.stat-card .sub{ color:var(--gray-500); }
.stat-card.green .value{ color:#039855; }
.stat-card.yellow .value{ color:#DC6803; }

/* ---------- tabelas ---------- */
.table-wrap{ background:var(--upc-card); border:1px solid var(--gray-200); border-radius:14px; box-shadow:var(--shadow); overflow:auto; }
.table-wrap thead th{ background:var(--gray-50); color:var(--gray-500); font-size:11.5px; font-weight:600; text-transform:none; letter-spacing:0; border-bottom:1px solid var(--gray-200); padding:11px 14px; }
.table-wrap tbody td{ border-bottom:1px solid var(--gray-100); padding:11px 14px; }
.table-wrap tbody tr:hover{ background:#F9FAFB; }
.table-wrap tbody tr:last-child td{ border-bottom:none; }
.td-name{ font-weight:600; color:var(--gray-800); }

/* ---------- badges / chips / abas ---------- */
.status-badge{ border-radius:999px; font-weight:600; font-size:11.5px; padding:3px 10px; }
.pc-tab{ border-radius:999px; border:1px solid var(--gray-200); font-weight:600; padding:7px 16px; background:var(--upc-card); color:var(--gray-600); }
.pc-tab:hover{ border-color:var(--gray-300); color:var(--gray-800); }
.pc-tab.active{ background:var(--upc-navy); border-color:var(--upc-navy); color:#fff; box-shadow:0 4px 12px -4px rgba(14,42,71,.4); }
.pc-tab[data-sit="pendentes"].active{ background:#FFFAEB; border-color:#FEC84B; color:#B54708; box-shadow:none; }
.pc-tab[data-sit="aprovados"].active{ background:#ECFDF3; border-color:#6CE9A6; color:#027A48; box-shadow:none; }
.pc-tab[data-sit="reprovados"].active{ background:#FEF3F2; border-color:#FDA29B; color:#B42318; box-shadow:none; }

/* ---------- botões ---------- */
.btn-primary{ background:var(--upc-verde); border-radius:10px; font-weight:600; box-shadow:0 1px 2px rgba(16,24,40,.08), inset 0 1px 0 rgba(255,255,255,.15); }
.btn-primary:hover{ background:var(--upc-verde-h); }
.btn-primary:focus-visible{ outline:none; box-shadow:var(--ring); }
.btn-secondary, .btn-outline{ border-radius:10px; font-weight:600; }
.btn-danger{ border-radius:10px; }
.btn-icon{ border-radius:8px; transition:all .15s; }

.btn-novo{ display:inline-flex; align-items:center; justify-content:center; gap:7px; height:38px; padding:0 14px; border-radius:10px; border:1px solid transparent; background:var(--upc-verde); color:#fff; font:600 13px "Inter", sans-serif; cursor:pointer; white-space:nowrap; transition:all .15s; }
.btn-novo:hover{ background:var(--upc-verde-h); }
.btn-novo.outline{ background:var(--upc-card); color:var(--gray-700); border-color:var(--gray-300); box-shadow:var(--shadow); }
.btn-novo.outline:hover{ background:var(--gray-50); }
.btn-novo.perigo{ color:var(--red); }
.btn-novo.perigo:hover{ background:#FEF3F2; border-color:#FDA29B; }
.btn-novo.sm{ height:32px; padding:0 11px; font-size:12.5px; }

/* ---------- campos ---------- */
.field label{ text-transform:none; letter-spacing:0; font-size:12.5px; color:var(--gray-700); }
.field input, .field select, .field textarea, .cs-trigger{ border:1px solid var(--gray-300); border-radius:10px; box-shadow:var(--shadow); }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--upc-verde); box-shadow:var(--ring); outline:none; }
.cs-wrap.open .cs-trigger{ border-color:var(--upc-verde); box-shadow:var(--ring); }
.cs-dropdown{ border:1px solid var(--gray-200); border-radius:12px; box-shadow:var(--shadow-lg); padding:4px; }
.cs-item{ border-radius:8px; }
.cs-item.selected{ background:#ECFDF3; color:#027A48; }

/* ---------- modais e toast ---------- */
.modal-overlay{ background:rgba(10,33,57,.45); backdrop-filter:blur(4px); }
.modal{ border-radius:18px; border:1px solid var(--gray-200); box-shadow:var(--shadow-lg); overflow:hidden; }
.modal-header{ border-bottom:1px solid var(--gray-200); }
.modal-title{ font-family:var(--font-titulo); font-weight:800; color:var(--upc-navy); }
.modal-footer{ background:var(--gray-50); border-top:1px solid var(--gray-200); }
.toast{ border-radius:12px; box-shadow:var(--shadow-lg); font-weight:500; }

/* ---------- configurações ---------- */
.config-card{ border:1px solid var(--gray-200); border-radius:14px; box-shadow:var(--shadow); }
.config-card-title{ font-family:var(--font-titulo); color:var(--upc-navy); }

/* =========================================================
   Componentes das telas novas (WhatsApp / Sobre)
   ========================================================= */
.card-novo{ background:var(--upc-card); border:1px solid var(--gray-200); border-radius:14px; box-shadow:var(--shadow); overflow:hidden; }
.card-novo-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 18px; border-bottom:1px solid var(--gray-200); min-height:56px; }
.card-novo-tit{ display:flex; align-items:center; gap:10px; color:var(--gray-500); }
.card-novo-tit h3{ font-size:14px; font-weight:600; color:var(--gray-800); margin:0; }
.vazio{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:48px 20px; text-align:center; color:var(--gray-500); }
.vazio b{ color:var(--gray-800); }
.vazio p{ margin:0; font-size:13px; max-width:340px; }
.pill{ display:inline-flex; align-items:center; gap:6px; height:22px; padding:0 10px; border-radius:999px; font-size:11.5px; font-weight:600; }
.pill::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.pill.pos{ background:#ECFDF3; color:#027A48; }
.pill.neg{ background:#FEF3F2; color:#B42318; }
.txt-sutil{ color:var(--gray-400); }
.grid-2{ display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:16px; align-items:stretch; }
.grid-3{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; }
.grid-kpi{ display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:14px; }
.kpi{ background:var(--upc-card); border:1px solid var(--gray-200); border-radius:14px; padding:16px 18px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:10px; }
.kpi-top{ display:flex; justify-content:space-between; align-items:center; }
.kpi-label{ font-size:12.5px; font-weight:500; color:var(--gray-600); }
.kpi-ico{ width:32px; height:32px; border-radius:9px; display:grid; place-items:center; }
.kpi-ico.verde{ background:#ECFDF3; color:var(--upc-verde); }
.kpi-ico.azul{ background:#EFF8FF; color:var(--blue); }
.kpi-val{ font-family:var(--font-titulo); font-size:26px; font-weight:800; letter-spacing:-.02em; color:var(--gray-800); }
.kpi-foot{ font-size:12px; color:var(--gray-500); }
.kv{ display:flex; flex-direction:column; }
.kv-row{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:12px 18px; border-bottom:1px solid var(--gray-100); font-size:13px; }
.kv-row:last-child{ border-bottom:none; }
.kv-row span{ display:inline-flex; align-items:center; gap:8px; color:var(--gray-600); }
.kv-row span svg{ color:var(--gray-400); }
.kv-row b{ text-align:right; font-weight:600; }
.kv-row small{ display:block; font-weight:400; font-size:11.5px; color:var(--gray-500); }

.wpp-hero{ display:flex; align-items:center; gap:18px; padding:22px; flex-wrap:wrap; }
.wpp-hero h3{ margin:0; font-size:16px; font-weight:700; }
.wpp-hero p{ margin:3px 0 0; font-size:13px; color:var(--gray-600); }
.wpp-hero-ico{ width:56px; height:56px; border-radius:16px; display:grid; place-items:center; flex-shrink:0; }
.wpp-hero-ico.on{ background:#ECFDF3; color:var(--upc-verde); }
.wpp-dicas{ display:flex; flex-direction:column; gap:8px; padding:0 22px 22px; }
.wpp-dicas div{ display:flex; gap:8px; font-size:12.5px; color:var(--gray-600); }
.wpp-dicas svg{ color:var(--upc-verde); flex-shrink:0; margin-top:2px; }
.wpp-nota{ display:flex; align-items:center; gap:6px; margin:-4px 0 0; font-size:11.5px; color:var(--gray-400); }
.wpp-perfil-top{ display:flex; align-items:center; gap:16px; padding:22px; border-bottom:1px solid var(--gray-200); flex-wrap:wrap; }
.wpp-perfil-top h3{ margin:0; font-size:16px; font-weight:700; }
.wpp-foto-wrap{ position:relative; flex-shrink:0; }
.wpp-foto-wrap .dot{ position:absolute; right:2px; bottom:4px; width:14px; height:14px; box-shadow:0 0 0 3px #fff; }
.wpp-foto{ width:72px; height:72px; border-radius:50%; object-fit:cover; display:block; }
.wpp-foto-ini{ display:grid; place-items:center; background:var(--gradient-brand); color:#fff; font:800 28px var(--font-titulo); }
.wpp-numero{ font-family:var(--font-mono); font-size:14px; color:var(--gray-600); margin-top:3px; }

.qr-wrap{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:28px; align-items:center; padding:24px; }
.qr-passos{ display:flex; flex-direction:column; gap:14px; }
.qr-passo{ display:flex; gap:14px; align-items:flex-start; animation:upcStep .45s var(--ease) both; animation-delay:calc(var(--i) * 120ms); }
@keyframes upcStep{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.qr-passo-n{ width:30px; height:30px; border-radius:10px; display:grid; place-items:center; flex-shrink:0; background:var(--gradient-brand); color:#fff; font-weight:700; font-size:13px; }
.qr-passo > div > b{ display:block; font-size:14px; }
.qr-passo p{ margin:2px 0 0; font-size:12.5px; line-height:1.5; color:var(--gray-600); }
.qr-passo p b{ font-weight:600; color:var(--gray-800); }
.qr-aviso{ display:flex; gap:8px; margin-top:6px; padding:11px 13px; border-radius:11px; background:var(--gray-50); border:1px solid var(--gray-200); font-size:12px; color:var(--gray-600); line-height:1.5; }
.qr-aviso svg{ flex-shrink:0; color:var(--upc-verde); }
.qr-box{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.qr-moldura{ position:relative; width:280px; height:280px; padding:16px; border-radius:22px; background:#fff; box-shadow:0 18px 40px -16px rgba(14,42,71,.45), 0 0 0 1px var(--gray-200); overflow:hidden; }
.qr-moldura img#wppQrImg{ width:100%; height:100%; display:block; image-rendering:pixelated; }
.qr-logo{ position:absolute; left:50%; top:50%; width:54px; height:54px; margin:-27px 0 0 -27px; border-radius:14px; background:#fff; padding:6px; box-shadow:0 2px 8px rgba(0,0,0,.15); }
.qr-logo img{ width:100%; height:100%; display:block; }
.qr-scan{ position:absolute; left:10px; right:10px; height:2px; top:10px; background:linear-gradient(90deg, transparent, #32D583, transparent); box-shadow:0 0 12px #32D583; animation:upcScan 2.6s ease-in-out infinite; }
@keyframes upcScan{ 0%,100%{ top:12px; } 50%{ top:calc(100% - 14px); } }
.qr-c{ position:absolute; width:26px; height:26px; border:3px solid var(--upc-verde); }
.qr-c.a{ top:6px; left:6px; border-right:none; border-bottom:none; border-radius:10px 0 0 0; }
.qr-c.b{ top:6px; right:6px; border-left:none; border-bottom:none; border-radius:0 10px 0 0; }
.qr-c.c{ bottom:6px; left:6px; border-right:none; border-top:none; border-radius:0 0 0 10px; }
.qr-c.d{ bottom:6px; right:6px; border-left:none; border-top:none; border-radius:0 0 10px 0; }
.qr-spin{ position:absolute; inset:0; display:none; place-items:center; color:var(--upc-verde); }
.qr-spin svg{ animation:upcGira .9s linear infinite; }
@keyframes upcGira{ to{ transform:rotate(360deg); } }
.qr-moldura.carregando .qr-spin{ display:grid; }
.qr-moldura.carregando .qr-logo, .qr-moldura.carregando .qr-scan{ display:none; }
.qr-status{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--gray-600); }

/* =========================================================
   Login em tela dividida
   ========================================================= */
.login-page.login-novo{ display:block; background:var(--upc-nevoa); }
.auth-split{ min-height:100vh; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); }
.auth-hero{ position:relative; background:var(--gradient-hero); color:#fff; padding:44px 56px; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; }
.auth-hero::before{ content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size:40px 40px; -webkit-mask-image:radial-gradient(ellipse at 30% 40%, #000 20%, transparent 75%); mask-image:radial-gradient(ellipse at 30% 40%, #000 20%, transparent 75%); }
.auth-hero > *{ position:relative; }
.auth-hero-logo{ height:40px; width:auto; align-self:flex-start; }
.auth-hero-copy h1{ font-family:var(--font-titulo); font-size:38px; font-weight:800; line-height:1.15; letter-spacing:-.03em; max-width:480px; }
.auth-hero-copy h1 em{ font-style:normal; background:linear-gradient(90deg, #6CE9A6, #32D583); -webkit-background-clip:text; background-clip:text; color:transparent; }
.auth-hero-copy p{ color:rgba(226,232,240,.75); font-size:15px; max-width:440px; margin:16px 0 0; line-height:1.6; }
.auth-feats{ display:flex; flex-direction:column; gap:12px; margin-top:32px; }
.auth-feat{ display:flex; align-items:center; gap:12px; font-size:13.5px; color:rgba(226,232,240,.88); }
.auth-feat .ic{ width:32px; height:32px; border-radius:9px; display:grid; place-items:center; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); color:#6CE9A6; flex-shrink:0; }
.auth-feat .ic svg{ width:16px; height:16px; }
.auth-hero-foot{ font-size:12px; color:rgba(148,163,184,.7); }
.auth-panel{ display:flex; align-items:center; justify-content:center; padding:32px 24px; }
.login-novo .login-card{ box-shadow:none; background:transparent; padding:0; max-width:380px; border-radius:0; }
.login-novo .login-logo{ justify-content:flex-start; margin-bottom:28px; display:none; }
.auth-title{ font-family:var(--font-titulo); font-size:24px; font-weight:800; color:var(--upc-navy); letter-spacing:-.02em; }
.auth-lead{ margin:6px 0 26px; font-size:13.5px; color:var(--gray-600); }
.login-novo .field input{ height:44px; font-size:14px; }
.login-novo .btn-primary{ height:44px; font-size:14px; margin-top:6px; }

/* =========================================================
   Responsivo
   ========================================================= */
@media (max-width: 1100px){
  .grid-2{ grid-template-columns:1fr; }
  .grid-3{ grid-template-columns:1fr; }
}
@media (max-width: 900px){
  .auth-split{ grid-template-columns:1fr; }
  .auth-hero{ display:none; }
  .login-novo .login-logo{ display:flex; }
  .qr-wrap{ grid-template-columns:1fr; }
  .qr-box{ order:-1; }
  .page{ padding:20px 16px 32px; }
}
@media (prefers-reduced-motion: reduce){
  .page.active, .qr-passo, .qr-scan, .dot.on{ animation:none !important; }
}

/* ---- ordenar por coluna (js/ordenar-tabelas.js) ---- */
th.sortable{ cursor:pointer; user-select:none; white-space:nowrap; }
th.sortable:hover{ color:var(--gray-800); }
th.sortable::after{ content:""; display:inline-block; width:0; height:0; margin-left:6px; vertical-align:middle; border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid currentColor; opacity:0; transition:opacity .15s, transform .15s; }
th.sortable:hover::after{ opacity:.35; }
th.sort-asc::after{ opacity:1; transform:rotate(180deg); color:var(--upc-verde); }
th.sort-desc::after{ opacity:1; color:var(--upc-verde); }
th.sort-asc, th.sort-desc{ color:var(--gray-800) !important; }

/* ---- todos os campos do app (2026-10-21: os de Configurações e modais
   não usam .field e ficavam com o visual padrão do navegador) ---- */
:is(.main-content, .modal) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="hidden"]), select, textarea){
  font:inherit; font-size:13.5px; color:var(--gray-800);
  min-height:38px; padding:8px 12px; border:1px solid var(--gray-300); border-radius:10px;
  background-color:var(--upc-card); box-shadow:var(--shadow); transition:border-color .15s, box-shadow .15s;
}
:is(.main-content, .modal) textarea{ min-height:76px; line-height:1.5; resize:vertical; }
:is(.main-content, .modal) select{ appearance:none; -webkit-appearance:none; padding-right:34px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2398A2B3' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; }
:is(.main-content, .modal) :is(input, select, textarea):hover{ border-color:var(--gray-400); }
:is(.main-content, .modal) :is(input, select, textarea):focus{ outline:none; border-color:var(--upc-verde); box-shadow:var(--ring); }
:is(.main-content, .modal) :is(input, select, textarea):disabled{ background-color:var(--gray-50); color:var(--gray-500); cursor:not-allowed; }
:is(.main-content, .modal) ::placeholder{ color:var(--gray-400); }
input[type="checkbox"], input[type="radio"]{ accent-color:var(--upc-verde); width:16px; height:16px; cursor:pointer; vertical-align:middle; }
.config-card-body label{ font-weight:500; color:var(--gray-700); }
.config-card-body{ gap:12px; }

/* botões ao lado de campo: mesma altura (38px) */
:is(.main-content, .modal) :is(.btn-primary, .btn-secondary, .btn-outline, .btn-danger){ min-height:38px; padding:0 16px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; gap:7px; text-decoration:none; }
:is(.main-content, .modal) .btn-sm{ min-height:32px; padding:0 12px; }
.btn-outline{ background:var(--upc-card); border:1px solid var(--gray-300); color:var(--gray-700); box-shadow:var(--shadow); }
.btn-outline:hover{ background:var(--gray-50); border-color:var(--gray-400); }

/* =========================================================
   Rodapé do menu com ícones (mesmo esquema do sellerup.next)
   ========================================================= */
:root{ --upc-card:#FFFFFF; }
.sidebar-collapse-btn{ display:none !important; }   /* recolher agora fica no rodapé */
.sb-rodape{ padding:4px 12px 12px; }
.sb-tools{ display:flex; align-items:center; justify-content:space-between; gap:2px; }
.sb-tool{ display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:8px; border:none; background:transparent; color:rgba(148,163,184,.85); cursor:pointer; flex-shrink:0; transition:all .15s; }
.sb-tool svg{ width:16px; height:16px; }
.sb-tool:hover{ background:rgba(255,255,255,.07); color:#fff; }
.sb-tool.sair:hover{ background:rgba(240,68,56,.15); color:#FDA29B; }
.sb-zoom-grp{ display:inline-flex; align-items:center; margin:0 6px; padding:1px; border-radius:9px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.07); }
.sb-zoom-grp .sb-tool{ width:26px; height:26px; border-radius:7px; }
.sb-zoom-grp .sb-tool svg{ width:15px; height:15px; }
.sb-zoom{ min-width:34px; text-align:center; font-size:10.5px; font-weight:700; color:rgba(148,163,184,.85); font-variant-numeric:tabular-nums; }
.sidebar-user{ border-top:1px solid rgba(255,255,255,.06); padding:12px 12px 8px; }
/* menu recolhido: só o botão de expandir */
.sidebar.collapsed .sb-rodape{ padding:4px 0 12px; }
.sidebar.collapsed .sb-tools{ justify-content:center; }
.sidebar.collapsed .sb-tools > :not(#upcRecolher){ display:none; }
.sidebar.collapsed .sidebar-user{ display:none; }

/* =========================================================
   Tema escuro (data-theme="dark" no <html>, ui-upc.js)
   ========================================================= */
:root[data-theme="dark"]{
  --upc-nevoa:#081120;
  --upc-card:#0F1B2D;
  --white:#0F1B2D;
  --gray-50:#13223A;
  --gray-100:#0C1828;
  --gray-200:#1E2E48;
  --gray-300:#2A3C5C;
  --gray-400:#5D6E8C;
  --gray-500:#8795AE;
  --gray-600:#A6B2C8;
  --gray-700:#C6CFDD;
  --gray-800:#E7ECF4;
  --text-primary:#E7ECF4; --text-secondary:#A6B2C8; --text-muted:#8795AE; --muted:#8795AE;
  --border:#1E2E48; --surface:#0F1B2D; --surface-2:#13223A;
  --color-bg:#081120; --color-surface:#0F1B2D; --color-surface-2:#13223A; --color-surface-hover:#162741;
  --color-fg:#E7ECF4; --color-fg-muted:#A6B2C8; --color-fg-subtle:#6F7F9C;
  --color-border:#1E2E48; --color-border-strong:#2A3C5C;
  --color-accent-soft:rgba(50,213,131,.14); --color-accent-fg-soft:#6CE9A6;
  --color-neutral-soft:#162741; --color-info-soft:rgba(46,144,250,.16);
  --color-success-soft:rgba(18,183,106,.16); --color-danger-soft:rgba(240,68,56,.16); --color-warning-soft:rgba(247,144,9,.16);
  --shadow:0 1px 2px rgba(0,0,0,.35);
  color-scheme:dark;
}
:root[data-theme="dark"] body{ background:var(--upc-nevoa); color:var(--gray-800); }
/* --white também é cor de texto em alguns componentes: no escuro eles ficam brancos */
:root[data-theme="dark"] :is(.btn-primary, .btn-danger, .nav-badge, .user-avatar, .toast, .flow-start, .btn-vincular, .btn-novo:not(.outline)){ color:#fff; }
:root[data-theme="dark"] .user-info .user-name{ color:#F1F5F9; }
:root[data-theme="dark"] .page-title, :root[data-theme="dark"] .modal-title, :root[data-theme="dark"] .config-card-title, :root[data-theme="dark"] .auth-title, :root[data-theme="dark"] .sobre-sec-head h2{ color:#E7ECF4; }
:root[data-theme="dark"] .pc-tab.active{ background:#32D583; border-color:#32D583; color:#0A2139; }
:root[data-theme="dark"] .stat-card.green .stat-icon, :root[data-theme="dark"] .kpi-ico.verde, :root[data-theme="dark"] .pill.pos{ background:rgba(18,183,106,.16); }
:root[data-theme="dark"] .stat-card.yellow .stat-icon{ background:rgba(247,144,9,.16); }
:root[data-theme="dark"] .stat-card.red .stat-icon, :root[data-theme="dark"] .pill.neg{ background:rgba(240,68,56,.16); }
:root[data-theme="dark"] .stat-card.blue .stat-icon, :root[data-theme="dark"] .kpi-ico.azul{ background:rgba(46,144,250,.16); }
:root[data-theme="dark"] .pill.pos{ color:#6CE9A6; }
:root[data-theme="dark"] .pill.neg{ color:#FDA29B; }
:root[data-theme="dark"] .cs-item.selected{ background:rgba(18,183,106,.16); color:#6CE9A6; }
:root[data-theme="dark"] .table-wrap tbody tr:hover, :root[data-theme="dark"] .kv-row:hover{ background:#13223A; }
/* os poucos fundos brancos fixos no HTML/JS */
:root[data-theme="dark"] :is(.main-content, .modal) [style*="background:#fff"], :root[data-theme="dark"] :is(.main-content, .modal) [style*="background: #fff"], :root[data-theme="dark"] :is(.main-content, .modal) [style*="background:white"], :root[data-theme="dark"] :is(.main-content, .modal) [style*="background:#ffffff"]{ background:var(--upc-card) !important; }
:root[data-theme="dark"] .wpp-foto-wrap .dot{ box-shadow:0 0 0 3px var(--upc-card); }
:root[data-theme="dark"] .qr-aviso{ background:#13223A; }
/* menu recolhido compacto: rodapé (expandir) sempre visível */
.sidebar.collapsed .sidebar-nav{ padding:8px; }
.sidebar.collapsed .nav-item{ padding:7px 0; margin-bottom:1px; }
.sidebar.collapsed .nav-group{ margin-top:4px; }
.sidebar.collapsed .sidebar-logo{ padding:10px 0 6px; min-height:0; }
.sidebar.collapsed .sb-wpp{ margin:4px 8px 6px; padding:8px 0; }
:root[data-theme="dark"] .config-card-icon.icon-green{ background:rgba(18,183,106,.16); }
:root[data-theme="dark"] .config-card-icon.icon-blue{ background:rgba(46,144,250,.16); }
:root[data-theme="dark"] .config-card-icon.icon-orange{ background:rgba(251,101,20,.16); }
:root[data-theme="dark"] .config-card-icon.icon-gray{ background:#162741; }
:root[data-theme="dark"] .wpp-hero-ico.on{ background:rgba(18,183,106,.16); }