:root{
  --ink:#10233f;
  --muted:#64748b;
  --blue:#2563eb;
  --blue-dark:#1d4ed8;
  --purple:#7c3aed;
  --green:#16a34a;
  --red:#dc2626;
  --surface:rgba(255,255,255,.91);
  --line:#dbe7f5;
  --shadow:0 22px 60px rgba(30,64,175,.16);
}

*{
  box-sizing:border-box;
  -webkit-tap-highlight-color:transparent;
}

html,body{
  min-height:100%;
}

body{
  margin:0;
  font-family:Inter,ui-rounded,system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ink);
  background:
    radial-gradient(900px 600px at 5% -8%,rgba(6,182,212,.22),transparent 58%),
    radial-gradient(900px 620px at 98% 0%,rgba(249,115,22,.16),transparent 58%),
    linear-gradient(135deg,#eaf7ff 0%,#f5f3ff 50%,#fff9e8 100%);
  overflow-x:hidden;
}

button{
  font:inherit;
}

.app{
  width:min(1500px,100%);
  min-height:100dvh;
  margin:0 auto;
  padding:8px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.hero{
  position:relative;
  overflow:hidden;
  border-radius:26px;
  padding:13px 17px;
  color:#fff;
  background:linear-gradient(120deg,#0f4bd8 0%,#2563eb 44%,#7c3aed 100%);
  box-shadow:0 18px 42px rgba(30,64,175,.22);
}

.hero::before,
.hero::after{
  content:"";
  position:absolute;
  border-radius:50%;
  background:rgba(255,255,255,.11);
  pointer-events:none;
}

.hero::before{
  width:210px;
  height:210px;
  left:-70px;
  top:-140px;
}

.hero::after{
  width:170px;
  height:170px;
  right:-45px;
  bottom:-120px;
}

.heroInner{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:13px;
  align-items:center;
}

.heroIcon{
  width:52px;
  height:52px;
  border-radius:17px;
  display:grid;
  place-items:center;
  font-size:29px;
  color:#173a7a;
  background:linear-gradient(145deg,#fff,#e6f6ff);
  box-shadow:0 12px 26px rgba(15,23,42,.22);
}

.hero h1{
  margin:0;
  font-size:clamp(27px,3.7vw,45px);
  line-height:1;
  letter-spacing:-.04em;
}

.hero p{
  margin:5px 0 0;
  font-size:clamp(12px,1.4vw,16px);
  font-weight:700;
  opacity:.95;
}

.fullscreenBtn{
  align-self:start;
  border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.16);
  color:#fff;
  padding:9px 12px;
  border-radius:14px;
  cursor:pointer;
  font-size:12px;
  font-weight:950;
  white-space:nowrap;
}

.fullscreenBtn:hover{
  background:rgba(255,255,255,.24);
}

.fullscreenBtn.active{
  background:#111827;
  border-color:#111827;
}

.layout{
  flex:1;
  min-height:0;
  display:grid;
  grid-template-columns:370px minmax(0,1fr);
  gap:12px;
}

.panel,
.viewerCard{
  min-height:0;
  background:var(--surface);
  border:1px solid rgba(255,255,255,.84);
  border-radius:24px;
  box-shadow:var(--shadow);
  backdrop-filter:blur(14px);
}

.panel{
  padding:13px;
  overflow:auto;
  scrollbar-width:thin;
}

.panelTitle,
.sectionHead,
.viewerTop{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}

.panelTitle{
  margin-bottom:9px;
}

.panelTitle h2,
.viewerTop h2{
  margin:0;
  font-weight:1000;
  letter-spacing:-.025em;
}

.panelTitle h2{
  font-size:21px;
}

.tag{
  padding:5px 9px;
  border-radius:999px;
  background:#ede9fe;
  color:#6d28d9;
  font-size:10px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.07em;
}

.infoBlock,
.paletteBlock,
.progressBlock,
.research{
  margin-top:9px;
  padding:11px;
  border-radius:17px;
  border:1px solid #e2e8f0;
  background:#fff;
}

h3{
  margin:0 0 6px;
  font-size:13px;
  color:#0f3f9f;
}

p,li{
  font-size:12px;
  line-height:1.42;
  color:var(--muted);
}

p{
  margin:5px 0;
}

#paleta{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin:10px 0;
}

.color{
  position:relative;
  width:43px;
  height:43px;
  padding:0;
  border-radius:50%;
  border:3px solid #111827;
  background:var(--swatch,#fff);
  cursor:pointer;
  box-shadow:
    inset 0 0 0 4px rgba(255,255,255,.32),
    0 7px 14px rgba(15,23,42,.12);
  transition:transform .12s ease,box-shadow .12s ease;
}

.color:hover{
  transform:translateY(-2px);
}

.color.activo{
  outline:5px solid #111827;
  outline-offset:4px;
  box-shadow:
    inset 0 0 0 4px rgba(255,255,255,.35),
    0 0 0 10px rgba(37,99,235,.16);
}

.eraser-btn{
  background:#fff;
  display:grid;
  place-items:center;
}

.eraser-icon{
  position:relative;
  width:29px;
  height:16px;
  display:flex;
  transform:rotate(-17deg);
  border:2px solid #111827;
  border-radius:4px;
  overflow:hidden;
  box-shadow:0 2px 4px rgba(15,23,42,.15);
  pointer-events:none;
}

.eraser-pink{
  width:45%;
  background:linear-gradient(135deg,#fda4af,#fb7185);
}

.eraser-white{
  flex:1;
  background:linear-gradient(135deg,#fff,#e5e7eb);
}

.selectedColor{
  padding:8px 10px;
  border-radius:13px;
  background:#f8fbff;
  border:1px solid var(--line);
  font-size:12px;
  color:var(--muted);
}

.sectionHead h3{
  margin:0;
}

.timePill{
  padding:5px 8px;
  border-radius:999px;
  background:#eef6ff;
  color:#1d4ed8;
  border:1px solid #bfdbfe;
  font-size:10px;
  font-weight:900;
}

.statsGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:9px;
}

.statCard{
  padding:9px;
  border-radius:14px;
  background:#f8fafc;
  border:1px solid #e2e8f0;
}

.statCard span{
  display:block;
  font-size:10px;
  color:var(--muted);
}

.statCard strong{
  display:block;
  margin-top:3px;
  font-size:17px;
}

.status{
  margin-top:8px;
  padding:9px 10px;
  border-radius:13px;
  font-size:11px;
  font-weight:900;
}

.status.good{
  color:#166534;
  background:#ecfdf5;
  border:1px solid #bbf7d0;
}

.status.bad{
  color:#991b1b;
  background:#fef2f2;
  border:1px solid #fecaca;
}

.actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:8px;
}

.actions button{
  border:1px solid #dbe7f5;
  background:#fff;
  color:var(--ink);
  border-radius:13px;
  padding:9px 10px;
  cursor:pointer;
  font-size:11px;
  font-weight:900;
  box-shadow:0 5px 12px rgba(15,23,42,.06);
}

.actions button.primary{
  background:linear-gradient(135deg,var(--blue),var(--purple));
  color:#fff;
  border-color:transparent;
}

.research summary{
  cursor:pointer;
  font-size:12px;
  font-weight:950;
  color:#0f3f9f;
}

#preguntas{
  padding-left:20px;
  margin-bottom:0;
}

.viewerCard{
  padding:12px;
  display:flex;
  flex-direction:column;
}

.viewerTop{
  padding:3px 4px 10px;
}

.viewerTop h2{
  margin-top:3px;
  font-size:22px;
}

.viewerEyebrow{
  font-size:10px;
  font-weight:950;
  color:#6d28d9;
  text-transform:uppercase;
  letter-spacing:.07em;
}

.viewerHint{
  padding:7px 10px;
  border-radius:999px;
  background:#eef6ff;
  border:1px solid #bfdbfe;
  color:#1d4ed8;
  font-size:10px;
  font-weight:900;
  text-align:center;
}

#viewer{
  position:relative;
  flex:1;
  min-height:500px;
  overflow:hidden;
  border-radius:19px;
  border:1px solid #dbe7f5;
  background:
    radial-gradient(circle at 50% 40%,#ffffff 0%,#eef6ff 58%,#dbeafe 100%);
}

#viewer canvas{
  width:100%!important;
  height:100%!important;
  display:block;
  touch-action:none;
}

.aviso{
  position:fixed;
  left:50%;
  bottom:22px;
  transform:translateX(-50%);
  z-index:30;
  width:min(680px,calc(100vw - 32px));
  padding:13px 16px;
  border-radius:15px;
  background:#fff;
  color:#991b1b;
  border:2px solid #fecaca;
  box-shadow:0 18px 42px rgba(15,23,42,.22);
  text-align:center;
  font-size:12px;
  font-weight:900;
}

.oculto{
  display:none;
}

@media(max-height:760px) and (min-width:861px){
  .app{padding:6px;gap:6px}
  .hero{padding:9px 13px}
  .heroIcon{width:43px;height:43px;font-size:24px}
  .hero h1{font-size:31px}
  .hero p{font-size:11px;margin-top:3px}
  .layout{grid-template-columns:330px minmax(0,1fr);gap:8px}
  .panel,.viewerCard{padding:9px}
  #viewer{min-height:430px}
  .infoBlock,.paletteBlock,.progressBlock,.research{padding:9px}
}

@media(max-width:860px){
  .heroInner{
    grid-template-columns:auto 1fr;
  }

  .fullscreenBtn{
    grid-column:1/-1;
    width:100%;
  }

  .layout{
    grid-template-columns:1fr;
  }

  .viewerCard{
    order:1;
  }

  .panel{
    order:2;
  }

  #viewer{
    min-height:58vh;
  }
}

@media(max-width:560px){
  .app{padding:6px}

  .hero{
    padding:10px 12px;
    border-radius:20px;
  }

  .heroIcon{
    width:42px;
    height:42px;
    font-size:23px;
  }

  .hero h1{
    font-size:26px;
  }

  .hero p{
    font-size:11px;
  }

  .viewerTop{
    align-items:flex-start;
    flex-direction:column;
  }

  #viewer{
    min-height:52vh;
  }

  .statsGrid,
  .actions{
    grid-template-columns:1fr;
  }

  .color{
    width:40px;
    height:40px;
  }
}


/* Paleta simétrica: 4 círculos arriba y 4 abajo */
#paleta{
  display:grid;
  grid-template-columns:repeat(4,43px);
  justify-content:start;
  align-items:center;
  gap:14px 16px;
  margin:12px 0;
}

@media(max-width:560px){
  #paleta{
    grid-template-columns:repeat(4,40px);
    gap:12px 14px;
  }
}


/* ===== Formato MathCraft actual ===== */
:root{--ink:#10172f;--text:#17203b;--muted:#6b7489;--line:#e4e8f1;--cyan:#1bbfd3;--blue:#3184ee;--violet:#7a4ef5;--pink:#dc4f9e;--orange:#ff7b18;--surface:rgba(255,255,255,.94);--shadow:0 18px 45px rgba(24,38,78,.11)}
body{background:radial-gradient(circle at 7% 15%,rgba(27,191,211,.10),transparent 25%),radial-gradient(circle at 93% 15%,rgba(220,79,158,.09),transparent 28%),linear-gradient(180deg,#fff 0%,#fbfcff 100%);color:var(--text);overflow-x:hidden}
.wrap{width:min(1460px,calc(100% - 26px));margin:auto}
.siteHeader{position:sticky;top:0;z-index:90;background:rgba(255,255,255,.96);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.topNav{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{display:flex;align-items:center;gap:12px}.logoBadge{width:49px;height:49px;border-radius:16px;display:grid;place-items:center;background:conic-gradient(from 210deg,#ff7b18,#1bbfd3,#3184ee,#7a4ef5,#dc4f9e,#ff7b18);box-shadow:0 12px 28px rgba(49,132,238,.22);font-size:0}.logoBadge::after{content:"MC";width:35px;height:35px;border-radius:11px;display:grid;place-items:center;background:var(--ink);color:#fff;font-weight:950;font-size:.82rem}.brandName{color:var(--ink);font-size:1.05rem;font-weight:950}.brandTag{display:block;margin-top:4px;color:#65708a;font-size:.61rem;font-weight:850;letter-spacing:.15em;text-transform:uppercase}.headerActions{display:flex;gap:8px;flex-wrap:wrap}.headerBtn{min-height:42px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:12px;font-weight:900;box-shadow:0 7px 20px rgba(20,30,70,.05)}.headerBtn.primary{color:#fff;background:var(--ink);border-color:var(--ink)}.headerBtn.active{color:#fff;background:linear-gradient(135deg,var(--blue),var(--violet));border-color:transparent}
.hero{position:static;overflow:visible;border-radius:0;padding:24px 0 14px;color:var(--text);background:none;box-shadow:none}.hero::before,.hero::after{display:none}.heroGrid{display:grid;grid-template-columns:1.08fr .92fr;gap:26px;align-items:center}.heroEyebrow{color:var(--blue);font-size:.73rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase}.hero h1{margin:8px 0 10px;color:var(--ink);font-size:clamp(2.35rem,4.6vw,4.75rem);line-height:.93;letter-spacing:-.055em}.gradientText{color:transparent;background:linear-gradient(90deg,var(--cyan),var(--blue),var(--violet),var(--pink),var(--orange));background-clip:text;-webkit-background-clip:text}.hero p{max-width:760px;margin:0;color:var(--muted);font-size:.97rem;line-height:1.58;font-weight:400;opacity:1}.heroSteps{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.heroStep{min-height:104px;padding:13px;border-radius:20px;border:1px solid rgba(255,255,255,.98);background:rgba(255,255,255,.94);box-shadow:0 15px 38px rgba(31,45,82,.08)}.heroStep b{display:block;color:var(--ink);font-size:.86rem;margin-bottom:4px}.heroStep span{display:block;color:var(--muted);font-size:.69rem;line-height:1.38}.stepNum{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;margin-bottom:8px;color:#fff;font-weight:950;background:linear-gradient(135deg,var(--cyan),var(--blue),var(--violet))}
.gameSection{width:min(1460px,calc(100% - 26px));margin:0 auto;padding:6px 0 42px}.layout{display:grid;grid-template-columns:370px minmax(0,1fr);gap:16px;align-items:stretch}.panel,.viewerCard{background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:26px;box-shadow:var(--shadow);backdrop-filter:blur(14px)}.panel{padding:14px}.panelTitle h2,.viewerTop h2,h3{color:var(--ink)}.tag,.timePill{background:#eef6ff;color:var(--blue);border-color:#d8e9ff}.infoBlock,.paletteBlock,.progressBlock,.research{border-color:var(--line);background:#fff}.actions button,.actionBtn{border-color:var(--line);background:#fff;color:var(--ink)}.actions .primary,.actionBtn.primary{background:linear-gradient(135deg,var(--blue),var(--violet));color:#fff;border-color:transparent}
#paleta{display:grid;grid-template-columns:repeat(4,48px);justify-content:center;gap:13px 15px}.color{width:48px;height:48px;border:4px solid #fff;box-shadow:0 0 0 3px var(--ink),0 7px 14px rgba(15,23,42,.12)}.color.activo{outline:5px solid rgba(49,132,238,.20);outline-offset:4px;box-shadow:0 0 0 3px var(--ink),0 0 0 10px rgba(49,132,238,.14),0 7px 14px rgba(15,23,42,.12)}
.viewerCard{padding:14px;min-height:650px}.viewerTop{padding:3px 4px 10px}.viewerEyebrow{color:var(--blue)}.viewerHint{background:#fff;border:1px solid var(--line);color:var(--ink)}#viewer{min-height:570px;border-radius:21px;border:1px solid var(--line);background:linear-gradient(rgba(49,132,238,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(49,132,238,.045) 1px,transparent 1px),#fff;background-size:38px 38px}
.status.neutral{color:#475569;background:#f8fafc;border:1px solid var(--line)}.status.warning{color:#92400e;background:#fff7ed;border:1px solid #fed7aa}.status.error,.status.bad{color:#991b1b;background:#fef2f2;border:1px solid #fecaca}.status.good{color:#166534;background:#ecfdf5;border:1px solid #bbf7d0}.aviso{background:var(--ink);color:#fff;border:1px solid var(--ink)}
.mcModal{position:fixed;inset:0;z-index:500;display:none;place-items:center;padding:18px}.mcModal.open{display:grid}.mcModalBackdrop{position:absolute;inset:0;background:rgba(16,23,47,.48);backdrop-filter:blur(5px)}.mcModalCard{position:relative;z-index:1;width:min(760px,100%);max-height:min(86vh,780px);overflow:auto;padding:27px;border-radius:28px;background:#fff;border:1px solid var(--line);box-shadow:0 30px 90px rgba(16,23,47,.28)}.mcModalClose{position:absolute;right:15px;top:15px;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:25px;line-height:1;cursor:pointer}.mcModalEyebrow{color:var(--blue);font-size:.72rem;font-weight:950;letter-spacing:.14em;text-transform:uppercase}.mcModalCard h2{margin:7px 42px 12px 0;color:var(--ink);font-size:clamp(1.7rem,4vw,2.45rem);line-height:1.03;letter-spacing:-.04em}.mcModalCard>p{color:var(--muted);font-size:.9rem;line-height:1.58}.historyGrid{display:grid;gap:9px;margin:16px 0}.historyItem{display:grid;grid-template-columns:82px minmax(0,1fr);gap:12px;align-items:start;padding:12px;border-radius:16px;background:#f8fafc;border:1px solid var(--line)}.historyBadge{display:grid;place-items:center;min-height:42px;padding:7px;border-radius:12px;color:#fff;font-size:.72rem;font-weight:950;text-align:center;background:linear-gradient(135deg,var(--cyan),var(--blue),var(--violet))}.historyItem strong{color:var(--ink);font-size:.82rem}.historyItem p{margin:4px 0 0;color:var(--muted);font-size:.77rem;line-height:1.48}.historyMath{margin-top:10px;padding:13px 14px;border-radius:16px;background:linear-gradient(135deg,rgba(27,191,211,.07),rgba(122,78,245,.07));border:1px solid #dce7f7}.historyMath strong{color:var(--ink)}.historyMath p{margin:5px 0 0;color:#536079;font-size:.78rem;line-height:1.5}
@media(max-width:1020px){.heroGrid{grid-template-columns:1fr}.heroSteps{grid-template-columns:repeat(3,1fr)}.layout{grid-template-columns:1fr}.viewerCard{order:1}.panel{order:2}}@media(max-width:560px){.wrap,.gameSection{width:calc(100% - 16px)}.topNav{flex-direction:column;align-items:flex-start;padding:10px 0}.headerActions{width:100%}.headerBtn{flex:1}.hero h1{font-size:2.45rem}.heroSteps{grid-template-columns:1fr}.historyItem{grid-template-columns:1fr}}
:fullscreen body{overflow:hidden}:fullscreen .siteHeader,:fullscreen .hero{display:none}:fullscreen .gameSection{width:calc(100vw - 12px);height:100vh;padding:6px 0}:fullscreen .layout{height:calc(100vh - 12px);grid-template-columns:325px minmax(0,1fr);gap:8px}:fullscreen .panel,:fullscreen .viewerCard{height:100%}:fullscreen .viewerCard{min-height:0}:fullscreen #viewer{min-height:0;height:100%}