/* css/repaso.css — MODO REPASO (SRS), estilo Anki: limpio y minimalista. Reutiliza .btn y
   las variables de marca de base.css. Diseño: docs/MODO-REPASO-DISENO.md */

#s-repaso{ align-items:center; }

.rep-card{
  width:100%; max-width:400px; margin:0 auto; padding:22px 20px 18px;
  background:var(--surface); border-radius:24px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; align-items:center;
  position:relative;
}

/* imagen de estudio (fondo blanco): se funde con la card */
.rep-scene{ width:170px; height:170px; display:flex; align-items:center; justify-content:center; }
.rep-scene img{ max-width:100%; max-height:100%; object-fit:contain; }

/* la palabra que se muestra (español o inglés según el caso) */
.rep-es{
  font-family:'Nunito',sans-serif; font-weight:800; font-size:26px; color:var(--deep);
  text-align:center; margin:6px 0 16px; line-height:1.15;
}

/* ── elegir (reconocimiento): 4 opciones ── */
.rep-ops{ display:grid; grid-template-columns:1fr 1fr; gap:10px; width:100%; }
.rep-op{
  min-height:52px; border-radius:14px; border:2px solid var(--border); background:var(--surface);
  font-family:'Nunito',sans-serif; font-weight:700; font-size:17px; color:var(--deep);
  cursor:pointer; transition:transform .1s, border-color .15s, background .15s;
}
.rep-op:hover:not(:disabled){ border-color:var(--purple-light); }
.rep-op:active:not(:disabled){ transform:scale(.97); }
.rep-op:disabled{ cursor:default; }
.rep-op.ok{ background:var(--green-bg); border-color:var(--green); color:var(--green); }
.rep-op.bad{ background:#FDECEC; border-color:var(--red); color:var(--red); }

/* ── escribir (producción) ── */
.rep-in{
  width:100%; text-align:center; font-family:'Nunito',sans-serif; font-weight:700; font-size:19px;
  color:var(--deep); border:2px solid var(--border); border-radius:14px; padding:12px; outline:none;
}
.rep-in:focus{ border-color:var(--purple-light); }
.rep-in.ok{ border-color:var(--green); background:var(--green-bg); color:var(--green); }
.rep-in.bad{ border-color:var(--red); background:#FDECEC; color:var(--red); }
.rep-check{ margin-top:12px; }

/* ── salidas: "No me la sé" + "Pista" ──
   Mismo tratamiento que Habla con Happy (css/habla.css .hb-acciones): botones .btn.ghost
   pequeños en fila, no texto suelto. El #B9B5C9 de antes daba 2:1 de contraste sobre
   blanco (muy por debajo del 4,5:1 de AA) — invisible para buena parte de los niños. */
.rep-acciones{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:14px }
.rep-acciones .btn{ width:auto; min-width:0; min-height:40px; margin:0; padding:8px 16px;
  font-size:.82rem; gap:6px }
.rep-acciones .btn svg{ width:16px; height:16px }

/* ── pista revelada: MISMA caja "SE PARECE A" que estudio y Habla (.ibx-label/.ibx-kw,
   ver estudio.css) — un solo lenguaje visual de pistas en toda la app ── */
.rep-pistabox{ display:none; }
.rep-pistabox.on{
  display:block; margin-top:14px; padding:12px 16px; background:var(--bg); border-radius:14px;
  text-align:center; animation:appear .3s ease;
}

/* ── feedback ✓/✗ ── */
.rep-fb{
  margin-top:14px; padding:8px 16px; border-radius:20px; font-family:'Nunito',sans-serif;
  font-weight:800; font-size:16px; animation:repPop .25s ease;
}
.rep-fb.ok{ background:var(--green-bg); color:var(--green); }
.rep-fb.bad{ background:#FDECEC; color:var(--red); }
@keyframes repPop{ from{ transform:scale(.8); opacity:0; } to{ transform:scale(1); opacity:1; } }

/* ── ÁLBUM VIVO: las 3 ESTRELLAS de cada carta (un día de repaso = una estrella;
   con las 3 la carta se vuelve DORADA — diseño 2026-07-19, sustituye barra + X/3) ── */
.alb-card{ position:relative; }
.alb-stars{
  position:absolute; left:0; right:0; bottom:8px; z-index:4; text-align:center;
  font-size:15px; line-height:1; letter-spacing:3px; pointer-events:none;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.35));
}
.alb-stars i{ font-style:normal; color:rgba(255,255,255,.55); }
.alb-stars i.on{ color:#ffd23e; }
/* estrella recién visible sobre cartas claras: contorno suave para que ☆ no se pierda */
.alb-stars i{ text-shadow:0 0 3px rgba(0,0,0,.45); }
/* DORADA (3 estrellas): marco y halo oro, tipo carta shiny */
.alb-card.dom-dominada{
  box-shadow:0 0 0 3px #f0b429, 0 0 14px 2px rgba(240,180,41,.55), 0 6px 16px rgba(240,180,41,.30);
}
.alb-card.dom-dominada .alb-stars i.on{ filter:drop-shadow(0 0 3px rgba(255,210,62,.9)); }

/* ── botón "?" de ayuda en la cabecera del álbum ── */
.alb-help{
  width:22px; height:22px; margin-left:8px; flex-shrink:0; border-radius:50%;
  border:1.5px solid var(--purple); background:var(--surface); color:var(--purple);
  font-family:'Nunito',sans-serif; font-weight:800; font-size:13px; line-height:1; cursor:pointer;
}
.alb-help:hover{ background:#F3EEFF; }

/* ── acceso "Practicar más" del álbum al repaso ── */
.alb-practica{
  display:block; margin:14px auto 4px; padding:11px 20px; border-radius:14px; border:none;
  background:linear-gradient(150deg,#8a6bff,#7C3AED); color:#fff;
  font-family:'Nunito',sans-serif; font-weight:800; font-size:15px; cursor:pointer;
  box-shadow:0 6px 16px rgba(124,58,237,.32); transition:transform .1s;
}
.alb-practica:active{ transform:scale(.97); }

/* ── bienvenida del álbum (Prepy) ── */
.alb-intro-ov{
  position:fixed; inset:0; z-index:60; display:none;
  background:rgba(46,16,101,.45); backdrop-filter:blur(2px);
  align-items:center; justify-content:center; padding:20px;
}
.alb-intro-ov.on{ display:flex; animation:repFade .18s ease; }
.alb-intro-card{
  width:100%; max-width:340px; background:var(--surface); border-radius:24px;
  box-shadow:0 12px 40px rgba(46,16,101,.35); padding:22px 22px 20px; text-align:center;
  animation:repPop .22s ease;
}
.alb-intro-prepy{ width:96px; height:96px; object-fit:contain; margin:-4px auto 6px; display:block; }
.alb-intro-msg p{ font-family:'Nunito',sans-serif; color:var(--deep); font-size:15px; line-height:1.4; margin:0 0 8px; }
.alb-intro-msg p:first-child{ font-size:17px; }
.alb-intro-ok{ width:100%; margin-top:12px; }

/* ── fin / nada que repasar ── */
.rep-fin{ text-align:center; padding:20px 10px; }
.rep-fin-emoji{ font-size:52px; margin-bottom:8px; }
.rep-gemas{ margin:4px 0 10px; font-weight:800; color:var(--amber); font-size:15px; }
.rep-fin h2{ font-family:'Nunito',sans-serif; color:var(--deep); margin:0 0 8px; }
.rep-fin p{ color:var(--text2); margin:0 0 20px; }
.rep-fin-btns{ display:flex; flex-direction:column; gap:10px; align-items:center; width:100%; }
.rep-again{ display:block; margin:14px auto 0; background:none; border:none; color:var(--purple); font-family:'Nunito',sans-serif; font-size:14px; font-weight:700; cursor:pointer; }
.rep-again:hover{ text-decoration:underline; }

/* ── botón ⚙️ de ajustes (solo en la pantalla FINAL, esquina superior derecha de la
   tarjeta): el contador vivía antes en .rep-top, ya retirado — el progreso ahora es la
   cabecera del shell (#eProg + bar), igual que Habla con Happy y el test de vocabulario. */
.rep-cfg-btn{
  position:absolute; background:none; border:none; font-size:20px; line-height:1; cursor:pointer;
  opacity:.55; transition:opacity .15s, transform .1s;
}
.rep-cfg-btn:hover{ opacity:1; }
.rep-cfg-in{ top:14px; right:14px; z-index:2; }
.rep-cfg-in:active{ transform:scale(.9); }

/* ── diálogo de ajustes (se abre desde el ⚙️) ── */
.rep-cfg-ov{
  position:fixed; inset:0; z-index:60; display:none;
  background:rgba(46,16,101,.45); backdrop-filter:blur(2px);
  align-items:center; justify-content:center; padding:20px;
}
.rep-cfg-ov.on{ display:flex; animation:repFade .18s ease; }
@keyframes repFade{ from{ opacity:0; } to{ opacity:1; } }
.rep-cfg-card{
  position:relative; width:100%; max-width:320px; background:var(--surface);
  border-radius:22px; box-shadow:0 12px 40px rgba(46,16,101,.35);
  padding:26px 22px 20px; text-align:center; animation:repPop .22s ease;
}
.rep-cfg-x{
  position:absolute; top:12px; right:14px; background:none; border:none;
  font-size:16px; color:var(--text2); cursor:pointer; line-height:1;
}
.rep-cfg-x:hover{ color:var(--deep); }
.rep-cfg-emoji{ font-size:34px; margin-bottom:4px; }
.rep-cfg-card h3{ font-family:'Nunito',sans-serif; color:var(--deep); margin:0 0 4px; font-size:19px; }
.rep-cfg-card p{ color:var(--text2); font-size:13px; margin:0 0 18px; line-height:1.35; }
.rep-cfg-choices{ display:flex; gap:12px; justify-content:center; margin-bottom:20px; }
.rep-cfg-choice{
  flex:1; max-width:120px; display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:14px 8px; border-radius:16px; border:2px solid var(--border); background:var(--surface);
  cursor:pointer; transition:transform .1s, border-color .15s, background .15s;
}
.rep-cfg-choice:active{ transform:scale(.96); }
.rep-cfg-choice b{ font-family:'Nunito',sans-serif; font-size:28px; color:var(--deep); font-weight:800; }
.rep-cfg-choice small{ font-size:12px; color:var(--text2); font-weight:700; }
.rep-cfg-choice.on{ border-color:var(--purple); background:#F3EEFF; }
.rep-cfg-choice.on b{ color:var(--purple); }
.rep-cfg-ok{ width:100%; }

/* ── acceso al repaso (card en el panel de Vocab, bajo los desafíos) ── */
.rep-access{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:var(--surface); border:1.5px solid rgba(124,58,237,.28); border-radius:14px;
  padding:9px 12px; margin-top:12px; cursor:pointer; box-shadow:var(--shadow);
  transition:transform .1s, border-color .15s, background .2s;
}
.rep-access:hover{ border-color:var(--purple); }
.rep-access:active{ transform:scale(.98); }
/* apagado: aún no hay nada que repasar (etapa 1 de vocab sin completar) */
.rep-access.off{ opacity:.45; filter:grayscale(.6); pointer-events:none; }
/* "al día": ese día no quedan cartas por repasar → verde, como los nodos completados del
   mapa (decisión de Dave). Icono en degradado verde, texto verde, fondo tenue. */
.rep-access.hecho{ border-color:#A7F3D0; background:#ECFDF5; }
.rep-access.hecho .ra-ico{ background:linear-gradient(150deg,#34D399,#059669); }
.rep-access.hecho .ra-body b{ color:#065F46; }
.rep-access.hecho .ra-body small,.rep-access.hecho .ra-go{ color:#059669; }
.ra-ico{
  width:36px; height:36px; border-radius:11px; flex-shrink:0;
  background:linear-gradient(150deg,#8a6bff,#b39bff);
  display:flex; align-items:center; justify-content:center; font-size:19px;
}
/* icono nav_repeat (mismo del mapa): trazo oscuro → BLANCO sobre el degradado, igual que
   el nodo activo del caminito (.nodo.actual .nodo-ico). Reutiliza el diseño de los nodos. */
.ra-ico img{ width:22px; height:22px; object-fit:contain; filter:brightness(0) invert(1); }
.ra-body{ flex:1; display:flex; flex-direction:column; line-height:1.2; }
.ra-body b{ color:var(--deep); font-size:14px; }
.ra-body small{ color:var(--purple); font-size:11.5px; font-weight:700; }
.ra-go{ color:var(--purple); font-weight:800; font-size:15px; }