/* ============================================================
   MateVerso · Sistema de diseño compartido para UNIDADES
   ============================================================
   Extraído de la U1 de producción (idéntico, pixel a pixel).
   Lo cargan U2 en adelante con:
     <link rel="stylesheet" href="/shared/css/mateverso-unit.css">
   La U1 mantiene su CSS inline (no se toca para no arriesgar producción).
   El CSS específico de cada simulador va inline en cada unidad.
   ============================================================ */

/* ============================================================
   MATEVERSO · Sistema de diseño (paleta vibrante, inspirada en el portal MateRD)
   ============================================================ */
:root{
  --indigo-50:#EEF2FF;--indigo-100:#E0E7FF;--indigo-500:#6366F1;--indigo-600:#4F46E5;--indigo-700:#4338CA;
  --purple-50:#FAF5FF;--purple-500:#A855F7;--purple-600:#9333EA;--purple-700:#7E22CE;
  --pink-50:#FDF2F8;--pink-500:#EC4899;--pink-600:#DB2777;
  --amber-50:#FFFBEB;--amber-100:#FEF3C7;--amber-400:#FBBF24;--amber-500:#F59E0B;--amber-600:#D97706;--amber-700:#B45309;
  --emerald-50:#ECFDF5;--emerald-500:#10B981;--emerald-600:#059669;--emerald-700:#047857;
  --sky-50:#F0F9FF;--sky-100:#E0F2FE;--sky-500:#0EA5E9;--sky-600:#0284C7;--sky-700:#0369A1;
  --rose-50:#FFF1F2;--rose-500:#F43F5E;--rose-600:#E11D48;--rose-700:#BE123C;
  --orange-500:#F97316;
  --slate-50:#F8FAFC;--slate-100:#F1F5F9;--slate-200:#E2E8F0;--slate-300:#CBD5E1;--slate-400:#94A3B8;--slate-500:#64748B;--slate-600:#475569;--slate-700:#334155;--slate-800:#1E293B;--slate-900:#0F172A;
  --shadow-sm: 0 1px 2px rgba(15,23,42,0.04);
  --shadow-md: 0 4px 6px -1px rgba(15,23,42,0.06), 0 2px 4px -1px rgba(15,23,42,0.04);
  --shadow-xl: 0 20px 25px -5px rgba(15,23,42,0.08), 0 10px 10px -5px rgba(15,23,42,0.04);
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  color:var(--slate-800);
  line-height:1.6;
  min-height:100vh;
  background:linear-gradient(135deg,var(--indigo-50) 0%, var(--purple-50) 50%, var(--pink-50) 100%);
  overflow-x:hidden;
}
h1,h2,h3,h4{font-weight:800;color:var(--slate-900);letter-spacing:-0.02em;line-height:1.15;}
h1{font-size:clamp(1.9rem,4vw,2.5rem);}
h2{font-size:clamp(1.4rem,3vw,1.9rem);}
h3{font-size:clamp(1.15rem,2.2vw,1.4rem);font-weight:700;}
.mono{font-family:'JetBrains Mono',monospace;}

/* ============================================================
   TOPBAR
   ============================================================ */
.topbar{
  position:sticky;top:0;z-index:50;
  background:linear-gradient(90deg, var(--indigo-600), var(--purple-600), var(--pink-600));
  color:#fff;padding:0.85rem 1.2rem;
  box-shadow:0 4px 12px rgba(99,102,241,0.25);
}
.topbar-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;}
.brand{font-weight:900;font-size:1.5rem;display:flex;align-items:center;gap:0.4rem;letter-spacing:-0.02em;}
.brand .planet{display:inline-block;animation:planet-spin 12s linear infinite;}
@keyframes planet-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.brand small{font-weight:400;font-size:0.7rem;opacity:0.85;display:block;margin-top:-3px;letter-spacing:0.05em;}
.stats{display:flex;gap:0.7rem;align-items:center;flex-wrap:wrap;}
.stat{
  background:rgba(255,255,255,0.18);border:1px solid rgba(255,255,255,0.25);
  padding:0.4rem 0.9rem;border-radius:99px;font-size:0.85rem;font-weight:500;
  display:flex;align-items:center;gap:0.4rem;backdrop-filter:blur(10px);
}
.stat strong{color:#FEF3C7;font-weight:700;}
.xp-bar-mini{width:110px;height:7px;background:rgba(255,255,255,0.2);border-radius:99px;overflow:hidden;}
.xp-bar-mini > div{height:100%;background:linear-gradient(90deg,#FBBF24,#F97316);transition:width 0.6s ease;}

/* ============================================================
   HERO
   ============================================================ */
.hero{max-width:1100px;margin:2.5rem auto 1rem;padding:0 1.5rem;text-align:center;position:relative;}
.hero-tag{
  display:inline-flex;align-items:center;gap:0.4rem;
  background:linear-gradient(135deg,var(--indigo-600),var(--purple-600));
  color:#fff;padding:0.35rem 1rem;border-radius:99px;font-size:0.78rem;
  letter-spacing:0.1em;text-transform:uppercase;font-weight:700;margin-bottom:1rem;
  box-shadow:0 4px 12px rgba(99,102,241,0.3);
}
.hero h1{margin-bottom:0.6rem;}
.hero h1 em{font-style:italic;background:linear-gradient(135deg,var(--purple-600),var(--pink-600));-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800;}
.hero p{color:var(--slate-600);max-width:680px;margin:0 auto;font-size:1.02rem;line-height:1.65;}
.hero-deco{position:absolute;font-size:2.2rem;opacity:0.3;pointer-events:none;animation:float 6s ease-in-out infinite;}
.hero-deco.s1{top:0;left:5%;}.hero-deco.s2{top:30%;right:8%;animation-delay:-2s;}.hero-deco.s3{bottom:0;left:15%;animation-delay:-4s;}
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-15px) rotate(8deg)}}

/* ============================================================
   TOPICS NAV
   ============================================================ */
.topics-nav{max-width:1100px;margin:1.5rem auto;padding:0 1.5rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0.75rem;}
.topic-card{
  background:#fff;border:2px solid var(--slate-200);
  border-radius:18px;padding:1.1rem;cursor:pointer;transition:all 0.25s ease;
  text-align:left;position:relative;overflow:hidden;font-family:inherit;color:inherit;
  box-shadow:var(--shadow-sm);
}
.topic-card:hover{border-color:var(--indigo-500);transform:translateY(-3px);box-shadow:var(--shadow-md);}
.topic-card.active{
  border-color:transparent;
  background:linear-gradient(135deg,var(--indigo-600),var(--purple-600));color:#fff;
  box-shadow:0 8px 20px rgba(99,102,241,0.3);
}
.topic-card.completed{border-color:var(--emerald-500);background:linear-gradient(135deg,var(--emerald-50),#fff);}
.topic-card.attempted{border-color:var(--amber-500);background:linear-gradient(135deg,#FFFBEB,#fff);}
.topic-card.active.attempted,.topic-card.active.completed{background:linear-gradient(135deg,var(--indigo-600),var(--purple-600));border-color:transparent;}
.topic-card .num{font-size:1.9rem;font-weight:900;color:var(--indigo-500);line-height:1;letter-spacing:-0.03em;}
.topic-card.active .num{color:#FCD34D;}
.topic-card .title{font-size:0.93rem;font-weight:600;margin-top:0.3rem;line-height:1.3;}
.topic-card.completed::after{content:"✓";position:absolute;top:8px;right:10px;color:var(--emerald-600);font-weight:700;font-size:1.3rem;}
.topic-card.attempted::after{content:"◌";position:absolute;top:8px;right:10px;color:var(--amber-600);font-weight:700;font-size:1.2rem;}
.topic-score{margin-top:0.6rem;padding-top:0.55rem;border-top:1px dashed var(--slate-200);}
.topic-card.active .topic-score{border-top-color:rgba(255,255,255,0.25);}
.topic-score-num{font-size:1.6rem;font-weight:900;line-height:1;letter-spacing:-0.03em;}
.topic-score-num small{font-size:0.85rem;font-weight:700;opacity:0.7;}
.topic-score-label{font-size:0.73rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;margin-top:0.15rem;}
.topic-score.score-pass .topic-score-num,.topic-score.score-pass .topic-score-label{color:var(--emerald-600);}
.topic-score.score-pending .topic-score-num,.topic-score.score-pending .topic-score-label{color:var(--amber-600);}
.topic-score.topic-score-empty .topic-score-label{color:var(--slate-400);font-weight:500;text-transform:none;font-size:0.78rem;letter-spacing:0;font-style:italic;}
.topic-card.active .topic-score.score-pass .topic-score-num,.topic-card.active .topic-score.score-pass .topic-score-label,.topic-card.active .topic-score.score-pending .topic-score-num,.topic-card.active .topic-score.score-pending .topic-score-label,.topic-card.active .topic-score.topic-score-empty .topic-score-label{color:rgba(255,255,255,0.92);}

/* ============================================================
   TOPIC CONTENT
   ============================================================ */
.topic-content{display:none;max-width:1000px;margin:0 auto;padding:1.5rem;}
.topic-content.visible{display:block;animation:slide-up 0.5s ease;}
@keyframes slide-up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

.topic-header{
  background:linear-gradient(135deg,var(--indigo-600),var(--purple-600),var(--pink-600));
  color:#fff;border-radius:20px;padding:1.5rem 1.75rem;margin-bottom:1.2rem;
  box-shadow:0 8px 20px rgba(99,102,241,0.25);
}
.topic-header .label{color:rgba(255,255,255,0.85);font-size:0.8rem;letter-spacing:0.1em;text-transform:uppercase;font-weight:600;}
.topic-header h2{color:#fff;margin-top:0.25rem;}

/* Cards genéricas */
.card{
  background:#fff;border-radius:18px;padding:1.5rem;margin-bottom:1.1rem;
  box-shadow:var(--shadow-md);
}
.card-tag{
  display:inline-block;font-size:0.72rem;font-weight:700;
  text-transform:uppercase;letter-spacing:0.08em;
  padding:0.3rem 0.7rem;border-radius:99px;margin-bottom:0.7rem;
}
.card-title{
  font-size:1.2rem;font-weight:700;color:var(--slate-900);
  margin-bottom:0.8rem;display:flex;align-items:center;gap:0.6rem;
}

/* Idea Clave */
.idea-clave{
  background:linear-gradient(135deg,#FEF3C7,#FDE68A);
  border-left:5px solid var(--amber-500);border-radius:18px;
  padding:1.4rem 1.6rem;margin-bottom:1.1rem;
  box-shadow:var(--shadow-md);
}
.idea-clave .tag{color:var(--amber-700);font-size:0.78rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:0.45rem;display:flex;align-items:center;gap:0.4rem;}
.idea-clave h3{color:var(--slate-900);margin-bottom:0.5rem;font-size:1.25rem;}
.idea-clave p{color:var(--slate-700);font-size:1rem;line-height:1.6;}
.idea-clave p strong{color:var(--amber-700);}

/* Simulación */
.sim-card{
  background:#fff;border-radius:18px;padding:1.5rem;margin-bottom:1.1rem;
  box-shadow:var(--shadow-md);border-left:5px solid var(--indigo-500);
}
.sim-card .tag{color:var(--indigo-700);font-size:0.78rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:0.45rem;display:flex;align-items:center;gap:0.4rem;}
.sim-card h3{margin-bottom:0.4rem;}
.sim-instructions{
  background:linear-gradient(135deg,var(--sky-50),var(--indigo-50));
  border:1px solid var(--sky-100);border-radius:12px;
  padding:0.95rem 1.15rem;margin:0.8rem 0 1rem;font-size:0.9rem;
}
.sim-instructions-title{font-weight:700;color:var(--sky-700);margin-bottom:0.4rem;font-size:0.8rem;text-transform:uppercase;letter-spacing:0.05em;}
.sim-instructions ol{margin-left:1.3rem;color:var(--slate-700);}
.sim-instructions li{margin-bottom:0.25rem;}

.sim-frame{
  background:var(--slate-50);border:1px solid var(--slate-200);
  border-radius:14px;overflow:hidden;
}
.sim-iframe{width:100%;height:560px;border:0;display:block;background:#fff;}
.sim-svg{width:100%;height:auto;display:block;}
.sim-controls{
  padding:1rem 1.25rem;background:#fff;border-top:1px solid var(--slate-200);
  display:flex;flex-wrap:wrap;gap:0.8rem;align-items:center;
}
.sim-controls label{font-size:0.88rem;color:var(--slate-700);font-weight:600;}
.sim-controls input[type=number], .sim-controls input[type=range], .sim-controls select{
  padding:0.45rem 0.7rem;border:1.5px solid var(--slate-300);border-radius:9px;
  font-family:'JetBrains Mono',monospace;background:#fff;color:var(--slate-800);
  font-size:0.92rem;font-weight:600;
}
.sim-readout{
  background:linear-gradient(135deg,var(--slate-800),var(--slate-900));
  color:#FCD34D;padding:0.55rem 1rem;border-radius:10px;
  font-family:'JetBrains Mono',monospace;font-size:0.95rem;font-weight:700;
}
.sim-fallback{
  padding:1rem 1.2rem;background:var(--amber-50);
  border-top:1px solid var(--slate-200);
  color:var(--amber-700);font-size:0.85rem;
}

/* Explicación */
.theory{
  background:#fff;border-left:5px solid var(--sky-500);border-radius:18px;
  padding:1.5rem;margin-bottom:1.1rem;box-shadow:var(--shadow-md);
}
.theory .tag{color:var(--sky-700);font-size:0.78rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:0.6rem;display:flex;align-items:center;gap:0.4rem;}
.theory p, .theory li{margin-bottom:0.7rem;color:var(--slate-700);line-height:1.65;}
.theory ul, .theory ol{margin-left:1.3rem;}
.theory strong{color:var(--slate-900);}
.formula{
  display:inline-block;background:var(--amber-100);padding:0.15rem 0.55rem;border-radius:6px;
  font-family:'JetBrains Mono',monospace;font-weight:700;color:var(--amber-700);
  border-bottom:2px solid var(--amber-400);
}
.formula-block{
  background:linear-gradient(135deg,#FEF3C7,#FFFBEB);
  border-left:4px solid var(--amber-500);
  padding:0.95rem 1.2rem;border-radius:0 12px 12px 0;
  font-family:'JetBrains Mono',monospace;font-size:1rem;
  color:var(--slate-900);margin:0.8rem 0;font-weight:600;line-height:1.7;
}

/* Analogía */
.analogy{
  background:linear-gradient(135deg,var(--sky-50),var(--indigo-50));
  border-left:5px solid var(--sky-500);border-radius:18px;
  padding:1.3rem 1.5rem;margin-bottom:1.1rem;box-shadow:var(--shadow-md);
}
.analogy .tag{color:var(--sky-700);font-size:0.78rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:0.45rem;display:flex;align-items:center;gap:0.4rem;}
.analogy h3{color:var(--sky-700);margin-bottom:0.4rem;font-size:1.1rem;}
.analogy p{color:var(--slate-700);font-size:0.98rem;line-height:1.65;}

/* Curiosidades */
.curio-section{
  background:#fff;border-left:5px solid var(--pink-500);border-radius:18px;
  padding:1.4rem;margin-bottom:1.1rem;box-shadow:var(--shadow-md);
}
.curio-section .tag{color:var(--pink-600);font-size:0.78rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:0.7rem;display:flex;align-items:center;gap:0.4rem;}
.curio-section h3{color:var(--slate-900);margin-bottom:0.7rem;}
.curiosity{
  background:linear-gradient(135deg,var(--pink-50),var(--rose-50));
  border:1px dashed var(--pink-500);
  padding:0.95rem 1.15rem;border-radius:12px;margin:0.65rem 0;
  position:relative;font-size:0.93rem;color:var(--slate-700);line-height:1.55;
}
.curiosity::before{
  content:"💡";position:absolute;top:-12px;left:14px;
  background:#fff;padding:0 6px;font-size:1.15rem;border-radius:50%;
}
.curiosity strong{color:var(--rose-600);}

/* Ejercicios resueltos */
.solved-section{
  background:linear-gradient(135deg,var(--emerald-50),#fff);
  border-left:5px solid var(--emerald-500);border-radius:18px;
  padding:1.4rem;margin-bottom:1.1rem;box-shadow:var(--shadow-md);
}
.solved-section .tag{color:var(--emerald-700);font-size:0.78rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:0.7rem;display:flex;align-items:center;gap:0.4rem;}
.solved-problem{background:#fff;border:1px solid var(--slate-200);border-radius:12px;padding:1rem 1.2rem;margin:0.7rem 0;box-shadow:var(--shadow-sm);}
.solved-problem .label{font-weight:700;color:var(--slate-800);margin-bottom:0.4rem;display:flex;align-items:center;gap:0.5rem;}
.solved-problem .label::before{content:"📝";font-size:1.05rem;}
.solved-problem .steps{margin-top:0.4rem;}
.solved-problem .step{padding:0.45rem 0;border-bottom:1px dashed var(--slate-200);display:flex;gap:0.7rem;}
.solved-problem .step:last-child{border-bottom:none;}
.solved-problem .step-num{
  background:linear-gradient(135deg,var(--indigo-500),var(--purple-500));color:#fff;
  width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-size:0.78rem;font-weight:700;flex-shrink:0;
}

/* Práctica interactiva */
.practice-section{
  background:#fff;border-left:5px solid var(--purple-500);border-radius:18px;
  padding:1.4rem;margin-bottom:1.1rem;box-shadow:var(--shadow-md);
}
.practice-section .tag{color:var(--purple-700);font-size:0.78rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:0.7rem;display:flex;align-items:center;gap:0.4rem;}
.practice-item{background:var(--slate-50);border:2px solid var(--slate-200);border-radius:14px;padding:1.1rem;margin-bottom:0.9rem;transition:border-color 0.3s ease;}
.practice-item.correct{border-color:var(--emerald-500);background:linear-gradient(135deg,var(--emerald-50),#fff);}
.practice-item.wrong{border-color:var(--rose-500);}
.practice-question{font-weight:500;color:var(--slate-800);margin-bottom:0.65rem;font-size:0.97rem;}
.practice-question .num{
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--purple-500),var(--pink-500));color:#fff;
  width:26px;height:26px;border-radius:50%;font-size:0.85rem;
  margin-right:0.5rem;font-weight:700;
}
.practice-controls{display:flex;gap:0.55rem;flex-wrap:wrap;align-items:center;}
.practice-input{
  flex:1;min-width:120px;padding:0.6rem 0.9rem;
  border:2px solid var(--slate-300);border-radius:10px;
  font-family:'JetBrains Mono',monospace;font-size:1rem;font-weight:600;
  background:#fff;color:var(--slate-800);
}
.practice-input:focus{outline:none;border-color:var(--indigo-500);box-shadow:0 0 0 3px rgba(99,102,241,0.1);}
.practice-feedback{margin-top:0.65rem;padding:0.7rem 0.95rem;border-radius:10px;font-weight:500;display:none;animation:pop-in 0.4s ease;font-size:0.93rem;}
.practice-feedback.show{display:block;}
.practice-feedback.ok{background:var(--emerald-50);color:var(--emerald-700);border-left:3px solid var(--emerald-500);}
.practice-feedback.ko{background:var(--rose-50);color:var(--rose-700);border-left:3px solid var(--rose-500);}
@keyframes pop-in{0%{transform:scale(0.95);opacity:0}100%{transform:scale(1);opacity:1}}
.practice-steps{
  margin-top:0.7rem;background:linear-gradient(135deg,var(--slate-800),var(--slate-900));color:#fff;
  border-radius:10px;padding:1rem 1.2rem;display:none;font-size:0.93rem;animation:slide-down 0.4s ease;
}
.practice-steps.show{display:block;}
@keyframes slide-down{from{opacity:0;max-height:0}to{opacity:1;max-height:500px}}
.practice-steps .step{padding:0.35rem 0;display:flex;gap:0.6rem;}
.practice-steps .step-num{background:#FBBF24;color:var(--slate-900);width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:0.7rem;font-weight:700;flex-shrink:0;}

/* Botones */
.btn{
  padding:0.65rem 1.15rem;border:none;border-radius:10px;
  font-family:inherit;font-weight:600;font-size:0.94rem;
  cursor:pointer;transition:all 0.2s ease;
  display:inline-flex;align-items:center;gap:0.4rem;
}
.btn-primary{background:linear-gradient(135deg,var(--indigo-600),var(--purple-600));color:#fff;box-shadow:0 4px 10px rgba(99,102,241,0.25);}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 15px rgba(99,102,241,0.35);}
.btn-star{background:linear-gradient(135deg,#FBBF24,#F59E0B);color:var(--slate-900);box-shadow:0 4px 12px rgba(251,191,36,0.35);}
.btn-star:hover{transform:translateY(-1px);}
.btn-ghost{background:#fff;color:var(--slate-700);border:1.5px solid var(--slate-300);}
.btn-ghost:hover{background:var(--slate-100);border-color:var(--slate-400);}
.btn-small{padding:0.45rem 0.85rem;font-size:0.82rem;border-radius:8px;}
.btn-action{background:linear-gradient(135deg,var(--orange-500),var(--pink-500));color:#fff;box-shadow:0 4px 12px rgba(249,115,22,0.3);}
.btn-action:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(249,115,22,0.4);}
.btn:disabled{opacity:0.5;cursor:not-allowed;}

/* Quiz */
.quiz-section{
  background:linear-gradient(135deg,var(--purple-600),var(--pink-600));
  color:#fff;border-radius:18px;padding:1.5rem;margin-bottom:1.1rem;
  box-shadow:0 8px 20px rgba(168,85,247,0.25);
}
.quiz-section .tag{color:rgba(255,255,255,0.9);font-size:0.78rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:0.6rem;display:flex;align-items:center;gap:0.4rem;}
.quiz-section .quiz-intro{color:#fff;margin-bottom:0.9rem;}
.quiz-section .quiz-intro h3{color:#fff;margin-bottom:0.3rem;}
.quiz-section .quiz-intro p{color:rgba(255,255,255,0.92);font-size:0.92rem;}
.quiz-tabs{display:flex;gap:0.35rem;background:rgba(255,255,255,0.15);padding:0.3rem;border-radius:11px;margin-bottom:1rem;}
.quiz-tab{flex:1;padding:0.6rem 1rem;border:none;background:transparent;font-family:inherit;font-weight:600;font-size:0.9rem;color:rgba(255,255,255,0.75);cursor:pointer;border-radius:8px;transition:all 0.2s ease;}
.quiz-tab.active{background:#fff;color:var(--purple-700);box-shadow:0 2px 8px rgba(0,0,0,0.1);}
.quiz-container{background:#fff;border-radius:14px;padding:1.3rem;color:var(--slate-800);}
.quiz-progress{height:8px;background:var(--slate-200);border-radius:99px;overflow:hidden;margin-bottom:1rem;}
.quiz-progress-bar{height:100%;background:linear-gradient(90deg,var(--indigo-500),var(--purple-500),var(--pink-500));transition:width 0.5s ease;border-radius:99px;}
.quiz-q-num{font-size:0.85rem;color:var(--slate-500);font-weight:600;margin-bottom:0.5rem;text-transform:uppercase;letter-spacing:0.05em;}
.quiz-q-text{font-size:1.05rem;font-weight:500;color:var(--slate-800);margin-bottom:1.1rem;line-height:1.5;}
.quiz-options{display:flex;flex-direction:column;gap:0.55rem;}
.quiz-option{
  padding:0.85rem 1.1rem;border:2px solid var(--slate-200);
  border-radius:12px;cursor:pointer;background:#fff;
  font-family:inherit;font-size:0.97rem;color:var(--slate-800);
  text-align:left;transition:all 0.2s ease;
  display:flex;align-items:center;gap:0.7rem;
}
.quiz-option:hover{border-color:var(--indigo-500);background:var(--indigo-50);}
.quiz-option.correct{border-color:var(--emerald-500);background:var(--emerald-50);color:var(--emerald-700);animation:pop-in 0.3s ease;}
.quiz-option.wrong{border-color:var(--rose-500);background:var(--rose-50);color:var(--rose-700);animation:shake 0.4s ease;}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.quiz-option .letter{
  width:30px;height:30px;border-radius:8px;
  background:linear-gradient(135deg,var(--amber-100),var(--amber-50));color:var(--amber-700);
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:700;font-size:0.85rem;flex-shrink:0;
}
.quiz-option.correct .letter{background:var(--emerald-500);color:#fff;}
.quiz-option.wrong .letter{background:var(--rose-500);color:#fff;}
.quiz-feedback{margin-top:1rem;padding:0.85rem 1.1rem;border-radius:10px;display:none;font-size:0.93rem;}
.quiz-feedback.show{display:block;animation:pop-in 0.4s ease;}
.quiz-feedback.ok{background:var(--emerald-50);color:var(--emerald-700);border-left:4px solid var(--emerald-500);}
.quiz-feedback.ko{background:var(--rose-50);color:var(--rose-700);border-left:4px solid var(--rose-500);}
.quiz-controls{display:flex;justify-content:space-between;gap:0.6rem;margin-top:1.1rem;align-items:center;}

.quiz-result{text-align:center;padding:1.8rem 1rem;}
.quiz-result .score{
  font-size:4.5rem;font-weight:900;line-height:1;letter-spacing:-0.04em;
  background:linear-gradient(135deg,var(--indigo-600),var(--purple-600),var(--pink-600));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.quiz-result .score-label{color:var(--slate-500);font-size:0.85rem;text-transform:uppercase;letter-spacing:0.1em;margin-top:0.3rem;font-weight:600;}
.quiz-result .breakdown{display:flex;justify-content:center;gap:1.2rem;margin:1.3rem 0;flex-wrap:wrap;}
.quiz-result .breakdown div{background:var(--slate-50);padding:0.8rem 1.2rem;border-radius:12px;border:1px solid var(--slate-200);}
.quiz-result .breakdown strong{display:block;font-size:1.45rem;color:var(--slate-900);font-weight:800;}
.quiz-result .breakdown span{font-size:0.78rem;color:var(--slate-500);font-weight:600;text-transform:uppercase;letter-spacing:0.05em;}

/* Banner completado */
.complete-banner{background:linear-gradient(135deg,var(--emerald-500),var(--emerald-600));color:#fff;padding:1.5rem;border-radius:18px;text-align:center;margin-top:1.2rem;display:none;box-shadow:0 8px 20px rgba(16,185,129,0.3);}
.complete-banner.show{display:block;animation:pop-in 0.5s ease;}
.complete-banner h3{color:#fff;margin-bottom:0.4rem;}

/* Modal de nivel */
.modal-overlay{position:fixed;inset:0;background:rgba(15,23,42,0.7);backdrop-filter:blur(8px);z-index:200;display:none;align-items:center;justify-content:center;padding:1rem;}
.modal-overlay.show{display:flex;animation:fade-in 0.3s ease;}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
.modal{background:linear-gradient(135deg,var(--indigo-600),var(--purple-600),var(--pink-600));color:#fff;border-radius:24px;padding:2.5rem 2rem;text-align:center;max-width:420px;width:100%;position:relative;overflow:hidden;animation:level-up-pop 0.6s cubic-bezier(0.34,1.56,0.64,1);box-shadow:0 25px 50px rgba(99,102,241,0.4);}
@keyframes level-up-pop{0%{transform:scale(0.5);opacity:0}100%{transform:scale(1);opacity:1}}
.modal::before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(251,191,36,0.3),transparent 50%);animation:pulse 2s ease infinite;}
@keyframes pulse{0%,100%{transform:scale(1);opacity:0.5}50%{transform:scale(1.1);opacity:0.8}}
.modal .star-icon{font-size:5rem;position:relative;z-index:1;animation:star-bounce 1s ease infinite;}
@keyframes star-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.modal h2{color:#FCD34D;font-size:1.9rem;margin:0.5rem 0;position:relative;z-index:1;font-weight:800;}
.modal p{position:relative;z-index:1;opacity:0.95;}
.modal .level-num{font-size:3rem;font-weight:900;color:#fff;display:block;line-height:1;}
.modal button{margin-top:1rem;position:relative;z-index:1;}

/* Confeti */
.confetti{position:fixed;inset:0;pointer-events:none;z-index:150;overflow:hidden;}
.confetti-piece{position:absolute;width:10px;height:10px;animation:confetti-fall 3s linear forwards;}
@keyframes confetti-fall{0%{transform:translateY(-100vh) rotate(0);opacity:1}100%{transform:translateY(100vh) rotate(720deg);opacity:0}}

/* ============================================================
   VISTA DEL TUTOR
   ============================================================ */
.tutor-btn{background:linear-gradient(135deg,#FBBF24,#F59E0B);color:var(--slate-900);border:none;padding:0.45rem 0.95rem;border-radius:99px;font-family:inherit;font-weight:700;font-size:0.85rem;cursor:pointer;display:flex;align-items:center;gap:0.35rem;box-shadow:0 4px 12px rgba(251,191,36,0.35);transition:transform 0.2s;}
.tutor-btn:hover{transform:translateY(-1px);}
.tutor-overlay{position:fixed;inset:0;background:rgba(15,23,42,0.7);backdrop-filter:blur(8px);z-index:300;display:none;align-items:flex-start;justify-content:center;padding:2rem 1rem;overflow-y:auto;}
.tutor-overlay.show{display:flex;animation:fade-in 0.3s ease;}
.tutor-modal{background:#fff;border-radius:20px;max-width:780px;width:100%;box-shadow:0 25px 50px rgba(15,23,42,0.3);overflow:hidden;animation:slide-up 0.4s ease;margin:auto;}
.tutor-header{background:linear-gradient(135deg,var(--indigo-600),var(--purple-600));color:#fff;padding:1.5rem 1.75rem;display:flex;justify-content:space-between;align-items:center;}
.tutor-header h2{color:#fff;margin:0;font-size:1.4rem;}
.tutor-header .close-btn{background:rgba(255,255,255,0.2);border:none;color:#fff;width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:1.1rem;font-weight:700;display:flex;align-items:center;justify-content:center;transition:background 0.2s;}
.tutor-header .close-btn:hover{background:rgba(255,255,255,0.35);}
.tutor-body{padding:1.5rem 1.75rem;max-height:70vh;overflow-y:auto;}
.tutor-summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0.8rem;margin-bottom:1.5rem;}
.tutor-summary-stat{background:var(--slate-50);border:1px solid var(--slate-200);border-radius:12px;padding:0.95rem 1rem;text-align:center;}
.tutor-summary-stat .v{font-size:1.7rem;font-weight:900;color:var(--slate-900);letter-spacing:-0.03em;line-height:1;}
.tutor-summary-stat .l{font-size:0.75rem;font-weight:600;color:var(--slate-500);text-transform:uppercase;letter-spacing:0.05em;margin-top:0.3rem;}
.tutor-topic-card{background:#fff;border:1.5px solid var(--slate-200);border-radius:14px;padding:1rem 1.25rem;margin-bottom:0.8rem;}
.tutor-topic-card.pass{border-left:5px solid var(--emerald-500);}
.tutor-topic-card.pending{border-left:5px solid var(--amber-500);}
.tutor-topic-card.notstarted{border-left:5px solid var(--slate-300);background:var(--slate-50);}
.tutor-topic-header{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:0.6rem;margin-bottom:0.5rem;}
.tutor-topic-name{font-weight:700;color:var(--slate-900);font-size:1rem;}
.tutor-topic-score{font-size:1.5rem;font-weight:900;letter-spacing:-0.03em;}
.tutor-topic-score.pass{color:var(--emerald-600);}
.tutor-topic-score.pending{color:var(--amber-600);}
.tutor-topic-score small{font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;display:block;margin-top:-2px;}
.tutor-topic-detail{font-size:0.85rem;color:var(--slate-600);line-height:1.55;margin-top:0.4rem;}
.tutor-topic-detail .row{margin-bottom:0.3rem;}
.tutor-topic-detail .label{font-weight:700;color:var(--slate-700);}
.tutor-errors-list{margin-top:0.6rem;background:var(--rose-50);border-left:3px solid var(--rose-500);padding:0.65rem 0.85rem;border-radius:0 8px 8px 0;font-size:0.83rem;color:var(--slate-700);}
.tutor-errors-list .err-title{font-weight:700;color:var(--rose-700);margin-bottom:0.3rem;}
.tutor-errors-list ul{margin-left:1.1rem;}
.tutor-errors-list li{margin-bottom:0.15rem;}
.tutor-recommendation{margin-top:0.6rem;background:var(--sky-50);border-left:3px solid var(--sky-500);padding:0.65rem 0.85rem;border-radius:0 8px 8px 0;font-size:0.83rem;color:var(--sky-700);}
.tutor-recommendation strong{color:var(--sky-700);}
.tutor-empty-state{text-align:center;padding:2rem 1rem;color:var(--slate-500);font-size:0.92rem;}
.tutor-section-title{font-size:0.78rem;font-weight:700;color:var(--slate-500);text-transform:uppercase;letter-spacing:0.08em;margin:1.5rem 0 0.7rem;}
@media (max-width:640px){
  .tutor-header{padding:1.1rem 1.2rem;}
  .tutor-body{padding:1.1rem;}
  .tutor-btn{font-size:0.78rem;padding:0.35rem 0.7rem;}
}

/* Footer */
.footer{max-width:1100px;margin:3rem auto 1.5rem;padding:1.5rem;text-align:center;color:var(--slate-500);font-size:0.85rem;}
.footer .planet{display:inline-block;animation:planet-spin 12s linear infinite;}

/* Responsive */
@media (max-width:640px){
  .topbar{padding:0.7rem 0.9rem;}
  .topbar-inner{gap:0.5rem;}
  .brand{font-size:1.25rem;}
  .brand small{display:none;}
  .stats{gap:0.4rem;}
  .stat{padding:0.3rem 0.6rem;font-size:0.78rem;}
  .xp-bar-mini{width:75px;}
  .card,.sim-card,.theory,.analogy,.curio-section,.solved-section,.practice-section,.quiz-section{padding:1.15rem;border-radius:14px;}
  .idea-clave{padding:1.15rem;border-radius:14px;}
  .topic-content{padding:1rem;}
  .topic-header{padding:1.15rem;border-radius:14px;}
  .sim-iframe{height:480px;}
}

/* Fracciones (blindaje: el numerador NO debe heredar el círculo de .practice-question .num) */
.fraction-vis{display:inline-block;text-align:center;font-family:'JetBrains Mono',monospace;font-weight:800;font-size:1.7rem;vertical-align:middle;line-height:1.1;color:var(--slate-900);}
.fraction-vis .num{display:block !important;border-bottom:2.5px solid var(--slate-900) !important;padding:0 0.4rem !important;background:none !important;background-color:transparent !important;border-radius:0 !important;width:auto !important;height:auto !important;min-width:0 !important;color:var(--slate-900) !important;margin:0 !important;box-shadow:none !important;font-size:1.7rem !important;line-height:1.1 !important;}
.fraction-vis .den{display:block !important;padding:0 0.4rem !important;background:none !important;background-color:transparent !important;border-radius:0 !important;width:auto !important;height:auto !important;min-width:0 !important;color:var(--slate-900) !important;margin:0 !important;box-shadow:none !important;font-size:1.7rem !important;line-height:1.1 !important;}