/**
 * CEUSJIC — Animaciones de progreso académico
 * Cubre: barra de progreso fluida, checkmark SVG, toast de celebración
 */

/* ─── 1. BARRA DE PROGRESO FLUIDA ───────────────────────────────────────── */

.tutor-progress-bar,
[class*="progress-bar"] {
  transition: width 0.8s cubic-bezier(0.25, 1, 0.5, 1) !important;
  will-change: width;
}

/* Brillo al actualizarse */
@keyframes ceusjic-bar-glow {
  0%   { box-shadow: none; }
  40%  { box-shadow: 0 0 8px 2px rgba(37, 99, 235, 0.45); }
  100% { box-shadow: none; }
}

.tutor-progress-bar.ceusjic-bar-updated,
[class*="progress-bar"].ceusjic-bar-updated {
  animation: ceusjic-bar-glow 1.2s ease forwards;
}


/* ─── 2. CHECKMARK ANIMADO ──────────────────────────────────────────────── */

.ceusjic-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-left: 8px;
  flex-shrink: 0;
  vertical-align: middle;
}

.ceusjic-check svg {
  width: 20px;
  height: 20px;
  overflow: visible;
}

/* Círculo: se dibuja con stroke-dashoffset */
.ceusjic-check__circle {
  stroke-dasharray: 63;      /* ≈ 2π·10 */
  stroke-dashoffset: 63;
  animation: ceusjic-draw-circle 0.4s ease forwards;
  transform-origin: center;
  transform: rotate(-90deg);
}

/* Tick: se dibuja tras el círculo */
.ceusjic-check__tick {
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  fill: none;
  animation: ceusjic-draw-tick 0.3s ease 0.35s forwards;
}

@keyframes ceusjic-draw-circle {
  to { stroke-dashoffset: 0; }
}

@keyframes ceusjic-draw-tick {
  to { stroke-dashoffset: 0; }
}


/* ─── 3. TOAST DE CELEBRACIÓN ──────────────────────────────────────────── */

.ceusjic-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% - 16px));
  opacity: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  border-radius: 12px;
  background: #FFFFFF;
  border: 1.5px solid #BFDBFE;
  box-shadow: 0 8px 32px rgba(37, 99, 235, 0.15), 0 2px 8px rgba(28, 43, 74, 0.08);
  z-index: 99999;
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  min-width: 280px;
  max-width: 380px;
}

.ceusjic-toast--visible {
  opacity: 1;
  transform: translate(-50%, -50%);
}

/* Responsive */
@media (max-width: 480px) {
  .ceusjic-toast {
    top: 60px;
    min-width: 240px;
    max-width: calc(100vw - 32px);
    padding: 12px 16px;
  }
}

/* Variante quiz aprobado — igual que lección */
.ceusjic-toast--quiz-pass {
  border-color: #16A34A;
  background: linear-gradient(135deg, #ffffff 0%, #F0FDF4 100%);
}
.ceusjic-toast--quiz-pass .ceusjic-toast__title { color: #15803D; }

/* Variante quiz reprobado — naranja motivacional */
.ceusjic-toast--quiz-fail {
  border-color: #F97316;
  background: linear-gradient(135deg, #ffffff 0%, #FFF7ED 100%);
}
.ceusjic-toast--quiz-fail .ceusjic-toast__title { color: #C2410C; }
.ceusjic-toast--quiz-fail .ceusjic-toast__sub   { color: #9A3412; }

/* Variante tarea enviada — azul neutro */
.ceusjic-toast--assignment {
  border-color: #2563EB;
  background: linear-gradient(135deg, #ffffff 0%, #EFF6FF 100%);
}
.ceusjic-toast--assignment .ceusjic-toast__title { color: #1D4ED8; }

/* Variante módulo */
.ceusjic-toast--module {
  border-color: #2563EB;
  background: linear-gradient(135deg, #ffffff 0%, #EFF6FF 100%);
}

/* Variante curso — más prominente */
.ceusjic-toast--course {
  border-color: #1C2B4A;
  background: linear-gradient(135deg, #1C2B4A 0%, #2563EB 100%);
  color: #FFFFFF;
}

.ceusjic-toast--course .ceusjic-toast__title,
.ceusjic-toast--course .ceusjic-toast__sub {
  color: #FFFFFF;
}

.ceusjic-toast--course {
  box-shadow: 0 12px 40px rgba(37, 99, 235, 0.35), 0 4px 12px rgba(28, 43, 74, 0.2);
}

.ceusjic-toast__icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}

.ceusjic-toast__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ceusjic-toast__title {
  font-family: 'Inter', 'Segoe UI', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #1C2B4A;
  line-height: 1.3;
}

.ceusjic-toast__sub {
  font-family: 'Inter', 'Segoe UI', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #64748B;
  line-height: 1.4;
}


/* ─── 4. PULSE EN ÍCONO DE TAREA ENVIADA ────────────────────────────────── */

@keyframes ceusjic-pulse {
  0%   { transform: scale(1);   opacity: 1; }
  40%  { transform: scale(1.35); opacity: 0.7; }
  70%  { transform: scale(0.95); opacity: 1; }
  100% { transform: scale(1);   opacity: 1; }
}

.ceusjic-pulse {
  animation: ceusjic-pulse 0.6s ease forwards;
}


/* ─── 5. TRANSICIÓN EN LECCIONES COMPLETADAS ─────────────────────────────

   Cuando TutorLMS añade .is-complete a un item de lección,
   aplicamos una transición de color suave.
*/

.tutor-course-topic-item,
.tutor-course-content-list li {
  transition: background-color 0.3s ease, opacity 0.3s ease;
}

.tutor-course-topic-item.is-complete,
.tutor-course-content-list li.is-complete {
  background-color: rgba(37, 99, 235, 0.04);
}