/* =========================================================
   UpAnalyses — camada visual do redesign (2026-10-21)
   Carregada DEPOIS do style.css; só visual, ids/classes do app.js intactos.
   Marca (brand/LEIA-ME.txt): Up Blue #1F4BFF, Navy #0B1B3F,
   Insight Green #22D3A6, Azul claro em fundo escuro #7FA0FF.
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --upa-blue:   #1F4BFF;
  --upa-blue-h: #1838D6;
  --upa-navy:   #0B1B3F;
  --upa-navy-2: #081430;
  --upa-green:  #22D3A6;
  --upa-blue-l: #7FA0FF;

  --accent:      #1F4BFF;
  --accent-dark: #1838D6;
  --accent-soft: #EEF2FF;
  --blue:        #1F4BFF;
  --bg-page:     #F5F7FB;
  --border:      #E4E8F0;
  --text-primary:#0B1B3F;
  --text-secondary:#4A5578;
  --text-muted:  #8A93AD;
  --sidebar-bg:  #0B1B3F;
  --sidebar-text:rgba(226,232,240,.72);
  --sidebar-hover: rgba(255,255,255,.06);
  --shadow-card: 0 1px 2px rgba(11,27,63,.05);
  --shadow-md:   0 8px 24px -6px rgba(11,27,63,.14), 0 2px 6px rgba(11,27,63,.05);
  --shadow-lg:   0 24px 48px -12px rgba(11,27,63,.28);
  --ring: 0 0 0 3px rgba(31,75,255,.2);
  --radius-lg: 14px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* aliases usados pelo sobre.css (copiado do sellerup.next) */
  --color-bg: var(--bg-page);
  --color-surface: var(--bg-card);
  --color-surface-2: #F8FAFD;
  --color-surface-hover: #F1F4FA;
  --color-fg: var(--text-primary);
  --color-fg-muted: var(--text-secondary);
  --color-fg-subtle: var(--text-muted);
  --color-border: var(--border);
  --color-border-strong: #D3D9E6;
  --color-accent: var(--upa-blue);
  --color-accent-soft: rgba(31,75,255,.08);
  --color-accent-fg-soft: #1838D6;
  --color-neutral-soft: #F1F4FA;
  --color-info: #1F4BFF;
  --color-info-soft: #EEF2FF;
  --color-warning: #F59E0B;
  --color-warning-soft: #FFF7E6;
  --gradient-brand: linear-gradient(135deg, #1F4BFF 0%, #4F74FF 55%, #22D3A6 100%);
  --gradient-hero: radial-gradient(120% 80% at 0% 0%, #1A3B8F 0%, transparent 60%), radial-gradient(90% 70% at 100% 100%, rgba(34,211,166,.28) 0%, transparent 60%), #0B1B3F;
  --up-teal-300: #7FE6C9;
  --up-teal-400: #22D3A6;
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --ease-out: var(--ease);
  --shadow-xs: var(--shadow-card);
}
:root[data-theme="dark"] {
  --bg-page:  #070D1F;
  --bg-card:  #0E1730;
  --border:   #1C2847;
  --text-primary: #E6EAF5;
  --text-secondary: #A3ADC8;
  --text-muted: #6C7898;
  --accent-soft: rgba(127,160,255,.14);
  --sidebar-bg: #050B1A;
  --color-surface-2: #111C38;
  --color-surface-hover: #15213F;
  --color-border-strong: #26345A;
  --color-neutral-soft: #15213F;
  --color-accent-soft: rgba(127,160,255,.14);
  --color-info-soft: rgba(127,160,255,.14);
  --shadow-card: 0 1px 2px rgba(0,0,0,.35);
  --chart-grid: #1C2847;
  --chart-tooltip-bg: #050B1A;
}

body{ font-family:"Inter", -apple-system, "Segoe UI", Roboto, sans-serif; }
::selection{ background:rgba(31,75,255,.2); }
*{ scrollbar-width:thin; scrollbar-color:var(--color-border-strong) transparent; }

/* ---------- menu lateral (antes era um trilho de 84px com emoji) ---------- */
.module-rail{ width:236px; flex:0 0 236px; align-items:stretch; padding:0; background:linear-gradient(180deg, var(--sidebar-bg) 0%, var(--upa-navy-2) 100%); border-right:1px solid rgba(255,255,255,.05); }
:root[data-theme="dark"] .module-rail{ background:linear-gradient(180deg, #050B1A 0%, #030814 100%); }
.module-rail-brand{ margin:0; height:60px; display:flex; align-items:center; padding:0 18px; border-bottom:1px solid rgba(255,255,255,.06); }
.module-rail-brand .sb-logo{ width:auto; height:28px; object-fit:contain; }
.module-nav{ padding:14px 12px; gap:2px; }
.module-nav-label{ color:rgba(148,163,184,.7); font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; padding:12px 11px 6px; }
.module-nav > .module-nav-label:first-child{ padding-top:4px; }
.module-btn{ position:relative; flex-direction:row; justify-content:flex-start; gap:11px; padding:9px 11px; border-radius:9px; text-align:left; color:var(--sidebar-text); font-weight:500; }
.module-btn:hover{ background:rgba(255,255,255,.05); color:#F1F5F9; }
.module-btn.active{ background:rgba(127,160,255,.16); color:#fff; }
.module-btn.active::before{ content:""; position:absolute; left:-12px; top:8px; bottom:8px; width:3px; border-radius:0 3px 3px 0; background:var(--upa-green); box-shadow:0 0 12px var(--upa-green); }
.module-btn-icon{ display:flex; font-size:0; }
.module-btn-icon svg{ width:18px; height:18px; opacity:.85; }
.module-btn.active .module-btn-icon svg{ color:var(--upa-green); opacity:1; }
.module-btn-label{ font-size:13.5px; font-weight:500; letter-spacing:0; }
.module-btn.active .module-btn-label{ font-weight:600; }

.module-rail-foot{ padding:12px; border-top:1px solid rgba(255,255,255,.06); align-items:stretch; }
.sb-tools{ display:flex; align-items:center; justify-content:space-between; gap:2px; }
.btn-logout{ display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; padding:0; border-radius:8px; color:rgba(148,163,184,.85); }
.btn-logout svg{ width:16px; height:16px; }
.btn-logout:hover{ background:rgba(255,255,255,.07); color:#fff; }
.btn-tema{ font-size:0; padding:0; }
.btn-logout.btn-sair:hover{ background:rgba(239,68,68,.15); color:#FCA5A5; }
.zoom-controls{ gap:0; padding:1px; border-radius:9px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.07); margin-right:4px; }
.zoom-controls button{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; padding:0; border-radius:7px; color:rgba(148,163,184,.85); }
.zoom-controls button svg{ width:15px; height:15px; }
#zoomNivel{ font-size:10.5px; font-weight:700; color:rgba(148,163,184,.85); min-width:34px; font-variant-numeric:tabular-nums; }

/* ---------- cabeçalho / abas / conteúdo ---------- */
.main-header{ padding:22px 32px 16px; }
.main-header-title h1{ font-size:22px; font-weight:800; letter-spacing:-.02em; color:var(--text-primary); }
.main-header-modulo{ color:var(--text-muted); font-weight:500; }
.workspace:not([hidden]){ animation:upaIn .25s var(--ease) both; }
@keyframes upaIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

.tab-bar{ gap:2px; }
.tab-item{ position:relative; height:44px; padding:0 12px; border-bottom:none; color:var(--text-muted); font-weight:500; }
.tab-item:hover{ color:var(--text-primary); }
.tab-item.active{ color:var(--text-primary); font-weight:600; border-bottom:none; }
.tab-item::after{ content:""; position:absolute; left:10px; right:10px; bottom:-1px; height:2px; border-radius:2px 2px 0 0; background:var(--upa-blue); transform:scaleX(0); transition:transform .2s var(--ease); }
.tab-item.active::after{ transform:scaleX(1); box-shadow:0 0 10px rgba(31,75,255,.6); }

.listbox-cliente, .filtro-data, .preset-btn, .btn{ border-radius:10px; }
.btn-primary{ background:var(--upa-blue); border-color:var(--upa-blue); box-shadow:0 1px 2px rgba(11,27,63,.12), inset 0 1px 0 rgba(255,255,255,.15); }
.btn-primary:hover{ background:var(--upa-blue-h); }
.preset-btn.active{ background:var(--upa-navy); color:#fff; border-color:var(--upa-navy); }
:root[data-theme="dark"] .preset-btn.active{ background:var(--upa-blue); border-color:var(--upa-blue); }
input:focus, select:focus, textarea:focus{ outline:none; box-shadow:var(--ring); border-color:var(--upa-blue) !important; }

.card, .kpi-card, .chart-card, .board-card, .table-wrap{ border-radius:14px; }
.modal-overlay{ background:rgba(8,20,48,.5); backdrop-filter:blur(4px); }
.modal-card{ border-radius:18px; box-shadow:var(--shadow-lg); }

/* ---------- ordenar por coluna (ordenar-tabelas.js) ---------- */
th.sortable{ cursor:pointer; user-select:none; white-space:nowrap; }
th.sortable:hover{ color:var(--text-primary); }
th.sortable::after{ content:""; display:inline-block; 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(--upa-blue); }
th.sort-desc::after{ opacity:1; color:var(--upa-blue); }

/* ---------- Sobre (sobre-upa.js) ---------- */
#mainContentSobre{ padding:8px 32px 40px; }
.mapa-grid, .faq-grid, .grid-3{ display:grid; gap:14px; }
.grid-3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.card-novo{ background:var(--bg-card); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow-card); }
.sobre-hero, .sobre-hero h1{ color:#fff; }
.sobre-hero p{ color:rgba(226,232,240,.8); }
.phone-top{ gap:10px; background:#0B1B3F; }
.phone-av{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:var(--gradient-brand); color:#fff; font-weight:800; font-size:13px; }
.mapa-ic{ background:var(--color-accent-soft); color:var(--upa-blue); }
.sobre-sec-head h2{ font-weight:800; }
/* mini-board animado do Sobre */
.mini-board{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; padding:18px; }
.mini-col{ background:var(--color-surface-2); border:1px solid var(--border); border-radius:12px; padding:10px; min-height:150px; }
.mini-col b{ display:flex; align-items:center; gap:7px; font-size:12px; margin-bottom:10px; color:var(--text-secondary); }
.mini-col b i{ width:8px; height:8px; border-radius:50%; display:inline-block; }
.mini-card{ background:var(--bg-card); border:1px solid var(--border); border-radius:9px; padding:8px 10px; font-size:12px; font-weight:600; box-shadow:var(--shadow-card); margin-bottom:8px; }
.mini-card small{ display:block; font-weight:500; color:var(--text-muted); font-size:11px; }
.mini-card.anda{ animation:miniAnda 9s var(--ease) infinite; }
@keyframes miniAnda{
  0%,12%{ transform:translateX(0); }
  25%,37%{ transform:translateX(calc(100% + 34px)); }
  50%,62%{ transform:translateX(calc(200% + 68px)); }
  75%,92%{ transform:translateX(calc(300% + 102px)); }
  100%{ transform:translateX(0); opacity:0; }
}

/* ---------- login em tela dividida ---------- */
.login-page.login-novo{ display:block; min-height:100vh; background:var(--bg-page); padding:0; }
.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:36px; width:auto; align-self:flex-start; }
.auth-hero-copy h1{ font-size:38px; font-weight:800; line-height:1.15; letter-spacing:-.03em; max-width:480px; margin:0; }
.auth-hero-copy h1 em{ font-style:normal; background:linear-gradient(90deg, #7FA0FF, #22D3A6); -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:#22D3A6; }
.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; border:none; padding:0; width:100%; max-width:380px; }
.login-novo .login-logo{ display:none; }
.auth-title{ font-size:24px; font-weight:800; letter-spacing:-.02em; margin:0; color:var(--text-primary); }
.auth-lead{ margin:6px 0 26px; font-size:13.5px; color:var(--text-secondary); }
.login-novo .field input{ height:44px; font-size:14px; border-radius:10px; }
.login-novo .btn-primary{ height:44px; font-size:14px; margin-top:6px; }

@media (max-width: 1000px){ .grid-3, .mini-board{ grid-template-columns:1fr 1fr; } }
@media (max-width: 900px){
  .module-rail{ width:72px; flex-basis:72px; }
  .module-btn-label, .module-nav-label{ display:none; }
  .module-btn{ justify-content:center; }
  .module-rail-brand .sb-logo{ display:none; }
  .sb-tools{ flex-direction:column; }
  .auth-split{ grid-template-columns:1fr; }
  .auth-hero{ display:none; }
  .login-novo .login-logo{ display:flex; }
}
@media (prefers-reduced-motion: reduce){ .workspace:not([hidden]), .mini-card.anda{ animation:none !important; } }

/* gráfico animado do topo do Sobre */
.hero-chart{ justify-self:center; width:300px; padding:18px; border-radius:20px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); backdrop-filter:blur(6px); box-shadow:0 30px 60px -20px rgba(0,0,0,.5); animation:float 6s ease-in-out infinite; }
.hero-chart-top{ display:flex; justify-content:space-between; align-items:baseline; color:#fff; font-size:13px; }
.hero-chart-top small{ color:rgba(226,232,240,.6); }
.hero-bars{ height:150px; display:flex; align-items:flex-end; gap:10px; margin:16px 0; border-bottom:1px solid rgba(255,255,255,.12); }
.hero-bars span{ flex:1; height:var(--h); border-radius:6px 6px 2px 2px; background:linear-gradient(180deg, #22D3A6, #1F4BFF); transform-origin:bottom; animation:barra 3.2s var(--ease) infinite; animation-delay:calc(var(--i) * 90ms); }
@keyframes barra{ 0%{ transform:scaleY(.1); opacity:.4; } 35%,80%{ transform:scaleY(1); opacity:1; } 100%{ transform:scaleY(.1); opacity:.4; } }
.hero-kpis{ display:flex; gap:10px; }
.hero-kpis div{ flex:1; padding:10px; border-radius:11px; background:rgba(255,255,255,.06); }
.hero-kpis small{ display:block; color:rgba(226,232,240,.6); font-size:11px; }
.hero-kpis b{ color:#fff; font-size:18px; }
@media (prefers-reduced-motion: reduce){ .hero-bars span, .hero-chart{ animation:none !important; } }

/* cabeçalho: quando os filtros não cabem ao lado do título, descem e
   começam à esquerda (antes ficavam empurrados pra direita com buraco) */
.main-header{ display:grid; grid-template-columns:minmax(0,auto) 1fr; align-items:center; gap:14px 20px; }
.main-header .header-actions{ margin-left:0; justify-content:flex-end; flex-wrap:wrap; }
@media (max-width: 1480px){
  .main-header{ grid-template-columns:1fr; }
  .main-header .header-actions{ justify-content:flex-start; }
}

/* ---- janela "Clientes por módulo" (redesign 2026-10-21) ---- */
.modal-card.modal-card-config-clientes{ width:min(640px, 96vw); max-width:none; padding:0; overflow:hidden; display:flex; flex-direction:column; max-height:88vh; }
.cfgcli-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding:22px 24px 14px; }
.cfgcli-head h2{ margin:0; }
.cfgcli-head .detalhe-rotina-info{ margin:4px 0 0; }
.cfgcli-resumo{ display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.cfgcli-resumo span{ font-size:12px; padding:5px 10px; border-radius:999px; background:var(--color-surface-2); border:1px solid var(--border); color:var(--text-secondary); white-space:nowrap; }
.cfgcli-resumo b{ color:var(--upa-blue); }
.cfgcli-resumo .cfgcli-tot{ background:transparent; }
.cfgcli-barra{ display:flex; gap:12px; align-items:center; padding:0 24px 14px; flex-wrap:wrap; }
.cfgcli-busca{ position:relative; flex:1; min-width:200px; }
.cfgcli-busca svg{ position:absolute; left:11px; top:50%; width:15px; height:15px; margin-top:-7.5px; color:var(--text-muted); }
.cfgcli-busca input{ width:100%; height:38px; padding:0 12px 0 34px; border:1px solid var(--color-border-strong); border-radius:10px; background:var(--bg-card); color:var(--text-primary); font:inherit; font-size:13.5px; }
.cfgcli-massa{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-muted); }
.cfgcli-chip{ height:32px; padding:0 12px; border-radius:999px; border:1px solid var(--color-border-strong); background:var(--bg-card); color:var(--text-secondary); font:600 12px inherit; cursor:pointer; }
.cfgcli-chip:hover{ border-color:var(--upa-blue); color:var(--upa-blue); }
.cfgcli-lista{ overflow:auto; border-top:1px solid var(--border); border-bottom:1px solid var(--border); flex:1; min-height:200px; }
.cfgcli-lista table{ width:100%; border-collapse:collapse; }
.cfgcli-lista tr td{ padding:9px 24px; border-bottom:1px solid var(--border); }
.cfgcli-lista tr:last-child td{ border-bottom:none; }
.cfgcli-lista tr:hover td{ background:var(--color-surface-2); }
.cfgcli-nome{ display:flex; align-items:center; gap:11px; font-size:13.5px; font-weight:500; color:var(--text-primary); }
.cfgcli-ini{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; flex-shrink:0; background:var(--color-accent-soft); color:var(--upa-blue); font-weight:700; font-size:12.5px; }
.cfgcli-mods{ text-align:right; white-space:nowrap; width:1%; }
.cfgcli-tog{ display:inline-flex; margin-left:6px; cursor:pointer; }
.cfgcli-tog input{ position:absolute; opacity:0; pointer-events:none; }
.cfgcli-tog span{ display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 11px; border-radius:999px; border:1px solid var(--color-border-strong); color:var(--text-muted); font-size:12px; font-weight:600; transition:all .15s; }
.cfgcli-tog span::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; opacity:.5; }
.cfgcli-tog input:checked + span{ background:var(--upa-blue); border-color:var(--upa-blue); color:#fff; }
.cfgcli-tog input:checked + span::before{ background:var(--upa-green); opacity:1; }
.cfgcli-tog input:focus-visible + span{ box-shadow:var(--ring); }
.cfgcli-vazio{ text-align:center; color:var(--text-muted); padding:30px !important; }
.modal-card-config-clientes .modal-actions{ padding:14px 24px; margin:0; background:var(--color-surface-2); }

/* ---- menu recolhido (menu-upa.js) ---- */
.module-rail{ transition:width .2s var(--ease), flex-basis .2s var(--ease); }
.module-rail-brand .sb-simbolo{ display:none; width:30px; height:30px; }
.module-rail.recolhido{ width:72px; flex-basis:72px; }
.module-rail.recolhido .module-rail-brand{ justify-content:center; padding:0; }
.module-rail.recolhido .sb-logo{ display:none; }
.module-rail.recolhido .sb-simbolo{ display:block; }
.module-rail.recolhido .module-btn-label, .module-rail.recolhido .module-nav-label{ display:none; }
.module-rail.recolhido .module-btn{ justify-content:center; }
.module-rail.recolhido .module-nav{ padding:14px 10px; }
.module-rail.recolhido .module-btn.active::before{ left:-10px; }
/* recolhido: rodapé só com expandir (o resto aparece ao expandir) */
.module-rail.recolhido .sb-tools{ justify-content:center; }
.module-rail.recolhido .sb-tools > :not(#btnRecolherMenu){ display:none; }