:root {
  --fucsia: #E5006D; --fucsia-os: #b30056; --cian: #00BCD4; --amarillo: #FFD54F; --fondo: #FDF7FA;
}
body { font-family: 'Nunito', sans-serif; background: var(--fondo); margin: 0; color: #2D3436; }
header { background: linear-gradient(135deg, var(--fucsia), var(--fucsia-os)); color: white; padding: 15px; position: sticky; top: 0; z-index: 1000; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
.logo { font-family: 'Fredoka', sans-serif; font-size: 1.3rem; font-weight: bold; display: flex; align-items: center; gap: 8px; color: white; text-decoration: none; }
.logo-num { background: white; color: var(--fucsia); width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; }
.container { max-width: 900px; margin: 25px auto; padding: 0 15px; }
.card { background: white; border-radius: 20px; padding: 25px; box-shadow: 0 8px 20px rgba(0,0,0,0.05); margin-bottom: 20px; border-bottom: 4px solid #eee; }
.btn-rol { background: white; border-radius: 25px; padding: 30px; text-align: center; text-decoration: none; color: inherit; box-shadow: 0 8px 20px rgba(0,0,0,0.06); transition: 0.3s; border-top: 8px solid var(--fucsia); display: block; }
.btn-rol:hover { transform: translateY(-8px); box-shadow: 0 15px 35px rgba(229,0,109,0.15); }
.btn-mec { background: var(--fucsia); color: white; border: none; padding: 15px 25px; border-radius: 40px; font-weight: 800; cursor: pointer; box-shadow: 0 4px 0 var(--fucsia-os); font-family: 'Fredoka'; width: 100%; font-size: 1.1rem; }
.clase-item { background: white; border: 1px solid #eee; border-radius: 15px; padding: 15px; text-decoration: none; color: inherit; display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.clase-num { background: var(--fucsia); color: white; width: 35px; height: 35px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: bold; flex-shrink: 0; }
.tabs { display: flex; background: white; border-bottom: 2px solid #eee; border-radius: 15px 15px 0 0; overflow: hidden; }
.tab-btn { flex: 1; padding: 15px; border: none; background: none; font-weight: bold; cursor: pointer; color: #888; border-bottom: 4px solid transparent; font-family: 'Fredoka'; }
.tab-btn.active { color: var(--fucsia); border-bottom-color: var(--fucsia); background: #fff5f8; }
.tab-content { display: none; padding: 20px; background: white; border-radius: 0 0 15px 15px; }
.tab-content.active { display: block; }
.puntos-badge { position: fixed; bottom: 20px; right: 20px; background: white; padding: 10px 20px; border-radius: 50px; font-weight: bold; border: 2px solid var(--amarillo); z-index: 1000; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.input-ans { border: none; border-bottom: 3px solid var(--cian); width: 120px; text-align: center; font-weight: 800; font-size: 1.2rem; outline: none; }