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

:root{
  --bg:#eef4ff; --bg2:#ffffff; --card:#ffffff; --text:#1f2540; --muted:#6b7290;
  --accent:#4f7cff; --accent2:#7aa0ff; --accent-contrast:#ffffff;
  --good:#33c47e; --warn:#ffb020; --bad:#ff5a6e;
  --radius:20px; --shadow:0 10px 30px rgba(31,37,64,.08);
  --tab-bg:#ffffff;
}

/* ---- Themes (children pick these) ---- */
[data-theme="azul"]{ --bg:#eaf3ff; --accent:#3a7bff; --accent2:#7fb0ff; --card:#ffffff; }
[data-theme="rosa"]{ --bg:#fff0f6; --accent:#ff5fa2; --accent2:#ffa6ce; --card:#ffffff; }
[data-theme="morado"]{ --bg:#f2edff; --accent:#8b5cf6; --accent2:#c4b0ff; --card:#ffffff; }
[data-theme="verde"]{ --bg:#eafff3; --accent:#22b573; --accent2:#8fe3bb; --card:#ffffff; }
[data-theme="naranja"]{ --bg:#fff4e8; --accent:#ff8a3d; --accent2:#ffc08a; --card:#ffffff; }
[data-theme="espacio"]{ --bg:#12142b; --text:#eef1ff; --muted:#a7add8; --accent:#7c8cff; --accent2:#42e0ff; --card:#1c2044; --shadow:0 10px 30px rgba(0,0,0,.4); --tab-bg:#1c2044; }
[data-theme="dino"]{ --bg:#eefbe8; --accent:#4caf50; --accent2:#a7e6ab; --card:#ffffff; }
[data-theme="unicornio"]{ --bg:#fdf1ff; --accent:#e26bf7; --accent2:#ffd1f3; --card:#ffffff; }

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Nunito', system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
  transition: background .3s ease, color .3s ease;
}
h1,h2,h3,.heading{ font-family:'Fredoka', 'Nunito', sans-serif; }

a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }

.app{ max-width:520px; margin:0 auto; min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; }

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px 8px;
}
.topbar h1{ font-size:1.3rem; margin:0; }
.avatar-badge{
  width:44px; height:44px; border-radius:50%; background:var(--accent2);
  display:flex; align-items:center; justify-content:center; font-size:1.4rem;
  box-shadow: var(--shadow);
}

.content{ flex:1; padding:8px 16px 90px; overflow-y:auto; }

.card{
  background:var(--card); border-radius:var(--radius); padding:16px;
  box-shadow:var(--shadow); margin-bottom:14px;
}

.stat-row{ display:flex; gap:10px; }
.stat{
  flex:1; text-align:center; background:var(--card); border-radius:16px; padding:14px 8px;
  box-shadow:var(--shadow);
}
.stat .num{ font-family:'Fredoka'; font-size:1.5rem; color:var(--accent); }
.stat .label{ font-size:.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--accent); color:var(--accent-contrast); border:none; border-radius:14px;
  padding:12px 18px; font-weight:700; font-size:1rem; cursor:pointer;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 45%, transparent);
  transition: transform .12s ease;
}
.btn:active{ transform: scale(0.96); }
.btn.secondary{ background:var(--card); color:var(--accent); border:2px solid var(--accent); box-shadow:none; }
.btn.ghost{ background:transparent; color:var(--muted); box-shadow:none; }
.btn.small{ padding:8px 12px; font-size:.85rem; border-radius:10px; }
.btn.block{ width:100%; }
.btn.danger{ background:var(--bad); }
.btn:disabled{ opacity:.5; cursor:not-allowed; }

.input, select.input, textarea.input{
  width:100%; padding:13px 14px; border-radius:14px; border:2px solid #e3e7f5;
  font-size:1rem; background:var(--bg2); color:var(--text); font-family:inherit;
}
[data-theme="espacio"] .input{ background:#232752; border-color:#333a72; color:var(--text); }
.field{ margin-bottom:12px; }
.field label{ display:block; font-size:.85rem; font-weight:700; margin-bottom:6px; color:var(--muted); }

.task-item{
  display:flex; align-items:center; gap:12px; padding:12px; border-radius:16px;
  background:var(--bg2); margin-bottom:8px; box-shadow: var(--shadow);
}
[data-theme="espacio"] .task-item{ background:#232752; }
.task-item .icon{ font-size:1.6rem; width:40px; text-align:center; }
.task-item .info{ flex:1; }
.task-item .info .title{ font-weight:700; }
.task-item .info .meta{ font-size:.78rem; color:var(--muted); }
.task-item .check{
  width:34px; height:34px; border-radius:50%; border:2px solid var(--accent);
  display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:1.1rem;
  background:transparent; flex-shrink:0;
}
.task-item.done{ opacity:.55; }
.task-item.done .check{ background:var(--good); border-color:var(--good); color:white; }
.task-item.overdue .check{ border-color:var(--bad); }

.badge{ display:inline-block; padding:3px 10px; border-radius:20px; font-size:.72rem; font-weight:700; }
.badge.escuela{ background:#e6efff; color:#3a6df0; }
.badge.casa{ background:#fff3d6; color:#c78800; }
.badge.material{ background:#ffe4ec; color:#e0447a; }
.badge.deporte{ background:#e3f9e8; color:#22a34a; }
.badge.examen{ background:#ffe6e6; color:#d43d3d; }
[data-theme="espacio"] .badge.escuela{ background:#28306b; color:#9db6ff; }
[data-theme="espacio"] .badge.casa{ background:#3a3560; color:#f0d68b; }
[data-theme="espacio"] .badge.material{ background:#4a2b4f; color:#ffb6d9; }
[data-theme="espacio"] .badge.deporte{ background:#1f4a30; color:#8ff0ab; }
[data-theme="espacio"] .badge.examen{ background:#5a2323; color:#ffb0b0; }

.weekday-check-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.weekday-check{ display:flex; flex-direction:column; align-items:center; gap:4px; font-size:.78rem; color:var(--muted); background:var(--card,#fff); border-radius:10px; padding:8px 4px; cursor:pointer; }
.weekday-check input{ width:18px; height:18px; }

.weekday-strip{ display:flex; gap:6px; overflow-x:auto; padding-bottom:6px; margin-bottom:10px; }
.weekday-strip button{
  flex:0 0 auto; border:none; background:var(--bg2); color:var(--text); border-radius:12px;
  padding:8px 12px; font-weight:700; font-size:.82rem; cursor:pointer; box-shadow:var(--shadow);
}
.weekday-strip button.active{ background:var(--accent); color:var(--accent-contrast); }

.tabbar{
  position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:520px;
  background:var(--tab-bg); display:flex; justify-content:space-around; padding:8px 4px calc(8px + env(safe-area-inset-bottom));
  box-shadow: 0 -6px 20px rgba(0,0,0,.08); z-index:10;
}
.tabbar a{
  display:flex; flex-direction:column; align-items:center; gap:2px; font-size:.68rem;
  color:var(--muted); font-weight:700; padding:4px 10px; border-radius:12px;
}
.tabbar a .ic{ font-size:1.3rem; }
.tabbar a.active{ color:var(--accent); }

.empty{ text-align:center; color:var(--muted); padding:30px 10px; }
.empty .big{ font-size:2.6rem; margin-bottom:8px; }

.center-screen{
  min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:24px; text-align:center; background:var(--bg);
}
.logo-title{ font-family:'Fredoka'; font-size:1.9rem; margin-bottom:4px; }
.logo-sub{ color:var(--muted); margin-bottom:26px; }

.kid-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; width:100%; max-width:380px; margin-bottom:18px; }
.kid-pick{
  background:var(--card,#fff); border-radius:18px; padding:18px 10px; text-align:center; cursor:pointer;
  box-shadow:var(--shadow); border:3px solid transparent;
}
.kid-pick .av{ font-size:2.4rem; }
.kid-pick .nm{ font-weight:800; margin-top:6px; }

.pin-dots{ display:flex; gap:14px; justify-content:center; margin:18px 0; }
.pin-dots span{ width:16px; height:16px; border-radius:50%; border:2px solid var(--accent); }
.pin-dots span.filled{ background:var(--accent); }
.keypad{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; width:100%; max-width:300px; }
.keypad button{
  padding:18px 0; border-radius:16px; border:none; background:var(--card,#fff); font-size:1.4rem; font-weight:800;
  box-shadow:var(--shadow); cursor:pointer; color:var(--text);
}

.theme-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.theme-swatch{
  aspect-ratio:1; border-radius:16px; cursor:pointer; border:3px solid transparent;
  display:flex; align-items:center; justify-content:center; font-size:1.5rem;
}
.theme-swatch.selected{ border-color:var(--text); }

.progress-ring-wrap{ position:relative; width:110px; height:110px; margin:0 auto; }
.progress-ring-wrap .center-label{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.center-label .n{ font-family:'Fredoka'; font-size:1.4rem; }
.center-label .l{ font-size:.65rem; color:var(--muted); }

.streak-flame{ display:flex; align-items:center; gap:6px; font-weight:800; color:var(--warn); }

.feed-item{ display:flex; gap:10px; padding:10px 0; border-bottom:1px solid rgba(0,0,0,.06); }
.feed-item .dot{ width:8px; height:8px; border-radius:50%; margin-top:6px; flex-shrink:0; }
.feed-item.info .dot{ background:#7aa0ff; }
.feed-item.success .dot{ background:var(--good); }
.feed-item.warning .dot{ background:var(--warn); }
.feed-item.danger .dot{ background:var(--bad); }
.feed-item .msg{ font-size:.9rem; }
.feed-item .time{ font-size:.72rem; color:var(--muted); }

.kid-summary-card{ display:flex; align-items:center; gap:12px; }
.kid-summary-card .av{ font-size:2rem; }
.kid-summary-card .bars{ flex:1; }
.mini-bar{ height:8px; border-radius:6px; background:#e5e9f7; overflow:hidden; margin-top:4px; }
.mini-bar > div{ height:100%; background:var(--accent); }

.toast{
  position:fixed; top:14px; left:50%; transform:translateX(-50%); background:#1f2540; color:#fff;
  padding:12px 20px; border-radius:14px; font-weight:700; z-index:100; box-shadow:var(--shadow);
  max-width:90%; text-align:center;
}

.modal-backdrop{
  position:fixed; inset:0; background:rgba(10,12,30,.5); display:flex; align-items:flex-end; justify-content:center;
  z-index:50;
}
.modal-sheet{
  background:var(--bg2); width:100%; max-width:520px; border-radius:24px 24px 0 0; padding:20px;
  max-height:85vh; overflow-y:auto;
}
[data-theme="espacio"] .modal-sheet{ background:#1c2044; }
.modal-sheet h3{ margin-top:0; }

.fab{
  position:fixed; bottom:86px; left:50%; transform:translateX(calc(-50% + 210px));
  width:56px; height:56px; border-radius:50%; background:var(--accent); color:#fff; border:none;
  font-size:1.6rem; box-shadow:0 8px 20px rgba(0,0,0,.25); cursor:pointer; z-index:20;
}
@media (max-width:420px){
  .fab{ transform:translateX(calc(-50% + 160px)); }
}

.section-title{ display:flex; align-items:center; justify-content:space-between; margin:18px 0 8px; }
.section-title h2{ font-size:1.05rem; margin:0; }

.confetti-emoji{ position:fixed; font-size:2rem; pointer-events:none; z-index:200; animation: floatUp 1.4s ease-out forwards; }
@keyframes floatUp{ 0%{ transform:translateY(0) scale(0.6); opacity:1;} 100%{ transform:translateY(-160px) scale(1.3); opacity:0;} }

.reward-card{ text-align:center; }
.reward-card .ic{ font-size:2.2rem; }
.reward-card .cost{ color:var(--accent); font-weight:800; margin:6px 0; }

.pill-tabs{ display:flex; gap:8px; margin-bottom:14px; }
.pill-tabs button{
  border:none; background:var(--card); padding:8px 14px; border-radius:20px; font-weight:700; box-shadow:var(--shadow);
  color:var(--muted); cursor:pointer;
}
.pill-tabs button.active{ background:var(--accent); color:#fff; }

.error-msg{ color:var(--bad); font-weight:700; font-size:.85rem; margin-top:6px; }

/* ---- Mascota (progresión estilo Duolingo) ---- */
.mascot-stage{
  position:relative; width:180px; height:180px; margin:6px auto 18px; border-radius:28px;
  display:flex; align-items:center; justify-content:center; font-size:5.5rem;
  background:var(--accent2); box-shadow:var(--shadow); overflow:hidden;
}
.mascot-stage .layer{ position:absolute; font-size:2.1rem; }
.mascot-stage .layer.sombrero{ top:2px; }
.mascot-stage .layer.cara{ top:58px; }
.mascot-stage .layer.capa{ bottom:10px; }
.mascot-progress{ text-align:center; margin-bottom:16px; }
.mascot-progress .bar{ height:10px; border-radius:8px; background:#e5e9f7; overflow:hidden; margin-top:6px; }
.mascot-progress .bar > div{ height:100%; background:var(--accent); }
[data-theme="espacio"] .mascot-progress .bar{ background:#2b2f5c; }

.cat-tabs{ display:flex; gap:6px; overflow-x:auto; margin-bottom:10px; }
.cat-tabs button{ flex:0 0 auto; border:none; background:var(--bg2); color:var(--muted); padding:7px 12px; border-radius:12px; font-weight:700; font-size:.78rem; box-shadow:var(--shadow); }
.cat-tabs button.active{ background:var(--accent); color:#fff; }

.wardrobe-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.wardrobe-item{ background:var(--bg2); border-radius:14px; padding:12px 6px; text-align:center; box-shadow:var(--shadow); border:2px solid transparent; position:relative; }
.wardrobe-item.equipped{ border-color:var(--accent); }
.wardrobe-item .ic{ font-size:1.7rem; }
.wardrobe-item .nm{ font-size:.68rem; font-weight:700; margin-top:4px; }
.wardrobe-item .lockmeta{ font-size:.62rem; color:var(--muted); margin-top:2px; }
.wardrobe-item.locked{ opacity:.55; }
.wardrobe-item .lockicon{ position:absolute; top:6px; right:8px; font-size:.85rem; }

.puzzle-card{ margin-bottom:16px; }
.puzzle-card .head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.puzzle-card .head b{ font-size:.9rem; }
.puzzle-card .head span{ font-size:.72rem; color:var(--muted); }
.piece-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:6px; }
.piece-slot{ aspect-ratio:1; border-radius:10px; background:var(--bg2); display:flex; align-items:center; justify-content:center; font-size:1.1rem; box-shadow:var(--shadow); }
.piece-slot.locked{ opacity:.35; }
.puzzle-complete{ text-align:center; font-size:2rem; margin-top:6px; }