/* Gen UI v2: micro-interacciones */
:root {
  --violeta: #7C5CFF;
  --cian: #22D3EE;
  --ambar: #F59E0B;
}

/* ---------- Animaciones de entrada ---------- */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
main.wrap > * {
  animation: riseIn .45s cubic-bezier(.22,.9,.34,1) both;
}
main.wrap > *:nth-child(2) { animation-delay: .06s; }
main.wrap > *:nth-child(3) { animation-delay: .12s; }
main.wrap > *:nth-child(4) { animation-delay: .18s; }
main.wrap > *:nth-child(n+5) { animation-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  main.wrap > * { animation: none; }
}

/* ---------- Toasts ---------- */
#toast-zone {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 9999;
  align-items: center;
  pointer-events: none;
}
.toast {
  background: #1c2138;
  border: 1px solid rgba(124,92,255,.4);
  color: #eef0ff;
  padding: 12px 20px;
  border-radius: 12px;
  font-size: .92rem;
  box-shadow: 0 8px 30px rgba(0,0,0,.45);
  animation: riseIn .3s ease both;
  max-width: 90vw;
}
.toast.ok { border-color: rgba(34,211,238,.55); }
.toast.err { border-color: rgba(248,113,113,.6); }

/* ---------- Botón copiar enlace ---------- */
.btn-copiar {
  cursor: pointer;
  background: rgba(124,92,255,.14);
  border: 1px solid rgba(124,92,255,.5);
  color: #cdbcff;
  border-radius: 8px;
  padding: 5px 12px;
  font-size: .8rem;
  transition: background .2s, transform .1s;
}
.btn-copiar:hover { background: rgba(124,92,255,.28); }
.btn-copiar:active { transform: scale(.96); }

/* ---------- Hover en tarjetas ---------- */
.card {
  transition: border-color .25s, transform .25s, box-shadow .25s;
}
.card:hover {
  border-color: rgba(124,92,255,.45);
  box-shadow: 0 6px 24px rgba(124,92,255,.10);
}

/* ---------- Skeleton / spinner ---------- */
.spinner {
  width: 22px; height: 22px;
  border: 3px solid rgba(124,92,255,.25);
  border-top-color: var(--violeta);
  border-radius: 50%;
  animation: spin .8s linear infinite;
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
}
@keyframes spin { to { transform: rotate(360deg); } }

.shimmer {
  background: linear-gradient(90deg, #1a1f33 25%, #232a45 50%, #1a1f33 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 10px;
  min-height: 60px;
  margin-bottom: 12px;
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------- Tabs de modo en nuevo curso ---------- */
.modo-tabs { display:flex; gap:8px; margin-bottom:18px; }
.modo-tab {
  flex:1; padding:10px 12px; border-radius:10px; cursor:pointer;
  background:rgba(124,92,255,.08); border:1px solid rgba(124,92,255,.3);
  color:#cdbcff; font-weight:600; font-size:.92rem; transition:background .2s;
}
.modo-tab:hover { background:rgba(124,92,255,.18); }
.modo-tab.activo { background:linear-gradient(135deg,#7C5CFF,#4F46E5); color:#fff; border-color:transparent; }
.file-input { width:100%; color:#c9cdeb; font-size:.9rem; }

/* ---------- Progreso semanal ---------- */
.semana { border-left:3px solid rgba(124,92,255,.5); padding:10px 14px; margin:10px 0; }
.semana.generando { border-left-color:#F59E0B; }
.semana.listo { border-left-color:#22D3EE; }
.semana.error { border-left-color:#f87171; }
.estado-chip { font-size:.72rem; padding:3px 10px; border-radius:999px; font-weight:700; }
.estado-chip.pendiente { background:rgba(148,163,184,.15); color:#94a3b8; }
.estado-chip.generando { background:rgba(245,158,11,.15); color:#FBBF24; }
.estado-chip.listo { background:rgba(34,211,238,.15); color:#67E8F9; }
.estado-chip.error { background:rgba(248,113,113,.15); color:#f87171; }