/** * ESTILOS MÓDULOS ACADEMIA * Subir a: /modulos_academia.css (raíz, junto a app.html) * * Requiere agregar en app.html (cuando sea posible): * */ /* ============================================================ BADGE NOTIFICACIONES (inyectado por JS) ============================================================ */ #notif-badge-mg{ display:none; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; border-radius:99px; background:var(--warn, #E2664A); color:#fff; font-size:10px; font-weight:700; position:absolute; top:4px; right:4px; } /* ============================================================ BARRAS DE PROGRESO ============================================================ */ .mg-progress-bar{ height:8px; background:var(--bg, #0F1115); border-radius:99px; overflow:hidden; position:relative; } .mg-progress-bar .fill{ height:100%; border-radius:99px; transition:width 0.6s cubic-bezier(0.22, 1, 0.36, 1); background:var(--accent, #D4A857); } .mg-progress-bar .fill.complete{ background:var(--good, #3FB68B); } /* ============================================================ TARJETAS DE AVANCE ============================================================ */ .mg-avance-card{ display:flex; gap:16px; align-items:center; padding:16px 20px; } .mg-avance-card .pct{ font-family:var(--font-display, 'Space Grotesk', sans-serif); font-size:28px; font-weight:700; min-width:64px; text-align:center; } .mg-avance-card .pct.done{ color:var(--good, #3FB68B); } .mg-avance-card .pct.mid{ color:var(--accent, #D4A857); } .mg-avance-card .pct.low{ color:var(--data, #5B8DEF); } /* ============================================================ RANKING TABLE ============================================================ */ .mg-ranking-medal{ font-size:20px; display:inline-block; min-width:28px; text-align:center; } .mg-ranking-row-mine{ background:rgba(212,168,87,0.08) !important; border-left:3px solid var(--accent, #D4A857); } /* ============================================================ NOTIFICACIONES ============================================================ */ .mg-notif-unread{ border-left:3px solid var(--accent, #D4A857); } .mg-notif-dot{ width:8px; height:8px; border-radius:50%; background:var(--accent, #D4A857); flex-shrink:0; animation:mg-pulse 2s infinite; } @keyframes mg-pulse{ 0%, 100%{ opacity:1; } 50%{ opacity:0.4; } } /* ============================================================ CERTIFICADO MODAL ============================================================ */ .mg-cert-code{ font-family:var(--font-display, 'Space Grotesk', sans-serif); font-size:22px; font-weight:700; color:var(--accent, #D4A857); letter-spacing:0.05em; padding:12px; background:var(--bg, #0F1115); border:1px solid var(--line, #2A2F3A); border-radius:10px; text-align:center; } /* ============================================================ ANIMACIÓN DE ENTRADA PARA MÓDULOS INYECTADOS ============================================================ */ [data-view].active, .view.active{ animation:mg-fadein 0.3s cubic-bezier(0.22, 1, 0.36, 1); } @keyframes mg-fadein{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } } /* ============================================================ RESPONSIVE AJUSTES ============================================================ */ @media (max-width:600px){ .mg-avance-card{ flex-direction:column; align-items:flex-start; gap:10px; } .mg-avance-card .pct{ font-size:22px; } }