/* PLABS_KIDS_MENTES_MAP_LINGO_V1 — Mentes Brillantes: azulejos suaves (no clona anim/code/dub) */
/* Perfiles: mentes · tdah · tea · toc · tec */

/* === Base familia Mentes === */
body.theme-mentes #app,
#app.theme-mentes-map,
.mapwrap--mentes {
  --mb-ink: #312e81;
}
body.theme-mentes #starfield,
html.theme-mentes #starfield {
  display: none !important;
}

body.theme-mentes .hud,
#app.theme-mentes-map .hud {
  background: #ffffff !important;
  border-bottom: 3px solid #fff;
  box-shadow: 0 8px 24px rgba(49, 46, 129, 0.12);
  color: var(--mb-ink) !important;
}
body.theme-mentes .hud__name { color: var(--mb-ink) !important; font-weight: 800; }
body.theme-mentes .stat,
body.theme-mentes .lang,
body.theme-mentes .hud__back,
#app.theme-mentes-map .stat,
#app.theme-mentes-map .lang,
#app.theme-mentes-map .hud__back {
  background: #f5f3ff !important;
  border: 2px solid #c4b5fd !important;
  color: var(--mb-ink) !important;
  font-weight: 800;
}

.mapwrap--mentes .mappath {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
}
.mapwrap--mentes .map { position: relative !important; z-index: 3 !important; }
.mapwrap--mentes .node,
.mapwrap--mentes .unit-banner--lingo,
.mapwrap--mentes .map-lingo-hero { position: relative; z-index: 4; }

.mapwrap--mentes .mappath .lingo-path-bg {
  stroke: #fff;
  stroke-width: 22;
  stroke-linecap: round;
  fill: none;
}
.mapwrap--mentes .mappath .lingo-path-fg {
  stroke: #a78bfa;
  stroke-width: 9;
  stroke-linecap: round;
  stroke-dasharray: 14 12;
  fill: none;
}

/* Hero = tarjeta suave */
.mapwrap--mentes .map-lingo-hero--mentes,
.mapwrap--mentes .map-lingo-hero {
  background: #fff !important;
  border: 4px solid #fff !important;
  border-radius: 24px !important;
  box-shadow: 0 10px 0 rgba(49, 46, 129, 0.1), 0 18px 40px rgba(49, 46, 129, 0.12) !important;
}
.mapwrap--mentes .map-lingo-hero__bubble {
  color: #312e81 !important;
  font-family: Fredoka, Nunito, sans-serif;
}
.mapwrap--mentes .map-lingo-hero__bubble small {
  color: #6b7280 !important;
}

/* Capítulos = azulejos redondeados */
.mapwrap--mentes .unit-banner--lingo {
  display: flex !important;
  align-items: center;
  gap: 14px;
  text-align: left;
  margin: 28px 8px 14px;
  padding: 14px 16px;
  border-radius: 20px !important;
  border: 4px solid #fff !important;
  color: #fff !important;
  font-family: Fredoka, Nunito, sans-serif;
  box-shadow: 0 8px 0 rgba(49, 46, 129, 0.15);
  background: linear-gradient(135deg, #a78bfa, #7c3aed) !important;
}
.mapwrap--mentes .unit-banner__emoji {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: #fff;
  display: grid;
  place-items: center;
  font-size: 26px;
  box-shadow: 0 4px 0 rgba(49, 46, 129, 0.12);
}
.mapwrap--mentes .unit-banner__kicker {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.9;
  color: #fff;
}
.mapwrap--mentes .unit-banner__title {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}

/* Nodos = azulejos (cuadrados redondeados), no círculos */
.mapwrap--mentes .node { margin: 26px 0; }
.mapwrap--mentes .node__btn,
.mapwrap--mentes .node--lingo .node__btn {
  width: 88px !important;
  height: 88px !important;
  border-radius: 22px !important;
  font-size: 36px !important;
  border: 5px solid #fff !important;
  background: linear-gradient(180deg, #c4b5fd, #7c3aed) !important;
  box-shadow: 0 10px 0 #5b21b6, 0 14px 28px rgba(124, 58, 237, 0.28), inset 0 3px 0 rgba(255,255,255,.4) !important;
  filter: none !important;
  color: #fff !important;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.mapwrap--mentes .node__btn:active {
  transform: translateY(4px) scale(0.96) !important;
  box-shadow: 0 4px 0 rgba(49,46,129,.25), inset 0 2px 0 rgba(255,255,255,.35) !important;
}
.mapwrap--mentes .node--done .node__btn {
  background: linear-gradient(180deg, #86efac, #22c55e) !important;
  box-shadow: 0 10px 0 #15803d, inset 0 3px 0 rgba(255,255,255,.4) !important;
}
.mapwrap--mentes .node--active .node__btn {
  background: linear-gradient(180deg, #fde68a, #f59e0b) !important;
  box-shadow: 0 10px 0 #b45309, inset 0 3px 0 rgba(255,255,255,.5) !important;
  transform: scale(1.05);
}
.mapwrap--mentes .node--active::before {
  content: "¡YA!" !important;
  background: #7c3aed !important;
  color: #fff !important;
  border: 3px solid #fff;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  padding: 4px 12px;
  top: -28px;
}
.mapwrap--mentes .node--boss .node__btn {
  width: 102px !important;
  height: 102px !important;
  border-radius: 26px !important;
  font-size: 44px !important;
}
.mapwrap--mentes .node--locked .node__btn {
  background: linear-gradient(180deg, #e2e8f0, #94a3b8) !important;
  box-shadow: 0 10px 0 #64748b !important;
}

.mapwrap--mentes .node__label {
  margin-top: 12px;
  max-width: 160px;
  color: transparent;
  font-size: 0;
}
.mapwrap--mentes .node__labelpill {
  display: inline-block !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1.25;
  color: #312e81 !important;
  background: #fff !important;
  border: 3px solid #fff !important;
  border-radius: 14px;
  padding: 8px 12px;
  box-shadow: 0 6px 0 rgba(49, 46, 129, 0.12);
  pointer-events: none;
}

/* ========== Personalidad por perfil ========== */

/* Vibe Coding · índigo suave */
body.theme-mentes.theme-mentes #app,
#app.theme-mentes-map.theme-mentes-map,
body[data-world="mentes"] #app,
#app.theme-mentes-map {
  background: linear-gradient(180deg, #ede9fe 0%, #ddd6fe 22%, #fef3c7 48%, #d9f99d 78%, #bbf7d0 100%) !important;
}
.mapwrap--mentes.mapwrap--mentes .mappath .lingo-path-fg { stroke: #8b5cf6; }

/* TDAH · cielo foco */
body[data-world="tdah"] #app,
body.theme-tdah #app,
#app.theme-tdah-map {
  background: linear-gradient(180deg, #bae6fd 0%, #e0f2fe 25%, #fef9c3 50%, #bbf7d0 100%) !important;
}
.mapwrap--tdah .mappath .lingo-path-fg { stroke: #0ea5e9 !important; stroke-dasharray: 20 8; }
.mapwrap--tdah .unit-banner--lingo { background: linear-gradient(135deg, #38bdf8, #0284c7) !important; }
.mapwrap--tdah .unit-banner.u2 { background: linear-gradient(135deg, #60a5fa, #2563eb) !important; }
.mapwrap--tdah .unit-banner.u3 { background: linear-gradient(135deg, #34d399, #059669) !important; }
.mapwrap--tdah .unit-banner.u4 { background: linear-gradient(135deg, #fbbf24, #d97706) !important; }
.mapwrap--tdah .node__btn {
  background: linear-gradient(180deg, #7dd3fc, #0284c7) !important;
  box-shadow: 0 10px 0 #0369a1, inset 0 3px 0 rgba(255,255,255,.4) !important;
  border-radius: 50% !important; /* círculos = foco puntual */
}
.mapwrap--tdah .node--active::before { content: "¡FOCO!" !important; background: #0284c7 !important; }
body.theme-tdah .stat, #app.theme-tdah-map .stat {
  background: #e0f2fe !important; border-color: #7dd3fc !important;
}

/* TEA · teal calmado, azulejos */
body[data-world="tea"] #app,
body.theme-tea #app,
#app.theme-tea-map {
  background: linear-gradient(180deg, #ccfbf1 0%, #99f6e4 20%, #fef3c7 48%, #a7f3d0 100%) !important;
}
.mapwrap--tea .mappath .lingo-path-fg { stroke: #14b8a6 !important; stroke-dasharray: 10 10; }
.mapwrap--tea .unit-banner--lingo { background: linear-gradient(135deg, #2dd4bf, #0f766e) !important; }
.mapwrap--tea .unit-banner.u2 { background: linear-gradient(135deg, #5eead4, #0d9488) !important; }
.mapwrap--tea .unit-banner.u3 { background: linear-gradient(135deg, #67e8f9, #0891b2) !important; }
.mapwrap--tea .unit-banner.u4,
.mapwrap--tea .unit-banner.u5,
.mapwrap--tea .unit-banner.u6 { background: linear-gradient(135deg, #34d399, #047857) !important; }
.mapwrap--tea .unit-banner.u7,
.mapwrap--tea .unit-banner.u8 { background: linear-gradient(135deg, #a7f3d0, #059669) !important; }
.mapwrap--tea .unit-banner.u9,
.mapwrap--tea .unit-banner.u10 { background: linear-gradient(135deg, #5eead4, #0f766e) !important; }
.mapwrap--tea .unit-banner.u11 { background: linear-gradient(135deg, #fbbf24, #b45309) !important; }
.mapwrap--tea .unit-banner.u12 { background: linear-gradient(135deg, #86efac, #15803d) !important; }
.mapwrap--tea .node__btn {
  background: linear-gradient(180deg, #5eead4, #0d9488) !important;
  box-shadow: 0 10px 0 #115e59, inset 0 3px 0 rgba(255,255,255,.4) !important;
  border-radius: 18px !important; /* piezas tipo PECS */
}
.mapwrap--tea .node--active::before { content: "SIGUE" !important; background: #0f766e !important; }
body.theme-tea .stat, #app.theme-tea-map .stat {
  background: #ccfbf1 !important; border-color: #5eead4 !important;
}

/* TOC · lavanda suave, path en bucles visuales */
body[data-world="toc"] #app,
body.theme-toc #app,
#app.theme-toc-map {
  background: linear-gradient(180deg, #f3e8ff 0%, #e9d5ff 22%, #fce7f3 50%, #ddd6fe 100%) !important;
}
.mapwrap--toc .mappath .lingo-path-fg { stroke: #a855f7 !important; stroke-dasharray: 4 8 14 8; }
.mapwrap--toc .unit-banner--lingo { background: linear-gradient(135deg, #c084fc, #7e22ce) !important; }
.mapwrap--toc .unit-banner.u2 { background: linear-gradient(135deg, #e879f9, #a21caf) !important; }
.mapwrap--toc .unit-banner.u3 { background: linear-gradient(135deg, #a78bfa, #6d28d9) !important; }
.mapwrap--toc .unit-banner.u4 { background: linear-gradient(135deg, #f0abfc, #c026d3) !important; }
.mapwrap--toc .node__btn {
  background: linear-gradient(180deg, #e9d5ff, #a855f7) !important;
  box-shadow: 0 10px 0 #6b21a8, inset 0 3px 0 rgba(255,255,255,.4) !important;
  border-radius: 40% 40% 40% 40% / 45% 45% 45% 45% !important; /* blob suave */
}
.mapwrap--toc .node--active::before { content: "CALMA" !important; background: #7e22ce !important; }
body.theme-toc .stat, #app.theme-toc-map .stat {
  background: #f3e8ff !important; border-color: #d8b4fe !important;
}

/* TEC · naranja sensorial cálido */
body[data-world="tec"] #app,
body.theme-tec #app,
#app.theme-tec-map {
  background: linear-gradient(180deg, #ffedd5 0%, #fed7aa 24%, #fef3c7 50%, #bbf7d0 100%) !important;
}
.mapwrap--tec .mappath .lingo-path-fg { stroke: #f97316 !important; stroke-dasharray: 16 10; }
.mapwrap--tec .unit-banner--lingo { background: linear-gradient(135deg, #fb923c, #ea580c) !important; }
.mapwrap--tec .unit-banner.u2 { background: linear-gradient(135deg, #fbbf24, #d97706) !important; }
.mapwrap--tec .unit-banner.u3 { background: linear-gradient(135deg, #fdba74, #c2410c) !important; }
.mapwrap--tec .unit-banner.u4 { background: linear-gradient(135deg, #4ade80, #16a34a) !important; }
.mapwrap--tec .unit-banner.u5 { background: linear-gradient(135deg, #38bdf8, #0284c7) !important; }
.mapwrap--tec .node__btn {
  background: linear-gradient(180deg, #fdba74, #ea580c) !important;
  box-shadow: 0 10px 0 #c2410c, inset 0 3px 0 rgba(255,255,255,.4) !important;
  border-radius: 50% 50% 50% 50% / 40% 40% 60% 60% !important; /* gota / sensor */
}
.mapwrap--tec .node--active::before { content: "OK" !important; background: #ea580c !important; }
body.theme-tec .stat, #app.theme-tec-map .stat {
  background: #ffedd5 !important; border-color: #fdba74 !important;
}

/* Vibe mentes unit colors */
.mapwrap--mentes:not(.mapwrap--tdah):not(.mapwrap--tea):not(.mapwrap--toc):not(.mapwrap--tec) .unit-banner.u2 {
  background: linear-gradient(135deg, #818cf8, #4f46e5) !important;
}
.mapwrap--mentes:not(.mapwrap--tdah):not(.mapwrap--tea):not(.mapwrap--toc):not(.mapwrap--tec) .unit-banner.u3 {
  background: linear-gradient(135deg, #34d399, #059669) !important;
}
.mapwrap--mentes:not(.mapwrap--tdah):not(.mapwrap--tea):not(.mapwrap--toc):not(.mapwrap--tec) .unit-banner.u4 {
  background: linear-gradient(135deg, #38bdf8, #0284c7) !important;
}
.mapwrap--mentes:not(.mapwrap--tdah):not(.mapwrap--tea):not(.mapwrap--toc):not(.mapwrap--tec) .unit-banner.u5 {
  background: linear-gradient(135deg, #f472b6, #db2777) !important;
}
.mapwrap--mentes:not(.mapwrap--tdah):not(.mapwrap--tea):not(.mapwrap--toc):not(.mapwrap--tec) .unit-banner.u6 {
  background: linear-gradient(135deg, #a3e635, #65a30d) !important;
}
.mapwrap--mentes:not(.mapwrap--tdah):not(.mapwrap--tea):not(.mapwrap--toc):not(.mapwrap--tec) .unit-banner.u7 {
  background: linear-gradient(135deg, #fbbf24, #d97706) !important;
}
.mapwrap--mentes:not(.mapwrap--tdah):not(.mapwrap--tea):not(.mapwrap--toc):not(.mapwrap--tec) .unit-banner.u8 {
  background: linear-gradient(135deg, #f43f5e, #be123c) !important;
}