/* "Lectura para peques": lectura + pregunta + pistas. Reutiliza el modal de
   juego-memoria (.juego-memoria-modal/__dialog/__close/__btn) y añade lo propio. */

/* ===== Compacto (entra sin scroll) + hovers suaves =====
   Va al inicio y luego se refinan estados; los overrides scoped al final ganan. */
.juego-lectura-modal .juego-memoria__dialog { padding: 18px 20px; }
.juego-lectura-modal .juego-memoria__head h3 { margin: 6px 0 2px; font-size: 1.2rem; }
.juego-lectura-modal .juego-memoria__subtitle { font-size: 0.86rem; margin: 0; }
.juego-lectura-modal .juego-memoria__body { margin-top: 12px; }
.juego-lectura-modal .juego-lectura__scene { font-size: 2.6rem; margin: 0 0 6px; letter-spacing: 4px; }
.juego-lectura-modal .juego-lectura__reading { padding: 11px 16px; margin-bottom: 10px; }
.juego-lectura-modal .juego-lectura__text { font-size: 1.18rem; line-height: 1.4; }
.juego-lectura-modal .juego-lectura__listen { margin-bottom: 8px; padding: 5px 12px; }
.juego-lectura-modal .juego-lectura__question { margin: 2px 0 10px; font-size: 1.1rem; }
.juego-lectura-modal .juego-lectura__options { gap: 8px; margin-bottom: 6px; }
.juego-lectura-modal .juego-lectura__option { padding: 11px 14px; font-size: 1.05rem; border-radius: 14px; border-width: 2px; }
.juego-lectura-modal .juego-lectura__option-emoji { font-size: 1.6rem; }
.juego-lectura-modal .juego-lectura__hint-btn { margin-top: 2px; padding: 8px 16px; }
.juego-lectura-modal .juego-lectura__hints { margin-top: 10px; gap: 6px; }
.juego-lectura-modal .juego-lectura__hint { padding: 8px 12px; font-size: 0.98rem; }
.juego-lectura-modal .juego-lectura__feedback { margin: 8px 0 0; }
.juego-lectura-modal .juego-lectura__repeat { padding: 11px 16px; margin-top: 10px; }
.juego-lectura-modal .juego-lectura__repeat-word { font-size: 1.35rem; }
.juego-lectura-modal .juego-memoria__actions { margin-top: 10px; }
.juego-lectura-modal .juego-lectura__themes { gap: 10px; }
.juego-lectura-modal .juego-lectura__theme { padding: 14px 18px; font-size: 1.15rem; }
.juego-lectura-modal .juego-lectura__theme-emoji { font-size: 2rem; }

/* Elegir tema */
.juego-lectura__themes {
	display: grid;
	gap: 12px;
}

.juego-lectura__theme {
	appearance: none;
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
	text-align: left;
	padding: 18px 20px;
	border-radius: 18px;
	border: 2px solid rgba(202, 215, 230, 0.95);
	background: #ffffff;
	font: inherit;
	font-size: 1.25rem;
	font-weight: 800;
	color: var(--pensamos-deep, #0d1c31);
	cursor: pointer;
}

.juego-lectura__theme:hover {
	border-color: color-mix(in srgb, var(--pensamos-accent, #2f80ed) 55%, #cbd8ea);
	background: color-mix(in srgb, var(--pensamos-accent, #2f80ed) 6%, #ffffff);
}

.juego-lectura__theme-emoji {
	font-size: 2.4rem;
	flex: 0 0 auto;
}

/* Escena visual de la lectura */
.juego-lectura__scene {
	text-align: center;
	font-size: 3.6rem;
	line-height: 1.1;
	letter-spacing: 6px;
	margin: 4px 0 8px;
}

.juego-lectura__reading {
	background: #f7fbff;
	border: 1px solid rgba(202, 215, 230, 0.9);
	border-radius: 16px;
	padding: 16px 18px;
	margin-bottom: 14px;
}

.juego-lectura__text {
	font-size: 1.35rem;
	line-height: 1.55;
	color: var(--pensamos-deep, #0d1c31);
	margin: 0;
	font-weight: 700;
	text-align: center;
}

/* "Ahora dilo tú" — modela la palabra para repetir (lenguaje expresivo) */
.juego-lectura__repeat {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	background: #eefaf3;
	border: 2px dashed #18a058;
	border-radius: 16px;
	padding: 14px 18px;
	margin-top: 14px;
}

.juego-lectura__repeat-label {
	font-weight: 700;
	color: #0f6f68;
}

.juego-lectura__repeat-word {
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--pensamos-deep, #0d1c31);
}

.juego-lectura__listen {
	appearance: none;
	border: 1px solid rgba(202, 215, 230, 0.95);
	background: #ffffff;
	border-radius: 999px;
	padding: 6px 14px;
	font: inherit;
	font-weight: 700;
	font-size: 0.9rem;
	cursor: pointer;
	color: var(--pensamos-deep, #0d1c31);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 12px;
}

.juego-lectura__listen:hover {
	border-color: color-mix(in srgb, var(--pensamos-accent, #2f80ed) 45%, #cbd8ea);
}

.juego-lectura__question {
	font-size: 1.2rem;
	font-weight: 800;
	color: var(--pensamos-deep, #0d1c31);
	margin: 4px 0 14px;
}

/* Opciones grandes con dibujo (emoji) */
.juego-lectura__options {
	display: grid;
	gap: 10px;
	margin-bottom: 8px;
}

.juego-lectura__option {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	text-align: left;
	padding: 14px 16px;
	border-radius: 16px;
	border: 2px solid rgba(202, 215, 230, 0.95);
	background: #ffffff;
	font: inherit;
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--pensamos-ink, #1f2a44);
	cursor: pointer;
}

.juego-lectura__option:hover:not([disabled]) {
	border-color: color-mix(in srgb, var(--pensamos-accent, #2f80ed) 55%, #cbd8ea);
	background: color-mix(in srgb, var(--pensamos-accent, #2f80ed) 6%, #ffffff);
}

.juego-lectura__option-emoji {
	font-size: 1.8rem;
	flex: 0 0 auto;
}

/* Blindaje contra el estilo global de <button> del tema (que pintaba alguna
   opción de azul sólido). El modal por delante gana en especificidad. */
.juego-lectura-modal .juego-memoria__body .juego-lectura__option,
.juego-lectura-modal .juego-memoria__body .juego-lectura__option:hover,
.juego-lectura-modal .juego-memoria__body .juego-lectura__option:focus,
.juego-lectura-modal .juego-memoria__body .juego-lectura__option:focus-visible,
.juego-lectura-modal .juego-memoria__body .juego-lectura__option:disabled {
	appearance: none;
	background: #ffffff;
	color: var(--pensamos-ink, #1f2a44);
	box-shadow: none;
	opacity: 1;
}

.juego-lectura-modal .juego-memoria__body .juego-lectura__option:hover:not([disabled]) {
	border-color: color-mix(in srgb, var(--pensamos-accent, #2f80ed) 55%, #cbd8ea);
	background: color-mix(in srgb, var(--pensamos-accent, #2f80ed) 6%, #ffffff);
}

.juego-lectura-modal .juego-memoria__body .juego-lectura__option.is-correct {
	border-color: #18a058;
	background: rgba(24, 160, 88, 0.14);
	color: var(--pensamos-deep, #0d1c31);
}

.juego-lectura-modal .juego-memoria__body .juego-lectura__option.is-wrong {
	border-color: #e0a800;
	background: rgba(224, 168, 0, 0.16);
	color: var(--pensamos-deep, #0d1c31);
}

.juego-lectura-modal .juego-memoria__body .juego-lectura__option * {
	color: inherit;
}

/* Pistas */
.juego-lectura__hint-btn {
	appearance: none;
	border: none;
	border-radius: 999px;
	padding: 10px 18px;
	font: inherit;
	font-weight: 800;
	cursor: pointer;
	background: #fde68a;
	color: #7c5b00;
	margin-top: 6px;
}

.juego-lectura-modal .juego-lectura__hint-btn:hover,
.juego-lectura-modal .juego-lectura__hint-btn:focus-visible { background: #fcd34d; color: #7c5b00; }

.juego-lectura__hint-btn:disabled {
	opacity: 0.5;
	cursor: default;
}

.juego-lectura__hints {
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
	display: grid;
	gap: 8px;
}

.juego-lectura__hint {
	background: #fffaf0;
	border: 1px solid #fde68a;
	border-radius: 12px;
	padding: 10px 14px;
	font-size: 1.05rem;
	color: #5a4a00;
	display: flex;
	gap: 8px;
	align-items: flex-start;
}

.juego-lectura__feedback {
	font-size: 1.1rem;
	font-weight: 800;
	margin: 12px 0 0;
	min-height: 1.4em;
}

.juego-lectura__feedback.is-good { color: #18a058; }
.juego-lectura__feedback.is-soft { color: #b07a00; }

@media (max-width: 480px) {
	.juego-lectura__text { font-size: 1.1rem; }
	.juego-lectura__emoji { font-size: 2.4rem; }
	.juego-lectura__option { font-size: 1.05rem; }
}

/* ===== Hovers suaves y consistentes (al final: ganan en cascada) ===== */
.juego-lectura-modal .juego-lectura__theme {
	transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease;
}

.juego-lectura-modal .juego-lectura__theme:hover,
.juego-lectura-modal .juego-lectura__theme:focus-visible {
	border-color: var(--pensamos-accent, #2f80ed);
	background: #f3f8ff;
	box-shadow: 0 3px 12px rgba(47, 128, 237, 0.12);
	outline: none;
}

.juego-lectura-modal .juego-memoria__body .juego-lectura__option {
	transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease;
}

.juego-lectura-modal .juego-memoria__body .juego-lectura__option:hover:not([disabled]),
.juego-lectura-modal .juego-memoria__body .juego-lectura__option:focus-visible:not([disabled]) {
	border-color: var(--pensamos-accent, #2f80ed);
	background: #f3f8ff;
	box-shadow: 0 2px 10px rgba(47, 128, 237, 0.10);
	outline: none;
}

.juego-lectura-modal .juego-lectura__listen:hover,
.juego-lectura-modal .juego-lectura__listen:focus-visible {
	border-color: var(--pensamos-accent, #2f80ed);
	background: #f3f8ff;
	outline: none;
}