/* ============================================================================ Raviera Intranet — design system no padrão do Raviera Connect (Inter, claro), layout inspirado nas referências (sidebar + Minha jornada + Loja + feed). Personalização (data-attributes no ): data-theme = light (padrão) | dark data-accent = azul|ciano|violeta|verde|dourado data-skin = nenhuma | a temporada do mês (ver seasons.css e app/seasons.py) ========================================================================== */ /* ---------- Tokens (tema claro = padrão) ---------- */ :root { --bg: #f4f7fb; --bg-2: #edf2f7; --surface: #ffffff; --surface-2: #f7f9fc; --surface-3: #eaf0f6; --line: rgba(35, 64, 103, 0.12); --line-2: rgba(35, 64, 103, 0.07); --line-strong: rgba(var(--personal-accent-rgb), 0.4); --text: #162236; --muted: #627187; --muted-2: #7a889a; --gold: #c2a15a; --gold-soft: #ddc593; --radius: 20px; --radius-lg: 24px; --radius-sm: 14px; --shadow: 0 8px 28px rgba(31, 55, 86, 0.07); --shadow-lg: 0 24px 60px rgba(31, 55, 86, 0.13); --font: "Inter", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif; --personal-accent: #35d0ff; --personal-accent-rgb: 53, 208, 255; --personal-accent-ink: #087faa; --accent-strong: var(--personal-accent-ink); } :root[data-accent="azul"] { --personal-accent: #35d0ff; --personal-accent-rgb: 53,208,255; --personal-accent-ink: #087faa; } :root[data-accent="ciano"] { --personal-accent: #35e2f2; --personal-accent-rgb: 53,226,242; --personal-accent-ink: #087e8b; } :root[data-accent="violeta"] { --personal-accent: #9c83ff; --personal-accent-rgb: 156,131,255; --personal-accent-ink: #5f49bf; } :root[data-accent="verde"] { --personal-accent: #4ae09a; --personal-accent-rgb: 74,224,154; --personal-accent-ink: #16845b; } :root[data-accent="dourado"] { --personal-accent: #f2c05e; --personal-accent-rgb: 242,192,94; --personal-accent-ink: #8d6514; } /* As temporadas (data-skin) ganham do acento e moram no seasons.css, que é carregado depois deste arquivo — são doze campanhas, uma por mês, e cada uma tem cor no claro, cor no escuro e enfeite próprio. */ /* ---------- Tema escuro (estilo Connect) ---------- */ :root[data-theme="dark"] { color-scheme: dark; --bg: #05070a; --bg-2: #080c12; --surface: #0f1622; --surface-2: #131c2a; --surface-3: #1a2333; --line: rgba(145, 178, 221, 0.13); --line-2: rgba(145, 178, 221, 0.08); --text: #f4f8ff; --muted: #8f9bad; --muted-2: #657286; --gold: #ddc593; --gold-soft: #c2a15a; --shadow: 0 12px 30px rgba(0, 0, 0, 0.35); --shadow-lg: 0 26px 64px rgba(0, 0, 0, 0.45); --accent-strong: var(--personal-accent); } :root { color-scheme: light; } /* ---------- Base ---------- */ * { box-sizing: border-box; } [hidden] { display: none !important; } html { scroll-behavior: smooth; } body { margin: 0; min-height: 100dvh; background: radial-gradient(1100px 460px at 82% -12%, color-mix(in srgb, var(--personal-accent) 9%, transparent), transparent 60%), var(--bg); color: var(--text); font-family: var(--font); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; transition: background-color .3s ease, color .3s ease; } h1, h2, h3, h4, p { margin: 0; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } img { max-width: 100%; display: block; } input { font-family: inherit; } .icon { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; } .icon-sm { width: 16px; height: 16px; } .muted { color: var(--muted); } :focus-visible { outline: 2px solid rgba(var(--personal-accent-rgb), .55); outline-offset: 2px; } ::selection { background: rgba(var(--personal-accent-rgb), .22); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: rgba(var(--personal-accent-rgb), .22); border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ---------- Layout ---------- */ .layout { min-height: 100dvh; } .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 40; width: 260px; display: flex; flex-direction: column; gap: 18px; padding: 24px 18px; overflow-y: auto; background: var(--surface); border-right: 1px solid var(--line-2); } .content { margin-left: 260px; min-height: 100dvh; } .main { max-width: 1500px; min-width: 0; margin: 0 auto; padding: 22px 32px 60px; overflow-x: clip; } .sidebar-backdrop { position: fixed; inset: 0; z-index: 30; background: rgba(30,24,45,.4); backdrop-filter: blur(3px); border: 0; } /* Marca */ .brand { display: flex; align-items: center; gap: 11px; padding: 2px 8px; } .brand-logo { width: 38px; height: 38px; object-fit: contain; filter: drop-shadow(0 8px 14px rgba(var(--personal-accent-rgb), .18)); } .brand-copy strong { display: block; font-size: 19px; font-weight: 800; letter-spacing: -.4px; line-height: 1; color: var(--text); } .brand-copy small { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .32em; text-transform: uppercase; color: var(--accent-strong); margin-top: 3px; } /* Nav */ .nav { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; } .nav-link { display: flex; align-items: center; gap: 13px; padding: 11px 14px; border-radius: 14px; color: var(--muted); font-weight: 500; font-size: 14px; transition: background .18s ease, color .18s ease; } .nav-link .icon { color: var(--muted-2); } .nav-link:hover { background: var(--surface-3); color: var(--text); } .nav-link.is-active { background: rgba(var(--personal-accent-rgb), .14); color: var(--accent-strong); font-weight: 600; } .nav-link.is-active .icon { color: var(--accent-strong); } .nav-divider { height: 1px; margin: 8px 12px 6px; background: var(--line-2); } .nav-link-connect { position: relative; color: var(--text); background: linear-gradient(115deg, rgba(var(--personal-accent-rgb), .13), rgba(var(--personal-accent-rgb), .035)); border: 1px solid rgba(var(--personal-accent-rgb), .15); } .nav-link-connect .icon { color: var(--accent-strong); } .nav-link-connect small { margin-left: auto; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-strong); } /* Saldo */ .saldo { position: relative; overflow: hidden; margin-top: auto; border: 1px solid var(--line); border-radius: var(--radius); padding: 15px; background: linear-gradient(145deg, var(--surface), var(--surface-2)); box-shadow: var(--shadow); } .saldo::after { content: ""; position: absolute; width: 120px; height: 120px; right: -70px; top: -70px; border-radius: 50%; border: 1px solid rgba(var(--personal-accent-rgb), .18); box-shadow: 0 0 0 18px rgba(var(--personal-accent-rgb), .04); pointer-events: none; } .saldo-heading { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; } .saldo-heading > span { font-size: 11px; font-weight: 700; color: var(--accent-strong); } .saldo-label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); } .saldo-row { position: relative; z-index: 1; display: flex; align-items: center; gap: 11px; margin-top: 10px; } .saldo-row-main { margin-top: 13px; } .badge-ic { width: 34px; height: 34px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex: none; } .badge-ic.coin { border-radius: 50%; background: radial-gradient(circle at 32% 26%, #fff4c8 0 9%, #f4cd69 28%, #c78a22 76%, #8a5811 100%); color: #6b4e17; box-shadow: inset 0 0 0 2px rgba(255,255,255,.58), inset 0 0 0 4px rgba(119,74,10,.18), 0 7px 16px rgba(163,105,21,.22); } .badge-ic.star { background: rgba(var(--personal-accent-rgb),.16); color: var(--accent-strong); } .saldo-row b { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.3px; } .saldo-row small { display: block; font-size: 12px; color: var(--muted); } .btn-block { width: 100%; margin-top: 14px; } .side-user { display: flex; align-items: center; gap: 11px; padding: 8px 6px; } .side-user .who { min-width: 0; flex: 1; } .side-user b { display: block; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .side-user small { display: block; font-size: 12px; color: var(--muted); } /* Topbar */ .topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 16px; padding: 15px 32px; background: color-mix(in srgb, var(--bg) 88%, transparent); border-bottom: 1px solid var(--line-2); backdrop-filter: blur(16px); } .search { flex: 1; max-width: 540px; margin: 0 auto; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px; border-radius: 99px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); } .search .icon { color: var(--muted-2); } .search input { flex: 1; border: 0; background: transparent; color: var(--text); font-size: 14px; outline: none; } .search input::placeholder { color: var(--muted-2); } .topbar-left, .topbar-right { display: flex; align-items: center; gap: 10px; } .topbar-assistant { display: none; } .hamburger { display: none; } .org-switcher { display: flex; align-items: center; gap: 9px; padding: 5px 12px 5px 5px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); font-weight: 600; font-size: 13px; } .org-switcher .icon { color: var(--muted-2); } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 13px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); transition: color .18s ease, border-color .18s ease, transform .18s ease; } .icon-btn:hover { color: var(--text); border-color: var(--line-strong); transform: translateY(-1px); } /* ---------- Primitivos ---------- */ .card { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius); box-shadow: var(--shadow); } :root[data-theme="dark"] .card { background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 96%, white 4%), var(--surface)); box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.025); } .card-pad { padding: 22px; } .avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(140deg, rgba(var(--personal-accent-rgb),.35), rgba(var(--personal-accent-rgb),.62)); color: #fff; font-weight: 700; font-size: 13px; width: 40px; height: 40px; overflow: hidden; flex: none; } .avatar.xs { width: 30px; height: 30px; font-size: 12px; } .avatar.lg { width: 92px; height: 92px; font-size: 30px; } /* Avatar clicável: leva ao perfil da pessoa sem mudar o desenho do avatar. O wrapper não impõe forma nenhuma — quem desenha continua sendo o filho (.avatar, .podium-avatar, imagem do feed…). */ .avatar-link { display: inline-flex; flex: none; line-height: 0; border-radius: 14px; } .avatar-link:has(.avatar) { border-radius: 50%; } .avatar-link > * { transition: box-shadow .18s ease, transform .18s ease; } .avatar-link:hover > * { transform: translateY(-1px); box-shadow: 0 0 0 2px rgba(var(--personal-accent-rgb), .55); } .avatar-link:focus-visible { outline: 2px solid var(--personal-accent); outline-offset: 2px; } /* Nome que leva ao perfil da pessoa: herda o estilo do texto e só sublinha no hover, para as telas não virarem um mar de links azuis. */ .social-person-link { color: inherit; font: inherit; text-decoration: none; } .social-person-link:hover { text-decoration: underline; text-underline-offset: 2px; } .social-person-link:focus-visible { outline: 2px solid var(--personal-accent); outline-offset: 2px; border-radius: 4px; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 13px; border: 1px solid transparent; font-size: 14px; font-weight: 600; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, color .18s ease; } .btn .icon { width: 17px; height: 17px; } .btn:disabled { opacity: .55; cursor: not-allowed; } .btn-primary { color: #fff; background: linear-gradient(135deg, var(--personal-accent), var(--personal-accent-ink)); box-shadow: 0 10px 26px rgba(var(--personal-accent-rgb), .32); } .btn-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 14px 32px rgba(var(--personal-accent-rgb), .4); } .btn-ghost { color: var(--text); background: var(--surface); border-color: var(--line); } .btn-ghost:hover:not(:disabled) { border-color: var(--line-strong); color: var(--accent-strong); } .btn-sm { height: 38px; padding: 0 15px; font-size: 13px; border-radius: 11px; } .pill { display: inline-flex; align-items: center; gap: 6px; height: 27px; padding: 0 11px; border-radius: 99px; font-size: 12px; font-weight: 700; } .pill-soft { color: var(--accent-strong); background: rgba(var(--personal-accent-rgb), .13); } .pill-gold { color: #7a5a1c; background: rgba(194,161,90,.18); } .link-more { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--accent-strong); } .link-more:hover { text-decoration: underline; } .sec { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .sec h2 { font-size: 16px; font-weight: 700; letter-spacing: -.2px; } .eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--muted-2); } .eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 99px; background: var(--personal-accent); } /* RavCoins — moeda visual própria da intranet */ .ravcoin { --coin-size: 46px; position: relative; width: var(--coin-size); height: var(--coin-size); flex: none; display: grid; place-items: center; isolation: isolate; border: 1px solid #a96e16; border-radius: 50%; color: #70440b; background: radial-gradient(circle at 31% 24%, #fff9dc 0 8%, #f7d77e 23%, #e3ad3f 57%, #b97618 82%, #81500d 100%); box-shadow: inset 0 0 0 2px rgba(255,255,255,.68), inset 0 0 0 6px rgba(117,69,8,.14), inset -8px -9px 16px rgba(106,58,5,.18), 0 10px 22px rgba(161,103,17,.25); } .ravcoin::before { content: ""; position: absolute; inset: 13%; z-index: -1; border: 1px solid rgba(119,72,10,.42); border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255,247,200,.34); } .ravcoin::after { content: ""; position: absolute; inset: 4px 9px auto auto; width: 24%; height: 13%; border-radius: 99px; background: rgba(255,255,255,.72); transform: rotate(30deg); filter: blur(.2px); } .ravcoin > span { font-family: Georgia, serif; font-size: calc(var(--coin-size) * .42); font-weight: 800; line-height: 1; text-shadow: 0 1px 0 rgba(255,255,255,.62); } .ravcoin-xs { --coin-size: 28px; } .ravcoin-sm { --coin-size: 38px; } .ravcoin-md { --coin-size: 52px; } .ravcoin-lg { --coin-size: 78px; } .badge-ic.coin .icon { display: none; } .badge-ic.coin::after { content: "R"; font-family: Georgia, serif; font-weight: 800; } .coindot { width: 16px; height: 16px; display: inline-grid; place-items: center; border: 1px solid #b57a1c; border-radius: 50%; color: #7a4a0a; background: radial-gradient(circle at 32% 25%, #fff3bf, #ecc45e 55%, #bd7d1d); font: 800 8px/1 Georgia, serif; box-shadow: inset 0 0 0 1px rgba(255,255,255,.55); } /* ---------- Grades ---------- */ .row-top { display: grid; grid-template-columns: 1.55fr 1fr 1fr; gap: 20px; align-items: stretch; } .row-mid { display: grid; grid-template-columns: 1fr 1.12fr; gap: 20px; align-items: start; margin-top: 20px; } .row-bot { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 20px; align-items: start; margin-top: 20px; } .tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 20px; } .col { display: flex; flex-direction: column; gap: 20px; } /* ---------- Início: painel compacto e responsivo ---------- */ .home-dashboard { display: flex; flex-direction: column; gap: 18px; } .home-top { display: grid; grid-template-columns: 1.55fr 1fr 1fr; gap: 18px; align-items: stretch; } .home-mid { display: grid; grid-template-columns: .88fr 1.32fr .88fr; gap: 18px; align-items: stretch; } .home-top > *, .home-mid > * { min-width: 0; } .home-dashboard .card-pad { padding: 19px; } .home-dashboard .sec { margin-bottom: 11px; } .home-dashboard .sec h2 { font-size: 15px; } .hero.home-hero { min-height: 250px; border: 1px solid rgba(var(--personal-accent-rgb), .12); box-shadow: var(--shadow-lg); } .home-hero .bg { background: radial-gradient(circle at 78% 20%, rgba(var(--personal-accent-rgb), .34), transparent 29%), radial-gradient(circle at 85% 74%, rgba(37,99,255,.2), transparent 32%), linear-gradient(130deg, #fafdff 0%, #eef8fd 45%, #d8f2fb 100%); } :root[data-theme="dark"] .home-hero .bg { background: radial-gradient(circle at 78% 20%, rgba(var(--personal-accent-rgb), .22), transparent 29%), radial-gradient(circle at 85% 74%, rgba(37,99,255,.18), transparent 32%), linear-gradient(130deg, #0f1622 0%, #0c1724 52%, #08111c 100%); } .hero.home-hero::after { background: linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.9) 48%, rgba(255,255,255,.2) 73%, transparent 100%); } :root[data-theme="dark"] .hero.home-hero::after { background: linear-gradient(90deg, rgba(9,13,20,.96) 0%, rgba(9,13,20,.82) 50%, rgba(9,13,20,.08) 78%, transparent 100%); } .home-hero .hero-body { max-width: 66%; padding: 30px; } .home-hero .hero-body h1 { margin-top: 8px; font-size: clamp(25px, 2.2vw, 32px); } .home-hero .hero-body p { margin-top: 9px; max-width: 46ch; } .hero-actions { display: flex; align-items: center; gap: 14px; margin-top: 18px; } .home-hero .hero-actions .btn { flex: 0 0 auto; margin-top: 0; white-space: nowrap; height: 40px; padding: 0 18px; font-size: 13px; border-radius: 11px; } .home-hero .hero-status { white-space: nowrap; } .hero-status { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11.5px; font-weight: 600; } .hero-status i { width: 7px; height: 7px; border-radius: 50%; background: #1ed8b0; box-shadow: 0 0 0 4px rgba(30,216,176,.12); } .hero-orbits { position: absolute; z-index: 1; right: 5%; top: 50%; width: 132px; height: 132px; display: grid; place-items: center; border: 1px solid rgba(var(--personal-accent-rgb), .24); border-radius: 50%; transform: translateY(-50%); color: var(--accent-strong); } .hero-orbits::before, .hero-orbits::after, .hero-orbits span { content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(var(--personal-accent-rgb), .18); } .hero-orbits::before { inset: 17px; }.hero-orbits::after { inset: 35px; }.hero-orbits span:first-child { width: 10px; height: 10px; top: 5px; left: 60px; border: 0; background: var(--personal-accent); box-shadow: 0 0 16px rgba(var(--personal-accent-rgb), .72); } .hero-orbits span:nth-child(2) { width: 8px; height: 8px; bottom: 18px; left: 18px; border: 0; background: #2563ff; } .hero-orbits b { font: 800 30px/1 Georgia, serif; } :root[data-theme="light"] .hero-orbits b { min-width: 54px; min-height: 54px; display: grid; place-items: center; border: 1px solid rgba(var(--personal-accent-rgb), .38); border-radius: 50%; color: color-mix(in srgb, var(--personal-accent-ink) 88%, #10233d 12%); background: rgba(255, 255, 255, .7); box-shadow: 0 10px 30px rgba(var(--personal-accent-rgb), .14); text-shadow: 0 1px 0 #fff; } :root[data-density="compacta"] .main { padding-top: 18px; padding-bottom: 18px; } :root[data-density="compacta"] .card-pad { padding: 16px; } :root[data-density="compacta"] .nav { gap: 2px; } :root[data-density="compacta"] .nav-link { min-height: 44px; } :root[data-density="compacta"] .page-heading { margin-bottom: 16px; } :root[data-motion="reduzida"] *, :root[data-motion="reduzida"] *::before, :root[data-motion="reduzida"] *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .journey-card { position: relative; overflow: hidden; background: linear-gradient(145deg, var(--surface), color-mix(in srgb, var(--surface-2) 76%, rgba(var(--personal-accent-rgb), .16))); } .journey-card::after { content: ""; position: absolute; right: -48px; top: 30px; width: 118px; height: 118px; border: 1px solid rgba(var(--personal-accent-rgb), .1); border-radius: 50%; box-shadow: 0 0 0 22px rgba(var(--personal-accent-rgb), .025); pointer-events: none; } .journey-balance { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; } .journey-balance-copy small, .journey-balance-copy span { display: block; color: var(--muted); font-size: 11.5px; } .journey-balance-copy b { display: block; margin: 2px 0 -1px; font-size: 27px; line-height: 1; letter-spacing: -1px; } .journey-balance-copy span { color: #9a6617; font-weight: 750; } .journey-metrics { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 13px; } .journey-metrics > div { display: flex; align-items: center; gap: 8px; padding: 8px 9px; border: 1px solid var(--line-2); border-radius: 11px; background: color-mix(in srgb, var(--surface) 72%, transparent); } .journey-metrics .ic { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 9px; color: var(--accent-strong); background: rgba(var(--personal-accent-rgb), .13); } .journey-metrics .rank { color: #2563ff; background: rgba(37,99,255,.1); } .journey-metrics b, .journey-metrics small { display: block; } .journey-metrics b { font-size: 13px; line-height: 1.1; }.journey-metrics small { margin-top: 2px; color: var(--muted); font-size: 11px; } .journey-card .season { margin-top: 12px; padding-top: 11px; } .season-progress { display: flex; align-items: center; gap: 8px; margin-top: 7px; }.season-progress .progress { flex: 1; }.season-progress > small { color: var(--muted); font-size: 11px; font-weight: 700; } .store-card { display: flex; flex-direction: column; } .store-list { flex: 1; min-height: 0; } .store-card .store-item { padding: 8px 0; } .store-card .store-item > .icon { color: var(--muted-2); } .store-card .store-thumb { width: 38px; height: 38px; } .store-card .store-foot { margin-top: 8px; } .linkedin-card, .feed-card, .home-now { display: flex; min-height: 0; flex-direction: column; } .linkedin-preview { position: relative; isolation: isolate; overflow: hidden; flex: 1; min-height: 145px; display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; padding: 18px; border: 1px solid rgba(10,102,194,.12); border-radius: 16px; background: radial-gradient(circle at 92% 12%, rgba(10,102,194,.18), transparent 34%), linear-gradient(135deg, #f9fcff, #edf5fc); transition: transform .18s ease, box-shadow .18s ease; } :root[data-theme="dark"] .linkedin-preview { background: radial-gradient(circle at 92% 12%, rgba(10,102,194,.22), transparent 34%), linear-gradient(135deg, #101a27, #0d1621); } .linkedin-preview:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(10,102,194,.12); } .linkedin-post-copy { position: relative; z-index: 2; min-width: 0; max-width: 85%; } .linkedin-preview .eyebrow { color: #0a66c2; } .linkedin-preview .li-title { display: -webkit-box; overflow: hidden; margin: 8px 0 7px; font-size: clamp(16px,1.35vw,22px); line-height: 1.18; -webkit-box-orient: vertical; -webkit-line-clamp: 4; } .linkedin-preview small { display: block; color: var(--muted); font-size: 11.5px; line-height: 1.4; } .linkedin-post-media { position: absolute; z-index: 0; inset: 0; } .linkedin-post-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,14,28,.08) 3%, rgba(5,18,34,.48) 52%, rgba(4,14,29,.92) 100%); } .linkedin-post-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; } .linkedin-preview.has-post-image:hover .linkedin-post-media img { transform: scale(1.025); } .linkedin-preview.has-post-image .linkedin-post-copy { max-width: 88%; color: #fff; text-shadow: 0 2px 16px rgba(0,0,0,.24); } .linkedin-preview.has-post-image .eyebrow, .linkedin-preview.has-post-image small { color: rgba(255,255,255,.88); } .linkedin-post-date { font-weight: 700; } .linkedin-arrow { position: relative; z-index: 2; width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #0a66c2; box-shadow: 0 8px 20px rgba(4,31,61,.2); } .linkedin-card .li-foot { margin-top: 9px; }.linkedin-card .li-foot span:last-child { margin-left: auto; color: #0a66c2; } .linkedin-admin { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .linkedin-admin-btn { border: 1px solid rgba(10,102,194,.35); background: transparent; color: #0a66c2; font-size: 12px; font-weight: 650; padding: 6px 10px; border-radius: 9px; cursor: pointer; transition: background .15s ease; } .linkedin-admin-btn:hover { background: rgba(10,102,194,.08); } .linkedin-admin-btn.is-ghost { border-color: var(--line-2); color: var(--muted); } .linkedin-admin-btn:disabled { opacity: .5; cursor: default; } .feed-list { flex: 1; min-height: 0; display: grid; grid-template-rows: repeat(3,minmax(0,1fr)); } .feed-card .feed-item { min-height: 0; align-items: center; padding: 9px 0; } .feed-copy { min-width: 0; flex: 1; }.feed-card .feed-item p { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .feed-action { display: inline-flex; align-items: center; gap: 5px; padding: 4px; border: 0; background: transparent; color: inherit; } .feed-action:hover, .feed-action.is-on { color: #e35472; } .home-now { gap: 0; } .home-celebration { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0 14px; border-bottom: 1px solid var(--line-2); } .celebration-copy b, .celebration-copy small { display: block; }.celebration-copy b { margin-top: 6px; font-size: 14px; }.celebration-copy small { margin-top: 2px; color: var(--muted); font-size: 11.5px; } .home-celebration .avatar-stack { margin-top: 0; flex: none; } .home-poll { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-top: 13px; } .home-poll > p { margin: 8px 0 11px; font-size: 14px; font-weight: 700; line-height: 1.35; } .home-poll > div { display: flex; align-items: center; gap: 10px; }.home-poll > div small { color: var(--muted); font-size: 11.5px; } .home-quickbar { display: grid; grid-template-columns: 155px repeat(5,minmax(0,1fr)); align-items: stretch; gap: 9px; padding: 11px; } .quickbar-title { display: flex; flex-direction: column; justify-content: center; padding: 0 10px; }.quickbar-title b { margin-top: 7px; font-size: 14px; line-height: 1.25; } .quick-action { min-width: 0; display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 9px; border: 1px solid var(--line-2); border-radius: 13px; background: var(--surface-2); transition: transform .18s ease, border-color .18s ease, background .18s ease; } .quick-action:hover { transform: translateY(-2px); border-color: var(--line-strong); background: var(--surface); } .quick-action .tile-ic { width: 38px; height: 38px; border-radius: 12px; }.quick-action .tile-ic .icon { width: 18px; height: 18px; } .quick-action b, .quick-action small { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.quick-action b { font-size: 12px; }.quick-action small { margin-top: 2px; color: var(--muted); font-size: 11px; }.quick-arrow { color: var(--muted-2); } @media (min-width: 1201px) and (min-height: 740px) { body.home-screen { overflow: hidden; } .home-screen .content { height: 100dvh; overflow: hidden; } .home-screen .main { height: calc(100dvh - 75px); padding: 14px 24px 16px; } .home-dashboard { height: 100%; display: grid; grid-template-rows: clamp(232px, 30vh, 270px) minmax(260px,1fr) 110px; gap: 12px; } .home-top, .home-mid, .home-quickbar { min-height: 0; } .home-top, .home-mid { gap: 12px; } .home-top > *, .home-mid > * { height: 100%; min-height: 0; overflow: hidden; } .hero.home-hero { min-height: 0; } .home-screen .home-quickbar { padding-right: 76px; } .home-screen .assistant-launcher { width: 48px; padding: 0; justify-content: center; font-size: 0; } .home-dashboard .card-pad { padding: 15px; } .journey-card .ravcoin-lg { --coin-size: 66px; } .home-hero .hero-body { padding: 24px; } .home-hero .hero-body h1 { font-size: clamp(24px, 2vw, 31px); } } @media (min-width: 1201px) and (min-height: 740px) and (max-height: 819px) { .store-card .store-item:nth-child(3) { display: none; } .home-hero .hero-body { max-width: 70%; padding: 14px 24px; } .home-hero .hero-body h1 { margin-top: 5px; font-size: 28px; } .home-hero .hero-body p { margin-top: 6px; font-size: 12px; line-height: 1.4; } .home-hero .hero-actions { margin-top: 8px; } .home-hero .hero-actions .btn { height: 38px; padding: 0 16px; } .home-hero .hero-status { font-size: 11px; } } /* Hero */ .hero { position: relative; border-radius: var(--radius-lg); overflow: hidden; min-height: 292px; display: flex; box-shadow: var(--shadow-lg); } .hero .bg { position: absolute; inset: 0; } .hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.78) 34%, rgba(255,255,255,.15) 62%, transparent 78%); } :root[data-theme="dark"] .hero::after { background: linear-gradient(100deg, rgba(9,13,20,.92) 0%, rgba(9,13,20,.72) 36%, transparent 72%); } .hero-body { position: relative; z-index: 1; align-self: center; padding: 40px; max-width: 58%; } .hero-body h1 { font-size: clamp(30px, 3.3vw, 44px); font-weight: 800; line-height: 1.08; letter-spacing: -1.4px; margin-top: 12px; } .hero-body h1 .name { color: var(--accent-strong); } .hero-body p { margin-top: 12px; font-size: 14px; line-height: 1.55; color: var(--muted); max-width: 40ch; } .hero-body .btn { margin-top: 22px; } /* Minha jornada */ .journey-top { display: flex; align-items: center; gap: 16px; } .medal { width: 84px; height: 84px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 800; color: #6b4e17; background: radial-gradient(circle at 35% 30%, #f3e3bd, #c2a15a 70%); box-shadow: inset 0 0 0 4px rgba(255,255,255,.4), 0 10px 22px rgba(170,130,55,.35); } .journey-list { display: flex; flex-direction: column; gap: 10px; flex: 1; } .journey-row { display: flex; align-items: center; gap: 10px; } .journey-row .ic { width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex: none; } .journey-row .ic.coin { background: rgba(194,161,90,.18); color: #8a6f30; } .journey-row .ic.pts { background: rgba(var(--personal-accent-rgb),.16); color: var(--accent-strong); } .journey-row b { display: block; font-size: 16px; font-weight: 800; letter-spacing: -.3px; } .journey-row small { display: block; font-size: 12px; color: var(--muted); } .season { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-2); } .season-head { display: flex; align-items: center; justify-content: space-between; } .season-head b { font-size: 13px; font-weight: 700; } .season-dates { font-size: 12px; color: var(--muted-2); margin: 8px 0 8px; } .progress { height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; } .progress > span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, rgba(var(--personal-accent-rgb),.7), var(--personal-accent)); } /* Loja de experiências */ .store-item { display: flex; align-items: center; gap: 11px; padding: 10px 0; border-top: 1px solid var(--line-2); } .store-item:first-child { border-top: 0; } .store-thumb { width: 42px; height: 42px; border-radius: 11px; flex: none; } .store-item .info { flex: 1; min-width: 0; } .store-item b { display: block; font-size: 13px; font-weight: 700; } .store-item small { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); } .store-item .coindot { flex: none; } .store-foot { margin-top: 12px; font-size: 12px; color: var(--muted-2); line-height: 1.45; } /* LinkedIn */ .li-head { display: flex; align-items: center; gap: 8px; color: #0a66c2; font-weight: 700; font-size: 13px; } .li-badge { width: 22px; height: 22px; border-radius: 6px; background: #0a66c2; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; } .li-title { font-size: 20px; font-weight: 800; line-height: 1.2; letter-spacing: -.4px; margin-top: 12px; } .li-thumb { height: 152px; border-radius: var(--radius-sm); margin-top: 14px; } .li-foot { display: flex; align-items: center; gap: 16px; margin-top: 12px; color: var(--muted); font-size: 13px; font-weight: 600; } .li-foot span { display: inline-flex; align-items: center; gap: 6px; } /* Feed */ .feed-item { display: flex; gap: 12px; padding: 13px 0; border-top: 1px solid var(--line-2); } .feed-item:first-child { border-top: 0; padding-top: 0; } .feed-item .who { display: flex; align-items: center; gap: 8px; } .feed-item .who b { font-size: 13px; font-weight: 700; } .feed-item .who small { font-size: 12px; color: var(--muted-2); } .feed-item p { font-size: 13px; color: var(--muted); line-height: 1.45; margin-top: 4px; } .feed-metrics { display: flex; align-items: center; gap: 14px; color: var(--muted-2); font-size: 12px; font-weight: 600; margin-left: auto; align-self: center; } .feed-metrics span { display: inline-flex; align-items: center; gap: 5px; } /* Atalhos */ .tile { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow); transition: transform .18s ease, box-shadow .18s ease; } .tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); } .tile-ic { width: 48px; height: 48px; border-radius: 15px; display: flex; align-items: center; justify-content: center; background: linear-gradient(150deg, rgba(var(--personal-accent-rgb),.14), rgba(var(--personal-accent-rgb),.3)); color: var(--accent-strong); box-shadow: inset 0 1px 0 rgba(255,255,255,.4); } .tile-ic .icon { width: 22px; height: 22px; } .tile h3 { font-size: 14px; font-weight: 700; } .tile p { font-size: 12px; color: var(--muted); line-height: 1.45; } /* Reconhecimento (aniversariantes) */ .congrats { text-align: center; padding: 10px 0 4px; } .congrats .big { font-size: 24px; font-weight: 800; letter-spacing: -.4px; color: var(--accent-strong); } .congrats p { font-size: 12px; color: var(--muted); margin-top: 2px; } .avatar-stack { display: flex; justify-content: center; margin-top: 14px; } .avatar-stack .avatar { margin-left: -10px; box-shadow: 0 0 0 3px var(--surface); } .avatar-stack .avatar:first-child { margin-left: 0; } .avatar-more { background: rgba(var(--personal-accent-rgb),.16); color: var(--accent-strong); } /* FAQ — um card por assunto, com acordeão dentro. Antes era uma lista corrida de 24 linhas iguais, difícil de varrer. O tom do assunto (--tone/--tone-ink, definidos na .faq-section) pinta o hover e o estado aberto, para a cor acompanhar o card onde a linha vive. */ .faq-item { border-top: 1px solid var(--line-2); } .faq-item:first-child { border-top: 0; } .faq-q { width: 100%; display: flex; align-items: center; gap: 12px; padding: 13px 8px; border: 0; border-radius: 11px; background: none; text-align: left; font-size: 13.5px; font-weight: 600; line-height: 1.45; color: var(--text); transition: color .16s ease, background .16s ease; } .faq-q:hover { color: var(--tone-ink, var(--accent-strong)); background: rgba(var(--tone, var(--personal-accent-rgb)), .07); } .faq-q:focus-visible { outline: 2px solid var(--personal-accent); outline-offset: 1px; } .faq-q-text { flex: 1; min-width: 0; } /* A seta num disco próprio: dá alvo de clique visível e um estado de aberto que se lê de longe, em vez de um risco cinza solto na margem. */ .faq-chev { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; color: var(--muted-2); background: var(--surface-3); transition: background .16s ease, color .16s ease; } .faq-chev .icon { transition: transform .22s ease; } .faq-q:hover .faq-chev { color: var(--tone-ink, var(--accent-strong)); background: rgba(var(--tone, var(--personal-accent-rgb)), .16); } .faq-item.is-open .faq-q { color: var(--tone-ink, var(--accent-strong)); } .faq-item.is-open .faq-chev { color: #fff; background: rgb(var(--tone, var(--personal-accent-rgb))); } .faq-item.is-open .faq-chev .icon { transform: rotate(180deg); } /* Resposta em painel tingido, com um fio do tom do assunto na borda: fecha o bloco visualmente e amarra a resposta à cor do card, sem outra divisória. */ .faq-a { display: none; max-width: 74ch; margin: 2px 8px 13px; padding: 12px 15px; border-left: 3px solid rgba(var(--tone, var(--personal-accent-rgb)), .45); border-radius: 4px 12px 12px 4px; background: var(--surface-2); font-size: 13px; color: var(--muted); line-height: 1.62; } .faq-item.is-open .faq-a { display: block; animation: faq-reveal .22s ease; } @keyframes faq-reveal { from { opacity: 0; transform: translateY(-4px); } } /* ---------- Chatbot ---------- */ .assistant { position: fixed; right: 26px; bottom: 26px; z-index: 60; } .assistant-launcher { display: inline-flex; align-items: center; gap: 9px; height: 52px; padding: 0 20px 0 16px; border-radius: 99px; border: 0; color: #fff; background: linear-gradient(135deg, var(--personal-accent), var(--personal-accent-ink)); box-shadow: 0 14px 34px rgba(var(--personal-accent-rgb),.4); font-weight: 700; font-size: 14px; } .assistant-panel { position: absolute; right: 0; bottom: 0; width: min(360px, calc(100vw - 40px)); border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); overflow: hidden; } .assistant-panel[hidden] { display: none; } .assistant-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line-2); } .assistant-head .icon { color: var(--accent-strong); } .assistant-head b { font-size: 14px; font-weight: 700; flex: 1; } .assistant-head .icon-btn { width: 30px; height: 30px; border: 0; background: transparent; } .assistant-body { padding: 16px; } .bubble { background: var(--surface-3); border-radius: 14px; padding: 12px 14px; font-size: 13px; line-height: 1.5; } .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .chip { height: 32px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); color: var(--accent-strong); font-size: 12px; font-weight: 600; } .chip:hover { border-color: var(--line-strong); } .assistant-input { display: flex; align-items: center; gap: 8px; margin-top: 14px; height: 44px; padding: 0 6px 0 14px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface-2); } /* min-width: 0 é essencial: sem ele o input não encolhe abaixo da largura intrínseca e empurra o botão de enviar para fora do painel no celular. */ .assistant-input input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; outline: none; font-size: 13px; color: var(--text); } .assistant-send { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; border: 0; color: #fff; background: linear-gradient(135deg, var(--personal-accent), var(--personal-accent-ink)); display: flex; align-items: center; justify-content: center; cursor: pointer; } /* ---------- Personalização ---------- */ .perso-wrap { position: relative; } .perso-menu { position: absolute; right: 0; top: 52px; z-index: 70; width: 300px; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); } .perso-menu[hidden] { display: none; } .perso-title { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-strong); margin-bottom: 14px; } .perso-label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 7px; } .perso-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 18px; } .theme-btn { display: flex; align-items: center; justify-content: center; gap: 7px; height: 40px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); color: var(--muted); font-size: 13px; font-weight: 600; } .theme-btn.is-active { border-color: var(--line-strong); background: rgba(var(--personal-accent-rgb),.12); color: var(--accent-strong); } .swatches { display: flex; flex-wrap: wrap; gap: 11px; margin-bottom: 18px; } .swatch { width: 30px; height: 30px; border-radius: 50%; border: 0; box-shadow: 0 0 0 1px var(--line); transition: transform .16s ease; } .swatch:hover { transform: scale(1.12); } .swatch.is-active { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px currentColor; } .skin-list { display: grid; gap: 7px; } .skin-option { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); text-align: left; } .skin-option:hover { border-color: var(--line-strong); } .skin-option.is-active { border-color: var(--line-strong); background: rgba(var(--personal-accent-rgb),.1); } .skin-option b { display: block; font-size: 13px; font-weight: 600; } .skin-option span { display: block; font-size: 12px; color: var(--muted-2); } .skin-option .check { color: var(--accent-strong); opacity: 0; } .skin-option.is-active .check { opacity: 1; } /* ---------- Perfil ---------- */ .profile-hero { position: relative; overflow: hidden; } .profile-cover { height: 148px; background: radial-gradient(circle at 78% 20%, rgba(255,255,255,.42), transparent 18%), linear-gradient(120deg, rgba(var(--personal-accent-rgb),.6), color-mix(in srgb, var(--personal-accent) 26%, #2563ff)); } .profile-body { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 0 26px 26px; } .profile-id { display: flex; align-items: flex-end; gap: 18px; margin-top: -46px; } .profile-id .avatar.lg { box-shadow: 0 0 0 5px var(--surface); } .profile-id .eyebrow { display: flex; margin: 0 0 8px; color: var(--muted); } .profile-id h1 { font-size: 32px; font-weight: 800; letter-spacing: -1px; margin-top: 10px; } .profile-id .role { font-size: 13px; color: var(--muted); margin-top: 2px; } .dept-pill { display: inline-flex; height: 26px; align-items: center; padding: 0 11px; border-radius: 99px; background: rgba(var(--personal-accent-rgb),.13); color: var(--accent-strong); font-size: 12px; font-weight: 700; } .ring { position: relative; flex: none; } .ring .lv { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .ring .lv b { font-size: 28px; font-weight: 800; line-height: 1; } .ring .lv small { font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted-2); } .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .stat { padding: 16px 18px; } .stat b { font-size: 22px; font-weight: 800; letter-spacing: -.5px; } .stat small { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted-2); margin-top: 2px; } .stat-coins { display: grid; grid-template-columns: auto 1fr; column-gap: 9px; align-items: center; } .stat-coins .ravcoin { grid-row: 1 / 3; } .stat-coins small { grid-column: 2; } .profile-personalization { scroll-margin-top: 86px; background: linear-gradient(145deg, var(--surface), color-mix(in srgb, var(--surface-2) 82%, rgba(var(--personal-accent-rgb), .14))); } .profile-personalization > .eyebrow { margin-bottom: 9px; } .profile-personalization .sec { margin-bottom: 7px; } .profile-personalization-copy { margin-bottom: 18px; color: var(--muted); font-size: 12px; line-height: 1.55; } .dash { display: grid; grid-template-columns: 1fr 340px; gap: 20px; align-items: start; } .score-row { margin-bottom: 14px; } .score-top { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 6px; } .score-top .v { color: var(--muted); } .score-top .v b { color: var(--text); } .badges { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .badge { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: rgba(var(--personal-accent-rgb),.05); } .badge.locked { border-color: var(--line); background: transparent; opacity: .8; } .badge-ico { width: 42px; height: 42px; border-radius: 12px; flex: none; display: flex; align-items: center; justify-content: center; background: rgba(var(--personal-accent-rgb),.16); color: var(--accent-strong); } .badge.locked .badge-ico { background: var(--surface-3); color: var(--muted-2); } .badge b { display: block; font-size: 13px; font-weight: 700; } .badge small { display: block; font-size: 12px; color: var(--muted); } .badge .progress { margin-top: 6px; height: 5px; } .timeline { position: relative; padding-left: 22px; } .timeline::before { content: ""; position: absolute; left: 5px; top: 4px; bottom: 4px; width: 2px; background: var(--line); } .tl-item { position: relative; padding-bottom: 15px; } .tl-item:last-child { padding-bottom: 0; } .tl-item::before { content: ""; position: absolute; left: -20px; top: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--personal-accent); box-shadow: 0 0 0 3px rgba(var(--personal-accent-rgb),.18); } .tl-item p { font-size: 13px; } .tl-item small { font-size: 12px; color: var(--muted-2); } .ledger-row { display: flex; justify-content: space-between; align-items: center; padding: 11px 0; border-top: 1px solid var(--line-2); } .ledger-row:first-child { border-top: 0; } .ledger-row .lbl { font-size: 13px; } .ledger-row .when { font-size: 12px; color: var(--muted-2); } .delta { font-size: 13px; font-weight: 700; } .delta.up { color: #3f9d6b; } .delta.down { color: #c46b7c; } .dept-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); } .dept-dot { width: 30px; height: 30px; border-radius: 9px; flex: none; } .center-note { text-align: center; font-size: 12px; color: var(--muted-2); } /* ---------- Páginas e módulos da intranet ---------- */ .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 18px 0 26px; } .page-heading-copy { max-width: 760px; } .page-heading h1 { margin-top: 10px; font-size: clamp(34px, 4vw, 54px); line-height: 1.04; letter-spacing: -2px; font-weight: 850; } .page-heading p { margin-top: 10px; max-width: 68ch; color: var(--muted); font-size: 15px; } .page-heading-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; } .directory-section { margin-top: 24px; } .directory-heading { align-items: flex-end; } .directory-heading h2 { margin-top: 8px; font-size: 24px; } .directory-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 18px 0; } .list-search { min-width: min(100%, 410px); height: 46px; display: flex; align-items: center; gap: 10px; padding: 0 15px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--muted-2); box-shadow: var(--shadow); } .list-search:focus-within { border-color: var(--line-strong); box-shadow: 0 0 0 3px rgba(var(--personal-accent-rgb), .09); } .list-search input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--text); } .filter-pills { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; } .chip.is-active { border-color: var(--line-strong); background: rgba(var(--personal-accent-rgb), .13); } .link-button { padding: 0; border: 0; background: transparent; } .empty-state, .empty-search-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; min-height: 210px; text-align: center; color: var(--muted); } .empty-state h2, .empty-state h3, .empty-search-state h3 { color: var(--text); } .empty-state-icon { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 15px; background: rgba(var(--personal-accent-rgb), .12); color: var(--accent-strong); } /* Departamentos */ .department-featured { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px; overflow: hidden; position: relative; } .department-featured::after { content: ""; position: absolute; right: -70px; width: 240px; height: 240px; border: 1px solid rgba(var(--personal-accent-rgb),.12); border-radius: 50%; box-shadow: 0 0 0 32px rgba(var(--personal-accent-rgb),.04), 0 0 0 64px rgba(var(--personal-accent-rgb),.025); pointer-events: none; } .department-featured-icon, .department-icon { display: grid; place-items: center; color: var(--accent-strong); background: rgba(var(--personal-accent-rgb),.13); } .department-featured-icon { width: 68px; height: 68px; border-radius: 20px; } .department-featured-icon .icon { width: 30px; height: 30px; } .department-featured-copy { position: relative; z-index: 1; } .department-featured-copy h2 { margin-top: 7px; font-size: 24px; } .department-featured-copy > p { margin-top: 5px; color: var(--muted); } .department-featured-actions { position: relative; z-index: 1; display: flex; gap: 9px; } .department-meta { display: flex; flex-wrap: wrap; gap: 15px; margin-top: 12px; color: var(--muted); font-size: 12px; } .department-meta span { display: inline-flex; align-items: center; gap: 6px; } .department-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; } .department-card { min-height: 310px; display: flex; flex-direction: column; transition: transform .18s ease, border-color .18s ease; } .department-card:hover { transform: translateY(-3px); border-color: var(--line-strong); } .department-card-head, .community-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .department-icon { width: 48px; height: 48px; border-radius: 15px; } .department-card-copy { margin-top: 18px; } .department-card-copy h3, .community-card-copy h3 { font-size: 18px; } .department-card-copy p, .community-card-copy p { margin-top: 6px; color: var(--muted); font-size: 13px; } .department-owner { display: flex; gap: 9px; align-items: center; margin-top: 16px; } .department-owner small, .department-owner b { display: block; font-size: 12px; } .department-owner small { color: var(--muted-2); } .service-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 15px; } .service-pill { padding: 5px 9px; border-radius: 99px; background: var(--surface-3); color: var(--muted); font-size: 12px; } .department-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 18px; } .directory-help { margin-top: 20px; display: flex; align-items: center; justify-content: space-between; gap: 24px; background: linear-gradient(120deg, rgba(var(--personal-accent-rgb),.14), var(--surface) 62%); } .directory-help h2 { margin-top: 7px; font-size: 23px; } .directory-help p { margin-top: 5px; color: var(--muted); } .tone-green { color: #3f8e6a; background: rgba(79,180,128,.14); } .tone-blue { color: #4e8ed5; background: rgba(78,142,213,.14); } .tone-pink { color: #c76d93; background: rgba(199,109,147,.14); } .tone-gold { color: #9a7836; background: rgba(194,161,90,.16); } .tone-graphite { color: #77778c; background: rgba(123,123,143,.14); } .tone-lavender { color: #7765bd; background: rgba(139,126,201,.15); } /* Comunidades */ .community-overview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .community-overview .stat { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; } .stat-icon { grid-row: 1 / 3; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; color: var(--accent-strong); background: rgba(var(--personal-accent-rgb), .13); } .community-layout { display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: 20px; align-items: start; } .community-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; } .community-card { display: flex; flex-direction: column; min-height: 270px; } .community-card.is-joined { border-color: rgba(var(--personal-accent-rgb), .28); } .community-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; color: var(--accent-strong); background: rgba(var(--personal-accent-rgb), .13); } .community-card-copy { margin-top: 18px; } .community-metrics { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 18px; color: var(--muted); font-size: 12px; } .community-metrics span { display: inline-flex; align-items: center; gap: 5px; } .community-card-actions { display: flex; align-items: center; gap: 9px; margin-top: auto; padding-top: 20px; } .community-aside { position: sticky; top: 86px; display: flex; flex-direction: column; gap: 20px; } .person-row { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-top: 1px solid var(--line-2); } .person-row:first-child { border-top: 0; } .person-copy { min-width: 0; flex: 1; } .person-copy b, .person-copy small, .person-copy span { display: block; } .person-copy b { font-size: 13px; }.person-copy small, .person-copy span { color: var(--muted); font-size: 12px; } .community-callout { background: linear-gradient(145deg, rgba(var(--personal-accent-rgb),.17), var(--surface)); } .community-callout-icon { width: 46px; height: 46px; display: grid; place-items: center; margin-bottom: 16px; border-radius: 14px; background: var(--personal-accent); color: #fff; } .community-callout h2 { margin-top: 8px; }.community-callout p { margin: 8px 0 18px; color: var(--muted); } /* Reconhecimentos */ .recognition-heading { align-items: center; } .recognition-campaign { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; background: linear-gradient(120deg, rgba(var(--personal-accent-rgb),.18), var(--surface) 62%); } .campaign-icon { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 18px; background: var(--personal-accent); color: #fff; } .campaign-copy h2 { margin-top: 6px; font-size: 22px; }.campaign-copy p { color: var(--muted); margin-top: 4px; } .recognition-layout { display: grid; grid-template-columns: minmax(0,1fr) 380px; gap: 20px; align-items: start; margin-top: 20px; } /* auto-fit em vez de duas colunas fixas: com o nome, o setor, a empresa e a cidade no mesmo cartão, coluna estreita quebrava o nome em três linhas. O mínimo de 288px é o que mantém o cartão legível — sobra largura, entram três; falta, cai para uma. */ .celebration-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(288px, 1fr)); gap: 11px; } .celebration-card { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); transition: border-color .18s ease, transform .18s ease; } .celebration-card:hover { border-color: var(--line-strong); transform: translateY(-1px); } .celebration-card .btn { grid-column: 1 / -1; }.celebration-card.is-celebrated { opacity: .75; } .celebration-kind { color: var(--accent-strong); font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .celebration-copy h3 { font-size: 14px; }.celebration-copy p { color: var(--muted); font-size: 12px; } /* Empresa e cidade/UF: uma linha discreta, que só existe quando o NBS informa. */ .celebration-place { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px 10px; } .celebration-place span { display: inline-flex; align-items: center; gap: 4px; color: var(--muted-2); font-size: 12px; font-weight: 600; } .celebration-place .icon { width: 12px; height: 12px; opacity: .75; } /* ---------- Aniversariantes do mês ---------- */ /* Agenda compacta: o dia à esquerda, quem comemora nele à direita. A altura é limitada porque um mês tem ~25 dias com festa — sem o limite, a lista empurraria o mural de reconhecimentos para fora da tela. A moldura é o que avisa que a lista rola: sem ela, o corte no último dia visível parece o fim do mês. */ .month-scroll { max-height: 322px; padding: 5px; border: 1px solid var(--line-2); border-radius: 14px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; } .month-days { display: grid; gap: 2px; list-style: none; margin: 0; padding: 0; } .month-day { display: grid; grid-template-columns: 44px minmax(0,1fr); align-items: center; gap: 12px; padding: 6px 8px; border-radius: 12px; } .month-day:hover { background: var(--surface-2); } .month-day-date { display: flex; flex-direction: column; align-items: center; padding: 4px 0; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-2); } .month-day-date b { font-size: 15px; line-height: 1.15; font-variant-numeric: tabular-nums; } .month-day-date small { color: var(--muted-2); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .month-day.is-today .month-day-date { border-color: var(--personal-accent); background: rgba(var(--personal-accent-rgb),.14); } .month-day.is-today .month-day-date b, .month-day.is-today .month-day-date small { color: var(--accent-strong); } .month-day-people { display: flex; flex-wrap: wrap; gap: 7px 16px; min-width: 0; list-style: none; margin: 0; padding: 0; } .month-day-people > li { min-width: 0; } .month-person { display: inline-flex; align-items: center; gap: 8px; min-width: 0; } .month-person-copy { min-width: 0; } .month-person-copy b, .month-person-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .month-person-copy b { font-size: 12.5px; } .month-person-copy small { color: var(--muted-2); font-size: 11.5px; } a.month-person:hover .month-person-copy b { color: var(--accent-strong); } .month-card-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; } .month-card-actions .btn { white-space: nowrap; } .month-empty { margin: 4px 0 0; color: var(--muted); font-size: 12.5px; } .month-past { margin-top: 10px; border-top: 1px solid var(--line-2); } .month-past summary { display: flex; align-items: center; gap: 8px; padding: 11px 2px 0; color: var(--muted); font-size: 12px; font-weight: 700; list-style: none; cursor: pointer; } .month-past summary::-webkit-details-marker { display: none; } .month-past summary:hover { color: var(--accent-strong); } .month-past-count { display: grid; place-items: center; min-width: 21px; height: 21px; padding: 0 6px; border-radius: 99px; background: var(--surface-3); color: var(--muted-2); font-size: 12px; font-weight: 800; } .month-past[open] .month-scroll { margin-top: 9px; } .month-past[open] summary { color: var(--accent-strong); } /* Um compositor único mantém a agenda limpa: pessoa, data e mensagem ficam juntas apenas quando alguém decide agendar. */ .birthday-wish-dialog { width: min(500px, calc(100vw - 28px)); padding: 0; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); } .birthday-wish-dialog::backdrop { background: rgba(30,24,45,.46); backdrop-filter: blur(3px); } .birthday-wish-form { position: relative; display: grid; gap: 16px; padding: 24px; } .birthday-dialog-head { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 13px; padding-right: 28px; } .birthday-dialog-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 15px; background: linear-gradient(145deg, rgba(229,72,77,.18), rgba(229,72,77,.08)); color: #e5484d; } .birthday-dialog-icon .icon { width: 22px; height: 22px; } .birthday-wish-form h2 { margin-top: 4px; font-size: 19px; } .birthday-dialog-head p { margin-top: 5px; color: var(--muted); font-size: 12.5px; line-height: 1.45; } .birthday-person-field { padding-top: 2px; } .birthday-delivery-note { display: flex; align-items: flex-start; gap: 9px; margin: -4px 0 0; padding: 10px 12px; border: 1px solid rgba(var(--personal-accent-rgb),.18); border-radius: 12px; background: rgba(var(--personal-accent-rgb),.07); color: var(--muted); font-size: 12px; line-height: 1.45; } .birthday-delivery-note[hidden] { display: none; } .birthday-delivery-note .icon { flex: none; margin-top: 1px; color: var(--accent-strong); } .birthday-delivery-note b { color: var(--text); } .birthday-wish-form textarea { resize: vertical; min-height: 118px; } .birthday-dialog-close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border: 0; border-radius: 10px; background: transparent; color: var(--muted-2); font: inherit; font-size: 22px; line-height: 1; cursor: pointer; } .birthday-dialog-close:hover { background: var(--surface-3); color: var(--text); } .birthday-dialog-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .birthday-dialog-footer > span { color: var(--muted-2); font-size: 12px; font-variant-numeric: tabular-nums; } .birthday-dialog-footer > div { display: flex; gap: 8px; } @media (max-width: 620px) { .month-card-actions { align-items: flex-end; flex-direction: column; } .birthday-dialog-footer { align-items: stretch; flex-direction: column; } .birthday-dialog-footer > div { display: grid; grid-template-columns: 1fr 1fr; } } .recognition-post { display: flex; gap: 12px; padding: 16px 0; border-top: 1px solid var(--line-2); }.recognition-post:first-child { border-top: 0; } .recognition-post-body { flex: 1; }.recognition-post-body > p { font-size: 13px; }.recognition-post blockquote { margin: 8px 0; padding: 11px 13px; border-left: 2px solid var(--personal-accent); border-radius: 0 10px 10px 0; background: var(--surface-2); color: var(--muted); font-size: 13px; } .recognition-meta { display: flex; align-items: center; gap: 12px; color: var(--muted-2); font-size: 12px; } .recognition-meta > span:first-child { margin-right: auto; } .recognition-applause { border: 0; background: transparent; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; cursor: pointer; } .recognition-applause.is-on, .recognition-applause.is-active { color: var(--accent-strong); } .recognition-delete { border: 0; background: transparent; color: var(--muted-2); font-size: 12px; cursor: pointer; text-decoration: underline; } .recognition-delete:hover { color: #e5484d; } .recognition-aside { position: sticky; top: 86px; } /* ---------- Composer de reconhecimento ---------- */ .recognition-composer { padding: 0; overflow: hidden; } .composer-head { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 13px; padding: 18px 20px; border-bottom: 1px solid var(--line-2); background: linear-gradient(125deg, rgba(var(--personal-accent-rgb),.16), transparent 78%); } .composer-badge { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; background: var(--personal-accent); color: var(--personal-accent-ink); box-shadow: 0 8px 20px rgba(var(--personal-accent-rgb),.28); } .composer-badge .icon { width: 22px; height: 22px; } .recognition-composer h2 { margin-top: 3px; font-size: 20px; line-height: 1.2; } .composer-lead { margin: 0; padding: 15px 20px 0; color: var(--muted); font-size: 12.5px; } .recognition-composer .stack-form { padding: 15px 20px 20px; } .recognition-composer .form-hint { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .recognition-composer .form-hint b { flex: none; color: var(--muted-2); font-size: 12px; font-variant-numeric: tabular-nums; } .recognition-composer .form-hint b.is-near { color: var(--accent-strong); } /* ---------- Seletor de pessoas com busca ---------- */ .people-field > label { color: var(--muted); font-size: 12px; font-weight: 650; } .people-picker { position: relative; display: grid; gap: 7px; } .people-picker-control { position: relative; display: flex; align-items: center; } .people-picker-ic { position: absolute; left: 13px; display: inline-flex; color: var(--muted-2); pointer-events: none; } /* Prefixado por .form-field de propósito: sem isso a regra genérica `.form-field input` (mesmo peso, definida antes) vence e o campo perde o recuo — o ícone da lupa fica em cima da primeira letra. */ .form-field .people-picker-control input { -webkit-appearance: none; appearance: none; width: 100%; min-height: 46px; padding: 12px 42px 12px 40px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); color: var(--text); font: inherit; font-size: 15px; outline: 0; transition: border-color .18s ease, box-shadow .18s ease; } .form-field .people-picker-control input:focus { border-color: rgba(var(--personal-accent-rgb), .55); box-shadow: 0 0 0 3px rgba(var(--personal-accent-rgb), .1); } .people-picker-clear { position: absolute; right: 8px; width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 9px; background: transparent; color: var(--muted-2); cursor: pointer; } .people-picker-clear:hover { background: var(--surface-3); color: var(--text); } .people-picker-panel { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; right: 0; padding: 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-lg); } /* A rolagem é da lista, não do painel: assim o rodapé com "mostrando 30 de 589" fica sempre visível, em vez de sumir no fim do rolo. */ .people-picker-list { max-height: 268px; overflow-y: auto; } .people-picker-more { margin: 4px 2px 2px; padding: 7px 8px 2px; border-top: 1px solid var(--line-2); color: var(--muted-2); font-size: 12px; } .people-option { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 10px; padding: 8px 9px; border-radius: 10px; cursor: pointer; } .people-option.is-active, .people-option:hover { background: rgba(var(--personal-accent-rgb), .12); } .people-option-copy { display: grid; gap: 1px; min-width: 0; } .people-option-copy b { font-size: 13px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .people-option-copy small { color: var(--muted-2); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .people-picker-hint { margin: 0; color: var(--muted-2); font-size: 12px; } /* Menções (@fulano) — static/js/mentions.js. O menu mora no com position:fixed (como a barra do texto rico): dentro do compositor ele seria recortado pelo overflow do cartão. As opções reusam .people-option, que já é a linha "avatar + nome + cargo" do diretório. */ .mention-panel { position: fixed; z-index: 60; width: min(320px, calc(100vw - 16px)); padding: 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-lg); } .mention-panel[hidden] { display: none; } .mention-list { max-height: 244px; overflow-y: auto; } .mention-option { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 10px; padding: 8px 9px; border-radius: 10px; cursor: pointer; } .mention-option.is-active, .mention-option:hover { background: rgba(var(--personal-accent-rgb), .12); } .mention-option-copy { display: grid; gap: 1px; min-width: 0; } .mention-option-copy b { font-size: 13px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mention-option-copy small { color: var(--muted-2); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* O "@Nome" já publicado. Peso em vez de cor de link: numa frase com três menções, três trechos azuis viram uma linha piscando. */ .social-mention { color: var(--personal-accent); font-weight: 650; text-decoration: none; border-radius: 4px; } .social-mention:hover, .social-mention:focus-visible { text-decoration: underline; } .people-picker-chosen { display: flex; align-items: center; gap: 7px; padding: 9px 11px; border: 1px solid rgba(var(--personal-accent-rgb), .3); border-radius: 11px; background: rgba(var(--personal-accent-rgb), .09); color: var(--text); font-size: 12px; font-weight: 600; } .people-chosen-mark { display: inline-grid; place-items: center; width: 17px; height: 17px; flex: none; border-radius: 50%; background: var(--personal-accent); color: var(--personal-accent-ink); font-size: 11.5px; font-weight: 800; } .stack-form { display: grid; gap: 14px; }.form-field { display: grid; gap: 7px; }.form-field > span { color: var(--muted); font-size: 12px; font-weight: 650; } /* appearance: none remove o visual nativo do iOS (seta dupla no select, sombra interna no textarea), que fazia o formulário parecer sem estilo no celular. */ .form-field select, .form-field textarea, .form-field input { -webkit-appearance: none; appearance: none; width: 100%; min-height: 46px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); color: var(--text); font: inherit; font-size: 15px; resize: vertical; outline: 0; transition: border-color .18s ease, box-shadow .18s ease; } .form-field textarea { min-height: 118px; line-height: 1.55; } .form-field select { padding-right: 40px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none' stroke='%238a94a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; background-size: 13px 8px; } .form-field select:focus, .form-field textarea:focus, .form-field input:focus { border-color: rgba(var(--personal-accent-rgb), .55); box-shadow: 0 0 0 3px rgba(var(--personal-accent-rgb), .1); } .form-field select::-ms-expand { display: none; } /* A lista que o