/* ============================================================ IRIS COSMÉTICOS — Portal das Revendedoras Paleta e componentes herdados do protótipo aprovado e do design que já roda em iriscosmeticos.shop. ============================================================ */ :root{ --bg:#faf4f8; --card:#ffffff; --card-2:#fdf3f8; --sunken:#fdf9fb; /* --faint escureceu de #826d7d pra #7b6575 em 20/08. Motivo, medido com a formula do WCAG (a mesma dos "-ink" logo abaixo): o antigo dava 4,37:1 sobre o --card-2 (fundo do `th`) e sobre o --bg — abaixo dos 4,5:1 exigidos, em 122+ ocorrencias de 9 telas. O novo da 4,89:1 sobre os dois e 5,3:1 sobre o --card. Continua o mesmo cinza ameixa da identidade; so parou de sumir no fundo rosado. */ --ink:#2a1522; --soft:#6f5766; --faint:#7b6575; --line:#f0e2ea; --line2:#f7edf3; /* magenta da marca Iris, tirado da arte oficial (hibisco + wordmark) */ --brand:#e6007e; --brand-ink:#b00062; --brand-soft:#fde3f1; --brand-2:#ff4fa3; --gold:#c99a2e; --gold-soft:#f7edd6; /* Tons "-ink": texto de pilula sobre o fundo suave da propria cor. O tom base nao serve: 11,5px em negrito precisa de 4,5:1 e varios reprovavam (o gold dava 2,21:1). Medido com a formula do WCAG. */ --gold-ink:#8a6410; --emerald-ink:#0b7d4f; --amber-ink:#8a5d10; --rose-ink:#b02132; --violet-ink:#7229d9; --emerald:#0f9d63; --emerald-soft:#e2f5ec; --amber:#a9741a; --amber-soft:#f8eed6; --rose:#d23b4e; --rose-soft:#fbe4e7; --violet:#8a3ff0; --violet-soft:#efe7fd; --sky:#0369a1; --sky-soft:#e3f0f8; /* Teal e neutro entraram com as etapas novas do fluxo (Expedido / Em embalagem): as 7 pilulas que existiam nao davam conta de 8 etapas + cancelado sem repetir cor na mesma tabela. Medido com a formula do WCAG, igual aos "-ink" acima: #0d6e6a sobre #dff2f1 da 5,31:1 e #6f5766 sobre #fdf3f8 da 6,01:1 — os dois passam do 4,5:1 que 11,5px em negrito pede. */ --teal-soft:#dff2f1; --teal-ink:#0d6e6a; --shadow-sm:0 1px 2px rgba(120,20,70,.05), 0 6px 20px rgba(120,20,70,.06); --shadow-md:0 10px 40px rgba(120,20,70,.10); --mono:ui-monospace,"Cascadia Mono","SF Mono",Consolas,monospace; --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --serif:ui-serif,Georgia,"Times New Roman",serif; } /* Tema CLARO, sempre. A identidade da Iris e rosa sobre branco — a arte, o catalogo, o material impresso, tudo. Um portal escuro deixava o texto em cinza sobre vinho e ficava ruim de ler no celular. O color-scheme avisa o navegador pra desenhar select, scrollbar e autofill claros tambem. */ :root{color-scheme:light} *{box-sizing:border-box} html,body{margin:0;padding:0} body{background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.55; -webkit-font-smoothing:antialiased} button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit} input,select,textarea{font-family:inherit} h1,h2,h3{margin:0;letter-spacing:-.015em;text-wrap:balance} a{color:var(--brand);text-decoration:none} .num{font-variant-numeric:tabular-nums} .sp{flex:1} .hint{font-size:12px;color:var(--faint)} .mono{font-family:var(--mono)} /* ---------- shell do app ---------- */ .shell{display:grid;grid-template-columns:236px 1fr;min-height:100vh} aside{border-right:1px solid var(--line);background:var(--card);padding:18px 12px;display:flex; flex-direction:column;gap:4px} .brand{display:flex;align-items:center;gap:11px;padding:4px 8px 16px} .brand .logo{width:38px;height:38px;border-radius:11px;flex:none; background:linear-gradient(135deg,var(--brand),var(--brand-2));display:grid;place-items:center; box-shadow:0 4px 12px rgba(229,21,126,.3)} .brand .t{font-weight:800;font-size:15px} .brand .s{font-size:11.5px;color:var(--faint)} nav button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 11px;border-radius:10px; font-size:13.5px;font-weight:600;color:var(--soft);text-align:left;transition:background .12s,color .12s} nav button:hover{background:var(--line2);color:var(--ink)} nav button[aria-current="page"]{background:var(--brand-soft);color:var(--brand-ink)} nav button svg{flex:none;opacity:.85} /* O item "Voce" so existe na barra de baixo do celular — ver o bloco <=860px e o comentario da .folha la embaixo. No desktop quem faz esse papel e a .navrodape do menu lateral, que continua intacta. */ nav button.so-mobile{display:none} nav .badge{margin-left:auto;background:var(--brand);color:#fff;font-size:10.5px;font-weight:800; min-width:19px;height:19px;border-radius:10px;display:grid;place-items:center;padding:0 5px} .navrodape{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);font-size:12px;color:var(--faint)} .navrodape b{display:block;color:var(--ink);font-size:13px;font-weight:700} main{padding:26px 28px 70px;min-width:0} .view{display:none;flex-direction:column;gap:22px} .view.on{display:flex} .head h1{font-family:var(--serif);font-weight:500;font-size:27px} .head p{margin:4px 0 0;color:var(--soft);font-size:14px} /* ---------- peças ---------- */ .card{background:var(--card);border:1px solid var(--line);border-radius:15px;padding:18px; box-shadow:var(--shadow-sm)} .grid{display:grid;gap:14px} .g4{grid-template-columns:repeat(4,minmax(0,1fr))} .g3{grid-template-columns:repeat(3,minmax(0,1fr))} .g2{grid-template-columns:repeat(2,minmax(0,1fr))} @media(max-width:980px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:900px){.g3,.g2{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:600px){.g4,.g3,.g2{grid-template-columns:minmax(0,1fr)}} .kpi .k{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--faint)} .kpi .v{font-family:var(--serif);font-size:29px;line-height:1.1;margin-top:7px;font-variant-numeric:tabular-nums} .kpi .d{font-size:12.5px;color:var(--soft);margin-top:5px} .kpi.acc{border-left:3px solid var(--brand)} h2.sec{font-family:var(--serif);font-weight:500;font-size:19px;display:flex;align-items:center;gap:9px} .scroll{overflow-x:auto;border:1px solid var(--line);border-radius:13px;background:var(--card)} table{border-collapse:collapse;width:100%;font-size:13.5px} th,td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line2);white-space:nowrap} thead th{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint); font-weight:700;border-bottom:1px solid var(--line);background:var(--card-2);position:sticky;top:0} tbody tr:last-child td{border-bottom:0} tbody tr:hover{background:var(--sunken)} td.r,th.r{text-align:right;font-variant-numeric:tabular-nums} .pill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700; padding:3px 9px;border-radius:20px;white-space:nowrap} .p-ok{background:var(--emerald-soft);color:var(--emerald-ink)} .p-wait{background:var(--amber-soft);color:var(--amber-ink)} .p-no{background:var(--rose-soft);color:var(--rose-ink)} .p-info{background:var(--sky-soft);color:var(--sky)} .p-br{background:var(--brand-soft);color:var(--brand-ink)} .p-gold{background:var(--gold-soft);color:var(--gold-ink)} .p-vi{background:var(--violet-soft);color:var(--violet-ink)} .p-teal{background:var(--teal-soft);color:var(--teal-ink)} .p-neutro{background:var(--card-2);color:var(--soft)} /* "Orcamento" nao e uma etapa como as outras: e o estado ANTES de existir pedido. Por isso e a UNICA pilula vazada do conjunto — a borda tracejada diz "provisorio" mesmo pra quem nao distingue as cores, e nao se confunde com o "Recebido" logo ao lado (medido: p-gold e p-wait davam fundos a 1 ponto de distancia, #f7edd6 x #f8eed6 — iguais na pratica). O padding cai 1px porque a borda soma 2px na altura. */ .p-rascunho{background:transparent;color:var(--soft);border:1px dashed var(--faint);padding:2px 8px} /* etiqueta de origem do dado */ .src{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:800;letter-spacing:.06em; padding:2px 6px;border-radius:4px;text-transform:uppercase;vertical-align:middle} .src-erp{background:var(--sky-soft);color:var(--sky)} .src-ns{background:var(--violet-soft);color:var(--violet)} .btn{padding:10px 16px;border-radius:11px;background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff;font-weight:700;font-size:13.5px;box-shadow:0 6px 18px rgba(229,21,126,.26); transition:filter .15s,transform .06s} .btn:hover{filter:brightness(1.06)} .btn:active{transform:translateY(1px)} .btn:disabled{opacity:.5;cursor:not-allowed;filter:none;transform:none} /* --brand-ink e nao --brand no texto do botao vazado: medido, o rosa da marca (#e6007e) sobre o fundo da pagina (#faf4f8) da 4,15:1 e sobre o --sunken da 4,31:1 — os dois abaixo dos 4,5:1 que 12,5px pede. O --brand-ink da 6,41:1. O fundo, a borda e o hover continuam iguais: e o mesmo botao, so legivel. */ .btn.gh{background:none;color:var(--brand-ink);border:1px solid var(--line);box-shadow:none;font-weight:650} .btn.gh:hover{background:var(--brand-soft)} .btn.sm{padding:6px 12px;font-size:12.5px;border-radius:9px;box-shadow:none} .btn.dang{background:linear-gradient(135deg,var(--rose),#e8697a);box-shadow:0 6px 18px rgba(210,59,78,.24)} .field{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:11px;font-size:14px; background:var(--sunken);color:var(--ink);outline:none} .field:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)} label.lb{display:block;font-size:12px;color:var(--soft);margin:0 0 6px;font-weight:650} .prod{display:flex;gap:13px;align-items:center;padding:13px;border:1px solid var(--line); border-radius:13px;background:var(--card)} .prod .th{width:46px;height:46px;border-radius:10px;flex:none;display:grid;place-items:center; background:linear-gradient(135deg,var(--brand-soft),var(--card-2));color:var(--brand);font-weight:800} .prod .nm{font-weight:650;font-size:14px} .prod .mt{font-size:11.5px;color:var(--faint);font-family:var(--mono)} .prod .pr{margin-left:auto;text-align:right;padding-left:10px} .prod .pr .now{font-weight:800;font-size:16px;color:var(--brand);font-variant-numeric:tabular-nums} .prod .pr .was{font-size:11.5px;color:var(--faint);text-decoration:line-through} .note{border-left:3px solid var(--brand);background:var(--card-2);padding:13px 15px;border-radius:0 11px 11px 0; font-size:13px;color:var(--soft)} .note b{color:var(--ink)} .note.warn{border-left-color:var(--amber);background:var(--amber-soft);color:var(--amber-ink)} .note.warn b{color:var(--amber-ink)} .bar{height:8px;border-radius:6px;background:var(--line);overflow:hidden} .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--brand-2));transition:width .4s} .rowb{display:flex;align-items:center;gap:12px;flex-wrap:wrap} ul.tight{margin:8px 0 0;padding-left:18px;font-size:13px;color:var(--soft)} ul.tight li{margin:3px 0} .vazio{text-align:center;color:var(--faint);padding:34px 16px;font-size:13.5px} /* ============================================================ LIBERAÇÃO DE DESCONTO POR PRODUTO (tela "Descontos") ============================================================ O catálogo da Iris tem 2.703 produtos e — medido em 21/08/2026 — UMA marca e UMA categoria: nada pra agrupar. Por isso a tela é feita em cima de LISTA COLADA e de linha larga, e não de árvore de categorias que não existe. */ /* A caixa onde ela cola a coluna do Excel, e a caixa de onde ela COPIA de volta os códigos que não casaram. `.field` sozinho serve pra input de uma linha; sem isto o textarea nasce com 2 linhas de altura e a lista colada fica invisível dentro dele. */ textarea.field{min-height:118px;resize:vertical;line-height:1.5} textarea.field[readonly]{background:var(--sunken);color:var(--soft)} /* Uma liberação na lista. É flex COM QUEBRA, e não linha de tabela, de propósito: em 360px a tabela empurraria o botão "Tirar" pra fora da tela — exatamente o defeito que o check 2b da auditoria mede (`div.scroll` com controle 100% fora). Quebrando, o botão desce pra linha de baixo e continua alcançável com o dedo. */ .dlin{display:flex;align-items:center;gap:10px;flex-wrap:wrap; padding:11px 0;border-top:1px solid var(--line2)} .dlin:first-child{border-top:0} .dlin .dnome{min-width:0;flex:1 1 200px} .dlin .dnome b{display:block;font-size:13.5px;font-weight:650;line-height:1.3} .dlin .dpreco{font-variant-numeric:tabular-nums;font-size:12.5px;color:var(--soft)} .dlin .dpreco b{color:var(--brand);font-size:13.5px} /* Um bloco "forma de pagamento" na visão por produto (as 4 lado a lado). `.on` é o liberado — a borda magenta é o que deixa evidente, de relance, quais das quatro dão desconto e quais saem por preço cheio. */ .dcond{border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--sunken)} .dcond.on{border-color:var(--brand);background:var(--brand-soft)} .dcond .dctit{font-size:13px;font-weight:700;line-height:1.25} /* A confirmação da virada de modo. Alvo de toque grande porque ela é a trava de uma mudança que remarca o catálogo inteiro — e um clique acidental aqui vale dinheiro. */ .dcheck{display:flex;gap:10px;align-items:flex-start;cursor:pointer; border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--sunken); font-size:13px;line-height:1.45} .dcheck input{width:20px;height:20px;flex:none;margin:1px 0 0;accent-color:var(--brand)} /* switch */ .sw{position:relative;width:42px;height:24px;flex:none;border-radius:14px;background:var(--line); transition:background .18s;cursor:pointer} .sw::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%; background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .18s} .sw[aria-checked="true"]{background:var(--brand)} .sw[aria-checked="true"]::after{transform:translateX(18px)} /* toast */ /* O deslocamento de saída usa calc(100% + 60px), não uma porcentagem sozinha: com `bottom:26px` e um toast de 45px, o antigo `translateY(140%)` descia só 63px e deixava 8px da barra verde aparecendo no rodapé de TODAS as telas. O opacity/visibility garante que nada sobre mesmo se a altura mudar. */ #toast{position:fixed;left:50%;bottom:26px;z-index:90; transform:translateX(-50%) translateY(calc(100% + 60px));opacity:0;visibility:hidden; background:var(--ink);color:var(--bg);padding:12px 20px;border-radius:12px;font-size:13.5px; font-weight:600;box-shadow:var(--shadow-md);max-width:min(92vw,560px);pointer-events:none; transition:transform .25s,opacity .2s,visibility 0s linear .25s} #toast.on{transform:translateX(-50%) translateY(0);opacity:1;visibility:visible; transition:transform .25s,opacity .2s,visibility 0s} #toast.err{background:var(--rose);color:#fff} #toast.ok{background:var(--emerald);color:#fff} /* modal */ .mask{position:fixed;inset:0;background:rgba(40,10,28,.45);backdrop-filter:blur(3px);z-index:80; display:none;align-items:center;justify-content:center;padding:18px} .mask.on{display:flex} .modal{background:var(--card);border-radius:18px;padding:22px;width:min(560px,100%);max-height:88vh; overflow:auto;box-shadow:var(--shadow-md)} .modal h3{font-family:var(--serif);font-weight:500;font-size:20px;margin-bottom:4px} /* ============================================================ FOLHA "VOCE" — o unico caminho de saida no celular ------------------------------------------------------------ NAO APAGUE ISTO ACHANDO QUE E ENFEITE. No <=860px o menu lateral vira barra de baixo e a `.navrodape` (onde moram "Senha" e "Sair") fica display:none. Sem esta folha a revendedora fica presa dentro do portal no celular — foi o bug que a Iris reportou. Se um dia a .navrodape voltar a aparecer no mobile, ai sim isto pode sair. ------------------------------------------------------------ Reaproveita `.mask` + `.modal`; a classe `.folha` so muda a ancoragem (cola embaixo), o raio de cima e o respiro da barra de navegacao do iOS. ============================================================ */ .mask.folha{align-items:flex-end;padding:0} .folha .modal{width:min(560px,100%);border-radius:20px 20px 0 0; padding:20px 20px calc(20px + env(safe-area-inset-bottom)); /* Rolagem propria e altura em dvh: com o teclado virtual aberto ou a barra do iOS por cima, o "Sair" tem que continuar alcancavel rolando a folha. O vh vem antes como reserva pro navegador que nao conhece dvh. */ max-height:86vh; max-height:86dvh; overflow-y:auto; -webkit-overflow-scrolling:touch; box-shadow:0 -12px 44px rgba(120,20,70,.22)} .folha .puxador{width:38px;height:4px;border-radius:3px;background:var(--line); margin:0 auto 16px} .folha .fq{display:flex;align-items:center;gap:12px} .folha .fq .av{width:44px;height:44px;border-radius:14px;flex:none;display:grid; place-items:center;font-family:var(--serif);font-size:19px;color:#fff; background:linear-gradient(135deg,var(--brand),var(--brand-2))} .folha .fq b{display:block;font-size:15px;line-height:1.25} .folha .fq .hint{margin-top:2px} .folha .acoes{display:flex;flex-direction:column;gap:9px;margin-top:20px} /* 48px de alvo de toque — acima dos 44px minimos, igual ao resto do mobile */ .folha .acoes .btn{width:100%;min-height:48px;display:flex;align-items:center; justify-content:center;gap:8px;font-size:14.5px} /* SEM animacao de entrada, de proposito. A versao com `translateY` ficou MEDIDA presa no primeiro quadro quando o navegador estrangula a animacao (aba em segundo plano / sem compor quadros): o box parava 14px ABAIXO da dobra, ou seja, o conserto do "nao tem botao de sair" reintroduzia o proprio problema. Aparecer na hora e o comportamento do `.mask` que ja existe no app — e aqui isso vale mais do que o deslize. */ /* ============================================================ FOLHA "MAIS" — a barra de baixo nao esconde tela nenhuma ------------------------------------------------------------ IRMA DA FOLHA "VOCE" ACIMA, E PELO MESMO MOTIVO. A barra do celular tem um numero FINITO de fatias: em 360px cabem 7. O menu da Iris tem 12 telas. Antes as que sobravam ficavam FORA DA TELA — medido em 20/08: "Contas", "Catalogo", "VHSYS" e "Ajustes" com 0% visivel em 12 telas — e so apareciam arrastando a barra, sem NADA avisar que ela arrasta. Pra quem nao sabe que rola, o controle nao existe: e o mesmo sumico de 12/08, com outra causa. Agora a barra leva as N primeiras telas (a ordem do trabalho do dia) + "Mais" + "Voce", e o "Mais" abre esta folha com TODAS as telas em grade, a atual marcada. Nada depende de uma rolagem que ninguem ve. ------------------------------------------------------------ Reaproveita `.mask` + `.modal` + `.folha`, igual a folha "Voce": mesma ancoragem embaixo, mesma rolagem propria, mesmo respiro da barra do iOS. So a grade e nova. ============================================================ */ .folha .menugrade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:15px} @media(min-width:520px){.folha .menugrade{grid-template-columns:repeat(3,minmax(0,1fr))}} /* 66px de alto: bem acima dos 44px de alvo de toque, e apertado o bastante pra as 12 telas da Iris caberem com pouca rolagem na folha (que rola, e tem puxador dizendo isso). */ .folha .menugrade button{display:flex;flex-direction:column;align-items:flex-start;gap:6px; min-height:66px;padding:11px;border-radius:13px;border:1px solid var(--line); background:var(--sunken);color:var(--soft);font-size:13px;font-weight:650; text-align:left;line-height:1.25;transition:border-color .12s,background .12s} .folha .menugrade button svg{flex:none;color:var(--brand);opacity:.9} .folha .menugrade button:hover{border-color:var(--brand-soft);background:var(--card-2)} .folha .menugrade button[aria-current="page"]{background:var(--brand-soft); border-color:var(--brand);color:var(--brand-ink)} .folha .menugrade button[aria-current="page"] svg{color:var(--brand-ink);opacity:1} .folha .fq .av.avmenu{background:linear-gradient(135deg,var(--brand-2),var(--brand))} /* ============================================================ ESQUELETO DO BOOT — o app nunca abre em branco ------------------------------------------------------------ Medido em 20/08 com 1200ms de latencia: o portal ficava EM BRANCO de 1077 a 2515ms depois do `load`, nas 19 telas. Tela branca e indistinguivel de app quebrado — a pessoa fecha. Este bloco e `.view.on` no HTML servido, entao pinta no PRIMEIRO quadro, antes de qualquer JavaScript rodar; o proprio `ir()` tira o `.on` dele quando a primeira tela de verdade entra (ele varre TODA `.view`), sem precisar de ninguem lembrar de apagar. SEM fade de entrada, pelo mesmo motivo da folha "Voce": uma animacao estrangulada pelo navegador deixaria o esqueleto preso invisivel e a tela voltaria a ser branca. ============================================================ */ .esq-l{height:12px;border-radius:6px;background:var(--line2)} .esq-l.g{height:26px;border-radius:8px;margin:9px 0 7px;background:var(--line)} .esq-l + .esq-l{margin-top:8px} /* O brilho e so no fundo do bloco cinza — nao mexe em opacity nem em transform, entao nao tem como deixar nada "preso no primeiro quadro". */ @media(prefers-reduced-motion:no-preference){ .esqueleto .esq-l{background-image:linear-gradient(90deg,transparent 12%,rgba(255,255,255,.75) 32%,transparent 52%); background-size:260% 100%;animation:esq-brilho 1.25s linear infinite} } @keyframes esq-brilho{from{background-position:120% 0}to{background-position:-120% 0}} /* ============================================================ DOBRA FECHADA NAO OCUPA LAYOUT ------------------------------------------------------------ O que ela DESLIGA: o layout do conteudo de um `
` que esta FECHADO — nada mais. Aberto (`[open]`), a regra nao casa e tudo volta ao normal; `summary` nunca e atingido; o `innerHTML` e o `.value` dos campos continuam funcionando com `display:none` (e assim que o `salvarCampanha()` le o #cPed). O que ela CONSERTA: o Chrome ainda CALCULA a posicao dos filhos de um `
` fechado. Medido em 20/08: os campos do regulamento (dentro da dobra fechada da tela a-camp) reportavam retangulo de 43px de altura em y=1211 e apareciam na auditoria como "controle atras da barra de baixo" — um campo que a pessoa nao ve nem alcanca. ============================================================ */ .dobra:not([open]) > *:not(summary){display:none} /* carrinho */ .cart{position:sticky;bottom:0;background:var(--card);border:1px solid var(--line);border-radius:15px; padding:14px 18px;box-shadow:var(--shadow-md);display:flex;align-items:center;gap:14px;flex-wrap:wrap} .qty{display:flex;align-items:center;gap:8px} .qty button{width:28px;height:28px;border-radius:8px;background:var(--sunken);border:1px solid var(--line); font-weight:800;color:var(--brand);display:grid;place-items:center} .qty span{min-width:26px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums} /* etapas do pedido */ .etapas{display:flex;gap:6px;align-items:center;flex-wrap:wrap} .etapa{font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;background:var(--line2);color:var(--faint)} /* --emerald-ink, nao --emerald: 11px em negrito precisa de 4,5:1 e o tom base dava 3,07:1 sobre o --emerald-soft (mesma medicao dos "-ink" la em cima). So melhora contraste — o verde continua verde. */ .etapa.feito{background:var(--emerald-soft);color:var(--emerald-ink)} .etapa.atual{background:var(--brand-soft);color:var(--brand-ink)} /* ---------- campanha: o veredito ---------- */ .veredito{border-left:4px solid var(--brand);overflow:hidden;position:relative} .veredito.sim{border-left-color:var(--gold); background:linear-gradient(120deg,var(--card) 55%,var(--gold-soft))} .veredito .vsel{width:56px;height:56px;border-radius:16px;flex:none;display:grid;place-items:center; background:var(--brand-soft);color:var(--brand)} .veredito.sim .vsel{background:var(--gold-soft);color:var(--gold)} .veredito .vtag{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase; color:var(--faint)} .veredito.sim .vtag{color:var(--gold)} .veredito .vtitulo{font-family:var(--serif);font-weight:500;font-size:23px;margin-top:4px;line-height:1.2} .veredito .vsub{margin:7px 0 0;font-size:13.5px;color:var(--soft)} .vbloq{display:flex;align-items:flex-start;gap:7px;margin-top:10px;font-size:12.5px; color:var(--amber-ink);background:var(--amber-soft);padding:9px 12px;border-radius:10px} .vbloq svg{flex:none;margin-top:1px} .minik{background:var(--sunken);border:1px solid var(--line);border-radius:12px;padding:11px 13px} .minik .mk{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)} .minik .mv{font-family:var(--serif);font-size:24px;line-height:1.15;margin-top:3px; font-variant-numeric:tabular-nums} /* ---------- trilha de níveis ---------- */ .trilha{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px} @media(max-width:900px){.trilha{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:480px){.trilha{grid-template-columns:1fr}} .nivel{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:15px 13px; text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px; box-shadow:var(--shadow-sm);position:relative;transition:transform .18s,border-color .18s} .nivel.ok{border-color:var(--gold);background:linear-gradient(160deg,var(--card),var(--gold-soft))} .nivel.resg{opacity:.72} .nivel .nqtd{width:40px;height:40px;border-radius:50%;display:grid;place-items:center; font-family:var(--serif);font-size:19px;background:var(--line2);color:var(--soft)} .nivel.ok .nqtd{background:var(--gold);color:#fff} .nivel .nlab{font-size:10.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.06em} .nivel .npremio{font-size:12.5px;font-weight:650;line-height:1.35;min-height:34px} @media(hover:hover){.nivel:hover{transform:translateY(-3px)}} .indcard{border-left:3px solid var(--line)} .indcard.sim{border-left-color:var(--gold)} @media(max-width:860px){ .shell{grid-template-columns:1fr} aside{position:fixed;bottom:0;left:0;right:0;top:auto;z-index:30;flex-direction:row;overflow-x:auto; border-right:0;border-top:1px solid var(--line);padding:7px 8px;gap:3px} /* A .navrodape (nome, "Senha", "Sair") nao cabe numa barra horizontal de 56px de altura. Quem assume o papel dela no celular e o item "Voce" da barra, que abre a .folha — sem ele a pessoa NAO TEM COMO SAIR do portal pelo celular (foi exatamente o bug reportado pela Iris). */ .brand,.navrodape{display:none} /* `sticky right:0` NAO e enfeite: a barra rola na horizontal quando passa de 7 itens, e o "Voce" nasceu FORA DA TELA — medido, x=390 num viewport de 375 com o menu de admin (9 itens). Preso na direita ele fica sempre alcancavel sem rolar, que e exatamente o ponto do conserto. O fundo e a sombra existem pra os outros itens rolarem POR BAIXO dele sem virar sopa de icone. */ nav button.so-mobile{display:flex;position:sticky;right:0;background:var(--card); box-shadow:-10px 0 12px -8px rgba(120,20,70,.18)} /* NEVOA DE "TEM MAIS PRO LADO". Com 13 itens (menu da Iris) ou 11 (representante), a barra rola — e o item que fica no limite era CORTADO EM SECO na borda, o que nao se le como "rola", se le como "acabou". A nevoa desbota o que passa por baixo do "Voce" e devolve a afordancia. Ela pendura no ::before do proprio "Voce" porque ele e o unico elemento que NAO rola junto (sticky) — qualquer pseudo no