/* ============================================
   DITO BRANDING FIXES
   Correcciones de colores y badges
   Versión: 1.1 | Enero 2026
   ============================================ */

/* === PALETA OFICIAL DITO === */
:root {
  --dito-violet: #8B5CF6;
  --dito-violet-light: #A78BFA;
  --dito-cyan: #06B6D4;
  --dito-emerald: #10B981;
  --dito-amber: #F59E0B;
  --dito-blue: #3B82F6;
  --dito-red: #EF4444;
  --dito-gradient: linear-gradient(135deg, #0047FF 0%, #8B5CF6 50%, #00D9FF 100%);
}

/* ============================================
   1. BADGE ¡COMPLETADO!
   Color: Emerald (#10B981)
   ============================================ */
.badge-completado,
.completion-badge,
.lesson-complete-badge {
  background: var(--dito-emerald);
  color: #0a0a0f;
  font-weight: 700;
  padding: 0.5rem 1.25rem;
  border-radius: 24px;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.4);
  animation: badge-glow 2s ease-in-out infinite;
}

@keyframes badge-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(16, 185, 129, 0.4); }
  50% { box-shadow: 0 0 30px rgba(16, 185, 129, 0.6); }
}

/* ============================================
   2. BADGE +100 DXP
   Fondo: Emerald, Número: Amber accent
   ============================================ */
.dxp-badge,
.xp-reward,
.lesson-xp-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, #0d3d2e 0%, #10B981 100%);
  color: #ffffff;
  font-weight: 700;
  padding: 0.75rem 1.5rem;
  border-radius: 16px;
  font-size: 1.1rem;
  border: 2px solid var(--dito-emerald);
  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.3);
}

.dxp-badge .dxp-icon,
.xp-reward .xp-icon {
  font-size: 1.3rem;
}

.dxp-badge .dxp-amount,
.xp-reward .xp-amount {
  color: var(--dito-amber);
  font-family: 'Space Mono', monospace;
  font-size: 1.2rem;
  text-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
}

/* ============================================
   3. LOGO DITO IDLE ANIMADO (Header)
   ============================================ */
.dito-header-logo {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dito-header-logo svg {
  width: 100%;
  height: 100%;
}

/* Animación breathing para idle en header */
.dito-header-logo.idle {
  animation: dito-idle-breathe 3s ease-in-out infinite;
}

@keyframes dito-idle-breathe {
  0%, 100% { 
    transform: scale(1);
    filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.3));
  }
  50% { 
    transform: scale(1.05);
    filter: drop-shadow(0 0 15px rgba(139, 92, 246, 0.5));
  }
}

/* Hover effect */
.dito-header-logo:hover {
  animation: dito-idle-wave 0.6s ease-in-out;
}

@keyframes dito-idle-wave {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-5deg); }
  75% { transform: rotate(5deg); }
}

/* ============================================
   4. PROGRESS BAR COLORS (Branding)
   ============================================ */
.progress-bar-dito,
.course-progress-fill {
  background: linear-gradient(90deg, var(--dito-emerald) 0%, var(--dito-cyan) 100%);
}

.progress-text-dito {
  color: var(--dito-emerald);
  font-family: 'Space Mono', monospace;
}

/* ============================================
   5. CELEBRATION OVERLAY (Lesson Complete)
   ============================================ */
.celebration-overlay {
  background: radial-gradient(ellipse at center, rgba(16, 185, 129, 0.15) 0%, transparent 70%);
}

/* ============================================
   6. CHAT BUBBLE - DITO TUTOR MODE
   ============================================ */
.dito-message.tutor {
  border-left: 3px solid var(--dito-emerald);
}

.dito-message.celebrating {
  border-left: 3px solid var(--dito-emerald);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, transparent 100%);
}

/* Fix: Forzar animación en el logo del header */
.dt-logo-icon.dito-header-logo.idle {
  animation: dito-idle-breathe 3s ease-in-out infinite !important;
}