/*
 * App infantil estilo Duolingo (página /juego/). Scope: body.pensamos-kids-hub.
 * Sidebar de secciones + camino de niveles. En móvil el sidebar pasa a barra inferior.
 */

/* Quitar chrome de "Pensamos Kids" en esta pantalla */
/* Ocultar el hub server-render YA por CSS (antes de pintar) para que NO haya
   flash del topbar/cards antiguos antes de que kids-app.js monte la app. */
body.pensamos-kids-hub .pensamos-course-guide { display: none !important; }
body.pensamos-kids-hub .site-footer,
body.pensamos-kids-hub .ast-above-footer-wrap { display: none !important; }
body.pensamos-kids-hub #main,
body.pensamos-kids-hub #primary,
body.pensamos-kids-hub .site-content .ast-container { max-width: none; width: 100%; padding: 0; margin: 0; }
body.pensamos-kids-hub #content { padding: 0; }

.kids-app {
	--kids-blue: #4f7cff;
	--kids-path-shift: 96px;
	display: flex;
	align-items: stretch;
	width: 100%;
	min-width: 0;
	min-height: 86vh;
	background:
		radial-gradient(circle at 18% -8%, rgba(79, 124, 255, 0.14), transparent 40%),
		linear-gradient(180deg, #eef4ff 0%, #f8fbff 50%, #ffffff 100%);
	font-family: inherit;
	color: var(--pensamos-ink, #1f2a44);
}
.kids-app *, .kids-app *::before, .kids-app *::after { box-sizing: border-box; }

/* Sidebar */
.kids-app__sidebar {
	flex: 0 0 232px;
	width: 232px;
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border-right: 2px solid #e7eefb;
	padding: 20px 14px;
	position: sticky;
	top: 0;
	align-self: flex-start;
	min-height: 86vh;
}
.kids-app__brand {
	display: flex; align-items: center; gap: 8px;
	font-size: 1.15rem; font-weight: 800;
	color: var(--pensamos-deep, #0d1c31);
	padding: 4px 8px 18px;
}
.kids-app__nav-list { display: flex; flex-direction: column; gap: 8px; }
.kids-app__nav {
	display: flex; align-items: center; gap: 12px;
	padding: 12px 14px;
	border: 2px solid transparent;
	border-radius: 16px;
	background: transparent;
	font-size: 1.02rem; font-weight: 800; color: #51618a;
	cursor: pointer; text-align: left; width: 100%;
	transition: background 0.15s ease;
}
.kids-app__nav:hover,
.kids-app__nav:focus-visible { background: #f3f7ff; color: var(--pensamos-deep, #0d1c31); }
.kids-app__nav:focus-visible,
.kids-app__profile:focus-visible,
.kids-app__node:focus-visible {
	outline: 3px solid #3257c9;
	outline-offset: 3px;
}
.kids-app__nav.is-active { background: #eaf1ff; color: var(--pensamos-deep, #0d1c31); border-color: #c7d6f7; }
.kids-app__nav[disabled] { opacity: 0.45; cursor: default; }
.kids-app__nav-icon { font-size: 1.5rem; line-height: 1; width: 30px; text-align: center; }
.kids-app__nav-short { display: none; }

/* Participación: fuera del listado de juegos y herramientas. */
.kids-app__participate {
	margin-top: auto;
	padding: 18px 2px 0;
	border-top: 2px dashed #d9cef8;
}
.kids-app__participate-kicker {
	display: block;
	margin: 0 8px 7px;
	font-size: 0.68rem;
	font-weight: 900;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: #6f52a3;
}
.kids-app__suggestions-entry {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 12px;
	border: 2px solid #9a78d1;
	border-radius: 18px;
	background: linear-gradient(135deg, #fff7cc 0%, #f5eaff 100%);
	color: #362353;
	text-align: left;
	cursor: pointer;
	box-shadow: 0 5px 0 #d8c4ef;
	transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}
.kids-app__suggestions-entry:hover,
.kids-app__suggestions-entry:focus-visible {
	color: #362353;
	filter: brightness(1.02);
	transform: translateY(-2px);
	box-shadow: 0 7px 0 #d8c4ef;
}
.kids-app__suggestions-entry:focus-visible { outline: 3px solid #4f7cff; outline-offset: 3px; }
.kids-app__suggestions-entry:active { transform: translateY(5px); box-shadow: none; }
.kids-app__suggestions-entry.is-active { border-color: #5d3d91; background: linear-gradient(135deg, #ffed91 0%, #e7d5ff 100%); }
.kids-app__suggestions-icon {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	flex: 0 0 38px;
	border-radius: 50%;
	background: #fff;
	font-size: 1.35rem;
}
.kids-app__suggestions-copy { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.kids-app__suggestions-copy strong { font-size: 0.9rem; line-height: 1.15; }
.kids-app__suggestions-copy small { color: #6f5d82; font-size: 0.75rem; font-weight: 700; }
.kids-app__suggestions-short { display: none; font-size: 0.64rem; font-weight: 900; }
.kids-app__suggestions-badge {
	position: absolute;
	top: -10px;
	right: -7px;
	padding: 3px 7px;
	border: 2px solid #fff;
	border-radius: 999px;
	background: #b51f5b;
	color: #fff;
	font-size: 0.62rem;
	font-weight: 900;
	line-height: 1;
}

/* Main + camino */
.kids-app__main { flex: 1; min-width: 0; padding: 22px 18px 90px; max-width: 720px; margin: 0 auto; width: 100%; }
.kids-app__stars-total {
	display: inline-flex; align-items: center; gap: 6px;
	background: #fff7e6; color: #7a4e00; border: 2px solid #ffe3a6;
	font-weight: 800; padding: 6px 14px; border-radius: 999px; font-size: 1rem;
}
.kids-app__head {
	display: flex; align-items: center; gap: 16px;
	margin: 18px 0 4px; padding: 18px 20px;
	background: #ffffff; border: 2px solid #e7eefb; border-radius: 22px;
}
.kids-app__head > div { min-width: 0; }
.kids-app__head-emoji { font-size: 2.6rem; line-height: 1; }
.kids-app__head-title { margin: 0; font-size: 1.5rem; font-weight: 800; color: var(--pensamos-deep, #0d1c31); overflow-wrap: anywhere; }
.kids-app__head-sub { margin: 2px 0 0; color: #51618a; font-size: 0.98rem; }

.kids-app__path { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 26px; }
.kids-app__node-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; transform: translateX(calc((var(--i) - 0.5) * var(--kids-path-shift))); }

.kids-app__node {
	width: 92px; height: 92px; border-radius: 50%;
	border: 0; cursor: pointer;
	display: grid; place-items: center;
	background: #c7d6f7; box-shadow: 0 6px 0 #a9c0f0;
	transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.kids-app__node:hover { transform: translateY(-2px); box-shadow: 0 8px 0 #a9c0f0; }
.kids-app__node:active { transform: translateY(6px); box-shadow: 0 0 0 #a9c0f0; }
.kids-app__node-icon { font-size: 2.7rem; line-height: 1; }
.kids-app__node-meta { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.kids-app__node-label { max-width: 150px; font-weight: 800; color: var(--pensamos-deep, #0d1c31); font-size: 1rem; text-align: center; overflow-wrap: anywhere; }
.kids-app__node-stars { font-size: 1.05rem; letter-spacing: 1px; }
.kids-app__star { color: #5f6b7f; }
.kids-app__star.is-on { color: #7a4e00; }
.kids-app__empty { text-align: center; color: #51618a; font-size: 1.1rem; padding: 40px 0; }
.kids-app__empty a { display: inline-flex; align-items: center; min-height: 44px; }

/* Tonos por sección */
.kids-app__nav[data-tone="mates"].is-active { border-color: #c7d6f7; }
.kids-app__node[data-tone="mates"] { background: #dbe6ff; box-shadow: 0 6px 0 #b4caf6; }
.kids-app__node[data-tone="mates"]:hover { box-shadow: 0 8px 0 #b4caf6; }
.kids-app__node[data-tone="lectura"] { background: #d8f3e3; box-shadow: 0 6px 0 #a6dcbb; }
.kids-app__node[data-tone="lectura"]:hover { box-shadow: 0 8px 0 #a6dcbb; }
.kids-app__node[data-tone="logica"] { background: #ece2ff; box-shadow: 0 6px 0 #cdbcf6; }
.kids-app__node[data-tone="logica"]:hover { box-shadow: 0 8px 0 #cdbcf6; }
.kids-app__node[data-tone="comunicacion"] { background: #ffe6d6; box-shadow: 0 6px 0 #ffc4a3; }
.kids-app__node[data-tone="comunicacion"]:hover { box-shadow: 0 8px 0 #ffc4a3; }
.kids-app__node[data-tone="ingles"] { background: #d6f3ef; box-shadow: 0 6px 0 #a6e0d8; }
.kids-app__node[data-tone="ingles"]:hover { box-shadow: 0 8px 0 #a6e0d8; }
.kids-app__node[data-tone="cocina"] { background: #ffe3b0; box-shadow: 0 6px 0 #f3c970; }
.kids-app__node[data-tone="cocina"]:hover { box-shadow: 0 8px 0 #f3c970; }
.kids-app__node[data-tone="vida"] { background: #ffd9ec; box-shadow: 0 6px 0 #f3b3d6; }
.kids-app__node[data-tone="vida"]:hover { box-shadow: 0 8px 0 #f3b3d6; }

/* Perfil */
.kids-app__profile {
	display: flex; align-items: center; gap: 10px; width: 100%;
	border: 2px solid #e7eefb; border-radius: 16px; background: #fff;
	padding: 8px 10px; margin: 0 0 14px; cursor: pointer;
	font-weight: 800; color: var(--pensamos-deep, #0d1c31); text-align: left;
}
.kids-app__profile:hover,
.kids-app__profile:focus-visible { background: #f3f7ff; color: var(--pensamos-deep, #0d1c31); }
.kids-app__profile.is-active { border-color: #c7d6f7; background: #eaf1ff; }
.kids-app__avatar {
	width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
	background: #3257c9; color: #fff;
	display: grid; place-items: center; font-weight: 800; font-size: 1rem;
}
.kids-app__profile-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kids-app__profile-fab { display: none; }
.kids-app__profile-card {
	background: #fff; border: 2px solid #e7eefb; border-radius: 22px;
	padding: 26px 20px; margin-top: 18px; text-align: center;
	display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.kids-app__avatar--big { width: 84px; height: 84px; font-size: 2.4rem; }
.kids-app__profile-greet { font-size: 1.3rem; font-weight: 800; color: var(--pensamos-deep, #0d1c31); margin: 4px 0 0; }
.kids-app__profile-stars { background: #fff7e6; color: #7a4e00; border: 2px solid #ffe3a6; border-radius: 999px; padding: 6px 16px; font-weight: 800; }
.kids-app__profile-actions { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 280px; margin-top: 8px; }
.kids-app__salir {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 12px 18px; border-radius: 14px; border: 2px solid #dbe6fb;
	background: #fff; font-weight: 800; color: #51618a; text-decoration: none;
}
.kids-app__salir:hover,
.kids-app__salir:focus-visible { border-color: #c7d6f7; color: #51618a; }
.kids-app__salir--primary,
.kids-app__salir--primary:hover,
.kids-app__salir--primary:focus-visible { background: #3257c9; color: #fff; border-color: #3257c9; box-shadow: 0 4px 0 #203f9e; }

/* Bloqueo progresivo */
.kids-app__node.is-locked { background: #e9edf4; box-shadow: 0 6px 0 #d4dbe7; cursor: default; }
.kids-app__node.is-locked .kids-app__node-icon { filter: grayscale(1); opacity: 0.7; font-size: 2rem; }
.kids-app__node.is-locked:hover { transform: none; box-shadow: 0 6px 0 #d4dbe7; }

/* Nodo actual: anillo que late para indicar dónde jugar (no mueve el botón) */
.kids-app__node { position: relative; }
.kids-app__node.is-current::after {
	content: ''; position: absolute; inset: -6px; border-radius: 50%;
	border: 3px solid rgba(79, 124, 255, 0.55); pointer-events: none;
	animation: kids-ring 1.5s ease-out infinite;
}
@keyframes kids-ring {
	0% { transform: scale(1); opacity: 0.85; }
	100% { transform: scale(1.35); opacity: 0; }
}

/* Entrada de los nodos */
.kids-app__node-wrap { animation: kids-pop 0.32s ease both; }
@keyframes kids-pop {
	from { opacity: 0; transform: translateX(calc((var(--i) - 0.5) * var(--kids-path-shift))) scale(0.8); }
	to { opacity: 1; transform: translateX(calc((var(--i) - 0.5) * var(--kids-path-shift))) scale(1); }
}

/* Sacudida al tocar un nivel bloqueado */
.kids-app__node.is-shake { animation: kids-shake 0.4s; }
@keyframes kids-shake {
	0%, 100% { transform: translateX(0); }
	20%, 60% { transform: translateX(-7px); }
	40%, 80% { transform: translateX(7px); }
}

@media (prefers-reduced-motion: reduce) {
	.kids-app__node.is-current::after, .kids-app__node-wrap, .kids-app__node.is-shake { animation: none; }
}

/* Móvil: sidebar -> barra inferior fija */
@media (max-width: 820px) {
	.kids-app { flex-direction: column; }
	.kids-app__sidebar {
		position: fixed; left: 0; right: 0; bottom: 0; top: auto;
		width: auto; flex: none; min-height: 0;
		flex-direction: row; align-items: center; gap: 6px;
		border-right: 0; border-top: 2px solid #e7eefb;
		padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
		z-index: 60; box-shadow: 0 -6px 18px rgba(13, 28, 49, 0.08);
	}
	.kids-app__brand { display: none; }
	.kids-app__profile { display: none; }
	.kids-app__profile-fab {
		display: flex; position: fixed; top: 10px; right: 10px; z-index: 61;
		width: 44px; height: 44px; border-radius: 50%; border: 2px solid #e7eefb;
		background: #fff; align-items: center; justify-content: center; cursor: pointer;
		box-shadow: 0 4px 12px rgba(13, 28, 49, 0.12);
	}
	.kids-app__nav-list { flex: 1 1 auto; min-width: 0; flex-direction: row; justify-content: flex-start; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
	.kids-app__nav-list::-webkit-scrollbar { display: none; }
	.kids-app__nav { flex: 0 0 auto; width: 62px; min-width: 62px; flex-direction: column; gap: 2px; padding: 6px 2px; font-size: 0.7rem; border-radius: 12px; align-items: center; text-align: center; }
	.kids-app__nav-icon { font-size: 1.4rem; width: auto; }
	.kids-app__nav-label { font-size: 0.66rem; line-height: 1.1; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.kids-app__participate { flex: 0 0 66px; margin: 0; padding: 0 0 0 6px; border-top: 0; border-left: 2px solid #ded3f2; }
	.kids-app__participate-kicker, .kids-app__suggestions-copy { display: none; }
	.kids-app__suggestions-entry {
		width: 60px; min-width: 60px; min-height: 54px;
		flex-direction: column; justify-content: center; gap: 1px;
		padding: 5px 2px; border-radius: 13px; text-align: center;
		box-shadow: 0 3px 0 #d8c4ef;
	}
	.kids-app__suggestions-entry:hover,
	.kids-app__suggestions-entry:focus-visible { transform: none; box-shadow: 0 3px 0 #d8c4ef; }
	.kids-app__suggestions-entry:active { transform: translateY(3px); box-shadow: none; }
	.kids-app__suggestions-icon { display: block; width: auto; height: auto; flex: none; background: transparent; font-size: 1.35rem; }
	.kids-app__suggestions-short { display: block; }
}

/* Pantallas muy estrechas: barra inferior solo con iconos (6 secciones caben) */
@media (max-width: 520px) {
	.kids-app { --kids-path-shift: 64px; }
	.kids-app__nav-label { display: none; }
	.kids-app__nav-short { display: block; font-size: 0.6rem; line-height: 1.05; white-space: nowrap; font-weight: 800; }
	.kids-app__nav-icon { font-size: 1.35rem; }
	.kids-app__main { padding: 16px 14px 96px; }
	.kids-app__node { width: 80px; height: 80px; }
	.kids-app__node-icon { font-size: 2.3rem; }
}