/* ========================================================================== Identidade visual do painel (tema padrão: Galates Label) Para outro cliente, troque as cores em core/client-config.js (colors) e os arquivos de assets/brand/. Os tokens abaixo são o tema padrão; o app.js sobrescreve as cores de marca. Paleta: Azul-marinho #122945 (principal) · Azul #2563EB / #3B82F6 no escuro (destaque) · Azul #3E99DD (apoio) · Escuro em preto e cinzas Tipografia: IBM Plex Sans (texto) e Unbounded (títulos grandes), pelo Google Fonts. Carregado por último: vale sobre os estilos antigos. ========================================================================== */ /* ---------- 1. Tokens ---------- */ :root{ /* Marca */ --brand-navy:#122945;--brand-orange:#134FD0;--brand-blue:#3E99DD;--brand-gray:#EDEDED;--brand-black:#1A1A1A; /* Tons de apoio do manual */ --navy-70:#5B6B7D;--navy-40:#A3AAB7;--navy-15:#D0D4DC; --blue-70:#7AB8E6;--blue-40:#B3D5F0;--blue-15:#DCEBF8; --orange-70:#678FE6;--orange-40:#A8BFF0;--orange-15:#DBE5F9; --navy:var(--brand-navy);--navy2:#0C1E33;--orange:var(--brand-orange);--blue:var(--brand-blue); --page:#F3F4F6;--surface:#FFFFFF;--surface-2:#F7F8FA;--soft:#EEF0F3; --line:#E2E5EA;--line-soft:#ECEEF1;--line-strong:#CDD2DA; --text-1:#122945;--text-2:#3A4757;--text-3:#5B6B7D;--muted:#5B6B7D;--ink:#1A1A1A; --row-hover:#F4F8FD; --accent-text:#1D4ED8;--on-accent:#FFFFFF;--accent-grad:none; /* azul com contraste para texto pequeno sobre claro */ --green:#1E8556;--red:#C93838;--amber:#B87800; --ok-bg:#E7F4EC;--ok-fg:#146B43;--warn-bg:#FDF3DF;--warn-fg:#8A5A00;--bad-bg:#FCE9E9;--bad-fg:#A42F2F;--info-bg:#E6F1FB;--info-fg:#1D5F96; --font-primary:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif; --font-secondary:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif; --font-display:"Unbounded","IBM Plex Sans",system-ui,sans-serif; --radius-sm:8px;--radius-md:12px;--radius-lg:16px; --shadow-sm:0 1px 2px rgba(18,41,69,.05);--shadow:0 1px 2px rgba(18,41,69,.05),0 8px 24px rgba(18,41,69,.05); --shadow-lg:0 24px 60px rgba(18,41,69,.18); --focus:0 0 0 3px rgba(62,153,221,.22); --chart-text:#5B6B7D;--chart-grid:#E8EBEF;--chart-navy:#122945;--chart-orange:#134FD0;--chart-blue:#3E99DD;--chart-gray:#A3AAB7;--chart-green:#1E8556; /* Marca d'água do cartão de destaque: nenhuma no tema padrão */ --star-outline:none; } html[data-theme="dark"]{ --bg:#0B0B0D;--page:#0B0B0D;--surface:#17181B;--surface-2:#131416;--surface-strong:#222327;--surface-hover:#1D1E22;--soft:#1D1E22; --text:#EDEDED;--text-1:#F5F5F6;--text-2:#CFD0D4;--text-3:#9A9CA3;--muted:#9A9CA3;--ink:#EDEDED;--text-muted:#9A9CA3;--text-subtle:#7E8189; --line:rgba(237,237,237,.10);--line-soft:rgba(237,237,237,.06);--line-strong:rgba(237,237,237,.16);--divider:rgba(237,237,237,.10); --row-hover:#1E1F23;--orange:var(--brand-orange-dark,#3B82F6);--accent:var(--orange);--accent-text:#60A5FA;--on-accent:#FFFFFF;--accent-grad:none; --green:#4CC38A;--red:#FF7B7B;--amber:#F0B44C; --ok-bg:rgba(76,195,138,.14);--ok-fg:#7FDCAE;--warn-bg:rgba(240,180,76,.14);--warn-fg:#F3C77A;--bad-bg:rgba(255,123,123,.14);--bad-fg:#FFA3A3;--info-bg:rgba(62,153,221,.16);--info-fg:#9CCBF1; --theme-surface:#17181B;--theme-surface-2:#1D1E22;--theme-surface-3:#222327;--theme-line:rgba(237,237,237,.10);--theme-line-strong:rgba(237,237,237,.16); --theme-deep:#121316;--theme-raised:#1B1C20;--theme-raised-2:#212227;--theme-orange:var(--orange); --shadow-sm:0 1px 2px rgba(0,0,0,.25);--shadow:0 1px 2px rgba(0,0,0,.25),0 10px 28px rgba(0,0,0,.22); --focus:0 0 0 3px rgba(62,153,221,.30); --chart-text:#94A3B6;--chart-grid:rgba(237,237,237,.08);--chart-navy:#7AB8E6;--chart-orange:#3B73ED;--chart-blue:#3E99DD;--chart-gray:#7C8DA1;--chart-green:#4CC38A; } /* ---------- 2. Base ---------- */ body{font-family:var(--font-primary);color:var(--text-2);background:var(--page);font-feature-settings:"ss01" on} html[data-theme="dark"] body{background:var(--page)!important} #appView :is(h1,h2,h3,h4){font-family:var(--font-primary);color:var(--text-1)} #appView :is(strong,b){font-variant-numeric:tabular-nums} #appView .eyebrow,#appView .section-kicker{font-family:var(--font-secondary);font-size:11.5px;font-weight:600;letter-spacing:.14em;color:var(--accent-text)} html[data-theme="dark"] #appView :is(.eyebrow,.section-kicker){color:var(--accent-text)!important} #appView :is(.section-header,.records-copy,.fca-section-title,.weekly-integrated-heading) h3{font-size:19px;font-weight:700;letter-spacing:-.02em} ::selection{background:rgba(62,153,221,.25);color:inherit} /* ---------- 3. Estrutura: barra do topo e menu ---------- */ @media (min-width:901px){ #appView .global-top-controls,#appView .global-top-controls.is-scrolled{height:64px;background:var(--surface);border-bottom:1px solid var(--line);backdrop-filter:none;-webkit-backdrop-filter:none} #appView .bottom-nav .nav-item{position:relative;height:40px;padding:0 12px;border-radius:8px;color:var(--text-3);font-weight:600;font-size:13.5px} #appView .bottom-nav .nav-item:hover{background:var(--surface-2);color:var(--text-1)} #appView .bottom-nav .nav-item.active,html[data-theme="dark"] #appView .bottom-nav .nav-item.active{background:transparent;color:var(--text-1);box-shadow:none;font-weight:700} #appView .bottom-nav .nav-item.active::after{content:"";position:absolute;left:12px;right:12px;bottom:-12px;height:3px;border-radius:3px 3px 0 0;background:var(--orange)} #appView .bottom-nav .nav-item.active .nav-icon{color:var(--orange)} html[data-theme="dark"] #appView .bottom-nav .nav-item{color:var(--text-3)} html[data-theme="dark"] #appView .bottom-nav .nav-item:hover{background:var(--surface-hover);color:var(--text-1)} } @media (max-width:900px){ #appView .global-top-controls{background:var(--page)} #appView .bottom-nav{border:1px solid var(--line);background:var(--surface);box-shadow:0 10px 30px rgba(18,41,69,.14)} #appView .bottom-nav .nav-item{color:var(--text-3)} #appView .bottom-nav .nav-item.active{background:var(--navy);color:#fff;box-shadow:none} html[data-theme="dark"] #appView .bottom-nav{background:var(--surface);border-color:var(--line)} html[data-theme="dark"] #appView .bottom-nav .nav-item.active{background:var(--orange)} } #appView .avatar,#appView .profile-trigger .avatar{border-radius:50%;background:var(--navy);font-family:var(--font-secondary);font-weight:600;letter-spacing:.04em} #appView .profile-trigger{box-shadow:none;padding:0} #appView .profile-trigger:hover{transform:none} html[data-theme="dark"] #appView .avatar{background:var(--orange)} /* ---------- 4. Botões ---------- */ #appView :is(.primary-action,.navy-action,.orange-action,.secondary-action,.toolbar-action){height:40px;padding:0 15px;border-radius:10px;font-size:13.5px;font-weight:650;letter-spacing:0;box-shadow:none} #appView :is(.primary-action,.navy-action){background:var(--navy);color:#fff;border:1px solid var(--navy)} #appView :is(.primary-action,.navy-action):hover{background:#0C1E33;filter:none;transform:none} #appView :is(.toolbar-action,.secondary-action){background:var(--surface);color:var(--text-1);border:1px solid var(--line)} #appView :is(.toolbar-action,.secondary-action):hover{border-color:var(--line-strong);background:var(--surface-2);transform:none} html[data-theme="dark"] #appView :is(.primary-action,.navy-action){background:var(--orange)!important;border-color:var(--orange)!important;color:var(--on-accent)!important;background-image:var(--accent-grad)} html[data-theme="dark"] #appView :is(.primary-action,.navy-action):hover{background:#1248BD!important} html[data-theme="dark"] #appView :is(.toolbar-action,.secondary-action){background:var(--surface)!important;border-color:var(--line-strong)!important;color:var(--text-1)!important} /* ---------- 5. Campos ---------- */ #appView :is(.compact-input,.filter-field input,.filter-field select,.form-field input,.form-field select,.form-field textarea,.referral-seller-filter select,.fca-history-filter select,.seller-filter select){ min-height:40px;border:1px solid var(--line);border-radius:10px;background-color:var(--surface);color:var(--text-1);font-family:var(--font-primary);font-size:13.5px;box-shadow:none} #appView :is(.compact-input,.filter-field input,.filter-field select,.form-field input,.form-field select,.form-field textarea):focus{border-color:var(--blue);box-shadow:var(--focus);outline:0} #appView :is(.filter-field>span,.form-field>span){font-family:var(--font-secondary);font-size:11px;font-weight:600;letter-spacing:.1em;color:var(--text-3)} html[data-theme="dark"] #appView :is(.compact-input,.filter-field input,.filter-field select,.form-field input,.form-field select,.form-field textarea){background-color:var(--surface-2)!important;border-color:var(--line-strong)!important;color:var(--text-1)!important} #appView .month-stepper{height:40px;border-radius:10px;border-color:var(--line);background:var(--surface)} html[data-theme="dark"] #appView .month-stepper{background:var(--surface-2);border-color:var(--line-strong)} #appView .dashboard-mode-switch{height:40px;border-radius:10px;padding:3px} #appView .dashboard-mode-switch>.is-active{background:var(--navy);color:#fff;box-shadow:none} #appView .dashboard-mode-switch>.is-active svg{color:#fff} html[data-theme="dark"] #appView .dashboard-mode-switch{background:var(--surface-2);border-color:var(--line-strong)} html[data-theme="dark"] #appView .dashboard-mode-switch>.is-active{background:var(--orange)} /* ---------- 6. Superfícies (cards) ---------- */ #appView :is(.home-metrics,.home-today,.home-shortcut,.dashboard-period-panel,.dashboard-goals,.chart-card,.panel,.weekly-integrated-section,.weekly-manager-board-integrated,.empty-state,.referral-form,.sale-form,.saved-dashboards-panel){border-radius:var(--radius-lg)} #appView .team-logo.is-placeholder{background:var(--surface-2)} /* Blocos de destaque: azul-marinho chapado + estrela vazada (sem degradês) */ #appView :is(.seller-hero-card,.seller-hero-card.behind,.seller-hero-card.neutral,.weekly-today-focus,.weekly-today-focus.ahead,.weekly-today-focus.waiting,.weekly-today-focus.neutral){ background:var(--brand-navy) var(--star-outline) no-repeat right -40px center/280px auto!important;color:#fff;border:0} html[data-theme="dark"] #appView :is(.seller-hero-card,.weekly-today-focus){background-color:#1F2023!important;box-shadow:inset 0 0 0 1px var(--line)} /* Cabeçalho do bloco mensal/diário do Dashboard */ #appView .monthly-period .period-heading{background:var(--brand-navy)} #appView .daily-period .period-heading{background:var(--orange)} /* ---------- 7. Tabelas: cabeçalho claro, texto à esquerda, números à direita ---------- */ #appView .sales-table-wrap,#appView .referrals-table-scroll{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-sm);overflow:hidden} #appView .sales-table th,#appView .referrals-table th{background:var(--surface-2)!important;color:var(--text-3)!important;border-bottom:1px solid var(--line)!important;border-right:0!important;font-family:var(--font-secondary);font-size:11px!important;font-weight:600!important;letter-spacing:.1em!important;height:44px} #appView .sales-table thead tr:first-child th:first-child,#appView .sales-table thead tr:first-child th:last-child,#appView .referrals-table th:first-child,#appView .referrals-table th:last-child{border-radius:0} #appView .sales-column-filter{color:var(--text-3);font-family:var(--font-secondary);font-size:11px;font-weight:600;letter-spacing:.1em;justify-content:flex-start;padding:0 26px 0 12px} #appView .sales-column-filter>span{text-align:left} #appView .sales-column-filter:hover{background:var(--line-soft);color:var(--text-1)} #appView .sales-column-filter.is-active{background:var(--orange-15);color:var(--accent-text)} #appView .sales-column-filter>b{left:auto;right:24px} #appView .sales-table td,#appView .referrals-table td{text-align:left;border-bottom:1px solid var(--line-soft);color:var(--text-2);font-size:13.5px} #appView .sales-table tbody .sale-main-row>td{text-align:left} #appView .sales-table td.col-student strong,#appView .sales-table td strong{text-align:left;font-weight:650;color:var(--text-1)} #appView .sales-table :is(td,th).num,#appView .sales-table td.money-cell,#appView .referrals-table td.referral-money{text-align:right;font-variant-numeric:tabular-nums} #appView .sales-table thead th.num .sales-column-filter{justify-content:flex-end} #appView .sales-table thead th.num .sales-column-filter>span{text-align:right} #appView .sales-table :is(td,th).audit-col,#appView .sales-table :is(td,th).receipt-col{text-align:center} #appView .sales-table thead th:is(.audit-col,.receipt-col) .sales-column-filter{justify-content:center} #appView .sales-table thead th:is(.audit-col,.receipt-col) .sales-column-filter>span{text-align:center} #appView .sales-table td.col-total{color:var(--text-1);font-weight:700} #appView .sales-table tbody .sale-main-row:hover{background:var(--row-hover);box-shadow:inset 3px 0 0 var(--blue)} #appView .referrals-table td :is(strong){color:var(--text-1);font-weight:650} #appView .referrals-table td{padding-left:12px;padding-right:12px} #appView .referrals-table th{text-align:left;padding:0 12px} #appView .referrals-table th:first-child,#appView .referrals-table td:first-child,#appView .referrals-table th:last-child,#appView .referrals-table td:last-child{text-align:center} #appView .sale-details-inner,#appView .referral-details-inner{background:var(--surface-2)!important} #appView .sale-details-inner span,#appView .sale-details-inner b{text-align:left} html[data-theme="dark"] #appView :is(.sales-table-wrap,.referrals-table-scroll){background:var(--surface)!important;border-color:var(--line)!important} html[data-theme="dark"] #appView :is(.sales-table,.referrals-table) th{background:var(--surface-2)!important;color:var(--text-3)!important} html[data-theme="dark"] #appView :is(.sales-table,.referrals-table) td{background:transparent!important;color:var(--text-2)!important;border-color:var(--line-soft)!important} html[data-theme="dark"] #appView .sales-table tbody .sale-main-row{background:transparent!important} html[data-theme="dark"] #appView .sales-table tbody .sale-main-row:hover{background:var(--row-hover)!important} /* Tabelas de rotina do FCA: cabeçalho claro */ #appView :is(.weekly-task-row.header,.weekly-challenge-row.header){background:var(--surface-2);color:var(--text-3);border:1px solid var(--line);font-family:var(--font-secondary)} #appView :is(.weekly-task-row.header,.weekly-challenge-row.header) :is(strong,span){color:var(--text-3);font-size:11px;letter-spacing:.1em} html[data-theme="dark"] #appView :is(.weekly-task-row.header,.weekly-challenge-row.header){background:var(--surface-2)!important;border-color:var(--line)!important} /* ---------- 8. Selos de status ---------- */ #appView .payment-badge{border-radius:999px;font-weight:650;font-size:12px} #appView .payment-badge.cartao{background:var(--info-bg);color:var(--info-fg)} #appView .payment-badge.boleto{background:var(--orange-15);color:var(--accent-text)} #appView .payment-badge.a_vista{background:var(--ok-bg);color:var(--ok-fg)} #appView .payment-badge.sem_taxa_migracao{background:var(--soft);color:var(--text-2)} html[data-theme="dark"] #appView .payment-badge.boleto{background:rgba(19,79,208,.18)!important;color:#8AACF4!important} html[data-theme="dark"] #appView .payment-badge.cartao{background:var(--info-bg)!important;color:var(--info-fg)!important} html[data-theme="dark"] #appView .payment-badge.a_vista{background:var(--ok-bg)!important;color:var(--ok-fg)!important} /* ---------- 9. Gaveta de perfil, modais, avisos ---------- */ #appView .profile-drawer{border-radius:var(--radius-lg);border-color:var(--line);background:var(--surface)} html[data-theme="dark"] #appView .profile-drawer{background:var(--surface)!important} #appView .profile-commission-total strong{color:var(--accent-text)} .mini-modal{border-radius:var(--radius-lg)} /* ---------- 10. Login (azul-marinho com a arte de barras) ---------- */ #loginView{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(400px,480px);align-items:center;gap:56px;height:100dvh;min-height:0;padding:48px clamp(32px,5vw,72px); background:radial-gradient(1200px 700px at 78% 55%,#1A3A60 0%,#122945 45%,#0B1B30 100%)!important;background-image:radial-gradient(1200px 700px at 78% 55%,#1A3A60 0%,#122945 45%,#0B1B30 100%)!important;color:#fff} #loginView:after{display:none} /* Arte decorativa grande e translúcida atrás do cartão */ #loginView .login-star{width:min(64vw,920px);height:auto;pointer-events:none;z-index:0} #loginView .login-star .n{fill:#fff} #loginView .login-star .o{fill:#134FD0} /* Coluna da marca */ #loginView .login-copy{position:relative;z-index:1;align-self:stretch;gap:22px} #loginView .login-copy-logo{height:40px;width:auto} #loginView .login-copy-mid{align-self:center;display:grid;gap:14px} #loginView .login-copy-mid>span{font-family:var(--font-secondary);font-size:12px;font-weight:600;letter-spacing:.16em;color:#608EF0} #loginView .login-copy h1{margin:0;max-width:560px;font-family:var(--font-display);font-size:clamp(36px,3.6vw,54px);color:#fff;text-wrap:balance} #loginView .login-copy h1 em{font-style:normal;color:#608EF0} #loginView .login-copy-meta{display:flex;gap:28px;margin:0;padding:0;list-style:none;color:#9FB0C4;font-size:13px} #loginView .login-copy-meta b{display:block;color:#fff;font-family:var(--font-secondary);font-size:22px;font-weight:500} /* Cartão */ #loginView .login-shell{position:relative;z-index:1;height:auto;padding:0;display:block} #loginView .login-brand{display:none} #loginView .login-panel{width:100%;max-width:none} /* Identidade com foto */ /* Perfil, campos e botões */ #loginView .login-form{display:grid;gap:14px} #loginView .field{display:grid;gap:8px} #loginView .field-control{height:50px;border-radius:12px;box-shadow:none} #loginView .field-control:focus-within{transform:none} #loginView .field-control svg{color:#5B6B7D} #loginView .field-control input,#loginView .field-control select{font-size:15px} #loginView .password-toggle{color:#5B6B7D} #loginView .primary-button{height:50px;display:flex;align-items:center;justify-content:center;gap:10px;border-radius:12px;box-shadow:none;font-size:15.5px;font-weight:700} #loginView .primary-button:hover{filter:none;transform:none} #loginView .primary-button svg{width:18px;height:18px} #loginView .login-error{min-height:0;margin:0;font-size:13px;text-align:left} #loginView .login-error:empty{display:none} #loginView .login-links{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13.5px} #loginView .login-text-action,#loginView .login-first-access{width:auto!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important;font-size:13.5px!important;font-weight:600!important;text-decoration:none} #loginView .login-text-action:hover,#loginView .login-first-access:hover{text-decoration:underline!important} /* Fluxos de primeiro acesso e recuperação, dentro do mesmo cartão */ #loginView .login-inline-head{justify-items:start;text-align:left;margin-bottom:16px} #loginView .login-inline-head>span{font-family:var(--font-secondary);font-size:11px;font-weight:600;letter-spacing:.14em} #loginView .login-inline-head h2{margin:0;font-size:26px} #loginView .login-inline-head p{color:#5B6B7D;font-size:14px} #loginView .login-inline-form .field>span{color:#5B6B7D} #loginView .login-inline-note{color:#5B6B7D;font-size:12.5px} #loginView .login-secondary-button{height:50px;border-radius:12px;font-size:14px} #loginView.is-inline-flow{height:auto;min-height:100dvh;overflow:auto;align-items:start} #loginView.is-inline-flow .login-shell{padding:0} #loginView.is-inline-flow .login-copy{position:sticky;top:48px;height:calc(100dvh - 96px)} @media (max-width:980px){ #loginView{grid-template-columns:1fr;grid-template-rows:auto auto;align-content:start;gap:22px;height:auto;min-height:100dvh;overflow:auto} #loginView .login-star{width:150%} #loginView .login-copy{grid-template-rows:auto auto;height:auto!important;position:relative!important;top:auto!important} #loginView .login-copy-logo{height:34px} #loginView .login-copy h1{font-size:30px} } @media (max-height:720px) and (min-width:981px){ #loginView{padding-block:28px} #loginView .login-panel{padding:28px} } /* ---------- 11. Início ---------- */ /* O Início (V47, formato BI) tem os estilos em modules/inicio/styles.css. */ /* Login: faixa da barra de rolagem na cor da página */ html:has(#loginView:not(.is-hidden)),html:has(#loginView:not(.is-hidden)) body{background:#0B1B30!important} /* ---------- 12. Menos cor decorativa: barras coloridas só onde indicam estado ---------- */ #appView .weekly-report-list{border-top:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--line)} #appView :is(.weekly-integrated-section,.weekly-challenge-integrated){border-top:1px solid var(--line)} /* Dia atual na rotina semanal: destaque destaque discreto, não bloco escuro */ #appView :is(.weekly-task-row.header,.weekly-challenge-row.header) .current-day{background:var(--orange-15)!important;color:var(--accent-text)!important;box-shadow:inset 0 -2px 0 var(--orange)} html[data-theme="dark"] #appView :is(.weekly-task-row.header,.weekly-challenge-row.header) .current-day{background:rgba(19,79,208,.16)!important;color:#608EF0!important} /* Indicações: valor alinhado à direita também no cabeçalho */ #appView .referrals-table th:nth-child(6){text-align:right} #appView .referrals-table td.referral-money{text-align:right} html[data-theme="dark"] #appView .sales-table td.col-total{color:var(--text-1)!important} /* ---------- 13. Dashboard: tudo na linha do título ---------- */ @media (min-width:901px){ #appView .dashboard-head{grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"title controls utility";align-items:end;gap:12px 16px} #appView .dashboard-primary-controls{grid-area:controls;padding:0;border:0;flex-wrap:nowrap;gap:10px} #appView .dashboard-utility-row{grid-area:utility} } /* O input fica por baixo do botão inteiro: invisível, mas é ele que guarda a data */ /* ---------- 14. Área de clique = área visível do botão ---------- */ /* Perfil: botão quadrado (cantos também clicáveis), avatar redondo dentro */ #appView .profile-trigger{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:transparent} #appView .profile-trigger:hover{box-shadow:none;background:var(--surface-2)} #appView .profile-trigger .avatar{width:36px;height:36px;pointer-events:none} /* Status da auditoria em Indicações: mesmo formato dos de Vendas (quadrado arredondado), clicável por inteiro */ #appView :is(.referral-audit-trigger,.referral-audit-static){width:36px;height:36px;border-radius:10px} #appView .referral-legend-item .referral-audit-static{width:24px;height:24px;border-radius:7px} /* Ícones e textos dentro de botões nunca "roubam" o clique */ #appView :is(button,.nav-item,.home-shortcut,.toolbar-action,.primary-action,.dash-date-btn) :is(svg,i,span,strong,small){pointer-events:none} #appView .referrals-table-scroll{scrollbar-gutter:auto} #appView .referrals-table td strong{font-size:13.5px} /* ---------- 15. Calendário de período (próprio do painel) ---------- */ #appView .range-calendar{position:relative;display:inline-flex;align-items:center;height:40px;border:1px solid var(--line);border-radius:10px;background:var(--surface)} #appView .range-calendar.is-open{border-color:var(--blue);box-shadow:var(--focus)} #appView .range-date-btn{display:inline-flex;align-items:center;border:0;border-radius:8px;background:transparent;color:var(--text-1);cursor:pointer} #appView .range-date-btn:hover{background:var(--surface-2)} #appView .range-date-btn>svg{width:17px;height:17px;color:var(--orange);flex:0 0 auto} #appView .range-date-text{display:grid;line-height:1.05;text-align:left} #appView .range-date-text small{font-family:var(--font-secondary);font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)} #appView .range-date-text strong{font-size:13.5px;font-weight:700;color:var(--text-1)} #appView .range-popover{position:absolute;top:calc(100% + 8px);right:0;z-index:60;width:300px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:var(--shadow-lg)} #appView .range-popover[hidden]{display:none} #appView .range-head{display:grid;grid-template-columns:32px 1fr 32px;align-items:center;gap:6px;margin-bottom:4px} #appView .range-head strong{text-align:center;font-size:14.5px;font-weight:700;color:var(--text-1)} #appView .range-nav{width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--text-1)} #appView .range-nav:hover{background:var(--surface-2)} #appView .range-nav svg{width:15px;height:15px} #appView .range-hint{margin:6px 0 10px;text-align:center;font-size:12.5px;color:var(--text-3)} #appView .range-hint b{color:var(--accent-text);font-weight:700} #appView .range-week,#appView .range-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px} #appView .range-week span{height:24px;display:grid;place-items:center;font-family:var(--font-secondary);font-size:10.5px;font-weight:600;letter-spacing:.06em;color:var(--text-3)} #appView .range-day{height:36px;display:grid;place-items:center;border:0;border-radius:8px;background:transparent;color:var(--text-1);font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums;cursor:pointer} #appView .range-day:hover{background:var(--surface-2)} #appView .range-day.is-out{color:var(--navy-40)} #appView .range-day.is-today{box-shadow:inset 0 0 0 1px var(--orange)} #appView .range-day.in-range{background:var(--blue-15);border-radius:0;color:var(--text-1)} #appView .range-day.is-from,#appView .range-day.is-to{background:var(--navy);color:#fff} #appView .range-day.is-from{border-radius:8px 0 0 8px} #appView .range-day.is-to{border-radius:0 8px 8px 0} #appView .range-day.is-from.is-to{border-radius:8px} #appView .range-day:focus-visible{outline:2px solid var(--blue);outline-offset:1px} #appView .range-foot{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)} #appView .range-foot button{flex:1;min-height:32px;padding:0 8px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--text-1);font-size:12.5px;font-weight:600;white-space:nowrap} #appView .range-foot button:hover{background:var(--surface-2);border-color:var(--line-strong)} html[data-theme="dark"] #appView .range-calendar{background:var(--surface-2);border-color:var(--line-strong)} html[data-theme="dark"] #appView .range-popover{background:var(--surface);border-color:var(--line-strong)} html[data-theme="dark"] #appView .range-day.in-range{background:rgba(62,153,221,.18)} html[data-theme="dark"] #appView .range-day.is-from,html[data-theme="dark"] #appView .range-day.is-to{background:var(--orange)} html[data-theme="dark"] #appView .range-day.is-out{color:#5B6B7D} html[data-theme="dark"] #appView :is(.range-nav,.range-foot button){background:var(--surface-2);border-color:var(--line-strong);color:var(--text-1)} html[data-theme="dark"] #appView .range-date-btn>svg{color:var(--accent-text)} @media (max-width:900px){#appView .range-calendar{width:100%;justify-content:space-between}#appView .range-date-btn{flex:1;justify-content:center}#appView .range-popover{left:0;right:0;width:auto}} /* Calendário: um botão só + limpar */ #appView .range-calendar{gap:0;padding:3px} #appView .range-date-btn{height:32px;padding:0 10px 0 10px;gap:9px} #appView .range-date-btn>svg.range-caret,#appView .range-caret{width:14px!important;height:14px!important;color:var(--text-3)!important;margin-left:2px;transition:transform .15s ease} #appView .range-calendar.is-open .range-caret{transform:rotate(180deg)} #appView .range-date-text strong{white-space:nowrap} #appView .range-clear{display:none;width:28px;height:28px;margin-left:2px;place-items:center;border:0;border-radius:7px;background:transparent;color:var(--text-3);cursor:pointer} #appView .range-clear:hover{background:var(--bad-bg);color:var(--bad-fg)} #appView .range-clear svg{width:14px;height:14px} #appView .range-calendar.is-custom .range-clear{display:grid} #appView .range-calendar.is-custom{border-color:var(--orange-40);background:var(--surface)} #appView .range-calendar.is-custom .range-date-text small{color:var(--accent-text)} html[data-theme="dark"] #appView .range-calendar.is-custom{border-color:rgba(19,79,208,.5)} @media (max-width:900px){#appView .range-date-btn{justify-content:flex-start}} #appView .range-day.is-solo{border-radius:8px} #loginView .login-first-row:has(> button[hidden]){display:none} /* Fluxos internos do login: um de cada vez, dentro do cartão */ #loginView [hidden]{display:none!important} #loginView .login-panel,#loginView .login-panel.mode-expanded{width:100%!important;max-width:none!important;margin:0} #loginView :is(.login-inline-flow,.login-inline-form){width:100%;max-width:100%;min-width:0} #loginView .login-inline-form{display:grid;gap:14px} #loginView .login-inline-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px} #loginView .login-inline-pair>*{min-width:0} #loginView .login-inline-actions{display:grid;grid-template-columns:auto 1fr;gap:10px} #loginView .login-inline-actions .login-secondary-button{padding:0 18px} #loginView.is-inline-flow{padding:48px clamp(32px,5vw,72px)!important;grid-template-columns:minmax(0,1fr) minmax(420px,520px)} @media (max-width:980px){#loginView.is-inline-flow{padding:24px 18px 36px!important;grid-template-columns:1fr}} @media (max-width:560px){#loginView .login-inline-pair{grid-template-columns:1fr}} #loginView .login-inline-pair>.field,#loginView .login-inline-pair .field-control{width:100%;min-width:0;margin:0} #loginView .login-inline-actions,html[data-theme="dark"] #loginView .login-inline-actions{position:static!important;margin:4px 0 0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;backdrop-filter:none!important} /* ---------- 16. Login V45.3: estrela visível à esquerda + celular estável ---------- */ /* Computador: a estrela sai de trás do cartão e ocupa o espaço livre embaixo da frase */ #loginView .login-star{width:min(52vw,760px)} #loginView .login-copy-meta{position:relative;z-index:1} /* Celular e tablet: largura travada, altura estável, nada escapa para os lados */ @media (max-width:980px){ html:has(#loginView:not(.is-hidden)),html:has(#loginView:not(.is-hidden)) body{overflow-x:hidden;overscroll-behavior:none;width:100%;max-width:100%} #loginView{position:relative;width:100%;max-width:100vw;min-height:100svh;height:auto;overflow-x:hidden;overflow-y:visible;touch-action:pan-y; grid-template-columns:minmax(0,1fr)!important;justify-items:stretch;padding:max(20px,env(safe-area-inset-top)) 16px max(28px,env(safe-area-inset-bottom))!important;gap:20px} /* Estrela no topo, atrás do logo e da frase (nunca atrás do cartão) */ #loginView .login-star{width:min(78vw,380px)} #loginView .login-copy{min-width:0} #loginView .login-copy-mid{gap:10px} #loginView .login-copy h1{font-size:clamp(26px,7.4vw,34px)} #loginView .login-shell{width:100%;max-width:520px;min-width:0;justify-self:center} #loginView .login-panel{width:100%;min-width:0;border-radius:20px;box-shadow:0 24px 60px rgba(0,0,0,.35)} #loginView .login-panel *{min-width:0} /* 16px nos campos: impede o zoom automático do iPhone ao tocar */ #loginView .field-control input,#loginView .field-control select,#loginView input,#loginView select{font-size:16px!important} #loginView .field-control,#loginView .primary-button,#loginView .login-secondary-button{height:50px} #loginView .login-links{flex-wrap:wrap;row-gap:8px} #loginView .login-inline-actions{grid-template-columns:auto 1fr} #loginView.is-inline-flow{min-height:100svh} } @media (max-width:360px){ #loginView{padding-inline:12px!important} #loginView .login-panel{padding:20px 14px} #loginView .login-inline-actions{grid-template-columns:1fr} } /* Linha Vendas · Metas · Comissões logo abaixo da frase; estrela livre no canto inferior */ #loginView .login-copy{grid-template-rows:auto 1fr} #loginView .login-copy-meta{margin-top:18px} #loginView .login-star{width:min(46vw,680px)} @media (max-height:760px) and (min-width:981px){#loginView .login-star{bottom:-26%}} @media (max-width:980px){ #loginView .login-copy-meta{display:none} #loginView .login-star{width:min(52vw,220px)} #loginView .login-star .n{fill-opacity:.09} #loginView .login-star .o{fill-opacity:.6} #loginView .login-copy h1{position:relative;z-index:1} } @media (max-width:360px){#loginView .login-links{flex-direction:column;align-items:flex-start}} /* ---------- 18. Minha conta (V46.1): cabe na tela sem rolagem ---------- Gaveta em coluna: cabeçalho, identidade (foto com botão de câmera), produção e, no rodapé, "Modo escuro" e "Sair" lado a lado. As medidas encolhem pela altura da tela. */ #appView .profile-drawer{display:flex;flex-direction:column;padding:16px 18px;overflow-y:auto;overscroll-behavior:contain} #appView .profile-drawer>*{flex:0 0 auto} #appView .profile-drawer-head{padding-bottom:12px} #appView .profile-drawer-head strong{font-size:18px} #appView .profile-drawer-head button{width:36px;height:36px;cursor:pointer} #appView .profile-photo-section{gap:14px;padding:14px 0;align-items:center} #appView .profile-avatar-wrap{position:relative;flex:0 0 auto} #appView .profile-photo-preview{width:64px;height:64px;flex-basis:64px;border-width:3px;font-size:18px} #appView .profile-identity>strong{font-size:16px} #appView .profile-context{margin-top:7px;gap:5px} #appView .profile-context>span{padding:4px 8px} #appView .profile-photo-remove{height:auto;min-height:28px;margin:6px 0 0 -6px;padding:0 6px;border:0;border-radius:8px;background:transparent;color:var(--bad-fg);font-size:12px;font-weight:600;cursor:pointer} #appView .profile-photo-remove:hover{background:var(--bad-bg)} #appView .profile-photo-remove svg{width:13px} #appView .profile-performance{padding:12px 0 10px} #appView .profile-section-heading{margin-bottom:4px} #appView .profile-section-heading strong{font-size:14.5px} #appView .profile-performance-row{grid-template-columns:32px minmax(0,1fr);gap:10px;padding:8px 0} #appView .profile-performance-icon{width:32px;height:32px;border-radius:9px} #appView .profile-performance-row strong{font-size:15px} #appView .profile-performance-row small{font-size:10.5px} #appView .profile-commission-total{margin-top:4px;padding:9px 0 0} #appView .profile-commission-total strong{font-size:15px} /* Rodapé: aparência + sair na mesma linha, sempre no fim da gaveta */ #appView .profile-drawer-foot{margin-top:auto;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding-top:12px;border-top:1px solid var(--line)} #appView .profile-drawer-foot .profile-logout-button{min-height:44px;padding:0 14px;font-size:13px;font-weight:700;cursor:pointer} #appView .profile-drawer-foot :is(button) :is(svg,span,strong,small,i){pointer-events:none} /* Telas baixas (notebook 768 px, celulares pequenos): tudo um pouco mais junto */ @media (max-height:760px){ #appView .profile-drawer{padding:14px 16px} #appView .profile-drawer-head{padding-bottom:10px} #appView .profile-photo-section{padding:11px 0} #appView .profile-photo-preview{width:56px;height:56px;flex-basis:56px} #appView .profile-performance{padding:10px 0 8px} #appView .profile-performance-row{padding:6px 0} #appView .profile-performance-row>div{gap:1px 8px} } @media (max-height:620px){ #appView .profile-drawer-head span{display:none} #appView .profile-performance-icon{display:none} #appView .profile-performance-row{grid-template-columns:1fr;padding:5px 0} #appView .profile-context>span{padding:3px 7px} #appView .profile-drawer-foot{padding-top:10px} } @media (max-width:560px){ #appView .profile-drawer{padding:14px} #appView .profile-identity>strong{font-size:15px} #appView .profile-performance-row>div>span{font-size:11px} } @media (max-width:360px){ #appView .profile-drawer-foot .profile-logout-button{padding:0 12px} #appView .profile-section-heading>small{font-size:10.5px} } /* ---------- 19. (removida na V48.2: a faixa de metas virou tabela, ver seção 24) ---------- */ /* ---------- 20. Transições (V46.3) — curtas, só onde ajudam a entender ---------- Usa translate/scale individuais para não brigar com transform já usado no layout, e preenchimento 'backwards' para nada ficar aplicado depois que a animação termina. Tudo dentro de prefers-reduced-motion: no-preference. */ @media (prefers-reduced-motion:no-preference){ /* 1. Troca de página: sem esmaecer o conteúdo (o painel não "pisca" ao abrir um setor ou atualizar dados) */ /* 2. Barras de meta e progresso crescem do início, só na entrada da página */ #appView .content.page-enter :is(.progress-track,.sg-track,.weekly-seller-progress,.weekly-manager-progress,.weekly-report-bar)>span{transform-origin:left center;animation:uf-bar-grow .7s cubic-bezier(.2,.7,.2,1) .08s backwards} /* Ao mudar filtro/vendedor no Dashboard, a barra desliza até o novo valor */ #appView :is(.progress-track)>span{transition:width .35s ease} /* 3. Calendário de período, filtros avançados e janelas */ #appView .range-popover:not([hidden]),#appView .advanced-filter-popover.is-open{animation:uf-pop-in .14s ease-out} .modal-backdrop{animation:uf-fade-in .16s ease-out} .modal-stage{animation:uf-pop-in .18s cubic-bezier(.2,.7,.2,1)} /* 4. Confirmação de salvamento */ #appView tr.is-flash-ok>td{animation:uf-flash-row 1.7s ease-out} #appView tr.is-flash-ok>td:first-child{animation-name:uf-flash-row-edge} #appView .is-flash-ok:not(tr){animation:uf-flash-ring 1.7s ease-out} } @keyframes uf-bar-grow{from{scale:0 1}to{scale:1 1}} @keyframes uf-pop-in{from{opacity:0;translate:0 -4px;scale:.98}to{opacity:1;translate:0 0;scale:1}} @keyframes uf-fade-in{from{opacity:0}to{opacity:1}} @keyframes uf-flash-row{0%,35%{background-color:var(--ok-bg)}100%{background-color:transparent}} @keyframes uf-flash-row-edge{0%,35%{background-color:var(--ok-bg);box-shadow:inset 3px 0 0 var(--green)}100%{background-color:transparent;box-shadow:inset 3px 0 0 transparent}} @keyframes uf-flash-ring{0%,35%{box-shadow:0 0 0 3px var(--ok-bg),0 0 0 4px var(--green)}100%{box-shadow:0 0 0 3px transparent,0 0 0 4px transparent}} /* ---------- 21. Minha conta: foto clicável e modo escuro só com ícone (V46.4) ---------- */ #appView button.profile-avatar-wrap{padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;transition:box-shadow .15s ease} #appView button.profile-avatar-wrap:hover .profile-photo-preview{box-shadow:0 0 0 3px var(--orange-15)} #appView button.profile-avatar-wrap:focus-visible{outline:none;box-shadow:var(--focus)} #appView button.profile-avatar-wrap .profile-photo-preview{pointer-events:none;transition:box-shadow .15s ease} #appView #removeProfilePhoto{display:none!important} /* Modo escuro: botão quadrado só com o ícone (lua / sol); "Sair" ocupa o resto da linha */ #appView .profile-drawer-foot{grid-template-columns:auto minmax(0,1fr)} #appView .profile-drawer-foot .profile-logout-button{width:100%} /* Janela da foto de perfil */ .profile-photo-modal{width:min(100%,360px);margin:0 auto} .profile-photo-modal .modal-head h3{margin:4px 0 0;font-size:17px;color:var(--text-1)} .profile-photo-modal-view{width:min(220px,60vw);aspect-ratio:1;margin:20px auto;display:grid;place-items:center;overflow:hidden;border-radius:50%;background:var(--surface-2);color:var(--text-1);font-family:var(--font-secondary);font-size:56px;font-weight:600;box-shadow:0 0 0 4px var(--surface),0 0 0 5px var(--line)} .profile-photo-modal-view img{width:100%;height:100%;object-fit:cover} .profile-photo-modal-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px} .profile-photo-modal-actions button{min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:10px;font-size:13.5px;font-weight:700;cursor:pointer} .profile-photo-modal-actions button svg{width:16px;height:16px;pointer-events:none} .profile-photo-modal-actions button span{pointer-events:none} .profile-photo-modal-remove{border:1px solid var(--line);background:var(--surface);color:var(--bad-fg)} .profile-photo-modal-remove:hover:not(:disabled){background:var(--bad-bg);border-color:transparent} .profile-photo-modal-remove:disabled{opacity:.45;cursor:not-allowed} .profile-photo-modal-change{border:0;background:var(--brand-navy);color:#fff} .profile-photo-modal-change:hover{background:#0C1E33} html[data-theme="dark"] .profile-photo-modal-change{background:var(--orange)} /* ---------- 22. Dashboard: comparação de períodos (V48) ---------- */ #appView .compare-select{position:relative;height:40px;display:inline-flex;align-items:center;gap:8px;padding:0 10px 0 11px;border:1px solid #BFD6EE;border-radius:10px;background:#F3F8FD;color:var(--text-1);cursor:pointer;white-space:nowrap} #appView .compare-select:hover{border-color:var(--blue)} #appView .compare-select:focus-within{box-shadow:var(--focus)} #appView .compare-select.is-off{border-color:var(--line);background:var(--surface)} #appView .compare-select>svg{width:16px;height:16px;flex:0 0 auto;color:var(--blue);pointer-events:none} #appView .compare-select .compare-caret{width:15px;height:15px;color:var(--text-3)} #appView .compare-select-text{display:grid;line-height:1.05;pointer-events:none} #appView .compare-select-text small{font-family:var(--font-secondary);font-size:9.5px;font-weight:600;letter-spacing:.1em;color:var(--text-3)} #appView .compare-value{font-size:13px;font-weight:700;color:var(--text-1)} #appView .compare-select select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;margin:0;font-size:16px} html[data-theme="dark"] #appView .compare-select{background:rgba(62,153,221,.12);border-color:rgba(122,184,230,.35)} html[data-theme="dark"] #appView .compare-select>svg{color:#7AB8E6} html[data-theme="dark"] #appView .compare-select select{color:#151517} /* Linha de variação abaixo de cada número */ #appView .cmp-line{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:11.5px;color:var(--text-3);white-space:nowrap;min-height:0} #appView .cmp-line:empty{display:none} #appView .cmp-chip{display:inline-flex;align-items:center;height:19px;padding:0 6px;border-radius:99px;font-size:11px;font-weight:700;letter-spacing:0} #appView .cmp-chip.up{background:var(--ok-bg);color:var(--ok-fg)} #appView .cmp-chip.down{background:var(--bad-bg);color:var(--bad-fg)} #appView .cmp-chip.neutral{background:var(--surface-2);color:var(--text-3)} #appView .cmp-prev{overflow:hidden;text-overflow:ellipsis} #appView .cmp-head{margin-left:auto;margin-right:10px;font-style:normal;font-size:11px;font-weight:600;opacity:.85} #appView .cmp-head:empty{display:none} /* Com comparação os blocos ganham uma linha: mais altura e rótulos legíveis */ #appView .content.has-compare .period-metric{min-height:80px;align-items:flex-start;padding-top:12px} #appView .period-metric>div>span{font-size:10px} @media (min-width:901px){#appView .dashboard-primary-controls .compare-select{flex:0 0 auto}} @media (max-width:900px){#appView .compare-select{width:100%}} /* ---------- 23. Dashboard do vendedor — "Tabela de metas" (V48) ---------- */ #appView .sg-card{min-width:0;padding:16px 18px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-sm)} #appView .sg-card-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:10px;flex-wrap:wrap} #appView .sg-card-head h3{margin:3px 0 0;font-size:16px;font-weight:700;color:var(--text-1)} /* Ritmo de hoje: mensagem + meta de hoje × feito hoje */ #appView .sg-today{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);margin-bottom:12px;overflow:hidden;border:1px solid var(--line);border-left:4px solid var(--orange);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-sm)} #appView .sg-today.mood-ahead{border-left-color:var(--green)} #appView .sg-today.mood-neutral{border-left-color:var(--blue)} #appView .sg-mood{display:grid;grid-template-columns:48px minmax(0,1fr);align-items:center;gap:14px;padding:14px 18px} #appView .sg-emoji{width:48px;height:48px;display:grid;place-items:center;border-radius:14px;background:var(--orange-15);font-size:26px} #appView .sg-today.mood-ahead .sg-emoji{background:var(--ok-bg)} #appView .sg-today.mood-neutral .sg-emoji{background:var(--info-bg)} #appView .sg-mood b{display:block;margin-top:3px;font-size:15px;color:var(--text-1)} #appView .sg-mood small{display:block;margin-top:3px;font-size:12.5px;color:var(--text-3)} #appView .sg-today-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-left:1px solid var(--line)} #appView .sg-today-grid>div{display:grid;align-content:center;gap:3px;padding:12px 14px;border-right:1px solid var(--line-soft)} #appView .sg-today-grid>div:last-child{border-right:0} #appView .sg-today-grid span{font-family:var(--font-secondary);font-size:10.5px;font-weight:600;letter-spacing:.1em;color:var(--text-3)} #appView .sg-today-grid strong{font-family:var(--font-secondary);font-size:18px;font-weight:500;color:var(--text-1)} #appView .sg-today-grid small{font-size:11.5px;color:var(--text-3)} #appView .sg-today-grid em{font-style:normal;font-weight:700;color:var(--accent-text)} /* Tabela de metas */ #appView .sg-legend{display:flex;gap:12px;flex-wrap:wrap;font-size:11.5px;color:var(--text-3)} #appView .sg-legend span{display:inline-flex;align-items:center;gap:5px} #appView .sg-legend i{display:inline-block;width:10px;height:10px;border-radius:3px} #appView .sg-legend i.real{background:var(--orange)} #appView .sg-legend i.proj{border:1.5px dashed var(--orange)} #appView .sg-legend i.exp{width:2px;height:12px;border-radius:1px;background:var(--text-1)} #appView .sg-table-wrap{overflow-x:auto} #appView .sg-table{width:100%;border-collapse:collapse;font-size:13px} #appView .sg-table th{padding:6px 10px;border-bottom:1px solid var(--line);font-family:var(--font-secondary);font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);text-align:left;white-space:nowrap} #appView .sg-table td{padding:12px 10px;border-bottom:1px solid var(--line-soft);color:var(--text-2);vertical-align:middle;font-variant-numeric:tabular-nums;white-space:nowrap} #appView .sg-table tr:last-child td{border-bottom:0} #appView .sg-table .r{text-align:right} #appView .sg-table .pos{color:var(--ok-fg);font-weight:700} #appView .sg-table .neg{color:var(--bad-fg);font-weight:700} #appView .sg-name{display:flex;align-items:center;gap:10px} #appView .sg-name b{font-size:14px;color:var(--text-1)} #appView .sg-icon{width:32px;height:32px;display:grid;place-items:center;border-radius:9px;background:var(--surface-2);color:var(--text-1)} #appView .sg-icon svg{width:16px;height:16px} #appView .sg-progress-cell{width:34%;min-width:220px} #appView .sg-progress{display:grid;gap:6px} #appView .sg-progress-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px} #appView .sg-progress-top b{font-family:var(--font-secondary);font-size:15px;font-weight:500;color:var(--text-1)} #appView .sg-progress-top b small,#appView .sg-progress-top>small{font-family:var(--font-primary);font-size:12px;font-weight:400;color:var(--text-3)} #appView .sg-track{position:relative;height:9px;border-radius:99px;background:var(--line)} #appView .sg-track>i{position:absolute;inset:0 auto 0 0;border:1.5px dashed var(--orange);border-radius:99px;opacity:.85} #appView .sg-track>span{position:absolute;inset:0 auto 0 0;border-radius:99px;background:var(--orange)} #appView .sg-track>em{position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;border-radius:1px;background:var(--text-1)} #appView .sg-proj{display:inline-grid;justify-items:end} #appView .sg-proj b{color:var(--text-1)} #appView .sg-proj small{font-size:11.5px;color:var(--text-3)} #appView .sg-table .cmp-line,#appView .sg-table td .cmp-chip{display:inline-flex} #appView .sg-table td[data-label^="vs."]{display:table-cell} #appView .sg-table td[data-label^="vs."] .cmp-prev{display:none} #appView .sg-facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px} #appView .sg-facts>span{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 11px;border-radius:9px;background:var(--surface-2);font-size:12.5px;color:var(--text-3)} #appView .sg-facts b{font-size:13.5px;color:var(--text-1)} #appView .sg-pace svg{width:15px;height:15px} #appView .sg-pace.warn{background:var(--warn-bg)!important;color:var(--warn-fg)!important}#appView .sg-pace.warn b{color:var(--warn-fg)} #appView .sg-pace.ok{background:var(--ok-bg)!important;color:var(--ok-fg)!important}#appView .sg-pace.ok b{color:var(--ok-fg)} #appView .sg-pace.neutral{background:var(--info-bg)!important;color:var(--info-fg)!important}#appView .sg-pace.neutral b{color:var(--info-fg)} /* Gráfico + mix */ #appView .sg-charts{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(280px,1fr);gap:12px;margin-top:12px} #appView .sg-charts .chart-panel{margin:0} #appView .sg-paybar{display:flex;gap:2px;height:20px;margin:4px 0 12px} #appView .sg-paybar span{display:block;height:100%;min-width:3px} #appView .sg-paybar span:first-child{border-radius:4px 0 0 4px}#appView .sg-paybar span:last-child{border-radius:0 4px 4px 0}#appView .sg-paybar span:only-child{border-radius:4px} #appView :is(.sg-paybar span,.sg-paylist i).p1{background:var(--bi-p1,#2F6DB0)} #appView :is(.sg-paybar span,.sg-paylist i).p2{background:var(--bi-p2,#134FD0)} #appView :is(.sg-paybar span,.sg-paylist i).p3{background:var(--bi-p3,#62B0E8)} #appView :is(.sg-paybar span,.sg-paylist i).p0{background:var(--bi-p0,#9AA6B4)} #appView .sg-paylist{display:grid;gap:9px} #appView .sg-paylist>div{display:grid;grid-template-columns:10px minmax(0,1fr) auto 40px;align-items:center;gap:4px 8px;font-size:13px;color:var(--text-2)} #appView .sg-paylist i{width:10px;height:10px;border-radius:3px} #appView .sg-paylist b{color:var(--text-1);font-variant-numeric:tabular-nums} #appView .sg-paylist em{font-style:normal;text-align:right;color:var(--text-3)} #appView .sg-paylist small{grid-column:2/-1;display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--text-3)} #appView .sg-empty{margin:4px 0 10px;font-size:13px;color:var(--text-3)} @media (max-width:1180px){#appView .sg-charts{grid-template-columns:1fr}#appView .sg-today{grid-template-columns:1fr}#appView .sg-today-grid{border-left:0;border-top:1px solid var(--line)}} /* Celular: cada meta vira um cartão com rótulos (sem rolagem lateral) */ @media (max-width:760px){ #appView .sg-card{padding:14px} #appView .sg-today-grid{grid-template-columns:repeat(2,minmax(0,1fr))} #appView .sg-today-grid>div:nth-child(2n){border-right:0} #appView .sg-today-grid>div:nth-child(-n+2){border-bottom:1px solid var(--line-soft)} #appView .sg-table thead{display:none} #appView .sg-table,#appView .sg-table tbody,#appView .sg-table tr{display:block;width:100%} #appView .sg-table tr{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;padding:12px 0;border-bottom:1px solid var(--line)} #appView .sg-table tr:last-child{border-bottom:0} #appView .sg-table td{display:grid!important;gap:2px;padding:0;border:0;white-space:normal;text-align:left!important} #appView .sg-table td::before{content:attr(data-label);font-family:var(--font-secondary);font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)} #appView .sg-table td:first-child,#appView .sg-table td.sg-progress-cell{grid-column:1/-1;min-width:0;width:auto} #appView .sg-table td:first-child::before,#appView .sg-table td.sg-progress-cell::before{display:none} #appView .sg-proj{justify-items:start} #appView .sg-table td>.cmp-chip{justify-self:start} #appView .sg-facts>span{flex:1 1 calc(50% - 8px)} } /* ---------- 24. Dashboard do gestor: metas em tabela (V48.1) ---------- */ #appView .goals-edit-link{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 8px;border:0;border-radius:8px;background:transparent;color:var(--blue);font-size:12.5px;font-weight:600;cursor:pointer} #appView .goals-edit-link:hover{background:var(--surface-2)} #appView .goals-edit-link svg{width:14px;height:14px;pointer-events:none} html[data-theme="dark"] #appView .goals-edit-link{color:#7AB8E6} #appView .dash-goals{margin-bottom:13px} #appView .dash-goals-tools{display:flex;align-items:center;gap:14px;flex-wrap:wrap} #appView .dash-goals .goals-edit-link{margin:0} /* ---------- 25. Vendas por estado (mapa) e dica flutuante — Dashboard (V50) ---------- */ #appView{ --bi-s0:#EEF0F3;--bi-s1:#DCEBF8;--bi-s2:#A9CDEE;--bi-s3:#6FAEE3;--bi-s4:#3E8ED3;--bi-s5:#1F5F9E;--bi-s-ink-dark:#122945; --bi-map-stroke:#FFFFFF;} html[data-theme="dark"] #appView{ --bi-s0:#2F3035;--bi-s1:#393A40;--bi-s2:#4F5259;--bi-s3:#3E8ED3;--bi-s4:#6FAEE3;--bi-s5:#A9D3F5;--bi-s-ink-dark:#151517; --bi-map-stroke:#26272A;} #appView .bi-geo{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:14px;align-items:center} #appView .bi-map{display:block;width:100%;height:auto;max-height:214px} #appView .bi-uf{stroke:var(--bi-map-stroke);stroke-width:1.2;stroke-linejoin:round;cursor:default;transition:opacity .12s ease} #appView .bi-uf:hover{opacity:.8} #appView :is(.bi-uf,.bi-uf-tag,.bi-map-legend i).l0{fill:var(--bi-s0);background:var(--bi-s0)} #appView :is(.bi-uf,.bi-uf-tag,.bi-map-legend i).l1{fill:var(--bi-s1);background:var(--bi-s1)} #appView :is(.bi-uf,.bi-uf-tag,.bi-map-legend i).l2{fill:var(--bi-s2);background:var(--bi-s2)} #appView :is(.bi-uf,.bi-uf-tag,.bi-map-legend i).l3{fill:var(--bi-s3);background:var(--bi-s3)} #appView :is(.bi-uf,.bi-uf-tag,.bi-map-legend i).l4{fill:var(--bi-s4);background:var(--bi-s4)} #appView :is(.bi-uf,.bi-uf-tag,.bi-map-legend i).l5{fill:var(--bi-s5);background:var(--bi-s5)} #appView .bi-map-legend{display:flex;align-items:center;flex-wrap:wrap;gap:3px;margin-top:4px;font-size:11px;color:var(--text-3)} #appView .bi-map-legend span{margin:0 3px} #appView .bi-map-legend i{display:inline-block;width:14px;height:10px;border-radius:2px} #appView .bi-map-legend i.l0{box-shadow:inset 0 0 0 1px var(--line)} #appView .bi-nosale{display:inline-flex;align-items:center;gap:4px;margin-left:6px!important;white-space:nowrap} #appView .bi-states{width:100%;border-collapse:collapse;font-size:12.5px} #appView .bi-states th{padding:0 4px 5px;border-bottom:1px solid var(--line-soft);font-family:var(--font-secondary);font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);text-align:left} #appView .bi-states td{padding:5px 4px;color:var(--text-2);vertical-align:middle;font-variant-numeric:tabular-nums} #appView .bi-states td:first-child{width:26px;padding-left:0} #appView .bi-states .r{text-align:right;white-space:nowrap} #appView .bi-states .strong{color:var(--text-1);font-weight:700} #appView .bi-states .muted{color:var(--text-3)} #appView .bi-uf-tag{display:inline-grid;place-items:center;width:24px;height:20px;border-radius:5px;font-size:10.5px;font-weight:700;color:var(--bi-s-ink-dark)} #appView .bi-uf-tag:is(.l4,.l5){color:#fff} html[data-theme="dark"] #appView .bi-uf-tag:is(.l1,.l2,.l3){color:#fff} html[data-theme="dark"] #appView .bi-uf-tag:is(.l4,.l5){color:var(--bi-s-ink-dark)} #appView .bi-state-name{display:block;max-width:100%;overflow:hidden;color:var(--text-1);font-weight:600;white-space:nowrap;text-overflow:ellipsis} #appView .bi-mini{display:block;height:5px;margin-top:3px} #appView .bi-mini i{display:block;height:100%;border-radius:0 3px 3px 0;background:var(--bi-s4)} #appView .bi-more{margin:6px 0 0;font-size:12px;color:var(--text-3)} #appView .bi-credit{margin:10px 0 0;font-size:10.5px;color:var(--text-3);text-align:right} .bi-tip{position:fixed;z-index:200;max-width:280px;padding:7px 10px;border-radius:8px;background:#122945;color:#fff;font:600 12px/1.35 var(--font-primary,system-ui);box-shadow:0 8px 24px rgba(0,0,0,.18);pointer-events:none} html[data-theme="dark"] .bi-tip{background:#EDEDED;color:#151517} @media (max-width:1180px){#appView .bi-geo{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr)}} @media (max-width:700px){#appView .bi-geo{grid-template-columns:1fr}#appView .bi-geo-map{max-width:300px;width:100%;margin:0 auto}} /* Minha conta — aviso para contas antigas cadastrarem um e-mail real (V53). */ .profile-email-notice{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;margin:0 18px 14px;padding:11px 12px;border:1px solid rgba(19,79,208,.28);border-radius:12px;background:rgba(19,79,208,.06)} .profile-email-notice[hidden]{display:none} .profile-email-notice>svg{width:18px;height:18px;color:#134FD0} .profile-email-notice strong{display:block;color:var(--text-1);font-size:13px} .profile-email-notice span{display:block;color:var(--text-2);font-size:12px;line-height:1.35} .profile-email-notice button{height:32px;padding:0 12px;border-radius:8px;background:#134FD0;color:#fff;font-size:12.5px;font-weight:700} #accountPendingView .login-text-action{display:block;margin:12px auto 0} #accountPendingView #pendingCheck{display:inline-flex;align-items:center;justify-content:center;gap:7px} /* ---------- 17. Login V53: sem rolagem quando o conteúdo cabe na tela ---------- */ /* A estrela é só decoração: fica presa à janela e não aumenta a área rolável. */ /* Cadastro e confirmação de e-mail: mesma altura da tela de login, rolando só se o formulário não couber. */ @media (min-width:981px){ #loginView.is-inline-flow{box-sizing:border-box;height:100dvh;min-height:0;align-items:center;overflow-x:hidden;overflow-y:auto} #loginView.is-inline-flow .login-shell{min-height:0;height:auto;padding:0} #loginView.is-inline-flow .login-copy{position:relative;top:auto;height:100%} } @media (min-width:981px) and (max-height:760px){ #loginView.is-inline-flow{padding-block:20px!important} #loginView.is-inline-flow .login-panel{padding:24px 28px} } /* Celular: a altura mínima ficava no cartão e no fundo ao mesmo tempo, sobrando espaço vazio para rolar. */ @media (max-width:980px){ #loginView{box-sizing:border-box} #loginView .login-shell,#loginView.is-inline-flow .login-shell,#loginView.is-first-access .login-shell{min-height:0!important;height:auto!important;padding:0!important} } /* Telas de celular mais baixas: um pouco mais compacto para caber sem rolar. */ @media (max-width:980px){ #loginView .login-links.login-first-row{flex-direction:row;align-items:center;flex-wrap:nowrap;white-space:nowrap;gap:8px} #loginView.is-first-access .login-inline-form{gap:6px} #loginView.is-first-access .field-control{height:46px} #loginView.is-first-access .login-inline-actions .primary-button,#loginView.is-first-access .login-secondary-button{height:46px} } @media (max-width:980px) and (max-height:760px){ #loginView{gap:14px} #loginView .login-copy{gap:6px} #loginView .login-copy h1{font-size:24px} #loginView .field-control,#loginView .primary-button,#loginView .login-secondary-button{height:46px} } /* O painel reserva espaço para a barra de rolagem; no login isso aparecia como uma faixa escura na direita. */ html:has(#loginView:not(.is-hidden)){scrollbar-gutter:auto} /* Caixas de seleção no mesmo tema do cartão branco (a lista vinha azul-escura do login antigo). */ #loginView .field-control select:focus{outline:0} @supports (appearance:base-select){ #loginView .field-control select,#loginView .field-control select::picker(select){appearance:base-select} #loginView .field-control select{display:flex;align-items:center;width:100%;height:100%;padding:0;border:0;background:transparent;font:inherit;cursor:pointer} #loginView .field-control select::picker-icon{transition:transform .15s ease} #loginView .field-control select:open::picker-icon{transform:rotate(180deg)} #loginView .field-control select::picker(select){padding:6px;border-radius:12px;max-height:min(320px,60vh)} #loginView .field-control select option{min-height:38px;padding:8px 10px;border-radius:8px;font-size:14.5px;display:flex;align-items:center} #loginView .field-control select option::checkmark{display:none} #loginView .field-control select option:checked{font-weight:600} #loginView .field-control select option[value=""]{display:none} /* A lista abre com a largura da caixa inteira (com o ícone), não só da área do texto. */ #loginView .field-control:has(select){anchor-name:--login-select-field} #loginView .field-control select::picker(select){position-anchor:--login-select-field;top:anchor(bottom);left:anchor(left);width:anchor-size(width);margin-top:6px} } /* ---------- 18. Login V54 (proposta D): tudo escuro, cartão à direita, cargo reconhecido ao entrar ---------- */ #loginView{background:radial-gradient(1000px 640px at 28% 62%,#10243F 0%,#08172A 62%)!important;background-image:radial-gradient(1000px 640px at 28% 62%,#10243F 0%,#08172A 62%)!important} /* Sem escolha de cargo e sem cartão de identificação: o perfil vem do servidor depois da senha. */ #loginView #loginRoleSwitch{display:none!important} /* Coluna da marca: frase e lista; a logo fica dentro do cartão. */ #loginView .login-copy{flex-direction:column;justify-content:center} #loginView .login-copy-logo{display:none} #loginView .login-copy h1{font-weight:600;font-size:clamp(38px,3.9vw,56px);line-height:1.03;letter-spacing:-.02em} #loginView .login-copy-list{display:grid;gap:12px;margin-top:26px} #loginView .login-copy-list li{display:flex;align-items:center;gap:12px;color:#D7E0EB;font-size:15.5px} #loginView .login-copy-list li::before{content:"";width:8px;height:8px;border-radius:50%;background:#447AEE;flex:none} /* Cartão escuro */ #loginView .login-panel{padding:40px;border:1px solid rgba(255,255,255,.1);border-radius:24px;background:#0F2440;color:#C9D4E2;box-shadow:0 30px 70px rgba(0,0,0,.45);color-scheme:dark} #loginView .login-panel,#loginView .login-panel *{--text-1:#FFFFFF;--text-2:#C9D4E2;--text-3:#A9B8CB;--line:#2A4567;--line-strong:#35537A;--surface:#132C4B;--surface-2:#15304F} #loginView .login-inline-head h2{color:#FFFFFF} #loginView .login-inline-head p,#loginView .login-inline-note{color:#A9B8CB} #loginView .login-inline-head>span{color:#6A95F1} #loginView .field>span{color:#C9D4E2;font-family:inherit;font-size:13px;font-weight:600;letter-spacing:0;text-transform:none} #loginView .field-control{border:1px solid #2A4567;background:#132C4B} #loginView .field-control:focus-within{border-color:#447AEE;background:#132C4B;box-shadow:0 0 0 3px rgba(68,122,238,.18)} #loginView .field-control svg,#loginView .password-toggle{color:#8FA3BA} #loginView .field-control input,#loginView .field-control select{color:#FFFFFF} #loginView .field-control input::placeholder{color:#7F93AA} #loginView .field-control input:-webkit-autofill{-webkit-text-fill-color:#FFFFFF;-webkit-box-shadow:0 0 0 40px #132C4B inset;caret-color:#FFFFFF} #loginView .primary-button{background:#2563EB;color:#FFFFFF} #loginView .primary-button:hover{background:#1040A8} #loginView .login-secondary-button{border:1px solid #35537A;background:transparent;color:#E6EDF5} #loginView .login-secondary-button:hover{background:#15304F;color:#FFFFFF} #loginView .login-error{color:#FF8F8F} #loginView .login-links{color:#A9B8CB} #loginView .login-text-action,#loginView .login-first-access{color:#6A95F1!important} #loginView .login-text-action:hover,#loginView .login-first-access:hover{color:#92B2F5!important} #loginView .login-first-row{justify-content:center;margin-top:4px} #loginView .login-inline-note svg{color:#6A95F1} /* Listas de seleção no tema escuro do cartão */ #loginView .field-control select option,#loginView .field-control select optgroup{background:#132C4B;color:#FFFFFF} @supports (appearance:base-select){ #loginView .field-control select{color:#FFFFFF} #loginView .field-control select::picker-icon{color:#8FA3BA} #loginView .field-control select::picker(select){border:1px solid #2A4567;background:#132C4B;box-shadow:0 18px 40px rgba(0,0,0,.45)} #loginView .field-control select option{color:#E6EDF5} #loginView .field-control select option:hover,#loginView .field-control select option:focus-visible{background:#1B3A5F} #loginView .field-control select option:checked{background:rgba(68,122,238,.16);color:#92B2F5} } /* Celular: frase curta em cima, cartão embaixo */ @media (max-width:980px){ #loginView .login-copy{display:grid;gap:8px} #loginView .login-copy h1{font-size:clamp(26px,7.4vw,34px)} #loginView .login-copy-list{display:none} #loginView .login-panel{padding:24px 20px} } #loginView .login-panel .field>span{color:#C9D4E2!important;font-size:13px!important;font-weight:600;letter-spacing:0!important} @media (max-width:980px){#loginView:not(.is-inline-flow){align-content:center}} /* Estrela inteira à vista: no computador fica embaixo da frase, alinhada à margem; no celular, no canto superior. */ @media (min-width:981px){ #loginView .login-star{left:clamp(32px,5vw,72px);width:min(34vw,44vh)} } @media (min-width:981px) and (max-height:720px){ #loginView .login-copy{padding-top:4vh} #loginView .login-copy-list{margin-top:18px;gap:8px} } @media (max-width:980px){ #loginView .login-star{left:auto;right:16px;top:14px;bottom:auto;width:min(26vw,104px);transform:none} #loginView .login-copy h1{max-width:calc(100% - 96px)} } /* V54 — composição aprovada no canvas: estrela grande e inteira atrás da frase, campos sem ícones. */ @media (min-width:981px){ #loginView .login-star{left:-2.6vw;right:auto;top:auto;bottom:5.3vh;width:min(52.7vw,93.75vh);transform:none} #loginView .login-copy{justify-content:center;padding-top:0;padding-bottom:40px} } /* ---------- 19. Login V55: entrada em duas etapas, estilo Windows (proposta E) ---------- */ .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} #loginView:not(.is-hidden){display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:0;padding:48px 24px!important; background:radial-gradient(900px 620px at 50% 46%,#142B49 0%,#08172A 66%)!important;background-image:radial-gradient(900px 620px at 50% 46%,#142B49 0%,#08172A 66%)!important} #loginView .login-copy{display:none!important} #loginView .login-star{position:fixed;left:50%!important;top:50%!important;right:auto!important;bottom:auto!important;width:min(66vw,117vh)!important;transform:translate(-50%,-50%)!important} #loginView .login-star .n{fill-opacity:.04} #loginView .login-star .o{fill-opacity:.22} #loginView .login-corner-logo{position:fixed;left:48px;top:40px;width:140px;height:auto;z-index:2} #loginView .login-corner-label{position:fixed;left:48px;bottom:36px;z-index:2;color:#447AEE;font-size:13px;font-weight:700;letter-spacing:.16em} #loginView .login-other-account{position:fixed;left:48px;bottom:30px;z-index:3;display:flex;align-items:center;gap:12px;padding:10px 16px 10px 10px;border:0;border-radius:12px;background:rgba(255,255,255,.06);color:#E6EDF5;font:inherit;font-size:14px;font-weight:600;cursor:pointer} #loginView .login-other-account:hover{background:rgba(255,255,255,.1)} #loginView .login-other-account[hidden]{display:none} #loginView .login-other-account>span{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#15304F;color:#A9B8CB} #loginView .login-other-account svg{width:18px;height:18px} #loginView.is-password-step .login-corner-label,#loginView.is-inline-flow .login-other-account,#loginView.is-inline-flow .login-corner-label{display:none} /* Coluna central sem cartão */ #loginView .login-shell{width:min(360px,100%);max-width:none} #loginView:not(.is-inline-flow) .login-panel{padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;text-align:center} #loginView .login-who{display:flex;flex-direction:column;align-items:center;gap:6px;margin:0 0 22px} #loginView .login-who[hidden]{display:none} #loginView .login-who-avatar{width:168px;height:168px;margin-bottom:14px;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:#15304F;box-shadow:0 0 0 1px rgba(255,255,255,.12);color:#FFFFFF;font-size:56px;font-weight:600;letter-spacing:.02em;transition:box-shadow .2s ease} #loginView .login-who-avatar svg{width:78px;height:78px;color:#8FA3BA;stroke-width:1.4} #loginView .login-who-avatar.is-known{background:linear-gradient(150deg,#2A4F7C,#15304F);box-shadow:0 0 0 4px #08172A,0 0 0 7px #1248BD} #loginView .login-who-avatar img{width:100%;height:100%;object-fit:cover} #loginView .login-who-name{margin:0;color:#FFFFFF;font-size:30px;font-weight:600;letter-spacing:-.01em;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #loginView .login-who-meta{margin:0;color:#A9B8CB;font-size:14px} #loginView .login-who-meta[hidden]{display:none} #loginView .login-form-windows{display:block} #loginView .login-step{display:flex;flex-direction:column;align-items:center;gap:14px} #loginView .login-step[hidden]{display:none} #loginView .login-pill{width:100%;box-sizing:border-box;display:flex;align-items:center;gap:4px;height:50px;padding:0 6px 0 16px;border:1px solid #35537A;border-radius:12px;background:rgba(19,44,75,.85);transition:border-color .15s ease,box-shadow .15s ease} #loginView .login-pill:focus-within{border-color:#447AEE;box-shadow:0 0 0 3px rgba(68,122,238,.18)} #loginView .login-pill input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;color:#FFFFFF;font:inherit;font-size:15.5px} #loginView .login-pill input::placeholder{color:#8FA3BA} #loginView .login-pill input:-webkit-autofill{-webkit-text-fill-color:#FFFFFF;-webkit-box-shadow:0 0 0 40px #132C4B inset;caret-color:#FFFFFF} #loginView .login-pill-go{flex:none;width:38px;height:38px;display:grid;place-items:center;padding:0;border:0;border-radius:9px;background:#1248BD;color:#FFFFFF;cursor:pointer} #loginView .login-pill-go:hover{background:#1040A8} #loginView .login-pill-go:disabled{opacity:.7;cursor:progress} #loginView .login-pill-go svg{width:18px;height:18px;stroke-width:2.2} #loginView .login-pill .password-toggle{flex:none;width:36px;height:36px;display:grid;place-items:center;padding:0;border:0;background:transparent;color:#8FA3BA;cursor:pointer} #loginView .login-pill .password-toggle svg{width:18px;height:18px} #loginView .login-submit-spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.35);border-top-color:#FFFFFF;border-radius:50%;animation:spin .8s linear infinite} #loginView .login-step .login-error{text-align:center} #loginView .login-step .login-first-row{justify-content:center;margin-top:6px} #loginView .login-step .login-text-action{margin-top:2px!important;font-size:14px!important} /* Cadastro, confirmação de e-mail e troca de senha: cartão escuro centralizado */ #loginView.is-inline-flow{justify-content:center;overflow-y:auto} #loginView.is-inline-flow .login-shell{width:min(520px,100%)} #loginView.is-inline-flow .login-panel{text-align:left} @media (max-width:980px){ #loginView{padding:96px 16px 88px!important;justify-content:center} #loginView .login-star{width:min(130vw,80vh)!important} #loginView .login-corner-logo{left:16px;top:20px;width:112px} #loginView .login-corner-label{left:16px;bottom:20px;font-size:11px} #loginView .login-other-account{left:50%;bottom:16px;transform:translateX(-50%);white-space:nowrap} #loginView .login-who-avatar{width:128px;height:128px;font-size:44px} #loginView .login-who-avatar svg{width:60px;height:60px} #loginView .login-who-name{font-size:26px} #loginView.is-inline-flow{padding:72px 14px 24px!important;justify-content:flex-start} } @media (max-height:640px){ #loginView .login-who-avatar{width:112px;height:112px;margin-bottom:8px;font-size:38px} #loginView .login-who{margin-bottom:16px} } /* ---------- 20. Barra do topo: modo escuro, cantos ao rolar e seta "voltar ao topo" ---------- */ #appView .topbar-theme-toggle{flex:0 0 auto;width:40px;height:40px;display:grid;place-items:center;margin-left:auto;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--text-2);cursor:pointer;transition:background .16s,color .16s,border-color .16s} #appView .topbar-theme-toggle:hover{color:var(--text-1);border-color:var(--line-strong)} #appView .topbar-theme-toggle:focus-visible{outline:2px solid var(--orange);outline-offset:2px} #appView .topbar-theme-toggle svg{width:18px;height:18px} #appView .global-top-controls>.topbar-theme-toggle{margin-left:auto!important} #appView .global-top-controls>.topbar-theme-toggle+.profile-trigger{margin-left:8px!important} html[data-theme="dark"] #appView .topbar-theme-toggle{color:#85A8F4} /* Barra do topo: cantos de baixo sempre arredondados. */ #appView .global-top-controls{transition:border-radius .24s ease,box-shadow .24s ease,background .24s ease} #appView .global-top-controls,#appView .global-top-controls.is-scrolled{border-radius:0 0 18px 18px!important} @media (max-width:900px){ #appView .global-top-controls.is-scrolled{top:0!important;left:0!important;right:0!important;border-top:0!important} } /* Seta discreta no canto: aparece ao descer a página e volta ao topo suavemente. */ .scroll-top-button{position:fixed;right:max(22px,env(safe-area-inset-right));bottom:max(24px,env(safe-area-inset-bottom));z-index:47;width:44px;height:44px;display:grid;place-items:center;padding:0;border:0;border-radius:50%; background:var(--orange,#2563EB);color:var(--on-accent,#fff);box-shadow:0 10px 24px rgba(56,105,239,.32);cursor:pointer; opacity:0;transform:translateY(12px) scale(.9);pointer-events:none;transition:opacity .22s ease,transform .22s ease,background .16s ease} .scroll-top-button.is-visible{opacity:1;transform:none;pointer-events:auto} .scroll-top-button:hover{background:#1040A8} .scroll-top-button:focus-visible{outline:3px solid rgba(18,72,189,.35);outline-offset:3px} .scroll-top-button svg{width:20px;height:20px;stroke-width:2.4} @media (max-width:900px){.scroll-top-button{right:14px;bottom:calc(88px + env(safe-area-inset-bottom));width:40px;height:40px}} @media (prefers-reduced-motion:reduce){.scroll-top-button,#appView .global-top-controls{transition:none}} /* ---------- 21. Cores de situação (projeção × meta) ---------- verde = no ritmo · amarelo = atenção · vermelho = abaixo. Usadas no Início e nos dashboards. */ #appView{--tone-good:#15803D;--tone-warn:#B45309;--tone-bad:#DC2626;--tone-good-fill:#16A34A;--tone-warn-fill:#EAB308;--tone-bad-fill:#EF4444} html[data-theme="dark"] #appView{--tone-good:#22C55E;--tone-warn:#FACC15;--tone-bad:#F87171;--tone-good-fill:#22C55E;--tone-warn-fill:#FACC15;--tone-bad-fill:#F87171} #appView .tone-good{--tone:var(--tone-good);--tone-fill:var(--tone-good-fill)} #appView .tone-warn{--tone:var(--tone-warn);--tone-fill:var(--tone-warn-fill)} #appView .tone-bad{--tone:var(--tone-bad);--tone-fill:var(--tone-bad-fill)} /* Tabela de metas: projeção, % e barra na cor da situação */ #appView .sg-proj:is(.tone-good,.tone-warn,.tone-bad) b,#appView .sg-proj:is(.tone-good,.tone-warn,.tone-bad) small{color:var(--tone)} #appView .sg-proj:is(.tone-good,.tone-warn,.tone-bad) small{font-weight:700} #appView tr:is(.tone-good,.tone-warn,.tone-bad) .sg-track>span{background:var(--tone-fill,var(--tone))} #appView tr:is(.tone-good,.tone-warn,.tone-bad) .sg-progress-top>small{color:var(--tone);font-weight:700} #appView tr:is(.tone-good,.tone-warn,.tone-bad) .sg-name .sg-icon{box-shadow:inset 3px 0 0 var(--tone)} /* Blocos de faturado do Dashboard: barra e % da meta na cor da situação */ #appView .period-hero-goal:is(.tone-good,.tone-warn,.tone-bad) .hero-track>span{background:var(--tone-fill,var(--tone))} #appView .period-hero-goal:is(.tone-good,.tone-warn,.tone-bad) .hero-goal-top b{color:var(--tone)} #appView .sg-pace.bad{background:var(--bad-bg)!important;color:var(--bad-fg)!important}#appView .sg-pace.bad b{color:var(--bad-fg)} /* ---------- 22. Modo escuro: botões secundários com contraste ---------- No escuro, o botão secundário ficava da mesma cor do fundo. Agora ele tem um fundo um pouco mais claro, borda visível e ícone em destaque, para não se perder na página. */ html[data-theme="dark"] #appView :is(.toolbar-action,.secondary-action), html[data-theme="dark"] #modalHost :is(.toolbar-action,.secondary-action){ background:#303136!important;border-color:rgba(191,224,247,.26)!important;color:#F2F6FA!important} html[data-theme="dark"] #appView :is(.toolbar-action,.secondary-action):hover, html[data-theme="dark"] #modalHost :is(.toolbar-action,.secondary-action):hover{background:#3F4147!important;border-color:rgba(191,224,247,.42)!important} html[data-theme="dark"] #appView :is(.toolbar-action,.secondary-action) svg, html[data-theme="dark"] #modalHost :is(.toolbar-action,.secondary-action) svg{color:#6F98F2} html[data-theme="dark"] #modalHost :is(.primary-action,.navy-action){background:var(--orange)!important;border-color:var(--orange)!important;color:var(--on-accent)!important;background-image:var(--accent-grad)} /* ---------- 23. Caixas de seleção no tema do painel (claro e escuro) ---------- Fechada: mesma borda, raio e cores dos outros campos, com a seta do painel. Aberta: nos navegadores que permitem (Chrome e Edge recentes) a lista também segue o tema; nos outros, a lista é a do sistema, mas já nas cores do tema. */ :is(#appView,#modalHost) select{color-scheme:light} html[data-theme="dark"] :is(#appView,#modalHost) select{color-scheme:dark} :is(#appView,#modalHost) select:not(.sales-column-filter>select){ -webkit-appearance:none;appearance:none;min-height:40px;padding:0 38px 0 12px;border:1px solid var(--line);border-radius:10px; background-color:var(--surface);color:var(--text-1);font-family:var(--font-primary);font-size:13.5px;cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237D839B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 12px center;background-size:16px;transition:border-color .15s,box-shadow .15s} :is(#appView,#modalHost) select:not(.sales-column-filter>select):hover{border-color:var(--line-strong)} :is(#appView,#modalHost) select:not(.sales-column-filter>select):focus{outline:0;border-color:var(--orange);box-shadow:0 0 0 3px rgba(18,72,189,.16)} :is(#appView,#modalHost) select:disabled{opacity:.6;cursor:not-allowed} :is(#appView,#modalHost) select option,:is(#appView,#modalHost) select optgroup{background:var(--surface);color:var(--text-1)} @supports (appearance:base-select){ :is(#appView,#modalHost) select,:is(#appView,#modalHost) select::picker(select){-webkit-appearance:base-select!important;appearance:base-select!important} :is(#appView,#modalHost) select:not(.sales-column-filter>select){display:flex;align-items:center;gap:8px;padding-right:12px;background-image:none!important} :is(#appView,#modalHost) select::picker-icon{content:"";width:16px;height:16px;margin-left:auto;background:var(--text-3);transition:transform .15s ease; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/16px no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/16px no-repeat} :is(#appView,#modalHost) select:open::picker-icon{transform:rotate(180deg)} :is(#appView,#modalHost) select::picker(select){margin-top:6px;padding:6px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--text-1); box-shadow:0 18px 40px rgba(18,41,69,.18);max-height:min(340px,60vh);width:max-content;min-width:anchor-size(width);max-width:min(380px,92vw)} html[data-theme="dark"] :is(#appView,#modalHost) select::picker(select){border-color:rgba(191,224,247,.2);box-shadow:0 18px 40px rgba(0,0,0,.5)} :is(#appView,#modalHost) select option{display:flex;align-items:center;gap:8px;min-height:36px;padding:7px 10px;border-radius:8px;font-size:13.5px;background:transparent;color:var(--text-1);cursor:pointer} :is(#appView,#modalHost) select option::checkmark{color:var(--orange)} :is(#appView,#modalHost) select option:hover,:is(#appView,#modalHost) select option:focus-visible{background:var(--surface-2);outline:0} :is(#appView,#modalHost) select option:checked{background:rgba(18,72,189,.10);color:var(--text-1);font-weight:600} html[data-theme="dark"] :is(#appView,#modalHost) select option:checked{background:rgba(68,122,238,.16);color:#92B2F5} /* Filtros do cabeçalho da tabela de vendas: a caixa continua invisível sobre o título; só a lista aparece no tema. */ #appView .sales-column-filter>select{appearance:base-select} #appView .sales-column-filter>select::picker(select){min-width:220px;width:max-content;max-width:min(320px,90vw)} } @supports (appearance:base-select){:is(#appView,#modalHost) select option{text-transform:none;letter-spacing:0;font-weight:500}:is(#appView,#modalHost) select option:checked{font-weight:650}} @supports (appearance:base-select){html[data-theme="dark"] :is(#appView,#modalHost) select option:not(:checked):not(:hover){background:transparent!important}} @supports (appearance:base-select){html[data-theme="dark"] :is(#appView,#modalHost) select option:checked{background:rgba(68,122,238,.16)!important;color:#92B2F5!important}} /* 24. Atalho da planilha (só gestor) — mesmo desenho dos botões redondos da barra superior */ #appView .global-top-controls>.topbar-sheet-link{flex:0 0 auto;height:40px;display:inline-flex;align-items:center;gap:8px;margin-left:auto;padding:0 16px 0 13px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--text-2);font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap;transition:background .16s,color .16s,border-color .16s} #appView .global-top-controls>.topbar-sheet-link:hover{color:var(--text-1);border-color:var(--line-strong)} #appView .global-top-controls>.topbar-sheet-link:focus-visible{outline:2px solid var(--orange);outline-offset:2px} #appView .global-top-controls>.topbar-sheet-link svg{width:18px;height:18px;color:var(--orange)} #appView .global-top-controls>.topbar-sheet-link:not(.is-hidden)+.topbar-theme-toggle{margin-left:8px!important} html[data-theme="dark"] #appView .global-top-controls>.topbar-sheet-link svg{color:#85A8F4} #appView .global-top-controls>.topbar-sheet-link.is-icon{width:40px;padding:0;justify-content:center} #appView .global-top-controls>.topbar-sheet-link.is-icon span{display:none} @media (max-width:900px){ #appView .global-top-controls>.topbar-sheet-link{width:40px;padding:0;justify-content:center} #appView .global-top-controls>.topbar-sheet-link span{display:none} } #appView #bottomNav.is-measuring .nav-item,#appView #bottomNav.is-measuring .nav-label{transition:none!important} /* ---------- 26. Verde, amarelo e vermelho com contraste forte (claro e escuro) ---------- Uma camada só, no fim do tema, para os sinais de situação ficarem fortes em todo o painel: metas e ritmo, variações, auditoria das vendas, chips de filtro e avisos da planilha. */ :root{ --green:#15803D;--red:#C81E1E;--amber:#B45309; --ok-bg:#DCFCE7;--ok-fg:#14532D;--warn-bg:#FEF3C7;--warn-fg:#78350F;--bad-bg:#FEE2E2;--bad-fg:#991B1B; --ok-line:#86EFAC;--warn-line:#FCD34D;--bad-line:#FCA5A5; } #appView{--tone-good:#166534;--tone-warn:#A15C07;--tone-bad:#B91C1C;--tone-good-fill:#16A34A;--tone-warn-fill:#EAB308;--tone-bad-fill:#DC2626} html[data-theme="dark"]{ --green:#4ADE80;--red:#FF7A7A;--amber:#FBBF24; --ok-bg:rgba(34,197,94,.26);--ok-fg:#86EFAC;--warn-bg:rgba(250,204,21,.24);--warn-fg:#FDE68A;--bad-bg:rgba(248,113,113,.26);--bad-fg:#FECACA; --ok-line:rgba(74,222,128,.55);--warn-line:rgba(253,224,71,.5);--bad-line:rgba(255,122,122,.55); } html[data-theme="dark"] #appView{--tone-good:#4ADE80;--tone-warn:#FDE047;--tone-bad:#FF8A8A;--tone-good-fill:#22C55E;--tone-warn-fill:#FACC15;--tone-bad-fill:#FF6B6B} /* Chips de situação: fundo mais cheio e borda da mesma cor */ #appView :is(.kpi-delta.up,.ix-pace.ok){box-shadow:inset 0 0 0 1px var(--ok-line)} #appView :is(.kpi-delta.down,.ix-pace.bad){box-shadow:inset 0 0 0 1px var(--bad-line)} #appView .ix-chip.sem b{box-shadow:inset 0 0 0 1px var(--warn-line)} #appView .ix-chip.abaixo b{box-shadow:inset 0 0 0 1px var(--bad-line)} #appView .g-tag.warn,#appView .g-who small .warn{color:var(--tone-warn)} /* Auditoria das vendas (OK / pendente / não OK) e bolinhas do resumo */ #appView :is(.audit-icon-trigger,.audit-status,.audit-icon-option).ok{color:var(--green)!important;background:var(--ok-bg)!important;border-color:var(--ok-line)!important} #appView :is(.audit-icon-trigger,.audit-status,.audit-icon-option).pending{color:var(--amber)!important;background:var(--warn-bg)!important;border-color:var(--warn-line)!important} #appView :is(.audit-icon-trigger,.audit-status,.audit-icon-option).not-ok{color:var(--red)!important;background:var(--bad-bg)!important;border-color:var(--bad-line)!important} #appView .dot.ok{background:#16A34A;box-shadow:0 0 0 3px rgba(22,163,74,.22)} #appView .dot.pending{background:#EAB308;box-shadow:0 0 0 3px rgba(234,179,8,.25)} #appView .dot.not-ok{background:#DC2626;box-shadow:0 0 0 3px rgba(220,38,38,.22)} #appView .audit-overview .ok strong{color:var(--green)!important} #appView .audit-overview .pending strong{color:var(--amber)!important} #appView :is(.audit-overview .not-ok strong,.audit-overview .no-receipt strong,.audit-overview .no-receipt svg){color:var(--red)!important} /* Avisos da planilha */ #appView .sheet-sync-chip.pending{background:var(--warn-bg)!important;color:var(--warn-fg)!important;box-shadow:inset 0 0 0 1px var(--warn-line)} #appView .sheet-sync-chip.error,#appView .sale-sync-state.error{background:var(--bad-bg)!important;color:var(--bad-fg)!important;box-shadow:inset 0 0 0 1px var(--bad-line)} /* Modo escuro: o que pede atenção aparece mais */ html[data-theme="dark"] #appView .dot.ok{background:#4ADE80;box-shadow:0 0 0 3px rgba(74,222,128,.25)} html[data-theme="dark"] #appView .dot.pending{background:#FDE047;box-shadow:0 0 0 3px rgba(253,224,71,.25)} html[data-theme="dark"] #appView .dot.not-ok{background:#FF6B6B;box-shadow:0 0 0 3px rgba(255,107,107,.25)} /* trilho das barras de meta: antes quase sumia no fundo azul */ html[data-theme="dark"] #appView :is(.kpi-bar,.kpi-track,.sg-track,.hero-track,.ix-bar){background:rgba(255,255,255,.14)} /* comprovante faltando: ícone vermelho forte */ html[data-theme="dark"] #appView .receipt-button.empty{background:var(--bad-bg)!important;color:#FF8A8A!important;border-color:var(--bad-line)!important} /* contadores dos filtros e chips neutros legíveis */ html[data-theme="dark"] #appView .ix-chip{border-color:rgba(191,224,247,.22)} html[data-theme="dark"] #appView .ix-chip b{background:rgba(255,255,255,.10);color:#E2E8F0} html[data-theme="dark"] #appView .ix-chip.sem b{background:var(--warn-bg);color:var(--warn-fg)} html[data-theme="dark"] #appView .ix-chip.abaixo b{background:var(--bad-bg);color:var(--bad-fg)} /* campos de busca e filtros com borda visível */ html[data-theme="dark"] #appView :is(input[type="search"],input[type="text"],select):not([disabled]){border-color:rgba(191,224,247,.24)} /* foco do teclado bem visível */ html[data-theme="dark"] #appView :is(button,a,input,select,summary):focus-visible{outline:2px solid #6F98F2;outline-offset:2px} /* Selo de ritmo (Início e Metas do mês): fundo da cor da situação */ #appView .g-pace.tone-good,#appView .sg-pace.ok{background:var(--ok-bg)!important;color:var(--ok-fg)!important;box-shadow:inset 0 0 0 1px var(--ok-line)} #appView .g-pace.tone-warn,#appView .sg-pace.warn{background:var(--warn-bg)!important;color:var(--warn-fg)!important;box-shadow:inset 0 0 0 1px var(--warn-line)} #appView .g-pace.tone-bad,#appView .sg-pace.bad{background:var(--bad-bg)!important;color:var(--bad-fg)!important;box-shadow:inset 0 0 0 1px var(--bad-line)} /* ---------- 27. Login V60: fundo azul inteiro, estrela e frase à esquerda, cartão branco à direita ---------- Cores sólidas. Entrada só por e-mail; nome e foto aparecem para a conta lembrada neste aparelho. */ #loginView.lv2:not(.is-hidden){display:flex!important;flex-direction:row!important;align-items:stretch!important;justify-content:space-between!important;gap:48px!important; height:100dvh!important;min-height:0!important;padding:0 clamp(32px,6vw,96px)!important;overflow:hidden!important;background:#122945!important;background-image:none!important;color:#fff} #loginView.lv2:after,#loginView.lv2:before{display:none!important} #loginView.lv2 .lv-brand{flex:1 1 auto;min-width:0;max-width:640px;display:flex;flex-direction:column;padding:52px 0 40px} #loginView.lv2 .lv-logo{height:40px;width:auto;align-self:flex-start} #loginView.lv2 .lv-art{margin:auto 0;display:flex;flex-direction:column;gap:34px} #loginView.lv2 .lv-star{width:clamp(96px,9vw,140px);height:auto} #loginView.lv2 .lv-star .n{fill:#FFFFFF}#loginView.lv2 .lv-star .o{fill:#134FD0} #loginView.lv2 .lv-copy{display:grid;gap:14px} #loginView.lv2 .lv-kicker{font-family:var(--font-secondary);font-size:13px;font-weight:700;letter-spacing:.2em;color:#134FD0} #loginView.lv2 .lv-copy h1{margin:0;max-width:540px;font-family:var(--font-primary);font-size:clamp(36px,3.7vw,54px);line-height:1.05;letter-spacing:-.03em;font-weight:800;color:#fff} #loginView.lv2 .lv-copy h1 em{font-style:normal;color:#134FD0} #loginView.lv2 .lv-lead{margin:6px 0 0;max-width:440px;font-size:17px;line-height:1.5;color:#C9D4E1} #loginView.lv2 .lv-foot{margin:0;font-size:12.5px;color:#8FA3BA} #loginView.lv2 .lv-side{flex:0 0 auto;width:min(460px,100%);display:flex;align-items:center;justify-content:center;padding:32px 0} #loginView.lv2 .lv-card{width:100%;max-height:calc(100dvh - 64px);overflow:auto;background:#FFFFFF;border-radius:18px;padding:36px 34px 30px;color:#122945;text-align:left} #loginView.lv2 .lv-who{display:flex;align-items:center;gap:16px;margin:0 0 26px} #loginView.lv2 .lv-who[hidden]{display:none} #loginView.lv2 .lv-avatar{flex:none;width:72px;height:72px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:#E9EEF4;color:#7B8CA3;font-family:var(--font-secondary);font-size:24px;font-weight:700} #loginView.lv2 .lv-avatar svg{width:32px;height:32px} #loginView.lv2 .lv-avatar img{width:100%;height:100%;object-fit:cover} #loginView.lv2 .lv-avatar.is-known{background:#122945;color:#fff;box-shadow:0 0 0 3px #fff,0 0 0 6px #134FD0} #loginView.lv2 .lv-who-text{min-width:0} #loginView.lv2 .lv-who h2{margin:0;font-family:var(--font-primary);font-size:27px;line-height:1.1;letter-spacing:-.02em;color:#122945} #loginView.lv2 .lv-who p{margin:4px 0 0;font-size:14.5px;color:#5B6B7D} #loginView.lv2 .lv-form{display:grid;gap:0} #loginView.lv2 .lv-form[hidden]{display:none} #loginView.lv2 .lv-field{margin-bottom:18px} #loginView.lv2 .lv-field label{display:block;margin-bottom:7px;font-size:13px;font-weight:700;color:#122945} #loginView.lv2 .lv-input{height:52px;display:flex;align-items:center;gap:10px;padding:0 6px 0 14px;border:1.5px solid #CDD5E0;border-radius:10px;background:#fff} #loginView.lv2 .lv-input:focus-within{border-color:#134FD0} #loginView.lv2 .lv-input{width:100%;min-width:0;box-sizing:border-box} #loginView.lv2 .lv-input input{flex:1 1 0;width:0!important;min-width:0!important;height:100%;border:0!important;outline:0;background:transparent!important;box-shadow:none!important;padding:0;font:500 15.5px var(--font-primary);color:#122945!important} #loginView.lv2 .lv-input input::placeholder{color:#97A3B4} #loginView.lv2 .lv-known{flex:none;width:22px;height:22px;margin-right:8px;border-radius:50%;display:grid;place-items:center;background:#16A34A;color:#fff} #loginView.lv2 .lv-known[hidden]{display:none} #loginView.lv2 .lv-known svg{width:14px;height:14px;stroke-width:3} #loginView.lv2 .lv-show{flex:none;height:38px;padding:0 10px;border:0;border-radius:8px;background:transparent;font-size:12.5px;font-weight:700;color:#5B6B7D;cursor:pointer} #loginView.lv2 .lv-show:hover{background:#F1F4F8;color:#122945} #loginView.lv2 .lv-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-2px 0 20px;font-size:13.5px;color:#5B6B7D} #loginView.lv2 .lv-check{display:inline-flex;align-items:center;gap:8px;cursor:pointer} #loginView.lv2 .lv-check input{width:17px;height:17px;margin:0;accent-color:#134FD0} #loginView.lv2 .lv-link{border:0;background:none;padding:0;font:inherit;font-weight:700;color:#1040A8;cursor:pointer} #loginView.lv2 .lv-link:hover{text-decoration:underline} #loginView.lv2 .lv-link[hidden]{display:none} #loginView.lv2 .login-error{margin:0 0 12px;font-size:13px;color:#B91C1C;text-align:left} #loginView.lv2 .login-error:empty{display:none} #loginView.lv2 .lv-field .login-error{margin:8px 0 0} #loginView.lv2 .lv-submit{height:52px;width:100%;border:0;border-radius:10px;background:#134FD0;color:#fff;font:800 15.5px var(--font-primary);cursor:pointer;display:grid;place-items:center} #loginView.lv2 .lv-submit:hover{background:#1248BD} #loginView.lv2 .lv-submit:disabled{opacity:.75;cursor:wait} #loginView.lv2 .lv-alt{margin:20px 0 0;text-align:center;font-size:13.5px;color:#5B6B7D} #loginView.lv2 .lv-alt>span[hidden]{display:none} /* Fluxos dentro do cartão branco (primeiro acesso, cadastro pendente, senha provisória) */ #loginView.lv2 .login-inline-head{justify-items:start;text-align:left;margin:0 0 16px} #loginView.lv2 .login-inline-head>span{color:#1040A8!important} #loginView.lv2 .login-inline-head h2{color:#122945!important;font-size:24px} #loginView.lv2 .login-inline-head p,#loginView.lv2 .login-inline-note,#loginView.lv2 .login-inline-note span{color:#5B6B7D!important;font-size:13px} #loginView.lv2 .login-inline-note svg{color:#134FD0!important} #loginView.lv2 .login-inline-form .field>span{color:#122945!important;font-size:12.5px;font-weight:700} #loginView.lv2 .login-inline-form .field-control{height:48px;background:#fff!important;border:1.5px solid #CDD5E0!important;border-radius:10px;box-shadow:none!important} #loginView.lv2 .login-inline-form .field-control:focus-within{border-color:#134FD0!important} #loginView.lv2 .login-inline-form .field-control svg{color:#7B8CA3!important} #loginView.lv2 .login-inline-form :is(input,select){color:#122945!important;background:transparent!important} #loginView.lv2 .login-inline-form :is(input,select)::placeholder{color:#97A3B4!important} #loginView.lv2 .login-inline-form select option{color:#122945;background:#fff} #loginView.lv2 .primary-button{height:48px;border:0!important;border-radius:10px!important;background:#134FD0!important;color:#fff!important;box-shadow:none!important} #loginView.lv2 .login-secondary-button{height:48px;border-radius:10px!important;background:#F1F4F8!important;border:1px solid #D5DCE6!important;color:#122945!important} #loginView.lv2 .login-text-action{color:#1040A8!important} #loginView.lv2.is-inline-flow:not(.is-hidden){overflow-y:auto!important} #loginView.lv2.is-inline-flow .lv-card{max-height:none} #loginView.lv2.is-inline-flow .lv-side{align-items:flex-start;padding:40px 0;width:min(540px,100%)} @media (max-width:900px){ #loginView.lv2:not(.is-hidden){flex-direction:column!important;justify-content:flex-start!important;gap:0!important;height:auto!important;min-height:100dvh!important;overflow-y:auto!important;padding:0 18px 28px!important} #loginView.lv2 .lv-brand{flex:none;max-width:none;padding:24px 4px 22px} #loginView.lv2 .lv-logo{height:34px} #loginView.lv2 .lv-art{margin:22px 0 0;flex-direction:row;align-items:center;gap:16px} #loginView.lv2 .lv-star{width:64px;flex:none} #loginView.lv2 .lv-copy h1{font-size:25px} #loginView.lv2 :is(.lv-kicker,.lv-lead,.lv-foot){display:none} #loginView.lv2 .lv-side{width:100%;padding:0} #loginView.lv2 .lv-card{max-height:none;padding:26px 20px 24px;border-radius:16px} #loginView.lv2 .lv-avatar{width:60px;height:60px} #loginView.lv2 .lv-who h2{font-size:23px} #loginView.lv2 .login-inline-pair{grid-template-columns:1fr!important} } @media (max-height:700px) and (min-width:901px){ #loginView.lv2 .lv-card{padding:26px 30px 22px} #loginView.lv2 .lv-who{margin-bottom:18px} #loginView.lv2 .lv-field{margin-bottom:12px} } /* Aviso que bloqueia contas antigas sem e-mail */ body.email-gate-open{overflow:hidden} .email-gate{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;padding:20px;background:#122945} .email-gate[hidden]{display:none} .email-gate-card{width:min(480px,100%);background:#fff;border-radius:18px;padding:34px 32px 26px;color:#122945;text-align:left;box-shadow:0 30px 80px rgba(0,0,0,.35)} .email-gate-icon{width:56px;height:56px;border-radius:14px;display:grid;place-items:center;background:#F3F7FE;color:#134FD0;margin-bottom:18px} .email-gate-icon svg{width:28px;height:28px} .email-gate-kicker{display:block;font-family:var(--font-secondary);font-size:12px;font-weight:700;letter-spacing:.16em;color:#1040A8} .email-gate-card h2{margin:6px 0 10px;font-family:var(--font-primary);font-size:24px;line-height:1.15;letter-spacing:-.02em;color:#122945} .email-gate-card>p{margin:0 0 22px;font-size:14.5px;line-height:1.55;color:#3A4757} .email-gate-form label{display:block;margin-bottom:7px;font-size:13px;font-weight:700} .email-gate-form input{width:100%;height:52px;padding:0 14px;border:1.5px solid #CDD5E0;border-radius:10px;font:500 15.5px var(--font-primary);color:#122945;background:#fff;outline:0} .email-gate-form input:focus{border-color:#134FD0} .email-gate-error{margin:8px 0 0;font-size:13px;color:#B91C1C} .email-gate-error:empty{display:none} .email-gate-submit{width:100%;height:52px;margin-top:16px;border:0;border-radius:10px;background:#134FD0;color:#fff;font:800 15.5px var(--font-primary);cursor:pointer} .email-gate-submit:hover{background:#1248BD}.email-gate-submit:disabled{opacity:.75;cursor:wait} .email-gate-sent{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;padding:16px;border-radius:12px;background:#DCFCE7;color:#14532D} .email-gate-sent[hidden]{display:none} .email-gate-sent svg{width:22px;height:22px;margin-top:2px} .email-gate-sent p{margin:0;font-size:14px;line-height:1.5} .email-gate-link{grid-column:2;justify-self:start;border:0;background:none;padding:0;font:inherit;font-size:13.5px;font-weight:700;color:#14532D;text-decoration:underline;cursor:pointer} .email-gate-out{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:46px;margin-top:14px;border:1px solid #D5DCE6;border-radius:10px;background:#fff;color:#122945;font:700 14px var(--font-primary);cursor:pointer} .email-gate-out svg{width:16px;height:16px} .email-gate-out:hover{background:#F1F4F8} /* 28. Botão "Planilha" com submenu (planilha nova e antiga) — só gestor */ #appView .global-top-controls>button.topbar-sheet-link{font-family:inherit;cursor:pointer;appearance:none} #appView .global-top-controls>.topbar-sheet-link .topbar-sheet-caret{width:15px;height:15px;margin-left:-2px;color:var(--text-3);transition:transform .16s} #appView .global-top-controls>.topbar-sheet-link.is-open .topbar-sheet-caret{transform:rotate(180deg)} #appView .global-top-controls>.topbar-sheet-link.is-open{border-color:var(--orange);color:var(--text-1)} #appView .global-top-controls>.topbar-sheet-link.is-icon .topbar-sheet-caret{display:none} @media (max-width:900px){#appView .global-top-controls>.topbar-sheet-link .topbar-sheet-caret{display:none}} .sheet-menu{position:fixed;z-index:1200;min-width:260px;padding:6px;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:0 18px 40px rgba(18,41,69,.16)} .sheet-menu[hidden]{display:none} .sheet-menu-item{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:10px;color:var(--text-1);font-size:14px;font-weight:700;text-decoration:none} .sheet-menu-item:hover,.sheet-menu-item:focus-visible{background:var(--surface-2);outline:none} .sheet-menu-item svg{width:18px;height:18px;color:var(--orange);flex:none} .sheet-menu-item span{flex:1} .sheet-menu-item em{font-style:normal;font-size:11px;font-weight:700;padding:2px 8px;border-radius:99px;background:var(--ok-bg);color:var(--ok-fg)} .sheet-menu-item .sheet-menu-out{width:15px;height:15px;color:var(--text-3)} html[data-theme="dark"] .sheet-menu{box-shadow:0 18px 40px rgba(0,0,0,.45)} /* 29. Login: olho para ver a senha, preenchimento automático sem fundo cinza e listas no tema do cartão */ #loginView.lv2 .lv-show{width:40px;padding:0;display:grid;place-items:center;color:#5B6B7D} #loginView.lv2 .lv-show svg{width:20px;height:20px} #loginView.lv2 .lv-card{color-scheme:light} /* Chrome/Edge pintam de cinza/azul o campo preenchido automaticamente: mantém o branco do cartão */ #loginView.lv2 input:-webkit-autofill,#loginView.lv2 input:-webkit-autofill:hover,#loginView.lv2 input:-webkit-autofill:focus, .email-gate input:-webkit-autofill,.email-gate input:-webkit-autofill:hover,.email-gate input:-webkit-autofill:focus{ -webkit-box-shadow:0 0 0 1000px #FFFFFF inset!important;box-shadow:0 0 0 1000px #FFFFFF inset!important;-webkit-text-fill-color:#122945!important;caret-color:#122945;transition:background-color 9999s ease-out 0s} #loginView.lv2 input:autofill{background:#FFFFFF!important} /* Listas (Cargo, Seu nome) */ #loginView.lv2 .field-control.lv-select{position:relative} #loginView.lv2 .field-control.lv-select select{position:absolute!important;inset:0;opacity:0;pointer-events:none} #loginView.lv2 .lv-select-btn{flex:1;min-width:0;height:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0;border:0;background:transparent;color:#122945;font:500 15px var(--font-primary);text-align:left;cursor:pointer} #loginView.lv2 .lv-select-btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #loginView.lv2 .lv-select-btn .is-placeholder{color:#97A3B4} #loginView.lv2 .lv-select-btn svg{width:18px;height:18px;color:#7B8CA3;flex:none;transition:transform .15s} #loginView.lv2 .field-control.lv-select.is-open{border-color:#134FD0!important} #loginView.lv2 .field-control.lv-select.is-open .lv-select-btn svg{transform:rotate(180deg);color:#134FD0} #loginView.lv2 .lv-select-btn:focus-visible{outline:none} #loginView.lv2 .field-control.lv-select:has(.lv-select-btn:focus-visible){border-color:#134FD0!important;box-shadow:0 0 0 3px rgba(19,79,208,.15)!important} #loginView.lv2 .lv-select-list{position:absolute;left:-1.5px;right:-1.5px;top:calc(100% + 6px);z-index:30;max-height:260px;overflow:auto;padding:6px;border:1px solid #D5DCE6;border-radius:12px;background:#FFFFFF;box-shadow:0 18px 40px rgba(18,41,69,.18)} #loginView.lv2 .lv-select-list[hidden]{display:none} #loginView.lv2 .lv-select-option{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-radius:8px;color:#122945;font-size:14.5px;cursor:pointer} #loginView.lv2 .lv-select-option.is-active{background:#F3F7FE} #loginView.lv2 .lv-select-option.is-selected{font-weight:700;color:#1040A8} #loginView.lv2 .lv-select-option svg{width:16px;height:16px;color:#134FD0} /* 30. Topo enxuto: telas principais no centro, demais em "Gestão"/"Mais" */ #appView .nav-more-wrap{display:none} @media (min-width:901px){ #appView .bottom-nav .nav-secondary{display:none} #appView .bottom-nav .nav-more-wrap{display:block;position:relative} #appView .bottom-nav .nav-more{display:flex;align-items:center;gap:6px;background:var(--surface-2)} #appView .bottom-nav .nav-more .nav-label{display:inline!important} #appView .bottom-nav .nav-more-caret{width:15px;height:15px;transition:transform .15s ease} #appView .bottom-nav .nav-more-wrap.is-open .nav-more-caret{transform:rotate(180deg)} #appView .nav-more-menu{position:absolute;top:calc(100% + 10px);left:0;z-index:60;width:250px;padding:8px;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:0 18px 40px rgba(13,35,57,.16);display:none} #appView .nav-more-wrap.is-open .nav-more-menu{display:grid;gap:2px} #appView .nav-more-option{display:flex;align-items:center;gap:10px;padding:9px 10px;border:0;border-radius:9px;background:transparent;color:var(--text-1);font:600 13.5px var(--font-primary);text-align:left;cursor:pointer} #appView .nav-more-option:hover{background:var(--surface-2)} #appView .nav-more-option svg{width:17px;height:17px;color:var(--text-3)} #appView .nav-more-option.active{background:var(--surface-2);color:var(--text-1)} #appView .nav-more-option.active svg{color:var(--orange)} } /* 31. Mais cor da marca ao passar o mouse */ :root{--accent-soft:#F6F9FE;--accent-soft-2:#E3EBFC;--accent-line:#A8BFF0} html[data-theme="dark"]{--accent-soft:rgba(59,115,237,.12);--accent-soft-2:rgba(59,115,237,.22);--accent-line:rgba(59,115,237,.5)} /* Botões: o principal fica destaque ao passar o mouse; os secundários ganham borda e texto destaque */ #appView :is(.primary-action,.navy-action):hover,#modalHost :is(.primary-action,.navy-action):hover{background:var(--orange)!important;border-color:var(--orange)!important;color:var(--on-accent);background-image:var(--accent-grad)} html[data-theme="dark"] #appView :is(.primary-action,.navy-action):hover,html[data-theme="dark"] #modalHost :is(.primary-action,.navy-action):hover{background:#1248BD!important;border-color:#1248BD!important} #appView :is(.toolbar-action,.secondary-action):hover,#modalHost :is(.toolbar-action,.secondary-action):hover, html[data-theme="dark"] #appView :is(.toolbar-action,.secondary-action):hover,html[data-theme="dark"] #modalHost :is(.toolbar-action,.secondary-action):hover{background:var(--accent-soft)!important;border-color:var(--accent-line)!important;color:var(--accent-text)!important} #appView :is(.toolbar-action,.secondary-action):hover svg,#modalHost :is(.toolbar-action,.secondary-action):hover svg{color:var(--orange)} #appView .bi-go:hover{background:var(--orange)} html[data-theme="dark"] #appView .bi-go:hover{background:#1248BD} /* Opções de menus e listas: fundo destaque clarinho e ícone destaque */ :is(#appView,#modalHost) select option:hover,:is(#appView,#modalHost) select option:focus-visible{background:var(--accent-soft)!important} :is(#appView,#modalHost) select:not(.sales-column-filter>select):hover{border-color:var(--accent-line)} #appView :is(.nav-more-option,.sale-action-options button:not(.danger)):hover,.sheet-menu-item:hover,.sheet-menu-item:focus-visible{background:var(--accent-soft);color:var(--text-1)} #appView :is(.nav-more-option,.sale-action-options button:not(.danger)):hover svg,.sheet-menu-item:hover svg{color:var(--orange)} #appView .bottom-nav .nav-item:hover .nav-icon{color:var(--orange)} #appView .sales-column-filter:hover{background:var(--accent-soft);color:var(--text-1)} #appView .sales-table tbody .sale-main-row:hover{box-shadow:inset 3px 0 0 var(--orange)} #appView :is(.topbar-theme-toggle,.global-top-controls>.topbar-sheet-link):hover{border-color:var(--accent-line);color:var(--accent-text)} #appView .compare-select:hover{border-color:var(--accent-line)} #appView .advanced-filter-trigger:hover .advanced-filter-count{background:var(--orange)} /* Janela de editar venda: largura certa (antes ficava cortada à direita) */ .modal-stage:has(.sale-edit-modal){width:min(100%,980px)} /* 32. Filtro avançado de Vendas: período com o mesmo calendário do Dashboard */ #appView .advanced-filter-period .range-calendar{display:flex;width:100%} #appView .advanced-filter-period .range-date-btn{flex:1;justify-content:flex-start} #appView .advanced-filter-period .range-caret{margin-left:auto!important} #appView .advanced-filter-period .range-popover{left:0;right:auto} @media (min-width:641px){#appView .advanced-filter-popover:has(.range-calendar.is-open){overflow:visible;max-height:none}} /* 33. Sino de notificações no topo */ #appView .topbar-bell{position:relative;flex:0 0 auto;width:40px;height:40px;display:grid;place-items:center;margin-left:8px;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--text-2);cursor:pointer;transition:background .16s,color .16s,border-color .16s} #appView .topbar-bell[hidden]{display:none} #appView .topbar-bell svg{width:18px;height:18px} #appView .topbar-bell:hover,#appView .topbar-bell.is-open{border-color:var(--accent-line);color:var(--accent-text)} #appView .topbar-bell:focus-visible{outline:2px solid var(--orange);outline-offset:2px} #appView .global-top-controls>.topbar-bell+.profile-trigger{margin-left:8px!important} #appView .bell-badge{position:absolute;top:-4px;right:-5px;min-width:18px;height:18px;padding:0 5px;display:none;place-items:center;border-radius:99px;border:2px solid var(--surface);background:var(--orange);color:var(--on-accent);font-size:10.5px;font-weight:800;line-height:1;background-image:var(--accent-grad)} #appView .topbar-bell.has-unread .bell-badge{display:grid} #appView .topbar-bell.has-unread svg{animation:bell-ring 1.1s ease 1} @keyframes bell-ring{0%,100%{transform:rotate(0)}15%{transform:rotate(14deg)}30%{transform:rotate(-12deg)}45%{transform:rotate(8deg)}60%{transform:rotate(-5deg)}75%{transform:rotate(2deg)}} @media (prefers-reduced-motion:reduce){#appView .topbar-bell.has-unread svg{animation:none}} .notif-panel{position:fixed;z-index:1200;width:min(380px,calc(100vw - 24px));max-height:min(520px,calc(100vh - 90px));display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:0 18px 40px rgba(18,41,69,.16);overflow:hidden} .notif-panel[hidden]{display:none} html[data-theme="dark"] .notif-panel{box-shadow:0 18px 40px rgba(0,0,0,.45)} .notif-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px 10px;border-bottom:1px solid var(--line)} .notif-head strong{font-size:15px;color:var(--text-1)} .notif-read-all{border:0;background:none;padding:4px 6px;border-radius:8px;color:var(--accent-text);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer} .notif-read-all:hover{background:var(--accent-soft)} .notif-list{overflow-y:auto;padding:6px} .notif-item{width:100%;display:flex;align-items:flex-start;gap:12px;padding:10px;border:0;border-radius:12px;background:none;text-align:left;font:inherit;cursor:pointer;color:var(--text-1)} .notif-item:hover,.notif-item:focus-visible{background:var(--accent-soft);outline:none} .notif-icon{flex:none;width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:var(--info-bg);color:var(--info-fg)} .notif-icon svg{width:17px;height:17px} .notif-item.tone-late .notif-icon{background:var(--bad-bg);color:var(--bad-fg)} .notif-item.tone-warn .notif-icon{background:var(--warn-bg);color:var(--warn-fg)} .notif-item.tone-today .notif-icon{background:var(--orange-15);color:var(--accent-text)} .notif-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} .notif-body strong{font-size:13.5px;font-weight:600;line-height:1.3} .notif-body small{font-size:12.5px;color:var(--text-3);line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .notif-item.is-unread .notif-body strong{font-weight:800} .notif-dot{flex:none;width:8px;height:8px;margin-top:6px;border-radius:50%;background:transparent} .notif-item.is-unread .notif-dot{background:var(--orange)} .notif-empty{display:flex;flex-direction:column;align-items:center;gap:4px;padding:32px 16px 36px;text-align:center} .notif-empty span{width:44px;height:44px;display:grid;place-items:center;margin-bottom:6px;border-radius:50%;background:var(--surface-2);color:var(--text-3)} .notif-empty strong{font-size:14px;color:var(--text-1)} .notif-empty small{font-size:12.5px;color:var(--text-3)} @media (max-width:900px){#appView .global-top-controls>.topbar-bell{position:relative!important}} /* 34. Movimento: botões do topo levantam ao passar o mouse; menus e painéis aparecem com um "pop"; esqueleto de carregamento no formato da tela; dados que chegam aparecem com um fade curto. */ #appView .global-top-controls :is(.topbar-theme-toggle,.topbar-bell,.topbar-sheet-link,.profile-trigger), #appView .bottom-nav .nav-item{transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s ease,background .16s,color .16s,border-color .16s} @media (hover:hover) and (min-width:901px){ #appView .global-top-controls :is(.topbar-theme-toggle,.topbar-bell,.topbar-sheet-link,.profile-trigger):hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(18,41,69,.12)} #appView .bottom-nav .nav-item:hover{transform:translateY(-2px)} #appView .global-top-controls :is(.topbar-theme-toggle,.topbar-bell,.topbar-sheet-link,.profile-trigger):active, #appView .bottom-nav .nav-item:active{transform:translateY(0) scale(.96);box-shadow:none;transition-duration:.08s} html[data-theme="dark"] #appView .global-top-controls :is(.topbar-theme-toggle,.topbar-bell,.topbar-sheet-link,.profile-trigger):hover{box-shadow:0 6px 16px rgba(0,0,0,.35)} } /* Esqueleto */ .sk{display:block;border-radius:8px;background:linear-gradient(90deg,var(--surface-2) 0%,var(--line) 45%,var(--surface-2) 90%);background-size:220% 100%} #appView .is-skeleton .sk-num{width:18px;height:14px;border-radius:5px} #appView .is-skeleton .sk-chip{height:22px;margin-top:6px;border-radius:7px} #appView .mt-page.is-skeleton .sk-chip{height:40px;margin:0;border-radius:10px} #appView .mt-page.is-skeleton .sk-bar{width:100%;height:58px;margin-left:12px;border-radius:10px} #appView .mt-page.is-skeleton .sk-title{width:60%;height:22px;margin-bottom:12px} #appView .mt-page.is-skeleton .sk-line{width:35%;height:14px;margin-bottom:14px} #appView .mt-page.is-skeleton .sk-input{height:40px;margin-bottom:8px;border-radius:10px} #appView .mt-page.is-skeleton .sk-input.is-half{width:55%} #appView .ag-ev.is-pending{opacity:.6;background-image:repeating-linear-gradient(135deg,transparent 0 6px,rgba(255,255,255,.35) 6px 12px)} @media (prefers-reduced-motion:no-preference){ .sk{animation:uf-shimmer 1.3s ease-in-out infinite} .notif-panel:not([hidden]),.sheet-menu:not([hidden]),#appView .nav-more-wrap.is-open .nav-more-menu,#appView .mt-menu{transform-origin:top right;animation:uf-pop-in .16s cubic-bezier(.2,.7,.2,1)} #appView .nav-more-wrap.is-open .nav-more-menu{transform-origin:top left} #appView .mt-editor{animation:uf-editor-in .2s cubic-bezier(.2,.7,.2,1)} #appView .mt-editor-backdrop{animation:uf-fade-in .16s ease-out} #appView :is(.ag-cal,.mt-page).is-arriving{animation:uf-fade-in .28s ease-out} #appView .ag-ev.is-pending{animation:uf-pending 1.2s ease-in-out infinite} #appView .profile-drawer.is-open .profile-goals-link{animation:uf-pop-in .22s cubic-bezier(.2,.7,.2,1) .05s backwards} } @keyframes uf-shimmer{from{background-position:120% 0}to{background-position:-120% 0}} @keyframes uf-editor-in{from{opacity:0;transform:translate(-50%,-48%) scale(.97)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}} @keyframes uf-pending{0%,100%{opacity:.6}50%{opacity:.4}} /* 35. Ação principal com uma cor só (revisão de design). Claro: azul-marinho (14,7:1). Escuro: destaque queimado #2F62EE (4,7:1 com texto branco). O destaque da marca (#668BF3) fica para destaque: menu ativo, números e marcações. */ #appView :is(.primary-action,.navy-action,.ag-new,.mt-btn.is-primary,.ix-save), #modalHost :is(.primary-action,.navy-action), .profile-email-notice button{background:var(--navy)!important;border-color:var(--navy)!important;color:#fff!important} #appView :is(.primary-action,.navy-action,.ag-new,.mt-btn.is-primary,.ix-save):hover:not(:disabled), #modalHost :is(.primary-action,.navy-action):hover:not(:disabled), .profile-email-notice button:hover{background:#1D3B60!important;border-color:#1D3B60!important;color:#fff!important} html[data-theme="dark"] #appView :is(.primary-action,.navy-action,.ag-new,.mt-btn.is-primary,.ix-save,.mt-btn.is-navy), html[data-theme="dark"] #modalHost :is(.primary-action,.navy-action), html[data-theme="dark"] .profile-email-notice button{background:#1042AF!important;border-color:#1042AF!important;color:#fff!important} html[data-theme="dark"] #appView :is(.primary-action,.navy-action,.ag-new,.mt-btn.is-primary,.ix-save,.mt-btn.is-navy):hover:not(:disabled), html[data-theme="dark"] #modalHost :is(.primary-action,.navy-action):hover:not(:disabled){background:#0E3A98!important;border-color:#0E3A98!important} /* Botões do login também passam no contraste */ #loginView.lv2 .lv-submit,#loginView.lv2 .primary-button,.email-gate-submit{background:#2563EB!important;color:#FFFFFF!important} #loginView.lv2 .lv-submit:hover,#loginView.lv2 .primary-button:hover,.email-gate-submit:hover{background:#0E3A98!important} /* Links: destaque escuro (era azul, 3,1:1), sublinhado ao passar o mouse */ #appView :is(.goals-edit-link,.cx-link,.ix-link,.bi-link){color:var(--accent-text)!important} #appView :is(.goals-edit-link,.cx-link,.ix-link,.bi-link):hover{text-decoration:underline;text-underline-offset:3px} /* Etiqueta "Boleto": texto mais escuro (5,5:1) */ #appView .payment-badge.boleto{color:#0C3284} /* Faixa "Diário" do Dashboard: destaque queimado para o texto branco passar no contraste */ #appView .daily-period .period-heading{background:#1042AF} #appView .daily-period .period-heading :is(span,strong,em){color:#fff!important} /* Cabeçalho de página num padrão só (revisão de design): etiqueta, título e, embaixo, a descrição curta */ #appView :is(.page-header,.home-head,.sales-command,.referrals-head,.dashboard-head,.seller-dashboard-head,.teams-minimal-head,.fca-head,.weekly-head)>:first-child>p{flex:0 0 100%;margin-top:4px;max-width:720px} #appView .empty-state .empty-state-action{margin-top:12px;height:40px;display:inline-flex;align-items:center;gap:7px;padding:0 15px;border-radius:11px;font-weight:700} #appView .empty-state .empty-state-action svg{width:16px;height:16px} /* Projeção do Dashboard: alterna Faturamento | Matrículas */ #appView .proj-switch{display:inline-flex;padding:3px;border-radius:10px;background:var(--surface-2);border:1px solid var(--line);gap:2px} #appView .proj-switch button{height:30px;padding:0 12px;border:0;border-radius:8px;background:none;font:inherit;font-size:13px;font-weight:650;color:var(--text-3);cursor:pointer} #appView .proj-switch button[aria-pressed="true"]{background:var(--navy);color:#fff} html[data-theme="dark"] #appView .proj-switch button[aria-pressed="true"]{background:#1042AF} #appView .proj-switch button:focus-visible{outline:2px solid var(--orange);outline-offset:2px} #appView .daily-period .period-heading :is(span,strong,em){opacity:1!important} #appView .global-top-controls>.topbar-sheet-link:disabled{opacity:.5;cursor:not-allowed} #appView .global-top-controls>.topbar-sheet-link:disabled:hover{color:var(--text-2);border-color:var(--line)} /* Cantos arredondados em faixas e cabeçalhos que estavam retos. */ #appView :is(.g-row.g-thead,.g-row.g-tfoot,.cx-row.cx-headrow,.cx-row.cx-total,.ix-row.ix-headrow){border-radius:10px} #appView .period-heading{border-radius:12px 12px 0 0} #appView .ag-day.out{border-radius:8px} /* Texto legível sobre a cor de destaque no modo escuro. */ html[data-theme="dark"] #appView :is(.avatar,.dashboard-mode-switch>.is-active,.bi-go,.ix-chip.is-on,.period-switch button.active,.cx-seg .is-active){color:var(--on-accent)!important} html[data-theme="dark"] #appView :is(.dashboard-mode-switch>.is-active,.bi-go,.ix-chip.is-on) svg{color:var(--on-accent)!important} /* Entrar com Google (tela de login) */ #loginView.lv2 .lv-or{display:flex;align-items:center;gap:12px;margin:16px 0;font-size:12.5px;color:#97A3B4} #loginView.lv2 .lv-or::before,#loginView.lv2 .lv-or::after{content:"";flex:1;height:1px;background:#E2E8F0} #loginView.lv2 .lv-google{height:50px;width:100%;border:1.5px solid #CDD5E0;border-radius:10px;background:#fff;color:#122945;font:700 15px var(--font-primary);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px} #loginView.lv2 .lv-google:hover{background:#F6F8FB;border-color:#B9C3D1} #loginView.lv2 .lv-google:disabled{opacity:.7;cursor:wait} #loginView.lv2 .lv-google svg{width:19px;height:19px;flex:none} #loginView.lv2 .lv-google[hidden],#loginView.lv2 .lv-or[hidden]{display:none}