/* ============================================
   DITO GEOMETRIES - 9 Estados SVG
   Versión: 1.0 | Enero 2026
   ============================================ */

/* === IDLE - En Espera === */
.dito-idle {
  --dito-color: #8B5CF6;
}

/* === LISTENING - Escuchando === */
.dito-listening {
  --dito-color: #8B5CF6;
}

/* === PROCESSING - Procesando === */
.dito-processing {
  --dito-color: #8B5CF6;
}

/* === INTERPRET - Analizando === */
.dito-interpret {
  --dito-color: #06B6D4;
}

/* === TUTOR - Enseñando === */
.dito-tutor {
  --dito-color: #10B981;
}

/* === ADVISOR - Aconsejando === */
.dito-advisor {
  --dito-color: #F59E0B;
}

/* === GUIDE - Guiando === */
.dito-guide {
  --dito-color: #3B82F6;
}

/* === CELEBRATING - Celebrando === */
.dito-celebrating {
  --dito-color: #10B981;
}

/* === ALERT - Alerta === */
.dito-alert {
  --dito-color: #EF4444;
}

/* ============================================
   BASE STYLES
   ============================================ */

.dito-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease-in-out;
}

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

/* Animaciones por estado */
.dito-listening .dito-wave {
  animation: dito-pulse-wave 1.5s ease-in-out infinite;
}

.dito-processing .dito-ring {
  animation: dito-rotate 1.5s linear infinite;
}

.dito-celebrating svg {
  animation: dito-bounce 0.5s ease infinite;
}

.dito-alert svg {
  animation: dito-shake 0.5s ease-in-out infinite;
}

/* Keyframes */
@keyframes dito-pulse-wave {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 0; transform: scale(1.2); }
}

@keyframes dito-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes dito-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-3px) scale(1.05); }
}

@keyframes dito-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  75% { transform: translateX(2px); }
}

@keyframes dito-breathe {
  0%, 100% { opacity: 0.3; r: 8; }
  50% { opacity: 0.5; r: 10; }
}

@keyframes dito-scan {
  0%, 100% { transform: translateY(-15px); }
  50% { transform: translateY(15px); }
}

@keyframes dito-compass {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(10deg); }
  75% { transform: rotate(-10deg); }
}

@keyframes dito-sparkle {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

@keyframes dito-glow {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.8; }
}