/* easytrip — componentes (v2). Mobile-first, fintech polido. Tema CLARO (azul sobre branco). Nenhuma cor literal aqui: tudo sai de tokens.css. As unicas excecoes sao rgba(255,255,255,x) sobre fundo AZUL (painel/botao de marca) e rgba(15,23,42,x) de veu. Para realce sobre superficie clara use var(--realce): branco translucido some no claro. Tints fracos de status (chip, badge, msg-erro) sao derivados com color-mix a partir dos tokens — assim continuam mudando junto com a paleta. */ /* ---------- shell ---------- */ .app-shell{ min-height:100vh; padding-bottom: calc(var(--bottomnav-h) + 20px); } .topbar{ position: sticky; top:0; z-index:20; min-height: var(--topbar-h); display:flex; align-items:center; justify-content:space-between; gap:12px; padding: 12px var(--espaco); background: var(--cor-superficie); color: var(--txt-principal); border-bottom: 1px solid var(--borda); /* barra sticky: sem blur o conteudo rola VISIVEL atras do vidro */ -webkit-backdrop-filter: var(--vidro-blur); backdrop-filter: var(--vidro-blur); } .topbar h1{ font-size:1.05rem; margin:0; color:var(--txt-principal); font-weight:700; letter-spacing:-.02em; } .topbar .sub{ font-size:.8rem; color:var(--txt-secundario); margin-top:2px; } .topbar .sub #statusMes, .topbar .sub span{ font-weight:600; color:var(--txt-principal); } .topbar .avatar{ width:36px; height:36px; border-radius:50%; flex:0 0 auto; background: var(--grad-brand); color:var(--txt-sobre-cor); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.82rem; } .conteudo{ padding: var(--espaco); max-width: 720px; margin: 0 auto; } /* ---------- cards ---------- */ /* .card e container (nao item de lista repetido): o blur aqui e barato. */ .card{ background:var(--cor-superficie); border:1px solid var(--borda); border-radius:var(--raio); box-shadow:var(--sombra-card); padding: 16px; margin-bottom: 14px; -webkit-backdrop-filter: var(--vidro-blur); backdrop-filter: var(--vidro-blur); } .card .rotulo{ color:var(--txt-secundario); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; font-weight:600; } .valor-destaque{ font-size:1.75rem; font-weight:800; font-variant-numeric: tabular-nums; letter-spacing:-.02em; margin-top:2px; } .grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } /* card "total hoje": o numero de destaque usa --cor-acento (azul da marca no tema claro). */ .grid-2 .card:first-child{ background: var(--cor-superficie); border:1px solid var(--borda); color:var(--txt-principal); box-shadow: var(--sombra-card); } .grid-2 .card:first-child::after{ content:none; } .grid-2 .card:first-child .rotulo{ color: var(--txt-secundario); } .grid-2 .card:first-child .valor-destaque{ color: var(--cor-acento); } /* saudacao Eva — balao com avatar */ .saudacao-lia{ position:relative; background:var(--cor-superficie); border:1px solid var(--borda); border-radius:var(--raio); padding:14px 16px 14px 56px; margin-bottom:16px; color:var(--txt-principal); font-size:.95rem; box-shadow:var(--sombra-sm); } .saudacao-lia::before{ content:"Eva"; position:absolute; left:12px; top:50%; transform:translateY(-50%); width:32px; height:32px; border-radius:50%; /* era var(--grad-verde), token que NUNCA existiu: o avatar renderizava transparente */ background:var(--cor-secundaria); color:var(--txt-sobre-cor); display:flex; align-items:center; justify-content:center; font-size:.62rem; font-weight:700; letter-spacing:.02em; box-shadow:0 4px 10px -2px color-mix(in srgb, var(--cor-secundaria) 45%, transparent); } /* ---------- botoes ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:0 18px; border:1px solid var(--borda); border-radius:var(--raio-sm); background:var(--cor-superficie-2); color:var(--txt-principal); font-weight:600; cursor:pointer; transition: transform .06s ease, box-shadow .2s ease, background .2s ease, filter .2s ease; } .btn:hover{ background:var(--realce); } .btn:active{ transform: translateY(1px) scale(.995); } .btn:disabled{ opacity:.55; cursor:default; } .btn-primario{ background:var(--grad-brand); color:var(--txt-sobre-cor); border-color:transparent; box-shadow: var(--sombra-md); } .btn-primario:hover{ filter: brightness(1.12); background:var(--grad-brand); } .btn-bloco{ width:100%; } .btn-grande{ width:100%; min-height:var(--toque-min); font-size:1rem; border-radius:var(--raio); margin-bottom:12px; justify-content:flex-start; gap:14px; padding:12px 16px; background:var(--cor-superficie); border:1px solid var(--borda); box-shadow:var(--sombra-sm); position:relative; } .btn-grande:hover{ background:var(--cor-superficie-2); box-shadow:var(--sombra-md); transform: translateY(-1px); } .btn-grande .ico{ font-size:1.25rem; width:44px; height:44px; flex:0 0 auto; border-radius:14px; display:flex; align-items:center; justify-content:center; background:var(--cor-superficie-2); } .btn-grande .txt{ display:flex; flex-direction:column; align-items:flex-start; line-height:1.2; } .btn-grande .txt small{ font-weight:400; color:var(--txt-secundario); font-size:.78rem; margin-top:1px; } .btn-grande::after{ content:"›"; position:absolute; right:16px; top:50%; transform:translateY(-50%); color:var(--txt-suave); font-size:1.5rem; font-weight:400; } .btn-grande.btn-primario{ background:var(--grad-brand); border:none; color:var(--txt-sobre-cor); } .btn-grande.btn-primario .ico{ background:rgba(255,255,255,.18); } /* sobre o azul do gradiente, --txt-secundario cairia pra ~2.4:1; branco a 80% le melhor */ .btn-grande.btn-primario .txt small{ color:rgba(255,255,255,.8); } .btn-grande.btn-primario::after{ color:rgba(255,255,255,.7); } .acoes-rapidas{ display:flex; flex-direction:column; margin:16px 0 4px; } /* ---------- chips de status ---------- */ /* Pill com tint da propria cor (~16%) derivado por color-mix a partir do token: nao entra hex novo e trocar o token troca o fundo junto. Os tokens de status ja sao escuros o bastante para servirem de TEXTO sobre o tint claro. */ .chip{ display:inline-block; padding:3px 11px; border-radius:var(--raio-pill); font-size:.74rem; font-weight:700; letter-spacing:.01em; margin-top:6px; } .chip-verde{ background:color-mix(in srgb, var(--cor-secundaria) 16%, transparent); color:var(--cor-secundaria); } .chip-amarelo{ background:color-mix(in srgb, var(--cor-atencao) 16%, transparent); color:var(--cor-atencao); } .chip-vermelho{ background:color-mix(in srgb, var(--cor-erro) 16%, transparent); color:var(--cor-erro); } .chip-cinza{ background:var(--cor-superficie-2); color:var(--txt-secundario); } .badge-alerta{ display:inline-block; padding:1px 8px; border-radius:7px; font-size:.68rem; font-weight:600; background:color-mix(in srgb, var(--cor-atencao) 14%, transparent); border:1px solid color-mix(in srgb, var(--cor-atencao) 34%, transparent); color:var(--cor-atencao); margin-left:6px; vertical-align:middle; } .badge-fora{ background:color-mix(in srgb, var(--cor-erro) 14%, transparent); border-color:color-mix(in srgb, var(--cor-erro) 34%, transparent); color:var(--cor-erro); } /* ---------- lista de despesas ---------- */ .lista{ list-style:none; margin:0; padding:0; } /* item repetido: SEM backdrop-filter (mata a rolagem no celular) */ .item-despesa{ background:var(--cor-superficie); border:1px solid var(--borda); border-radius:var(--raio); padding:14px; margin-bottom:10px; display:flex; justify-content:space-between; align-items:flex-start; gap:12px; box-shadow:var(--sombra-sm); transition: box-shadow .2s ease, transform .08s ease; } .item-despesa:hover{ box-shadow:var(--sombra-md); transform: translateY(-1px); } /* O card ja se levantava no hover, mas nao abria nada. Com data-id ele abre o detalhe da despesa — o cursor passa a dizer isso. */ .item-despesa[data-id]{ cursor:pointer; } /* avatar de categoria (injetado pelo JS via ::before nao da; usamos classe .cat-ava) */ .item-despesa .cat-ava{ width:42px; height:42px; border-radius:13px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; font-weight:800; color:var(--txt-principal); font-size:.95rem; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); } .item-despesa .corpo{ min-width:0; flex:1; } .item-despesa .cat{ font-weight:700; font-size:.98rem; } .item-despesa .meta{ color:var(--txt-secundario); font-size:.84rem; margin-top:2px; } .item-despesa .dir{ text-align:right; white-space:nowrap; } .item-despesa .vlr{ font-weight:800; font-variant-numeric:tabular-nums; font-size:1.02rem; letter-spacing:-.01em; } /* ---------- filtros ---------- */ .filtros{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; } .filtro-chip{ border:1px solid var(--borda-forte); background:var(--cor-superficie); border-radius:var(--raio-pill); padding:7px 15px; font-size:.86rem; font-weight:600; color:var(--txt-secundario); cursor:pointer; transition: all .15s ease; box-shadow:var(--sombra-sm); } .filtro-chip:hover{ border-color:var(--cor-primaria-3); color:var(--cor-primaria-3); } .filtro-chip.ativo{ background:var(--grad-brand); color:var(--txt-sobre-cor); border-color:transparent; box-shadow:var(--sombra-md); } /* rótulo do grupo (Período / Situação): deixa claro que são dois eixos combináveis */ .filtro-rot{ font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--txt-secundario); margin-right:2px; align-self:center; min-width:62px; } .filtros[data-grupo]{ margin-bottom:8px; } .filtros[data-grupo="situacao"]{ margin-bottom:16px; } /* ---------- form ---------- */ .campo{ margin-bottom:16px; } .campo label{ display:block; font-size:.82rem; color:var(--txt-secundario); margin-bottom:6px; font-weight:600; } .campo input, .campo select, .campo textarea{ width:100%; min-height:50px; padding:12px 14px; border:1.5px solid var(--borda-forte); border-radius:var(--raio-sm); background:var(--cor-superficie-2); color:var(--txt-principal); transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; } /* placeholder e TEXTO: --txt-suave reprovaria AA, entao sobe para --txt-secundario */ .campo input::placeholder, .campo textarea::placeholder{ color:var(--txt-secundario); } /* NAO clarear o fundo no foco: com texto --txt-principal o campo branco apagava o valor */ .campo input:focus, .campo select:focus, .campo textarea:focus{ outline:none; border-color:var(--cor-primaria-3); background:var(--cor-superficie-2); box-shadow: var(--anel); } .campo textarea{ min-height:88px; resize:vertical; } /* Seta do select desenhada com 2 gradientes em vez de data-URI: dentro de url() nao existe var(), e o hex fixo do tema claro sumia no escuro. */ .campo select{ appearance:none; -webkit-appearance:none; cursor:pointer; background-image: linear-gradient(45deg, transparent 50%, var(--txt-secundario) 50%), linear-gradient(135deg, var(--txt-secundario) 50%, transparent 50%); background-repeat:no-repeat, no-repeat; background-position: right 19px center, right 14px center; background-size: 6px 6px, 6px 6px; padding-right:42px; } .campo select option{ background:var(--cor-superficie-solida); color:var(--txt-principal); } .linha-2{ display:grid; grid-template-columns:2fr 1fr; gap:12px; } /* Item de grid tem min-width:auto: conteúdo largo (seletor de viagem, linha de abastecimento) alargava a coluna e a PÁGINA inteira ficava maior que o celular. */ .linha-2 > *{ min-width:0; } /* Detalhe da despesa/aprovação: dados + comprovantes lado a lado só no desktop; no celular empilha (comprovante embaixo dos dados). */ @media (max-width:900px){ .detalhe-2col{ grid-template-columns:1fr; } } /* ---------- bottom nav ---------- */ /* Barra fixa por cima do conteudo rolando: SOLIDA. Translucida deixava o texto da lista atravessar o menu. Sendo solida, o blur so custaria bateria. */ .bottomnav{ position:fixed; left:0; right:0; bottom:0; height:var(--bottomnav-h); z-index:30; background:var(--cor-superficie-solida); border-top:1px solid var(--borda); display:flex; justify-content:space-around; align-items:center; padding-bottom: env(safe-area-inset-bottom); box-shadow:var(--sombra-lg); } /* e o menu principal do vendedor: --txt-suave a .7rem reprovava AA */ .bottomnav a{ flex:1; text-align:center; color:var(--txt-secundario); font-size:.7rem; font-weight:600; text-decoration:none; display:flex; flex-direction:column; align-items:center; gap:3px; padding-top:8px; transition: color .15s ease; } .bottomnav a .ico{ font-size:1.2rem; line-height:1; filter: grayscale(.2); transition: transform .15s ease; } .bottomnav a.ativo{ color:var(--cor-primaria-3); } .bottomnav a.ativo .ico{ filter:none; transform: translateY(-1px); } .bottomnav a:not(.nova):active .ico{ transform: scale(.9); } .bottomnav a.nova{ } /* o anel do FAB recorta a barra: precisa da MESMA cor solida dela */ .bottomnav a.nova .ico{ background:var(--grad-brand); color:var(--txt-sobre-cor); width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-top:-26px; font-size:1.7rem; font-weight:300; box-shadow: var(--sombra-md), 0 0 0 5px var(--cor-superficie-solida); } .bottomnav a.nova .ico{ filter:none; } .bottomnav a.nova:active .ico{ transform: scale(.95); } .bottomnav a.nova.ativo .ico{ filter: brightness(1.08); } /* ---------- login ---------- ATENCAO: a regra de layout de .tela-login e a de mais abaixo (o grid de 2 colunas). Ate 25/08/2026 existiam DUAS declaracoes da mesma classe — esta, com display:flex, e a de baixo, com display:grid. A segunda ganhava o layout, mas o overflow:hidden e o position desta continuavam valendo, entao metade das propriedades vinha de um bloco e metade do outro: mexer numa e ver a outra responder. Aqui ficou so a decoracao (os dois circulos de luz); layout, so no bloco do grid. */ .tela-login::before{ content:""; position:absolute; width:420px; height:420px; border-radius:50%; background: radial-gradient(circle at center, rgba(255,255,255,.10), transparent 70%); top:-140px; right:-120px; } .tela-login::after{ content:""; position:absolute; width:360px; height:360px; border-radius:50%; background: radial-gradient(circle at center, rgba(255,255,255,.12), transparent 70%); bottom:-120px; left:-120px; } .card-login{ position:relative; z-index:1; background:var(--cor-superficie-solida); border-radius:var(--raio-lg); padding:30px 24px 24px; width:100%; max-width:390px; border:1px solid var(--borda); box-shadow: var(--sombra-lg); } .card-login .marca{ text-align:center; margin-bottom:4px; font-size:1.5rem; font-weight:800; color:var(--cor-primaria-3); letter-spacing:-.02em; } .card-login .slogan{ text-align:center; color:var(--txt-secundario); font-size:.88rem; margin-bottom:22px; } .card-login .btn{ margin-top:4px; } .card-login .link{ display:block; text-align:center; margin-top:16px; font-size:.9rem; font-weight:600; color:var(--cor-primaria-3); } .card-login .link:hover{ text-decoration:underline; } /* ---------- toast / erro / vazio ---------- */ .msg-erro{ background:color-mix(in srgb, var(--cor-erro) 12%, transparent); color:var(--cor-erro); border:1px solid color-mix(in srgb, var(--cor-erro) 30%, transparent); border-radius:var(--raio-sm); padding:11px 14px; font-size:.9rem; margin-bottom:14px; display:none; } .msg-erro.show{ display:block; } /* Aviso que PRECISA ficar na tela (ex.: o login gerado da empresa nova). Toast some em 2,6s — curto demais para quem tem que copiar o dado. */ .msg-ok{ background:color-mix(in srgb, var(--cor-secundaria) 12%, transparent); color:var(--txt-principal); border:1px solid color-mix(in srgb, var(--cor-secundaria) 35%, transparent); border-radius:var(--raio-sm); padding:11px 14px; font-size:.9rem; margin-bottom:14px; display:none; } .msg-ok.show{ display:block; } .msg-ok code{ font-weight:700; } /* toast era quase-preto: sobre fundo quase-preto sumia. Solido + borda pra descolar. */ #toast{ position:fixed; left:50%; bottom:calc(var(--bottomnav-h) + 20px); transform:translateX(-50%) translateY(8px); background:var(--cor-superficie-solida); color:var(--txt-principal); border:1px solid var(--borda-forte); padding:11px 18px; border-radius:var(--raio-pill); font-size:.9rem; font-weight:500; z-index:50; opacity:0; transition:opacity .22s ease, transform .22s ease; pointer-events:none; box-shadow:var(--sombra-lg); } #toast.show{ opacity:1; transform:translateX(-50%) translateY(0); } .vazio{ text-align:center; color:var(--txt-secundario); padding:44px 16px; font-size:.95rem; } .vazio::before{ content:"📭"; display:block; font-size:2.2rem; margin-bottom:8px; opacity:.7; } /* ---------- tela de login (split: 2 cards flutuantes sobre o fundo do tema) ---------- */ @keyframes login-in{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } } .tela-login{ position:relative; overflow:hidden; min-height:100vh; display:grid; grid-template-columns:1fr 1fr; align-items:stretch; gap:24px; padding:24px; background: var(--grad-fundo); } /* painel esquerdo = VIDRO (era branco solido). Blur so aqui: e o container. */ .login-esq{ display:flex; align-items:center; justify-content:center; padding:40px 30px; background:var(--cor-superficie); border:1px solid var(--borda); border-radius:22px; box-shadow:var(--sombra-lg); -webkit-backdrop-filter: var(--vidro-blur); backdrop-filter: var(--vidro-blur); animation:login-in .5s cubic-bezier(.2,.7,.2,1) both; } .login-card{ width:100%; max-width:400px; } /* Marca a ESQUERDA, no tamanho de assinatura. Centralizada e grande ela virava o assunto da tela; o assunto e entrar. */ .login-logo{ height:34px; width:auto; display:block; margin:0 0 26px; } .login-tit{ font-size:1.75rem; font-weight:800; letter-spacing:-.03em; line-height:1.2; color:var(--txt-principal); } .login-sub{ color:var(--txt-secundario); margin:6px 0 24px; font-size:.94rem; } /* SEM moldura propria: .login-esq ja e o cartao. Ate 25/08/2026 o formulario tinha fundo, borda, raio e sombra dentro de um pai com fundo, borda, raio e sombra — duas superficies identicas empilhadas, que e o que fazia a tela parecer uma caixa dentro da outra sem que nada ali estivesse "errado". */ .login-form{ background:none; border:none; border-radius:0; padding:0; box-shadow:none; } .login-form .campo{ margin-bottom:16px; } .login-form label{ display:block; font-size:.8rem; font-weight:600; margin-bottom:7px; color:var(--txt-secundario); letter-spacing:.01em; } .inp-ic{ position:relative; } .inp-ic .bi{ position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--txt-suave); pointer-events:none; transition:color .15s; } /* input precisa de fundo proprio + borda visivel para nao sumir dentro do cartao */ .inp-ic input{ width:100%; height:50px; padding:0 42px 0 40px; border:1px solid var(--borda-forte); border-radius:12px; background:var(--cor-superficie-2); font-size:.97rem; color:var(--txt-principal); transition:background .15s, border-color .15s, box-shadow .15s; } .inp-ic input::placeholder{ color:var(--txt-secundario); } .inp-ic input:hover{ border-color:var(--txt-suave); } /* sem clarear o fundo no foco: o texto e claro e sumiria */ .inp-ic input:focus{ background:var(--cor-superficie-2); border-color:var(--cor-primaria-3); box-shadow:var(--anel); outline:none; } .inp-ic:focus-within .bi{ color:var(--cor-primaria-3); } .inp-ic .eye{ position:absolute; right:8px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; color:var(--txt-secundario); padding:6px; border-radius:6px; transition:color .15s, background .15s; } .inp-ic .eye:hover{ color:var(--cor-primaria-3); background:var(--cor-superficie-2); } .login-row{ display:flex; align-items:center; justify-content:space-between; margin:2px 0 22px; font-size:.86rem; } .login-row .link{ color:var(--cor-primaria-3); font-weight:600; } .login-row .link:hover{ text-decoration:underline; } /* checkbox custom "Lembrar-me" */ .chk{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; margin:0; font-weight:500; color:var(--txt-secundario); } .chk input{ appearance:none; -webkit-appearance:none; width:18px; height:18px; border:1.5px solid var(--borda-forte); border-radius:5px; background:var(--cor-superficie-2); cursor:pointer; position:relative; transition:background .15s, border-color .15s; flex:0 0 auto; } .chk input:checked{ background:var(--cor-primaria-3); border-color:var(--cor-primaria-3); } /* o check fica sobre azul CLARO (--cor-primaria-3): risco branco sumiria */ .chk input:checked::after{ content:""; position:absolute; left:5px; top:2px; width:5px; height:9px; border:solid var(--txt-sobre-cor); border-width:0 2px 2px 0; transform:rotate(45deg); } .chk input:focus-visible{ box-shadow:var(--anel); } .btn-entrar{ width:100%; height:52px; border:none; border-radius:12px; background:var(--grad-brand); color:var(--txt-sobre-cor); font-weight:700; font-size:1rem; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px; position:relative; box-shadow:var(--sombra-md); transition:transform .12s, box-shadow .15s, filter .15s; } .btn-entrar:hover{ transform:translateY(-1px); box-shadow:var(--sombra-lg); filter:brightness(1.12); } .btn-entrar:active{ transform:translateY(0); } .btn-entrar svg{ transition:transform .15s; } .btn-entrar:hover svg{ transform:translateX(3px); } .btn-entrar:disabled{ cursor:default; filter:saturate(.7); transform:none; } .btn-entrar.loading .txt, .btn-entrar.loading svg{ visibility:hidden; } .btn-entrar.loading::after{ content:""; position:absolute; width:20px; height:20px; border:2.5px solid rgba(255,255,255,.45); border-top-color:var(--txt-sobre-cor); border-radius:50%; animation:spin .7s linear infinite; } @keyframes spin{ to{ transform:rotate(360deg); } } .login-ou{ display:flex; align-items:center; gap:12px; text-align:center; color:var(--txt-secundario); font-size:.78rem; margin:18px 0; } .login-ou::before, .login-ou::after{ content:""; flex:1; height:1px; background:var(--borda); } .btn-google{ width:100%; height:46px; border:1px solid var(--borda-forte); border-radius:10px; background:var(--cor-superficie); font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px; color:var(--txt-principal); transition:background .15s, border-color .15s; } .btn-google:hover{ background:var(--cor-superficie-2); border-color:var(--borda-forte); } .login-copy{ text-align:left; color:var(--txt-secundario); font-size:.78rem; margin-top:20px; } .login-dir{ position:relative; overflow:hidden; color:var(--txt-sobre-cor); padding:56px 52px; border-radius:22px; display:flex; flex-direction:column; justify-content:center; background: radial-gradient(700px 380px at 85% 8%, rgba(255,255,255,.14), transparent 60%), var(--grad-brand); animation:login-in .5s cubic-bezier(.2,.7,.2,1) both; animation-delay:.06s; } /* padrao de pontos sutil (data-URI, CSP img-src data: ok) */ .login-dir::before{ content:""; position:absolute; inset:0; opacity:.5; pointer-events:none; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='1.5' cy='1.5' r='1.5' fill='rgba(255,255,255,0.10)'/%3E%3C/svg%3E"); } .login-dir > *{ position:relative; z-index:1; } .login-eyebrow{ display:inline-flex; align-items:center; gap:8px; align-self:flex-start; margin-bottom:18px; padding:5px 12px; border-radius:999px; background:rgba(255,255,255,.14); font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; } .login-eyebrow::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--cor-secundaria); box-shadow:0 0 0 3px color-mix(in srgb, var(--cor-secundaria) 30%, transparent); } .login-dir h2{ font-size:2.05rem; font-weight:800; letter-spacing:-.025em; line-height:1.15; margin:0; } .login-dir .lead{ opacity:.9; margin:10px 0 30px; font-size:1.05rem; } .login-feat{ display:flex; gap:14px; align-items:flex-start; margin-bottom:16px; max-width:470px; padding:10px; border-radius:12px; transition:background .15s; } .login-feat:hover{ background:rgba(255,255,255,.07); } .login-feat .fic{ width:44px; height:44px; border-radius:12px; background:rgba(255,255,255,.16); display:flex; align-items:center; justify-content:center; flex:0 0 auto; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); } .login-feat b{ display:block; font-size:1rem; } .login-feat p{ margin:2px 0 0; opacity:.82; font-size:.88rem; line-height:1.4; } /* ---------- marcar O MOMENTO (convite / redefinicao de senha) ---------- As telas de login, cadastro, convite e senha compartilham o mesmo shell de proposito. O efeito colateral e que so o TEXTO muda entre elas: quem chega pelo link do convite bate o olho e o cerebro classifica como "tela de login" — e a pessoa tenta entrar em vez de criar a senha. Os blocos abaixo existem para dar um sinal que se le antes da leitura: de quem veio o convite (selo) e o que vai acontecer aqui (etapas numeradas no lugar das features de marketing). */ /* Selo " convidou voce" — emprestando a confianca da empresa do usuario, que ele conhece, em vez da nossa marca, que ele nunca viu. */ .selo-convite{ display:flex; align-items:center; gap:10px; margin:0 0 18px; padding:10px 14px; border-radius:var(--raio-md,12px); background:color-mix(in srgb, var(--cor-primaria) 9%, transparent); border:1px solid color-mix(in srgb, var(--cor-primaria) 22%, transparent); } .selo-convite .sc-ic{ width:34px; height:34px; flex:0 0 auto; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--cor-primaria); color:var(--txt-sobre-cor); } .selo-convite .sc-emp{ display:block; font-weight:700; font-size:.95rem; color:var(--txt-principal); line-height:1.25; word-break:break-word; } .selo-convite .sc-leg{ display:block; font-size:.75rem; color:var(--txt-secundario); } /* Etapas numeradas do painel direito. Substituem .login-feat quando a tela nao e de venda: quem ja foi cadastrado nao precisa que o produto se apresente. */ .login-passos{ list-style:none; margin:0 0 26px; padding:0; max-width:470px; } .login-passos li{ display:flex; gap:14px; align-items:flex-start; margin-bottom:14px; } .login-passos .pn{ width:28px; height:28px; flex:0 0 auto; border-radius:50%; background:rgba(255,255,255,.18); box-shadow:inset 0 0 0 1px rgba(255,255,255,.22); display:flex; align-items:center; justify-content:center; font-size:.85rem; font-weight:800; } .login-passos b{ display:block; font-size:1rem; } .login-passos p{ margin:2px 0 0; opacity:.82; font-size:.88rem; line-height:1.4; } /* Passo ja concluido (o convite chegou = o gestor ja te cadastrou) */ .login-passos li.feito .pn{ background:var(--cor-secundaria); box-shadow:none; } .login-passos li.feito b{ opacity:.75; text-decoration:line-through; text-decoration-thickness:1px; } /* Nota de validade/seguranca no rodape do painel */ .login-nota{ display:flex; gap:10px; align-items:flex-start; max-width:470px; padding:12px 14px; border-radius:12px; background:rgba(255,255,255,.10); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); font-size:.85rem; line-height:1.45; } .login-nota svg{ flex:0 0 auto; margin-top:1px; opacity:.9; } @media (max-width:820px){ .tela-login{ grid-template-columns:1fr; padding:16px; gap:16px; } .login-dir{ display:none; } } /* ---------- tour guiado (spotlight) ---------- */ /* O escuro e o proprio recorte: box-shadow gigante ilumina o alvo e escurece o resto numa peca so. Com 4 divis aparecia costura ao rolar a pagina. No tema escuro o veu subiu de .72 para .86: contra um fundo ja escuro, .72 nao separava o "buraco" do spotlight do resto da tela. */ .tour-ov{ position:fixed; inset:0; z-index:1000; } body.tour-aberto{ overflow:hidden; } .tour-spot{ position:fixed; border-radius:10px; pointer-events:none; box-shadow: 0 0 0 9999px rgba(15,23,42,.62), 0 0 0 3px rgba(255,255,255,.95); transition: top .22s ease, left .22s ease, width .22s ease, height .22s ease; } .tour-spot.oculto{ box-shadow: 0 0 0 9999px rgba(15,23,42,.62); width:0; height:0; top:50%; left:50%; } /* popover: SOLIDO. Translucido deixaria ler a pagina por baixo do texto do tour. */ .tour-balao{ position:fixed; z-index:1001; width:min(340px, calc(100vw - 24px)); background:var(--cor-superficie-solida); border:1px solid var(--borda-forte); border-radius:14px; padding:18px 18px 14px; box-shadow:var(--sombra-lg); } .tour-balao.centro{ top:50%; left:50%; transform:translate(-50%,-50%); } .tour-passo-num{ font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--cor-primaria-3); margin-bottom:6px; } .tour-tit{ font-size:1.06rem; font-weight:800; letter-spacing:-.015em; margin-bottom:6px; color:var(--txt-principal); } .tour-txt{ font-size:.88rem; line-height:1.5; color:var(--txt-secundario); } .tour-acoes{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:16px; } .tour-nav{ display:flex; gap:8px; } .tour-pular{ background:none; border:0; padding:6px 2px; font-size:.82rem; font-weight:600; color:var(--txt-secundario); cursor:pointer; } .tour-pular:hover{ color:var(--txt-principal); text-decoration:underline; } @media (max-width:520px){ .tour-balao{ left:12px !important; right:12px; width:auto; top:auto !important; bottom:16px; } .tour-balao.centro{ top:50% !important; bottom:auto; transform:translateY(-50%); left:12px !important; } } /* ---------- modal de onboarding (aviso do WhatsApp) ---------- */ .onb-modal{ text-align:center; } .onb-ic{ width:56px; height:56px; margin:0 auto 12px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:color-mix(in srgb, var(--cor-secundaria) 16%, transparent); color:var(--cor-secundaria); } .onb-modal .modal-acoes{ justify-content:center; } /* ---------- auto-cadastro (trial): mesma moldura do login, form mais alto ---------- */ /* Sao 7 campos contra 3 do login: o card cresce e o painel esquerdo passa a rolar sozinho, senao o botao de enviar fica fora da tela em notebook de 768px. */ .login-card-larga{ max-width:470px; } .login-esq:has(.login-card-larga){ align-items:flex-start; overflow-y:auto; } .cad-secao{ font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.07em; color:var(--cor-primaria-3); margin:4px 0 12px; padding-bottom:7px; border-bottom:1px solid var(--borda); } .cad-secao + .campo{ margin-top:0; } .login-form .cad-secao:not(:first-of-type){ margin-top:20px; } .cad-opc{ font-weight:500; color:var(--txt-secundario); text-transform:none; letter-spacing:0; } .cad-dica{ font-size:.76rem; color:var(--txt-secundario); margin-top:5px; line-height:1.35; } .cad-termos{ display:flex; gap:9px; align-items:flex-start; margin:16px 0 4px; font-size:.83rem; line-height:1.4; color:var(--txt-secundario); } .cad-termos input{ margin-top:2px; flex:0 0 auto; } .cad-termos a{ color:var(--cor-primaria-3); font-weight:600; } /* Honeypot: tem de ficar submetivel (nao pode display:none em alguns bots), mas invisivel. */ .cad-armadilha{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } /* aceite dos termos como texto (nao mais checkbox obrigatorio) */ .cad-termos-txt{ font-size:.76rem; line-height:1.45; color:var(--txt-secundario); text-align:center; margin:12px 0 4px; } .cad-termos-txt a{ color:var(--cor-primaria-3); font-weight:600; } /* medidor de forca da senha: barra + rotulo. O TEXTO carrega a informacao sozinho — cor sozinha excluiria daltonicos. */ .senha-forca{ display:flex; align-items:center; gap:9px; margin-top:7px; } .sf-trilha{ flex:1; height:4px; border-radius:var(--raio-pill); background:var(--cor-superficie-2); overflow:hidden; } .sf-barra{ display:block; height:100%; width:0; border-radius:var(--raio-pill); background:var(--txt-suave); transition: width .22s ease, background .22s ease; } .sf-barra.n1{ background:var(--cor-erro); } .sf-barra.n2{ background:var(--cor-atencao); } .sf-barra.n3{ background:var(--cor-primaria-3); } .sf-barra.n4{ background:var(--cor-secundaria); } .sf-txt{ font-size:.72rem; font-weight:700; min-width:92px; text-align:right; color:var(--txt-suave); } .sf-txt.n1{ color:var(--cor-erro); } .sf-txt.n2{ color:var(--cor-atencao); } .sf-txt.n3{ color:var(--cor-primaria-3); } .sf-txt.n4{ color:var(--cor-secundaria); } /* ---------- card triplo (viagem: adiantamento / prestado / saldo) ---------- */ .grid-3-triplo{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-top:12px; } .tri{ background:var(--cor-superficie-2); border:1px solid var(--borda); border-radius:12px; padding:10px 8px; text-align:center; } .tri .r{ font-size:.64rem; text-transform:uppercase; letter-spacing:.03em; color:var(--txt-secundario); font-weight:700; } .tri .v{ font-size:1.02rem; font-weight:800; font-variant-numeric:tabular-nums; margin-top:3px; letter-spacing:-.01em; } .tri.pos .v{ color:var(--cor-secundaria); } .tri.neg .v{ color:var(--cor-erro); } /* ---- Controle de roteiro (viagem-detalhe) ---- As duas leituras de odometro lado a lado, com a distancia rodada no fim. Em tela estreita vira coluna e a seta some: em pilha ela apontaria para o lado errado. */ .roteiro-pontas{ display:flex; align-items:stretch; gap:10px; flex-wrap:wrap; } .roteiro-pontas .ponta{ flex:1 1 150px; min-width:140px; background:var(--cor-superficie-2); border:1px solid var(--borda); border-radius:12px; padding:10px 12px; } .roteiro-pontas .ponta.total{ background:transparent; border-style:dashed; } .roteiro-pontas .rot{ font-size:.64rem; text-transform:uppercase; letter-spacing:.03em; color:var(--txt-secundario); font-weight:700; } .roteiro-pontas .km{ display:block; font-size:1.06rem; font-weight:800; font-variant-numeric:tabular-nums; margin:2px 0 2px; letter-spacing:-.01em; } .roteiro-pontas .seta{ align-self:center; color:var(--txt-suave); font-size:1.1rem; } .roteiro-pontas .foto-link{ font-size:.78rem; } @media (max-width:560px){ .roteiro-pontas .seta{ display:none; } } /* Painel da leitura: aparece no lugar, sem trocar de tela. */ .leitura-box{ margin-top:12px; padding:12px; border:1px dashed var(--borda); border-radius:12px; background:var(--cor-superficie-2); } .leitura-box .campo{ margin-bottom:10px; } /* Tabela larga (planejado x realizado) rola sozinha; a pagina nunca rola de lado. */ .tabela-rolagem{ overflow-x:auto; } /* ---------- acoes de aprovacao (financeiro) ---------- */ .acoes-aprov{ display:flex; gap:8px; margin-top:8px; } .btn-acao{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:var(--raio-sm); border:1px solid var(--borda-forte); background:var(--cor-superficie); color:var(--txt-secundario); cursor:pointer; transition:filter .15s ease, opacity .15s ease; } .btn-acao:disabled{ opacity:.5; cursor:default; } .btn-acao.btn-aprovar{ border-color:var(--cor-secundaria); color:var(--cor-secundaria); } .btn-acao.btn-reprovar{ border-color:var(--cor-erro); color:var(--cor-erro); } .btn-acao.btn-corrigir{ border-color:var(--cor-atencao); color:var(--cor-atencao); } /* no escuro o hover tem de CLAREAR: brightness(.94) escurecia o icone ate sumir */ .btn-acao:not(:disabled):hover{ filter:brightness(1.25); } @media (min-width:900px){ .conteudo{ padding:24px; } } /* Aviso de localização na Nova despesa. Verde quando o ponto foi capturado, cinza quando não — negar a permissão não é erro, então não usa a cor de erro. */ .loc-ok{ color:var(--cor-secundaria); font-weight:600; } .loc-off{ color:var(--txt-suave); } /* Abas do tipo de comprovante (NF / Cupom Fiscal / Não fiscal). Botão-pill em vez de select: são três opções curtas e a escolha muda o campo seguinte — ver as três de uma vez explica a regra sozinha. */ .abas-comprovante{ display:flex; gap:8px; flex-wrap:wrap; } .abas-comprovante .aba{ flex:1 1 auto; min-height:42px; padding:0 14px; cursor:pointer; background:var(--cor-superficie); color:var(--txt-secundario); border:1px solid var(--borda); border-radius:var(--raio-sm); font-weight:600; font-size:.88rem; transition:background .15s, border-color .15s, color .15s; } .abas-comprovante .aba:hover{ border-color:var(--borda-forte); } .abas-comprovante .aba.ativa{ background:var(--cor-primaria-100); border-color:var(--cor-primaria); color:var(--cor-primaria-3); } .abas-comprovante .aba:focus-visible{ outline:2px solid var(--cor-primaria); outline-offset:2px; } /* ---------- "O que mudou" (novidades por versão) ---------- */ .nov-cab{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:10px; } .nov-versao{ font-weight:700; font-size:1.02rem; letter-spacing:-.01em; } .nov-lista{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; } /* Barra à esquerda em vez de bullet: separa os itens sem transformar a lista numa enumeração — a ordem entre eles não significa nada. */ .nov-item{ border-left:2px solid var(--cor-primaria-100); padding-left:12px; } .nov-item b{ display:block; font-size:.95rem; letter-spacing:-.01em; } .nov-item p{ margin:3px 0 0; font-size:.9rem; color:var(--txt-secundario); line-height:1.5; } .nov-onde{ display:inline-block; margin-top:5px; font-size:.74rem; font-weight:600; color:var(--cor-primaria-3); background:var(--cor-primaria-100); padding:2px 8px; border-radius:var(--raio-pill); } /* No modal a lista rola: um deploy grande não pode empurrar o botão para fora da tela. */ .nov-modal .nov-lista{ max-height:min(46vh, 380px); overflow-y:auto; text-align:left; margin:14px 0 4px; padding-right:4px; } .nov-modal .modal-tit{ text-align:left; } .nov-modal .rotulo{ text-align:left; } /* ---------- Orçamento sugerido da viagem ---------- */ .orc{ background:var(--cor-superficie-2); border:1px solid var(--borda); border-radius:var(--raio-sm); padding:14px; margin-bottom:14px; } .orc-cab{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:10px; } .orc-linha{ display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:10px; padding:7px 0; border-bottom:1px dashed var(--borda); font-size:.9rem; } .orc-linha:last-of-type{ border-bottom:0; } .orc-linha b{ font-variant-numeric:tabular-nums; } .orc-cat{ display:inline-flex; align-items:center; gap:7px; font-weight:600; } .orc-total{ display:flex; align-items:baseline; justify-content:space-between; margin-top:10px; padding-top:10px; border-top:1px solid var(--borda-forte); } .orc-total b{ font-size:1.2rem; font-variant-numeric:tabular-nums; color:var(--cor-acento); } /* Categoria sem teto no orçamento: o traço fica apagado para não competir com os valores que realmente somam. */ .orc-zero{ color:var(--txt-suave); font-weight:600; } /* Linhas editáveis do planejamento: quantidade × valor unitário = subtotal. */ .orc-linha{ grid-template-columns:1fr auto auto; } .orc-campos{ display:inline-flex; align-items:center; gap:6px; } .orc-qtd{ width:62px; text-align:center; } .orc-vu{ width:92px; text-align:right; } .orc-campos input{ min-height:36px; padding:4px 8px; border:1px solid var(--borda); border-radius:var(--raio-sm); background:var(--cor-superficie); font-size:.88rem; font-variant-numeric:tabular-nums; } .orc-campos input:focus{ outline:2px solid var(--cor-primaria); outline-offset:1px; border-color:var(--cor-primaria); } .orc-x{ color:var(--txt-suave); font-size:.85rem; } .orc-sub{ min-width:92px; text-align:right; } /* Linha ainda não preenchida fica apagada: a lista mostra todas as categorias, e só as que somam devem puxar o olho. */ .orc-linha.vazia{ opacity:.55; } .orc-linha.vazia .orc-sub{ color:var(--txt-suave); } .orc-tag{ margin-left:6px; font-size:.68rem; font-weight:700; color:var(--cor-atencao); background:color-mix(in srgb, var(--cor-atencao) 14%, transparent); padding:1px 7px; border-radius:var(--raio-pill); } /* Campo travado: mostra um dado que o sistema decide (ex.: o veículo do vendedor). Cinza e sem cursor de texto para não convidar a digitar. */ .campo-travado{ background:var(--cor-superficie-2) !important; color:var(--txt-secundario); cursor:default; } .campo-alerta{ color:var(--cor-atencao); font-weight:600; } /* ===================================================================== [hidden] TEM DE ESCONDER. O atributo hidden vale display:none pela folha do NAVEGADOR, que perde para qualquer classe nossa com display explicito — .btn-desk e inline-flex, .msg-erro.show e block. Resultado: `el.hidden = true` no JS nao escondia nada nesses elementos, e a tela mostrava botao que deveria estar guardado (achado em 24/08/2026 na tela de plano: os dois botoes de pagamento apareciam juntos, mais uma caixa de erro vazia). Regra unica no fim do arquivo, com !important, porque a alternativa e caçar caso a caso e errar no proximo componente que definir display. ===================================================================== */ [hidden]{ display:none !important; } /* ============================================================ CADASTRO PERGUNTA POR PERGUNTA (25/08/2026) Uma pergunta por tela. As perguntas sao as mesmas de antes; o que mudou e o ritmo. Os tamanhos aqui sao maiores do que no resto do app de proposito: com um campo sozinho na tela, o tamanho normal de formulario faz a tela parecer vazia em vez de focada. ============================================================ */ .cad-wiz{ max-width:460px; } /* Topo: voltar a esquerda, contador a direita. Altura fixa para a barra e a pergunta nao pularem quando o botao Voltar aparece no passo 2. */ .wiz-topo{ display:flex; align-items:center; justify-content:space-between; min-height:30px; margin-bottom:8px; } .wiz-voltar{ display:inline-flex; align-items:center; gap:6px; background:none; border:none; cursor:pointer; padding:5px 8px 5px 4px; margin-left:-4px; border-radius:8px; font-size:.85rem; font-weight:600; color:var(--txt-secundario); transition:color .15s, background .15s; } .wiz-voltar:hover{ color:var(--cor-primaria-3); background:var(--cor-superficie-2); } .wiz-trilha{ height:4px; border-radius:4px; background:var(--borda); overflow:hidden; margin-bottom:18px; } .wiz-barra{ display:block; height:100%; width:20%; border-radius:4px; background:var(--cor-primaria-3); transition:width .28s ease; } /* A pergunta e o titulo da tela — nao um label acima de um campo. */ .wiz-pergunta{ font-size:1.5rem; line-height:1.25; font-weight:800; letter-spacing:-.025em; color:var(--txt-principal); margin:0 0 8px; text-wrap:balance; } .wiz-ajuda{ font-size:.9rem; line-height:1.55; color:var(--txt-secundario); margin:0 0 18px; } .wiz-inp{ width:100%; height:54px; padding:0 16px; border:1px solid var(--borda-forte); border-radius:12px; background:var(--cor-superficie-2); font-size:1.05rem; color:var(--txt-principal); transition:border-color .15s, box-shadow .15s; } .wiz-inp::placeholder{ color:var(--txt-secundario); } .wiz-inp:hover{ border-color:var(--txt-suave); } .wiz-inp:focus{ border-color:var(--cor-primaria-3); box-shadow:var(--anel); outline:none; } /* O olho fica DENTRO do campo; o padding a direita abre espaco para ele nao cobrir o texto */ .wiz-inp-senha{ position:relative; } .wiz-inp-senha .wiz-inp{ padding-right:46px; } .wiz-inp-senha .eye{ position:absolute; right:10px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; color:var(--txt-secundario); padding:6px; border-radius:6px; transition:color .15s, background .15s; } .wiz-inp-senha .eye:hover{ color:var(--cor-primaria-3); background:var(--cor-superficie-2); } .wiz-passo .senha-forca{ margin-top:12px; } .tela-wizard .btn-entrar{ margin-top:20px; } .wiz-enter{ text-align:center; font-size:.78rem; color:var(--txt-suave); margin:10px 0 0; } .wiz-enter kbd{ font:inherit; font-weight:700; background:var(--cor-superficie-2); border:1px solid var(--borda); border-radius:5px; padding:1px 6px; } /* Sem animacao para quem pediu menos movimento: a barra pula direto para o valor novo. */ @media (prefers-reduced-motion: reduce){ .wiz-barra{ transition:none; } } /* Cadastro sem o painel lateral: quem clicou em "criar conta" ja decidiu — o painel de venda ao lado passa a competir com a pergunta em vez de ajudar. Uma coluna so, centralizada, e o cartao com a largura de leitura de sempre. */ .tela-wizard{ grid-template-columns:1fr; } .tela-wizard .login-esq{ padding:40px 24px; } .tela-wizard .cad-wiz{ margin:0 auto; } /* O Chrome pinta o campo autopreenchido com um fundo proprio (o "amarelado"/cinza) e ignora background-color — a unica forma de sobrepor e um box-shadow interno da cor da superficie. Sem isso o campo autopreenchido destoa de todos os outros da tela, e no wizard, onde ha um campo sozinho, o contraste fica gritante. O -webkit-text-fill-color mantem o texto legivel, ja que o color tambem e ignorado. */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus{ -webkit-box-shadow: 0 0 0 1000px var(--cor-superficie-2) inset; box-shadow: 0 0 0 1000px var(--cor-superficie-2) inset; -webkit-text-fill-color: var(--txt-principal); /* a transicao longa e o truque conhecido para o Chrome nao repintar no foco */ transition: background-color 100000s ease-in-out 0s; caret-color: var(--txt-principal); } /* ============================================================ MINI PLAYER DE TUTORIAL (26/08/2026) Player FLUTUANTE no canto — nao modal. A tela fica inteira e clicavel atras dele: da para assistir e executar o passo ao mesmo tempo, que e o ponto de um tutorial de sistema. A primeira versao abria por cima de tudo e obrigava a fechar o video para fazer o que ele acabou de ensinar. ============================================================ */ /* Canto inferior, ACIMA da bottomnav do celular: sobrepor a navegacao trocaria uma ajuda por um obstaculo. */ .tut-botao{ position:fixed; right:18px; z-index:40; bottom:calc(var(--bottomnav-h, 0px) + 18px); display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border:none; border-radius:var(--raio-pill, 999px); background:var(--grad-brand); color:var(--txt-sobre-cor); cursor:pointer; font-family:inherit; font-size:.86rem; font-weight:600; box-shadow:var(--sombra-lg); transition:transform .12s, box-shadow .15s, filter .15s, opacity .2s; } .tut-botao:hover{ transform:translateY(-1px); filter:brightness(1.1); } .tut-botao:active{ transform:translateY(0); } .tut-botao:focus-visible{ outline:none; box-shadow:var(--sombra-lg), var(--anel); } /* Quem ja assistiu nao precisa do convite chamando atencao — mas continua achando. */ .tut-botao.visto{ background:var(--cor-superficie-solida); color:var(--txt-secundario); border:1px solid var(--borda-forte); box-shadow:var(--sombra-sm); font-weight:500; } .tut-botao.visto:hover{ color:var(--cor-primaria-3); filter:none; } /* Com o player aberto o botao vira "fechar": some do caminho sem sumir da tela. */ .tut-botao.ativo{ opacity:.55; } /* ---- o player ---- */ .tut-mini{ position:fixed; z-index:45; width:min(360px, calc(100vw - 32px)); background:var(--cor-superficie-solida); border:1px solid var(--borda); border-radius:14px; overflow:hidden; box-shadow:var(--sombra-lg); /* Acima dos DOIS botoes do canto (tutorial em +18, ajuda em +68): cobrir um deles esconderia justamente o caminho de volta. */ bottom:calc(var(--bottomnav-h, 0px) + 126px); } .tut-mini.lado-dir{ right:18px; left:auto; } .tut-mini.lado-esq{ left:18px; right:auto; } .tut-barra{ display:flex; align-items:center; gap:4px; padding:8px 8px 8px 14px; background:var(--cor-superficie-2); border-bottom:1px solid var(--borda); cursor:pointer; } .tut-tit{ flex:1; min-width:0; font-size:.84rem; font-weight:600; color:var(--txt-principal); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .tut-ic{ flex:0 0 auto; width:28px; height:28px; display:flex; align-items:center; justify-content:center; background:none; border:none; cursor:pointer; color:var(--txt-secundario); border-radius:7px; font-size:.9rem; line-height:1; transition:background .15s, color .15s; } .tut-ic:hover{ background:var(--realce, rgba(15,23,42,.06)); color:var(--txt-principal); } .tut-ic:focus-visible{ outline:none; box-shadow:var(--anel); } /* display:block tira a folga de linha-base que o