/* Evita flash branco antes do JS aplicar dark-mode */ html.dark-mode-preload { background: #0d0d12; } * { box-sizing: border-box; margin: 0; padding: 0; } :root { /* ── TEMA CLARO PREMIUM (Light Mode) ── */ --bg: #f8fafc; /* Fundo geral da página */ --s1: #ffffff; /* Superfície primária (Cards) */ --s2: #f1f5f9; /* Superfície secundária (Tabelas, Inputs) */ --s3: #e2e8f0; /* Superfície terciária (Bordas de tabelas) */ --border: #cbd5e1; /* Bordas padrão */ --text: #0f172a; /* Texto principal */ --muted: #64748b; /* Texto secundário */ --faint: #94a3b8; /* Detalhes sutis */ --accent: #e63946; /* Destaque principal */ --green: #16a34a; /* Métricas positivas */ --red: #dc2626; /* Métricas negativas */ --amber: #d97706; /* Alertas */ --blue: #2563eb; /* Métricas neutras */ --purple: #a78bfa; /* Destaques secundários (Workspace) */ --font-primary: 'DM Sans', sans-serif; --font-display: 'DM Serif Display', serif; --font-numeric: 'Outfit', sans-serif; --client-logo-url: none; --agency-logo-url: none; --fd: var(--font-display); --fb: var(--font-primary); --fn: var(--font-numeric); --meta: #1877F2; --google: #34A853; --tiktok: #000000; --linkedin: #0A66C2; --youtube: #FF0000; /* ── SUPERFÍCIES SEMÂNTICAS ── */ --insight-ok-bg: #f0fdf4; --insight-ok-border: #bceabb; --insight-bad-bg: #fef2f2; --insight-bad-border: #fecaca; --hover-amber-bg: #fffbeb; --tint-accent: rgba(230,57,70,.03); --overlay-bg: rgba(255,255,255,0.8); /* ── SOMBRAS ── */ --shadow-xs: rgba(0,0,0,0.02); --shadow-sm: rgba(0,0,0,0.03); --shadow-md: rgba(0,0,0,0.05); } /* ══ DARK MODE ══ Ativado pela classe .dark-mode no . Apenas variáveis estruturais mudam aqui. Cores de acento (--accent, --green, --blue, --amber, --red) ficam para a Fase 4 (dessaturação). Canais e fontes não mudam. */ body.dark-mode { /* ── FUNDOS (gradação: não preto puro — cansa a vista) ── */ --bg: #0d0d12; /* página */ --s1: #16161e; /* card primário */ --s2: #1c1c26; /* card secundário, inputs */ --s3: #24242f; /* divisores de tabela */ --border: #2c2c3a; /* bordas */ /* ── TEXTO ── */ --text: #eeeef5; /* principal */ --muted: #8888a2; /* secundário */ --faint: #52526a; /* detalhes sutis */ /* ── SUPERFÍCIES SEMÂNTICAS ── */ --insight-ok-bg: #0d1f13; /* destaque verde escuro */ --insight-ok-border: #1e4826; --insight-bad-bg: #1f0d0d; /* atenção vermelho escuro */ --insight-bad-border: #4a1e1e; --hover-amber-bg: #1f1a0d; /* hover âmbar escuro */ --tint-accent: rgba(230,57,70,.07); /* tint mais visível no escuro */ --overlay-bg: rgba(13,13,18,0.85); /* overlay escuro */ /* ── SOMBRAS (muito mais fortes — dark precisa de contraste maior) ── */ --shadow-xs: rgba(0,0,0,0.25); --shadow-sm: rgba(0,0,0,0.35); --shadow-md: rgba(0,0,0,0.50); } /* ── DARK MODE: BOOST DE CONTRASTE EM ESTADOS SELECIONADOS ── */ body.dark-mode .mode-card.on, body.dark-mode .week-card.on { background: rgba(230,57,70,.12) !important; border-color: var(--accent); } body.dark-mode .asw.on, body.dark-mode .asw:hover { border-color: var(--text); } /* ── DARK MODE: SOMBRAS → GLOW BRANCO SUTIL ── Sombra preta sobre fundo escuro = invisível. Substituímos por um contorno branco de baixíssima opacidade que diferencia a superfície do card do fundo sem criar vibração. */ body.dark-mode .card, body.dark-mode .kpi, body.dark-mode .cmp-kpi, body.dark-mode .canal-sec, body.dark-mode .iblock, body.dark-mode .hitem, body.dark-mode .step, body.dark-mode .week-card, body.dark-mode .acc-item, body.dark-mode .mode-card { box-shadow: 0 0 0 1px rgba(255,255,255,0.05); } body.dark-mode .cri-card { box-shadow: 0 0 0 1px rgba(255,255,255,0.05), 0 2px 8px rgba(0,0,0,0.4); } body.dark-mode .cri-card:hover { box-shadow: 0 0 0 1px rgba(255,255,255,0.09), 0 4px 16px rgba(0,0,0,0.5); } /* ── DARK MODE: DESSATURAÇÃO DE ACENTOS (Opção A — CSS filter) ── Reduz saturação e brilho em elementos com cor de acento/funcional. O texto branco dentro dos botões fica imperceptivelmente acinzentado mas dentro da tolerância visual. Migrar pra Opção B se cliente reclamar. */ body.dark-mode .btn-red, body.dark-mode .btn-green, body.dark-mode .btn-blue, body.dark-mode .step-n, body.dark-mode .badge-ok, body.dark-mode .badge-blue, body.dark-mode .badge-amber, body.dark-mode .cpill, body.dark-mode .canal-dot, body.dark-mode .health-ok, body.dark-mode .health-warn, body.dark-mode .health-bad, body.dark-mode .iblock.destaque, body.dark-mode .iblock.atencao { filter: saturate(0.82) brightness(0.92); } body { background: var(--bg); color: var(--text); font-family: var(--fb); font-size: 15.5px; line-height: 1.6; min-height: 100vh; padding-top: var(--tabbar-h, 54px); } /* ── TABBAR ── */ .tabbar { display: flex; align-items: center; background: var(--s1); border-bottom: 1px solid var(--border); padding: 0 1.5rem; position: fixed; top: 0; left: 0; right: 0; z-index: 200; gap: 0; overflow-x: auto; overflow-y: visible; } /* Compensa a tabbar fixed quando o scrollIntoView do tour leva um elemento próximo do topo */ .tour-highlight { scroll-margin-top: 80px; } /* Banner de workspace (sem pasta conectada / falha ao salvar) — fica colado na tabbar fixa */ #wsBanner { position: sticky; top: var(--tabbar-h, 54px); z-index: 199; } #wsBanner .ws-banner-close { margin-left: auto; background: rgba(255,255,255,.18); border: none; color: inherit; width: 22px; height: 22px; border-radius: 50%; cursor: pointer; font-size: .85rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: background .15s; } #wsBanner .ws-banner-close:hover { background: rgba(255,255,255,.32); } .brand { font-family: 'DM Serif Display', serif; font-size: 1rem; font-weight: 700; color: var(--accent); letter-spacing: .16em; text-transform: uppercase; margin-right: 1rem; white-space: nowrap; } .topbar-actions { display: flex; align-items: center; margin-left: auto; gap: 0.5rem; position: relative; } .topbar-dropdown { position: relative; } .topbar-menu { display: none; position: absolute; right: 0; top: calc(100% + 0.5rem); min-width: 220px; max-width: 320px; background: var(--s1); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 18px 40px rgba(0,0,0,.24); padding: .4rem 0; z-index: 10000; } .topbar-menu.show { display: block; } .topbar-menu::before { content: ''; position: absolute; top: -7px; right: 1rem; width: 14px; height: 14px; background: var(--s1); transform: rotate(45deg); border-left: 1px solid var(--border); border-top: 1px solid var(--border); z-index: -1; } .topbar-menu button { width: 100%; border: none; background: transparent; color: var(--text); padding: .75rem 1rem; text-align: left; cursor: pointer; font-family: var(--fb); font-size: .85rem; } .topbar-menu button:hover { background: var(--border); } #presentationOverlay { display: none; position: fixed; inset: 0; z-index: 12500; background: rgba(248, 250, 252, 0.98); backdrop-filter: blur(10px); padding: 1.25rem; overflow: auto; color: var(--text); } .presentation-shell { width: min(1200px, 100%); margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; } .presentation-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; align-items: flex-start; } .presentation-title { font-family: 'DM Serif Display', serif; font-size: clamp(1.45rem, 2.2vw, 2.4rem); color: var(--text); line-height: 1.05; } .presentation-subtitle, .presentation-pager { color: var(--muted); font-size: .95rem; margin-top: .45rem; } .presentation-controls { display: flex; gap: .75rem; flex-wrap: wrap; } .presentation-slide-mask { position: relative; background: var(--s1); border: 1px solid var(--border); border-radius: 22px; box-shadow: 0 18px 45px rgba(0,0,0,.12); padding: 1.25rem; min-height: calc(100vh - 220px); overflow: auto; } .presentation-slide-content { display: block !important; width: 100% !important; } .presentation-slide-content .tc { display: block !important; } .presentation-slide-content .card { border-color: rgba(0,0,0,0.08) !important; } .presentation-slide-content .badge, .presentation-slide-content .badge-amber, .presentation-slide-content .badge-blue, .presentation-slide-content .badge-ok { color: inherit !important; } .presentation-slide-content .add-insight, .presentation-slide-content button[onclick^="exportPDF"], .presentation-slide-content button[onclick*="switchTab('extractor')"], .presentation-slide-content button[onclick*="exportCombo"], .presentation-slide-content .csv-toolbar, .presentation-slide-content .pdf-toolbar { display: none !important; } .presentation-slide-mask::-webkit-scrollbar { width: 10px; } .presentation-slide-mask::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18); border-radius: 999px; } .presentation-canvas { position: absolute; inset: 0; pointer-events: none; z-index: 250; } .presentation-drawing .presentation-canvas { pointer-events: auto; } .presentation-drawing #annotationCanvas { cursor: crosshair; } /* ── Cover slide ── */ .cover-slide { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 280px); padding: 3rem 2rem; } .cover-slide-inner { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1.2rem; max-width: 640px; } .cover-label { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); } .cover-client { font-family: var(--fd); font-size: clamp(2.2rem, 5vw, 4rem); color: var(--text); line-height: 1.1; } .cover-period { font-size: 1.1rem; color: var(--blue); font-weight: 500; } .cover-objective-wrap { margin-top: .4rem; background: var(--s2); border-radius: 14px; padding: 1.2rem 1.6rem; text-align: center; } .cover-objective-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: .5rem; } .cover-objective { font-size: 1rem; color: var(--text); line-height: 1.5; } .cover-agency { font-size: .8rem; color: var(--faint); margin-top: .5rem; } /* ── Presentation setup modal ── */ .ps-modal-backdrop { position: fixed; inset: 0; z-index: 13000; background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 1.5rem; } .ps-modal-card { background: var(--s1); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 24px 60px rgba(0,0,0,0.18); width: min(480px, 100%); display: flex; flex-direction: column; gap: 0; overflow: hidden; } .ps-modal-head { padding: 1.6rem 1.8rem 1.2rem; border-bottom: 1px solid var(--border); } .ps-modal-title { font-family: var(--fd); font-size: 1.35rem; color: var(--text); } .ps-modal-sub { font-size: .82rem; color: var(--muted); margin-top: .3rem; } .ps-modal-body { padding: 1.4rem 1.8rem; display: flex; flex-direction: column; gap: .75rem; } .ps-label { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-bottom: -.3rem; } .ps-modal-actions { padding: 1rem 1.8rem 1.4rem; display: flex; justify-content: flex-end; gap: .75rem; } .tbtn { background: none; border: none; border-bottom: 2px solid transparent; color: var(--muted); font-family: var(--fb); font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: .9rem .9rem; cursor: pointer; transition: all .2s; white-space: nowrap; flex-shrink: 0; } .tbtn:hover { color: var(--text); } .tbtn.on { color: var(--accent); border-bottom-color: var(--accent); } .tc { display: none; } .tc.on { display: block; } /* ── LAYOUT & CARDS ── */ .wrap { max-width: 1080px; margin: 0 auto; padding: 2rem 1.75rem; } .wrap-sm { max-width: 760px; margin: 0 auto; padding: 2rem 1.75rem; } .card { background: var(--s1); border: 1px solid var(--border); border-radius: 12px; padding: 1.4rem; box-shadow: 0 1px 3px var(--shadow-md); } .onboarding-backdrop { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 1.25rem; background: rgba(13, 18, 29, 0.8); } .onboarding-card { width: 100%; max-width: 720px; border-radius: 18px; background: var(--s1); border: 1px solid var(--border); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.24); padding: 2rem; display: flex; flex-direction: column; gap: 1.2rem; z-index: 1300; } /* Quando há highlight ativo, a caixa do tour vai pro bottom pra não cobrir o elemento */ .onboarding-backdrop.has-highlight { align-items: flex-end; background: rgba(13, 18, 29, 0.55); } .onboarding-backdrop.has-highlight .onboarding-card { max-width: 560px; margin-bottom: 1rem; } /* Elemento alvo do highlight: glow pulsante por cima do backdrop */ .tour-highlight { position: relative; z-index: 1250 !important; outline: 3px solid var(--green); outline-offset: 4px; border-radius: 8px; box-shadow: 0 0 0 6px rgba(34, 197, 94, .25), 0 0 35px rgba(34, 197, 94, .55); animation: tourPulse 1.6s ease-in-out infinite; } @keyframes tourPulse { 0%, 100% { box-shadow: 0 0 0 6px rgba(34, 197, 94, .25), 0 0 35px rgba(34, 197, 94, .55); } 50% { box-shadow: 0 0 0 10px rgba(34, 197, 94, .15), 0 0 50px rgba(34, 197, 94, .85); } } .onboarding-head h3 { margin: 0.25rem 0 0.75rem; font-size: 1.55rem; } .onboarding-step-indicator { color: var(--muted); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .onboarding-body { color: var(--text); line-height: 1.8; font-size: 0.96rem; } .onboarding-body p { margin: 0.8rem 0; } .onboarding-body ul { margin: 0.8rem 0 0; padding-left: 1.25rem; color: var(--text); } .onboarding-body ul li { margin-bottom: 0.65rem; } .onboarding-actions { display: flex; justify-content: flex-end; gap: 0.9rem; flex-wrap: wrap; } .onboarding-actions .btn { min-width: 120px; } /* ── BUTTONS ── */ .btn { display: inline-flex; align-items: center; gap: .4rem; border: none; border-radius: 7px; padding: .6rem 1.2rem; font-family: var(--fb); font-size: .8rem; font-weight: 600; cursor: pointer; transition: opacity .15s; } .btn:hover { opacity: .82; } .btn-red { background: var(--accent); color: #fff; } .btn-green { background: var(--green); color: #fff; } .btn-ghost { background: var(--s1); border: 1px solid var(--border); color: var(--muted); } .btn-ghost:hover { border-color: var(--text); color: var(--text); } .btn-blue { background: var(--blue); color: #fff; } .topbar-dropdown { position: relative; } .topbar-menu { display: none; position: fixed; right: auto; top: auto; min-width: 220px; max-width: 320px; background: var(--s1); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 18px 40px rgba(0,0,0,.24); padding: .4rem 0; z-index: 11000; } .topbar-menu button { width: 100%; border: none; background: transparent; color: var(--text); padding: .75rem 1rem; text-align: left; cursor: pointer; font-family: var(--fb); font-size: .85rem; } .topbar-menu button:hover { background: var(--border); } .topbar-menu.show { display: block; } /* ── FIELDS (Inputs) ── */ .field { background: var(--s1); border: 1px solid var(--border); border-radius: 7px; color: var(--text); font-family: var(--fb); font-size: .85rem; padding: .5rem .85rem; outline: none; transition: border-color .2s; box-shadow: inset 0 1px 2px var(--shadow-xs); } .field:focus { border-color: var(--green); box-shadow: 0 0 0 2px rgba(22,163,74,0.1); } /* ── DROPZONE ── */ .dropzone { background: var(--s1); border: 2px dashed var(--border); border-radius: 16px; padding: 2.5rem 2rem; text-align: center; cursor: pointer; transition: all .25s; position: relative; } .dropzone:hover, .dropzone.over { border-color: var(--accent); background: var(--tint-accent); } .dropzone input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; } .dropzone h3 { font-family: var(--fd); font-size: 1.1rem; margin: .6rem 0 .3rem; color: var(--text); } .dropzone p { color: var(--muted); font-size: .82rem; } /* ── TABLES ── */ .ptable { width: 100%; border-collapse: collapse; font-size: .8rem; } .ptable th { background: var(--s2); color: var(--muted); font-weight: 600; text-align: left; padding: .6rem .85rem; font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; border-bottom: 1px solid var(--border); } .ptable td { padding: .6rem .85rem; border-bottom: 1px solid var(--s3); color: var(--text); } .ptable tr:last-child td { border-bottom: none; } .ptable tr:hover td { background: var(--s2); } /* ── HISTORY ── */ .hitem { display: flex; align-items: center; justify-content: space-between; background: var(--s1); border: 1px solid var(--border); border-radius: 8px; padding: .7rem 1rem; margin-bottom: .4rem; box-shadow: 0 1px 2px var(--shadow-xs); } .hitem-meta { font-size: .72rem; color: var(--muted); margin-top: .1rem; } .hibtn { background: var(--s1); border: 1px solid var(--border); color: var(--muted); border-radius: 5px; padding: .22rem .5rem; font-size: .7rem; cursor: pointer; transition: all .2s; margin-left: .3rem; } .hibtn:hover { border-color: var(--red); color: var(--red); } .hibtn.load:hover { border-color: var(--green); color: var(--green); } /* ── PILLS & BADGES ── */ .cpill { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .6rem; border-radius: 100px; font-size: .67rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; } .badge { display: inline-block; padding: .15rem .6rem; border-radius: 100px; font-size: .7rem; font-weight: 600; } .badge-ok { background: rgba(22,163,74,.1); color: var(--green); } .badge-blue { background: rgba(37,99,235,.1); color: var(--blue); } .badge-amber { background: rgba(217,119,6,.1); color: var(--amber); } /* ── MODE SELECTOR ── */ .mode-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin: 1.1rem 0; } .mode-card { background: var(--s1); border: 2px solid var(--border); border-radius: 10px; padding: 1.1rem; cursor: pointer; transition: all .2s; text-align: center; box-shadow: 0 1px 3px var(--shadow-xs); } .mode-card:hover { border-color: var(--faint); } .mode-card.on { border-color: var(--accent); background: var(--tint-accent); } .mode-card .ico { font-size: 1.6rem; margin-bottom: .4rem; } .mode-card .lbl { font-size: .85rem; font-weight: 600; color: var(--text); } .mode-card .desc { font-size: .72rem; color: var(--muted); margin-top: .2rem; } /* ── DASH HEADER ── */ .dash-hdr { background: var(--s1); border-bottom: 1px solid var(--border); padding: 1.5rem 0; } .dash-hdr-in { max-width: 1080px; margin: 0 auto; padding: 0 1.75rem; display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; } .cni { font-family: var(--fd); font-size: 2.2rem; background: none; border: none; color: var(--text); outline: none; width: 100%; border-bottom: 2px solid transparent; transition: border-color .2s; } .cni:hover, .cni:focus { border-bottom-color: var(--s2); } .meta-row { display: flex; flex-wrap: wrap; gap: .2rem .75rem; margin-top: .4rem; font-size: .8rem; color: var(--muted); align-items: center; } .mi { background: var(--s2); border: 1px solid transparent; border-radius: 4px; color: var(--green); font-family: var(--fb); font-size: .78rem; font-weight: 600; outline: none; padding: .1rem .4rem; transition: border-color .2s; } .mi:hover, .mi:focus { border-color: var(--border); } .accent-row { display: flex; align-items: center; gap: .4rem; margin-top: .6rem; } .accent-row span { font-size: .68rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; } .asw { width: 18px; height: 18px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: border-color .2s; flex-shrink: 0; } .asw:hover, .asw.on { border-color: var(--text); } /* ── SEC HEADER ── */ .sec-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.2rem; } .sec-title { font-family: var(--fd); font-size: 1.4rem; font-weight: 400; color: var(--text); } .sec-title em { font-style: normal; color: var(--accent); } .sw-wrap { display: flex; align-items: center; gap: .4rem; font-size: .75rem; font-weight: 600; color: var(--muted); cursor: pointer; user-select: none; } .sw { width: 32px; height: 18px; background: var(--border); border-radius: 100px; position: relative; transition: background .2s; flex-shrink: 0; } .sw.on { background: var(--green); } .sw::after { content: ''; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; background: #fff; border-radius: 50%; transition: left .2s; box-shadow: 0 1px 2px rgba(0,0,0,0.2); } .sw.on::after { left: 16px; } /* ── KPI OUTLINED ── */ .kpi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: .75rem; } .kpi-grid-6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1.25rem; } .kpi-grid-5 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .75rem; margin-bottom: 1.25rem; } .kpi { background: var(--s1); border: 1px solid var(--border); border-left: 4px solid var(--kc, var(--accent)); border-radius: 8px; padding: 1.5rem; position: relative; box-shadow: 0 1px 3px var(--shadow-sm); overflow: hidden; min-width: 0; } .kpi-lbl { font-size: .65rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: .4rem; font-weight: 600; } .kpi-val { font-family: var(--fn); font-size: var(--fs, 2rem); line-height: 1; color: var(--text); display: flex; align-items: baseline; gap: .2rem; flex-wrap: wrap; } .kpi-num { background: none; border: none; color: inherit; font-family: inherit; font-size: inherit; outline: none; min-width: 20px; max-width: 100%; border-bottom: 1px solid transparent; transition: border-color .2s; caret-color: var(--accent); } .kpi-num:hover, .kpi-num:focus { border-bottom-color: var(--border); } .kpi-unit { font-size: .85rem; color: var(--muted); font-family: var(--fb); font-weight: 400; flex-shrink: 0; } .kpi-calc { font-size: inherit; color: var(--kc, var(--accent)); font-family: inherit; font-weight: 600; } .kpi-var { margin-top: .5rem; font-size: .75rem; display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; font-weight: 500; } /* KPI inline: horizontal compact card for secondary metrics */ .kpi-inline { display: flex; align-items: center; gap: 0.6rem; padding: 0.8rem 1.1rem; flex-wrap: wrap; } .kpi-inline .kpi-lbl { margin-bottom: 0; white-space: normal; flex: 1 1 auto; } .kpi-inline .kpi-val { font-size: 1.25rem; min-width: 0; flex-shrink: 1; } .kpi-inline .kpi-var { margin-top: 0; flex-shrink: 0; font-size: .7rem; white-space: nowrap; } /* KPI size variants via data-size */ .kpi[data-size="lg"] { --fs: 2.4rem; } .kpi[data-size="sm"] { --fs: 1.4rem; } .kpi[data-size="xs"] { --fs: 1.1rem; } .kpi-val { font-size: var(--fs, 2rem); } .up { color: var(--green); } .dn { color: var(--red); } .nt { color: var(--muted); } /* ── COMPARE KPI ── */ .cmp-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .75rem; margin-bottom: 1.5rem; } .cmp-kpi { background: var(--s1); border: 1px solid var(--border); border-top: 4px solid var(--kc, var(--accent)); border-radius: 10px; padding: 1.1rem; box-shadow: 0 1px 3px var(--shadow-sm); } .cmp-kpi-lbl { font-size: .65rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: .6rem; font-weight: 600; } .cmp-period-row { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: .4rem; } .cmp-period-val { font-family: var(--fd); font-size: 1.2rem; line-height: 1; color: var(--text); } .cmp-period-lbl { font-size: .62rem; color: var(--muted); margin-top: .2rem; text-transform: uppercase; font-weight: 600; } .cmp-var-row { display: flex; align-items: center; gap: .3rem; margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--s2); } .cmp-var-big { font-size: 1rem; font-weight: 700; } .cmp-var-note { font-size: .68rem; color: var(--muted); } /* ══ COMPARATIVO N-PERÍODOS ══ */ /* Period picker */ /* Dimension tabs */ .cmp-dim-tabs { display: flex; gap: .4rem; margin-bottom: .75rem; flex-wrap: wrap; } .cmp-dim-tab { background: var(--s2); border: 1px solid var(--border); border-radius: .5rem; color: var(--muted); cursor: pointer; font-size: .8rem; padding: .35rem .8rem; transition: color .15s, border-color .15s, background .15s; } .cmp-dim-tab:hover { color: var(--text); border-color: var(--blue); } .cmp-dim-tab.active { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 600; } /* Base period selector */ .cmp-base-period-wrap { display: flex; align-items: center; gap: .7rem; margin-bottom: .75rem; background: var(--s2); border: 1px solid var(--border); border-radius: 10px; padding: .55rem .9rem; } .cmp-base-period-sel { background: var(--surface); border: 1px solid var(--border); border-radius: .45rem; color: var(--text); font-size: .85rem; padding: .28rem .55rem; cursor: pointer; } /* Canal colour dot inside pills */ .ppill-canal-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: .35rem; flex-shrink: 0; } .cmp-picker-wrap { background: var(--s2); border: 1px solid var(--border); border-radius: 12px; padding: 1rem 1.1rem .8rem; margin-bottom: 1rem; } .cmp-picker-label { font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: .6rem; } .cmp-period-picker { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .75rem; } .cmp-ppill { position: relative; padding: .35rem .8rem; border-radius: 999px; border: 1.5px solid var(--border); background: var(--s1); color: var(--muted); font-size: .78rem; font-family: var(--fb); font-weight: 500; cursor: pointer; transition: border-color .15s, background .15s, color .15s; } .cmp-ppill:hover { border-color: var(--blue); color: var(--text); } .cmp-ppill.sel { border-color: var(--blue); background: var(--blue); color: #fff; } .ppill-badge { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: rgba(255,255,255,.3); font-size: .62rem; font-weight: 700; margin-right: .3rem; } .cmp-picker-foot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; } .cmp-picker-hint { font-size: .72rem; color: var(--muted); } /* View toggle */ .cmp-view-toggle { display: flex; border: 1.5px solid var(--border); border-radius: 8px; overflow: hidden; } .cvt-btn { padding: .3rem .85rem; font-size: .75rem; font-weight: 600; font-family: var(--fb); background: transparent; border: none; color: var(--muted); cursor: pointer; transition: background .15s, color .15s; } .cvt-btn.active { background: var(--blue); color: #fff; } .cvt-btn:not(.active):hover { background: var(--s3); } /* Context grid (dynamic) */ .cmp-ctx-grid { display: grid; gap: 1rem; transition: all .2s; } /* Absoluto table */ .cmp-table-wrap { overflow-x: auto; border-radius: 10px; border: 1px solid var(--border); } .cmp-table { width: 100%; border-collapse: collapse; font-size: .82rem; } .cmp-table thead th { padding: .7rem .9rem; font-size: .72rem; font-weight: 600; text-align: left; border-bottom: 1px solid var(--border); background: var(--s2); white-space: nowrap; } .cmp-table thead th:first-child { color: var(--muted); } .cmp-table tbody tr:not(:last-child) td { border-bottom: 1px solid var(--s3); } .cmp-table tbody td { padding: .65rem .9rem; color: var(--text); white-space: nowrap; } .cmp-metric-lbl { display: flex; align-items: center; gap: .5rem; font-weight: 500; color: var(--text) !important; } .cmp-metric-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .cmp-table .cmp-td-up { color: var(--green) !important; } .cmp-table .cmp-td-dn { color: var(--red) !important; } .cmp-th-delta { display: inline-block; margin-left: .4rem; font-size: .68rem; font-weight: 700; } .cmp-th-delta.up { color: var(--green); } .cmp-th-delta.dn { color: var(--red); } .cmp-th-ctx-icon { margin-left: .3rem; font-size: .7rem; cursor: help; opacity: .7; } /* Delta (Variação) cards */ .cmp-delta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .85rem; margin-bottom: .5rem; } .cmp-delta-card { border: 1px solid var(--border); border-top: 3px solid var(--dc, var(--accent)); border-radius: 10px; padding: 1rem 1.1rem; background: var(--s1); } .cmp-delta-lbl { font-size: .65rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: .5rem; font-weight: 600; } .cmp-delta-pct { font-family: var(--fd); font-size: 2.2rem; line-height: 1; font-weight: 700; margin-bottom: .4rem; } .cmp-delta-pct.up { color: var(--green); } .cmp-delta-pct.dn { color: var(--red); } .cmp-delta-pct.nt { color: var(--muted); } .cmp-delta-current { font-size: .85rem; font-weight: 600; color: var(--text); } .cmp-delta-prev { font-size: .75rem; color: var(--muted); margin-top: .15rem; } .cmp-delta-period { font-size: .68rem; opacity: .7; } /* Insight bar */ .cmp-insight-bar { margin-top: .75rem; } .cmp-ins-row { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; } .cmp-ins-label { font-size: .72rem; color: var(--muted); font-weight: 500; } .cmp-ins-pill { font-size: .72rem; font-weight: 600; padding: .2rem .55rem; border-radius: 999px; } .cmp-ins-pill.up { background: rgba(22,163,74,.1); color: var(--green); } .cmp-ins-pill.dn { background: rgba(220,38,38,.1); color: var(--red); } /* Overflow notice */ .cmp-overflow-notice { font-size: .78rem; color: var(--amber); background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.2); border-radius: 8px; padding: .5rem .85rem; margin-bottom: .85rem; } /* ── CANAL SEC ── */ .canal-sec { margin-bottom: 2.5rem; background: var(--s1); padding: 1.5rem; border-radius: 12px; border: 1px solid var(--border); box-shadow: 0 1px 4px var(--shadow-sm); } .canal-hdr { display: flex; align-items: center; gap: .65rem; margin-bottom: 1.2rem; } .canal-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; } .canal-name { font-family: var(--fd); font-size: 1.3rem; color: var(--text); } /* HEALTH INDICATOR */ .health-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: .35rem; flex-shrink: 0; } .health-ok { background: var(--green); } .health-warn { background: var(--amber); } .health-bad { background: var(--red); } .sub-health { font-size: .68rem; font-weight: 600; padding: .15rem .5rem; border-radius: 4px; flex-shrink: 0; } .sub-health.ok { background: rgba(22,163,74,.1); color: var(--green); } .sub-health.warn { background: rgba(217,119,6,.1); color: var(--amber); } .sub-health.bad { background: rgba(220,38,38,.1); color: var(--red); } /* METAS TOGGLE */ .metas-toggle-btn { background: none; border: 1px dashed var(--border); border-radius: 6px; color: var(--muted); font-family: var(--fb); font-size: .72rem; font-weight: 600; padding: .25rem .8rem; cursor: pointer; margin-bottom: .6rem; display: inline-block; transition: all .2s; } .metas-toggle-btn:hover { border-color: var(--green); color: var(--green); } .metas-toggle-btn.open { border-style: solid; border-color: var(--green); color: var(--green); } /* CPL META */ .cpl-meta-row { display: flex; align-items: center; gap: .75rem; background: var(--s2); border: 1px solid var(--border); border-radius: 8px; padding: .8rem 1.2rem; margin-bottom: 1.5rem; font-size: .85rem; color: var(--text); } .cpl-meta-row label { color: var(--muted); font-size: .75rem; white-space: nowrap; font-weight: 600; text-transform: uppercase; } .cpl-meta-inp { background: var(--s1); border: 1px solid transparent; border-radius: 4px; color: var(--text); font-family: var(--fb); font-size: .85rem; font-weight: 600; outline: none; width: 90px; text-align: center; padding: .2rem; } .cpl-meta-inp:focus { border-color: var(--green); box-shadow: 0 0 0 2px rgba(22,163,74,0.1); } .cpl-meta-calc { color: var(--green); font-weight: 700; font-size: .9rem; } /* NOTA OPERACIONAL */ /* NOTA OPERACIONAL */ .nota-op { width: 100%; background: var(--s1); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-family: var(--fb); font-size: .82rem; padding: .8rem 1rem; outline: none; resize: none; min-height: 44px; transition: border-color .2s; margin-top: .8rem; box-shadow: inset 0 1px 2px var(--shadow-xs); overflow: hidden; /* <-- Adicionado: Some com a barra de rolagem */ } .nota-op:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(230,57,70,0.1); } .nota-op::placeholder { color: var(--faint); } .canal-total-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-bottom: .75rem; } .canal-total-row .ckpi { min-width: 0; } .ckpi { background: var(--bg); border-radius: 8px; padding: 1.2rem 1.4rem; border: 1px solid var(--border); border-left: 3px solid var(--cc,var(--border)); } .ckpi-lbl { font-size: .65rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .3rem; font-weight: 600; } .ckpi-val { font-family: var(--fn); font-size: 1.5rem; line-height: 1; color: var(--text); } .ckpi-num { background: none; border: none; color: inherit; font-family: inherit; font-size: inherit; outline: none; border-bottom: 1px solid transparent; transition: border-color .2s; caret-color: var(--accent); width: 100%; } .ckpi-num:hover, .ckpi-num:focus { border-bottom-color: var(--border); } .ckpi-der { font-size: inherit; color: var(--cc, var(--accent)); margin-top: .2rem; font-weight: 700; } /* SUBCONTA TABLE */ .sub-table { width: 100%; border-collapse: collapse; font-size: .85rem; margin-top: .5rem; } .sub-table th { background: var(--s2); color: var(--muted); font-weight: 600; text-align: left; padding: .6rem 1rem; font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; border-bottom: 2px solid var(--border); } .sub-table td { padding: .7rem 1rem; border-bottom: 1px solid var(--s3); color: var(--text); } .sub-table tr:last-child td { border-bottom: none; } .sub-table tr:hover td { background: var(--bg); } .sub-num { background: none; border: none; color: var(--text); font-family: var(--fb); font-size: .85rem; font-weight: 600; outline: none; width: 100%; border-bottom: 1px solid transparent; transition: border-color .2s; } .sub-num:hover, .sub-num:focus { border-bottom-color: var(--border); } .der-cell { color: var(--accent); font-weight: 700; } /* ── INSIGHTS (Light Mode Colors) ── */ .izone { margin: 1.2rem 0; } .iblock { border-radius: 8px; padding: 1rem 1.2rem; margin-bottom: .8rem; border: 1px solid var(--border); border-left: 5px solid var(--muted); box-shadow: 0 1px 2px var(--shadow-xs); } /* Cores Pasteis Fundo Branco */ .iblock.destaque { background: var(--insight-ok-bg); border-color: var(--insight-ok-border); border-left-color: var(--green); } .iblock.atencao { background: var(--insight-bad-bg); border-color: var(--insight-bad-border); border-left-color: var(--red); } .iblock.neutro { background: var(--s1); border-color: var(--border); border-left-color: var(--muted); } .iblock-hdr { display: flex; align-items: center; gap: .6rem; margin-bottom: .4rem; } .itype-tag { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; padding: .15rem .5rem; border-radius: 100px; flex-shrink: 0; } .destaque .itype-tag { background: rgba(22,163,74,.15); color: var(--green); } .atencao .itype-tag { background: rgba(220,38,38,.15); color: var(--red); } .neutro .itype-tag { background: rgba(100,116,139,.15); color: var(--muted); } .ititle { flex: 1; background: none; border: none; color: var(--text); font-family: var(--fb); font-size: .9rem; font-weight: 700; outline: none; padding: 0; } .ititle::placeholder { color: var(--faint); } .itext { width: 100%; background: none; border: none; color: var(--text); font-family: var(--fb); font-size: .85rem; line-height: 1.65; resize: none; outline: none; min-height: 44px; } .itext::placeholder { color: var(--faint); } .icontrols { display: flex; align-items: center; gap: .4rem; margin-top: .6rem; flex-wrap: wrap; border-top: 1px solid var(--shadow-md); padding-top: .6rem; } .icdot { width: 14px; height: 14px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; flex-shrink: 0; transition: transform .15s; } .icdot:hover, .icdot.on { transform: scale(1.2); border-color: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.2); } .itype-btn { background: var(--s1); border: 1px solid var(--border); color: var(--muted); border-radius: 4px; padding: .15rem .5rem; font-size: .65rem; cursor: pointer; font-family: var(--fb); transition: all .15s; font-weight: 600; } .itype-btn:hover, .itype-btn.on { border-color: var(--text); color: var(--text); } .iremove { background: none; border: none; color: var(--faint); font-size: .8rem; cursor: pointer; margin-left: auto; transition: color .15s; padding: .2rem .4rem; } .iremove:hover { color: var(--red); } .add-insight { width: 100%; background: var(--s1); border: 1px dashed var(--border); border-radius: 8px; color: var(--muted); font-family: var(--fb); font-size: .8rem; font-weight: 600; padding: .6rem; cursor: pointer; transition: all .2s; text-align: left; } .add-insight:hover { border-color: var(--green); color: var(--green); background: var(--insight-ok-bg); } /* COMPARE TABLE */ .ctable { width: 100%; border-collapse: collapse; font-size: .85rem; } .ctable th { background: var(--s2); color: var(--muted); font-weight: 600; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; text-align: left; padding: .6rem 1rem; border-bottom: 2px solid var(--border); } .ctable td { padding: .7rem 1rem; border-bottom: 1px solid var(--s3); color: var(--text); } .ctable tr:last-child td { border-bottom: none; } .ctable td input { background: none; border: none; font-family: var(--fb); font-size: .85rem; font-weight: 500; color: var(--text); outline: none; width: 100%; border-bottom: 1px solid transparent; transition: border-color .2s; } .ctable td input:hover, .ctable td input:focus { border-bottom-color: var(--border); } .cv-cell { font-weight: 700; } .norm-note { font-size: .7rem; color: var(--muted); margin-top: .6rem; font-style: italic; } /* EDITABLE */ .edblock { background: var(--s1); border: 1px solid var(--border); border-radius: 8px; padding: 1rem; font-family: var(--fb); font-size: .85rem; color: var(--text); line-height: 1.7; min-height: 80px; outline: none; resize: none; width: 100%; transition: border-color .2s; box-shadow: inset 0 1px 2px var(--shadow-xs); } .edblock:focus { border-color: var(--green); box-shadow: 0 0 0 2px rgba(22,163,74,0.1); } .edblock[contenteditable]:empty::before { content: attr(placeholder); color: var(--faint); } .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1.5rem; } /* CREATIVE */ .cdrop { background: var(--s1); border: 2px dashed var(--border); border-radius: 12px; min-height: 160px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; transition: all .2s; position: relative; overflow: hidden; } .cdrop:hover { border-color: var(--amber); background: var(--hover-amber-bg); } .cdrop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9; } .cdrop-label { position: relative; z-index: 1; text-align: center; color: var(--muted); font-size: .8rem; font-weight: 500; pointer-events: none; background: var(--overlay-bg); padding: 0.5rem; border-radius: 8px; } .cdrop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; } .cmetas { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-top: .85rem; } .cm-f label { font-size: .65rem; color: var(--muted); font-weight: 600; text-transform: uppercase; display: block; margin-bottom: .3rem; } .cm-f input { background: var(--s1); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-family: var(--fb); font-size: .85rem; padding: .4rem .6rem; width: 100%; outline: none; box-shadow: inset 0 1px 2px var(--shadow-xs); } .cm-f input:focus { border-color: var(--amber); box-shadow: 0 0 0 2px rgba(217,119,6,0.1); } /* STEPS */ .step { display: flex; gap: .75rem; background: var(--s1); border: 1px solid var(--border); border-radius: 8px; padding: .8rem 1rem; margin-bottom: .5rem; align-items: flex-start; box-shadow: 0 1px 2px var(--shadow-xs); } .step-n { flex-shrink: 0; width: 24px; height: 24px; background: var(--accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 700; color: #fff; margin-top: .1rem; } .step-t { flex: 1; background: none; border: none; font-family: var(--fb); font-size: .85rem; color: var(--text); font-weight: 500; outline: none; resize: none; line-height: 1.5; } .step-t::placeholder { color: var(--faint); } .add-step { width: 100%; background: var(--s1); border: 1px dashed var(--border); border-radius: 8px; color: var(--muted); font-family: var(--fb); font-size: .8rem; font-weight: 600; padding: .6rem 1rem; cursor: pointer; transition: all .2s; text-align: left; margin-top: .4rem; } .add-step:hover { border-color: var(--accent); color: var(--accent); background: var(--insight-bad-bg); } /* CHART */ .chart-wrap { position: relative; height: 250px; background: var(--s1); border: 1px solid var(--border); border-radius: 10px; padding: 1rem; } .chart-wrap-sm { position: relative; height: 260px; /* <-- Aumentado de 210px para 260px */ background: var(--s1); border: 1px solid var(--border); border-radius: 10px; padding: 1rem; } hr.div { border: none; border-top: 1px solid var(--border); margin: 2rem 0; } /* SEMANAL */ .week-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; margin-bottom: 1.5rem; } .semanal-week-detail { scroll-margin-top: 3rem; } .week-card { background: var(--s1); border: 1px solid var(--border); border-radius: 10px; padding: 1rem 1.1rem; cursor: pointer; transition: all .2s; box-shadow: 0 1px 3px var(--shadow-sm); } .week-card:hover { border-color: var(--faint); transform: translateY(-2px); } .week-card.on { border-color: var(--accent); background: var(--tint-accent); border-left: 4px solid var(--accent); } .week-card-lbl { font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .4rem; font-weight: 600; } .week-card-val { font-family: var(--fn); font-size: 1.85rem; line-height: 1; color: var(--text); } .week-card-sub { font-size: .75rem; color: var(--muted); margin-top: .3rem; font-weight: 500; } /* FOOTER */ .dash-footer { background: var(--s1); border-top: 1px solid var(--border); padding: 1.5rem 0; margin-top: 3rem; } .dash-footer-in { max-width: 1080px; margin: 0 auto; padding: 0 1.75rem; display: flex; align-items: center; justify-content: space-between; } .finp { background: none; border: none; border-bottom: 1px dotted var(--border); font-family: var(--fb); font-size: .8rem; font-weight: 500; color: var(--muted); outline: none; min-width: 170px; padding: .2rem 0; } .finp:hover, .finp:focus { border-bottom-color: var(--text); color: var(--text); } /* NO DATA */ .nodata { text-align: center; padding: 5rem 2rem; color: var(--muted); } .nodata .ico { font-size: 3rem; margin-bottom: 1rem; color: var(--faint); } /* ACCUMULATED FILES */ .acc-item { display: flex; align-items: center; gap: .75rem; background: var(--s1); border: 1px solid var(--border); border-radius: 8px; padding: .6rem 1rem; margin-bottom: .4rem; font-size: .85rem; box-shadow: 0 1px 2px var(--shadow-xs); } .acc-item .acc-name { flex: 1; color: var(--text); font-weight: 600; } .acc-item .acc-meta { color: var(--muted); font-size: .75rem; } .acc-item .acc-period { color: var(--green); font-size: .75rem; font-weight: 700; } .acc-item .acc-remove { background: none; border: none; color: var(--faint); cursor: pointer; font-size: .9rem; padding: .2rem .4rem; transition: color .15s; } .acc-item .acc-remove:hover { color: var(--red); } .acc-item .acc-warn { color: var(--amber); font-size: .75rem; font-weight: 600; } /* BUDGET SPLIT */ .budget-split { background: var(--s2); border: 1px solid var(--border); border-radius: 8px; padding: .65rem 1rem; margin-bottom: .85rem; } .bsb-lbl { font-size: .62rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 600; margin-bottom: .45rem; display: block; } .bsb-row { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-bottom: .5rem; } .bsb-conv { font-size: .82rem; font-weight: 600; color: #22c55e; } .bsb-eng { font-size: .82rem; font-weight: 600; color: #a78bfa; } .bsb-conv em, .bsb-eng em { font-style: normal; font-weight: 400; opacity: .7; } .bsb-track { height: 6px; border-radius: 3px; background: var(--s3); overflow: hidden; display: flex; } .bsb-fill-c { background: #22c55e; height: 100%; transition: width .4s; } .bsb-fill-e { background: #a78bfa; height: 100%; flex: 1; } /* CREATIVE GALLERY */ .cri-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-bottom: 1.5rem; } .cri-card { background: var(--s1); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; position: relative; transition: all .2s; box-shadow: 0 2px 5px var(--shadow-md); } .cri-card:hover { border-color: var(--faint); box-shadow: 0 4px 10px rgba(0,0,0,0.08); } .cri-img-wrap { width: 100%; aspect-ratio: 1; background: var(--s2); position: relative; cursor: pointer; overflow: hidden; } .cri-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: none; } .cri-img-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: var(--muted); font-size: .8rem; gap: .5rem; font-weight: 500; } .cri-img-placeholder span { font-size: 1.8rem; color: var(--faint); } .cri-img-wrap input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; } .cri-body { padding: 1rem; } .cri-title-inp { background: none; border: none; border-bottom: 1px dotted var(--border); color: var(--text); font-family: var(--fb); font-size: .95rem; font-weight: 700; outline: none; width: 100%; padding: .2rem 0; margin-bottom: .8rem; transition: border-color .2s; } .cri-title-inp:focus { border-bottom-color: var(--green); } .cri-title-inp::placeholder { color: var(--faint); } .cri-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; } .cri-metric { display: flex; flex-direction: column; gap: .2rem; } .cri-metric label { font-size: .62rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; } .cri-metric input { background: var(--s2); border: 1px solid transparent; border-radius: 4px; color: var(--text); font-family: var(--fb); font-size: .85rem; font-weight: 600; outline: none; padding: .2rem .4rem; transition: border-color .2s; } .cri-metric input:focus { border-color: var(--border); } .cri-metric input::placeholder { color: var(--faint); } .cri-why { width: 100%; background: none; border: none; border-top: 1px solid var(--s2); color: var(--muted); font-family: var(--fb); font-size: .8rem; outline: none; resize: none; padding: .8rem 0 0; margin-top: .8rem; min-height: 44px; line-height: 1.5; transition: color .2s; } .cri-why:focus { color: var(--text); } .cri-why::placeholder { color: var(--faint); } .cri-remove { position: absolute; top: .6rem; right: .6rem; background: var(--s1); border: 1px solid var(--border); color: var(--muted); border-radius: 6px; padding: .3rem .5rem; font-size: .7rem; font-weight: 600; cursor: pointer; transition: all .15s; z-index: 2; box-shadow: 0 1px 3px rgba(0,0,0,0.1); } .cri-remove:hover { border-color: var(--red); color: var(--red); } .add-cri-btn { border: 2px dashed var(--border); border-radius: 12px; background: var(--s1); color: var(--muted); font-family: var(--fb); font-size: .85rem; font-weight: 600; padding: 2.5rem 1rem; cursor: pointer; transition: all .2s; width: 100%; text-align: center; } .add-cri-btn:hover { border-color: var(--amber); color: var(--amber); background: var(--hover-amber-bg); } /* ── TOOLBAR DE TEXTO RICO (INSIGHTS) ── */ .rt-toolbar { display: flex; gap: 0.4rem; margin-bottom: 0.5rem; padding-bottom: 0.5rem; border-bottom: 1px dashed var(--s3); } .rt-toolbar button { background: var(--bg); border: 1px solid var(--border); color: var(--muted); border-radius: 4px; padding: 0.2rem 0.6rem; font-size: 0.8rem; cursor: pointer; font-family: var(--fb); transition: all 0.2s; display: flex; align-items: center; justify-content: center; } .rt-toolbar button:hover { background: var(--s2); color: var(--text); border-color: var(--faint); } /* Ajuste do campo de texto para aceitar formatação */ .itext[contenteditable] { cursor: text; } .itext[contenteditable]:empty::before { content: attr(placeholder); color: var(--faint); pointer-events: none; } .itext ul { margin-left: 1.5rem; margin-top: 0.3rem; margin-bottom: 0.3rem; } /* ── DRAG & DROP (INSIGHTS) ── */ .drag-handle { cursor: grab; color: var(--faint); font-weight: 700; font-size: 1rem; line-height: 1; padding: 0 0.4rem; user-select: none; transition: color 0.2s; } .drag-handle:hover { color: var(--text); } .drag-handle:active { cursor: grabbing; } .iblock.dragging { opacity: 0.4; border: 2px dashed var(--accent) !important; } .iblock.drag-over { border-top: 4px solid var(--accent) !important; transform: translateY(2px); } /* ── PDF orientation picker ── */ .pdf-orient-picker { background: var(--s1); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,0.18); padding: 1rem; width: 236px; } .pdf-orient-title { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: .75rem; } .pdf-orient-opts { display: flex; gap: .6rem; } .pdf-orient-opt { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .45rem; padding: .7rem .5rem .6rem; background: var(--s2); border: 2px solid var(--border); border-radius: 10px; cursor: pointer; transition: border-color .15s, background .15s; font-family: var(--fb); } .pdf-orient-opt:hover { border-color: var(--blue); background: var(--s1); } .pdf-orient-thumb { border-radius: 3px; background: var(--s1); border: 1.5px solid var(--border); position: relative; overflow: hidden; } .pdf-orient-thumb::before { content: ''; position: absolute; inset: 4px 3px auto; height: 2px; background: var(--blue); opacity: .5; border-radius: 1px; } .pdf-orient-thumb::after { content: ''; position: absolute; top: 10px; left: 3px; right: 3px; height: 1px; background: var(--border); box-shadow: 0 4px 0 var(--border), 0 8px 0 var(--border); border-radius: 1px; } .pdf-thumb-portrait { width: 36px; height: 50px; } .pdf-thumb-landscape { width: 50px; height: 36px; } .pdf-orient-opt-label { font-size: .82rem; font-weight: 600; color: var(--text); } .pdf-orient-opt-sub { font-size: .68rem; color: var(--muted); } /* PRINT */ @media print { /* Reset completo das variáveis dark para garantir PDF sempre claro */ body.dark-mode { --bg: #fff; --s1: #fff; --s2: #f8fafc; --s3: #f1f5f9; --border: #e5e5e5; --text: #111; --muted: #555; --faint: #999; --insight-ok-bg: #f0fdf4; --insight-ok-border: #bceabb; --insight-bad-bg: #fef2f2; --insight-bad-border: #fecaca; --hover-amber-bg: #fffbeb; --overlay-bg: rgba(255,255,255,0.8); --shadow-xs: rgba(0,0,0,0.02); --shadow-sm: rgba(0,0,0,0.03); --shadow-md: rgba(0,0,0,0.05); } /* Remove filtro de dessaturação para badges e elementos coloridos no PDF */ body.dark-mode .btn-red, body.dark-mode .btn-green, body.dark-mode .btn-blue, body.dark-mode .step-n, body.dark-mode .badge-ok, body.dark-mode .badge-blue, body.dark-mode .badge-amber, body.dark-mode .cpill, body.dark-mode .canal-dot, body.dark-mode .health-ok, body.dark-mode .health-warn, body.dark-mode .health-bad, body.dark-mode .iblock.destaque, body.dark-mode .iblock.atencao { filter: none !important; } * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } @page { size: A4; margin: 12mm 14mm; } .rt-toolbar { display: none !important; } .drag-handle { display: none !important; } /* ── HIDE ── */ .tabbar, .dash-hdr .dash-actions, .add-insight, .icontrols, .iremove, .add-step, .hibtn, .btn, .tbtn, .accent-row, #tab-extractor, .mode-grid, .week-card, .cpl-meta-row, .add-cri-btn, .cri-remove, .sw-wrap, .metas-toggle-btn, .nodata, .no-print, .memoria-cobranca-card, #wsBanner, #sPeriodManager, #sWeekImportadaHdr, #sWeekCards { display: none !important; } #pdfBrand[data-empty="true"] { display: none !important; } /* ── SHOW ONLY ACTIVE TAB ── */ .tc { display: none !important; } .tc.print-active { display: block !important; } #tab-extractor { display: none !important; } /* ── PDF BRAND HEADER ── */ #pdfBrand { display: flex !important; align-items: center; justify-content: space-between; padding: .6rem 0 .8rem; margin-bottom: .5rem; border-bottom: 2px solid #e5e5e5; break-after: avoid; } /* no combo, só aparece antes da primeira seção */ body.printing-combo #pdfBrand { display: none !important; } body.printing-combo .tc.print-combo:first-of-type #pdfBrand { display: flex !important; } #pdfBrandClient { display: flex; align-items: center; gap: .75rem; } #pdfBrandClient img { max-height: 40pt; max-width: 120pt; object-fit: contain; } #pdfBrandClient .pdf-client-name { font-family: var(--font-display); font-size: 1.3rem; color: #111; line-height: 1.2; } #pdfBrandClient .pdf-client-slogan { font-size: .75rem; color: #555; margin-top: .15rem; } #pdfBrandAgency { text-align: right; font-size: .72rem; color: #555; line-height: 1.6; } #pdfBrandAgency img { max-height: 28pt; max-width: 90pt; object-fit: contain; display: block; margin-left: auto; margin-bottom: .25rem; } #pdfBrandAgency strong { color: #111; } /* ── BASE: WHITE BG, DARK TEXT ── */ html, body { background: #fff !important; color: #111 !important; font-size: 10.5pt; font-family: var(--font-primary); } /* ── HEADER & FOOTER: WHITE ── */ .dash-hdr { background: #fff !important; border-bottom: 1px solid #e5e5e5 !important; padding: .6rem 0 !important; margin-bottom: .75rem !important; } .dash-footer { background: #fff !important; border-top: 1px solid #e5e5e5 !important; margin-top: .75rem !important; padding: .4rem 0 !important; } .cni { color: #111 !important; font-size: 1.3rem !important; border: none !important; } .mi { color: #1a7a3a !important; border: none !important; background: none !important; } .finp { color: #555 !important; border: none !important; background: none !important; } .meta-row { color: #555 !important; } .accent-row { display: none !important; } /* ── SECTION TITLES ── */ .sec-title { color: #111 !important; font-family: var(--font-display) !important; } .sec-title em { color: #c0202a !important; } .canal-name { color: #111 !important; font-family: var(--font-display) !important; } /* ── CARDS: OUTLINED (NUNCA PRETO) ── */ .card, .kpi, .ckpi, .cmp-kpi, .iblock.destaque, .iblock.atencao, .iblock.neutro, .step, .cri-card { background: #fff !important; border: 1px solid #e5e5e5 !important; border-radius: 8px !important; color: #111 !important; box-shadow: none !important; } .kpi::before, .ckpi { -webkit-print-color-adjust: exact !important; } .kpi { border-left: 4px solid var(--kc) !important; border-top: none !important; border-bottom: 1px solid #e5e5e5 !important; border-right: 1px solid #e5e5e5 !important; } .cmp-kpi { border-top: 4px solid var(--kc) !important; border-left: 1px solid #e5e5e5 !important; border-bottom: 1px solid #e5e5e5 !important; border-right: 1px solid #e5e5e5 !important; } /* ── CARD TEXT ── */ .kpi-lbl, .ckpi-lbl, .cmp-kpi-lbl { color: #555 !important; } .kpi-val, .ckpi-val, .cmp-period-val { color: #111 !important; font-family: var(--font-numeric) !important; } .kpi-num, .ckpi-num { color: #111 !important; border: none !important; background: transparent !important; } .kpi-var, .cmp-var-note { color: #555 !important; } .kpi-calc, .ckpi-der, .der-cell { color: #c0202a !important; } .kpi-unit { color: #555 !important; } .up { color: #16a34a !important; } .dn { color: #dc2626 !important; } .nt { color: #64748b !important; } /* ── TABLES ── */ .sub-table, .ctable { border-collapse: collapse !important; width: 100% !important; } .sub-table th, .ctable th { background: #f8fafc !important; color: #555 !important; border-bottom: 2px solid #e5e5e5 !important; } .sub-table td, .ctable td { background: #fff !important; color: #111 !important; border-bottom: 1px solid #eee !important; } .sub-table td input, .ctable td input { background: transparent !important; border: none !important; color: #111 !important; } .cv-cell.up { color: #16a34a !important; } .cv-cell.dn { color: #dc2626 !important; } .cv-cell.nt { color: #64748b !important; } /* ── CANAL PILLS ── */ .cpill { -webkit-print-color-adjust: exact !important; } /* ── PILLS ROW: wrap nicely ── */ #mCanalPills { display: flex !important; flex-wrap: wrap !important; gap: .3rem !important; margin-bottom: .75rem !important; } /* ── EDITABLE BLOCKS ── */ .edblock { background: #fff !important; border: 1px solid #e5e5e5 !important; color: #111 !important; min-height: 0 !important; box-shadow: none !important; } .edblock[contenteditable]:empty::before { color: #999 !important; } input, textarea { background: transparent !important; border: none !important; color: inherit !important; box-shadow: none !important; } select { background: transparent !important; border: none !important; color: inherit !important; box-shadow: none !important; appearance: none !important; -webkit-appearance: none !important; } /* ── STEP ITEMS ── */ .step { background: #fff !important; border: 1px solid #e5e5e5 !important; } .step-n { background: #e63946 !important; color: #fff !important; -webkit-print-color-adjust: exact !important; } .step-t { color: #111 !important; } /* ── CANAL DOT ── */ .canal-dot { -webkit-print-color-adjust: exact !important; } /* ── CHARTS: hide canvas, show snapshot img ── */ .chart-wrap canvas, .chart-wrap-sm canvas { display: none !important; } .chart-wrap .chart-snapshot, .chart-wrap-sm .chart-snapshot { display: block !important; width: 100% !important; max-height: 200pt !important; object-fit: contain !important; } .chart-wrap, .chart-wrap-sm { height: auto !important; min-height: 0 !important; background: #fff !important; border: 1px solid #e5e5e5 !important; } /* donut */ .donut-wrap { height: auto !important; display: flex !important; align-items: center !important; } .donut-wrap canvas { display: none !important; } .donut-wrap .chart-snapshot { display: block !important; max-width: 160pt !important; max-height: 160pt !important; object-fit: contain !important; } /* impede que gráficos sejam cortados no meio de uma página */ .chart-wrap, .chart-wrap-sm, .donut-wrap { break-inside: avoid !important; } /* impede que o label de um card de gráfico fique numa página e o gráfico na outra */ .card:has(.chart-wrap), .card:has(.chart-wrap-sm), .card:has(.donut-wrap) { break-inside: avoid !important; } /* ── COMPARATIVO: oculta controles de UI que não são .btn ── */ #cDimTabs, .cmp-picker-foot, #cBasePeriodWrap { display: none !important; } /* ── LAYOUT ── */ .wrap, .wrap-sm { max-width: 100% !important; padding: .4rem 0 !important; } .two-col { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: .75rem !important; } .kpi-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: .5rem !important; margin-bottom: .6rem !important; } .kpi-grid + .kpi-grid { margin-top: .1rem !important; } .kpi-inline { display: flex !important; } .kpi-grid-5 { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important; gap: .4rem !important; } .canal-total-row { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: .5rem !important; } .canal-total-row .ckpi { min-width: 0 !important; background: #fff !important; } .cmp-kpi-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: .5rem !important; } /* ── PAGE BREAKS ── */ .dash-hdr { break-after: avoid !important; } .sec-hdr { break-after: avoid !important; } .semanal-week-detail { break-before: page !important; } .semanal-week-detail:first-child { break-before: avoid !important; } hr.div { break-after: avoid !important; } .canal-sec { break-inside: avoid !important; background: #fff !important; border: 1px solid #e5e5e5 !important; } .kpi, .ckpi, .cmp-kpi { break-inside: avoid !important; } .two-col { break-inside: avoid !important; } .iblock { break-inside: avoid !important; } .step { break-inside: avoid !important; } .card { break-inside: avoid !important; } .cri-card { break-inside: avoid !important; } .canal-total-row { break-inside: avoid !important; } .kpi-grid { break-inside: avoid !important; } .cmp-kpi-grid { break-inside: avoid !important; } .prf-page-break { break-before: page !important; } /* ── HIDE EMPTIES ── */ .iblock[data-empty="true"], .nota-op[data-empty="true"], .card[data-empty="true"], #ms-cri[data-empty="true"], #ss-cri[data-empty="true"], #cs-cri[data-empty="true"], #es-cri[data-empty="true"], #os-cri[data-empty="true"], .sec-hdr[data-cri-empty="true"] { display: none !important; } /* ── SMART PRINT: izones e two-col vazios ── */ .izone[data-empty="true"] { display: none !important; } .two-col[data-empty="true"] { display: none !important; } .two-col > [data-print-empty="true"] { display: none !important; } /* quando só um lado está vazio, o outro ocupa a largura toda */ .two-col:has(> [data-print-empty="true"]) { grid-template-columns: 1fr !important; } /* ── CRIATIVOS DESTAQUE: hide textarea, show text proxy div ── */ .cri-why { display: none !important; } .cri-why-print { display: block !important; font-size: .8rem; color: #555; font-family: var(--font-primary); line-height: 1.5; padding: .8rem 0 0; margin-top: .8rem; border-top: 1px solid #e5e5e5; white-space: pre-wrap; word-break: break-word; } /* ── CRIATIVOS: corrige métricas cortadas no PDF ── */ .cri-card { overflow: visible !important; } .cri-body { padding: .6rem !important; } .cri-metrics { grid-template-columns: 1fr 1fr !important; gap: .4rem !important; } .cri-metric:last-child { grid-column: 1 / -1 !important; } .cri-metric label { font-size: .52rem !important; white-space: normal !important; overflow: visible !important; } .cri-metric input { font-size: .75rem !important; padding: .15rem .3rem !important; overflow: visible !important; width: 100% !important; } /* ── HIDE TOGGLED-OFF SECTIONS (header + content) ── */ .sec-hdr:has(.sw:not(.on)) { display: none !important; } [style*="display: none"] { display: none !important; } [style*="display:none"] { display: none !important; } /* ── COMPARATIVO: period selectors → texto limpo sem caixas ── */ #cPeriodSelectorsWrap { gap: .4rem !important; margin-bottom: .75rem !important; flex-wrap: nowrap !important; } #cPeriodSelectorsWrap > div[style] { background: transparent !important; border: none !important; padding: 0 .25rem !important; } #cPeriodSelectorsWrap select { font-weight: 700 !important; font-size: .85rem !important; padding: 0 !important; } #cDaysNote { background: transparent !important; border: none !important; font-size: .7rem !important; } /* ── CMP CONTEXT CARDS ── */ .cmp-kpi .cmp-period-lbl { color: #555 !important; } .cmp-var-row { border-top: 1px solid #eee !important; } .cmp-var-big { color: #111 !important; } .cmp-var-big.up { color: #16a34a !important; } .cmp-var-big.dn { color: #dc2626 !important; } .cmp-var-big.nt { color: #64748b !important; } /* ── EXPORTAÇÃO COMBINADA (MULTI-TAB) ── */ body.printing-combo .tc { display: none !important; } body.printing-combo .tc.print-combo { display: block !important; page-break-before: always !important; padding-top: 2rem !important; } body.printing-combo .tc.print-combo:first-of-type { page-break-before: auto !important; padding-top: 0 !important; } body.printing-combo .tc.print-combo .dash-hdr { display: none !important; } .combo-section-title { display: block !important; font-family: var(--font-display) !important; font-size: 2.4rem !important; color: #c0202a !important; border-bottom: 2px solid #e5e5e5 !important; padding-bottom: .8rem !important; margin-bottom: 1.5rem !important; text-transform: uppercase; letter-spacing: .02em; } /* ── CORREÇÕES PARA O COMPARATIVO 3 MESES (PDF) ── */ #cContextWrap { gap: 0.4rem !important; } #cContextWrap .card { padding: 0.5rem !important; } #cContextWrap .nota-op { font-size: 0.7rem !important; } .cmp-kpi-grid { grid-template-columns: repeat(5, 1fr) !important; gap: 0.3rem !important; } .cmp-kpi { padding: 0.4rem 0.5rem !important; } .cmp-period-val { font-size: 0.85rem !important; } .cmp-var-big { font-size: 0.8rem !important; } div[style*="overflow-x:auto"], div[style*="overflow-x: auto"] { overflow-x: visible !important; } /* Sub-table geral: fonte legível para Mensal, Engajamento, Orgânico */ .sub-table { table-layout: auto !important; width: 100% !important; } .sub-table th { font-size: 7.5pt !important; padding: .3rem .5rem !important; word-wrap: break-word !important; } .sub-table td { font-size: 8pt !important; padding: .3rem .5rem !important; word-wrap: break-word !important; } /* Comparativo: mantém fonte minúscula pois acumula muitas colunas de período */ #cSubBlocks .sub-table { table-layout: fixed !important; } #cSubBlocks .sub-table th { font-size: 5pt !important; padding: 0.2rem 0.1rem !important; letter-spacing: -0.2px !important; word-wrap: break-word !important; } #cSubBlocks .sub-table td { font-size: 6pt !important; padding: 0.2rem 0.1rem !important; word-wrap: break-word !important; } #cs-chart .two-col { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 0.5rem !important; } /* ── MODO PAISAGEM (APRESENTAÇÃO) ── */ /* Wrappers ocupam a largura total da página landscape */ body.printing-landscape .wrap, body.printing-landscape .wrap-sm { max-width: 100% !important; padding: 0 !important; } /* auto-fit (não auto-fill!) — tracks vazios colapsam, cards dividem o espaço igualmente */ body.printing-landscape .kpi-grid, body.printing-landscape .kpi-grid-6 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important; gap: .75rem !important; } /* kpi-grid-5 (semanal por semana) — já usa auto-fit, só aumenta o mínimo */ body.printing-landscape .kpi-grid-5 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important; gap: .6rem !important; } /* Comparativo: mantém 5 colunas como no retrato, só amplia o gap */ body.printing-landscape .cmp-kpi-grid { grid-template-columns: repeat(5, 1fr) !important; gap: .4rem !important; } /* Impede "R$" de cair para linha própria quando o card tem espaço suficiente */ body.printing-landscape .kpi-val { flex-wrap: nowrap !important; } /* Gráficos — altura máxima ajustada para a página mais curta do landscape */ body.printing-landscape .chart-wrap .chart-snapshot, body.printing-landscape .chart-wrap-sm .chart-snapshot { max-height: 200pt !important; } /* Donut: mantém proporção */ body.printing-landscape .donut-wrap canvas, body.printing-landscape .donut-wrap .chart-snapshot { max-height: 160pt !important; } /* Título de seção no Relatório Completo — mais impacto visual */ body.printing-landscape .combo-section-title { font-size: 2.8rem !important; margin-bottom: 1.5rem !important; padding-bottom: .75rem !important; } /* Cliente e período em destaque */ body.printing-landscape .cni { font-size: 1.35rem !important; } body.printing-landscape .meta-row { font-size: .85rem !important; } } @media(max-width:768px) { .kpi-grid, .cmp-kpi-grid { grid-template-columns: repeat(2, 1fr); } .canal-total-row, .week-grid { grid-template-columns: repeat(2, 1fr) } .two-col { grid-template-columns: 1fr } .cmetas { grid-template-columns: 1fr 1fr } .dash-hdr-in { flex-direction: column } .mode-grid { grid-template-columns: 1fr } } /* ══ AUDITORIA IA ══ */ :root { --aud-perp: #1aba8b; --aud-perp-dim: rgba(26,186,139,.1); --aud-perp-border: rgba(26,186,139,.25); --aud-launch: #f05a28; --aud-launch-dim: rgba(240,90,40,.1); --aud-launch-border: rgba(240,90,40,.25); } .aud-ctx-bar { display:flex; align-items:center; gap:.5rem; padding:.55rem .9rem; background:var(--s2); border:1px solid var(--border); border-radius:8px; margin-bottom:1.25rem; font-size:.75rem; color:var(--muted); flex-wrap:wrap; } .aud-ctx-sep { color:var(--faint); } .aud-ctx-toggle-wrap { display:flex; align-items:center; gap:.6rem; margin-bottom:.85rem; flex-wrap:wrap; } .aud-ctx-toggle { display:flex; gap:.2rem; background:var(--s2); border:1px solid var(--border); border-radius:8px; padding:.2rem; } .aud-ctx-criativo-btn { background:transparent; border:none; border-radius:6px; padding:.3rem .75rem; font-size:.72rem; color:var(--muted); cursor:pointer; font-family:var(--fb); transition:all .15s; white-space:nowrap; } .aud-ctx-criativo-btn.active { background:var(--s1); color:var(--text); box-shadow:0 1px 3px var(--shadow-xs); font-weight:600; } .aud-ctx-criativo-btn:hover:not(.active) { color:var(--text); } .aud-bloco { background:var(--s1); border:1px solid var(--border); border-radius:10px; padding:1.25rem; margin-bottom:.75rem; } .aud-bloco-header { display:flex; align-items:center; gap:.65rem; margin-bottom:1rem; } .aud-letra { width:28px; height:28px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:700; flex-shrink:0; } .aud-letra-a { background:rgba(37,99,235,.1); color:var(--blue); border:1px solid rgba(37,99,235,.2); } .aud-letra-b { background:var(--aud-perp-dim); color:var(--aud-perp); border:1px solid var(--aud-perp-border); } .aud-letra-c { background:rgba(217,119,6,.1); color:var(--amber); border:1px solid rgba(217,119,6,.2); } .aud-bloco-titulo { font-size:.85rem; font-weight:600; color:var(--text); } .aud-bloco-sub { font-size:.72rem; color:var(--muted); } .aud-sec-label { font-size:.65rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:.6rem; } .aud-fields { display:grid; grid-template-columns:repeat(auto-fit, minmax(120px,1fr)); gap:.5rem; } .aud-fields > * { min-width: 0; } .aud-bloco .field { width: 100%; box-sizing: border-box; max-width: 100%; } .aud-field-label { font-size:.7rem; color:var(--muted); margin-bottom:.25rem; display:block; } .aud-situacao-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.4rem; } .aud-sit-btn { background:var(--s2); border:1px solid var(--border); border-radius:8px; color:var(--muted); font-size:.8rem; padding:.6rem .4rem; cursor:pointer; transition:all .15s; text-align:center; font-family:var(--fb); } .aud-sit-btn:hover { border-color:var(--faint); color:var(--text); } .aud-sit-btn.active.lucro { border-color:var(--green); color:var(--green); background:rgba(22,163,74,.08); } .aud-sit-btn.active.zero { border-color:var(--amber); color:var(--amber); background:rgba(217,119,6,.08); } .aud-sit-btn.active.prejuizo { border-color:var(--red); color:var(--red); background:rgba(220,38,38,.08); } .aud-fase-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.4rem; margin-bottom:1rem; } .aud-fase-btn { background:var(--s1); border:1px solid var(--border); border-radius:8px; color:var(--muted); font-size:.72rem; padding:.7rem .4rem; cursor:pointer; transition:all .15s; text-align:center; font-family:var(--fb); line-height:1.5; } .aud-fase-btn:hover { border-color:var(--faint); color:var(--text); } .aud-fase-btn.active { border-color:var(--aud-launch-border); color:var(--aud-launch); background:var(--aud-launch-dim); } .aud-hint-row { display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.6rem; } .aud-hint-chip { font-size:.72rem; padding:.25rem .65rem; border-radius:4px; border:1px solid var(--border); color:var(--muted); cursor:pointer; background:var(--s2); transition:all .1s; font-family:var(--fb); } .aud-hint-chip:hover { border-color:var(--faint); color:var(--text); } .aud-submit { width:100%; padding:.9rem; font-size:.9rem; font-weight:700; border-radius:10px; border:none; cursor:pointer; transition:all .2s; margin-top:.75rem; font-family:var(--fb); } .aud-submit.perp { background:var(--aud-perp); color:#000; box-shadow:0 0 20px var(--aud-perp-dim); } .aud-submit.perp:hover { box-shadow:0 0 28px rgba(26,186,139,.35); } .aud-submit.launch { background:var(--aud-launch); color:#fff; box-shadow:0 0 20px var(--aud-launch-dim); } .aud-submit.launch:hover { box-shadow:0 0 28px rgba(240,90,40,.35); } .aud-submit:disabled { opacity:.4; cursor:not-allowed; box-shadow:none; } .aud-api-status { display:flex; align-items:center; gap:.5rem; padding:.5rem .85rem; border-radius:7px; font-size:.75rem; margin-bottom:1.25rem; border:1px solid; } .aud-api-ok { background:rgba(22,163,74,.08); border-color:rgba(22,163,74,.2); color:var(--green); } .aud-api-erro { background:rgba(220,38,38,.08); border-color:rgba(220,38,38,.2); color:var(--red); } .aud-api-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; } .aud-api-dot.ok { background:var(--green); } .aud-api-dot.erro { background:var(--red); } .aud-modo-pill { font-size:.72rem; padding:.25rem .8rem; border-radius:20px; font-weight:600; letter-spacing:.04em; display:inline-block; } .aud-modo-pill.perp { background:var(--aud-perp-dim); color:var(--aud-perp); border:1px solid var(--aud-perp-border); } .aud-modo-pill.launch { background:var(--aud-launch-dim); color:var(--aud-launch); border:1px solid var(--aud-launch-border); } .aud-loading { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:4rem 0; gap:1rem; } .aud-spinner { width:36px; height:36px; border:2px solid var(--border); border-top-color:var(--aud-perp); border-radius:50%; animation:audSpin .8s linear infinite; } .aud-spinner.launch { border-top-color:var(--aud-launch); } @keyframes audSpin { to { transform:rotate(360deg); } } .aud-loading-text { font-size:.8rem; color:var(--muted); } .aud-res-bloco { background:var(--s1); border:1px solid var(--border); border-radius:10px; padding:1.25rem; margin-bottom:.6rem; transition:border-color .2s; } .aud-res-bloco:hover { border-color:var(--faint); } .aud-res-header { display:flex; align-items:center; gap:.6rem; margin-bottom:.65rem; } .aud-res-icon { width:30px; height:30px; border-radius:7px; display:flex; align-items:center; justify-content:center; font-size:.9rem; flex-shrink:0; background:rgba(107,114,128,.1); } .aud-res-label { font-size:.65rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:600; } .aud-res-content { font-size:.88rem; color:var(--text); line-height:1.75; white-space:pre-wrap; } .aud-bloco-diag { border-color:rgba(37,99,235,.2); background:rgba(37,99,235,.03); } .aud-bloco-diag .aud-res-icon { background:rgba(37,99,235,.1); } .aud-bloco-diag .aud-res-content { font-size:.95rem; font-weight:500; } .aud-bloco-acao .aud-res-icon { background:var(--aud-launch-dim); } .aud-bloco-angulo .aud-res-icon { background:rgba(22,163,74,.1); } .aud-bloco-alerta .aud-res-icon { background:rgba(217,119,6,.1); } .aud-bloco-proximo { border-color:rgba(37,99,235,.25); background:rgba(37,99,235,.04); } .aud-bloco-proximo .aud-res-icon { background:rgba(37,99,235,.1); } .aud-risco-badge { margin-left:auto; font-size:.65rem; font-weight:700; letter-spacing:.06em; padding:.2rem .7rem; border-radius:4px; border:1px solid; } .aud-risco-estavel { background:rgba(22,163,74,.1); color:var(--green); border-color:rgba(22,163,74,.25); } .aud-risco-atencao { background:rgba(217,119,6,.1); color:var(--amber); border-color:rgba(217,119,6,.25); } .aud-risco-critico { background:rgba(220,38,38,.1); color:var(--red); border-color:rgba(220,38,38,.25); } .aud-actions { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; margin-bottom:.5rem; } .aud-action-btn { background:var(--s2); border:1px solid var(--border); border-radius:8px; color:var(--muted); font-size:.75rem; padding:.65rem; cursor:pointer; transition:all .15s; text-align:center; font-family:var(--fb); } .aud-action-btn:hover { border-color:var(--faint); color:var(--text); } .aud-action-btn.perp-primary { border-color:var(--aud-perp-border); color:var(--aud-perp); background:var(--aud-perp-dim); } .aud-action-btn.launch-primary { border-color:var(--aud-launch-border); color:var(--aud-launch); background:var(--aud-launch-dim); } .aud-nova-btn { width:100%; background:none; border:1px solid var(--border); border-radius:7px; color:var(--muted); font-size:.75rem; padding:.6rem; cursor:pointer; transition:all .15s; font-family:var(--fb); margin-top:.5rem; } .aud-nova-btn:hover { border-color:var(--faint); color:var(--text); } .aud-followup { margin-top:.75rem; background:var(--s1); border:1px solid var(--border); border-radius:10px; padding:1rem; display:none; } .aud-followup.visible { display:block; } .aud-followup-label { font-size:.65rem; color:var(--muted); letter-spacing:.06em; text-transform:uppercase; margin-bottom:.5rem; } .aud-followup-chips { display:flex; flex-wrap:wrap; gap:.35rem; margin-bottom:.65rem; } .aud-followup-chip { font-size:.72rem; padding:.25rem .65rem; border-radius:4px; border:1px solid var(--border); color:var(--muted); cursor:pointer; background:var(--s2); transition:all .1s; font-family:var(--fb); } .aud-followup-chip:hover { border-color:var(--faint); color:var(--text); } .aud-followup-row { display:flex; gap:.5rem; margin-top:.5rem; } .aud-followup-input { flex:1; background:var(--s2); border:1px solid var(--border); border-radius:7px; color:var(--text); font-size:.82rem; padding:.6rem .8rem; font-family:var(--fb); transition:border-color .15s; } .aud-followup-input:focus { outline:none; border-color:var(--faint); } .aud-error { background:rgba(220,38,38,.08); border:1px solid rgba(220,38,38,.2); border-radius:10px; padding:1.25rem; margin-bottom:.75rem; } .aud-error-title { font-size:.9rem; font-weight:700; color:var(--red); margin-bottom:.4rem; } .aud-error-msg { font-size:.83rem; color:var(--muted); line-height:1.6; } #audToast { position:fixed; bottom:2rem; left:50%; transform:translateX(-50%); background:var(--s1); border:1px solid var(--border); border-radius:7px; padding:.5rem 1.25rem; font-size:.8rem; color:var(--text); opacity:0; pointer-events:none; transition:opacity .3s; z-index:9999; box-shadow:0 4px 12px rgba(0,0,0,.12); } #audToast.show { opacity:1; } /* ── TOAST NOTIFICATIONS ── */ .toast-container { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999; display: flex; flex-direction: column; gap: .5rem; max-width: 400px; pointer-events: none; } .toast { padding: .85rem 1.1rem; border-radius: 10px; font-size: .82rem; line-height: 1.5; font-weight: 500; border-left: 4px solid; box-shadow: 0 4px 20px rgba(0,0,0,.14); animation: toastIn .22s ease; cursor: pointer; pointer-events: all; background: var(--s1); color: var(--text); display: flex; gap: .6rem; align-items: flex-start; } .toast .toast-icon { flex-shrink: 0; font-size: .9rem; } .toast .toast-msg { flex: 1; } .toast.error { border-color: var(--red); } .toast.warning { border-color: var(--amber); } .toast.success { border-color: var(--green); } .toast.info { border-color: var(--blue); } .toast.fade-out { animation: toastOut .25s ease forwards; } @keyframes toastIn { from { opacity:0; transform:translateX(1rem); } to { opacity:1; transform:translateX(0); } } @keyframes toastOut { from { opacity:1; transform:translateX(0); } to { opacity:0; transform:translateX(1rem); } } /* ── BARRA DE PROGRESSO IA ── */ .progress-container { width: 100%; background-color: var(--s2); border-radius: 100px; height: 8px; margin: 1rem 0; overflow: hidden; display: none; /* Escondida por padrão */ } .progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--blue), var(--accent)); transition: width 0.4s ease; } /* ══ LOGIN OVERLAY ══ */ .login-overlay { position: fixed; inset: 0; background: var(--bg); z-index: 999999; display: flex; align-items: center; justify-content: center; padding: 1rem; transition: opacity .35s ease; } .login-overlay.fade-out { opacity: 0; pointer-events: none; } .login-card { width: 100%; max-width: 380px; background: var(--s1); border: 1px solid var(--border); border-top: 3px solid var(--accent); border-radius: 16px; padding: 2.4rem 2rem 2rem; box-shadow: 0 12px 40px rgba(0,0,0,0.12); display: flex; flex-direction: column; gap: 1.4rem; } .login-brand { display: flex; flex-direction: column; align-items: center; gap: .65rem; text-align: center; } .login-logo-mark { width: 50px; height: 50px; border-radius: 13px; background: var(--accent); color: #fff; font-family: var(--fd); font-size: 1.55rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 18px rgba(230,57,70,.28); letter-spacing: -.02em; } .login-title { font-family: var(--fd); font-size: 1.55rem; color: var(--text); font-weight: normal; line-height: 1.1; } .login-title em { font-style: normal; color: var(--accent); } .login-subtitle { font-size: .8rem; color: var(--muted); } .login-fields { display: flex; flex-direction: column; gap: .85rem; } .login-field-wrap { display: flex; flex-direction: column; gap: .28rem; } .login-label { font-size: .67rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; } .login-pwd-wrap { position: relative; } .login-pwd-wrap .field { padding-right: 2.6rem; width: 100%; } .login-pwd-toggle { position: absolute; right: .55rem; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; font-size: .95rem; color: var(--muted); padding: .15rem .25rem; line-height: 1; transition: color .15s; } .login-pwd-toggle:hover { color: var(--text); } .login-error { display: none; font-size: .8rem; color: var(--accent); background: rgba(230,57,70,.07); border: 1px solid rgba(230,57,70,.18); border-radius: 7px; padding: .55rem .8rem; text-align: center; line-height: 1.4; } .login-btn { width: 100%; justify-content: center; padding: .78rem; font-size: .88rem; border-radius: 9px; } .login-btn:disabled { opacity: .6; cursor: not-allowed; } .login-footer { font-size: .68rem; color: var(--faint); text-align: center; } /* ── ESTADO RECONECTANDO (auto-login) ── */ .login-reconnecting { display: none; flex-direction: column; align-items: center; gap: .85rem; padding: .25rem 0; } .login-card.reconnecting .login-fields, .login-card.reconnecting #loginError, .login-card.reconnecting .login-btn { display: none; } .login-card.reconnecting #loginReconnecting { display: flex; } .login-reconnecting-spinner { width: 36px; height: 36px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: loginSpin .7s linear infinite; } .login-reconnecting-text { font-size: .82rem; color: var(--muted); } @keyframes loginSpin { to { transform: rotate(360deg); } } /* ══ ENTERPRISE PAYWALL ══ */ .enterprise-paywall { padding: 3rem 1rem; animation: paywallFadeIn .25s ease; } .enterprise-paywall .paywall-card { border-top: 4px solid var(--accent); text-align: center; max-width: 560px; margin: 0 auto; } .enterprise-paywall .paywall-icon { font-size: 2.5rem; margin-bottom: .75rem; } .enterprise-paywall .paywall-title { font-family: var(--fd); font-size: 1.6rem; font-weight: 400; margin-bottom: .5rem; } .enterprise-paywall .paywall-title em { font-style: normal; color: var(--accent); } .enterprise-paywall .paywall-desc { color: var(--muted); font-size: .9rem; line-height: 1.6; margin-bottom: 1.25rem; } .enterprise-paywall .paywall-features { text-align: left; background: var(--s2); border: 1px solid var(--border); border-radius: 8px; padding: .9rem 1.1rem; margin: 0 auto 1.5rem; max-width: 420px; font-size: .85rem; line-height: 1.7; color: var(--text); } .enterprise-paywall .paywall-features li { list-style: none; padding-left: 1.2rem; position: relative; } .enterprise-paywall .paywall-features li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 600; } .enterprise-paywall .paywall-actions { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; } .enterprise-paywall .paywall-foot { margin-top: 1.25rem; font-size: .72rem; color: var(--faint); } @keyframes paywallFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* ── CARD DE COBRANÇA (período anterior) ── */ .memoria-cobranca-card { background: rgba(245,158,11,.06); border: 1px dashed rgba(245,158,11,.35); border-radius: 8px; padding: .9rem 1.1rem; margin-bottom: 1.5rem; font-size: .82rem; } .memoria-cobranca-card .mc-hdr { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: .5rem; flex-wrap: wrap; } .memoria-cobranca-card .mc-hdr strong { color: var(--text); font-size: .82rem; font-weight: 600; } .memoria-cobranca-card .mc-tag { font-size: .65rem; color: var(--muted); background: var(--s2); border: 1px solid var(--border); padding: .15rem .5rem; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; } .memoria-cobranca-card .mc-compromissos { margin: .4rem 0 .75rem; padding-left: 1.1rem; font-size: .8rem; line-height: 1.7; color: var(--muted); } .memoria-cobranca-card .mc-compromissos li { list-style: disc; } .memoria-cobranca-card .mc-status { width: 100%; resize: vertical; min-height: 60px; font-size: .82rem; font-family: inherit; background: var(--bg); } /* ── BADGE DE PLANO NO TOPBAR ── */ .plano-badge { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .65rem; border-radius: 999px; font-size: .68rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; user-select: none; transition: opacity .15s, transform .15s; } .plano-badge.enterprise { background: linear-gradient(135deg, rgba(167,139,250,.18), rgba(59,130,246,.18)); color: var(--accent); border: 1px solid rgba(167,139,250,.35); cursor: default; } .plano-badge.basic { background: var(--s2); color: var(--muted); border: 1px solid var(--border); cursor: pointer; } .plano-badge.basic:hover { background: var(--bg); color: var(--text); transform: translateY(-1px); } .plano-badge .plano-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }