/* ========================================================================= Trilhas de Estudo — tema "Foco" (noturno gamificado). Stylesheet própria, independente do design system claro. Sora + Inter + JetBrains Mono. ========================================================================= */ :root{ --bg:#0C1020; --bg-2:#0A0E1B; --panel:#151B30; --panel-2:#1B2340; --glass-a:rgba(255,255,255,.04); --glass-b:rgba(255,255,255,.015); --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14); --text:#E7EAF6; --muted:#9AA3C4; --dim:#6C769B; --teal:#2DD4BF; --teal-2:#22B8A6; --amber:#F5B54A; --violet:#8B7CF6; --pink:#F472B6; --app-gradient:linear-gradient(135deg,var(--teal),var(--violet)); --app-button-gradient:linear-gradient(135deg,#0F766E,#6653D6); --green:#34D399; --red:#F87171; --sky:#7DD3FC; --teal-glow:rgba(45,212,191,.35); --amber-glow:rgba(245,181,74,.28); --code-ink:#a7f3e5; /* Tintas de feedback (texto sobre tinta translúcida), ajustadas por tema. */ --ok-ink:#a7f3d0; --ok-bg:rgba(52,211,153,.10); --ok-line:rgba(52,211,153,.38); --err-ink:#fecaca; --err-bg:rgba(248,113,113,.10); --err-line:rgba(248,113,113,.38); --info-ink:#bae6fd; --info-bg:rgba(125,211,252,.08); --info-line:rgba(125,211,252,.35); --no-ink:#f9b6d6; --no-bg:rgba(244,114,182,.10); --no-line:rgba(244,114,182,.32); --header-bg:#10152A; --disp:"Sora",system-ui,sans-serif; --sans:"Inter",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,monospace; --radius:18px; --radius-sm:12px; --radius-xs:9px; --shadow:0 20px 50px rgba(0,0,0,.35); } *{box-sizing:border-box} html{scroll-behavior:smooth;font-size:calc(100% * var(--fscale,1))} /* ícones inline (sprite) */ .ic{width:1.1em;height:1.1em;flex:none;vertical-align:-.15em} .btn .ic{width:18px;height:18px} /* ---- Temas de leitura (aplicados via data-theme no ) -------------- */ :root[data-theme="claro"]{ color-scheme:light; --bg:#F3F5FB; --bg-2:#E9EDF6; --panel:#FFFFFF; --panel-2:#EEF2FA; --glass-a:rgba(17,24,45,.03); --glass-b:rgba(17,24,45,.015); --line:rgba(17,24,45,.10); --line-2:rgba(17,24,45,.16); --text:#151B2E; --muted:#54607F; --dim:#727D96; --header-bg:#FFFFFF; --teal:#0E9C88; --teal-2:#0C8878; --teal-glow:rgba(14,156,136,.18); --amber:#B26A0B; --amber-glow:rgba(178,106,11,.22); --violet:#6D5BD8; --pink:#C2337A; --sky:#0E7490; --green:#0E9F63; --red:#C63C3C; --code-ink:#0C7A6B; --shadow:0 16px 40px rgba(20,26,46,.12); --ok-ink:#04724F; --err-ink:#AF262D; --info-ink:#075E85; --no-ink:#9D2B62; } :root[data-theme="papel"]{ color-scheme:light; --bg:#EDE4D0; --bg-2:#E6DBC3; --panel:#FBF4E4; --panel-2:#F1E7D0; --glass-a:rgba(70,52,25,.04); --glass-b:rgba(70,52,25,.02); --line:rgba(70,52,25,.14); --line-2:rgba(70,52,25,.22); --text:#3A2E1C; --muted:#6E5C42; --dim:#877459; --header-bg:#F3E7CE; --teal:#0C8474; --teal-2:#0A7365; --amber:#A9761A; --amber-glow:rgba(169,118,26,.2); --violet:#6E5AC7; --pink:#A63E6C; --sky:#2A6E85; --green:#2F7A4D; --red:#B0463A; --teal-glow:rgba(12,132,116,.16); --code-ink:#7A4E12; --shadow:0 16px 40px rgba(70,52,25,.14); --ok-ink:#245F3D; --err-ink:#93382E; --info-ink:#1F5A70; --no-ink:#8E3A5E; } :root[data-theme="preto"]{ color-scheme:dark; --bg:#000000; --bg-2:#000000; --panel:#0B0B0F; --panel-2:#15151C; --glass-a:rgba(255,255,255,.035); --glass-b:rgba(255,255,255,.012); --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.16); --text:#F2F3F8; --muted:#A2A8BE; --dim:#6C7288; --code-ink:#a7f3e5; --header-bg:#0B0B0F; } :root[data-theme="claro"] body, :root[data-theme="papel"] body, :root[data-theme="preto"] body{background-image:none} body{ margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);line-height:1.62; /* Grade de pontos (mapa estelar) + um único facho no horizonte — textura deliberada do tema escuro, no lugar de manchas de gradiente genéricas. */ background-image:radial-gradient(900px 420px at 50% -12%,rgba(45,212,191,.09),transparent 62%), radial-gradient(rgba(231,234,246,.05) 1px,transparent 1.3px); background-size:auto,26px 26px; background-attachment:fixed;min-height:100vh; } a{color:inherit;text-decoration:none} img{max-width:100%} /* Trilhas decorativas nas laterais vazias (telas largas): o motivo da marca — o caminho pontilhado até a estrela — tingido pelas cores do tema, bem leve, atrás de tudo (z-index negativo sobre o fundo propagado do body). */ @media(min-width:1280px){ body::before,body::after{content:"";position:fixed;top:0;bottom:0;z-index:-1; width:max(90px,calc(50vw - 590px));pointer-events:none; background:linear-gradient(180deg,var(--teal),var(--violet)); opacity:var(--lado-op,.16); -webkit-mask:url("../img/trilha-lado.0c7b0de166a5.svg") center top/190px auto repeat-y; mask:url("../img/trilha-lado.0c7b0de166a5.svg") center top/190px auto repeat-y} body::before{left:0} body::after{right:0;transform:scaleX(-1)} } :root[data-theme="claro"]{--lado-op:.28} :root[data-theme="papel"]{--lado-op:.3} :root[data-theme="preto"]{--lado-op:.17} /* Foco visível por teclado (acessibilidade) */ :focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:5px} .opt:focus-within{border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-glow)} /* Toque: remove o atraso de 300ms e o flash de destaque padrão. */ a,button,summary,label,.btn,.opt{touch-action:manipulation;-webkit-tap-highlight-color:transparent} .visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .container,.wrap{max-width:1120px;margin:0 auto;padding:0 24px} .narrow{max-width:640px;margin:0 auto} .muted,.ds-muted{color:var(--muted)} .stack>*+*{margin-top:1rem} .row{display:flex;gap:.7rem;align-items:center} .spread{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap} /* ---- glass / cards ----------------------------------------------------- */ .glass,.card{background:linear-gradient(180deg,var(--glass-a),var(--glass-b));border:1px solid var(--line);border-radius:var(--radius);backdrop-filter:blur(8px)} .pad{padding:26px 30px} .pad-sm{padding:18px 20px} /* ---- typography helpers ------------------------------------------------ */ h1,h2,h3,h4{font-family:var(--disp);letter-spacing:-.01em;line-height:1.15} .h1{font-family:var(--disp);font-weight:700;font-size:2.5rem;letter-spacing:-.02em;line-height:1.08;margin:.1rem 0 .4rem} .h2{font-family:var(--disp);font-weight:700;font-size:1.7rem;margin:0 0 .3rem} .h3{font-family:var(--disp);font-weight:600;font-size:1.15rem;margin:0 0 .6rem} .eyebrow{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);font-weight:600} .sub{font-size:1.08rem;color:var(--muted);max-width:640px} .back-link{font-size:.86rem;color:var(--muted);display:inline-block;margin-bottom:1rem} .back-link:hover{color:var(--teal)} /* ---- header / nav ------------------------------------------------------ */ /* Barra superior fixa no topo da página (não acompanha a rolagem), com cor que segue o tema (clara no claro/papel, escura no escuro/preto). */ .site-header{background:var(--header-bg,var(--panel));border-bottom:1px solid var(--line);box-shadow:0 1px 0 var(--line)} .nav{display:flex;align-items:center;justify-content:space-between;height:70px;gap:1rem} .nav-top{display:flex;align-items:center;gap:1rem} .brand{font-family:var(--disp);font-weight:800;font-size:1.28rem;display:flex;align-items:center;gap:.6rem;letter-spacing:-.01em} .brand .logo{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--teal),var(--violet));display:grid;place-items:center;color:#0b1020;box-shadow:0 0 22px var(--teal-glow)} .brand .logo svg{width:19px;height:19px} .hud{display:flex;align-items:center;gap:.9rem} .token-pill{font-size:.78rem;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:.32rem .75rem;font-variant-numeric:tabular-nums} .av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--pink),var(--violet));display:grid;place-items:center;font-weight:700;font-size:.85rem;color:#0b1020} .nav-logout{background:transparent;border:1px solid var(--line-2);color:var(--muted);border-radius:9px;padding:.4rem .8rem;font:inherit;font-size:.85rem;cursor:pointer} .nav-logout:hover{border-color:var(--red);color:var(--red)} @media(max-width:820px){ .nav{height:auto;padding:8px 0} .hud{gap:.55rem} .hud .xp-bar{display:none} .hud .xp{gap:.3rem} .nav-logout{padding:.26rem .65rem;font-size:.8rem} } /* ---- buttons ----------------------------------------------------------- */ .btn{font-family:var(--sans);font-weight:600;font-size:.92rem;border-radius:11px;padding:.68rem 1.25rem;cursor:pointer;border:1px solid transparent;transition:.18s;display:inline-flex;align-items:center;gap:.5rem;justify-content:center;text-align:center} .btn-primary{background:linear-gradient(135deg,var(--teal),var(--teal-2));color:#062820;box-shadow:0 0 24px var(--teal-glow)} .btn-primary:hover{filter:brightness(1.08);transform:translateY(-1px)} .btn-app-gradient{background:var(--app-button-gradient);color:#fff;box-shadow:0 0 24px var(--teal-glow),inset 0 1px 0 rgba(255,255,255,.22)} .btn-app-gradient:hover{filter:brightness(1.08);transform:translateY(-1px)} .btn-ghost{background:transparent;border-color:var(--line-2);color:var(--text)} .btn-ghost:hover{border-color:var(--teal);color:var(--teal)} .btn-danger{background:transparent;border-color:var(--line-2);color:var(--muted)} .btn-danger:hover{border-color:var(--red);color:var(--red)} .btn-block{width:100%} .btn:disabled{opacity:.55;cursor:not-allowed;transform:none;filter:none} /* ---- avisos (toasts) --------------------------------------------------- */ /* Cartão no canto inferior, como no app arq: entra deslizando, some sozinho e sobe acima do FAB de leitura, que mora no mesmo canto. */ .toasts{position:fixed;right:1.25rem;bottom:8.5rem;z-index:110; display:flex;flex-direction:column-reverse;gap:.6rem; width:min(23rem,calc(100vw - 2.5rem));pointer-events:none} .toast{pointer-events:auto;display:grid;grid-template-columns:auto minmax(0,1fr) auto; gap:.8rem;align-items:center;padding:.85rem .9rem; border:1px solid var(--line-2);border-radius:var(--radius-sm); background:color-mix(in srgb,var(--panel) 82%,transparent); -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%); box-shadow:var(--shadow);animation:toast-entra .32s cubic-bezier(.2,.7,.3,1) both} .toast.saindo{animation:toast-sai .26s ease both} .toast p{margin:0;font-size:.9rem;line-height:1.35;color:var(--text)} /* Marca em cor cheia com glifo branco: os tons são fixos porque precisam segurar o contraste do branco nos quatro temas de leitura. */ .toast-marca{--marca:#0E9F63;display:inline-flex;align-items:center;justify-content:center; width:1.7rem;height:1.7rem;flex:none;border-radius:50%;background:var(--marca);color:#fff} .toast-marca .ic{width:1rem;height:1rem} .toast--error .toast-marca{--marca:#C63C3C} .toast--warning .toast-marca{--marca:#A8760E} .toast--info .toast-marca,.toast--debug .toast-marca{--marca:#0E7490} .toast-fechar{display:inline-flex;align-items:center;justify-content:center; width:1.7rem;height:1.7rem;flex:none;padding:0;border:0;border-radius:8px; background:transparent;color:var(--muted);cursor:pointer;transition:.15s} .toast-fechar .ic{width:.9rem;height:.9rem} .toast-fechar:hover{background:var(--panel-2);color:var(--text)} .toast-fechar:focus-visible{outline:2px solid var(--teal);outline-offset:2px;color:var(--text)} @keyframes toast-entra{from{opacity:0;transform:translateY(.8rem) scale(.98)}to{opacity:1;transform:none}} @keyframes toast-sai{from{opacity:1;transform:none}to{opacity:0;transform:translateX(1rem)}} @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .toast{background:var(--panel)} } @media (max-width:40rem){.toasts{right:.75rem;left:.75rem;bottom:8rem;width:auto}} /* ---- forms ------------------------------------------------------------- */ .field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.1rem} .field label,.field>span{font-weight:600;font-size:.9rem;color:var(--text)} .field-hint{margin:.1rem 0 0;font-size:.82rem;color:var(--muted);line-height:1.45} input[type=text],input[type=password],input[type=email],textarea,select{ width:100%;font:inherit;font-size:.95rem;color:var(--text);background:var(--bg-2); border:1px solid var(--line-2);border-radius:var(--radius-sm);padding:.7rem .9rem;transition:.15s} textarea{resize:vertical;line-height:1.6} input:focus,textarea:focus,select:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(45,212,191,.18)} ::placeholder{color:var(--dim)} select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat} .form-actions{display:flex;justify-content:flex-end;gap:.7rem;margin-top:1.4rem;flex-wrap:wrap} .form-errors,.errorlist{color:var(--err-ink);font-size:.88rem;background:var(--err-bg);border:1px solid var(--err-line);border-radius:9px;padding:.6rem .8rem;list-style:none;margin:.3rem 0} /* ---- page head / badges ------------------------------------------------ */ .page{padding:34px 0 60px} .page-head{margin-bottom:1.4rem} .badges{display:flex;gap:.5rem;align-items:center;margin-bottom:.85rem;flex-wrap:wrap} .faixa{font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:.3rem .75rem;border-radius:999px;background:rgba(45,212,191,.12);color:var(--teal);border:1px solid rgba(45,212,191,.3)} .faixa--iniciante{background:rgba(52,211,153,.12);color:var(--green);border-color:rgba(52,211,153,.3)} .faixa--intermediario{background:rgba(125,211,252,.12);color:var(--sky);border-color:rgba(125,211,252,.3)} .faixa--avancado{background:rgba(139,124,246,.14);color:var(--violet);border-color:rgba(139,124,246,.3)} .faixa--especialista{background:rgba(245,181,74,.12);color:var(--amber);border-color:rgba(245,181,74,.3)} .faixa--mestre{background:rgba(244,114,182,.14);color:var(--pink);border-color:rgba(244,114,182,.3)} .pill{font-size:.78rem;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:.3rem .7rem} .status-badge{font-size:.72rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase;padding:.25rem .65rem;border-radius:999px;background:var(--panel-2);color:var(--muted)} .status-badge--concluida{background:rgba(52,211,153,.12);color:var(--green)} .status-badge--em_andamento{background:rgba(45,212,191,.12);color:var(--teal)} .status-badge--erro{background:rgba(248,113,113,.12);color:var(--red)} .status-badge--off{background:var(--panel-2);color:var(--dim);border:1px solid var(--line)} /* ---- progress ---------------------------------------------------------- */ .progress-bar{height:9px;background:var(--panel-2);border-radius:99px;overflow:hidden;margin:.5rem 0} .progress-bar>span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--teal),var(--amber));box-shadow:0 0 12px var(--teal-glow);transition:width .5s ease} .progress-bar--lg{height:12px} .progress-label{font-size:.85rem;color:var(--muted);margin-top:.35rem} /* ---- title chips ------------------------------------------------------- */ .title-chips{display:flex;flex-wrap:wrap;gap:.5rem} .title-chip{font-size:.78rem;padding:.4rem .7rem;border-radius:9px;background:rgba(245,181,74,.12);color:var(--amber);font-weight:600;border:1px solid rgba(245,181,74,.28)} .title-chip--muted{background:var(--panel-2);color:var(--muted);border-color:var(--line)} /* ---- dashboard grid ---------------------------------------------------- */ .trilha-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.25rem;margin-top:1.4rem} .trilha-card{transition:transform .2s,border-color .2s,box-shadow .2s} .trilha-card:hover{transform:translateY(-3px);border-color:var(--line-2);box-shadow:var(--shadow)} .trilha-card a{display:flex;flex-direction:column;height:100%;padding:22px 24px} .tc-spacer{flex:1;min-height:.4rem} .tc-top{display:flex;justify-content:flex-end;align-items:center;gap:.6rem;margin-bottom:.7rem} .tc-frac{font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums} .tc-title{font-family:var(--disp);font-weight:600;font-size:1.2rem;margin:0 0 .35rem} .tc-desc{color:var(--muted);font-size:.9rem;margin:0 0 .9rem} /* ---- constellation (level map) ---------------------------------------- */ .two-col{display:grid;grid-template-columns:1fr 300px;gap:30px;align-items:stretch;margin-top:22px} @media(max-width:900px){.two-col{grid-template-columns:1fr}} /* Dashboard: faixa de stats full-width no topo (XP/semana + diamante + cota). Conteúdo principal flui em coluna única, sem vão morto à direita. */ /* Flex (não grid) porque o grid auto-sizing inflava a linha ~20px e desalinhava os cards; no flex a linha segue a altura natural real. */ .dash-stats{display:flex;flex-wrap:wrap;gap:1rem;align-items:stretch;margin-top:22px} .dash-stats>*{margin-top:0} .dash-stats .xp-widget{flex:1 1 360px;min-width:0;margin-top:0} .dash-stats .xp-widget .xp-semana{max-width:none;margin-inline:0} .dash-stats .diamante-widget{flex:1 1 240px;min-width:0} .dash-stats .quota-bar{flex:1 1 100%} @media(max-width:640px){.dash-stats{gap:.75rem}} /* Botões do topo centralizados verticalmente com a saudação (só no desktop). */ @media(min-width:721px){.dash-head{align-items:center}} .diamante-widget{display:flex;align-items:center;gap:.7rem;padding:.85rem 1rem;border:1px solid var(--border);border-radius:14px;background:var(--panel)} .diamante-widget .dw-ico{flex:none;width:34px;height:34px;display:grid;place-items:center;color:var(--teal);filter:drop-shadow(0 0 6px var(--teal-glow))} .diamante-widget .dw-ico svg{width:26px;height:26px} .dw-body{display:flex;flex-direction:column;min-width:0} .dw-count{font-family:var(--disp);font-weight:700;color:var(--teal);font-size:.95rem} .dw-meta{font-size:.72rem;color:var(--dim)} .rail{position:sticky;top:96px;display:flex;flex-direction:column;gap:18px} .constel{position:relative} .constel::before{content:"";position:absolute;left:15px;top:24px;bottom:24px;width:2px;background:linear-gradient(var(--teal),var(--line))} .node{display:flex;gap:.85rem;align-items:center;padding:.5rem 0;position:relative;color:inherit} .node .bead{width:32px;height:32px;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:700;font-size:.82rem;background:var(--panel-2);color:var(--muted);z-index:1;font-family:var(--disp)} .node.cur .bead{background:linear-gradient(135deg,var(--teal),var(--teal-2));color:#062820;box-shadow:0 0 18px var(--teal-glow)} .node.done .bead{background:color-mix(in srgb,var(--teal) 16%,var(--panel));color:var(--teal);box-shadow:inset 0 0 0 1px rgba(45,212,191,.4)} /* Bloqueado: esmaece texto e cores, mas o disco continua OPACO — se o nó inteiro ganhasse opacity, a linha vertical vazaria por trás dos números. */ .node.lock .bead{background:color-mix(in srgb,var(--panel-2) 55%,var(--bg));color:var(--dim)} .node.lock .nm{opacity:.55} a.node:not(.lock):hover .nm{color:var(--teal)} .node .nm{font-size:.92rem;display:flex;flex-direction:column;gap:.1rem} .node .nm small{color:var(--dim);font-size:.78rem} /* full-width level list on detail */ .nivel-list{list-style:none;padding:0;margin:1rem 0 0;display:flex;flex-direction:column;gap:.75rem} .nivel-row{display:flex;align-items:center;gap:1rem;padding:1rem 1.2rem} .nivel-row.link{transition:border-color .2s,box-shadow .2s} .nivel-row.link:hover{border-color:var(--teal);box-shadow:var(--shadow)} .nivel-row.lock{opacity:.55} .nivel-num{width:36px;height:36px;border-radius:10px;flex:none;display:grid;place-items:center;font-weight:700;font-family:var(--disp);background:var(--panel-2);color:var(--teal)} .nivel-row.done .nivel-num{background:rgba(52,211,153,.16);color:var(--green)} .nivel-main{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:.25rem} .nivel-main>*{max-width:100%} .nivel-name{font-weight:600} .nivel-hint,.nivel-resumo{font-size:.82rem;color:var(--muted)} .nivel-state{font-size:.75rem;color:var(--dim);white-space:nowrap} /* ---- generation / skeleton states ------------------------------------- */ .gen-h{display:flex;align-items:center;gap:.7rem;font-family:var(--disp);font-weight:600;font-size:1.15rem} .orb{width:26px;height:26px;border-radius:50%;flex:none;background:conic-gradient(var(--teal),var(--amber),var(--violet),var(--teal));animation:spin 1s linear infinite;-webkit-mask:radial-gradient(farthest-side,transparent 58%,#000 60%);mask:radial-gradient(farthest-side,transparent 58%,#000 60%)} @keyframes spin{to{transform:rotate(360deg)}} .pbar{height:8px;background:var(--panel-2);border-radius:99px;margin:1.1rem 0 .7rem;overflow:hidden} .pbar>i{display:block;height:100%;width:38%;background:linear-gradient(90deg,var(--teal),var(--amber));box-shadow:0 0 12px var(--teal-glow);border-radius:99px;animation:slide 1.5s ease-in-out infinite} @keyframes slide{0%{margin-left:-38%}100%{margin-left:100%}} .steps{display:flex;gap:.5rem;flex-wrap:wrap} .steps span{font-size:.76rem;padding:.25rem .6rem;border-radius:999px;background:var(--panel-2);color:var(--muted)} .steps .done{color:var(--teal)} .steps .now{color:var(--amber);font-weight:600} .sk{height:12px;background:linear-gradient(90deg,var(--panel-2) 25%,var(--line-2) 37%,var(--panel-2) 63%);background-size:400% 100%;border-radius:6px;margin:.55rem 0;animation:sh 1.4s infinite} @keyframes sh{0%{background-position:100% 0}100%{background-position:0 0}} .gen-center{text-align:center;padding:3rem 1rem} .gen-center .orb{margin:0 auto 1rem} /* ---- markdown body ----------------------------------------------------- */ .markdown-body{line-height:1.75;color:var(--text);font-size:1.02rem;overflow-wrap:break-word;min-width:0} .markdown-body>*:first-child{margin-top:0} .markdown-body h1,.markdown-body h2,.markdown-body h3,.markdown-body h4{font-family:var(--disp);color:var(--text);margin:2rem 0 .6rem} .markdown-body h2{font-size:1.55rem;padding-bottom:.4rem;border-bottom:1px solid var(--line)} .markdown-body h3{font-size:1.2rem;color:var(--teal)} .markdown-body p{margin:.85rem 0} .markdown-body ul,.markdown-body ol{padding-left:1.4rem;margin:.85rem 0} .markdown-body li{margin:.35rem 0} .markdown-body strong{color:var(--text)} .markdown-body a{color:var(--teal);text-decoration:underline;text-underline-offset:2px} .markdown-body blockquote{border-left:3px solid var(--violet);margin:1rem 0;padding:.2rem 1rem;color:var(--muted);background:rgba(139,124,246,.06);border-radius:0 8px 8px 0} .markdown-body code{font-family:var(--mono);font-size:.85em;background:var(--panel-2);padding:.12rem .4rem;border-radius:5px;color:var(--code-ink)} .markdown-body .codehilite code{background:transparent;padding:0;color:inherit} .markdown-body table{width:100%;border-collapse:collapse;margin:1.2rem 0;font-size:.92rem} .markdown-body th,.markdown-body td{border:1px solid var(--line-2);padding:.55rem .8rem;text-align:left} .markdown-body th{background:var(--panel-2);color:var(--text);font-family:var(--sans)} .markdown-body hr{border:0;border-top:1px solid var(--line);margin:2rem 0} /* diagramas mermaid */ .markdown-body .mermaid{position:relative;display:flex;justify-content:safe center;margin:1.4rem 0;padding:1rem .6rem; border:1px solid var(--line);border-radius:14px;background:var(--panel);overflow:hidden; color:transparent;min-height:60px} /* texto-fonte invisível até renderizar */ .markdown-body .mermaid[data-processed]{color:var(--text)} .markdown-body .mermaid svg{max-width:100%;flex:none;height:auto} /* Rótulos dos nós: o Mermaid dimensiona cada na largura EXATA do texto medido, e o foreignObject recorta o que passa dessa caixa. Quando o diagrama é reduzido para caber no celular, a escala fracionária faz o último glifo encostar na borda e ser cortado ("customer_order|s"). Sem recorte, o texto sai inteiro — a folga é sub-pixel e não desalinha o desenho. */ .markdown-body .mermaid foreignObject{overflow:visible} .mermaid-err-msg{font-size:.85rem;color:var(--muted);padding:.5rem 1rem} /* fotos reais dentro do conteúdo (buscadas na Pexels via {{foto: …}}) */ .markdown-body img{display:block;width:100%;height:auto;max-height:340px;object-fit:cover; border-radius:12px;border:1px solid var(--line);margin:.45rem 0 .1rem} .markdown-body p:has(> img) em{display:block;font-size:.78rem;color:var(--dim); line-height:1.4;margin-top:.35rem} /* admonitions / callouts */ .markdown-body .admonition{margin:1.4rem 0;padding:1rem 1.15rem;border-radius:14px;border:1px solid var(--line);background:var(--panel);border-left:3px solid var(--muted)} .markdown-body .admonition-title{font-weight:700;font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;margin:0 0 .4rem;color:var(--muted);display:flex;align-items:center;gap:.45rem} .markdown-body .admonition-title::before{content:"●";font-size:.7rem;line-height:1} .markdown-body .admonition.conceito .admonition-title::before{content:"💡";font-size:.95rem} .markdown-body .admonition.exemplo .admonition-title::before{content:"🧪";font-size:.95rem} .markdown-body .admonition.dica .admonition-title::before{content:"✨";font-size:.95rem} .markdown-body .admonition.atencao .admonition-title::before{content:"⚠️";font-size:.95rem} .markdown-body .admonition.resumo .admonition-title::before{content:"📌";font-size:.95rem} .markdown-body .admonition.quiz .admonition-title::before{content:"🤔";font-size:1.05rem} .markdown-body .admonition>p:last-child{margin-bottom:0} .markdown-body .admonition.conceito{border-left-color:var(--teal)} .admonition.conceito .admonition-title{color:var(--teal)} .markdown-body .admonition.exemplo{border-left-color:var(--sky)} .admonition.exemplo .admonition-title{color:var(--sky)} .markdown-body .admonition.dica{border-left-color:var(--green)} .admonition.dica .admonition-title{color:var(--green)} .markdown-body .admonition.atencao{border-left-color:var(--amber)} .admonition.atencao .admonition-title{color:var(--amber)} .markdown-body .admonition.resumo{border-left-color:var(--violet)} .admonition.resumo .admonition-title{color:var(--violet)} /* ---- lesson layout ----------------------------------------------------- */ .subtopicos-box{margin-bottom:1.6rem} .subtopicos-box ul{margin:.4rem 0 0;padding-left:1.2rem;color:var(--muted)} .nivel-cta{margin-top:2.4rem;padding-top:1.6rem;border-top:1px solid var(--line);display:flex;gap:.7rem;flex-wrap:wrap;align-items:center} .aprovado-note{background:var(--ok-bg);border:1px solid var(--ok-line);color:var(--ok-ink);padding:.75rem 1rem;border-radius:11px;width:100%} /* ---- quiz / exercise --------------------------------------------------- */ .q-ref{font-size:.72rem;color:var(--dim);margin:0 0 .5rem;letter-spacing:.01em;font-weight:500} .q-block{padding:1.35rem 0;border-bottom:1px solid var(--line)} .q-block:last-child{border-bottom:none} .q-enun{font-weight:600;margin:0 0 .8rem;color:var(--text)} .q-enun .n{color:var(--teal);font-family:var(--disp)} /* Enunciados/alternativas em Markdown: código destacado em vez de texto corrido; o peso 600 do enunciado não vaza para dentro do código. */ .q-enun--num{display:flex;gap:.6rem;align-items:baseline} .q-enun--num .n{flex:none} .q-enun-body{flex:1;min-width:0} .q-meta{margin-top:.35rem;font:600 .75rem var(--sans);letter-spacing:0;text-transform:none;color:var(--muted)} .q-enun>p:first-child,.q-enun-body>p:first-child{margin-top:0} .q-enun>:last-child,.q-enun-body>:last-child{margin-bottom:0} .q-enun pre,.q-enun code{font-weight:400} .opt-texto{flex:1;min-width:0} .opt-texto.markdown-body,.fc-opt-texto.markdown-body{font-size:inherit;line-height:1.55} .opt-texto .codehilite,.fc-opt-texto .codehilite{margin:.45rem 0} .opt-texto>p{margin:.3rem 0} .fc-opt-texto{flex:1;min-width:0} .fc-enunciado>p{margin:.25rem 0} .fb .codehilite{margin:.6rem 0} .opts{display:flex;flex-direction:column;gap:.5rem} .opt{display:flex;gap:.7rem;align-items:flex-start;padding:.78rem .95rem;border:1px solid var(--line-2);border-radius:11px;cursor:pointer;transition:.15s;background:var(--glass-a)} .opt:hover{border-color:var(--teal);background:rgba(45,212,191,.06)} .opt input{margin-top:.2rem;accent-color:var(--teal)} .opt.correct{border-color:var(--teal);background:rgba(45,212,191,.14)} .opt.wrong{border-color:var(--pink);background:rgba(244,114,182,.12)} .fb{margin-top:.9rem;border-radius:11px;padding:.85rem 1rem;font-size:.93rem;display:none} .fb.show{display:block} .fb.ok{background:var(--ok-bg);color:var(--ok-ink);border:1px solid var(--ok-line)} .fb.no{background:var(--no-bg);color:var(--no-ink);border:1px solid var(--no-line)} .fb.neutral{background:var(--panel-2);color:var(--muted);border:1px solid var(--line-2)} .ex-actions{margin-top:.9rem;display:flex;gap:.7rem;align-items:center;flex-wrap:wrap;justify-content:flex-end} .ex-reward{font-size:.75rem;color:var(--amber);font-weight:600} .ex-tag{display:inline-flex;align-items:center;gap:.5rem;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);margin-bottom:.5rem} .ex-tag .spark{width:22px;height:22px;border-radius:7px;background:var(--teal);color:#0b1020;display:grid;place-items:center;font-size:.8rem} .exercise{border-bottom:1px solid var(--line)} .exercise:not(.pad){padding:1.35rem 0} .exercise.pad{padding-left:calc(30px - 1px)} .exercise:last-child{border-bottom:none} .mode-cards .exercise{border-bottom:none;border-left:none} .spin-sm{width:15px;height:15px;border:2px solid var(--line-2);border-top-color:var(--teal);border-radius:50%;animation:spin .7s linear infinite;display:inline-block} /* ---- resultado --------------------------------------------------------- */ /* Legenda discreta de XP por tarefa, abaixo das trilhas do dashboard. */ .xp-legenda{margin:1.4rem 0 0;font-size:.8rem;color:var(--muted);line-height:1.9;display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .5rem} .xp-legenda-titulo{font-weight:600;color:var(--text);opacity:.75} .xp-legenda-item b{color:var(--teal);font-weight:600} .xp-legenda-sep{opacity:.4} /* Desistir da trilha (página de perguntas): ação secundária discreta. */ .desistir-row{text-align:center;margin-top:1.7rem} .link-desistir{background:none;border:0;padding:.4rem;font:inherit;font-size:.9rem;color:var(--muted);cursor:pointer;text-decoration:underline;text-underline-offset:3px;transition:color .15s} .link-desistir:hover{color:var(--danger,#c0392b)} .link-desistir .muted{font-size:.85em} .resultado-hero{display:flex;align-items:center;gap:1.5rem;padding:1.75rem;border-radius:var(--radius);margin:1rem 0 1.5rem;border:1px solid var(--line-2)} .resultado-hero.ok{background:rgba(52,211,153,.08);border-color:rgba(52,211,153,.35)} .resultado-hero.no{background:rgba(245,181,74,.08);border-color:rgba(245,181,74,.35)} .resultado-nota{font-family:var(--disp);font-weight:700;font-size:3rem;line-height:1} .resultado-nota span{font-size:1.1rem;color:var(--muted)} .resultado-msg h2{margin:0 0 .3rem} .correcao-list{display:flex;flex-direction:column;gap:1rem;margin-top:1rem} /* Progresso da geração do vídeo do nível: etapa, barra e estimativa. */ .tv-prog{display:flex;flex-direction:column;gap:.45rem} .tv-prog-top{display:flex;align-items:baseline;gap:.75rem;font-size:.88rem} .tv-prog-top>:first-child{flex:1;color:var(--text)} .tv-prog-pct{font-family:var(--disp);font-weight:700;color:var(--teal)} .tv-prog-trilho{height:8px;background:var(--panel-2);border-radius:999px;overflow:hidden} .tv-prog-trilho>i{display:block;height:100%;width:0;border-radius:999px; background:linear-gradient(90deg,var(--teal),var(--violet));transition:width .6s ease} .tv-prog-baixo{display:flex;justify-content:space-between;gap:.75rem;font-size:.8rem} .correcao-item{border:1px solid var(--line);border-left-width:4px;border-radius:var(--radius-sm);padding:1.1rem 1.25rem} .correcao-item.ok{border-left-color:var(--teal)} .correcao-item.bad{border-left-color:var(--pink)} .correcao-top{display:flex;align-items:center;gap:.6rem;margin-bottom:.5rem} .correcao-num{width:1.7rem;height:1.7rem;border-radius:8px;display:grid;place-items:center;background:var(--panel-2);font-weight:700;font-size:.82rem;font-family:var(--disp)} .correcao-tipo{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--dim)} .correcao-nota{margin-left:auto;font-weight:700;font-family:var(--disp)} .correcao-sua{font-size:.9rem;margin:.5rem 0;color:var(--muted)} .correcao-sua b{color:var(--text)} /* Nas questões erradas as duas alternativas aparecem com o texto completo: a escolhida e a correta, para o erro virar aprendizado. */ .correcao-sua--erro,.correcao-sua--certa{display:flex;flex-wrap:wrap;gap:.35rem;align-items:baseline; border-radius:10px;padding:.55rem .75rem;margin:.45rem 0} .correcao-sua--erro{background:var(--err-bg);border:1px solid var(--err-line)} .correcao-sua--erro b{color:var(--err-ink)} .correcao-sua--certa{background:var(--ok-bg);border:1px solid var(--ok-line)} .correcao-sua--certa b{color:var(--ok-ink)} .correcao-sua .correcao-alt{font-weight:700;font-family:var(--disp)} .correcao-sua .markdown-body{display:inline;color:var(--text)} .correcao-sua .markdown-body>:first-child{margin-top:0} .correcao-sua .markdown-body>:last-child{margin-bottom:0} .correcao-fb{background:var(--panel-2);border-radius:11px;padding:.75rem 1rem;font-size:.92rem;margin-top:.5rem} /* ---- auth -------------------------------------------------------------- */ .auth-wrap{min-height:calc(100vh - 140px);display:grid;place-items:center;padding:40px 0} .auth-card{width:100%;max-width:420px} .auth-card .pad{padding:34px} .auth-head{margin-bottom:1.6rem;text-align:center} .auth-head .logo-lg{width:52px;height:52px;border-radius:15px;margin:0 auto 1rem;background:linear-gradient(135deg,var(--teal),var(--violet));display:grid;place-items:center;color:#0b1020;box-shadow:0 0 30px var(--teal-glow)} .auth-head .logo-lg svg{width:32px;height:32px} .auth-head h1{font-size:1.6rem;margin:0 0 .4rem} .auth-head p{color:var(--muted);font-size:.92rem;margin:0} .auth-sep{display:flex;align-items:center;gap:.8rem;color:var(--dim);font-size:.8rem;margin:1.3rem 0} .auth-sep::before,.auth-sep::after{content:"";flex:1;height:1px;background:var(--line)} .auth-note{font-size:.8rem;color:var(--dim);text-align:center;margin:.6rem 0 0} /* ---- empty ------------------------------------------------------------- */ .empty{text-align:center;padding:3rem 1.5rem;border:1px dashed var(--line-2);border-radius:var(--radius);margin-top:1.4rem} .empty h3{margin:0 0 .5rem} .empty p{color:var(--muted);margin:0 0 1.3rem} /* ---- footer ------------------------------------------------------------ */ .site-footer{border-top:1px solid var(--line);margin-top:40px} .footer-in{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-top:26px;padding-bottom:26px;flex-wrap:wrap} .footer-brand{font-family:var(--disp);font-weight:700} .footer-copy{color:var(--dim);font-size:.82rem;margin:.2rem 0 0} .footer-points{display:flex;gap:1.2rem;list-style:none;margin:0;padding:0;color:var(--muted);font-size:.82rem;flex-wrap:wrap} .footer-points li{display:flex;align-items:center;gap:.4rem} .footer-points li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--teal)} /* ---- XP HUD ------------------------------------------------------------ */ .xp{display:flex;align-items:center;gap:.5rem} .xp .lvl{font-family:var(--disp);font-weight:700;color:var(--teal);font-size:.9rem} .xp-bar{width:82px;height:7px;border-radius:99px;background:var(--panel-2);overflow:hidden} .xp-bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--teal),var(--amber));box-shadow:0 0 10px var(--teal-glow)} .streak{font-size:.85rem;color:var(--amber);font-weight:600} .diamante{display:inline-flex;align-items:center;gap:.25rem;font-size:.85rem;color:var(--teal);font-weight:600} .diamante .ic{width:1.05em;height:1.05em;vertical-align:-.12em;filter:drop-shadow(0 0 4px var(--teal-glow));animation:diamante-brilho 6s ease-in-out infinite;will-change:filter} .custo-diamante{margin-top:.6rem;font-size:.92rem;color:var(--muted);line-height:1.55} .custo-diamante .ic{width:1.1em;height:1.1em;color:var(--teal);vertical-align:-.16em;margin-right:.15rem} .custo-diamante strong{color:var(--text)} .callout{border-radius:14px;padding:.9rem 1.1rem;margin:1rem 0;font-size:.95rem;line-height:1.5;border:1px solid var(--line);background:var(--panel-2)} .callout-warn{border-color:var(--amber);color:var(--text)} /* Brilho ambiente do diamante no cabeçalho: respiro lento e gradual do halo, sem "pisca" — só o glow crescendo e diminuindo bem devagar. */ @keyframes diamante-brilho{ 0%{filter:drop-shadow(0 0 3px var(--teal-glow)) brightness(1)} 25%{filter:drop-shadow(0 0 6px var(--teal-glow)) brightness(1.06)} 50%{filter:drop-shadow(0 0 9px var(--teal)) brightness(1.13)} 75%{filter:drop-shadow(0 0 6px var(--teal-glow)) brightness(1.06)} 100%{filter:drop-shadow(0 0 3px var(--teal-glow)) brightness(1)} } /* Comemoração ao ganhar diamante: escurece o resto da tela (esmaecido, não preto) para dar foco no diamante e fica FIXO até o usuário tocar/clicar. */ .diamante-fx{position:fixed;inset:0;z-index:120;display:grid;place-items:center;pointer-events:auto;cursor:pointer;background:rgba(6,11,18,.72);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);animation:diamante-fx-in .35s ease-out} .diamante-fx.saindo{animation:diamante-fx-out .3s ease-in forwards} /* Entra com pop e depois flutua de leve, parado no centro, esperando o toque. */ .diamante-fx .gem{width:112px;height:112px;color:var(--teal);filter:drop-shadow(0 0 30px var(--teal-glow));animation:diamante-pop-in 1s cubic-bezier(.2,.9,.25,1) both,diamante-idle 3.4s ease-in-out 1s infinite} .diamante-fx .rotulo{position:absolute;margin-top:172px;font-family:var(--disp,inherit);font-weight:700;color:var(--teal);font-size:1.15rem;letter-spacing:.3px;text-shadow:0 0 12px var(--teal-glow);animation:diamante-rotulo-in .7s ease-out .35s both} .diamante-fx .toque{position:absolute;margin-top:214px;font-size:.82rem;color:var(--muted);letter-spacing:.4px;animation:diamante-toque-in .6s ease-out 1.2s both} .diamante-fx .faisca{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--teal);box-shadow:0 0 8px var(--teal-glow);opacity:0;animation:diamante-faisca 1.3s ease-out forwards} @keyframes diamante-fx-in{from{opacity:0}to{opacity:1}} @keyframes diamante-fx-out{to{opacity:0}} @keyframes diamante-pop-in{ 0%{transform:scale(.2) rotate(-18deg);opacity:0} 55%{transform:scale(1.18) rotate(4deg);opacity:1} 100%{transform:scale(1) rotate(0);opacity:1} } @keyframes diamante-idle{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}} @keyframes diamante-rotulo-in{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:none}} @keyframes diamante-toque-in{0%{opacity:0}100%{opacity:.85}} @keyframes diamante-faisca{0%{opacity:0;transform:translate(0,0) scale(.4)}30%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1)}} /* Pulso no badge do header quando um diamante acabou de entrar. */ .diamante.ganhou{animation:diamante-badge-pop 1.4s ease-out} @keyframes diamante-badge-pop{0%,100%{transform:none}25%{transform:scale(1.45)}50%{transform:scale(.92)}70%{transform:scale(1.12)}} @media(prefers-reduced-motion:reduce){ .diamante .ic{animation:none} /* Sem movimento, mas o foco (esmaecido + diamante fixo até tocar) permanece. */ .diamante-fx,.diamante-fx .gem,.diamante-fx .rotulo,.diamante-fx .toque{animation:none;opacity:1} .diamante-fx .toque{opacity:.85} .diamante-fx .gem{transform:none} .diamante.ganhou{animation:none} } /* ---- copiar código ----------------------------------------------------- */ .markdown-body .codehilite{position:relative} .copy-btn{position:absolute;top:8px;right:8px;font:600 .72rem var(--sans);color:var(--muted); background:rgba(255,255,255,.06);border:1px solid var(--line-2);border-radius:7px;padding:.25rem .55rem;cursor:pointer;opacity:0;transition:.15s} .markdown-body .codehilite:hover .copy-btn{opacity:1} .copy-btn:hover{color:var(--teal);border-color:var(--teal)} /* ---- índice de tópicos (overview do nível) ----------------------------- */ .topico-index{list-style:none;margin:1.1rem 0 0;padding:0;display:flex;flex-direction:column;gap:.55rem} .topico-item{display:flex;align-items:center;gap:.9rem;padding:.8rem 1rem;border:1px solid var(--line);border-radius:var(--radius-sm); background:var(--glass-a);color:inherit;transition:.15s} .topico-item:hover{border-color:var(--teal);background:rgba(45,212,191,.06)} .topico-item.done{opacity:.85} .ti-num{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:700;font-family:var(--disp); background:var(--panel-2);color:var(--teal);font-size:.85rem} .topico-item.done .ti-num{background:rgba(52,211,153,.16);color:var(--green)} .ti-main{flex:1;display:flex;flex-direction:column;gap:.1rem} .ti-title{font-weight:600} .ti-desc{font-size:.82rem;color:var(--muted)} .ti-cta{font-size:.82rem;color:var(--teal);white-space:nowrap} /* ---- etapas do nível --------------------------------------------------- */ .etapas{margin-top:1.2rem} .etapa-list{list-style:none;margin:1rem 0 0;padding:0;display:flex;flex-direction:column;gap:.7rem} .etapa{display:flex;align-items:center;gap:.9rem;padding:.7rem 0;border-top:1px solid var(--line)} .etapa:first-child{border-top:none} .etapa-ic{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:700;font-family:var(--disp); background:var(--panel-2);color:var(--muted);font-size:.85rem} .etapa.now .etapa-ic{background:linear-gradient(135deg,var(--teal),var(--teal-2));color:#062820;box-shadow:0 0 16px var(--teal-glow)} .etapa.done .etapa-ic{background:rgba(52,211,153,.16);color:var(--green)} .etapa-txt{flex:1;display:flex;flex-direction:column} .etapa-txt small{color:var(--muted);font-size:.8rem} .etapa.done .etapa-txt strong{color:var(--green)} .etapa-btn{margin-left:auto} .etapa-lock{margin-left:auto;font-size:.82rem;color:var(--dim)} /* ---- leitor de tópico -------------------------------------------------- */ .topico-progress{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding:.7rem 0} .tp-bar-wrap{flex:1;min-width:180px;display:flex;flex-direction:column;gap:.35rem} .tp-steps{display:flex;gap:5px} .tp-step{flex:1;height:7px;border-radius:99px;background:var(--panel-2);transition:.2s} .tp-step.done{background:var(--green)} .tp-step.cur{background:linear-gradient(90deg,var(--teal),var(--amber));box-shadow:0 0 10px var(--teal-glow)} .tp-label{font-size:.78rem;color:var(--muted);align-self:flex-end} .topico-nav{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:2.4rem;padding-top:1.6rem;border-top:1px solid var(--line)} /* ---- estante de conquistas / medalhas ---------------------------------- */ /* Vitrine: fica logo abaixo do "continuar", então carrega um brilho dourado próprio para se destacar dos demais painéis da home. */ .medal-case{margin-top:1.6rem;padding:1.5rem 1.6rem 1.2rem;border:1px solid rgba(245,181,74,.3); border-radius:var(--radius); background:radial-gradient(720px 260px at 10% -40%,rgba(245,181,74,.14),transparent), linear-gradient(180deg,var(--glass-a),transparent),var(--panel); box-shadow:var(--shadow),inset 0 1px 0 rgba(245,181,74,.14)} .medal-case .eyebrow{color:var(--amber)} .medal-case-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;margin-bottom:1rem} .medal-shelf-outer{overflow-x:auto;padding:2rem 0;margin:-2rem 0;-webkit-overflow-scrolling:touch} .medal-shelf{display:flex;gap:1.5rem;padding:.2rem .4rem;scroll-snap-type:x proximity;width:max-content;min-width:100%} .medal-shelf::-webkit-scrollbar{height:8px} .medal-shelf::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px} .medal{flex:0 0 auto;width:140px;display:flex;flex-direction:column;align-items:center;gap:.5rem;text-align:center;scroll-snap-align:start;transition:transform .2s} .medal:hover{transform:translateY(-4px)} .medal:hover .trophy-svg{--m-fglow:drop-shadow(0 0 0 transparent)} .medal--bronze:hover .trophy-svg{--m-fglow:drop-shadow(0 0 16px rgba(200,140,40,.7));filter:drop-shadow(0 7px 12px rgba(0,0,0,.35)) drop-shadow(0 0 16px rgba(200,140,40,.6))} .medal--prata:hover .trophy-svg{--m-fglow:drop-shadow(0 0 16px rgba(190,205,220,.7));filter:drop-shadow(0 7px 12px rgba(0,0,0,.35)) drop-shadow(0 0 16px rgba(190,205,220,.6))} .medal--ouro:hover .trophy-svg{--m-fglow:drop-shadow(0 0 20px rgba(245,181,74,.8));filter:drop-shadow(0 7px 12px rgba(0,0,0,.35)) drop-shadow(0 0 20px rgba(245,181,74,.75))} .medal--platina:hover .trophy-svg{--m-fglow:drop-shadow(0 0 20px rgba(160,200,230,.8));filter:drop-shadow(0 7px 12px rgba(0,0,0,.35)) drop-shadow(0 0 20px rgba(160,200,230,.75))} .medal--diamante:hover .trophy-svg{--m-fglow:drop-shadow(0 0 24px rgba(120,230,245,.9));filter:drop-shadow(0 7px 12px rgba(0,0,0,.35)) drop-shadow(0 0 24px rgba(120,230,245,.85))} /* Troféu por trilha: taça no metal do patamar, com o monograma gravado. */ .medal-trophy{position:relative;width:108px;height:108px;display:grid;place-items:center} .trophy-svg{width:102px;height:102px;overflow:visible;transition:filter .25s ease; filter:drop-shadow(0 7px 12px rgba(0,0,0,.35)) var(--m-fglow,drop-shadow(0 0 0 transparent))} .medal--bronze .trophy-svg{fill:url(#mg-bronze);stroke:#8a5220} .medal--prata .trophy-svg{fill:url(#mg-prata);stroke:#7d8794;--m-fglow:drop-shadow(0 0 7px rgba(200,210,225,.35))} .medal--ouro .trophy-svg{fill:url(#mg-ouro);stroke:#93670f;--m-fglow:drop-shadow(0 0 9px rgba(245,181,74,.5))} .medal--platina .trophy-svg{fill:url(#mg-platina);stroke:#7e91a5;--m-fglow:drop-shadow(0 0 10px rgba(160,200,230,.55))} .medal--diamante .trophy-svg{fill:url(#mg-diamante);stroke:#349fc2;--m-fglow:drop-shadow(0 0 13px rgba(120,230,245,.65))} /* Medalhão gravado no centro da taça: um disco rebaixado, cunhado no metal, com a sigla em relevo — tamanhos em % da altura do troféu (cqh), então a gravação cai no mesmo lugar em qualquer escala. */ .medal-mono{position:absolute;top:36%;left:50%;transform:translate(-50%,-50%); width:44cqh;height:44cqh;border-radius:50%;display:grid;place-items:center; font-family:var(--disp);font-weight:800;font-size:16cqh;line-height:1;color:var(--m-ink); letter-spacing:.02em;text-shadow:0 1px 0 rgba(255,255,255,.4),0 -1px 1px rgba(0,0,0,.25); background:radial-gradient(circle at 36% 28%,rgba(255,255,255,.3),rgba(255,255,255,.04) 46%,rgba(0,0,0,.2)); box-shadow:inset 0 2px 4px rgba(0,0,0,.3),inset 0 -1px 2px rgba(255,255,255,.35),0 1px 1px rgba(255,255,255,.28)} .medal-trophy{container-type:size} .medal-tier-label{font-family:var(--disp);font-weight:700;font-size:.62rem;letter-spacing:.16em; text-transform:uppercase;color:var(--m-accent)} .medal-stars{display:flex;gap:4px;margin-top:.05rem} .medal-stars i{width:6px;height:6px;border-radius:50%;background:var(--line-2)} .medal-stars i.on{background:var(--m-accent);box-shadow:0 0 6px var(--m-accent)} .medal-name{font-size:.78rem;font-weight:600;color:var(--text);line-height:1.25;margin-top:.1rem} .medal--bronze{--m-face:radial-gradient(circle at 35% 26%,#f4c088,#c9812f 48%,#82501c 100%); --m-rim-a:#f0b877;--m-rim-b:#7a4a1e;--m-ink:#4a2c11;--m-accent:#d79a58;--m-glow:0 0 0 rgba(0,0,0,0)} .medal--prata{--m-face:radial-gradient(circle at 35% 26%,#ffffff,#c6cedb 50%,#828d9c 100%); --m-rim-a:#f2f5fa;--m-rim-b:#7d8794;--m-ink:#333a44;--m-accent:#b9c3d1;--m-glow:0 0 16px rgba(200,210,225,.28)} .medal--ouro{--m-face:radial-gradient(circle at 35% 26%,#fff3c8,#eeb838 49%,#a9781a 100%); --m-rim-a:#ffe391;--m-rim-b:#93670f;--m-ink:#5f4209;--m-accent:#e7b24d;--m-glow:0 0 22px rgba(245,181,74,.42)} .medal--platina{--m-face:radial-gradient(circle at 35% 26%,#ffffff,#dde7f0 48%,#95a8bb 100%); --m-rim-a:#eef4fb;--m-rim-b:#7e91a5;--m-ink:#2f3f4e;--m-accent:#a9c3da;--m-glow:0 0 24px rgba(160,200,230,.46)} .medal--diamante{--m-face:radial-gradient(circle at 35% 26%,#ffffff,#a6f2f8 46%,#3cb0d2 100%); --m-rim-a:#dbfcff;--m-rim-b:#349fc2;--m-ink:#0e3c49;--m-accent:#6fdcef;--m-glow:0 0 30px rgba(120,230,245,.55)} .medal--diamante .medal-trophy{animation:medal-shine 3.2s ease-in-out infinite} @keyframes medal-shine{0%,100%{filter:brightness(1)}50%{filter:brightness(1.14)}} /* emblema/decalque no card da trilha + chip por patamar */ .tc-left{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap} .tc-cat{font-size:.68rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--dim);margin:.3rem 0 .5rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tc-medal-area{min-height:1.85rem;display:flex;align-items:flex-end;justify-content:flex-end} .tc-medal{display:inline-flex;align-items:center;gap:.35rem;font-size:.75rem;font-weight:600;padding:.28rem .6rem;border-radius:7px;transition:box-shadow .2s,filter .2s} .tc-medal .ic{width:13px;height:13px;flex:none} .tc-medal--bronze{color:var(--amber);background:rgba(180,100,30,.12)} .tc-medal--prata{color:var(--muted);background:rgba(160,175,190,.12)} .tc-medal--ouro{color:var(--amber);background:rgba(245,181,74,.13)} .tc-medal--platina{color:var(--teal);background:rgba(45,212,191,.08)} .tc-medal--diamante{color:var(--teal);background:rgba(45,212,191,.14);font-weight:700} .trilha-card:hover .tc-medal--bronze{box-shadow:0 0 10px rgba(200,140,40,.5);filter:brightness(1.2)} .trilha-card:hover .tc-medal--prata{box-shadow:0 0 10px rgba(180,195,210,.45);filter:brightness(1.2)} .trilha-card:hover .tc-medal--ouro{box-shadow:0 0 12px rgba(245,181,74,.55);filter:brightness(1.25)} .trilha-card:hover .tc-medal--platina{box-shadow:0 0 12px rgba(160,200,230,.5);filter:brightness(1.25)} .trilha-card:hover .tc-medal--diamante{box-shadow:0 0 14px rgba(120,230,245,.65);filter:brightness(1.3)} .trilha-count{text-align:right;font-size:.8rem;color:var(--dim);margin:.7rem 0 0} .trilha-acoes-discretas{display:flex;flex-wrap:wrap;align-items:center;gap:0;margin-top:1.1rem} .tad-btn{background:none;border:none;padding:.12rem .25rem;font:inherit;font-size:.78rem;color:var(--dim);cursor:pointer;transition:color .15s;white-space:nowrap} .tad-btn:hover{color:var(--muted)} .tad-btn--ok{color:var(--teal)} .tad-btn--ok:hover{color:var(--teal);filter:brightness(1.2)} .tad-btn--danger{color:var(--pink)} .tad-btn--danger:hover{color:var(--pink);filter:brightness(1.2)} .tad-sep{color:var(--dim);font-size:.78rem;user-select:none;padding:0 .1rem} .tc-emblem{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex:none; font-family:var(--disp);font-weight:800;font-size:.92rem;letter-spacing:.01em;color:var(--muted); background:var(--panel-2);border:1px solid var(--line-2)} .tc-emblem--bronze{border-color:rgba(184,115,51,.5);box-shadow:0 0 12px rgba(184,115,51,.28)} .tc-emblem--prata{border-color:rgba(180,192,204,.5);box-shadow:0 0 12px rgba(180,192,204,.28)} .tc-emblem--ouro{border-color:rgba(245,181,74,.55);box-shadow:0 0 14px rgba(245,181,74,.32)} .tc-emblem--platina{border-color:rgba(160,200,230,.55);box-shadow:0 0 14px rgba(160,200,230,.32)} .tc-emblem--diamante{border-color:rgba(120,230,245,.6);box-shadow:0 0 16px rgba(120,230,245,.42)} .title-chip--bronze{background:rgba(184,115,51,.14);color:#c07f36;border-color:rgba(184,115,51,.4)} .title-chip--prata{background:rgba(125,135,148,.16);color:#8b95a3;border-color:rgba(125,135,148,.42)} .title-chip--ouro{background:rgba(200,150,31,.16);color:#c8961f;border-color:rgba(200,150,31,.42)} .title-chip--platina{background:rgba(107,130,150,.16);color:#7e93a6;border-color:rgba(107,130,150,.42)} .title-chip--diamante{background:rgba(31,155,184,.16);color:#1f9bb8;border-color:rgba(31,155,184,.45)} /* ---- ações da home + pastas (categorias) ------------------------------- */ .home-actions{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center} .home-actions form{display:block;margin:0} .home-actions .btn{height:48px;padding-left:1rem;padding-right:1rem;white-space:nowrap} .home-actions .btn-mentor{background:var(--app-button-gradient);color:#fff;box-shadow:0 0 24px var(--teal-glow),inset 0 1px 0 rgba(255,255,255,.22)} .btn-count{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px; background:rgba(11,16,32,.22);color:inherit;font-size:.72rem;font-weight:700;font-variant-numeric:tabular-nums} /* busca de trilhas no dashboard */ .trilha-search{margin-top:1.6rem} .trilha-search input[type=search]{width:100%;font:inherit;font-size:.95rem;color:var(--text); background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--radius-sm);padding:.7rem .95rem;transition:.15s} .trilha-search input[type=search]:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(45,212,191,.18)} .trilha-search-empty{color:var(--muted);margin:.9rem 0 0;font-size:.92rem} /* Categorias como cabeçalhos de seção (sem "caixa dentro de caixa"): os cards ficam direto sobre a página, separados por um divisor sutil. */ .trilha-cat-label{grid-column:1/-1;font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);padding:.5rem 0 .1rem;border-bottom:1px solid var(--line-2)} .trilha-cat-label:first-child{padding-top:.2rem} .folder{margin-top:2rem} .folder+.folder{margin-top:2.6rem} .folder-head{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.65rem; padding:.15rem 0 .7rem;border-bottom:1px solid var(--line); font-family:var(--disp);font-weight:700;font-size:1.1rem;letter-spacing:-.01em; color:var(--text);user-select:none} .folder-head::-webkit-details-marker{display:none} .folder-head::after{content:"▾";margin-left:auto;color:var(--muted);font-size:.85rem;transition:transform .2s} .folder:not([open]) .folder-head::after{transform:rotate(-90deg)} .folder-count{font-size:.72rem;font-weight:600;color:var(--muted);background:var(--panel-2); border:1px solid var(--line);border-radius:99px;padding:.1rem .55rem} .folder .trilha-grid{margin:1.1rem 0 0} .folder--off .folder-head{color:var(--muted)} .trilha-card--off{opacity:.6} .trilha-card--off:hover{opacity:.9} /* ---- mentor / percurso ------------------------------------------------- */ .btn-mentor{background:var(--app-button-gradient);color:#fff;box-shadow:0 0 24px var(--teal-glow),inset 0 1px 0 rgba(255,255,255,.22)} .btn-mentor:hover{filter:brightness(1.08);transform:translateY(-1px)} .mentor-fala{display:flex;gap:.9rem;align-items:flex-start;margin-bottom:1.5rem; border-color:rgba(139,124,246,.35);background:linear-gradient(180deg,rgba(139,124,246,.09),transparent)} .mentor-av{font-size:1.7rem;line-height:1;color:var(--violet)} .mentor-av .ic{width:1.7rem;height:1.7rem} .streak .ic{width:1em;height:1em;vertical-align:-.12em} .nivel-hint .ic,.passo-tag .ic{width:1em;height:1em} .mentor-fala p{margin:0;color:var(--text);font-size:1.02rem;line-height:1.6} .percurso{list-style:none;margin:0;padding:0;position:relative} .percurso::before{content:"";position:absolute;left:17px;top:16px;bottom:16px;width:2px;background:linear-gradient(var(--teal),var(--violet))} .passo{position:relative;display:flex;gap:1rem;align-items:flex-start;margin-bottom:1.1rem} .passo-num{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-family:var(--disp); font-weight:700;background:var(--panel-2);color:var(--text);border:2px solid var(--line-2);z-index:1} .passo--aprender .passo-num{border-color:var(--teal);color:var(--teal)} .passo--avaliar .passo-num{border-color:var(--amber);color:var(--amber)} .passo--revisar .passo-num,.passo--revisar_global .passo-num{border-color:var(--violet);color:var(--violet)} .passo-card{flex:1;margin:0;min-width:0} .passo-tag{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted); margin-bottom:.35rem;display:flex;gap:.4rem;flex-wrap:wrap;align-items:center} .passo-trilha{color:var(--dim);font-weight:500;text-transform:none;letter-spacing:0} .passo-titulo{font-family:var(--disp);font-size:1.12rem;margin:0 0 .35rem} .passo-motivo{color:var(--muted);margin:0 0 .9rem;line-height:1.55} .passo-cta form{margin:0} /* ---- dica de descarte (duplo-clique/duplo-toque) ----------------------- */ .dica-descarte{display:flex;align-items:center;gap:.55rem;margin:0 0 1.2rem; font-size:.86rem;color:var(--muted);line-height:1.5} .dica-descarte span{flex:1;min-width:0} .dica-descarte .dica-tag{flex:none;font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase; color:var(--teal);background:rgba(45,212,191,.12);border:1px solid rgba(45,212,191,.28); border-radius:999px;padding:.15rem .5rem} .dica-descarte b{color:var(--text)} /* ---- alternativa descartada (duplo-clique) ----------------------------- */ /* touch-action: o duplo-toque descarta a alternativa em vez de dar zoom. */ .opt{user-select:none;touch-action:manipulation} .opt.descartada{opacity:.5;background:var(--panel-2);border-color:var(--line);cursor:default} .opt.descartada .opt-texto{text-decoration:line-through;color:var(--dim)} /* ---- tópicos bloqueados (leitura em ordem) ----------------------------- */ .topico-item.locked{opacity:.6;cursor:not-allowed;background:var(--glass-b)} .topico-item.locked .ti-num{background:var(--panel);color:var(--dim)} .tp-step.locked{background:var(--line-2);opacity:.5;cursor:not-allowed} /* ---- painel de leitura (tema + tamanho da fonte) ----------------------- */ .reader-fab{position:fixed;right:18px;bottom:18px;z-index:60;display:flex;flex-direction:column;align-items:flex-end;gap:.6rem} .reader-fab-btn{width:42px;height:42px;border-radius:50%;border:1px solid var(--line); background:color-mix(in srgb,var(--panel) 45%,transparent);color:var(--muted); font-family:var(--disp);font-weight:600;font-size:1rem;cursor:pointer;opacity:.4; backdrop-filter:blur(6px);box-shadow:0 4px 14px rgba(0,0,0,.18);transition:opacity .18s,color .18s,border-color .18s} .reader-fab-btn:hover,.reader-fab-btn:focus-visible,.reader-fab-btn[aria-expanded="true"]{ opacity:1;border-color:var(--teal);color:var(--teal)} .reader-panel{width:260px;background:var(--panel);border:1px solid var(--line-2);border-radius:var(--radius-sm); box-shadow:var(--shadow);padding:1rem;display:flex;flex-direction:column;gap:1rem} .reader-panel[hidden]{display:none} .rp-block{display:flex;flex-direction:column;gap:.55rem} .rp-title{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600} .rp-font{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.4rem} .rp-font button{padding:.5rem 0;border:1px solid var(--line-2);border-radius:9px;background:var(--bg-2);color:var(--text); font-family:var(--disp);cursor:pointer;transition:.15s} .rp-font button:hover{border-color:var(--teal);color:var(--teal)} .rp-themes{display:grid;grid-template-columns:1fr 1fr;gap:.4rem} .rp-theme{display:flex;align-items:center;gap:.45rem;padding:.5rem .55rem;border:1px solid var(--line-2);border-radius:9px; background:var(--bg-2);color:var(--text);font-size:.85rem;cursor:pointer;transition:.15s} .rp-theme::before{content:"";width:14px;height:14px;border-radius:50%;border:1px solid var(--line-2);flex:none} .rp-theme:hover{border-color:var(--teal)} .rp-theme[aria-pressed="true"]{border-color:var(--teal);box-shadow:0 0 0 2px var(--teal-glow)} .rp-theme--escuro::before{background:#0C1020} .rp-theme--claro::before{background:#FFFFFF} .rp-theme--papel::before{background:#FBF4E4} .rp-theme--preto::before{background:#000000} @media(max-width:820px){.reader-fab{right:12px;bottom:12px}.reader-panel{width:min(260px,78vw)}} /* ---- chat de dúvidas --------------------------------------------------- */ /* O botão mora na coluna do FAB de leitura e fica na quina. Ao contrário dos irmãos, que vivem apagados para não competir com o texto, este é a chamada da feature: cheio, opaco e maior. */ .chat-fab-btn{width:52px;height:52px;opacity:1;display:grid;place-items:center; background:var(--app-button-gradient);border-color:transparent;color:#fff; box-shadow:0 0 24px var(--teal-glow),inset 0 1px 0 rgba(255,255,255,.22)} .chat-fab-btn:hover,.chat-fab-btn:focus-visible,.chat-fab-btn[aria-expanded="true"]{ opacity:1;color:#fff;border-color:transparent;filter:brightness(1.08);transform:translateY(-1px)} .chat-fab-btn .ic{width:24px;height:24px;transition:transform .25s cubic-bezier(.2,.7,.3,1)} .chat-fab-btn:hover .ic{transform:scale(1.1) rotate(-6deg)} .chat-fab-btn[aria-expanded="true"] .ic{transform:scale(.88) rotate(-10deg)} .chat-fab-btn:active{transform:scale(.94)} /* Chamada discreta na primeira visita: dois pulsos e para. Quem já abriu o painel alguma vez não vê mais (o JS tira a classe e guarda no localStorage). */ .chat-fab-btn.chama{animation:chat-chama 2.4s ease-in-out 1.2s 2} @keyframes chat-chama{0%,100%{box-shadow:0 0 24px var(--teal-glow),inset 0 1px 0 rgba(255,255,255,.22)} 50%{box-shadow:0 0 34px 6px var(--teal-glow),inset 0 1px 0 rgba(255,255,255,.22)}} /* Textura do painel: a MESMA grade de pontos do fundo do app (o "mapa estelar"), em escala menor. O ponto muda por tema — claro no escuro, escuro no claro e no papel —, senão some ou vira sujeira. */ .chat-panel{--chat-ponto:rgba(231,234,246,.055);--chat-brilho:rgba(45,212,191,.07)} :root[data-theme="claro"] .chat-panel{--chat-ponto:rgba(17,24,45,.05);--chat-brilho:rgba(14,156,136,.06)} :root[data-theme="papel"] .chat-panel{--chat-ponto:rgba(70,52,25,.08);--chat-brilho:rgba(12,132,116,.06)} :root[data-theme="preto"] .chat-panel{--chat-ponto:rgba(255,255,255,.05);--chat-brilho:rgba(45,212,191,.06)} .chat-fluxo,.chat-lista{ background-image:radial-gradient(120% 45% at 50% 0,var(--chat-brilho),transparent 70%), radial-gradient(var(--chat-ponto) 1px,transparent 1.2px); background-size:auto,18px 18px} .chat-panel{position:absolute;right:0;bottom:64px;display:flex;flex-direction:column; width:min(24rem,calc(100vw - 2rem));height:min(70vh,34rem); background:var(--panel);border:1px solid var(--line-2);border-radius:var(--radius); box-shadow:var(--shadow);overflow:hidden; /* Cresce a partir do botão, que fica na quina de baixo à direita. */ transform-origin:bottom right;animation:chat-abre .3s cubic-bezier(.2,.7,.3,1) both} .chat-panel.saindo{animation:chat-fecha .18s ease both;pointer-events:none} .chat-panel[hidden]{display:none} /* display próprio não pode vencer o hidden */ @keyframes chat-abre{from{opacity:0;transform:translateY(14px) scale(.94)}to{opacity:1;transform:none}} @keyframes chat-fecha{from{opacity:1;transform:none}to{opacity:0;transform:translateY(10px) scale(.96)}} .chat-topo{display:flex;align-items:center;gap:.4rem;padding:.5rem .55rem .5rem .85rem; border-bottom:1px solid var(--line);background:var(--panel-2)} .chat-topo>div{flex:1;min-width:0} .chat-titulo{margin:0;font-family:var(--disp);font-weight:600;font-size:.9rem; line-height:1.25;color:var(--text)} .chat-sub{margin:0;font-size:.72rem;line-height:1.35;color:var(--muted); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .chat-acao{width:2rem;height:2rem;display:grid;place-items:center;flex:none; background:none;border:none;border-radius:var(--radius-xs);color:var(--dim);cursor:pointer} .chat-acao:hover{color:var(--text);background:var(--glass-a)} .chat-acao:focus-visible{outline:2px solid var(--teal);outline-offset:2px} .chat-acao .ic{width:16px;height:16px} .chat-fluxo{flex:1;overflow-y:auto;overscroll-behavior:contain; padding:.8rem .75rem;display:flex;flex-direction:column;gap:.6rem} .chat-fluxo[hidden]{display:none} /* display próprio não pode vencer o hidden */ .chat-vazio{margin:auto 0;font-size:.85rem;line-height:1.5;color:var(--muted);text-align:center} .chat-bolha{max-width:88%;padding:.6rem .8rem;border-radius:var(--radius-sm); font-size:.88rem;line-height:1.55;overflow-wrap:break-word;text-wrap:wrap; animation:bolha-entra .32s cubic-bezier(.2,.7,.3,1) both} /* Cada uma entra do seu lado: a do aluno pela direita, a da IA pela esquerda. */ @keyframes bolha-entra{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}} @keyframes bolha-entra-dir{from{opacity:0;transform:translate(12px,6px) scale(.97)}to{opacity:1;transform:none}} @keyframes bolha-entra-esq{from{opacity:0;transform:translate(-12px,6px) scale(.97)}to{opacity:1;transform:none}} .chat-bolha--aluno{align-self:flex-end;background:var(--app-button-gradient);color:#fff; border-bottom-right-radius:var(--radius-xs);animation-name:bolha-entra-dir} .chat-bolha--ia{align-self:flex-start;background:var(--bg-2);color:var(--text); border:1px solid var(--line);border-bottom-left-radius:var(--radius-xs); animation-name:bolha-entra-esq} /* A borda respira enquanto o texto está sendo escrito. */ .chat-bolha--ia.escrevendo{border-color:var(--teal);animation:bolha-entra-esq .32s cubic-bezier(.2,.7,.3,1) both, chat-respira 2s ease-in-out .4s infinite} @keyframes chat-respira{0%,100%{border-color:var(--line)}50%{border-color:var(--teal)}} .chat-bolha--erro{border-color:var(--err-line);color:var(--err-ink);background:var(--err-bg)} /* Markdown dentro da bolha: o conteúdo já vem sanitizado pelo nh3. */ .chat-bolha p{margin:0 0 .5rem} .chat-bolha p:last-child{margin-bottom:0} .chat-bolha ul,.chat-bolha ol{margin:.3rem 0 .5rem;padding-left:1.2rem} .chat-bolha pre{margin:.5rem 0;padding:.55rem;border-radius:var(--radius-xs); background:var(--bg);font-size:.8rem;line-height:1.5; white-space:pre-wrap;overflow-wrap:anywhere;overflow-x:hidden} .chat-bolha code{font-family:var(--mono);font-size:.85em;overflow-wrap:anywhere} .chat-bolha .codehilite{max-width:100%;overflow:hidden} .chat-bolha .codehilite pre{margin:0} /* A quebra some a indentação de código; a marca à esquerda diz onde a linha continua sem precisar de régua. */ .chat-bolha pre{border-left:2px solid var(--line-2)} .chat-bolha table{width:100%;table-layout:fixed;font-size:.78rem} .chat-bolha th,.chat-bolha td{overflow-wrap:anywhere;padding:.25rem .35rem} .chat-bolha .mermaid{max-width:100%;overflow:hidden;margin:.4rem 0} .chat-bolha .mermaid svg{max-width:100%;height:auto} .chat-bolha img{max-width:100%;height:auto} .chat-digitando{display:inline-flex;gap:.25rem;vertical-align:middle} .chat-digitando i{width:.32rem;height:.32rem;border-radius:50%;background:var(--dim); animation:chat-pulso 1.1s infinite} .chat-digitando i:nth-child(2){animation-delay:.15s} .chat-digitando i:nth-child(3){animation-delay:.3s} @keyframes chat-pulso{0%,60%,100%{opacity:.25}30%{opacity:1}} /* Lista de conversas salvas: ocupa o corpo do painel no lugar do fluxo. */ .chat-lista{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:.6rem; display:flex;flex-direction:column;gap:.4rem} .chat-lista[hidden]{display:none} .chat-item{display:block;width:100%;text-align:left;padding:.6rem .7rem;cursor:pointer; background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-sm); color:var(--text);font:inherit;transition:.15s} .chat-item:hover{border-color:var(--teal);transform:translateY(-1px)} .chat-item{animation:bolha-entra .28s cubic-bezier(.2,.7,.3,1) both} .chat-item:nth-child(2){animation-delay:.04s} .chat-item:nth-child(3){animation-delay:.08s} .chat-item:nth-child(4){animation-delay:.12s} .chat-item:nth-child(5){animation-delay:.16s} .chat-item:nth-child(n+6){animation-delay:.2s} .chat-item:focus-visible{outline:2px solid var(--teal);outline-offset:2px} .chat-item.atual{border-color:var(--teal);background:var(--panel-2)} .chat-item{position:relative} .chat-item-topo{display:flex;align-items:baseline;gap:.5rem;padding-right:1.4rem} /* A lixeira mora dentro do cartão, mas é um botão à parte: apagar não pode ser o alvo de quem só queria abrir a conversa. */ .chat-item-apagar{position:absolute;top:.35rem;right:.35rem; width:1.7rem;height:1.7rem;display:grid;place-items:center; background:none;border:none;border-radius:var(--radius-xs); color:var(--dim);cursor:pointer;opacity:0;transition:.15s} .chat-item:hover .chat-item-apagar,.chat-item-apagar:focus-visible{opacity:1} .chat-item-apagar:hover{color:var(--red);background:var(--glass-a)} .chat-item-apagar:focus-visible{outline:2px solid var(--teal);outline-offset:1px} .chat-item-apagar .ic{width:15px;height:15px} /* Sem ponteiro não existe hover: no toque a lixeira fica sempre visível. */ @media (hover:none){.chat-item-apagar{opacity:.7}} .chat-item-nome{flex:1;min-width:0;font-weight:600;font-size:.86rem; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .chat-item-quando{flex:none;font-size:.7rem;color:var(--dim)} .chat-item-ctx{margin:.15rem 0 0;font-size:.72rem;color:var(--teal); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .chat-item-previa{margin:.25rem 0 0;font-size:.78rem;line-height:1.4;color:var(--muted); display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .chat-lista-vazia{margin:auto;padding:1rem;font-size:.85rem;color:var(--muted);text-align:center} .chat-form{display:flex;align-items:flex-end;gap:.45rem;padding:.55rem; border-top:1px solid var(--line)} .chat-form textarea{flex:1;max-height:7rem;padding:.55rem .7rem;font-size:.88rem; line-height:1.45;border-radius:var(--radius-sm);resize:none} .chat-enviar{width:2.5rem;height:2.5rem;flex:none;display:grid;place-items:center; border:none;border-radius:50%;background:var(--app-button-gradient);color:#fff;cursor:pointer; box-shadow:0 0 18px var(--teal-glow),inset 0 1px 0 rgba(255,255,255,.22);transition:.18s} .chat-enviar:hover:not(:disabled){filter:brightness(1.08);transform:translateY(-1px)} .chat-enviar:active:not(:disabled){transform:scale(.92)} .chat-enviar .ic{transition:transform .18s} .chat-enviar:hover:not(:disabled) .ic{transform:translate(2px,-2px)} /* No envio o aviãozinho decola e volta do outro lado. */ .chat-enviar.voando .ic{animation:chat-decola .5s cubic-bezier(.4,0,.6,1)} @keyframes chat-decola{45%{transform:translate(22px,-22px);opacity:0} 46%{transform:translate(-16px,16px);opacity:0}100%{transform:none;opacity:1}} .chat-enviar:disabled{opacity:.45;cursor:default;filter:none;transform:none;box-shadow:none} .chat-enviar:focus-visible{outline:2px solid var(--teal);outline-offset:2px} .chat-enviar .ic{width:18px;height:18px} .chat-rodape{margin:0;padding:0 .85rem .5rem;font-size:.72rem;line-height:1.3;color:var(--dim)} .chat-rodape:empty{display:none} .chat-rodape.alerta{color:var(--amber)} /* Sem backdrop-filter o painel já é opaco; o fallback aqui é o do toast. */ @media (max-width:40rem){ /* Folha de tela cheia: o painel de 24rem não cabe ao lado do teclado. */ /* Folha de tela cheia: sobe de baixo, que é o gesto que o formato pede — escalar a partir da quina não faz sentido quando ocupa tudo. */ .chat-panel{position:fixed;inset:0;width:100vw;height:100dvh;max-height:none; border:none;border-radius:0; padding-bottom:env(safe-area-inset-bottom); animation:chat-sobe .28s cubic-bezier(.2,.7,.3,1) both} .chat-panel.saindo{animation:chat-desce .2s ease both} @keyframes chat-sobe{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:none}} @keyframes chat-desce{from{opacity:1;transform:none}to{opacity:0;transform:translateY(100%)}} } /* Passagem automática de cards: FAB irmão do "Aa" */ .reader-fab-btn--auto{display:grid;place-items:center} .reader-fab-btn--auto[hidden]{display:none} /* display próprio não pode vencer o hidden */ .reader-fab-btn--auto .ic{width:17px;height:17px} .ap-ic-pause{display:none} .reader-fab-btn--auto.on{opacity:1;border-color:var(--teal);color:var(--teal); box-shadow:0 0 0 2px var(--teal-glow),0 4px 14px rgba(0,0,0,.18)} .reader-fab-btn--auto.on .ap-ic-play,.tocando .rp-ap-main .ap-ic-play{display:none} .reader-fab-btn--auto.on .ap-ic-pause,.tocando .rp-ap-main .ap-ic-pause{display:block} /* controles dentro do painel: iniciar/pausar + parar sempre visíveis */ .rp-ap-controls{display:grid;grid-template-columns:1.6fr 1fr;gap:.4rem} .rp-ap-controls button{display:flex;align-items:center;justify-content:center;gap:.45rem; padding:.55rem 0;border:1px solid var(--line-2);border-radius:9px;background:var(--bg-2); color:var(--text);font:600 .85rem var(--sans);cursor:pointer;transition:.15s} .rp-ap-controls button:hover{border-color:var(--teal);color:var(--teal)} .rp-ap-controls .ic{width:14px;height:14px} .rp-ap-main[aria-pressed="true"]{border-color:var(--teal);color:var(--teal);box-shadow:0 0 0 2px var(--teal-glow)} .rp-autoplay{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem} .rp-autoplay button{padding:.5rem 0;border:1px solid var(--line-2);border-radius:9px;background:var(--bg-2); color:var(--text);font:600 .8rem var(--sans);cursor:pointer;transition:.15s;font-variant-numeric:tabular-nums} .rp-autoplay button:hover{border-color:var(--teal);color:var(--teal)} .rp-autoplay button[aria-pressed="true"]{border-color:var(--teal);color:var(--teal);box-shadow:0 0 0 2px var(--teal-glow)} .rp-hint{margin:0;font-size:.78rem;color:var(--dim);line-height:1.45} /* Com o passador ligado, o segmento atual da barra "enche" no ritmo escolhido (como stories); ::before livre — ::after já é a área de toque ampliada. */ .autoplay-on .story-bars button.cur{background:var(--panel-2);box-shadow:none;overflow:hidden} .autoplay-on .story-bars button.cur::before{content:"";position:absolute;inset:0;border-radius:99px; background:linear-gradient(90deg,var(--teal),var(--amber));transform-origin:left; animation:ap-fill var(--ap-dur,8s) linear forwards} @keyframes ap-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}} /* ========================================================================= Leitor em cards ("stories"): o conteúdo do tópico vira um deck deslizável com barra segmentada; o modo Artigo mantém a leitura corrida completa. ========================================================================= */ .story-head{display:flex;align-items:center;gap:.9rem;margin:.2rem 0 1rem;flex-wrap:wrap} .story-bars{display:flex;gap:4px;flex:1;min-width:140px} .story-bars button{position:relative;flex:1;height:5px;min-width:5px;border-radius:99px;background:var(--panel-2);border:0;padding:0;cursor:pointer;transition:background .25s} .story-bars button::after{content:"";position:absolute;inset:-9px 0} .story-bars button.done{background:rgba(45,212,191,.7)} .story-bars button.cur{background:linear-gradient(90deg,var(--teal),var(--amber));box-shadow:0 0 8px var(--teal-glow)} .story-count{font-family:var(--mono);font-weight:500;font-size:.76rem;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap} .mode-toggle{display:inline-flex;gap:2px;padding:2px;border:1px solid var(--line-2);border-radius:999px;background:var(--bg-2)} .mode-toggle button{border:0;background:transparent;color:var(--muted);font:600 .74rem var(--sans);padding:.32rem .7rem;border-radius:999px;cursor:pointer;transition:.15s} .mode-toggle button[aria-pressed="true"]{background:var(--panel-2);color:var(--teal)} .mode-artigo .story-bars,.mode-artigo .story-count{display:none} .mode-artigo .mode-toggle{margin-left:auto} .story-stage{position:relative} .story-card{display:block} .sc-kicker{display:none;font-weight:600;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-bottom:.8rem;opacity:.85} .story-card--fim{display:none} /* modo cards: um card por vez, altura de "tela", rolagem interna se preciso */ .mode-cards .story-card{display:none;flex-direction:column;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain; background:linear-gradient(180deg,var(--glass-a),var(--glass-b)),var(--panel); border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow); padding:clamp(20px,4vw,34px) clamp(20px,4.5vw,38px); min-height:min(56dvh,520px);max-height:calc(100dvh - 250px)} .mode-cards .story-card.on{display:flex;animation:card-in .3s cubic-bezier(.2,.7,.3,1)} .mode-cards .story-stage[data-dir="back"] .story-card.on{animation-name:card-back} .mode-cards .story-card--fim.on{display:flex} .mode-cards .sc-kicker{display:block} .mode-cards .topico-nav{display:none} .sc-in{margin:auto 0;width:100%;min-width:0;max-width:100%} /* O leitor move cada seção para `.sc-in` via JavaScript. Mantemos o contexto Markdown e forçamos os blocos de destaque a ocupar toda a largura útil do card, em vez de conservar uma coluna estreita do conteúdo original. */ .sc-in.markdown-body{display:block;align-self:stretch;width:100%;max-width:none;box-sizing:border-box} .sc-in.markdown-body>*{max-width:100%;box-sizing:border-box} .sc-in.markdown-body>.admonition, .sc-in.markdown-body>.mermaid, .sc-in.markdown-body>.codehilite, .sc-in.markdown-body>table{width:100%;max-width:100%;box-sizing:border-box} .sc-in.markdown-body>.admonition>*{max-width:100%;box-sizing:border-box} .sc-in.markdown-body>.codehilite>pre{width:100%;max-width:100%;box-sizing:border-box} .sc-in>*:first-child{margin-top:0} .sc-in>*:last-child,.sc-in .admonition:last-child{margin-bottom:0} .mode-cards .markdown-body h2{border-bottom:none;font-size:1.4rem} .mode-cards .markdown-body h2,.mode-cards .markdown-body h3{margin-top:0} @keyframes card-in{from{opacity:0;transform:translateX(26px) scale(.985)}to{opacity:1;transform:none}} @keyframes card-back{from{opacity:0;transform:translateX(-26px) scale(.985)}to{opacity:1;transform:none}} /* Mobile: sem rolagem interna no card — a página é a única superfície de rolagem (o deck leva a viewport ao topo do card ao trocar). */ @media(max-width:820px){ .mode-cards .story-card{max-height:none;min-height:0;overflow-y:visible;overscroll-behavior:auto} } /* zonas de toque nas bordas (só em telas de toque) */ .story-tap{display:none;position:absolute;top:0;bottom:0;width:52px;border:0;background:transparent;padding:0;z-index:6} .story-tap--l{left:-6px}.story-tap--r{right:-6px} @media(hover:none){.mode-cards .story-tap{display:block}} /* setas de navegação do deck */ .story-foot{display:none;justify-content:center;gap:.9rem;margin-top:1.1rem} .mode-cards .story-foot{display:flex} .story-nav-btn{width:46px;height:46px;border-radius:50%;border:1px solid var(--line-2);background:var(--panel); color:var(--text);cursor:pointer;display:grid;place-items:center;transition:.15s} .story-nav-btn:hover:not(:disabled){border-color:var(--teal);color:var(--teal);box-shadow:0 0 14px var(--teal-glow)} .story-nav-btn:disabled{opacity:.3;cursor:default} .story-nav-btn .ic{width:20px;height:20px} /* Botões dentro do conteúdo (card final etc.) não herdam estilo de link. */ .markdown-body a.btn{text-decoration:none} .markdown-body a.btn-primary{color:#062820} .markdown-body a.btn-ghost{color:var(--text)} .markdown-body a.btn-ghost:hover{color:var(--teal)} /* card final de conclusão */ .sc-fim{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.45rem} .fim-badge{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-size:1.7rem; background:rgba(52,211,153,.13);color:var(--green);border:1px solid rgba(52,211,153,.4); box-shadow:0 0 28px rgba(52,211,153,.25);margin-bottom:.4rem} .fim-xp{color:var(--amber);font-family:var(--disp);font-weight:700;font-size:1rem;margin:0} .sc-fim .btn{width:100%;max-width:330px;margin-top:.45rem} .sc-fim .btn:first-of-type{margin-top:1rem} /* ========================================================================= Sugestões de novas trilhas (IA). ========================================================================= */ .sugg-pick{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel); padding:1rem 1.1rem;margin:1.2rem 0} .sugg-pick-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.6rem} .btn-sm{padding:.3rem .6rem;font-size:.8rem} .sugg-pick-cat{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);margin:.9rem 0 .35rem;padding:0 .6rem} .sugg-pick-cat:first-of-type{margin-top:0} .sugg-pick-list{list-style:none;margin:0 0 .25rem;padding:0;display:flex;flex-direction:column;gap:.35rem} .sugg-pick-item{display:flex;align-items:center;gap:.7rem;padding:.5rem .6rem;border-radius:12px;cursor:pointer; border:1px solid transparent;transition:border-color .15s,background .15s} .sugg-pick-item:hover{background:color-mix(in srgb,var(--teal) 6%,transparent)} .sugg-pick-item input{width:18px;height:18px;flex:none;accent-color:var(--teal)} .spi-emblem{width:34px;height:34px;border-radius:10px;flex:none;display:grid;place-items:center;font-size:1.1rem; background:linear-gradient(180deg,var(--glass-a),var(--glass-b));border:1px solid var(--line)} .spi-main{display:flex;flex-direction:column;min-width:0} .spi-title{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .spi-cat{font-size:.8rem} .sugg-meta{margin:.2rem 0 0;font-size:.85rem} .sugg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.4rem;margin-top:1.5rem; align-items:stretch} .sugg-card{display:flex;flex-direction:column;gap:.9rem;text-align:left;padding:1.5rem 1.5rem 1.3rem; border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);box-shadow:var(--shadow); transition:transform .18s,border-color .18s,box-shadow .18s} .sugg-card:hover{transform:translateY(-3px);border-color:var(--teal);box-shadow:0 10px 28px rgba(0,0,0,.28)} .sugg-card--aprofundar{border-top:3px solid var(--teal)} .sugg-card--direcao{border-top:3px solid var(--violet,#8b7cf6)} .sugg-tag{align-self:flex-start;display:inline-flex;align-items:center;gap:.4rem; font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase; padding:.32rem .6rem;border-radius:999px} .sugg-card--aprofundar .sugg-tag{color:var(--teal);background:color-mix(in srgb,var(--teal) 14%,transparent)} .sugg-card--direcao .sugg-tag{color:var(--violet,#8b7cf6);background:color-mix(in srgb,var(--violet,#8b7cf6) 16%,transparent)} .sugg-tag .ic{width:15px;height:15px} .sugg-titulo{margin:0;font-size:1.2rem;line-height:1.3;font-weight:700} .sugg-enfoque{margin:0;color:var(--muted);font-size:.94rem;line-height:1.55} .sugg-topicos{margin:.1rem 0} .sugg-topicos-label{display:block;font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase; color:var(--dim);margin-bottom:.5rem} .sugg-topicos ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.45rem} .sugg-topicos li{position:relative;padding-left:1.15rem;color:var(--text);font-size:.9rem;line-height:1.4} .sugg-topicos li::before{content:"";position:absolute;left:.1rem;top:.5em;width:6px;height:6px;border-radius:50%; background:var(--teal)} .sugg-card--direcao .sugg-topicos li::before{background:var(--violet,#8b7cf6)} .sugg-foot{margin-top:auto;padding-top:.3rem} .sugg-cta{width:100%;justify-content:center} /* ========================================================================= Hero "Continuar de onde parou" no dashboard. ========================================================================= */ .continue-hero{display:flex;align-items:center;gap:1.1rem;margin-top:1.5rem;padding:1.15rem 1.35rem; border-radius:var(--radius);border:1px solid rgba(45,212,191,.3); background:linear-gradient(120deg,rgba(45,212,191,.10),rgba(139,124,246,.08)),var(--panel); box-shadow:var(--shadow);transition:transform .2s,border-color .2s} .continue-hero:hover{transform:translateY(-2px);border-color:var(--teal)} .ch-emblem{width:54px;height:54px;border-radius:15px;flex:none;display:grid;place-items:center; font-size:1.7rem;line-height:1; background:linear-gradient(180deg,var(--glass-a),var(--glass-b));border:1px solid var(--line); backdrop-filter:blur(8px);box-shadow:0 0 22px var(--teal-glow)} .ch-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:.15rem} .ch-eyebrow{font-size:.68rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--teal)} .ch-title{font-family:var(--disp);font-weight:600;font-size:1.12rem;line-height:1.25} .ch-path{font-size:.82rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ch-bar{height:6px;border-radius:99px;background:var(--panel-2);overflow:hidden;margin-top:.5rem;max-width:340px} .ch-bar>i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--teal),var(--amber));box-shadow:0 0 10px var(--teal-glow)} .ch-cta{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center; background:linear-gradient(135deg,var(--teal),var(--teal-2));color:#062820;box-shadow:0 0 18px var(--teal-glow)} .ch-cta .ic{width:19px;height:19px} .ch-cta--r{background:none;box-shadow:none;color:var(--muted);width:28px;height:28px} .ch-cta--r .ic{width:18px;height:18px} @media(max-width:560px){.continue-hero{gap:.85rem}.ch-emblem{display:none}} /* Barra de cota de IA */ /* ---- XP widget (dashboard) --------------------------------------------- */ .xp-widget{margin-top:1.25rem;padding:.85rem 1rem;border:1px solid var(--border);border-radius:14px;background:var(--panel)} .xp-widget-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:.55rem;flex-wrap:wrap;gap:.4rem} .xp-widget-info{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap} .xp-nivel-badge{font-size:.78rem;font-weight:700;color:var(--teal);font-family:var(--disp);letter-spacing:.02em} .xp-total{font-size:.82rem;color:var(--muted);font-weight:500} .xp-hoje-badge{font-size:.75rem;font-weight:700;color:#fbbf24;background:rgba(251,191,36,.12);border:1px solid rgba(251,191,36,.25);border-radius:99px;padding:.15rem .55rem;letter-spacing:.02em} .xp-streak{display:inline-flex;align-items:center;gap:.2rem;font-size:.78rem;font-weight:600;color:#f97316} .xp-streak .ic{width:13px;height:13px} .xp-widget-meta{font-size:.72rem;color:var(--dim);white-space:nowrap} .xp-widget-track{position:relative;height:9px;border-radius:99px;background:var(--panel-2);overflow:hidden;margin-bottom:.8rem;box-shadow:inset 0 1px 2px rgba(0,0,0,.25)} /* Preenchimento com gradiente multicolor que flui + glow na cor. */ .xp-widget-track i{position:relative;display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#2dd4bf,#34d399,#a3e635,#fbbf24,#fb923c,#f472b6,#a78bfa,#2dd4bf);background-size:220% 100%;box-shadow:0 0 8px rgba(45,212,191,.55);animation:xp-fluir 6s linear infinite;transition:width .5s cubic-bezier(.2,.9,.25,1)} /* Faixa de brilho que desliza por cima do preenchimento. */ .xp-widget-track i::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);background-size:45% 100%;background-repeat:no-repeat;animation:xp-brilho 2.8s ease-in-out infinite} @keyframes xp-fluir{from{background-position:220% 0}to{background-position:0 0}} @keyframes xp-brilho{0%{background-position:-45% 0}55%,100%{background-position:145% 0}} @media(prefers-reduced-motion:reduce){ .xp-widget-track i{animation:none} .xp-widget-track i::after{display:none} } .xp-semana{display:flex;gap:.35rem;max-width:30rem;margin-inline:auto} .xp-dia{display:flex;flex-direction:column;align-items:center;gap:.25rem;flex:1} .xp-dia-dot{width:10px;height:10px;border-radius:50%;background:var(--panel-2);border:1.5px solid var(--line);transition:background .2s} .xp-dia-nome{font-size:.6rem;color:var(--dim);font-weight:600;letter-spacing:.04em;text-transform:uppercase} .xp-dia--on .xp-dia-dot{background:var(--teal);border-color:var(--teal)} .xp-dia--on .xp-dia-nome{color:var(--teal)} .xp-dia--hoje .xp-dia-dot{box-shadow:0 0 0 2.5px var(--bg),0 0 0 4px var(--teal)} .xp-dia--hoje .xp-dia-nome{color:var(--text);font-weight:700} /* ---- XP ganho (toast animado nas questões) ----------------------------- */ .xp-toast{position:fixed;bottom:2rem;right:1.5rem;z-index:9999; background:rgba(20,184,166,.15);border:1px solid rgba(20,184,166,.4); color:var(--teal);font-weight:700;font-size:.88rem;padding:.45rem .9rem; border-radius:99px;pointer-events:none; animation:xp-pop .25s cubic-bezier(.34,1.56,.64,1) forwards, xp-fade 2s .8s forwards} @keyframes xp-pop{from{opacity:0;transform:translateY(8px) scale(.85)}to{opacity:1;transform:none}} @keyframes xp-fade{from{opacity:1}to{opacity:0}} .quota-bar{margin-top:1.25rem;padding:.7rem .95rem;border:1px solid var(--border);border-radius:14px;background:var(--panel)} .quota-bar-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.45rem} .quota-bar-label{font-size:.82rem;color:var(--muted)} .quota-bar-pct{font-size:.82rem;font-weight:600;color:var(--text)} .quota-bar-track{height:6px;border-radius:99px;background:var(--panel-2);overflow:hidden} .quota-bar-track>i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--teal),var(--amber));transition:width .4s ease} /* ========================================================================= Feed "Para hoje": flashcards de revisão rápida + quiz do dia. ========================================================================= */ .feed-hoje{margin-top:1.6rem;display:flex;flex-direction:column;gap:.9rem} .feed-head{display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap;padding-bottom:.2rem} .flashcard{border:1px solid var(--line-2);border-radius:var(--radius);padding:1.15rem 1.35rem; background:linear-gradient(180deg,var(--glass-a),var(--glass-b)),var(--panel);box-shadow:var(--shadow)} .flashcard--quiz{border-color:rgba(139,124,246,.35); background:linear-gradient(120deg,rgba(139,124,246,.10),transparent),var(--panel)} .fc-tag{display:flex;align-items:center;gap:.5rem;font-size:.7rem;font-weight:700;letter-spacing:.11em; text-transform:uppercase;color:var(--muted);margin-bottom:.55rem} .fc-dot{width:8px;height:8px;border-radius:50%;background:var(--amber);box-shadow:0 0 8px var(--amber-glow)} .fc-dot--quiz{background:var(--violet);box-shadow:0 0 8px rgba(139,124,246,.5)} .fc-pergunta{font-family:var(--disp);font-weight:600;font-size:1.15rem;margin:0 0 .3rem;line-height:1.3} .fc-hint{color:var(--muted);font-size:.88rem;margin:0 0 .9rem} /* questão objetiva dentro do flashcard de revisão */ .fc-enunciado{margin-bottom:.75rem} .fc-enunciado p{margin:.2rem 0} .fc-opts{display:flex;flex-direction:column;gap:.45rem;margin-bottom:.35rem} .fc-opt{display:flex;align-items:baseline;gap:.6rem;text-align:left;width:100%; padding:.55rem .8rem;border:none;border-radius:8px;background:transparent; color:var(--text);font:inherit;font-size:.92rem;line-height:1.45;cursor:pointer;transition:.15s} .fc-opt:hover:not(:disabled){background:rgba(45,212,191,.07)} .fc-opt:disabled{cursor:default;opacity:.75} .fc-opt-letra{font-family:var(--disp);font-weight:700;font-size:.8rem;color:var(--muted);flex:none} .fc-opt.certa{background:rgba(52,211,153,.1);opacity:1} .fc-opt.certa .fc-opt-letra{color:var(--green)} .fc-opt.errada{background:rgba(248,113,113,.09);opacity:1} .fc-opt.errada .fc-opt-letra{color:var(--red)} .fc-resultado{margin:0 0 .5rem;font-size:.95rem} .fc-verso{border-top:1px solid var(--line);padding-top:.9rem;margin-top:.2rem} .fc-resumo{color:var(--text);font-size:.94rem;margin:0 0 .6rem} .fc-topicos{margin:0 0 1rem;padding-left:1.2rem;color:var(--muted);font-size:.88rem} .fc-topicos li{margin:.2rem 0} .fc-acoes{display:flex;gap:.6rem;flex-wrap:wrap} .fc-feito{font-size:.94rem;color:var(--muted);border-top:1px solid var(--line);padding-top:.9rem} .fc-feito strong{color:var(--teal)} .flashcard.respondido{border-color:rgba(52,211,153,.35)} /* ========================================================================= Caixa "!!! quiz" — pergunta com resposta oculta (toque para revelar). ========================================================================= */ .markdown-body .admonition.quiz{border-left-color:var(--pink)} .markdown-body .admonition.quiz .admonition-title{color:var(--pink);font-size:.95rem; text-transform:none;letter-spacing:0;font-weight:600;line-height:1.45} .quiz-reveal{display:block;width:100%;margin-top:.3rem;padding:.6rem .9rem;border-radius:10px;cursor:pointer; border:1px dashed rgba(244,114,182,.45);background:rgba(244,114,182,.06);color:var(--pink); font:600 .85rem var(--sans);transition:.15s} .quiz-reveal:hover{background:rgba(244,114,182,.12)} .admonition.quiz .quiz-body{display:none} .admonition.quiz.revelado .quiz-body{display:block;animation:quiz-in .25s ease} @keyframes quiz-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} /* ---- salvar card (marcador no leitor) ----------------------------------- */ .sc-save{display:none} .mode-cards .story-card .sc-save{display:grid;place-items:center; align-self:flex-end;margin:0 0 .4rem;width:36px;height:36px;border-radius:50%;cursor:pointer;flex:none; border:1px solid var(--line-2);background:color-mix(in srgb,var(--panel) 80%,transparent); color:var(--dim);transition:.15s} .mode-cards .story-card .sc-save:hover{color:var(--amber);border-color:var(--amber);background:color-mix(in srgb,var(--amber) 15%,var(--panel))} .mode-cards .story-card .sc-save.on{background:var(--amber);color:#fff;border-color:var(--amber);box-shadow:0 0 18px var(--amber-glow)} .mode-cards .story-card .sc-save.on .ic{fill:#fff;color:#fff} .sc-save .ic{width:17px;height:17px} /* ---- página de salvos ---------------------------------------------------- */ .salvos-grupo{margin-top:2rem} .salvos-trilha{display:flex;align-items:center;gap:.6rem;font-family:var(--disp);font-size:1.1rem; font-weight:700;margin:0 0 .9rem;padding-bottom:.6rem;border-bottom:1px solid var(--line)} .saved-card{position:relative;padding:1.1rem 1.3rem;margin-bottom:.9rem} .saved-meta{display:flex;justify-content:space-between;gap:.8rem;flex-wrap:wrap; font-size:.78rem;color:var(--dim);margin-bottom:.7rem} .saved-meta a{color:var(--teal)} .saved-body{font-size:.96rem} .saved-remove{display:inline-flex;align-items:center;gap:.4rem;margin-top:.8rem;padding:.35rem .7rem; border:1px solid var(--line-2);border-radius:9px;background:transparent;color:var(--muted); font:600 .78rem var(--sans);cursor:pointer;transition:.15s} .saved-remove:hover{border-color:var(--red);color:var(--red)} .saved-remove .ic{width:14px;height:14px} /* ---- revisão em deck ------------------------------------------------------ */ .mode-cards .rev-lista-acoes{display:none} .mode-artigo .rev-deck .story-card+.story-card{margin-top:1rem} .mode-cards .rev-deck .story-card{max-height:none;min-height:0} .rev-deck .opts{gap:.25rem} .rev-deck .opt{border:0;border-radius:8px;background:transparent;padding:.58rem .2rem .58rem 0} .rev-deck .opt:hover{border-color:transparent;background:color-mix(in srgb,var(--teal) 7%,transparent)} .rev-deck .opt:focus-within{box-shadow:inset 3px 0 0 var(--teal)} .rev-deck .opt.correct{border-color:transparent;background:transparent;color:var(--ok-ink);box-shadow:inset 3px 0 0 var(--green)} .rev-deck .opt.wrong{border-color:transparent;background:transparent;color:var(--no-ink);box-shadow:inset 3px 0 0 var(--pink)} .rev-deck .opt.descartada{background:transparent;border-color:transparent;box-shadow:none} /* ========================================================================= Modernização: movimento, profundidade e micro-interações. ========================================================================= */ /* Transição nativa entre páginas (app-like; só quando o navegador suporta). */ @media(prefers-reduced-motion:no-preference){ @view-transition{navigation:auto} ::view-transition-old(root){animation-duration:.16s} ::view-transition-new(root){animation-duration:.22s} } /* Header fixo com vidro fosco — a navegação está sempre à mão. */ .site-header{position:sticky;top:0;z-index:70; background:color-mix(in srgb,var(--header-bg) 80%,transparent); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)} [id]{scroll-margin-top:92px} /* Seleção de texto e scrollbars na identidade do app. */ ::selection{background:rgba(45,212,191,.3)} *{scrollbar-width:thin;scrollbar-color:var(--line-2) transparent} *::-webkit-scrollbar{width:10px;height:10px} *::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px} *::-webkit-scrollbar-track{background:transparent} /* Botões com resposta tátil e brilho interno no primário. */ .btn:active{transform:scale(.97)} .btn-primary{box-shadow:0 0 24px var(--teal-glow),inset 0 1px 0 rgba(255,255,255,.28)} .btn-mentor{box-shadow:0 0 22px rgba(139,124,246,.4),inset 0 1px 0 rgba(255,255,255,.25)} input:focus,textarea:focus,select:focus{box-shadow:0 0 0 3px var(--teal-glow)} /* Entrada suave do conteúdo principal do dashboard (escalonada). */ @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} .continue-hero,.medal-case,.feed-hoje .flashcard,.trilha-grid>*{animation:rise .5s cubic-bezier(.2,.7,.3,1) both} .trilha-grid>*:nth-child(1){animation-delay:.03s} .trilha-grid>*:nth-child(2){animation-delay:.08s} .trilha-grid>*:nth-child(3){animation-delay:.13s} .trilha-grid>*:nth-child(4){animation-delay:.18s} .trilha-grid>*:nth-child(5){animation-delay:.23s} .trilha-grid>*:nth-child(n+6){animation-delay:.28s} .feed-hoje .flashcard:nth-child(n+2){animation-delay:.1s} /* Cards de trilha: título acende e a fração ganha destaque no hover. */ .trilha-card:hover .tc-title{color:var(--teal)} .trilha-card .tc-frac{transition:color .2s} .trilha-card:hover .tc-frac{color:var(--teal)} /* Barra de XP com brilho vivo (sensação de progresso contínuo). */ .xp-bar{position:relative} .xp-bar>i{position:relative;overflow:hidden} .xp-bar>i::after{content:"";position:absolute;inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent); animation:xp-sheen 2.8s ease-in-out infinite} @keyframes xp-sheen{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}} /* Conteúdo largo nunca estoura a tela (mobile). */ .markdown-body table{display:block;overflow-x:auto} .markdown-body .codehilite pre,.markdown-body pre{overflow-x:auto} /* Ações da home confortáveis no toque. */ @media(max-width:560px){ .home-actions{width:100%} .home-actions .btn{white-space:normal;line-height:1.2} } /* Botão de aparência um pouco mais visível. */ .reader-fab-btn{opacity:.6} /* ========================================================================= Leitor imersivo (stories em tela cheia) — modo Cards do leitor de tópico. Escopo `.reader` para não afetar o deck da revisão (que fica em página). ========================================================================= */ .story-frame{display:flex;flex-direction:column;min-width:0} /* No modo Cards: o leitor vira um overlay que toma a tela inteira. */ .reader.mode-cards .topico-progress, .reader.mode-cards .reader-doc-head, .reader.mode-cards .topico-nav{display:none} body:has(.reader.mode-cards){overflow:hidden} body:has(.reader.mode-cards) .reader-fab{z-index:82} /* Com o painel de dúvidas aberto a coluna inteira sobe: em 60 o painel ficaria atrás do header (70) e dos avisos (110), e no celular ele ocupa a tela toda. Fica depois da regra do leitor de propósito: as duas têm a mesma especificidade, então quem vem por último vence. */ body:has(.chat-panel:not([hidden])) .reader-fab{z-index:115} .reader.mode-cards .story-shell{ position:fixed;inset:0;z-index:80;display:flex; background: radial-gradient(1200px 620px at 82% -10%,rgba(139,124,246,.16),transparent), radial-gradient(900px 520px at -8% 0,rgba(45,212,191,.12),transparent), var(--bg)} .reader.mode-cards .story-frame{flex:1;min-height:0;width:100%;margin:0 auto} /* Desktop: moldura central "tipo Instagram web" sobre um fundo esmaecido. */ @media(min-width:821px){ .reader.mode-cards .story-shell{background:rgba(3,6,14,.74); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:24px} .reader.mode-cards .story-frame{max-width:460px;height:min(900px,calc(100vh - 48px)); margin:auto;border-radius:26px;overflow:hidden;border:1px solid var(--line-2); box-shadow:0 40px 120px rgba(0,0,0,.6); background:radial-gradient(900px 520px at 82% -10%,rgba(139,124,246,.14),transparent),var(--panel)} } /* Barra superior: fechar · identidade · alternador · progresso segmentado. */ .story-topbar{flex:none;display:flex;flex-direction:column;gap:.7rem; padding:calc(.7rem + env(safe-area-inset-top)) 1rem .1rem} .story-topbar-row{display:flex;align-items:center;gap:.75rem} .story-close{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none; border:1px solid var(--line-2);color:var(--text);background:transparent;font-size:.95rem;line-height:1;transition:.15s} .story-close:hover{border-color:var(--red);color:var(--red)} .story-id{flex:1;min-width:0;display:flex;flex-direction:column;gap:.06rem} .story-id-kicker{font-size:.64rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--teal)} .story-id-title{font-family:var(--disp);font-weight:600;font-size:.94rem;color:var(--text); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .story-topbar-progress{align-items:center} /* Palco: um card por vez, ocupando todo o espaço entre topo e rodapé. */ .reader.mode-cards .story-stage{flex:1;min-height:0;position:relative;display:flex;overflow:hidden} .reader.mode-cards .story-card{position:absolute;inset:0;display:none;flex-direction:column; overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch; padding:clamp(20px,5.2vw,42px) clamp(20px,5.6vw,46px) clamp(26px,7vw,46px); background:transparent;border:0;border-radius:0;box-shadow:none;min-height:0;max-height:none} .reader.mode-cards .story-card.on{display:flex;animation:card-in .32s cubic-bezier(.2,.7,.3,1)} .reader.mode-cards .story-stage[data-dir="back"] .story-card.on{animation-name:card-back} .reader.mode-cards .story-card--fim.on{display:flex} .reader.mode-cards .sc-in{margin:auto 0;width:100%;font-size:1.07rem;line-height:1.68} .reader.mode-cards .sc-save{position:static;margin:0 0 .3rem;align-self:flex-end} /* Rodapé: setas de navegação (também no toque) + arrasto lateral (deck.js). Sem zonas de toque sobre o conteúdo, para não colidir com botões e links. */ .reader.mode-cards .story-foot{flex:none;display:flex;justify-content:center;gap:1.4rem;margin:0; padding:.3rem 1rem calc(1rem + env(safe-area-inset-bottom))} .reader.mode-cards .story-tap{display:none} /* Modo Artigo: leitura corrida, sem overlay — a barra some e volta o documento. O leitor ignora o `.narrow` (640px) e usa a largura padrão da página — a mesma do cabeçalho, da marca ao botão "Sair" —, para que aumentar o corpo do texto ganhe espaço de verdade em vez de apertar a coluna do meio. */ .reader.mode-artigo{max-width:none} .reader.mode-artigo .story-shell{position:static;background:none;padding:0} .reader.mode-artigo .story-frame{max-width:none;height:auto;border:0;border-radius:0;box-shadow:none;background:none} .reader.mode-artigo .story-close, .reader.mode-artigo .story-id, .reader.mode-artigo .story-topbar-progress{display:none} .reader.mode-artigo .story-topbar{padding:0;margin:.4rem 0 1.4rem} .reader.mode-artigo .story-topbar-row{justify-content:flex-end} .reader.mode-artigo .story-stage{overflow:visible} .reader.mode-artigo .story-tap{display:none} .reader.mode-artigo .story-card+.story-card{margin-top:1.6rem} /* ========================================================================= Capa-constelação dos cards de trilha: um mini-mapa gerado por trilha (nós = níveis; acesos = aprovados; linha pontilhada = a trilha). Cores via --ch (matiz própria de cada trilha), sensíveis ao tema. ========================================================================= */ .tc-cover{position:relative;height:155px;margin:-22px -24px 16px;overflow:hidden; border-radius:calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0; border-bottom:1px solid var(--line); background:radial-gradient(150px 70px at 80% -8%,hsl(calc(var(--ch) + 40) 70% 32% / .4),transparent), linear-gradient(140deg,hsl(var(--ch) 45% 17%),hsl(calc(var(--ch) + 55) 50% 11%))} .tc-cover svg{position:absolute;inset:0;width:100%;height:100%;display:block} .tc-cover .trail{fill:none;stroke:hsl(var(--ch) 70% 62% / .5);stroke-width:1; stroke-dasharray:2.5 3.5;stroke-linecap:round} .tc-cover circle{fill:hsl(var(--ch) 30% 24%);stroke:hsl(var(--ch) 65% 58% / .8);stroke-width:1} .tc-cover circle.done{fill:hsl(var(--ch) 82% 62%);stroke:none; filter:drop-shadow(0 0 3px hsl(var(--ch) 82% 60% / .9))} .tc-cover circle.speck{fill:hsl(var(--ch) 60% 72% / .3);stroke:none} /* card com foto real: na proporção NATURAL da foto (a Pexels entrega w=940&h=650 sem fit=crop, ou seja, cada foto vem numa razão diferente — um aspect-ratio fixo cortava as laterais das mais largas). O max-height só apara o que realmente não cabe (fotos quase quadradas/retrato). */ .tc-cover--photo{border-bottom:0;height:155px} .tc-cover--photo img{display:block;width:100%;height:100%;object-fit:cover;max-height:none; object-position:center} .tc-cover--photo svg{display:none} :root[data-theme="claro"] .tc-cover,:root[data-theme="papel"] .tc-cover{ background:radial-gradient(150px 70px at 80% -8%,hsl(calc(var(--ch) + 40) 70% 82% / .5),transparent), linear-gradient(140deg,hsl(var(--ch) 60% 92%),hsl(calc(var(--ch) + 55) 50% 84%))} :root[data-theme="claro"] .tc-cover .trail,:root[data-theme="papel"] .tc-cover .trail{ stroke:hsl(var(--ch) 55% 40% / .55)} :root[data-theme="claro"] .tc-cover circle,:root[data-theme="papel"] .tc-cover circle{ fill:hsl(var(--ch) 45% 88%);stroke:hsl(var(--ch) 55% 42% / .8)} :root[data-theme="claro"] .tc-cover circle.done,:root[data-theme="papel"] .tc-cover circle.done{ fill:hsl(var(--ch) 70% 40%);filter:none} :root[data-theme="claro"] .tc-cover circle.speck,:root[data-theme="papel"] .tc-cover circle.speck{ fill:hsl(var(--ch) 50% 35% / .25)} /* Blocos de código continuam escuros nos temas claros (padrão deliberado); borda para definição sobre fundo claro. */ :root[data-theme="claro"] .markdown-body .codehilite, :root[data-theme="papel"] .markdown-body .codehilite{border:1px solid rgba(17,24,45,.18)} .markdown-body .codehilite{border-radius:12px} .markdown-body .codehilite pre{margin:0;padding:.9rem 1.1rem} /* Chips de patamar legíveis nos temas claros. */ :root[data-theme="claro"] .title-chip--prata,:root[data-theme="papel"] .title-chip--prata{color:#5d6b7c} :root[data-theme="claro"] .title-chip--platina,:root[data-theme="papel"] .title-chip--platina{color:#53708a} :root[data-theme="claro"] .title-chip--diamante,:root[data-theme="papel"] .title-chip--diamante{color:#147a94} :root[data-theme="claro"] .title-chip--ouro,:root[data-theme="papel"] .title-chip--ouro{color:#8a6a12} :root[data-theme="claro"] .title-chip--bronze,:root[data-theme="papel"] .title-chip--bronze{color:#8a5a26} /* Ícones do sprite dentro dos componentes pequenos. */ .ex-tag .spark .ic{width:13px;height:13px} .ti-num .ic{width:15px;height:15px} .fim-badge .ic{width:26px;height:26px} .etapa-lock .ic{width:.95em;height:.95em;vertical-align:-.12em} /* ========================================================================= Sem rolagem horizontal no conteúdo (mobile): código quebra linha e tabelas empilham como fichas rótulo→valor. ========================================================================= */ @media(max-width:820px){ .markdown-body pre,.markdown-body .codehilite pre{white-space:pre-wrap;word-break:break-word} .markdown-body table{display:block;width:100%;max-width:100%;border:0;margin:1rem 0; overflow-x:hidden;table-layout:fixed} .markdown-body thead{display:none} .markdown-body tbody{display:block;width:100%;max-width:100%} .markdown-body tbody tr{display:block;width:100%;max-width:100%;margin:.75rem 0;padding:.2rem .9rem; border:1px solid var(--line-2);border-radius:12px;background:var(--glass-a);overflow:hidden} .markdown-body tbody td{display:flex;gap:.8rem;align-items:baseline;min-width:0;max-width:100%; border:0;border-top:1px solid var(--line);padding:.55rem 0;text-align:left; overflow-wrap:anywhere;word-break:break-word} .markdown-body tbody td:first-child{border-top:0} .markdown-body tbody td::before{content:attr(data-label);flex:0 0 40%;min-width:6.5rem;max-width:40%; font-weight:600;font-size:.78rem;color:var(--muted);overflow-wrap:anywhere} .markdown-body tbody td:not([data-label])::before, .markdown-body tbody td[data-label=""]::before{display:none} } /* Ampliar diagrama: botão no canto + visualizador em tela cheia. Quando o botão existe, o contêiner abre uma faixa no topo para ele — senão ele fica por cima do primeiro nó e esconde o rótulo (some justo nos diagramas reduzidos no celular, que são os que mais precisam do botão). */ .markdown-body .mermaid:has(.mermaid-expand){padding-top:3rem} .mermaid-expand{position:absolute;right:8px;top:8px;z-index:3;width:34px;height:34px;border-radius:50%; display:grid;place-items:center;border:1px solid var(--line-2);cursor:pointer; background:var(--panel);color:var(--muted);transition:.15s} .mermaid-expand:hover{color:var(--teal);border-color:var(--teal)} .mermaid-expand .ic{width:16px;height:16px} .diagram-modal{position:fixed;inset:0;z-index:130;display:flex;flex-direction:column; background:color-mix(in srgb,var(--bg) 93%,transparent);backdrop-filter:blur(8px)} .dm-top{display:flex;justify-content:flex-end;flex:none; padding:calc(.7rem + env(safe-area-inset-top)) .9rem .4rem} .dm-close{width:38px;height:38px;border-radius:50%;display:grid;place-items:center; border:1px solid var(--line-2);background:var(--panel);color:var(--text); font-size:1rem;line-height:1;cursor:pointer} .dm-close:hover{border-color:var(--red);color:var(--red)} .dm-body{flex:1;display:flex;overflow:auto;padding:0 1.2rem 1.6rem} .dm-body svg{margin:auto;max-width:none;flex:none} .dm-hint{flex:none;text-align:center;color:var(--dim);font-size:.78rem; padding:0 1rem calc(.8rem + env(safe-area-inset-bottom))} /* ---- capa de trilha ------------------------------------------------------ */ /* Foto em faixa full-bleed que se dissolve (mask) no fundo da página — sem overlay escuro nem texto branco com sombra: o título vive no plano da página, sobre o próprio tema, legível em qualquer um dos 4 temas. */ html{overflow-x:clip} /* o full-bleed usa 100vw; nunca gera rolagem lateral */ /* A foto aparece INTEIRA (contain), centrada na faixa; as laterais são a própria foto desfocada, então nada é cortado e a faixa segue full-bleed. */ .trilha-hero{ position:relative;overflow:hidden; height:clamp(120px,16vw,180px); margin:-34px calc(50% - 50vw) 0; /* -34px = padding-top de .page */ -webkit-mask-image:linear-gradient(to bottom,#000 30%,rgba(0,0,0,.4) 60%,rgba(0,0,0,.08) 82%,transparent 96%); mask-image:linear-gradient(to bottom,#000 30%,rgba(0,0,0,.4) 60%,rgba(0,0,0,.08) 82%,transparent 96%); } .trilha-hero-blur{position:absolute;inset:0;background-size:cover;background-position:center; filter:blur(24px) saturate(1.1);transform:scale(1.12);opacity:.45} .trilha-hero-foto{position:absolute;inset:0;background-size:cover; background-position:center;background-repeat:no-repeat} .trilha-head{position:relative;margin:0 0 2rem} /* O título entra na zona final da máscara, onde a foto já está ≤12% visível: a composição fica entrelaçada com a imagem sem texto ilegível sobre foto. */ .trilha-head.com-foto{margin-top:clamp(-20px,-2vw,-8px)} .trilha-kicker{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-bottom:.85rem} .trilha-emblema{display:grid;place-items:center;width:46px;height:46px;border-radius:13px; font-size:1.4rem;background:linear-gradient(180deg,var(--glass-a),var(--glass-b)); border:1px solid var(--line);backdrop-filter:blur(8px);box-shadow:0 6px 18px rgba(0,0,0,.22)} .trilha-cat{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--teal)} .trilha-titulo{font-size:clamp(1.9rem,3.4vw + .9rem,3.1rem);font-weight:800; letter-spacing:-.028em;line-height:1.05;margin:0;max-width:22ch;text-wrap:balance} .trilha-fio{display:block;width:58px;height:4px;border-radius:99px;margin:.9rem 0 .95rem; background:linear-gradient(90deg,var(--teal),var(--amber))} .trilha-desc{max-width:68ch;margin:0} .trilha-head .inline-actions{margin-top:.35rem} @media(max-width:600px){ .trilha-hero{height:clamp(100px,28vw,150px)} .trilha-head.com-foto{margin-top:-10px} } /* ---- polimentos gerais -------------------------------------------------- */ .h1{font-size:clamp(1.65rem,3.2vw + .85rem,2.5rem)} @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}} /* ========================================================================= DOCUMENTOS LEGAIS E ACEITE (app `legal`) O texto vem do banco, renderizado de Markdown: não há classes por elemento, então a tipografia é resolvida por seletores de descendência dentro de .legal-corpo. Três decisões sustentam a legibilidade: 1. Medida travada em 66ch. Texto jurídico em linha de 1100px é punitivo. 2. Seções numeradas por contador CSS. Numeração aqui não é enfeite: cláusula de documento legal é citável ("item 3"), e a ordem carrega informação. 3. Faixa de registro (versão · vigência · impressão do texto). O sha256 é o mesmo gravado no aceite — mostrá-lo é o que deixa a prova verificável. O corpo abaixo é idêntico entre os projetos: só usa variáveis --legal-*, definidas na ponte logo a seguir a partir dos tokens de cada app. ========================================================================= */ :root { --legal-surface: var(--panel); --legal-painel: var(--panel-2); --legal-line: var(--line); --legal-line-forte: var(--line-2); --legal-t900: var(--text); --legal-t700: var(--muted); --legal-t500: var(--dim); --legal-accent: var(--teal); --legal-accent-forte: var(--teal-2); --legal-danger: var(--red); --legal-warn: var(--amber); --legal-raio-lg: var(--radius); --legal-raio-md: var(--radius-sm); --legal-raio-sm: var(--radius-xs); } .legal-page { --legal-medida: 66ch; max-width: 52rem; margin: 0 auto; padding: 2rem 1.25rem 4rem; } .legal-doc { background: var(--legal-surface); border: 1px solid var(--legal-line); border-radius: var(--legal-raio-lg); padding: clamp(1.5rem, 5vw, 3rem); } /* -- Cabeçalho ----------------------------------------------------------- */ .legal-eyebrow { font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--legal-accent-forte); margin: 0 0 .5rem; } .legal-doc-header h1 { margin: 0; font-size: clamp(1.75rem, 4vw, 2.25rem); line-height: 1.15; letter-spacing: -.02em; } .legal-lead { max-width: var(--legal-medida); margin: .875rem 0 0; font-size: 1.0625rem; line-height: 1.6; color: var(--legal-t700); } /* Faixa de registro: identidade do documento, em fonte de dados. */ .registro { display: flex; flex-wrap: wrap; gap: .75rem 2rem; margin: 1.5rem 0 0; padding: .75rem 0 0; border-top: 1px solid var(--legal-line); } .registro-item { margin: 0; } /* Rótulo de 11px em caixa alta: precisa de 4.5:1, que o t500 não alcança em nenhum dos quatro temas (3.8 a 4.1). Sobe um degrau na escala. */ .registro dt { font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--legal-t700); margin: 0 0 .125rem; } .registro dd { margin: 0; font-size: .875rem; font-variant-numeric: tabular-nums; color: var(--legal-t900); } .registro code { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; font-size: .8125rem; color: var(--legal-t700); word-break: break-all; } /* -- Corpo do documento -------------------------------------------------- */ .legal-corpo { counter-reset: clausula; max-width: var(--legal-medida); margin-top: 2.5rem; font-size: 1rem; line-height: 1.75; color: var(--legal-t700); } .legal-corpo > :first-child { margin-top: 0; } .legal-corpo p { margin: 0 0 1.125rem; } .legal-corpo h2 { counter-increment: clausula; position: relative; margin: 2.75rem 0 .875rem; padding-top: 1.25rem; border-top: 1px solid var(--legal-line); font-size: 1.0625rem; line-height: 1.35; letter-spacing: -.01em; color: var(--legal-t900); } /* O número fica pendurado na margem em telas largas e some no mobile, onde não há margem sobrando. */ .legal-corpo h2::before { content: counter(clausula); position: absolute; left: -2.75rem; top: 1.3rem; font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; font-size: .8125rem; font-weight: 500; color: var(--legal-t500); } .legal-corpo h3 { margin: 1.75rem 0 .5rem; font-size: .9375rem; color: var(--legal-t900); } .legal-corpo ul, .legal-corpo ol { margin: 0 0 1.125rem; padding-left: 1.25rem; } .legal-corpo li { margin-bottom: .5rem; } .legal-corpo li::marker { color: var(--legal-t500); } .legal-corpo strong { color: var(--legal-t900); font-weight: 600; } .legal-corpo table { width: 100%; border-collapse: collapse; margin: 0 0 1.125rem; font-size: .9375rem; } .legal-corpo th, .legal-corpo td { text-align: left; padding: .5rem .75rem; border-bottom: 1px solid var(--legal-line); } @media (min-width: 60rem) { .legal-corpo { margin-left: 2.75rem; } } /* -- Aviso de versão arquivada ------------------------------------------- */ .legal-aviso { margin: 1.5rem 0 0; padding: .75rem 1rem; border: 1px solid var(--legal-line); border-left: 3px solid var(--legal-warn); border-radius: var(--legal-raio-sm); background: var(--legal-painel); font-size: .9375rem; color: var(--legal-t700); } /* -- Rodapé do documento ------------------------------------------------- */ .legal-doc-rodape { margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--legal-line); } .legal-atalhos { display: flex; flex-wrap: wrap; gap: 1.25rem; font-size: .9375rem; } .legal-historico { margin-top: 1.25rem; font-size: .875rem; } .legal-historico summary { cursor: pointer; color: var(--legal-t500); padding: .25rem 0; } .legal-historico ul { margin: .75rem 0 0; padding: 0; list-style: none; } .legal-historico li { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-top: 1px solid var(--legal-line); } .legal-historico li span { color: var(--legal-t500); } /* -- Portão de aceite (visitante e re-aceite) ---------------------------- */ .legal-resumo { margin: 2rem 0 0; padding: 0; list-style: none; display: grid; gap: .75rem; } .legal-resumo li { max-width: var(--legal-medida); padding-left: 1rem; border-left: 2px solid var(--legal-accent); font-size: .9375rem; line-height: 1.6; color: var(--legal-t700); } .legal-resumo strong { display: block; color: var(--legal-t900); } /* O texto cortando na borda inferior, sem pista visual, lê-se como conteúdo truncado — o degradê e a barra sempre visível são o que dizem "continua". */ .legal-painel { position: relative; margin-top: 2rem; border: 1px solid var(--legal-line); border-radius: var(--legal-raio-md); overflow: hidden; } .legal-painel::after { content: ""; position: absolute; left: 1px; right: 1px; bottom: 1px; height: 3rem; pointer-events: none; background: linear-gradient(to top, var(--legal-surface), transparent); border-radius: 0 0 var(--legal-raio-md) var(--legal-raio-md); } .legal-painel-topo { padding: 1rem 1.25rem; background: var(--legal-painel); border-bottom: 1px solid var(--legal-line); } .legal-painel-topo h2 { margin: 0; font-size: 1rem; } .legal-painel-topo .registro { margin-top: .625rem; padding-top: .625rem; } .legal-corpo--rolagem { max-width: none; margin: 0; padding: 1.25rem; max-height: 22rem; overflow-y: auto; font-size: .9375rem; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: var(--legal-line-forte) transparent; } .legal-corpo--rolagem::-webkit-scrollbar { width: 10px; } .legal-corpo--rolagem::-webkit-scrollbar-thumb { background: var(--legal-line-forte); border: 3px solid var(--legal-surface); border-radius: 6px; } /* Espaço extra no fim, para a última linha não ficar sob o degradê. */ .legal-corpo--rolagem > :last-child { margin-bottom: 2rem; } @media (min-width: 60rem) { .legal-corpo--rolagem { margin-left: 0; } } .legal-corpo--rolagem h2 { margin-top: 1.75rem; padding-top: .875rem; font-size: .9375rem; } .legal-corpo--rolagem h2::before { display: none; } .legal-corpo--rolagem:focus-visible { outline: 2px solid var(--legal-accent); outline-offset: -2px; } /* -- Confirmação --------------------------------------------------------- */ .legal-acao { margin-top: 2rem; } .confirmacao { border: 1px solid var(--legal-line); border-radius: var(--legal-raio-md); background: var(--legal-painel); transition: border-color .15s ease, background-color .15s ease; } /* O estado marcado precisa ser visível à distância: é o gesto que vira prova. */ .confirmacao:has(input:checked) { border-color: var(--legal-accent); background: color-mix(in srgb, var(--legal-accent) 6%, transparent); } .confirmacao:has(input:focus-visible) { outline: 2px solid var(--legal-accent); outline-offset: 2px; } .confirmacao-alvo { display: flex; align-items: flex-start; gap: .75rem; padding: 1rem 1.25rem; cursor: pointer; } .confirmacao-alvo input[type="checkbox"] { width: 1.125rem; height: 1.125rem; margin: .125rem 0 0; flex: 0 0 auto; accent-color: var(--legal-accent); cursor: pointer; } .confirmacao-texto { font-size: .9375rem; line-height: 1.55; color: var(--legal-t900); } .confirmacao--erro { border-color: var(--legal-danger); } .confirmacao-msg { margin: 0; padding: 0 1.25rem 1rem; font-size: .8125rem; color: var(--legal-danger); } .legal-acao-botoes { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 1.25rem; } .btn-quiet { background: none; border: 1px solid var(--legal-line); color: var(--legal-t700); } .legal-recusa { margin-top: 1.5rem; font-size: .875rem; color: var(--legal-t500); } .legal-recusa p { margin: 0; } /* Botão que se apresenta como link (recusar sem aceitar). O onclick inline seria bloqueado pela CSP, então a recusa é um submit de verdade. */ .link-button { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-decoration: underline; } /* -- Cor de link -------------------------------------------------------- Onde o app define `a { color: inherit }` num seletor com classe, estes precisam de força equivalente para vencer. */ .legal-corpo a, .legal-atalhos a, .legal-aviso a, .legal-historico a, .confirmacao-texto a, .legal-page .link-button { color: var(--legal-accent-forte); } .legal-corpo a:hover, .legal-atalhos a:hover, .confirmacao-texto a:hover { color: var(--legal-accent); } @media (prefers-reduced-motion: reduce) { .confirmacao { transition: none; } }