*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--sll-font-body);
  background:
    radial-gradient(900px 500px at 12% -10%, var(--sll-primary-50) 0%, transparent 55%),
    radial-gradient(800px 500px at 110% 0%, #EEE9FC 0%, transparent 50%),
    var(--sll-bg-page);
  color:var(--sll-copy-default);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:20px 14px 60px;
}
.app-shell{width:100%;max-width:640px;display:flex;flex-direction:column;gap:16px}
h1,h2,h3{font-family:var(--sll-font-title);color:var(--sll-gray-900);line-height:1.15}
.oculto{display:none !important}

/* ---- topbar ---- */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px}
.marca{display:flex;align-items:center;gap:8px;font-family:var(--sll-font-title);font-weight:800;color:var(--sll-primary-600);text-transform:uppercase;font-size:13px;letter-spacing:.4px}
.marca .punto{width:10px;height:10px;border-radius:50%;background:var(--sll-primary-500);box-shadow:0 0 0 4px var(--sll-primary-50)}
.puntos-chip{background:var(--sll-gray-0);border:1px solid var(--sll-gray-200);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:700;color:var(--sll-primary-600)}

/* ---- tarjeta genérica ---- */
.tarjeta{background:var(--sll-bg-card);border:1px solid var(--sll-gray-200);border-radius:20px;box-shadow:0 10px 30px rgba(31,36,48,.08);padding:24px}

/* ---- pantalla inicio ---- */
.hero{text-align:center;padding:8px 4px 4px}
.hero h1{font-size:30px;margin-bottom:8px}
.hero p{color:var(--sll-copy-default);font-size:15px;line-height:1.5;max-width:480px;margin:0 auto 18px}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:10px}

.btn{
  font-family:var(--sll-font-title);
  font-weight:700;
  font-size:15px;
  border:none;
  border-radius:14px;
  padding:13px 22px;
  cursor:pointer;
  background:var(--sll-primary-500);
  color:#fff;
  transition:transform .12s ease, box-shadow .12s ease;
  box-shadow:0 6px 16px rgba(236,91,102,.35);
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.secundario{background:var(--sll-gray-0);color:var(--sll-primary-600);border:2px solid var(--sll-primary-200);box-shadow:none}
.btn.fantasma{background:transparent;color:var(--sll-copy-soft);box-shadow:none;border:1px dashed var(--sll-gray-300)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn.grande{padding:16px 30px;font-size:16px}

.temas-lista{display:flex;flex-direction:column;gap:10px;margin-top:6px;text-align:left}
.tema-chip{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--sll-gray-0);border:1px solid var(--sll-gray-200);border-radius:14px;padding:12px 16px;cursor:pointer}
.tema-chip:hover{border-color:var(--sll-primary-300)}
.tema-chip .nombre{font-weight:700;color:var(--sll-gray-900)}
.tema-chip .meta{font-size:12px;color:var(--sll-copy-soft)}
.tema-chip .flecha{color:var(--sll-primary-500);font-weight:800}

/* ---- barra progreso ---- */
.barra-top{display:flex;align-items:center;gap:12px}
.progreso-track{flex:1;height:10px;background:var(--sll-gray-200);border-radius:999px;overflow:hidden}
.progreso-fill{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--sll-primary-400),var(--sll-primary-600));transition:width .3s ease}
.contador{font-size:13px;color:var(--sll-copy-soft);white-space:nowrap}

/* ---- ejercicio ---- */
.etiqueta-tipo{display:inline-block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:#fff;background:var(--sll-purple-500);border-radius:999px;padding:4px 10px;margin-bottom:12px}
.enunciado{font-size:19px;font-family:var(--sll-font-title);color:var(--sll-gray-900);margin-bottom:18px;line-height:1.4}
.consigna{font-size:13px;color:var(--sll-copy-soft);margin-bottom:14px}

.opciones{display:flex;flex-direction:column;gap:10px}
.opcion{display:flex;align-items:center;gap:12px;background:var(--sll-gray-0);border:2px solid var(--sll-gray-200);border-radius:14px;padding:13px 16px;cursor:pointer;text-align:left;font-size:15px;color:var(--sll-gray-900)}
.opcion:hover{border-color:var(--sll-primary-300)}
.opcion .letra{width:26px;height:26px;border-radius:50%;background:var(--sll-gray-200);color:var(--sll-gray-700);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex-shrink:0}
.opcion.correcta{border-color:var(--sll-green-700);background:#EEF3E2}
.opcion.correcta .letra{background:var(--sll-green-700);color:#fff}
.opcion.incorrecta{border-color:var(--sll-primary-600);background:var(--sll-primary-50)}
.opcion.incorrecta .letra{background:var(--sll-primary-600);color:#fff}
.opcion:disabled,.opcion[aria-disabled="true"]{cursor:default}

.hueco-form{display:flex;flex-direction:column;gap:14px}
.hueco-input{font-size:17px;padding:12px 16px;border-radius:12px;border:2px solid var(--sll-gray-300);font-family:var(--sll-font-body)}
.hueco-input:focus{outline:none;border-color:var(--sll-primary-400)}
.hueco-input.correcta{border-color:var(--sll-green-700);background:#EEF3E2}
.hueco-input.incorrecta{border-color:var(--sll-primary-600);background:var(--sll-primary-50)}

.categorias-drop{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.categorias-drop.cols-3{grid-template-columns:1fr 1fr 1fr}
.categoria-caja{border:2px dashed var(--sll-gray-300);border-radius:14px;padding:10px;min-height:90px;font-size:12.5px;color:var(--sll-copy-soft);text-align:center;display:flex;flex-direction:column;gap:6px}
.categoria-caja.arrastre-sobre{border-color:var(--sll-primary-400);background:var(--sll-primary-50)}
.categoria-caja .etiqueta-caja{font-weight:700;color:var(--sll-gray-800)}
.frase-arrastrable{background:var(--sll-gray-0);border:1px solid var(--sll-gray-200);border-radius:10px;padding:9px 12px;font-size:13.5px;cursor:grab;color:var(--sll-gray-900)}
.frase-arrastrable.colocada.correcta{border-color:var(--sll-green-700);background:#EEF3E2}
.frase-arrastrable.colocada.incorrecta{border-color:var(--sll-primary-600);background:var(--sll-primary-50)}
.frase-arrastrable[aria-disabled="true"]{opacity:.55;cursor:default}
.bandeja-frases{display:flex;flex-direction:column;gap:8px;margin-top:12px}

.marcar-texto{font-size:16px;line-height:2;color:var(--sll-gray-900)}
.palabra-marcable{cursor:pointer;border-radius:6px;padding:1px 4px;background:var(--sll-purple-500);background:rgba(168,146,211,.18)}
.palabra-marcable.marcada{background:var(--sll-primary-200)}
.palabra-marcable.marcada.correcta{background:#DEEAC6;text-decoration:none}
.palabra-marcable.marcada.incorrecta{background:var(--sll-primary-200)}
.palabra-marcable.omitida{outline:2px dashed var(--sll-primary-600);outline-offset:1px}

.pista{margin-top:16px;background:#EEE9FC;border:1px solid var(--sll-purple-500);border-radius:14px;padding:14px 16px;font-size:14px;line-height:1.5;color:var(--sll-gray-900)}
.pista b{color:var(--sll-purple-500)}
.pista.mal{background:var(--sll-primary-50);border-color:var(--sll-primary-400)}
.pista .marca{display:inline-block;font-weight:800;margin-bottom:4px}
.pista.bien .marca{color:var(--sll-green-700)}
.pista.mal .marca{color:var(--sll-primary-600)}

.acciones-ejercicio{display:flex;justify-content:flex-end;margin-top:18px}

/* ---- pantalla fin de bloque ---- */
.resumen{text-align:center;padding:6px 0}
.resumen .puntuacion{font-family:var(--sll-font-title);font-size:38px;font-weight:800;color:var(--sll-primary-600);margin:8px 0}
.resumen p{color:var(--sll-copy-default);font-size:15px;line-height:1.5;max-width:440px;margin:0 auto 18px}

/* ---- CTA final ---- */
.cta-final{text-align:center}
.cta-final .badge-nivel{display:inline-block;background:var(--sll-primary-50);color:var(--sll-primary-600);font-weight:800;border-radius:999px;padding:6px 16px;font-size:13px;margin-bottom:10px}
.cta-final h2{font-size:22px;margin-bottom:8px}
.cta-final p{font-size:14px;color:var(--sll-copy-default);max-width:460px;margin:0 auto 18px;line-height:1.5}
.cta-final small{display:block;margin-top:10px;color:var(--sll-copy-soft);font-size:11.5px}

.footer-nota{text-align:center;font-size:11px;color:var(--sll-copy-soft);margin-top:6px}
.badge-prueba{position:fixed;top:10px;right:10px;background:var(--sll-gray-900);color:#fff;font-size:10.5px;font-weight:700;padding:5px 10px;border-radius:999px;opacity:.85;z-index:50;letter-spacing:.3px}

@media (max-width:480px){
  .categorias-drop{grid-template-columns:1fr}
  .hero h1{font-size:24px}
}