/* =========================================================== NAV + Dock • DARK neutro com acento AZUL (CONSOLIDADO) – HTML/JS intactos – Dock só no mobile, sem conflito com o footer – Sidebar: header central, lista à esquerda, 1 coluna, rolagem na lista – Perf Lite: ativar com =========================================================== */ /* =============== VARIÁVEIS ÚNICAS =============== */ :root{ /* Dark neutro */ --bg-1:#0e0f13; --bg-2:#06070a; --glass:rgba(20,20,28,.72); --stroke:#262833; --hair:#ffffff14; --text:#e9eef9; --muted:#b4bfd8; /* Acentos (ouro, se usar em outras telas) */ --gold:#d4af37; --gold-2:#ffd76a; /* AZUL padronizado */ --nav-blue:#0065fd; /* normal */ --nav-blue-2:#0a6eea; /* hover/gradiente */ --nav-blue-focus:#60A5FA; /* foco */ --radius:16px; --shadow:0 14px 34px rgba(0,0,0,.38); /* Scrollbar (visual) */ --scrollbarBG:#0b0b10; --scrollThumb:#3b82f6; --scrollThumbHover:#60a5fa; } /* =============== UTILITÁRIOS / RESET =============== */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} [hidden]{display:none!important} *,*::before,*::after{ box-sizing:border-box; } img,video,canvas,svg{ max-width:100%; height:auto; } html, body{ max-width:100%; overflow-x:hidden; /* bloqueia o scroll horizontal */ touch-action: pan-y !important; overscroll-behavior-x: contain; } /* Scrollbar global */ html{ scrollbar-color: var(--scrollThumb) var(--scrollbarBG); scrollbar-width: thin; } ::-webkit-scrollbar{ width:10px; height:10px; } ::-webkit-scrollbar-track{ background:var(--scrollbarBG); } ::-webkit-scrollbar-thumb{ background-color:var(--scrollThumb); border-radius:8px; border:2px solid var(--scrollbarBG); } ::-webkit-scrollbar-thumb:hover{ background-color:var(--scrollThumbHover); } /* Garante família dos ícones (Bootstrap Icons) */ .r-nav i.bi, .r-dock i.bi, .mobile-sidebar.as-card i.bi{ font-family:"bootstrap-icons" !important; font-style:normal !important; line-height:1 !important; } /* =========================================================== TOP BAR (DARK neutro) =========================================================== */ .r-nav{ position:sticky; top:0; z-index:1000; color:var(--text); background: linear-gradient(180deg, var(--bg-1), var(--bg-2)); border-bottom:1px solid var(--stroke); box-shadow:var(--shadow); backdrop-filter:saturate(130%) blur(10px); contain:paint; isolation:isolate; } .r-nav__wrap{ max-width:1200px; margin:0 auto; height:66px; display:flex; align-items:center; gap:12px; padding:0 16px; } /* Aurora dourada (OPCIONAL) – comente a linha abaixo para desativar */ /* .r-nav::before{ content:none; } */ .r-nav::before{ content:""; position:absolute; inset:-40% -20% auto -20%; height:140%; background: conic-gradient(from 130deg at 50% 50%, transparent 0 30%, rgba(212,175,55,.12) 32%, rgba(255,215,106,.10) 44%, transparent 56%, rgba(212,175,55,.08) 66%, transparent 80%); filter:blur(36px); opacity:.45; pointer-events:none; animation:aurora 18s linear infinite; } @keyframes aurora{ to { transform:rotate(360deg); } } .r-nav__brand{ display:inline-flex; align-items:center; justify-content:center; text-decoration:none; } .r-nav__brand-img{ width:40px;height:40px;border-radius:12px;object-fit:cover; border:1px solid var(--hair); box-shadow:0 0 26px rgba(0,0,0,.25), inset 0 0 0 1px #ffffff1a; } .r-nav__brand-letter{ width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-weight:900;color:#fff; background:linear-gradient(180deg,#1a1b1f,#121318); box-shadow:0 0 26px rgba(0,0,0,.25), inset 0 0 0 1px #ffffff1a; } .r-nav__brand-title{ margin-left:10px; font-size:18px; font-weight:800; letter-spacing:.2px; color:var(--text); opacity:.95; } /* ====== COMBO SALDO + DEPOSITAR (pill compacta) ====== */ .r-deposit{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; height:38px; border-radius:12px; padding:0; background:transparent; border:0; cursor:pointer; -webkit-tap-highlight-color:transparent; } .r-deposit__balance{ display:inline-flex; align-items:center; gap:.45rem; height:38px; padding:0 12px; border-radius:12px; font-weight:800; letter-spacing:.2px; color:#ecf3ff; background:linear-gradient(180deg, rgba(22,22,28,.95), rgba(14,14,20,.95)); border:1px solid rgba(255,255,255,.10); box-shadow:inset 0 0 0 1px #ffffff12, 0 10px 24px rgba(0,0,0,.55); } .r-deposit__balance .bi{ color:#d7def2; } .r-deposit__cta{ display:inline-flex; align-items:center; gap:.45rem; height:38px; padding:0 12px; border-radius:12px; font-weight:800; color:#061524; background: var(--nav-blue); box-shadow:0 8px 24px rgba(10,132,255,.35); } .r-deposit__cta:hover{ background: var(--nav-blue); filter:brightness(1.05); } .r-deposit__plus{ font-weight:900; font-size:1.05rem; transform:translateY(.5px); } .r-deposit__label{ white-space:nowrap; } @media (max-width:980px){ .r-deposit__label{ display:none; } } /* Ações à direita */ .r-nav__right{ display:flex; align-items:center; gap:10px; margin-left:auto; } .r-btn{ width:44px;height:44px;border-radius:12px;display:grid;place-items:center; text-decoration:none;cursor:pointer;color:#e9eef9; background:var(--glass); border:1px solid var(--stroke); } /* Nav botão “Cadastrar/Entrar” (se usar) */ .r-nav .r-actions{ margin-left:auto; display:flex; align-items:center; gap:.6rem; } .r-nav .r-actions .r-btn{ box-sizing:border-box; display:inline-flex !important; align-items:center; justify-content:center; gap:.48rem; padding:.60rem 1.00rem; border-radius:12px; border:1px solid transparent; font-weight:800; font-size:.95rem; line-height:1; white-space:nowrap; text-decoration:none; } .r-nav .r-actions .r-btn--cadastro{ color:#e8eeff; background:linear-gradient(180deg, #1b3f90 0%, #153373 100%); border-color:#1c3f90; box-shadow:0 2px 0 rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.06); } .r-nav .r-actions .r-btn--cadastro:hover{ background:linear-gradient(180deg, #214da9 0%, #1a3f8e 100%); } .r-nav .r-actions .r-btn--entrar{ color:#ffffff; background: var(--nav-blue); border-color: var(--nav-blue); box-shadow:0 2px 0 rgba(0,0,0,.25); } .r-nav .r-actions .r-btn--entrar:hover{ background: var(--nav-blue-2); border-color: var(--nav-blue-2); } @media (max-width:640px){ .r-nav .r-actions .r-btn{ padding:.54rem .92rem; font-size:.9rem; } } /* ===== Botão “Depositar +” em pílula (se existir) ===== */ .r-btn--plus{ width:auto; min-width:44px; height:44px; padding:0 16px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; gap:10px; color:#061524 !important; font-weight:800; background: var(--nav-blue) !important; border:0 !important; box-shadow: 0 8px 24px rgba(10,132,255,.35) !important; transition:transform .12s ease, filter .15s ease; } .r-btn--plus:hover, .r-btn--plus:focus-visible{ background: var(--nav-blue-2) !important; filter: brightness(1.05) !important; transform: translateY(-1px); } .r-btn__text{ display:inline-block; } @media (max-width:980px){ .r-btn__text{ display:none; } } /* Ícone em vidro */ .r-btn--glass{ width:44px;height:44px;border-radius:12px; background:var(--glass); border:1px solid var(--stroke); color:#dbe9ff; display:grid; place-items:center; box-shadow: inset 0 1px 0 var(--hair); } .r-btn--glass:hover{ filter:brightness(1.08); } /* ===== CHIP ÚNICO DO USUÁRIO (#rUserBtn) ===== */ #menuBtn{ display:none !important; } .r-avatar, .r-profile-chip{ display:none !important; } .r-user{ position:relative; z-index:1001; } #rUserBtn{ display:inline-flex; align-items:center; gap:10px; height:38px; padding:0 12px; border-radius:12px; background:var(--glass); color:var(--text); border:1px solid var(--stroke); cursor:pointer; box-shadow:inset 0 0 0 1px #ffffff10; -webkit-tap-highlight-color:transparent; } #rUserBtn .r-userchip__avatar{ width:36px; height:36px; border-radius:12px; display:grid; place-items:center; font-weight:900; background: var(--nav-blue); color:#fff; box-shadow:0 2px 0 rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.12); font-size:.95rem; letter-spacing:.2px; } #rUserBtn .r-userchip__meta{ display:flex; flex-direction:column; line-height:1.05; } #rUserBtn .r-userchip__meta strong{ font-weight:800; font-size:.95rem; color:#fff; } #rUserBtn .r-userchip__meta small{ font-size:.78rem; color:#b8c6df; margin-top:2px; } #rUserBtn .r-userchip__caret{ font-size:.8rem; color:#c7d0ea; transition:transform .18s ease; } #rUserBtn[aria-expanded="true"] .r-userchip__caret{ transform:rotate(180deg); } #rUserBtn:hover{ background:linear-gradient(180deg, rgba(22,22,28,.92), rgba(14,14,20,.96)); } #rUserBtn:focus-visible{ outline:2px solid var(--nav-blue-focus); outline-offset:2px; } @media (max-width:980px){ #rUserBtn{ padding:0 6px; gap:8px; } #rUserBtn .r-userchip__meta, #rUserBtn .r-userchip__caret{ display:none !important; } #rUserBtn .r-userchip__avatar{ width:36px; height:36px; } } /* =========================================================== DOCK — compacto (SÓ NO MOBILE) + sem conflito com footer =========================================================== */ /* 1) NÃO reservar espaço no desktop */ body{ padding-bottom:0 !important; } /* 2) Dock só no mobile + empurra o conteúdo (main) */ @media (max-width:1023.98px){ .r-dock{ display:grid; } main, .main, [role="main"]{ padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important; } } /* 3) Nunca exibir o dock no desktop */ @media (min-width:1024px){ .r-dock{ display:none !important; } } .r-dock{ position:fixed; left:0; right:0; bottom:0; z-index:900; background: linear-gradient(180deg, rgba(12,12,16,.96), rgba(9,9,12,.98)); border-top:1px solid var(--stroke); border-top-left-radius:20px; border-top-right-radius:20px; display:grid; grid-template-columns:1fr 1fr auto 1fr 1fr; align-items:center; height:56px !important; padding:0 12px calc(4px + env(safe-area-inset-bottom)); backdrop-filter:saturate(130%) blur(10px); } .r-dock a{ -webkit-tap-highlight-color: transparent; display:flex; align-items:center; justify-content:center; } .r-dock__item{ justify-self:center; width:32px; height:32px; display:grid; place-items:center; border-radius:10px; color:#cfd6e6; background:transparent !important; box-shadow:none !important; outline:none !important; transition: color .14s ease, transform .14s ease; } .r-dock__item i, .r-dock__item svg{ width:18px; height:18px; font-size:18px; line-height:1; display:block; fill:currentColor; } .r-dock__item:hover{ color:#ffffff; transform:translateY(-1px); } .r-dock__item.is-active, .r-dock a.active, .r-dock a[aria-current="page"]{ color: var(--nav-blue) !important; } /* Esconde rótulos antigos */ .r-dock__item span, .r-dock__item small{ display:none !important; } /* Botão central (40x40) */ .r-dock__center{ justify-self:center; align-self:center; width:40px; height:40px; border-radius:999px; position:relative; display:grid; place-items:center; color:#fff; text-decoration:none; background: var(--nav-blue) !important; border:1px solid #ffffff22; box-shadow: 0 6px 14px rgba(15,108,255,.30), 0 2px 6px rgba(0,0,0,.25); transform: translateY(-10px); margin-bottom:10px; transition: transform .14s ease, filter .14s ease, background .14s ease; } .r-dock__center::after{ content:""; position:absolute; width:52px; height:52px; border-radius:999px; background: radial-gradient(closest-side, rgba(0,0,0,.35), transparent 70%); transform: translateY(10px); z-index:-1; pointer-events:none; } .r-dock__center i, .r-dock__center svg{ width:18px; height:18px; font-size:18px; line-height:1; fill:currentColor; } .r-dock__center:hover, .r-dock__center:focus-visible, .r-dock__center:active{ background: linear-gradient(180deg, var(--nav-blue-2), var(--nav-blue)) !important; filter: brightness(1.05); transform: translateY(-11px); } /* Acessibilidade: foco visível azul */ .r-btn--plus:focus-visible, .r-dock__center:focus-visible{ outline: 2px solid var(--nav-blue-focus); outline-offset: 2px; } /* =========================================================== MENU LATERAL (SIDEBAR): header central + lista esquerda – 1 coluna SEMPRE; rolagem só na lista =========================================================== */ .mobile-sidebar.as-card{ position:fixed; right:12px; top:72px; left:auto; bottom:12px; width:min(420px,94vw); height:calc(100vh - 84px) !important; max-height:calc(100vh - 84px) !important; /* corrigido */ overflow:hidden !Important; /* rola só a lista, não o card */ background: radial-gradient(120% 120% at 0% 0%, #0f1729 0%, #0b1222 50%, #0a0f1b 100%); border:1px solid #1e2737; border-radius:16px; box-shadow:0 24px 60px rgba(0,0,0,.5); opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-6px) scale(.985); transition: opacity .18s ease, transform .18s ease; z-index:1100; isolation:isolate; display:flex !important; flex-direction:column !important; } .mobile-sidebar.as-card.is-open{ opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0) scale(1); } /* Backdrop */ .mobile-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(2px); opacity:0; visibility:hidden; transition:opacity .18s ease; z-index:1000; pointer-events:none; } .mobile-backdrop.active{ opacity:1; visibility:visible; pointer-events:auto; } /* HEADER centralizado (fixo) */ .mobile-sidebar.as-card .sidebar-header{ flex:0 0 auto; position:relative; overflow:hidden; text-align:center !important; padding:14px 16px 12px !important; border-bottom:1px solid rgba(255,255,255,.10) !important; color:#e5e7eb; } .mobile-sidebar.as-card .sidebar-header::before{ content:""; position:absolute; inset:0; background:radial-gradient(120% 120% at 0% 0%, rgba(34,197,94,.18) 0%, rgba(34,197,94,.11) 45%, rgba(34,197,94,.06) 70%, rgba(34,197,94,0) 100%); pointer-events:none; } .mobile-sidebar.as-card .sidebar-header .sh-user{ width:100%; display:flex; align-items:center; justify-content:center; gap:12px; } .mobile-sidebar.as-card .sidebar-header .sh-avatar{ width:40px; height:40px; border-radius:12px; display:grid; place-items:center; font-weight:900; background:linear-gradient(180deg,#0ea5e9,#3b82f6); color:#fff; box-shadow:0 2px 0 rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.12); } .mobile-sidebar.as-card .sidebar-header .sh-meta{ display:flex; flex-direction:column; align-items:center; line-height:1.15; } .mobile-sidebar.as-card .sidebar-header .sh-meta strong{ display:inline-block; padding:2px 10px; border-radius:999px; background:linear-gradient(180deg,#22c55e,#16a34a); color:#06140b; font-weight:900; } .mobile-sidebar.as-card .sidebar-header .sh-meta small{ margin-top:6px; color:#9fb3d9; } /* LISTA — rolagem só aqui + 1 coluna SEMPRE */ .mobile-sidebar.as-card .sidebar-nav{ flex:1 1 auto; overflow-y:auto !important; overflow-x:hidden !important; -webkit-overflow-scrolling: touch; padding:10px 16px 12px !important; display:flex !important; flex-direction:column !important; gap:8px !important; } /* Itens (ícone → textos → caret) alinhados à esquerda */ .mobile-sidebar.as-card .sidebar-item, .mobile-sidebar.as-card .sidebar-subitem{ width:100% !important; display:flex !important; align-items:center !important; justify-content:flex-start !important; text-align:left !important; gap:12px !important; padding:11px 16px !important; border-radius:12px !important; color:#e6edf9; background: linear-gradient(180deg,#121a28,#0d1522); border:1px solid rgba(255,255,255,.04); transition: background .18s ease, border-color .18s ease, transform .12s ease; min-height:0 !important; } .mobile-sidebar.as-card .sidebar-item i, .mobile-sidebar.as-card .sidebar-subitem i{ font-size:1.06rem; width:1.06rem; height:1.06rem; line-height:1; opacity:.95; } .mobile-sidebar.as-card .si-text{ display:flex; flex-direction:column; line-height:1.15; min-width:0; } .mobile-sidebar.as-card .si-text strong{ font-weight:800; font-size:1rem; letter-spacing:.2px; } .mobile-sidebar.as-card .si-text small{ font-size:.86rem; color:#9fb3d9; margin-top:2px; } .mobile-sidebar.as-card .sidebar-item .caret{ margin-left:auto; opacity:.85; } /* Hover e ativo */ .mobile-sidebar.as-card .sidebar-item:hover, .mobile-sidebar.as-card .sidebar-subitem:hover{ background: linear-gradient(90deg, rgba(59,130,246,.14), rgba(40,46,72,.60)), linear-gradient(180deg,#121a28,#0d1522); border-color: rgba(255,255,255,.10); transform: translateY(-1px); } .mobile-sidebar.as-card .sidebar-item.is-active, .mobile-sidebar.as-card .sidebar-item[aria-current="page"], .mobile-sidebar.as-card .sidebar-subitem.is-active{ background: linear-gradient(180deg, var(--nav-blue), var(--nav-blue-2)); border-color: var(--nav-blue); color:#061524; box-shadow: 0 10px 22px rgba(10,132,255,.28), inset 0 0 0 1px #ffffff22; } .mobile-sidebar.as-card .sidebar-item.is-active .si-text strong, .mobile-sidebar.as-card .sidebar-item.is-active .si-text small{ color:#061524; } /* Toggle + submenu */ .sidebar-group{ width:100%; } .sidebar-item.sidebar-toggle{ display:flex; align-items:center; justify-content:space-between; padding-right:12px; } .sidebar-item.sidebar-toggle .si-left{ display:flex; align-items:center; gap:14px; } .sidebar-item.sidebar-toggle .caret{ opacity:.9; transition:transform .2s ease; } .sidebar-item.sidebar-toggle.is-open .caret{ transform:rotate(90deg); } .submenu{ position:relative; margin:.25rem 0 .15rem; padding:0 0 .25rem 0; overflow:hidden; max-height:0; transition:max-height .24s cubic-bezier(.25,.8,.25,1); } .submenu::before{ content:""; position:absolute; left:1.55rem; top:.25rem; bottom:.5rem; width:1px; background: linear-gradient(to bottom, rgba(255,255,255,.12), rgba(255,255,255,.04)); } .sidebar-subitem{ padding:12px 16px 12px 42px !important; } /* Divisor e Logout */ .sidebar-divider{ height:1px; background:rgba(255,255,255,.08); margin:12px 6px; } .mobile-sidebar.as-card .sidebar-item.logout{ color:#ff6b6b; } .mobile-sidebar.as-card .sidebar-item.logout:hover{ background: linear-gradient(90deg, rgba(255,107,107,.16), transparent), linear-gradient(180deg,#1c1519,#151015); border-color: rgba(255,255,255,.10); } /* Logout sempre visível no fim da lista */ .mobile-sidebar.as-card .sidebar-item.logout{ position:sticky; bottom:0; z-index:2; margin-top:8px; background: linear-gradient(180deg, rgba(12,16,24,.0), rgba(12,16,24,.6)), linear-gradient(180deg,#151a24,#0e131c) !important; border-top:1px solid rgba(255,255,255,.06); backdrop-filter:saturate(120%) blur(2px); } /* Scrollbar discreta da lista */ .mobile-sidebar.as-card .sidebar-nav::-webkit-scrollbar{ width:8px; } .mobile-sidebar.as-card .sidebar-nav::-webkit-scrollbar-thumb{ background:#2f3b55; border-radius:8px; } /* Densidade para janelas mais baixas */ @media (max-height:760px){ .mobile-sidebar.as-card .si-text small{ display:none !important; } .mobile-sidebar.as-card .sidebar-item, .mobile-sidebar.as-card .sidebar-subitem{ padding:10px 14px !important; } } /* Acessibilidade foco */ .mobile-sidebar.as-card :is(.sidebar-item, .sidebar-subitem):focus-visible{ outline:2px solid var(--nav-blue-focus); outline-offset:2px; border-radius:12px; } /* ========================================================= SIDEBAR COMPACT (mobile) — card mais estreito + menos espaço ========================================================= */ @media (max-width: 768px){ .mobile-sidebar.as-card{ top:66px; right:10px !important; left:auto; width: min(340px, 90vw) !important; height: calc(100vh - 78px) !important; max-height: calc(100vh - 78px) !important; /* consistente */ border-radius: 14px !important; box-shadow: 0 18px 40px rgba(0,0,0,.46) !important; overflow:hidden !important; } .mobile-sidebar.as-card .sidebar-header{ padding:10px 12px !important; } .mobile-sidebar.as-card .sidebar-header .sh-avatar{ width:36px !important; height:36px !important; } .mobile-sidebar.as-card .sidebar-header .sh-meta strong{ font-size:13.5px !important; padding:2px 8px !important; } .mobile-sidebar.as-card .sidebar-header .sh-meta small{ font-size:12px !important; margin-top:4px !important; } .mobile-sidebar.as-card .sidebar-nav{ padding: 8px 10px 60px !important; gap: 6px !important; } .mobile-sidebar.as-card .sidebar-item, .mobile-sidebar.as-card .sidebar-subitem{ padding: 9px 12px !important; gap: 10px !important; border-radius:10px !important; } .mobile-sidebar.as-card .sidebar-item i, .mobile-sidebar.as-card .sidebar-subitem i{ font-size:.95rem !important; width:.95rem !important; height:.95rem !important; } .mobile-sidebar.as-card .si-text strong{ font-size:13.8px !important; letter-spacing:.15px !important; } .mobile-sidebar.as-card .si-text small{ font-size:12px !important; margin-top:1px !important; } .sidebar-item.sidebar-toggle{ padding-right:10px !important; } .submenu{ margin:.2rem 0 .1rem !important; } .submenu::before{ left:1.3rem !important; } .sidebar-subitem{ padding:9px 12px 9px 36px !important; } .sidebar-divider{ margin:8px 4px !important; } /* Logout fixo e proporcional */ .mobile-sidebar.as-card .sidebar-item.logout{ position: sticky; bottom: 0; z-index: 2; padding: 10px 12px !important; background: linear-gradient(180deg,#121a28,#0d1522) !important; border: 1px solid rgba(255,255,255,.06) !important; color:#ff6b6b !important; } } /* ========= MINI COMPACT extra (até 900px de largura) ========= */ @media (max-width: 900px){ .mobile-sidebar.as-card{ top: 60px !important; right: 10px !important; bottom: 8px !important; left: auto !important; width: min(320px, 88vw) !important; height: calc(100vh - 68px) !important; max-height: calc(100vh - 68px) !important; /* corrigido */ border-radius: 12px !important; } .mobile-sidebar.as-card .sidebar-header{ padding: 8px 10px !important; } .mobile-sidebar.as-card .sidebar-header .sh-avatar{ width:32px !important; height:32px !important; } .mobile-sidebar.as-card .sidebar-header .sh-meta strong{ font-size:13px !important; padding:2px 8px !important; } .mobile-sidebar.as-card .sidebar-header .sh-meta small{ font-size:11.5px !important; margin-top:2px !important; } .mobile-sidebar.as-card .sidebar-nav{ padding: 6px 10px 52px !important; gap: 6px !important; } .mobile-sidebar.as-card .sidebar-item, .mobile-sidebar.as-card .sidebar-subitem{ padding: 8px 10px !important; gap: 10px !important; border-radius:10px !important; } .mobile-sidebar.as-card .si-text strong{ font-size:13.2px !important; letter-spacing:.15px !important; } .mobile-sidebar.as-card .si-text small{ font-size:11.7px !important; margin-top:1px !important; } .mobile-sidebar.as-card .sidebar-item i, .mobile-sidebar.as-card .sidebar-subitem i{ font-size:.92rem !important; width:.92rem !important; height:.92rem !important; } .sidebar-item.sidebar-toggle{ padding-right: 8px !important; } .submenu{ margin: .15rem 0 .1rem !important; } .submenu::before{ left: 1.2rem !important; } .sidebar-subitem{ padding: 8px 10px 8px 34px !important; } .sidebar-divider{ margin: 6px 4px !important; } } /* Telas muito baixas: enxuga textos */ @media (max-height: 660px){ .mobile-sidebar.as-card .si-text small{ display:none !important; } .mobile-sidebar.as-card .sidebar-item, .mobile-sidebar.as-card .sidebar-subitem{ padding: 7px 9px !important; } } /* ========================================================= DOCK — manter compacto (para não colidir com footer) ========================================================= */ @media (max-width:1023.98px){ .r-dock{ height: 54px !important; padding: 0 10px calc(2px + env(safe-area-inset-bottom)) !important; } .r-dock__item{ width: 30px !important; height: 30px !important; } .r-dock__center{ width: 38px !important; height: 38px !important; transform: translateY(-9px) !important; margin-bottom: 9px !important; } } /* ========================================================= FIX: "Sair da Conta" com a MESMA proporção dos outros itens ========================================================= */ .mobile-sidebar.as-card .sidebar-item.logout{ position: sticky; bottom: 0; z-index: 2; margin-top: 8px; padding: 11px 16px !important; gap: 12px !important; border-radius: 12px !important; min-height: 0 !important; background: linear-gradient(180deg,#121a28,#0d1522) !important; border: 1px solid rgba(255,255,255,.06) !important; box-shadow: none !important; color: #ff6b6b !important; } .mobile-sidebar.as-card .sidebar-item.logout:hover{ background: linear-gradient(90deg, rgba(59,130,246,.14), rgba(40,46,72,.60)), linear-gradient(180deg,#121a28,#0d1522) !important; border-color: rgba(255,255,255,.10) !important; transform: translateY(-1px); } @media (max-width: 768px){ .mobile-sidebar.as-card .sidebar-item.logout{ padding: 9px 12px !important; gap: 10px !important; border-radius: 10px !important; } .mobile-sidebar.as-card .sidebar-item.logout i{ font-size: .95rem !important; width: .95rem !important; height: .95rem !important; } } /* ========================================================= DESEMPENHO — Mobile SEM blur pesado ========================================================= */ @media (max-width: 768px){ .r-nav, .r-dock, .mobile-backdrop{ backdrop-filter: none !important; } } /* ========================================================= PREFERS-REDUCED-MOTION — respeita usuários ========================================================= */ @media (prefers-reduced-motion: reduce){ .r-nav::before{ animation: none !important; } .submenu{ transition: none !important; } *{ scroll-behavior: auto !important; } } /* ========================================================= PERF LITE — Ativar com Corta blur/aurora/sombras pesadas SEM mudar layout ========================================================= */ .perf-lite .r-nav, .perf-lite .r-dock, .perf-lite .mobile-backdrop{ backdrop-filter: none !important; } .perf-lite .r-nav::before{ content:none !important; animation:none !important; } .perf-lite .r-deposit__balance, .perf-lite .r-dock__center, .perf-lite .mobile-sidebar.as-card{ box-shadow:none !important; } .perf-lite .mobile-sidebar.as-card{ background:#101623 !important; border-color:#1e2737 !important; } .perf-lite .mobile-sidebar.as-card .sidebar-item, .perf-lite .mobile-sidebar.as-card .sidebar-subitem{ transition: background .12s ease, border-color .12s ease !important; transform:none !important; } .perf-lite .r-dock__item{ transition: color .10s ease !important; transform:none !important; } /* ========================================= HOTFIX — Ícones SEM sublinhado e SEM “quadrado” no foco ========================================= */ /* 1) Nada de sublinhado em links/ícones do nav/dock/sidebar */ .r-nav a, .r-dock a, .r-dock i, .r-dock svg, .mobile-sidebar.as-card .sidebar-item, .mobile-sidebar.as-card .sidebar-subitem, .mobile-sidebar.as-card i, .mobile-sidebar.as-card svg, .r-btn { text-decoration: none !important; } /* 2) Remover caixas/contornos padrão no foco/active (gift do dock) */ .r-dock a:focus, .r-dock a:active, .r-dock__item:focus, .r-dock__item:active, .r-dock__center:focus, .r-dock__center:active, .mobile-sidebar.as-card .sidebar-item:focus, .mobile-sidebar.as-card .sidebar-item:active, .mobile-sidebar.as-card .sidebar-subitem:focus, .mobile-sidebar.as-card .sidebar-subitem:active { outline: none !important; box-shadow: none !important; background: transparent !important; /* evita fundo quadrado do UA */ } /* 3) Dock: não mostrar foco azul nem no :focus-visible (apenas no dock) */ .r-dock__center:focus-visible, .r-dock__item:focus-visible, .r-dock a:focus-visible { outline: none !important; box-shadow: none !important; background: transparent !important; } /* 4) Mantém só a mudança de COR quando ativo (sem fundo) */ .r-dock a.is-active, .r-dock a.active, .r-dock a[aria-current="page"]{ background: var(--nav-blue) !important; color: var(--bg-1) !important; } /* 5) Toque mobile sem highlight e sem “flash” */ .r-dock a, .r-dock__center, .mobile-sidebar.as-card .sidebar-item, .mobile-sidebar.as-card .sidebar-subitem { -webkit-tap-highlight-color: transparent; } /* 6) Garante que ícones não herdem decoração do link */ .r-dock i, .r-dock svg, .mobile-sidebar.as-card i, .mobile-sidebar.as-card svg { display: inline-block; text-decoration: none !important; } /* ========================================================= BOTÕES CADASTRAR / ENTRAR – RESPONSIVO TOTAL (drop-in) ========================================================= */ /* Fluxo do topo: não quebra linha e prioriza ações à direita */ .r-nav__wrap{ flex-wrap:nowrap !important; justify-content:flex-start !important; gap:12px !important; } .r-nav__brand{ flex:0 0 auto !important; } .r-deposit{ margin-left:0 !important; flex:0 0 auto !important; } /* não empurra as ações */ .r-nav .r-actions{ margin-left:auto !important; display:inline-flex !important; align-items:center !important; gap:.6rem !important; min-width:0 !important; /* crucial p/ texto encolher */ } /* ---------- Botões elásticos (altura, padding e fonte com clamp) ---------- */ .r-nav .r-actions .r-btn{ display:inline-flex !important; align-items:center !important; gap:.48rem !important; box-sizing:border-box !important; height: clamp(32px, 3.2vw, 44px) !important; padding: clamp(4px, .8vw, 10px) clamp(10px, 1.2vw, 16px) !important; border-radius: clamp(10px, 1vw, 12px) !important; font-weight:800 !important; font-size: clamp(11.5px, 1.2vw, 15px) !important; line-height:1 !important; white-space:nowrap !important; min-width:0 !important; max-width:none !important; /* deixa crescer quando houver espaço */ overflow:hidden !important; } /* Label ocupa o espaço e corta com “…” se faltar */ .r-nav .r-actions .r-btn .btn-label{ flex:1 1 auto !important; min-width:0 !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; } /* Ícone sempre visível e proporcional */ .r-nav .r-actions .r-btn i{ flex:0 0 auto !important; font-size: clamp(14px, 1.2vw, 18px) !important; } /* Larguras mínimas por botão (elásticas) */ .r-nav .r-actions .r-btn--cadastro{ min-width: clamp(108px, 13vw, 168px) !important; } .r-nav .r-actions .r-btn--entrar{ min-width: clamp(92px, 10vw, 148px) !important; } /* Cores e hovers (mantém suas variáveis) */ .r-nav .r-actions .r-btn--cadastro{ color:#e8eeff !important; background:linear-gradient(180deg,#1b3f90 0%,#153373 100%) !important; border:1px solid #1c3f90 !important; box-shadow:0 2px 0 rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.06) !important; } .r-nav .r-actions .r-btn--cadastro:hover{ background:linear-gradient(180deg,#214da9 0%,#1a3f8e 100%) !important; } .r-nav .r-actions .r-btn--entrar{ color:#fff !important; background:var(--nav-blue) !important; border:1px solid var(--nav-blue) !important; box-shadow:0 2px 0 rgba(0,0,0,.25) !important; } .r-nav .r-actions .r-btn--entrar:hover{ background:var(--nav-blue-2) !important; border-color:var(--nav-blue-2) !important; } /* ---------- Quebras responsivas finas ---------- */ /* Some o título da marca para ganhar espaço em telas menores */ @media (max-width: 1200px){ .r-nav__brand-title{ display:none !important; } } /* Tablet */ @media (max-width: 1024px){ .r-nav .r-actions{ gap:.55rem !important; } .r-nav .r-actions .r-btn--cadastro{ min-width: 120px !important; } .r-nav .r-actions .r-btn--entrar{ min-width: 96px !important; } } /* Mobile médio */ @media (max-width: 640px){ .r-nav .r-actions{ gap:8px !important; } .r-nav .r-actions .r-btn{ padding: 6px 12px !important; /* um pouco mais de conforto */ border-radius:10px !important; font-size:13px !important; } .r-nav .r-actions .r-btn--cadastro{ min-width:108px !important; } .r-nav .r-actions .r-btn--entrar{ min-width:88px !important; } } /* Mobile estreito: limita por % para caber lado a lado */ @media (max-width: 390px){ .r-nav .r-actions{ gap:6px !important; } .r-nav .r-actions .r-btn{ max-width:45% !important; } } @media (max-width: 340px){ .r-nav .r-actions .r-btn{ max-width:46% !important; } }