:root {
  --fondo: #f7f5f0;
  --papel: #ffffff;
  --texto: #1a1a1a;
  --suave: #4a4a4a;
  --azul: #0b4f9c;
  --azul-claro: #e3eefb;
  --amarillo: #ffd23f;
  --borde: #c9c4b8;
  font-size: 20px;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: Verdana, Tahoma, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
}
a { color: var(--azul); }
a:focus-visible, button:focus-visible { outline: 4px solid var(--amarillo); outline-offset: 2px; }

/* Cabecera */
.cabecera {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap;
  padding: .6rem 1rem;
  background: var(--azul); color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.marca { color: #fff; font-weight: bold; font-size: 1.2rem; text-decoration: none; }
.herramientas { display: flex; gap: .5rem; }
.herramientas button {
  font: inherit; font-weight: bold; min-width: 3rem; min-height: 2.6rem; padding: 0 .8rem;
  border: 2px solid #fff; border-radius: 10px; background: #fff; color: var(--azul); cursor: pointer;
}
.herramientas button.activo { background: var(--amarillo); border-color: var(--amarillo); color: var(--texto); }

/* Menú de temas: Inicio y un desplegable por grupo */
.menu { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem; margin-right: auto; }
.menu-grupo { position: relative; }
.menu-enlace {
  display: block; padding: .4rem .8rem; border-radius: 8px; cursor: pointer; user-select: none;
  color: #fff; text-decoration: none; font-weight: bold; list-style: none; white-space: nowrap;
}
.menu-enlace::-webkit-details-marker { display: none; }
.menu-enlace:hover { background: rgba(255,255,255,.15); }
.menu-enlace.activo { text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 3px; }
summary.menu-enlace::after { content: " ▾"; }
.menu-grupo[open] summary.menu-enlace { background: rgba(255,255,255,.2); }
.menu-grupo[open] summary.menu-enlace::after { content: " ▴"; }
.menu-grupo ul {
  position: absolute; left: 0; top: calc(100% + .4rem); z-index: 20;
  min-width: 17rem; max-height: calc(100vh - 6rem); overflow-y: auto;
  margin: 0; padding: .4rem 0; list-style: none;
  background: var(--papel); border-radius: 10px; box-shadow: 0 8px 20px rgba(0,0,0,.25);
}
.menu-grupo li { margin: 0; max-width: none; }
.menu-grupo li a { display: block; padding: .55rem 1.1rem; color: var(--texto); text-decoration: none; }
.menu-grupo li a:hover { background: var(--azul-claro); color: var(--azul); }
.menu-grupo li a.activo { color: var(--azul); font-weight: bold; }
.etiqueta { background: var(--amarillo); color: var(--texto); border-radius: 6px; padding: 0 .4rem; font-size: .8rem; }
main { max-width: 1100px; margin: 0 auto; padding: 1rem 1.5rem; }
.miga { margin: 0 0 .8rem; color: var(--suave); font-size: .9rem; }
h2.grupo { font-size: 1.7rem; color: var(--azul); margin: 2rem 0 .8rem; padding-bottom: .3rem; border-bottom: 4px solid var(--azul); }

/* Contenido del tema */
.tema { background: var(--papel); border-radius: 14px; padding: 1.2rem 1.6rem; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
h1 { font-size: 2rem; line-height: 1.25; color: var(--azul); margin: .3rem 0 1rem; }
h2 { font-size: 1.5rem; line-height: 1.3; margin: 2rem 0 .7rem; padding-bottom: .3rem; border-bottom: 3px solid var(--azul-claro); }
h3 { font-size: 1.2rem; margin: 1.4rem 0 .5rem; }
p, li { max-width: 46rem; }
li { margin-bottom: .5rem; }
figure { margin: 1.2rem 0; }
img { max-width: 100%; height: auto; }
figure img { border: 2px solid var(--borde); border-radius: 10px; background: #fff; }
figure img[src$=".svg"] { max-height: 12rem; padding: .5rem 1.5rem; }
figure img[src*="pantalla-"] { max-height: 34rem; padding: 0; border: 0; background: none; }
figure img[src$="-ordenador.svg"] { max-height: none; padding: 0; }
p img, li img, td img, h3 img, .consejo img { height: 1.7em; width: auto; vertical-align: middle; margin: 0 .15em; }
figcaption { color: var(--suave); font-size: .9rem; margin-top: .3rem; }
kbd {
  display: inline-block; padding: 0 .45rem; min-width: 1.6rem; text-align: center;
  background: #fff; border: 2px solid #777; border-bottom-width: 4px; border-radius: 6px;
  font-family: inherit; font-weight: bold; font-size: .9rem; line-height: 1.5;
}
.consejo {
  max-width: 46rem; margin: 1.2rem 0; padding: .9rem 1.1rem;
  background: #fff7d6; border-left: 8px solid var(--amarillo); border-radius: 8px;
}

/* Tarjetas */
.tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; margin: 1rem 0; }
.tarjeta { background: var(--fondo); border: 2px solid var(--borde); border-radius: 12px; padding: .9rem 1rem; }
.tarjeta h3 { margin-top: 0; color: var(--azul); }
.tarjeta figure { margin: .4rem 0; text-align: center; }
.tarjeta figure img { border: 0; background: transparent; max-height: 9rem; }
.tarjeta figcaption { display: none; }
.tarjeta p { margin: .4rem 0 0; }

/* Portada */
.entradilla { font-size: 1.1rem; }
.hoy {
  display: block; margin: 1rem 0 1.5rem; padding: 1.2rem 1.4rem;
  background: var(--amarillo); color: var(--texto); border-radius: 14px; text-decoration: none;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.hoy-etiqueta { display: block; font-weight: bold; text-transform: uppercase; font-size: .85rem; }
.hoy-titulo { display: block; font-size: 1.6rem; font-weight: bold; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1rem; }
.ficha {
  display: flex; flex-direction: column; align-items: center; gap: .6rem; padding: 1rem;
  background: var(--papel); border: 2px solid var(--borde); border-radius: 14px;
  color: var(--texto); text-decoration: none; font-weight: bold; font-size: 1.2rem; text-align: center;
}
.ficha:hover { border-color: var(--azul); }
.ficha img { width: 100%; height: 8rem; object-fit: contain; }

/* Botones de paso */
.boton {
  display: inline-block; padding: .8rem 1.2rem; min-height: 2.8rem;
  background: var(--azul); color: #fff; border-radius: 10px; text-decoration: none; font-weight: bold;
}
.pasos { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 1.5rem; }

/* Lectura en voz alta: resalta el párrafo que se lee */
.leyendo { background: var(--azul-claro); outline: 3px solid var(--azul-claro); border-radius: 4px; }

/* Móvil: el menú pasa arriba como botones */
@media (max-width: 800px) {
  .cabecera { padding: .5rem 16px; }
  .marca { flex: 1 1 100%; }
  .menu-grupo { position: static; }
  .menu-enlace { padding: .4rem .5rem; }
  .menu-grupo ul { left: 16px; right: 16px; top: 100%; min-width: 0; }
  main { padding: 1rem 16px; }
  .tema { padding: 1rem; }
  h1 { font-size: 1.6rem; }
  h2 { font-size: 1.3rem; }
}

/* Salir y pantalla de entrada */
.salir { color: #fff; font-weight: bold; align-self: center; padding: 0 .4rem; }
.entrar { max-width: 30rem; }
.entrar form { display: flex; flex-direction: column; gap: .4rem; margin-top: 1rem; }
.entrar label { font-weight: bold; margin-top: .6rem; }
.entrar input {
  font: inherit; font-size: 1.2rem; padding: .7rem .9rem;
  border: 3px solid var(--borde); border-radius: 10px; background: #fff;
}
.entrar input:focus { border-color: var(--azul); outline: none; }
.entrar .boton { font: inherit; font-weight: bold; font-size: 1.2rem; border: 0; cursor: pointer; margin-top: 1.2rem; padding: .9rem; }
.entrar-nota { color: var(--suave); font-size: .9rem; margin-top: 1.2rem; }
.aviso-error { background: #fbe3e3; border-left: 6px solid #a12020; padding: .7rem 1rem; border-radius: 6px; }

/* Ejercicios interactivos */
.ejercicio { margin: 2rem 0; padding: 1rem 1.2rem 1.2rem; max-width: 46rem; background: #f3f7fe; border: 3px solid var(--azul); border-radius: 16px; }
.ejercicio [hidden] { display: none !important; }
.ej-cab { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .6rem; }
.ej-num, .ej-hecho { color: #fff; font-weight: bold; border-radius: 8px; padding: .1rem .8rem; }
.ej-num { background: var(--azul); }
.ej-hecho { background: #2e7d32; }
.ej-pregunta p { font-size: 1.1rem; font-weight: bold; margin: .3rem 0 .8rem; }
.ej-pregunta .consejo { font-weight: normal; }
.ej-opciones, .ej-barajados { display: flex; flex-direction: column; gap: .6rem; }
.ej-op, .ej-paso {
  font: inherit; text-align: left; color: var(--texto); cursor: pointer;
  min-height: 3.2rem; padding: .8rem 1.1rem; background: #fff;
  border: 3px solid var(--borde); border-radius: 12px;
}
.ej-op:hover:not(:disabled), .ej-paso:hover { border-color: var(--azul); }
.ej-op img { height: 5.5rem; width: auto; vertical-align: middle; margin-right: 1rem; }
.ej-op kbd { font-size: .9rem; }
.ej-op.ok { background: #e6f4ea; border-color: #2e7d32; font-weight: bold; }
.ej-op.mal { background: #fff4d6; border-color: #f9ab00; opacity: .75; }
.ej-op:disabled { cursor: default; }
.ej-op:disabled:not(.ok):not(.mal) { opacity: .6; }
.ej-paso.mal { background: #fff4d6; border-color: #f9ab00; }
.ej-msg { min-height: 1.6em; margin: .8rem 0 .2rem; font-size: 1.15rem; font-weight: bold; }
.ej-msg.ok { color: #1b5e20; }
.ej-msg.mal { color: #8a4b00; }
.ej-expl, .ej-pista { margin: .6rem 0 0; padding: .7rem 1rem; border-radius: 8px; max-width: none; }
.ej-expl { background: #e6f4ea; border-left: 8px solid #2e7d32; }
.ej-pista { background: #fff4d6; border-left: 8px solid #f9ab00; }
.ej-acciones { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .6rem; }
.ej-boton {
  font: inherit; font-weight: bold; cursor: pointer; padding: .6rem 1.1rem;
  border: 3px solid var(--azul); border-radius: 10px; background: #fff; color: var(--azul);
}
.ej-boton.principal { background: var(--azul); color: #fff; margin-top: .6rem; }

/* Toca: tocar un sitio de la imagen */
.ej-toca-caja { text-align: center; margin: .5rem 0; }
.ej-toca { position: relative; display: block; width: 100%; margin: 0 auto; line-height: 0; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.ej-toca img { display: block; width: 100%; max-width: none; height: auto; border: 0; padding: 0; }
.ej-zona { position: absolute; box-sizing: border-box; border-radius: 12px; pointer-events: none; }
.ej-zona.ok { border: 4px solid #2e7d32; background: rgba(46, 125, 50, .2); }
.ej-zona.ayuda { border: 4px solid var(--azul); background: rgba(11, 87, 208, .15); animation: latido 1s ease-in-out infinite; }
.ej-toque { position: absolute; width: 2.2rem; height: 2.2rem; margin: -1.1rem 0 0 -1.1rem; border: 4px solid #f9ab00; border-radius: 50%; pointer-events: none; animation: desvanece 1.2s forwards; }
@keyframes latido { 50% { background: rgba(11, 87, 208, .35); } }
@keyframes desvanece { to { opacity: 0; transform: scale(1.6); } }

/* Ordena */
.ej-lista { display: none; }
.ej-hechos { margin: .4rem 0; padding-left: 0; list-style-position: inside; }
.ej-hechos li { max-width: none; margin-bottom: .4rem; padding: .5rem .8rem; background: #e6f4ea; border-left: 6px solid #2e7d32; border-radius: 6px; }

/* Ratón */
.ej-instr { font-size: 1.1rem; font-weight: bold; margin: .3rem 0 .6rem; }
.ej-arena { position: relative; height: 15rem; overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: manipulation; background: #fff; border: 3px dashed var(--borde); border-radius: 12px; }
.ej-bola { position: absolute; width: 4.5rem; height: 4.5rem; cursor: pointer; background: #2e7d32; border: 4px solid #1b5e20; border-radius: 50%; }
.ej-carpeta, .ej-carta { position: absolute; width: 6rem; text-align: center; line-height: 1.2; }
.ej-carpeta { cursor: pointer; }
.ej-carpeta svg, .ej-carta svg { display: block; margin: 0 auto .2rem; }
.ej-carpeta.sel span { background: var(--azul); color: #fff; padding: 0 .3rem; }
.ej-carta { cursor: grab; touch-action: none; z-index: 2; }
.ej-carta.agarrada { cursor: grabbing; opacity: .85; }
.ej-caja { position: absolute; right: 1rem; top: 50%; margin-top: -4rem; width: 9rem; height: 8rem; display: flex; align-items: center; justify-content: center; font-weight: bold; color: var(--azul); background: var(--azul-claro); border: 4px dashed var(--azul); border-radius: 12px; }
.ej-cuadro { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 1.4rem 2rem; text-align: center; font-weight: bold; cursor: pointer; background: var(--azul-claro); border: 4px solid var(--azul); border-radius: 12px; }
.ej-final { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; padding: 1rem; text-align: center; font-size: 1.2rem; font-weight: bold; color: #1b5e20; background: #e6f4ea; }

/* Escribe */
.ej-modelo { max-width: none; margin: .4rem 0 .8rem; font-size: 1.5rem; font-weight: bold; letter-spacing: .03em; white-space: pre-wrap; }
.ej-modelo .bien { color: #1b5e20; }
.ej-modelo .mal { color: #8a4b00; background: #fde7c4; border-bottom: 3px solid #f9ab00; }
.ej-modelo .pend { color: #555; }
.ej-campo { width: 100%; font: inherit; font-size: 1.3rem; padding: .7rem .9rem; background: #fff; border: 3px solid var(--borde); border-radius: 10px; }
.ej-campo:focus { border-color: var(--azul); outline: none; }
@media (max-width: 800px) { .ejercicio { padding: .8rem; } .ej-caja { width: 6.5rem; } }

/* Menú de ejercicios y enlaces entre clase y ejercicios */
.menu-grupo li.menu-titulo { padding: .5rem 1.1rem .1rem; font-size: .8rem; font-weight: bold; letter-spacing: .05em; text-transform: uppercase; color: var(--azul); }
.menu-grupo li.menu-titulo:not(:first-child) { margin-top: .3rem; border-top: 1px solid #e3e3e3; }
.ir-ejercicios { max-width: 46rem; margin: 1.5rem 0; padding: 1rem 1.2rem; background: #fff7d6; border-left: 8px solid var(--amarillo); border-radius: 10px; }
.ir-ejercicios p { margin: 0 0 .6rem; font-weight: bold; }
.boton.claro { background: #fff; color: var(--azul); box-shadow: inset 0 0 0 3px var(--azul); }
h3.subgrupo { margin: 1.4rem 0 .6rem; font-size: 1.2rem; color: var(--suave); }

/* Menú escondido en el móvil, con botón "Menú" */
.herramientas #menu-boton { display: none; background: var(--amarillo); border-color: var(--amarillo); color: var(--texto); }
@media (max-width: 800px) {
  .herramientas #menu-boton { display: inline-block; }
  .marca { order: 1; }
  .herramientas { order: 2; flex-wrap: wrap; }
  .menu { order: 3; flex: 1 1 100%; }
  .js .menu { display: none; }
  .js .menu.abierto { display: flex; }
  .cabecera { gap: .4rem; padding: .4rem 16px; }
  .marca { font-size: 1.1rem; }
  .herramientas { gap: .3rem; }
  .herramientas button, .salir { font-size: .85rem; min-width: 0; min-height: 2.3rem; padding: 0 .55rem; }
}
.herramientas #menu-boton::after { content: " ▾"; }
.herramientas #menu-boton[aria-expanded="true"]::after { content: " ▴"; }

/* Aviso flotante de acierto o fallo, siempre visible en la pantalla */
#ej-aviso {
  position: fixed; left: 0; right: 0; margin: 0 auto; width: max-content; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); z-index: 60;
  display: flex; align-items: center; gap: .8rem; max-width: calc(100% - 2rem);
  padding: .8rem 1.4rem .8rem 1rem; border-radius: 18px; color: #fff; font-size: 1.2rem; font-weight: bold; line-height: 1.3;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .4);
  opacity: 0; transform: translateY(24px); pointer-events: none; transition: opacity .2s, transform .2s;
}
#ej-aviso.ver { opacity: 1; transform: translateY(0); }
#ej-aviso.ok { background: #1b5e20; }
#ej-aviso.mal { background: #b45309; }
#ej-aviso svg { flex: 0 0 2.6rem; width: 2.6rem; height: 2.6rem; }

/* En los ejercicios de tocar, el ✔ o la ✖ salen justo donde has tocado */
.ej-zona.ok::after {
  content: ""; position: absolute; right: -.9rem; top: -.9rem; width: 2.2rem; height: 2.2rem; border-radius: 50%;
  background: #2e7d32 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 12.5l4.5 4.5L19 7.5' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}
.ej-toque {
  background: #f9ab00 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 7l10 10M17 7L7 17' fill='none' stroke='%233b2a00' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E") center / 70% no-repeat;
  animation-duration: 1.6s;
}
@media (max-width: 800px) { #ej-aviso { font-size: 1.1rem; } }

/* Grupos de ejercicios cerrados, se abren al tocarlos */
.menu-grupo ul ul { position: static; min-width: 0; max-height: none; overflow: visible; margin: 0; padding: 0; background: none; box-shadow: none; border-radius: 0; }
.menu-sub { border-top: 1px solid #e3e3e3; }
.menu-sub summary { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .6rem 1.1rem; cursor: pointer; user-select: none; list-style: none; font-weight: bold; color: var(--azul); }
.menu-sub summary::-webkit-details-marker { display: none; }
.menu-sub summary::after { content: "▸"; color: var(--suave); }
.menu-sub details[open] > summary::after { content: "▾"; }
.menu-sub summary:hover { background: var(--azul-claro); }
.menu-sub .cuenta { margin-left: auto; margin-right: .3rem; min-width: 1.6rem; padding: 0 .4rem; text-align: center; font-size: .8rem; color: var(--suave); background: #eef1f4; border-radius: 10px; }
.menu-sub-lista { list-style: none; }
.menu-sub-lista li a { padding-left: 1.9rem; }

.grupo-det { margin: .8rem 0; background: var(--papel); border: 2px solid var(--borde); border-radius: 12px; }
.grupo-det summary { display: flex; align-items: center; gap: .8rem; padding: .8rem 1rem; cursor: pointer; user-select: none; list-style: none; font-size: 1.2rem; font-weight: bold; color: var(--azul); }
.grupo-det summary::-webkit-details-marker { display: none; }
.grupo-det summary::before { content: "▸"; color: var(--suave); }
.grupo-det[open] > summary::before { content: "▾"; }
.grupo-det[open] { border-color: var(--azul); }
.grupo-det .cuenta { margin-left: auto; font-size: .85rem; font-weight: normal; color: var(--suave); }
.grupo-det .rejilla { padding: .2rem 1rem 1rem; }