@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&display=swap');

/* ====== Paleta "plástico" ====== */
:root{
  --u:#2d9cff;--u2:#1472d6;
  --d:#3ed16a;--d2:#1fa04a;
  --c:#ffc21f;--c2:#c98700;
  --m:#ff5d6c;--m2:#cf2f43;
  --dm:#a56bff;--dm2:#7239d4;
  --ink:#2b2f4a;--soft:#6a7090;
  --r:24px;
}
.p0{--pc:var(--u);--pd:var(--u2)}
.p1{--pc:var(--d);--pd:var(--d2)}
.p2{--pc:var(--c);--pd:var(--c2)}
.p3{--pc:var(--m);--pd:var(--m2)}
.p4{--pc:var(--dm);--pd:var(--dm2)}
.p5{--pc:#ff7ab8;--pd:#c93d86}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--ink);font-size:18px;
  font-family:'Fredoka','Baloo 2','Comic Sans MS','Trebuchet MS',system-ui,sans-serif;
  background:
    radial-gradient(circle at 8% 12%,#fff3b8 0 90px,transparent 91px),
    radial-gradient(circle at 93% 22%,#ffd3ea 0 70px,transparent 71px),
    radial-gradient(circle at 85% 88%,#cff5dc 0 110px,transparent 111px),
    radial-gradient(circle at 5% 80%,#e2d4ff 0 80px,transparent 81px),
    linear-gradient(180deg,#d4efff,#f1fbff 55%,#fff8df);
  background-attachment:fixed;min-height:100vh;
}
h1,h2,h3{margin:.2em 0 .4em;line-height:1.15}
h1{font-size:2.3rem}
h2{font-size:1.6rem}
a{color:var(--u2)}
.wrap{max-width:1120px;margin:0 auto;padding:18px 16px 60px}
.center{text-align:center}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.grow{flex:1}
.muted{color:var(--soft)}
[hidden]{display:none!important}

/* ====== Barra superior ====== */
.top{position:sticky;top:0;z-index:50;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;
  padding:10px 18px;background:linear-gradient(180deg,#fff,#eaf6ff);
  border-bottom:5px solid var(--u);box-shadow:0 6px 0 rgba(20,114,214,.15),0 10px 24px rgba(20,60,120,.15)}
.logo{display:flex;align-items:center;gap:8px;font-size:1.5rem;font-weight:700;color:var(--ink);text-decoration:none}
.logo span{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:14px;color:#fff;
  background:linear-gradient(180deg,#ff9aa4,var(--m));box-shadow:0 4px 0 var(--m2),inset 0 3px 0 rgba(255,255,255,.5)}
.logo b{color:var(--u2)}
.top nav{display:flex;flex-wrap:wrap;gap:8px;flex:1}
.top nav a{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;text-decoration:none;
  font-weight:600;color:var(--ink);background:#fff;border:3px solid #d9e6fb;box-shadow:0 4px 0 #d9e6fb;transition:.1s}
.top nav a:hover{transform:translateY(-2px)}
.top nav a.on{background:linear-gradient(180deg,#7ccaff,var(--u));color:#fff;border-color:var(--u2);box-shadow:0 4px 0 var(--u2)}
.tools{display:flex;gap:8px;align-items:center}
.starpill{background:#fff6cc;border:3px solid var(--c);border-radius:999px;padding:4px 12px;font-weight:700;box-shadow:0 3px 0 var(--c2)}

/* ====== Botones plásticos ====== */
.btn{--b1:#7ccaff;--b2:#2d9cff;--bd:#1472d6;font:inherit;font-weight:700;color:#fff;border:0;cursor:pointer;
  padding:.65em 1.25em;border-radius:999px;background:linear-gradient(180deg,var(--b1),var(--b2));
  box-shadow:0 6px 0 var(--bd),0 10px 16px rgba(0,0,0,.16),inset 0 3px 0 rgba(255,255,255,.55);
  text-shadow:0 2px 0 rgba(0,0,0,.2);transition:transform .08s,box-shadow .08s;
  display:inline-flex;align-items:center;justify-content:center;gap:.4em;text-decoration:none;user-select:none;-webkit-tap-highlight-color:transparent}
.btn:hover{filter:brightness(1.05)}
.btn:active{transform:translateY(5px);box-shadow:0 1px 0 var(--bd),inset 0 3px 0 rgba(255,255,255,.4)}
.btn.green{--b1:#92f2ac;--b2:#3ed16a;--bd:#1b9446}
.btn.yellow{--b1:#ffe27a;--b2:#ffb800;--bd:#c98700;color:#5a3b00;text-shadow:none}
.btn.red{--b1:#ff9aa4;--b2:#ff5d6c;--bd:#c92b3f}
.btn.purple{--b1:#cfb0ff;--b2:#a56bff;--bd:#6d32cf}
.btn.gray{--b1:#fff;--b2:#e6ebf7;--bd:#b4bdd6;color:var(--ink);text-shadow:none}
.btn.gray.on{--b1:#7ccaff;--b2:#2d9cff;--bd:#1472d6;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.2)}
.btn.sm{font-size:.82em;padding:.4em .9em;box-shadow:0 4px 0 var(--bd),inset 0 2px 0 rgba(255,255,255,.55)}
.btn.lg{font-size:1.25em;padding:.7em 1.6em}
.btn[disabled]{opacity:.45;pointer-events:none}
.seg{display:flex;flex-wrap:wrap;gap:8px}

/* ====== Tarjetas ====== */
.card{background:#fff;border-radius:var(--r);padding:20px 22px;margin:18px 0;border:5px solid #fff;
  box-shadow:0 8px 0 rgba(30,60,120,.1),0 16px 30px rgba(30,60,120,.12);position:relative}
.card.u{border-color:var(--u)}.card.d{border-color:var(--d)}.card.c{border-color:var(--c)}
.card.m{border-color:var(--m)}.card.dm{border-color:var(--dm)}
.card h2{display:flex;align-items:center;gap:10px}
.say{display:flex;gap:12px;align-items:center;background:#fff9dc;border:4px solid var(--c);border-radius:20px;
  padding:12px 16px;position:relative;box-shadow:0 5px 0 var(--c2);min-height:70px}
.say .bot{font-size:2.4rem;flex:none}
.say .txt{font-size:1.1rem;line-height:1.4}
.say .txt b{color:var(--m2)}
.tag{display:inline-block;padding:2px 12px;border-radius:999px;color:#fff;font-weight:700;background:var(--pc,var(--u));box-shadow:0 3px 0 var(--pd,var(--u2))}
.bar{height:20px;background:#dfe8fa;border-radius:99px;overflow:hidden;box-shadow:inset 0 3px 0 rgba(0,0,0,.1)}
.bar>i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(180deg,#a5f6bb,#3ed16a);transition:width .35s}

/* ====== Suma vertical ====== */
.vs{--cw:1.25em;display:inline-grid;grid-template-columns:.9em repeat(var(--cols),var(--cw));gap:3px 4px;
  font-weight:700;font-size:2.4rem;line-height:1;align-items:center;justify-items:center}
.vs .cell{width:var(--cw);height:1.2em;display:flex;align-items:center;justify-content:center;border-radius:.22em;color:var(--pd,var(--ink))}
.vs .op{color:var(--soft);font-size:1em}
.vs .hd{font-size:.42em;color:#fff;background:var(--pc);height:1.7em;width:100%;border-radius:.7em;box-shadow:0 .15em 0 var(--pd)}
.vs .cr{font-size:.55em;height:1.5em;color:var(--m2);width:100%}
.vs .cr.has{background:#ffe9ec;border:2px dashed var(--m)}
.vs .cr.box{border:2px dashed #b9c3df}
.vs .line{grid-column:1/-1;height:.12em;background:var(--ink);border-radius:3px;width:100%;margin:.05em 0}
.vs .res{color:var(--m2);background:#fff2f3}
.vs .res.empty{background:#f3f6fd;border:2px dashed #c3cde8}
.vs .hi{background:#fff3ae!important;box-shadow:0 0 0 3px #ffd53d}
.vs input{width:var(--cw);height:1.2em;font:inherit;text-align:center;padding:0;color:var(--ink);background:#fffdf1;
  border:3px solid var(--pc);border-radius:.22em;outline:none}
.vs input:focus{box-shadow:0 0 0 4px rgba(255,194,31,.55)}
.vs input.cin{font-size:.5em;width:100%;height:1.6em;background:#fff2f3;border:2px dashed var(--m)}
.vs input.ok,.in.ok{border-color:var(--d)!important;background:#e8fff0!important}
.vs input.bad,.in.bad{border-color:var(--m)!important;background:#fff0f2!important}

/* ====== Pictogramas ====== */
.pict{display:inline-flex;flex-wrap:wrap;align-items:flex-end;gap:calc(var(--s)*1.2);vertical-align:middle;--s:6px}
.pg{display:inline-flex;flex-wrap:wrap;align-items:flex-end;gap:calc(var(--s)*.7);padding:calc(var(--s)*1) calc(var(--s)*1.2);
  border-radius:14px;background:color-mix(in srgb,var(--pc) 13%,#fff);border:2px dashed var(--pc);max-width:100%}
.blk{display:inline-block;flex:none;position:relative;border-radius:calc(var(--s)*.2);
  box-shadow:inset 0 calc(var(--s)*.25) 0 rgba(255,255,255,.55),inset 0 calc(var(--s)*-.25) 0 rgba(0,0,0,.18)}
.blk.p0{width:var(--s);height:var(--s);background:var(--pc)}
.blk.p1{width:var(--s);height:calc(var(--s)*10);
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.7) 0 1.5px,transparent 1.5px var(--s)),var(--pc)}
.blk.p2,.blk.p3,.blk.p4{width:calc(var(--s)*10);height:calc(var(--s)*10);
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.7) 0 1.5px,transparent 1.5px var(--s)),
             repeating-linear-gradient(to right,rgba(255,255,255,.7) 0 1.5px,transparent 1.5px var(--s)),var(--pc)}
.blk.p3{margin:calc(var(--s)*1.4) calc(var(--s)*1.4) 0 0;box-shadow:calc(var(--s)*1.4) calc(var(--s)*-1.4) 0 0 var(--pd)}
.blk.p4{width:calc(var(--s)*13);height:calc(var(--s)*10);display:grid;place-items:center}
.blk.p4 b{background:#fff;color:var(--pd);border-radius:6px;padding:0 .3em;font-size:calc(var(--s)*2.4);box-shadow:none}
.chip{display:inline-flex;align-items:center;justify-content:center;min-width:calc(var(--s)*5);height:calc(var(--s)*5);padding:0 calc(var(--s)*.9);
  border-radius:999px;font-weight:700;font-size:calc(var(--s)*2.2);color:#fff;white-space:nowrap;
  background:radial-gradient(circle at 32% 25%,rgba(255,255,255,.7) 0 14%,transparent 15%),var(--pc);
  box-shadow:0 calc(var(--s)*.4) 0 var(--pd),inset 0 calc(var(--s)*-.3) 0 rgba(0,0,0,.12);text-shadow:0 1px 0 rgba(0,0,0,.25)}
.chip.p2{color:#5a3b00;text-shadow:none}
.emo{font-size:calc(var(--s)*4.4);line-height:1}
.pl{display:block;width:100%;text-align:center;font-size:calc(var(--s)*2.1);font-weight:700;color:var(--pd)}
.plus{font-size:2.2rem;font-weight:700;color:var(--soft);margin:0 6px}

/* ====== Entradas ====== */
input.in{font:inherit;font-weight:700;font-size:1.6rem;text-align:center;border:4px solid var(--u);border-radius:16px;
  padding:.2em .4em;width:7.5em;background:#fffdf1;color:var(--ink);outline:none}
input.in:focus{box-shadow:0 0 0 5px rgba(255,194,31,.55)}
select,input[type=text],input[type=number]{font:inherit;border:3px solid #cdd8f2;border-radius:12px;padding:.3em .6em;background:#fff;color:var(--ink)}

/* ====== Animaciones ====== */
@keyframes pop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
@keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-10px)}40%,80%{transform:translateX(10px)}}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg);opacity:.9}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.pop{animation:pop .35s ease-out}
.shake{animation:shake .4s}
.bob{animation:bob 2.2s ease-in-out infinite}
.confetti{position:fixed;top:-40px;z-index:999;font-size:28px;pointer-events:none;animation:fall linear forwards}

@media (max-width:700px){
  body{font-size:16px}h1{font-size:1.8rem}
  .vs{font-size:1.9rem}
  .top nav a{padding:6px 10px}
}
@media print{.top{display:none!important}}

/* ====== Resta / multiplicación / división ====== */
.vs .x{text-decoration:line-through;text-decoration-color:var(--m);text-decoration-thickness:.08em;opacity:.55}
.vs .cell.cr.has{font-size:.5em}
.emo.x{position:relative;display:inline-block;opacity:.4;filter:grayscale(1)}
.emo.x:after{content:'✖';position:absolute;left:12%;top:-5%;color:var(--m);font-size:.9em;filter:none}
.dvs{display:inline-grid;font-weight:700;font-size:2.4rem;line-height:1;gap:3px 2px;align-items:center;justify-items:center}
.dvs .c{width:1.15em;height:1.2em;display:flex;align-items:center;justify-content:center;color:var(--pd,var(--ink));border-radius:.2em}
.dvs .rb{border-left:.1em solid var(--ink)}
.dvs .ub{border-bottom:.1em solid var(--ink);color:var(--m2)}
.dvs .wk{color:var(--m2);font-size:.9em}
.dvs .bj{color:var(--u2);font-size:.9em}
.dvs .rm{color:#fff;background:var(--d);font-size:.9em}
.dvs .qq{color:var(--d2)}
.dvs .hi{background:#fff3ae;box-shadow:0 0 0 3px #ffd53d}
.dvs .box{display:block;width:1em;height:1em;border:.07em solid var(--ink);border-radius:.15em;background:#fff}
.dvs .remrow{grid-column:1/-1;display:flex;align-items:center;gap:.3em;font-size:.6em;color:var(--soft);justify-content:center;margin-top:.3em}
.dvs input{width:1.1em;height:1.2em;font:inherit;text-align:center;padding:0;border:3px solid var(--d);border-radius:.2em;background:#fffdf1;color:var(--ink);outline:none}
.dvs input:focus{box-shadow:0 0 0 4px rgba(255,194,31,.55)}
.dvs input.ok{border-color:var(--d)!important;background:#e8fff0!important}
.dvs input.bad{border-color:var(--m)!important;background:#fff0f2!important}