/* ========================================================== Sistema de Vendas - Estilos base pt-BR / UTF-8 ========================================================== */ *, *::before, *::after { box-sizing: border-box; } /* ========================================================== SCROLLBAR GLOBAL — fina e minimalista, igual em todos os elementos roláveis. Firefox usa scrollbar-width/color (nativo); Chrome/Edge/Safari usam ::-webkit-scrollbar. Sem isto, containers sem estilo próprio caíam no scrollbar GROSSO e escuro padrão do SO no Chrome (vertical e horizontal). Elementos específicos (.conteudo, .modal-body...) ainda podem refinar. ========================================================== */ * { scrollbar-width: thin; /* Firefox: barra fina */ scrollbar-color: var(--borda-forte, #cbd5e1) transparent; } *::-webkit-scrollbar { width: 8px; height: 8px; } /* vertical + horizontal */ *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--borda-forte, #cbd5e1); border-radius: 8px; border: 2px solid transparent; /* "respiro" — afina o thumb */ background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background: var(--texto-fraco, #94a3b8); background-clip: content-box; } *::-webkit-scrollbar-corner { background: transparent; } /* ========================================================== THEMING — pares semânticos (light = default + dark override) REGRA INVARIANTE: NUNCA hex/rgb hardcoded em color: ou background: novos. Use SEMPRE uma var dessa lista. Light e dark precisam ter o MESMO conjunto de vars — se faltar dark, o site quebra (text invisível em bg dinâmico). Em dark mode, --primary vira blurple Discord (#7289DA) por padrão (botões primários ficam blurple). Hovers de menu/sidebar continuam SUTIS (bg-hover) tanto em light quanto em dark — nada de blurple sólido em hover. ========================================================== */ :root { /* --primary é sobrescrito pelo /api/aparencia/theme.css quando há tema customizado por tenant; sem isso, fica o laranja oficial. --cor-primaria mantém-se como alias pra retrocompatibilidade. */ --cor-primaria: #FF6B00; --primary: #FF6B00; --primary-hover:#E05E00; --primary-soft: color-mix(in srgb, var(--primary) 12%, transparent); --texto-on-primary: #FFFFFF; --texto: #0F1115; --texto-fraco: #6B7280; --texto-medio: #2A2F3A; --texto-disabled:#9CA3AF; --bg: #F7F8FA; --bg-card: #FFFFFF; --bg-elevado: #F9FAFB; /* hover de linha, sticky header, área levantada */ --bg-hover: #F3F4F6; /* hover de botão ghost, item de menu */ --bg-disabled: #F9FAFB; --input-bg: #FFFFFF; /* input/select/textarea — light igual ao card */ --input-borda: #E5E7EB; --borda: #E5E7EB; --borda-forte: #CAD1D9; --overlay: rgba(0,0,0,.45); --sucesso: #10B981; --erro: #EF4444; --aviso: #F59E0B; --info: #3B82F6; /* Badges/pills semânticos — pares fg/bg validados WCAG AA */ --badge-success-bg: #DCFCE7; --badge-success-fg: #15803D; --badge-erro-bg: #FEE2E2; --badge-erro-fg: #991B1B; --badge-aviso-bg: #FEF3C7; --badge-aviso-fg: #92400E; --badge-info-bg: #DBEAFE; --badge-info-fg: #1E40AF; --badge-neutro-bg: #F3F4F6; --badge-neutro-fg: #374151; --sombra: 0 1px 2px rgba(15,17,21,.06); --sombra-md: 0 4px 12px rgba(15,17,21,.08); --sombra-lg: 0 20px 40px -12px rgba(15,17,21,.15); --sombra-orange:0 10px 30px color-mix(in srgb, var(--primary) 25%, transparent); --raio: 10px; --raio-sm: 8px; --raio-lg: 16px; --raio-xl: 24px; --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif; --font-body: 'Inter', 'Segoe UI', Roboto, system-ui, -apple-system, sans-serif; } /* DARK MODE — paleta Discord-inspired. Aplicado quando . Especificidade (0,1,1) vence :root (0,0,1), então sobrepõe o theme.css da empresa em dark mode (intencional — branding empresa só vale no light). */ :root[data-theme="dark"] { --primary: #7289DA; /* Discord blurple */ --primary-hover: #5B6EAE; --primary-soft: color-mix(in srgb, var(--primary) 18%, transparent); --texto-on-primary: #FFFFFF; --cor-primaria: #7289DA; /* alias legado */ --texto: #DCDDDE; --texto-fraco: #99AAB5; /* Discord text secondary */ --texto-medio: #B9BBBE; --texto-disabled:#6B7280; --bg: #23272A; /* Discord darkest */ --bg-card: #2C2F33; /* Discord card */ --bg-elevado: #36393F; /* Discord channel hover */ --bg-hover: #36393F; --bg-disabled: #2C2F33; --input-bg: #40444B; /* Discord input "sunken" — mais escuro que card pra contraste */ --input-borda: #202225; /* Discord input border (borda escura) */ --borda: #40444B; --borda-forte: #4F545C; --overlay: rgba(0,0,0,.7); /* Cores semânticas em dark: tons mais saturados pra contraste no escuro */ --sucesso: #4ADE80; --erro: #F87171; --aviso: #FCD34D; --info: #93C5FD; /* Badges em dark: bg ESCURO + fg CLARO (inverte o esquema light) */ --badge-success-bg: #1F3A2E; --badge-success-fg: #4ADE80; --badge-erro-bg: #3F1D1D; --badge-erro-fg: #F87171; --badge-aviso-bg: #3F2D14; --badge-aviso-fg: #FCD34D; --badge-info-bg: #1E2A4A; --badge-info-fg: #93C5FD; --badge-neutro-bg: #36393F; --badge-neutro-fg: #B9BBBE; --sombra: 0 1px 2px rgba(0,0,0,.4); --sombra-md: 0 4px 12px rgba(0,0,0,.5); --sombra-lg: 0 20px 40px -12px rgba(0,0,0,.6); --sombra-orange:0 10px 30px color-mix(in srgb, var(--primary) 30%, transparent); /* Esquema de cor nativo do browser — afeta scrollbar, form controls nativos e color-scheme em outras integrações (PDF preview etc). */ color-scheme: dark; } /* Transição suave ao trocar de tema. Não aplica em element-level pra evitar chuva de animações; só nas raízes que geralmente mudam. */ html, body, .card, .modal-content, .topbar, .sidebar, .conteudo { transition: background-color .2s ease, color .2s ease, border-color .2s ease; } /* ===== Dark mode overrides — vencem regras com !important ou alta especificidade ===== */ :root[data-theme="dark"] .sidebar-header, :root[data-theme="dark"] .sidebar.colapsada .sidebar-header { background: var(--bg-card) !important; border-bottom-color: var(--borda) !important; } :root[data-theme="dark"] .modal-content, :root[data-theme="dark"] .dropdown, :root[data-theme="dark"] .user-menu-popup, :root[data-theme="dark"] .tooltip, :root[data-theme="dark"] .toast { background: var(--bg-card) !important; color: var(--texto) !important; border-color: var(--borda) !important; } /* .modal-dialog é o wrapper externo retangular SEM border-radius — não pode receber background, senão aparece uma "caixa" atrás do .modal-content arredondado (12px). Garantimos transparência aqui pra evitar regressão. */ :root[data-theme="dark"] .modal-dialog { background: transparent !important; } :root[data-theme="dark"] .modal-overlay { background: var(--overlay) !important; } /* Tabelas: row hover em vez de bg-elevado claro */ :root[data-theme="dark"] .tabela tbody tr:hover, :root[data-theme="dark"] tr.adm-item:hover td, :root[data-theme="dark"] .table-row:hover { background: var(--bg-elevado) !important; } :root[data-theme="dark"] .tabela thead th, :root[data-theme="dark"] thead th { background: var(--bg-elevado) !important; color: var(--texto-fraco) !important; } /* SweetAlert2 — confirmações/diálogos SEMPRE acima dos modais e drawers do app. Default do SweetAlert é z-index:1060, que fica ATRÁS do drawer de tarefas (1201), dos modais (1000) e do menu de variáveis (1200) — a confirmação "Cancelar esta tarefa?" aparecia por trás do overlay do drawer. Subimos pra um patamar dedicado, ainda abaixo do loading-overlay (99999) e do tour (100000+), pra que o "Carregando" continue cobrindo tudo. NÃO mexe no toast (canto da tela). */ .swal2-container:not(.swal2-toast-shown) { z-index: 10600 !important; } /* SweetAlert2 — popup em dark */ :root[data-theme="dark"] .swal2-popup { background: var(--bg-card) !important; color: var(--texto) !important; } :root[data-theme="dark"] .swal2-title, :root[data-theme="dark"] .swal2-html-container { color: var(--texto) !important; } /* TOAST (canto da tela) — em AMBOS os temas: fundo de card sólido + texto forte. O default do SweetAlert pintava o título numa cor clara que somava com o fundo tingido (rosa no warning/erro) e ficava ilegível. Forçamos contraste real e damos a "cor" do toast por uma barra à esquerda. */ .swal2-toast { background: var(--bg-card) !important; color: var(--texto) !important; box-shadow: 0 4px 16px rgba(0,0,0,.18) !important; border: 1px solid var(--borda) !important; } .swal2-toast .swal2-title, .swal2-toast .swal2-html-container { color: var(--texto) !important; } .swal2-toast.swal2-icon-error { border-left: 4px solid #dc2626 !important; } .swal2-toast.swal2-icon-warning { border-left: 4px solid #d97706 !important; } .swal2-toast.swal2-icon-success { border-left: 4px solid #16a34a !important; } .swal2-toast.swal2-icon-info { border-left: 4px solid #2563eb !important; } :root[data-theme="dark"] .swal2-input, :root[data-theme="dark"] .swal2-select, :root[data-theme="dark"] .swal2-textarea { background: var(--input-bg) !important; color: var(--texto) !important; border-color: var(--input-borda) !important; } html, body { margin: 0; padding: 0; font-family: var(--font-body); color: var(--texto); background: var(--bg); -webkit-font-smoothing: antialiased; } /* Sem sublinhado em links — nem no estado normal, nem no hover/focus. O destaque visual fica por conta de cor/peso, não de underline. (Padrão antigo "a:hover {text-decoration: underline}" foi removido.) */ a, a:hover, a:focus, a:active, a:visited { color: var(--primary); text-decoration: none; } /* Botões e elementos que fazem papel de botão NUNCA devem ter sublinhado, mesmo se forem . Cobre todos os estados pra evitar que regras locais herdadas adicionem underline acidental. */ button, .btn, .btn-card, .btn-acao, .btn-icone, a.btn, a.btn-card, a.btn-acao, a.btn-icone, button:hover, button:focus, button:active, .btn:hover, .btn:focus, .btn:active, .btn-card:hover, .btn-card:focus, .btn-card:active, .btn-acao:hover, .btn-acao:focus, .btn-acao:active, .btn-icone:hover, .btn-icone:focus, .btn-icone:active { text-decoration: none !important; } /* ----- Headlines em Space Grotesk (display) ----- */ h1, h2, h3 { font-family: var(--font-display); color: var(--texto); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 .35rem; } h1 { font-weight: 700; font-size: 1.75rem; } h2 { font-weight: 700; font-size: 1.4rem; } h3 { font-weight: 600; font-size: 1.15rem; } /* ----- Botões — alinhado ao design system (ink primary, shadow-orange) ----- */ .btn { display: inline-flex; align-items: center; gap: .5rem; padding: .65rem 1.1rem; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--bg-card); color: var(--texto); font-size: .9rem; font-weight: 600; cursor: pointer; transition: background .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease; box-shadow: var(--sombra); } .btn:hover { background: var(--bg); border-color: var(--borda-forte); /* Salvaguarda: pareia o fundo claro do hover com texto escuro. Sem isso, botão colorido (texto branco) que NÃO tem :hover próprio cai aqui, troca só o fundo p/ claro e fica branco-no-branco (ilegível). Variantes coloridas definem o próprio :hover depois e vencem esta regra. */ color: var(--texto); transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn:disabled { opacity: .6; cursor: not-allowed; transform: none; } /* `.btn { display:inline-flex }` vence o [hidden] do user-agent (mesma especificidade, autor ganha por ordem) → o atributo `hidden` no botão era ignorado e ele ficava sempre visível. Força esconder quando hidden. */ .btn[hidden] { display: none !important; } .btn-primary, a.btn-primary, a.btn-primary:hover, a.btn-primary:focus, a.btn-primary:visited { background: var(--primary); color: #fff; border-color: var(--primary); box-shadow: var(--sombra-orange); } .btn-primary:hover, a.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: #fff; /* garante texto branco no hover, mesmo quando o tem regra global de color */ } .btn-secondary, a.btn-secondary, a.btn-secondary:hover, a.btn-secondary:focus, a.btn-secondary:visited { background: var(--bg-card); color: var(--texto); border-color: var(--borda); } .btn-secondary:hover, a.btn-secondary:hover { background: var(--bg); border-color: var(--borda-forte); color: var(--texto); } .btn-ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--texto-fraco); } .btn-ghost:hover { background: rgba(255, 107, 44, .08); border-color: var(--cor-primaria); color: var(--cor-primaria); } .btn-danger, a.btn-danger, a.btn-danger:hover, a.btn-danger:focus, a.btn-danger:visited { background: var(--erro); color: #fff; border-color: var(--erro); } .btn-danger:hover, a.btn-danger:hover { background: #dc2626; color: #fff; } .btn-success, a.btn-success, a.btn-success:hover, a.btn-success:focus, a.btn-success:visited { background: var(--sucesso); color: #fff; border-color: var(--sucesso); } /* Hover próprio — escurece o verde e mantém texto branco. Sem ele, o botão caía no `.btn:hover` (fundo claro) e ficava ilegível. */ .btn-success:hover, a.btn-success:hover, .btn-success:focus, a.btn-success:focus { background: #0E9F70; border-color: #0E9F70; color: #fff; } .btn-bloco { width: 100%; justify-content: center; } .btn-icone { background: transparent; border: 0; color: var(--texto); padding: .5rem; border-radius: 50%; } .btn-icone:hover { background: #e5e7eb; } /* ----- Formulários ----- */ .form-group { margin-bottom: .7rem; } /* v1.1.29 — era 1rem, ficava espaçoso demais */ /* v1.1.56 — Utility: checkbox/radio inline com label. Resolve o padrão antigo em que checkbox vinha com width:100% herdado do .form-group input. Use: */ .check-inline { display: inline-flex; align-items: center; gap: .6rem; cursor: pointer; font-weight: 500; font-size: .9rem; margin: 0; user-select: none; line-height: 1.4; } /* `.form-group .check-inline` (0,2,0) vence o `.form-group label{display:block}` (0,1,1) — sem isso o label de checkbox vira bloco, o `gap` morre e o texto gruda no check. Restaura o inline-flex aqui p/ TODO .check-inline em form. */ .form-group .check-inline { margin-top: .15rem; display: inline-flex; align-items: center; gap: .6rem; width: auto; } .check-inline input[type="checkbox"], .check-inline input[type="radio"] { width: 18px !important; height: 18px !important; min-width: 18px; min-height: 18px; margin: 0; padding: 0; flex-shrink: 0; cursor: pointer; accent-color: var(--primary); line-height: 1; vertical-align: middle; } .check-inline span { line-height: 1.4; } /* Contador de caracteres (window.CharCounter — char-counter.js). Renderizado automaticamente abaixo de [maxlength][data-counter]. */ .char-counter { display: block; margin-top: .2rem; font-size: .72rem; color: var(--texto-fraco); text-align: right; font-variant-numeric: tabular-nums; line-height: 1.2; } .char-counter-alerta { color: #b45309; } .char-counter-cheio { color: #b91c1c; font-weight: 600; } [data-theme="dark"] .char-counter-alerta { color: #fbbf24; } [data-theme="dark"] .char-counter-cheio { color: #fca5a5; } /* Dica de campo (/.field-hint) hugando o input acima. Sem isso o respiro vertical do modal afastava a dica do controle e ela parecia solta — pior ainda quando há char-counter no meio (a dica caía longe da linha "0/150"). Mantém a dica colada e, quando vem depois do contador, sobe pra mesma linha visual. */ .modal-body .form-group small, .modal-body .form-group .field-hint { display: block; margin-top: .25rem; line-height: 1.3; } /* Quando a dica vem logo após o contador de caracteres, encosta as duas. */ .modal-body .form-group .char-counter + small, .modal-body .form-group .char-counter + .field-hint { margin-top: 0; } /* v1.1.xx — Modal "Novo condomínio": Nome e Status empilhados na coluna esquerda, Slug (+ dica) na direita. A coluna com a dica cresce mais, então deixamos as células alinharem ao topo — o Status sobe e cola no Nome, sem o vão que aparecia quando ele era um bloco solto abaixo da linha inteira. Os .form-group internos não repetem a margem inferior do padrão do modal. */ #formTenant .form-row.row-identificacao { align-items: start; } #formTenant .form-row.row-identificacao .form-col { min-width: 0; } #formTenant .form-row.row-identificacao .form-col > .form-group:last-child { margin-bottom: 0; } /* v1.1.56 — Color picker nativo. Sem isso, fica esticado feio. */ .form-group input[type="color"] { width: 56px !important; height: 36px; padding: 2px; cursor: pointer; vertical-align: middle; } .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .75rem; } /* Modal-body usa form-group dentro — mantém um respiro extra na última */ .modal-body .form-group:last-of-type { margin-bottom: .3rem; } /* ── Respiro vertical em TODOS os modais ────────────────────────────── O padrão .form-group (.7rem) + label (.35rem) deixava os campos colados uns nos outros e o label grudado no input. Em modal damos mais ar: afasta cada campo do seguinte, o label do seu controle, e os títulos de seção dos campos vizinhos. Escopo .modal-body pra não inchar forms densos fora de modal (filtros inline, fluxo público, editores). */ .modal-body .form-group { margin-bottom: 1.15rem; } .modal-body .form-group > label { margin-bottom: .5rem; } /* align-items:start — sem isto, o grid estica todas as colunas à altura da mais alta (ex.: a coluna com form-hint de 3 linhas), criando um vão grande abaixo dos campos curtos ao lado. Alinhar ao topo mantém os inputs na mesma linha e o campo seguinte logo abaixo, sem espaço morto. */ .modal-body .form-row { gap: 1rem 1.1rem; margin-bottom: 1.15rem; align-items: start; } .modal-body .form-section-title { margin-top: 2rem; margin-bottom: 1.1rem; } /* REGRA GLOBAL: nenhum modal pode ter scroll horizontal. O corpo rola só na vertical; qualquer conteúdo largo (tabela, código) deve rolar dentro do próprio wrapper com overflow-x:auto, nunca o modal inteiro. box-sizing em todos os campos evita padding/borda estourando a largura da coluna. */ .modal-body { overflow-x: hidden; } .modal-body input, .modal-body select, .modal-body textarea { max-width: 100%; box-sizing: border-box; } .modal-body .form-row > .form-group { min-width: 0; } /* ── Cabeçalho de SEÇÃO do formulário (Identificação / Contato / Endereço...) ── Antes era um

solto sem estilo: o form parecia uma pilha de campos sem divisão. Agora cada seção vira um bloco visual claro — separador no topo, título em destaque com ícone de acento e respiro generoso entre grupos. */ .form-section-title { display: flex; align-items: center; gap: .5rem; margin: 1.6rem 0 .9rem; padding-top: 1rem; border-top: 1px solid var(--borda); font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-medio); } .form-section-title i { color: var(--primary); font-size: .95rem; } /* A 1ª seção do modal não precisa de separador/empurrão no topo. */ .modal-body > .form-section-title:first-child, .modal-body form > .form-section-title:first-child { margin-top: .2rem; padding-top: 0; border-top: none; } /* Modal de terminal (devices): a seção "Identidade" (só-edição) fica com display:none ANTES do 1º título visível ("Identificação"), então o :first-child acima não pega — o título herdava margin/borda de topo e abria um vão vazio no topo do modal ao CRIAR um novo terminal. Aqui zeramos o topo do 1º título de seção que aparece logo após o bloco oculto de identidade. Escopo restrito a #modalDevice pra não afetar modais cujo 1º section-title é uma seção do meio do form (ex.: "Senha" em #modalUsuario). */ #modalDevice #deviceIdentidade[style*="display:none"] + .form-section-title, #modalDevice #deviceIdentidade[style*="display: none"] + .form-section-title { margin-top: .2rem; padding-top: 0; border-top: none; } /* v1.1.29 — variante: 1 campo grande + 2 campos pequenos (host/porta/segurança). Em mobile colapsa pra 1 coluna. */ .form-row.row-host { grid-template-columns: 1fr 110px 140px; } @media (max-width: 540px) { .form-row.row-host { grid-template-columns: 1fr; } } .form-group label { display: block; margin-bottom: .35rem; font-size: .85rem; font-weight: 600; color: var(--texto); } /* v1.1.56 — Estilo unificado de inputs/selects/textareas. Aplica em .form-group input/select/textarea (forms tradicionais) E em inputs "naked" dentro de .modal-body (caixas de busca, etc). Sem isso, inputs fora de .form-group ficavam com aparência crua de browser default. */ .form-group input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not(.no-polish), .form-group select, .form-group textarea, .modal-body input[type="text"]:not(.no-polish):not([type="color"]), .modal-body input[type="email"]:not(.no-polish), .modal-body input[type="tel"]:not(.no-polish), .modal-body input[type="number"]:not(.no-polish), .modal-body input[type="search"]:not(.no-polish), .modal-body input[type="url"]:not(.no-polish), .modal-body input[type="password"]:not(.no-polish), .modal-body input[type="date"]:not(.no-polish), .modal-body input[type="time"]:not(.no-polish), .modal-body input[type="datetime-local"]:not(.no-polish), .modal-body select:not(.no-polish), .modal-body textarea:not(.no-polish) { width: 100%; padding: .6rem .85rem; border: 1.5px solid var(--input-borda); border-radius: var(--raio); font-size: .92rem; font-family: inherit; background: var(--input-bg); color: var(--texto); transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; min-height: 38px; box-shadow: inset 0 1px 1px rgba(0,0,0,.02); } .form-group input:hover:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), .form-group select:hover, .form-group textarea:hover, .modal-body input:hover:not(.no-polish):not([type="color"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]), .modal-body select:hover:not(.no-polish), .modal-body textarea:hover:not(.no-polish) { border-color: var(--borda-forte); } .form-group input::placeholder, .form-group textarea::placeholder, .modal-body input::placeholder, .modal-body textarea::placeholder { color: var(--texto-disabled); font-weight: 400; } .form-group input:focus:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), .form-group select:focus, .form-group textarea:focus, .modal-body input:focus:not(.no-polish):not([type="color"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]), .modal-body select:focus:not(.no-polish), .modal-body textarea:focus:not(.no-polish) { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); background: var(--input-bg); } .form-group input:disabled, .form-group select:disabled, .form-group textarea:disabled { background: var(--bg-disabled); color: var(--texto-disabled); cursor: not-allowed; } /* select com seta customizada (visual mais limpo que a default do browser) */ .form-group select, .modal-body select:not(.no-polish) { -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right .75rem center; padding-right: 2.25rem; } .form-group textarea, .modal-body textarea:not(.no-polish) { min-height: 80px; resize: vertical; } .form-group small { color: var(--texto-fraco); font-size: .75rem; } /* v1.2.x — `.form-control` (input/select/textarea) usado em toolbars/filtros FORA de .form-group/.modal-body (ex.: header de Tarefas, filtros de Tags) ficava cru com a aparência default do browser. Reaplica o mesmo polish unificado aqui. `.no-polish` continua opt-out (ex.: inputs de hora estimada). */ select.form-control:not(.no-polish), input.form-control:not(.no-polish):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), textarea.form-control:not(.no-polish) { width: 100%; padding: .6rem .85rem; border: 1.5px solid var(--input-borda); border-radius: var(--raio); font-size: .92rem; font-family: inherit; background: var(--input-bg); color: var(--texto); transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; min-height: 38px; box-shadow: inset 0 1px 1px rgba(0,0,0,.02); } select.form-control:not(.no-polish):hover, input.form-control:not(.no-polish):hover:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), textarea.form-control:not(.no-polish):hover { border-color: var(--borda-forte); } select.form-control:not(.no-polish):focus, input.form-control:not(.no-polish):focus:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), textarea.form-control:not(.no-polish):focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); background: var(--input-bg); } select.form-control:disabled, input.form-control:disabled, textarea.form-control:disabled { background: var(--bg-disabled); color: var(--texto-disabled); cursor: not-allowed; } input.form-control::placeholder, textarea.form-control::placeholder { color: var(--texto-disabled); font-weight: 400; } /* Seta customizada no select (igual aos selects de form-group). */ select.form-control:not(.no-polish) { -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right .75rem center; padding-right: 2.25rem; } textarea.form-control:not(.no-polish) { min-height: 80px; resize: vertical; } /* v1.1.56 — Checkbox/radio inline com label. - `align-items:center` no flex container deixa caixa e texto no mesmo eixo; - tamanho fixo 18px do checkbox (sem inflar pelo input global do form-group); - `accent-color` colore o "check" com a marca da empresa; - line-height:1 no input mantém a baseline da caixa estável. */ .form-check { display: flex; align-items: flex-start; gap: .6rem; /* top-align: labels com descrição multi-linha não desalinham */ margin: 0; } /* Respiro entre form-checks empilhados (antes ficavam grudados). */ .form-check + .form-check { margin-top: .7rem; } /* Respiro quando um form-check vem logo após um bloco de permissões/funções/ setores: sem isso o checkbox "Forçar redefinição de senha" ficava colado na matriz de permissões acima. */ .permissoes-bloco + .form-check, .funcoes-bloco + .form-check, .setores-bloco + .form-check { margin-top: 1.25rem; } .form-check input[type="checkbox"], .form-check input[type="radio"] { width: 18px !important; height: 18px; /* margin-top fino: alinha o checkbox ao topo do título quando o label tem descrição multi-linha (com align-items:flex-start no wrapper). */ margin: .12rem 0 0; padding: 0; flex-shrink: 0; cursor: pointer; accent-color: var(--primary); line-height: 1; } .form-check label { margin: 0; font-weight: 500; cursor: pointer; line-height: 1.4; user-select: none; } .input-senha { position: relative; } .btn-toggle-senha { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: transparent; border: 0; cursor: pointer; color: var(--texto-fraco); padding: 4px; } /* ----- Login ----- */ /* Fundo da tela de login espelha o legado (painel-adm/login/styles.css): gradiente neutro suave + 3 círculos coloridos com blur que flutuam atrás do card. */ body:has(.login-container) { background: linear-gradient(145deg, var(--bg) 0%, var(--bg-card) 100%); min-height: 100vh; position: relative; overflow-x: hidden; } .login-container { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; position: relative; z-index: 1; } .login-card { width: 100%; max-width: 420px; background: color-mix(in srgb, var(--bg-card) 92%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 2.5rem 2rem; border-radius: 20px; box-shadow: 0 30px 50px -20px rgba(0, 0, 0, .25), 0 8px 16px -8px rgba(0, 0, 0, .08); animation: sv-login-card-appear .55s ease; position: relative; z-index: 1; } @keyframes sv-login-card-appear { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .login-logo { text-align: center; margin-bottom: 1.75rem; } .login-logo i { font-size: 2.25rem; color: var(--cor-primaria); margin-bottom: .5rem; } .login-logo h1 { margin: .25rem 0 0; font-size: 1.25rem; color: var(--texto); } .login-footer { margin-top: 1.5rem; text-align: center; color: var(--texto-fraco); } /* Link "voltar para o início" no canto superior esquerdo da tela de login. */ .login-back-home { position: fixed; top: 1.25rem; left: 1.25rem; z-index: 2; display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .9rem; border-radius: 999px; background: rgba(255, 255, 255, .85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--borda); color: var(--texto-medio); font-size: .88rem; font-weight: 500; text-decoration: none; box-shadow: var(--sombra); transition: all .15s; } .login-back-home:visited { color: var(--texto-medio); } .login-back-home:hover, .login-back-home:focus { background: var(--bg-card); color: var(--texto); border-color: var(--borda-forte); box-shadow: var(--sombra-md); transform: translateX(-2px); text-decoration: none; } .login-back-home:hover i { transform: translateX(-2px); } .login-back-home i { transition: transform .15s; } .login-back-home i { font-size: .85rem; } @media (max-width: 480px) { .login-back-home span { display: none; } .login-back-home { padding: .55rem .7rem; } } /* Decoração de fundo: 3 blobs flutuantes (espelha .login-decoration do legado) */ .login-decoration { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } .decoration-shape { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .3; animation: sv-login-float 20s infinite ease-in-out; } .decoration-shape.shape-1 { top: -10%; right: -5%; width: 400px; height: 400px; background: var(--cor-primaria); animation-delay: 0s; } .decoration-shape.shape-2 { bottom: -10%; left: -5%; width: 350px; height: 350px; background: #0057B8; animation-delay: -5s; } .decoration-shape.shape-3 { top: 40%; left: 50%; transform: translateX(-50%); width: 300px; height: 300px; background: #ff8c3f; opacity: .2; animation-delay: -10s; } @keyframes sv-login-float { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(2%, 2%) scale(1.1); } 66% { transform: translate(-2%, -2%) scale(.9); } } @media (max-width: 768px) { .decoration-shape { filter: blur(40px); } .decoration-shape.shape-1 { width: 250px; height: 250px; } .decoration-shape.shape-2 { width: 220px; height: 220px; } .decoration-shape.shape-3 { width: 200px; height: 200px; } } @media (prefers-reduced-motion: reduce) { .decoration-shape { animation: none; } .login-card { animation: none; } } /* ----- Dashboard layout ----- */ /* Quando o layout dashboard estiver presente, o body NÃO rola — quem rola é a área de conteúdo */ body:has(.layout-dashboard) { overflow: hidden; } .layout-dashboard { display: flex; height: 100vh; /* fixo na viewport */ overflow: hidden; } .sidebar { width: 240px; background: var(--bg-card); color: var(--texto); display: flex; flex-direction: column; transition: width .2s; height: 100vh; flex-shrink: 0; /* nunca encolhe */ overflow: hidden; /* scroll é interno na sidebar-nav */ border-right: 1px solid var(--borda); } .sidebar.colapsada { width: 60px; } .sidebar.colapsada .sidebar-app-name, .sidebar.colapsada .sidebar-nav a span { display: none; } /* No modo colapsado a busca não cabe — esconde inteira. */ .sidebar.colapsada .sidebar-busca { display: none; } /* Busca do menu lateral. */ .sidebar-busca { position: relative; padding: .6rem .75rem .35rem; flex-shrink: 0; } .sidebar-busca-icone { position: absolute; left: 1.35rem; top: 50%; transform: translateY(-50%); color: var(--texto-fraco); font-size: .8rem; pointer-events: none; } .sidebar-busca-input { width: 100%; padding: .45rem .6rem .45rem 1.9rem; background: var(--bg-elevado); border: 1px solid var(--borda); border-radius: 8px; color: var(--texto); font-size: .82rem; outline: none; transition: border-color .15s, box-shadow .15s, background-color .15s; } .sidebar-busca-input::placeholder { color: var(--texto-fraco); } .sidebar-busca-input:hover { border-color: var(--borda-forte, var(--borda)); } .sidebar-busca-input:focus { border-color: var(--primary); background: var(--bg-card); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent); } .sidebar-busca-limpar { position: absolute; right: 1.1rem; top: 50%; transform: translateY(-50%); background: none; border: 0; cursor: pointer; color: var(--texto-fraco); font-size: .85rem; line-height: 1; padding: .25rem; border-radius: 6px; } .sidebar-busca-limpar:hover { background: var(--bg-hover); color: var(--texto); } .sidebar-busca-limpar[hidden] { display: none; } /* Itens/seções fora do filtro de busca do menu. */ .sidebar-nav a.is-menu-oculto, .sidebar-nav .menu-secao.is-menu-oculto { display: none; } .sidebar-busca-vazio { padding: 1rem .9rem; color: var(--texto-fraco); font-size: .82rem; text-align: center; } .sidebar-busca-vazio[hidden] { display: none; } .sidebar-header { padding: 1rem; display: flex; align-items: center; gap: .75rem; border-bottom: 1px solid var(--borda); flex-shrink: 0; } .sidebar-header i { font-size: 1.25rem; color: var(--primary); } .sidebar-app-name { font-weight: 700; } .sidebar-nav { flex: 1; padding: .75rem 0; overflow-y: auto; min-height: 0; /* libera scroll dentro do flex */ scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; } .sidebar-nav::-webkit-scrollbar { width: 6px; } .sidebar-nav::-webkit-scrollbar-thumb { background: var(--borda-forte); border-radius: 3px; } .sidebar-nav a { display: flex; align-items: center; gap: .75rem; padding: .6rem 1rem; color: var(--texto-medio); text-decoration: none; border-left: 3px solid transparent; font-size: .92rem; } .sidebar-nav a:hover { background: var(--bg-hover); color: var(--texto); text-decoration: none; } .sidebar-nav a.ativo { background: var(--primary-soft); color: var(--primary); border-left-color: var(--primary); font-weight: 600; } .sidebar-nav a.ativo i { color: var(--primary); } .sidebar-nav i { width: 18px; text-align: center; color: var(--texto-fraco); } /* Separadores de seção (visíveis quando o sidebar está expandido) */ .menu-secao { padding: .9rem 1rem .3rem; color: var(--texto-fraco); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; } .menu-secao span { display: block; padding-bottom: .25rem; } /* Cabeçalho de seção CLICÁVEL (grupo recolhível): vira um botão full-width com o chevron à direita. Mantém a aparência de label (uppercase, cinza). */ .menu-secao-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; background: transparent; border: 0; cursor: pointer; color: inherit; font: inherit; text-transform: inherit; letter-spacing: inherit; text-align: left; padding: .9rem 1rem .3rem; border-radius: 8px; transition: color .15s; } .menu-grupo .menu-secao-toggle { padding: .9rem 1rem .3rem; } /* o padding do header vai no botão */ .menu-grupo > .menu-secao-toggle { padding-top: .9rem; } .menu-secao-toggle span { padding-bottom: 0; } .menu-secao-toggle:hover { color: var(--texto); } .menu-secao-chevron { font-size: .6rem; opacity: .55; transition: transform .2s ease; flex-shrink: 0; margin-left: .5rem; } .menu-grupo.is-colapsado .menu-secao-chevron { transform: rotate(-90deg); } /* Wrapper dos itens do grupo — anima a altura ao recolher. */ .menu-grupo-itens { overflow: hidden; transition: max-height .22s ease, opacity .18s ease; max-height: 1500px; opacity: 1; } .menu-grupo.is-colapsado .menu-grupo-itens { max-height: 0; opacity: 0; } /* Durante a busca, o grupo abre mesmo se colapsado (mostra os resultados). */ .menu-grupo.is-busca-aberto .menu-grupo-itens { max-height: 1500px; opacity: 1; } .menu-grupo.is-busca-aberto .menu-secao-chevron { transform: none; } .menu-grupo.is-menu-oculto { display: none; } .sidebar.colapsada .menu-secao { padding: .35rem 0; } /* No modo colapsado (sidebar fina) não há colapso de grupo — esconde chevron e os itens ficam sempre visíveis (a sidebar fina já é o "resumo"). */ .sidebar.colapsada .menu-secao-chevron { display: none; } .sidebar.colapsada .menu-grupo.is-colapsado .menu-grupo-itens { max-height: 1500px; opacity: 1; } .sidebar.colapsada .menu-secao-toggle { padding: .35rem 0; justify-content: center; } .sidebar.colapsada .menu-secao span { width: 24px; margin: 0 auto; border-bottom: 1px solid var(--borda); overflow: hidden; text-indent: -9999px; } /* ===== Logo dinâmica (sidebar + login) ===== */ /* Logo do Entrega Jah! no header do painel (sidebar / topnav) e no login. Não há mais logo por empresa — só a COR primária é configurável. O wordmark "pipe" NÃO pode herdar a cor primária da empresa nem o --texto do tema: usa --entregajah-wordmark (navy de marca fixo), que só clareia no tema escuro pra continuar legível sobre fundo escuro. */ .entregajah-logo { display: block; height: 30px; width: auto; --entregajah-wordmark: #101522; } :root[data-theme="dark"] .entregajah-logo { --entregajah-wordmark: #ECEDEE; } .sidebar-brand, .topnav-brand { display: inline-flex; align-items: center; color: var(--texto); } .sidebar-brand { text-decoration: none; } .sidebar-brand:hover, .topnav-brand:hover { opacity: .85; } .sidebar-header .entregajah-logo { height: 32px; } /* Legado: qualquer marcador residual de logo por empresa fica oculto. */ .sv-logo-com, .sv-logo-sem, .sv-logo-img { display: none !important; } /* Sidebar: garante que a logo respira no header */ .sidebar-header { justify-content: center; align-items: center; } /* Quando sidebar colapsada (desktop): topbar atravessa por cima dos 60px da sidebar (vira header full-width), e a sidebar desce pra começar abaixo do topbar. Sidebar fica só com os ícones de navegação ao lado. */ .sidebar.colapsada .sidebar-header { display: none; } .sidebar.colapsada .sidebar-header::before { content: none !important; } @media (min-width: 769px) { .layout-dashboard:has(.sidebar.colapsada) .topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 10; } .layout-dashboard:has(.sidebar.colapsada) .sidebar.colapsada { margin-top: 56px; height: calc(100vh - 56px); } .layout-dashboard:has(.sidebar.colapsada) .conteudo { padding-top: calc(1.5rem + 56px); } } /* Login: logo Entrega Jah! grande e centralizada */ .login-logo { display: flex; justify-content: center; } .login-logo .entregajah-logo { height: 52px; width: auto; color: var(--texto, #101522); } /* sidebar-footer (avatar + sair) foi removido — migrou para popup do topbar */ .main-content { flex: 1; display: flex; flex-direction: column; min-width: 0; height: 100vh; overflow: hidden; /* scroll fica no .conteudo */ } .topbar { background: var(--bg-card); border-bottom: 1px solid var(--borda); padding: .75rem 1rem; display: flex; align-items: center; gap: 1rem; box-shadow: var(--sombra); flex-shrink: 0; /* z-index alto: a topbar cria um stacking context; sem isto, painéis do conteúdo (ex.: "Flow issues" do editor) ficavam ACIMA do menu do usuário. Fica ABAIXO dos modais (.modal = 1000) mas ACIMA do conteúdo/editor. */ position: sticky; top: 0; z-index: 100; } .topbar-title { margin: 0; font-size: 1rem; font-weight: 600; } .topbar-actions { margin-left: auto; display: flex; gap: .25rem; align-items: center; } /* ===== Assumir empresa (impersonação) — chip/badge/dropdown no topbar ===== */ .imp-empresa { position: relative; display: inline-flex; align-items: center; margin-right: .35rem; } .imp-empresa[hidden] { display: none !important; } .imp-chip, .imp-badge { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; } .imp-chip[hidden], .imp-badge[hidden], .imp-dropdown[hidden] { display: none !important; } /* Chip da Gerência */ .imp-chip { background: var(--bg-card); border: 1px solid var(--borda); color: var(--texto); padding: .38rem .7rem; border-radius: 8px; cursor: pointer; transition: border-color .12s, background .12s; } .imp-chip:hover { border-color: var(--primary); background: var(--primary-soft); } .imp-chip-chevron { font-size: .65rem; color: var(--texto-fraco); } /* Badge de sessão assumida (alerta) */ .imp-badge { background: #fff4ee; border: 1px solid #ffd5bf; color: #9a3412; padding: .3rem .35rem .3rem .6rem; border-radius: 999px; } .imp-badge i { color: var(--primary); } .imp-voltar { background: var(--primary); border: none; color: #fff; cursor: pointer; font-size: .74rem; font-weight: 600; padding: .22rem .6rem; border-radius: 999px; margin-left: .35rem; } .imp-voltar:hover { filter: brightness(1.06); color: #fff; } /* Dropdown com busca */ .imp-dropdown { position: absolute; top: calc(100% + 6px); right: 0; z-index: 1200; width: 300px; max-width: 86vw; background: var(--bg-card); border: 1px solid var(--borda); border-radius: 12px; box-shadow: var(--sombra-lg); overflow: hidden; } .imp-dropdown-busca { position: relative; padding: .6rem; border-bottom: 1px solid var(--borda); } .imp-dropdown-busca i { position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%); color: var(--texto-fraco); font-size: .85rem; pointer-events: none; } .imp-dropdown-busca input { width: 100%; padding: .5rem .6rem .5rem 2rem; border: 1px solid var(--input-borda); border-radius: 8px; background: var(--input-bg); color: var(--texto); font-size: .85rem; } .imp-dropdown-busca input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); } /* Rola a lista quando há muitas empresas. min(...,50vh) garante que o dropdown nunca ultrapasse a tela em monitores baixos; overscroll-contain evita que o scroll "vaze" pra página ao chegar no fim. */ .imp-dropdown-lista { max-height: min(320px, 50vh); overflow-y: auto; overscroll-behavior: contain; padding: .3rem; } .imp-lista-info { padding: 1rem; text-align: center; color: var(--texto-fraco); font-size: .82rem; } .imp-item { display: flex; align-items: center; gap: .5rem; width: 100%; text-align: left; background: transparent; border: none; cursor: pointer; color: var(--texto); padding: .5rem .55rem; border-radius: 8px; font-size: .86rem; } .imp-item:hover { background: var(--bg-hover); } .imp-item i { color: var(--texto-fraco); width: 16px; text-align: center; } .imp-item span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .imp-item small { color: var(--texto-fraco); font-size: .72rem; flex-shrink: 0; } /* ===== Menu do usuário no topbar (avatar + popup) ===== */ .user-menu { position: relative; } .user-menu-trigger { display: inline-flex; align-items: center; gap: .55rem; background: transparent; border: 1px solid transparent; border-radius: 999px; padding: .35rem .8rem .35rem .45rem; cursor: pointer; color: var(--texto); transition: all .15s; } .user-menu-trigger:hover { background: var(--bg-hover); border-color: var(--borda); } .user-menu.aberto .user-menu-trigger { background: var(--bg-card); border-color: var(--cor-primaria); box-shadow: 0 0 0 3px rgba(255,107,0,.15); } .user-menu-trigger > i:first-child { font-size: 1.5rem; color: var(--cor-primaria); } .user-menu-trigger-avatar { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background-size: cover; background-position: center; flex-shrink: 0; overflow: hidden; } .user-menu-trigger-avatar > i { font-size: 1.5rem; color: var(--cor-primaria); line-height: 1; } .user-menu-trigger-avatar.tem-foto { border: 1px solid var(--borda); } .user-menu-trigger-avatar.tem-foto > i { display: none; } .user-menu-avatar.tem-foto { background-size: cover; background-position: center; background-color: #f4f6f9; } .user-menu-avatar.tem-foto > i { display: none; } /* Iniciais (fallback quando o usuário ainda não fez upload de foto). Mostra "GA" / "AD" coloridos. Funciona pro mini-avatar do trigger e pro avatar grande do popup — texto é o data-attr `data-iniciais`. */ .user-menu-trigger-avatar.tem-iniciais > i, .user-menu-avatar.tem-iniciais > i { display: none; } .user-menu-trigger-avatar.tem-iniciais::before, .user-menu-avatar.tem-iniciais::before { content: attr(data-iniciais); color: #fff; font-weight: 700; line-height: 1; letter-spacing: .01em; } .user-menu-trigger-avatar.tem-iniciais::before { font-size: .72rem; } .user-menu-avatar.tem-iniciais::before { font-size: 1.1rem; } .user-menu-nome { font-size: .9rem; font-weight: 600; max-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-menu-chevron { font-size: .7rem; color: var(--texto-fraco); transition: transform .2s; } .user-menu.aberto .user-menu-chevron { transform: rotate(180deg); color: var(--cor-primaria); } @media (max-width: 600px) { .user-menu-nome { display: none; } } .user-menu-popup { position: absolute; top: calc(100% + 8px); right: 0; background: var(--bg-card); border: 1px solid var(--borda); border-radius: 12px; box-shadow: 0 12px 28px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06); min-width: 240px; padding: .35rem; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s, transform .15s; /* Acima dos painéis do editor/dropdowns flutuantes, mas abaixo dos modais (.modal = 1000), que devem cobrir tudo inclusive a topbar. */ z-index: 999; } .user-menu.aberto .user-menu-popup { opacity: 1; visibility: visible; transform: translateY(0); } .user-menu-cabecalho { display: flex; align-items: center; gap: .65rem; padding: .65rem .65rem .85rem; border-bottom: 1px solid var(--borda); margin-bottom: .35rem; } .user-menu-avatar { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,107,0,.12); color: var(--cor-primaria); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; } .user-menu-info { display: flex; flex-direction: column; min-width: 0; } .user-menu-info strong { font-size: .9rem; color: var(--texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-menu-info small { font-size: .75rem; color: var(--texto-fraco); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-menu-item { display: flex; align-items: center; gap: .65rem; width: 100%; padding: .55rem .75rem; background: transparent; border: 0; border-radius: 8px; color: var(--texto); font-size: .9rem; cursor: pointer; text-align: left; transition: background .12s; } /* Itens do menu do usuário são /