/* ============================================================================= educacional2 — estilo base (white-label via CSS variables da marca) As cores vêm de --c-primary-* / --c-accent-* / --c-surface (RGB triplets), injetadas no por brandCssVariables(). Tipografia oficial: Inter (fonte da marca Cláudia Demétrio). ============================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap'); :root { --c-primary: var(--c-primary-500); --c-accent: var(--c-accent-500); --radius: 12px; --shadow: 0 2px 8px rgba(0,0,0,.06); --shadow-lg: 0 10px 30px rgba(0,0,0,.12); } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } body { font-family: 'Inter', -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #2c2c2c; background: #f6f5f2; line-height: 1.5; -webkit-font-smoothing: antialiased; } a { color: rgb(var(--c-primary-600)); text-decoration: none; } a:hover { text-decoration: underline; } /* --- Botões --------------------------------------------------------------- */ .btn { display: inline-block; padding: .7rem 1.2rem; border: 0; border-radius: var(--radius); font-size: .95rem; font-weight: 600; cursor: pointer; transition: filter .15s; } .btn:hover { filter: brightness(.94); text-decoration: none; } .btn-primary { background: rgb(var(--c-primary-500)); color: #fff; } .btn-accent { background: rgb(var(--c-accent-500)); color: #2D2A26; } .btn-block { display: block; width: 100%; text-align: center; } /* --- Alertas -------------------------------------------------------------- */ .alert { padding: .8rem 1rem; border-radius: var(--radius); margin: 1rem 0; font-size: .92rem; } .alert-success { background: #e7f4e8; color: #1a3c1b; } .alert-error { background: #fdecec; color: #8a1f1f; } .alert-info { background: #eef2f7; color: #274728; } /* --- Badges --------------------------------------------------------------- */ .badge { display: inline-block; padding: .2rem .7rem; border-radius: 999px; background: rgb(var(--c-accent-100)); color: rgb(var(--c-primary-800)); font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; } /* ============================================================================= AUTH (login / erros) ============================================================================= */ .auth-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 1.5rem; background: radial-gradient(1200px 600px at 50% -10%, rgb(var(--c-primary-800)) 0%, rgb(var(--c-surface)) 55%); } .auth-card { width: 100%; max-width: 400px; background: #fff; border-radius: 18px; padding: 2.4rem 2rem; box-shadow: var(--shadow-lg); } .auth-brand { text-align: center; margin-bottom: 1.6rem; } .auth-brand h1 { font-size: 1.35rem; color: rgb(var(--c-primary-700)); margin-top: .7rem; } .auth-tagline { font-size: .72rem; letter-spacing: .15em; color: rgb(var(--c-accent-700)); margin-top: .2rem; } .auth-form { display: flex; flex-direction: column; gap: 1rem; } .auth-form label { display: flex; flex-direction: column; gap: .35rem; font-size: .85rem; font-weight: 600; color: #4a4a4a; } .auth-form input { padding: .75rem .9rem; border: 1px solid #ddd6cc; border-radius: var(--radius); font-size: 1rem; background: #fdfcfa; } .auth-form input:focus { outline: none; border-color: rgb(var(--c-primary-500)); box-shadow: 0 0 0 3px rgb(var(--c-primary-100)); } .auth-foot { text-align: center; font-size: .78rem; color: #9a958c; margin-top: 1.4rem; } /* Monograma da marca */ .brand-monogram { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: rgb(var(--c-primary-500)); color: #fff; font-weight: 700; font-size: 1rem; } .brand-monogram.lg { width: 64px; height: 64px; font-size: 1.5rem; border-radius: 16px; } /* Logotipo da marca (assinatura) na tela de login — fundo claro */ .auth-logo { display: block; max-width: 220px; width: 100%; height: auto; margin: 0 auto .2rem; } /* ============================================================================= APP SHELL (sidebar + main) ============================================================================= */ .app-shell { display: flex; min-height: 100vh; } .sidebar { width: 250px; flex-shrink: 0; background: rgb(var(--c-surface)); color: #fff; display: flex; flex-direction: column; padding: 1.2rem 0; } .sidebar .brand { display: flex; align-items: center; gap: .7rem; padding: 0 1.2rem 1.2rem; } /* Logotipo branco na sidebar (fundo vinho) */ .brand-logo { display: block; max-width: 170px; width: 100%; height: auto; } .brand-text strong { display: block; font-size: .9rem; line-height: 1.2; } .brand-text small { font-size: .62rem; letter-spacing: .1em; opacity: .75; } .nav { flex: 1; padding: .5rem 0; } .nav-section { padding: 1rem 1.2rem .3rem; font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; opacity: .55; } .nav-link { display: block; padding: .6rem 1.2rem; color: rgba(255,255,255,.85); font-size: .92rem; border-left: 3px solid transparent; } .nav-link:hover { background: rgba(255,255,255,.06); text-decoration: none; color: #fff; } .nav-link.active { background: rgba(255,255,255,.1); border-left-color: rgb(var(--c-accent-500)); color: #fff; font-weight: 600; } .sidebar-footer { padding: 1rem 1.2rem 0; border-top: 1px solid rgba(255,255,255,.1); } .user-chip { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; } .user-avatar { width: 34px; height: 34px; border-radius: 50%; background: rgb(var(--c-accent-500)); color: #2D2A26; display: flex; align-items: center; justify-content: center; font-weight: 700; } /* img usa o mesmo .user-avatar do monograma: o object-fit evita a foto distorcer. */ img.user-avatar { object-fit: cover; flex-shrink: 0; } .user-name { font-size: .85rem; } .logout-link { color: rgba(255,255,255,.7); font-size: .82rem; } .logout-link:hover { color: #fff; } .main { flex: 1; display: flex; flex-direction: column; min-width: 0; } .topbar { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.6rem; background: #fff; border-bottom: 1px solid #eee6da; } .topbar h1 { font-size: 1.1rem; color: rgb(var(--c-primary-800)); flex: 1; } .topbar-date { font-size: .82rem; color: #9a958c; } .menu-toggle { display: none; background: none; border: 0; font-size: 1.3rem; cursor: pointer; } /* Ocupa a largura toda disponível (tabelas e listas usam o espaço inteiro). O teto alto só evita linhas absurdamente longas em telas ultrawide. */ .content { padding: 1.6rem 2rem; width: 100%; max-width: 1600px; } /* --- Cards de dashboard --------------------------------------------------- */ .welcome-card { background: #fff; border-radius: var(--radius); padding: 1.6rem; box-shadow: var(--shadow); margin-bottom: 1.4rem; } .welcome-card h2 { color: rgb(var(--c-primary-700)); margin-bottom: .4rem; } .badge-papeis { margin-top: .9rem; display: flex; gap: .4rem; flex-wrap: wrap; } .grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.2rem; } .card-link { background: #fff; border-radius: var(--radius); padding: 1.3rem; box-shadow: var(--shadow); border: 1px solid transparent; transition: border-color .15s, transform .15s; } .card-link:hover { text-decoration: none; border-color: rgb(var(--c-accent-400)); transform: translateY(-2px); } .card-link h3 { color: rgb(var(--c-primary-700)); font-size: 1.05rem; margin-bottom: .3rem; } .card-link p { font-size: .86rem; color: #6b665e; } /* --- Responsivo ----------------------------------------------------------- */ @media (max-width: 780px) { .sidebar { position: fixed; top: 0; bottom: 0; left: -260px; z-index: 40; transition: left .2s; } .sidebar.open { left: 0; box-shadow: var(--shadow-lg); } .menu-toggle { display: block; } } /* ============================================================================= CATÁLOGO (Etapa 2) — gestão, editor e player ============================================================================= */ .muted { color: #9a958c; font-size: .86rem; } .mt { margin-top: .7rem; } .back-link { display: inline-block; margin-bottom: 1rem; font-size: .88rem; } .page-actions { margin-bottom: 1.2rem; } .btn-sm { padding: .4rem .8rem; font-size: .82rem; } .btn-xs { padding: .15rem .5rem; font-size: .75rem; border-radius: 8px; } .btn-danger { background: #b23b3b; color: #fff; } .card { background: #fff; border-radius: var(--radius); padding: 1.3rem; box-shadow: var(--shadow); margin-bottom: 1rem; } .card h3 { color: rgb(var(--c-primary-700)); margin-bottom: .7rem; font-size: 1.05rem; } .card-actions { display: flex; gap: .5rem; align-items: center; margin-top: .8rem; } .inline { display: inline; } /* Forms */ .form-stack { display: flex; flex-direction: column; gap: .7rem; } .form-stack label { display: flex; flex-direction: column; gap: .3rem; font-size: .85rem; font-weight: 600; color: #4a4a4a; } .form-stack input, .form-stack textarea, .form-stack select, .form-inline input, .form-inline select { padding: .55rem .7rem; border: 1px solid #ddd6cc; border-radius: 8px; font-size: .92rem; font-family: inherit; background: #fdfcfa; } .form-stack input:focus, .form-stack textarea:focus, .form-stack select:focus { outline: none; border-color: rgb(var(--c-primary-500)); } .form-row { display: flex; gap: .7rem; } .form-row label { flex: 1; } .form-inline { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin: .6rem 0; } .chk { font-weight: 400 !important; flex-direction: row !important; align-items: center; gap: .3rem !important; font-size: .82rem; } details.inline-form summary { cursor: pointer; display: inline-block; list-style: none; } details.inline-form summary::-webkit-details-marker { display: none; } /* Turma cards — badge em linha própria; o título usa a largura TOTAL do card (nada de position:absolute sobrepondo o texto). */ .turma-card { display: flex; flex-direction: column; gap: .7rem; } .turma-status { align-self: flex-start; white-space: nowrap; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: .25rem .6rem; border-radius: 999px; background: #eee6da; color: #6b665e; } .turma-titulo { margin: 0; line-height: 1.3; overflow-wrap: anywhere; } .status-em_andamento { background: rgb(var(--c-primary-100)); color: rgb(var(--c-primary-800)); } .status-aberta { background: rgb(var(--c-accent-100)); color: rgb(var(--c-accent-900)); } .status-rascunho { background: #ece9e3; color: #8a857c; } .status-encerrada { background: #e6e6e6; color: #6b665e; } /* Meta da turma (módulos / alunas) */ .turma-meta { list-style: none; display: flex; gap: 1.4rem; margin: 0; padding: .2rem 0 .4rem; border-top: 1px solid #f0ece4; } .turma-meta li { font-size: .8rem; color: #9a958c; padding-top: .6rem; } .turma-meta strong { display: block; font-size: 1.15rem; color: rgb(var(--c-primary-700)); font-weight: 700; } /* Botões secundários (contorno) — para ações menos destrutivas visualmente */ .btn-ghost { background: transparent; color: rgb(var(--c-primary-700)); border: 1px solid #ddd6cc; } .btn-ghost:hover { background: rgb(var(--c-primary-50)); } .btn-danger-ghost { background: transparent; color: #b23b3b; border: 1px solid #e5c7c7; } .btn-danger-ghost:hover { background: #fdecec; } /* Editor */ .editor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .lista-alunos { list-style: none; margin-top: .8rem; } .lista-alunos li { display: flex; justify-content: space-between; align-items: center; padding: .4rem 0; border-bottom: 1px solid #f0ece4; font-size: .9rem; } .modulo-box { border: 1px solid #eee6da; border-radius: 10px; padding: .9rem; margin: .8rem 0; } .modulo-head { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; } .modulo-head form { margin-left: auto; } .lista-conteudos { list-style: none; margin: .6rem 0; } .lista-conteudos li { display: flex; align-items: center; gap: .5rem; padding: .3rem 0; font-size: .9rem; } .tag-tipo { font-size: .68rem; background: rgb(var(--c-primary-100)); color: rgb(var(--c-primary-800)); padding: .1rem .45rem; border-radius: 6px; text-transform: uppercase; flex-shrink: 0; } /* Conteúdo clicável no editor: abre o player naquele material */ .conteudo-link { flex: 1; min-width: 0; color: #2D2A26; display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .3rem; border-radius: 6px; } .conteudo-link:hover { text-decoration: none; background: rgb(var(--c-primary-50)); color: rgb(var(--c-primary-700)); } .ver-icone { opacity: 0; font-size: .72rem; color: rgb(var(--c-primary-600)); transition: opacity .12s; } .conteudo-link:hover .ver-icone { opacity: 1; } /* Botão "Ver como aluna" na subnav do editor */ .subnav-preview { margin-left: auto; align-self: center; font-size: .8rem; font-weight: 600; color: rgb(var(--c-primary-700)); padding: .35rem .7rem; border: 1px solid #ddd6cc; border-radius: 999px; background: #fff; white-space: nowrap; } .subnav-preview:hover { text-decoration: none; background: rgb(var(--c-primary-50)); border-color: rgb(var(--c-accent-400)); } /* Faixa de pré-visualização no player (só para mentora/admin) */ .barra-preview { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; background: rgb(var(--c-accent-100)); border: 1px solid rgb(var(--c-accent-300)); color: rgb(var(--c-primary-900)); border-radius: var(--radius); padding: .6rem .9rem; margin-bottom: 1rem; font-size: .85rem; } .add-conteudo { cursor: pointer; font-size: .82rem; color: rgb(var(--c-primary-600)); } .conteudo-form { border-top: 1px dashed #ddd6cc; padding-top: .7rem; } /* Progress bars */ .progress { height: 8px; background: #eee6da; border-radius: 999px; overflow: hidden; margin: .5rem 0 .2rem; } .progress.lg { height: 12px; } .progress-bar { height: 100%; background: rgb(var(--c-accent-500)); border-radius: 999px; transition: width .3s; } /* Turma home aluno */ .turma-hero { background: rgb(var(--c-surface)); color: #fff; border-radius: var(--radius); padding: 1.8rem; margin-bottom: 1.4rem; } .turma-hero h2 { margin-bottom: .5rem; } .turma-hero .progress { background: rgba(255,255,255,.2); } .hero-actions { display: flex; gap: .6rem; margin-top: 1rem; flex-wrap: wrap; } .modulo-aluno.bloqueado { opacity: .6; } .modulo-aluno-head { display: flex; justify-content: space-between; align-items: center; } .lock { font-size: .8rem; color: #9a958c; } .lista-aulas { list-style: none; margin-top: .6rem; } .lista-aulas li { padding: .35rem 0; border-bottom: 1px solid #f0ece4; } .lista-aulas a { display: flex; align-items: center; gap: .5rem; color: #2D2A26; } .aula-bloqueada { display: flex; align-items: center; gap: .5rem; color: #b5afa4; } .check { display: inline-flex; width: 20px; height: 20px; align-items: center; justify-content: center; border-radius: 50%; background: #eee6da; color: #9a958c; font-size: .75rem; flex-shrink: 0; } .check.on { background: rgb(var(--c-primary-500)); color: #fff; } /* Player */ .player-grid { display: grid; grid-template-columns: 1fr 300px; gap: 1.2rem; align-items: start; } .aula-titulo { color: rgb(var(--c-primary-800)); margin-bottom: .8rem; } .player-viewport { background: #000; border-radius: var(--radius); overflow: hidden; } .video-wrap { position: relative; padding-top: 56.25%; } .video-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .conteudo-texto { background: #fff; color: #2D2A26; padding: 1.4rem; border-radius: var(--radius); line-height: 1.7; } .media-erro { background: #fdf3e0; color: #8a5a1f; padding: .8rem 1rem; border-radius: var(--radius); font-size: .88rem; margin-top: .6rem; } .media-erro a { color: rgb(var(--c-primary-700)); font-weight: 600; } .player-viewport:has(.conteudo-texto), .player-viewport:has(.btn) { background: transparent; } .player-actions { display: flex; align-items: center; gap: .6rem; margin-top: 1rem; flex-wrap: wrap; } .player-side { background: #fff; border-radius: var(--radius); padding: 1rem; box-shadow: var(--shadow); max-height: 80vh; overflow-y: auto; } .side-modulo { margin-bottom: .9rem; } .side-modulo-title { font-weight: 700; font-size: .82rem; color: rgb(var(--c-primary-700)); padding: .4rem 0; text-transform: uppercase; letter-spacing: .03em; } .side-aula { display: flex; align-items: center; gap: .5rem; padding: .4rem .5rem; border-radius: 8px; font-size: .86rem; color: #2D2A26; } .side-aula:hover { background: #f7f3ec; text-decoration: none; } .side-aula.atual { background: rgb(var(--c-primary-50)); font-weight: 600; } .side-aula.bloqueada { color: #b5afa4; } @media (max-width: 900px) { .editor-grid, .player-grid { grid-template-columns: 1fr; } .player-side { max-height: none; } } /* ============================================================================= BILLING / ADMIN (Etapa 3) ============================================================================= */ .checkout-card { max-width: 440px; } .checkout-price { display: flex; justify-content: space-between; align-items: center; background: rgb(var(--c-primary-50)); border-radius: 10px; padding: .8rem 1rem; margin-bottom: 1.2rem; } .checkout-price strong { font-size: 1.4rem; color: rgb(var(--c-primary-700)); } .metric-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 1.4rem; } .metric-card { background: #fff; border-radius: var(--radius); padding: 1.2rem; box-shadow: var(--shadow); } .metric-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: #9a958c; } .metric-value { display: block; font-size: 1.5rem; color: rgb(var(--c-primary-700)); margin-top: .3rem; } .filtros { display: flex; gap: .5rem; margin-bottom: 1rem; } .chip { padding: .3rem .8rem; border-radius: 999px; background: #f0ece4; font-size: .82rem; color: #6b665e; } .chip.on { background: rgb(var(--c-primary-500)); color: #fff; } .chip:hover { text-decoration: none; } /* Tabelas ocupam a largura toda do card; em telas estreitas rolam horizontalmente dentro do card em vez de estourar a página. */ .card:has(.tabela) { overflow-x: auto; } .tabela { width: 100%; border-collapse: collapse; min-width: 560px; } .tabela th { text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: #9a958c; padding: .5rem .6rem; border-bottom: 2px solid #eee6da; } .tabela td { padding: .7rem .6rem; border-bottom: 1px solid #f0ece4; font-size: .9rem; vertical-align: top; } .status-badge { font-size: .72rem; padding: .15rem .55rem; border-radius: 999px; text-transform: uppercase; } .s-confirmado { background: #e7f4e8; color: #1a3c1b; } .s-pendente { background: #fdf3e0; color: #8a5a1f; } .s-cancelado { background: #fdecec; color: #8a1f1f; } .code-box { display: block; background: #2D2A26; color: #e8dbbd; padding: .7rem .9rem; border-radius: 8px; font-size: .82rem; word-break: break-all; } /* Links de venda — cada link é um cartão com URL completa + copiar */ .links-venda { display: flex; flex-direction: column; gap: .8rem; margin-top: 1rem; } .link-card { border: 1px solid #eee6da; border-radius: 10px; padding: .9rem; background: #fdfcfa; } .link-card.inativo { opacity: .6; } .link-card-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .6rem; } .link-preco { font-weight: 700; font-size: 1.15rem; color: rgb(var(--c-primary-700)); } .link-status { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: .15rem .55rem; border-radius: 999px; background: #f0ece4; color: #9a958c; } .link-status.on { background: #e7f4e8; color: #1a3c1b; } .link-status.free { background: #eae4f7; color: #40318a; margin-right: .3rem; } /* Geradores de link (pago x cortesia) lado a lado */ .link-geradores { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: .8rem; margin-top: 1rem; } .link-gerador { border: 1px solid #eee6da; border-radius: 10px; padding: .9rem; background: #fdfcfa; } .link-gerador--free { border-color: #ded4f2; background: #fbfaff; } .link-gerador strong { display: block; font-size: .92rem; margin-bottom: .2rem; } .link-gerador small { display: block; font-size: .78rem; line-height: 1.4; } .link-campo { display: flex; flex-direction: column; gap: .2rem; font-size: .72rem; color: #6b665e; text-transform: uppercase; letter-spacing: .04em; } .link-campo input { width: 9.5rem; } .link-uso { margin-top: .5rem; font-size: .78rem; color: #6b665e; } /* Perfil — foto e endereço */ .perfil-foto-linha { display: flex; gap: 1.1rem; align-items: flex-start; margin-top: .8rem; flex-wrap: wrap; } .perfil-foto { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid #eee6da; background: #fdfcfa; } .perfil-foto--vazia { display: flex; align-items: center; justify-content: center; font-size: 2.2rem; font-weight: 700; color: rgb(var(--c-primary-700)); background: #f0ece4; } .perfil-foto-acoes { display: flex; flex-direction: column; gap: .5rem; min-width: 15rem; } .perfil-foto-acoes .form-inline { margin: 0; } /* Ficha da aluna (visão da mentora) */ .ficha-topo { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; } .ficha-identificacao h3 { margin: 0 0 .15rem; } .ficha-identificacao .badge-papeis { margin-top: .5rem; display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; } .ficha-dados { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .9rem 1.4rem; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid #f0ece4; } .ficha-dados dt { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: #9a958c; } .ficha-dados dd { margin: .15rem 0 0; font-size: .95rem; color: #2c2c2c; } .perfil-subtitulo { margin-top: .4rem; padding-top: .9rem; border-top: 1px solid #f0ece4; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: #6b665e; } .link-url-row { display: flex; gap: .5rem; align-items: stretch; } .link-input { flex: 1; min-width: 0; padding: .5rem .7rem; border: 1px solid #ddd6cc; border-radius: 8px; font-size: .82rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: #fff; color: #2D2A26; } .link-url-row .btn { flex-shrink: 0; white-space: nowrap; } .btn.copiado { background: #1a3c1b; color: #fff; } .link-card-actions { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; margin-top: .7rem; } /* Subnav do editor de turma (Etapa 4) */ .subnav { display: flex; gap: .3rem; margin-bottom: 1.2rem; border-bottom: 2px solid #eee6da; } .subnav-link { padding: .5rem .9rem; font-size: .88rem; color: #6b665e; border-bottom: 2px solid transparent; margin-bottom: -2px; } .subnav-link:hover { text-decoration: none; color: rgb(var(--c-primary-700)); } .subnav-link.active { color: rgb(var(--c-primary-700)); border-bottom-color: rgb(var(--c-primary-500)); font-weight: 600; } .lista-entregas { list-style: none; margin-top: .6rem; } .lista-entregas > li { padding: .6rem 0; border-bottom: 1px solid #f0ece4; } /* Gamificação (Etapa 5) */ .nivel-card { background: rgb(var(--c-surface)); color: #fff; border-radius: var(--radius); padding: 1.6rem; margin-bottom: 1.6rem; } .nivel-topo { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem; } .nivel-topo h2 { color: #fff; } .nivel-card .muted { color: rgba(255,255,255,.7); } .nivel-pontos { font-size: 2rem; font-weight: 700; color: rgb(var(--c-accent-400)); } .nivel-pontos small { font-size: .9rem; font-weight: 400; } .nivel-card .progress { background: rgba(255,255,255,.2); } .secao-titulo { color: rgb(var(--c-primary-700)); margin-bottom: .9rem; } .badges-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); gap: 1rem; } .badge-card { background: #fff; border-radius: var(--radius); padding: 1.2rem; text-align: center; box-shadow: var(--shadow); } .badge-card.off { opacity: .5; } .badge-card .badge-icon { font-size: 2rem; display: block; margin-bottom: .5rem; } .badge-card strong { display: block; color: rgb(var(--c-primary-700)); font-size: .95rem; } .badge-card small { color: #6b665e; font-size: .78rem; } /* Gestão de usuários (admin) */ .papeis-check { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: .4rem; } .papeis-form { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; } .chk-sm { font-size: .78rem; } .text-end { text-align: right; }