/* ENTRENO · diseño mobile-first, tranquilo y con vida. Reglas de interfaz (§5.5):
   nada de presión visual, botones grandes, una cosa cada vez, legible sin acercar. */
:root{
  --bg1:#e8f3f1; --bg2:#eef2fb; --card:#ffffff; --ink:#1f2937; --muted:#6b7280;
  --acc:#0f766e; --acc-soft:#d5efe9; --acc2:#4f46e5; --ok:#0f766e; --ok-soft:#d7f2e7; --warn:#b45309; --warn-soft:#fdf2e0;
  --no:#a05860; --no-soft:#f7e7e9;   /* rojo SUAVE y tranquilo para el fallo (§5.5: nunca rojo agresivo) */
  --line:#e5e7eb; --shadow:0 10px 30px rgba(15,118,110,.10);
}
@media (prefers-color-scheme: dark){
  :root{ --bg1:#0b1220; --bg2:#0e1526; --card:#151d2e; --ink:#e8eef7; --muted:#93a1b5;
    --acc:#2dd4bf; --acc-soft:#123a37; --acc2:#818cf8; --ok:#2dd4bf; --ok-soft:#123a37; --warn:#f4b45f; --warn-soft:#3a2c14;
    --no:#e6a3ab; --no-soft:#39262a; --line:#25324a; --shadow:0 10px 30px rgba(0,0,0,.35); }
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; height:100%; }
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  color:var(--ink); background:linear-gradient(160deg,var(--bg1),var(--bg2)); background-attachment:fixed;
  -webkit-font-smoothing:antialiased; overscroll-behavior:none;
}
#app{ min-height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:max(20px,env(safe-area-inset-top)) 20px max(20px,env(safe-area-inset-bottom)); }
.cargando{ color:var(--muted); }

.pantalla{ width:100%; max-width:460px; animation:aparece .35s ease; }
@keyframes aparece{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }

.card{ background:var(--card); border-radius:24px; box-shadow:var(--shadow); padding:28px 24px; }
.marca{ text-align:center; margin-bottom:8px; }
.marca .logo{ width:56px; height:56px; border-radius:18px; margin:0 auto 10px;
  background:linear-gradient(135deg,var(--acc),var(--acc2)); display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:26px; box-shadow:0 6px 16px rgba(15,118,110,.35); }
.marca h1{ font-size:22px; margin:0; letter-spacing:.2px; }
.marca p{ color:var(--muted); font-size:13px; margin:4px 0 0; }

.saludo{ text-align:center; margin-bottom:18px; }
.saludo h2{ font-size:24px; margin:0 0 4px; }
.saludo p{ color:var(--muted); margin:0; font-size:15px; }

label{ display:block; font-size:13px; font-weight:600; color:var(--muted); margin:14px 0 6px; }
input[type=text],input[type=password],input.resp{
  width:100%; border:2px solid var(--line); border-radius:14px; padding:14px 16px; font-size:17px;
  background:transparent; color:var(--ink); outline:none; transition:border-color .15s;
}
input:focus{ border-color:var(--acc); }

button{ font-family:inherit; cursor:pointer; border:none; }
.btn{ width:100%; padding:16px; border-radius:16px; font-size:17px; font-weight:700; color:#fff;
  background:linear-gradient(135deg,var(--acc),var(--acc2)); box-shadow:0 6px 16px rgba(15,118,110,.30);
  transition:transform .08s, opacity .15s; }
.btn:active{ transform:scale(.985); }
.btn:disabled{ opacity:.5; }
.btn.grande{ padding:20px; font-size:19px; }
.btn.suave{ background:none; color:var(--muted); box-shadow:none; font-weight:600; font-size:15px; padding:12px; }
.btn.suave:active{ transform:none; color:var(--ink); }

.aviso{ font-size:13px; color:var(--warn); background:var(--warn-soft); border-radius:12px; padding:10px 12px; margin-top:12px; text-align:center; }

/* ── Elección de ejercicio (home) ── */
.elige{ text-align:center; color:var(--muted); font-size:14px; font-weight:600; margin:6px 0 10px; }
.ejlist{ display:flex; flex-direction:column; gap:10px; margin-bottom:8px; }
.ejopt{ display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:14px; align-items:center;
  text-align:left; background:var(--card); border:2px solid var(--line); border-radius:18px; padding:14px 16px; transition:transform .08s, border-color .15s, background .15s; }
.ejopt:active{ transform:scale(.99); }
.ejopt:hover{ border-color:var(--acc); }
.ejopt .ejic{ grid-row:1 / span 2; font-size:30px; }
.ejopt .ejnom{ font-size:17px; font-weight:700; color:var(--ink); }
.ejopt .ejsub{ font-size:13px; color:var(--muted); }
.ejopt.cargando-opt{ opacity:.6; }

/* ── Ánimo del día (1-5) ── */
.animo{ display:flex; gap:8px; justify-content:center; margin:8px 0 4px; }
.animo button{ flex:1; aspect-ratio:1; border-radius:16px; border:2px solid var(--line); background:transparent;
  font-size:26px; transition:transform .1s, border-color .15s, background .15s; }
.animo button.sel{ border-color:var(--acc); background:var(--acc-soft); transform:translateY(-2px); }
.animo-txt{ text-align:center; color:var(--muted); font-size:13px; min-height:18px; margin-bottom:14px; }

/* ── Ejercicio ── */
.ej-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.ej-salir{ background:none; color:var(--muted); font-size:22px; line-height:1; padding:6px 10px; border-radius:12px; }
.puntos{ display:flex; gap:6px; }
.punto{ width:9px; height:9px; border-radius:50%; background:var(--line); transition:background .2s; }
.punto.hecho{ background:var(--acc); }
.punto.now{ background:var(--acc2); transform:scale(1.25); }
.enunciado{ text-align:center; font-size:44px; font-weight:800; letter-spacing:1px; margin:34px 0 22px; }
.feedback{ text-align:center; min-height:26px; font-size:16px; font-weight:600; margin-top:14px; transition:opacity .2s; }
.feedback.ok{ color:var(--ok); }
.feedback.no{ color:var(--muted); }

/* ── Fin ── */
.fin{ text-align:center; }
.fin .emoji{ font-size:52px; margin-bottom:6px; }
.fin h2{ font-size:24px; margin:6px 0; }
.fin p{ color:var(--muted); font-size:16px; margin:6px 0 20px; }
.fin .sube{ color:var(--ok); font-weight:700; }
.fin .baja{ color:var(--muted); font-weight:600; }

/* ── Ejercicio con teclado propio ── */
.ejcard .enunciado{ margin:16px 0 4px; font-size:40px; }
.respbox{ min-height:60px; border:2px solid var(--line); border-radius:16px; display:flex; align-items:center; justify-content:flex-end; padding:6px 18px; margin-top:8px; }
.respbox.vacio{ border-style:dashed; }
.resp-num{ font-size:36px; font-weight:800; letter-spacing:2px; min-height:42px; line-height:42px; }
.resp-hint{ text-align:right; color:var(--muted); font-size:11px; margin:5px 6px 0; opacity:.7; }

/* Feedback en pastilla: verde claro / rojo SUAVE (§5.5, nunca agresivo) */
.fb-pill{ display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:999px; font-size:16px; font-weight:700; animation:pop .2s ease; }
.fb-pill.ok{ background:var(--ok-soft); color:var(--ok); }
.fb-pill.no{ background:var(--no-soft); color:var(--no); }
.fb-ic{ display:inline-flex; width:22px; height:22px; border-radius:50%; align-items:center; justify-content:center; font-size:13px; color:#fff; }
.fb-pill.ok .fb-ic{ background:var(--ok); }
.fb-pill.no .fb-ic{ background:var(--no); }
@keyframes pop{ from{ transform:scale(.9); opacity:0; } to{ transform:none; opacity:1; } }

/* Teclado numérico propio (grande, para el pulgar) */
.keypad{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:14px; }
.key{ aspect-ratio:1.6; border-radius:16px; border:2px solid var(--line); background:var(--card); color:var(--ink); font-size:26px; font-weight:700; transition:transform .06s, background .12s; }
.key:active{ transform:scale(.94); background:var(--acc-soft); }
.key-ok{ background:linear-gradient(135deg,var(--acc),var(--acc2)); color:#fff; border:none; }
.key-sec{ color:var(--muted); }

/* Deslizador de dirección de escritura (cálculo). Siempre abajo del teclado. */
.modo-sw{ position:relative; display:grid; grid-template-columns:1fr 1fr; margin-top:16px; background:var(--acc-soft);
  border-radius:14px; padding:4px; overflow:hidden; }
.modo-thumb{ position:absolute; top:4px; left:4px; width:calc(50% - 4px); bottom:4px; border-radius:11px;
  background:var(--card); box-shadow:0 2px 8px rgba(15,118,110,.18); transition:transform .22s cubic-bezier(.4,.1,.2,1); }
.modo-op{ position:relative; z-index:1; background:none; padding:11px 6px; border-radius:11px; font-size:13.5px; font-weight:700;
  color:var(--muted); transition:color .18s; }
.modo-op.on{ color:var(--acc); }

/* Memoria de dígitos: intro, flash y recuerdo */
.mem-intro{ text-align:center; padding:14px 4px 6px; }
.mem-modo{ display:inline-block; font-size:20px; font-weight:800; padding:8px 18px; border-radius:999px; margin-bottom:10px; }
.mem-modo.directa{ background:var(--acc-soft); color:var(--acc); }
.mem-modo.inversa{ background:var(--warn-soft); color:var(--warn); }
.mem-sub{ color:var(--muted); font-size:15px; margin:6px 0 2px; }
.mem-long{ color:var(--ink); font-size:14px; font-weight:700; margin:2px 0 18px; opacity:.8; }
.mem-flash{ display:flex; align-items:center; justify-content:center; min-height:220px; }
.flash{ font-size:96px; font-weight:800; letter-spacing:2px; color:var(--acc); opacity:0; }
.flash.vis{ opacity:1; animation:flashin .18s ease; }
@keyframes flashin{ from{ transform:scale(.7); opacity:0; } to{ transform:scale(1); opacity:1; } }
.mem-recall{ padding-top:6px; }
.mem-pide{ text-align:center; font-size:16px; margin:8px 0 6px; }
.seq{ letter-spacing:2px; }

/* Palacio de la memoria (método de loci): intro/ruta, estudio y recuerdo */
.pal-intro{ text-align:center; padding:6px 2px; }
.pal-ic{ font-size:40px; margin-bottom:4px; }
.pal-intro h2{ font-size:21px; margin:6px 0 8px; }
.pal-txt{ color:var(--muted); font-size:14.5px; line-height:1.5; margin:0 0 16px; }
.pal-ruta{ display:flex; flex-direction:column; gap:6px; margin-bottom:18px; text-align:left; }
.pal-parada{ display:flex; align-items:center; gap:10px; background:var(--acc-soft); border-radius:12px; padding:9px 14px; font-size:14.5px; font-weight:600; }
.pal-num{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:var(--acc); color:#fff; font-size:12px; font-weight:800; flex:none; }
.pal-estudio{ text-align:center; padding:10px 2px 4px; }
.pal-contador{ color:var(--muted); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; margin-bottom:10px; }
.pal-locus{ display:inline-block; font-size:15px; font-weight:700; color:var(--acc); background:var(--acc-soft); padding:6px 16px; border-radius:999px; margin-bottom:14px; }
.pal-item{ font-size:26px; font-weight:800; margin-bottom:10px; }
.pal-imagen{ color:var(--muted); font-size:15px; line-height:1.5; margin:0 0 22px; }
.pal-recall{ padding-top:4px; }
.pal-pide{ text-align:center; font-size:16px; margin:8px 0 16px; }
.pal-opciones{ display:flex; flex-direction:column; gap:10px; }
.pal-op{ text-align:left; background:var(--card); border:2px solid var(--line); border-radius:14px; padding:14px 16px; font-size:15.5px; font-weight:600; color:var(--ink); transition:transform .08s, border-color .15s, background .15s; }
.pal-op:active{ transform:scale(.99); }
.pal-op:disabled{ opacity:.75; }
.pal-op.correcta{ border-color:var(--ok); background:var(--ok-soft); color:var(--ok); }
.pal-op.incorrecta{ border-color:var(--no); background:var(--no-soft); color:var(--no); }

/* N-back: consigna + par de botones de decisión */
.nb-consigna{ text-align:center; color:var(--muted); font-size:14px; line-height:1.5; margin:6px 0 18px; }
.nb-btns{ display:flex; gap:12px; margin-top:8px; }
.nb-btns .btn{ flex:1; }
.btn.suave2{ background:var(--card); color:var(--ink); border:2px solid var(--line); box-shadow:none; }
.btn.suave2:active{ background:var(--acc-soft); }

/* Fluidez verbal: modo, barra que se vacía sin número, entrada + palabras como chips */
.flu-modo{ text-align:center; font-size:19px; font-weight:800; color:var(--acc); margin:6px 0 8px; }
.flu-consigna{ text-align:center; color:var(--muted); font-size:14px; line-height:1.5; margin:0 0 16px; }
.flu-barra{ height:6px; border-radius:999px; background:var(--acc-soft); overflow:hidden; margin-bottom:18px; }
.flu-barra-int{ height:100%; width:100%; background:linear-gradient(135deg,var(--acc),var(--acc2)); border-radius:999px; }
.flu-entrada{ display:flex; gap:10px; margin-bottom:14px; }
.flu-entrada input{ flex:1; border:2px solid var(--line); border-radius:14px; padding:12px 14px; font-size:16px; background:transparent; color:var(--ink); outline:none; }
.flu-entrada input:focus{ border-color:var(--acc); }
.flu-entrada .btn{ width:auto; padding:0 18px; }
.flu-chips{ display:flex; flex-wrap:wrap; gap:8px; min-height:34px; margin-bottom:18px; }
.flu-chip{ background:var(--acc-soft); color:var(--acc); font-size:14px; font-weight:600; padding:6px 12px; border-radius:999px; }

/* Encontrar la diferencia: dos rejillas lado a lado */
.dif-pide{ text-align:center; font-size:14.5px; color:var(--muted); margin:6px 0 16px; line-height:1.5; }
.dif-grids{ display:flex; gap:10px; justify-content:center; }
.dif-col{ flex:1; text-align:center; }
.dif-cap{ font-size:12px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; margin-bottom:6px; }
.dif-holder{ display:flex; justify-content:center; }
.dif-grid{ display:grid; gap:3px; background:var(--line); padding:3px; border-radius:10px; }
.dif-cell{ width:15px; height:15px; border-radius:3px; background:var(--card); }
.dif-cell.on{ background:var(--acc2); }
.dif-cell.encontrada{ outline:2px solid var(--ok); outline-offset:1px; }
.dif-cell.no-es{ background:var(--no-soft); }
.dif-estado{ text-align:center; font-size:14px; font-weight:700; color:var(--acc); margin:16px 0 10px; }

/* Series / lógica: la serie numérica + hueco */
.log-trial{ padding-top:4px; }
.log-serie{ text-align:center; font-size:26px; font-weight:800; letter-spacing:.5px; margin:10px 0 24px; line-height:1.5; }
.log-int{ color:var(--acc); }

/* Series de figuras (E1, formato no verbal): rotación o cantidad */
.fig-serie{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; align-items:center; margin:14px 0 22px; }
.fig-paso{ width:52px; height:52px; border-radius:14px; background:var(--acc-soft); display:flex; align-items:center; justify-content:center; }
.fig-paso.fig-hueco{ background:none; border:2px dashed var(--line); font-size:22px; font-weight:800; color:var(--muted); }
.fig-tri{ font-size:26px; color:var(--acc); line-height:1; }
.fig-dots{ display:grid; grid-template-columns:repeat(3,1fr); gap:4px; padding:6px; }
.fig-dot{ width:9px; height:9px; border-radius:50%; background:var(--acc); }
.fig-opciones{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.fig-op{ display:flex; align-items:center; justify-content:center; padding:14px; }

/* Recordar y actuar: la palabra a recordar + la tarea intermedia */
.rec-palabra{ text-align:center; font-size:30px; font-weight:800; color:var(--acc); background:var(--acc-soft); border-radius:16px; padding:16px; margin:14px 0 20px; }
.rec-sub{ text-align:center; color:var(--muted); font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; margin-bottom:4px; }
.rec-inter .enunciado{ margin:14px 0 24px; }

/* Encontrar la palabra: la definición */
.pab-def{ text-align:center; font-size:18px; line-height:1.5; color:var(--ink); background:var(--acc-soft); border-radius:16px; padding:18px 20px; margin:10px 0 22px; }

/* Encontrar el distinto: rejilla de piezas de color */
.dis-pide{ text-align:center; font-size:14.5px; color:var(--muted); margin:6px 0 16px; line-height:1.5; }
.dis-grid{ display:grid; gap:8px; }
.dis-tile{ aspect-ratio:1; border-radius:12px; border:none; transition:transform .08s; }
.dis-tile:active{ transform:scale(.94); }
.dis-tile.correcta{ outline:3px solid var(--ok); outline-offset:2px; }
.dis-tile.incorrecta{ outline:3px solid var(--no); outline-offset:2px; }

/* Cambio de tarea: la regla activa */
.cam-regla{ text-align:center; font-size:16px; font-weight:800; color:var(--acc2); background:var(--acc-soft); border-radius:999px; padding:8px 18px; margin:6px auto 4px; display:table; }

/* Describir una escena: elementos + textarea */
.img-escena{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:14px 0 18px; }
.img-el{ display:flex; flex-direction:column; align-items:center; gap:4px; background:var(--acc-soft); border-radius:14px; padding:10px 12px; min-width:64px; }
.img-emoji{ font-size:28px; }
.img-nom{ font-size:11px; color:var(--muted); font-weight:600; text-align:center; }
.img-texto{ width:100%; border:2px solid var(--line); border-radius:14px; padding:12px 14px; font-size:15px; font-family:inherit; color:var(--ink); background:transparent; resize:vertical; margin-bottom:14px; outline:none; }
.img-texto:focus{ border-color:var(--acc); }

/* Tiempos por operación (pantalla de fin) */
.tiempos{ background:var(--acc-soft); border-radius:16px; padding:12px 16px; margin-top:6px; text-align:left; }
.tt{ font-size:12px; font-weight:700; color:var(--acc); text-transform:uppercase; letter-spacing:.4px; margin-bottom:6px; }
.trow{ display:flex; justify-content:space-between; align-items:center; font-size:15px; padding:3px 0; }