/* KiruH Orbe v4.0-FINAL - Efectos visuales premium */

/* ========== ORBE BASE ========== */
.kiruh-orbe {
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(135deg, #c9a96e 0%, #e8d5a3 50%, #c9a96e 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; cursor: pointer;
  box-shadow: 0 4px 20px rgba(201,169,110,0.4), 0 0 0 0 rgba(201,169,110,0.4);
  position: relative; transition: all 0.3s ease;
  animation: kiruhOrbeBreath 3s ease-in-out infinite;
}
.kiruh-orbe:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 30px rgba(201,169,110,0.6);
}
.kiruh-orbe::before {
  content: ''; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid rgba(201,169,110,0.3); opacity: 0;
  animation: kiruhOrbePulse 2s ease-out infinite;
}
.kiruh-orbe::after {
  content: ''; position: absolute; inset: -8px; border-radius: 50%;
  border: 1px solid rgba(201,169,110,0.15); opacity: 0;
  animation: kiruhOrbePulse 2s ease-out 0.5s infinite;
}

@keyframes kiruhOrbeBreath {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
@keyframes kiruhOrbePulse {
  0% { opacity: 0.6; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.3); }
}

/* ========== TEMAS ========== */
.kiruh-orbe.theme-blue {
  background: linear-gradient(135deg, #0066cc 0%, #4a90e2 50%, #0066cc 100%);
  box-shadow: 0 4px 20px rgba(0,102,204,0.4);
}
.kiruh-orbe.theme-green {
  background: linear-gradient(135deg, #16a34a 0%, #4ade80 50%, #16a34a 100%);
  box-shadow: 0 4px 20px rgba(22,163,74,0.4);
}
.kiruh-orbe.theme-purple {
  background: linear-gradient(135deg, #9c27b0 0%, #ce93d8 50%, #9c27b0 100%);
  box-shadow: 0 4px 20px rgba(156,39,176,0.4);
}
.kiruh-orbe.theme-dark {
  background: linear-gradient(135deg, #1a1a1a 0%, #4a4a4a 50%, #1a1a1a 100%);
  box-shadow: 0 4px 20px rgba(0,0,0,0.6);
}
.kiruh-orbe.theme-minimal {
  background: #fff; border: 2px solid #0a0a0a;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* ========== APERTURA / EXPANSIÓN ========== */
.kiruh-orbe.open {
  animation: kiruhOrbeExpand 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes kiruhOrbeExpand {
  0% { transform: scale(1); border-radius: 50%; }
  50% { transform: scale(1.2); border-radius: 30%; }
  100% { transform: scale(1); border-radius: 50%; }
}

/* ========== HALO / GLOW ========== */
.kiruh-orbe.glow {
  animation: kiruhOrbeGlow 2s ease-in-out infinite alternate;
}
@keyframes kiruhOrbeGlow {
  from { box-shadow: 0 0 20px rgba(201,169,110,0.4), 0 0 40px rgba(201,169,110,0.2); }
  to { box-shadow: 0 0 30px rgba(201,169,110,0.6), 0 0 60px rgba(201,169,110,0.3); }
}

/* ========== ENTRADA ANIMADA ========== */
.kiruh-orbe.enter {
  animation: kiruhOrbeEnter 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes kiruhOrbeEnter {
  0% { opacity: 0; transform: scale(0) rotate(-180deg); }
  60% { transform: scale(1.1) rotate(10deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* ========== SHAKE (notificación) ========== */
.kiruh-orbe.shake {
  animation: kiruhOrbeShake 0.5s ease-in-out;
}
@keyframes kiruhOrbeShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px) rotate(-5deg); }
  40% { transform: translateX(5px) rotate(5deg); }
  60% { transform: translateX(-3px) rotate(-3deg); }
  80% { transform: translateX(3px) rotate(3deg); }
}

/* ========== NOTIFICACIÓN BADGE ========== */
.kiruh-orbe .badge {
  position: absolute; top: -4px; right: -4px;
  background: #dc2626; color: #fff; font-size: 0.65rem;
  font-weight: 700; padding: 2px 8px; border-radius: 10px;
  animation: kiruhBadgeBounce 2s ease-in-out infinite;
}
@keyframes kiruhBadgeBounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

/* ========== KIOSCO PANEL ========== */
.kiruh-kiosk {
  width: 400px; max-height: 650px; background: #fff;
  border-radius: 24px; box-shadow: 0 20px 80px rgba(0,0,0,0.25);
  overflow: hidden; display: flex; flex-direction: column;
  position: fixed; z-index: 9999; opacity: 0; transform: translateY(20px) scale(0.95);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.kiruh-kiosk.active { opacity: 1; transform: translateY(0) scale(1); }
.kiruh-kiosk.bottom-right { bottom: 100px; right: 24px; }
.kiruh-kiosk.bottom-left { bottom: 100px; left: 24px; }
.kiruh-kiosk.top-right { top: 100px; right: 24px; }
.kiruh-kiosk.top-left { top: 100px; left: 24px; }

.kiruh-kiosk-header {
  padding: 20px 24px; background: linear-gradient(135deg, #c9a96e, #e8d5a3);
  color: #0a0a0a; display: flex; align-items: center; gap: 14px;
}
.kiruh-kiosk-header .avatar { font-size: 2.2rem; }
.kiruh-kiosk-header .name { font-weight: 800; font-size: 1rem; }
.kiruh-kiosk-header .role { font-size: 0.78rem; opacity: 0.8; }
.kiruh-kiosk-header .close-btn {
  width: 32px; height: 32px; border-radius: 50%; border: none;
  background: rgba(0,0,0,0.1); cursor: pointer; display: flex;
  align-items: center; justify-content: center; font-size: 1.2rem;
  margin-left: auto; transition: all 0.2s;
}
.kiruh-kiosk-header .close-btn:hover { background: rgba(0,0,0,0.2); }

.kiruh-kiosk-body { flex: 1; overflow-y: auto; padding: 20px; }

.kiruh-kiosk-greeting {
  background: #f5efe0; padding: 14px 18px; border-radius: 16px;
  margin-bottom: 20px; font-size: 0.92rem; line-height: 1.5; color: #1a1a1a;
  border-left: 4px solid #c9a96e;
}

/* ========== PRODUCT CARDS ========== */
.kiruh-product-card {
  background: #fff; border: 1px solid #e5e5e5; border-radius: 16px;
  padding: 16px; margin-bottom: 12px; cursor: pointer;
  transition: all 0.2s ease; position: relative; overflow: hidden;
}
.kiruh-product-card:hover {
  border-color: #c9a96e; transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.kiruh-product-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #c9a96e, #e8d5a3); opacity: 0; transition: opacity 0.2s;
}
.kiruh-product-card:hover::before { opacity: 1; }
.kiruh-product-card .type-tag {
  font-size: 0.65rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; padding: 3px 10px; border-radius: 20px;
  display: inline-block; margin-bottom: 8px;
}
.kiruh-product-card .type-tag.good { background: #e8f5e9; color: #2e7d32; }
.kiruh-product-card .type-tag.service { background: #e3f2fd; color: #1565c0; }
.kiruh-product-card .type-tag.digital { background: #f3e5f5; color: #7b1fa2; }
.kiruh-product-card .type-tag.real_estate { background: #fff3e0; color: #92400e; }
.kiruh-product-card .name { font-weight: 700; font-size: 0.95rem; margin-bottom: 4px; }
.kiruh-product-card .price { color: #c9a96e; font-weight: 800; font-size: 1.15rem; }
.kiruh-product-card .desc { font-size: 0.82rem; color: #737373; margin-top: 6px; line-height: 1.4; }
.kiruh-product-card .image {
  width: 100%; height: 140px; object-fit: cover; border-radius: 12px;
  margin-bottom: 12px; background: #f5f5f5;
}

/* ========== QUICK ACTIONS ========== */
.kiruh-quick-actions { display: flex; gap: 8px; padding: 0 20px 16px; flex-wrap: wrap; }
.kiruh-quick-btn {
  padding: 10px 16px; border-radius: 20px; border: 1px solid #e5e5e5;
  background: #fff; font-size: 0.82rem; font-weight: 600; cursor: pointer;
  transition: all 0.2s; color: #4a4a4a;
}
.kiruh-quick-btn:hover { border-color: #c9a96e; background: #f5efe0; color: #0a0a0a; }
.kiruh-quick-btn.primary { background: #0a0a0a; color: #fff; border-color: #0a0a0a; }
.kiruh-quick-btn.primary:hover { background: #c9a96e; color: #0a0a0a; border-color: #c9a96e; }

/* ========== CHAT INPUT ========== */
.kiruh-chat-bar {
  padding: 12px 20px; border-top: 1px solid #e5e5e5;
  display: flex; gap: 10px; align-items: center; background: #fff;
}
.kiruh-chat-bar input {
  flex: 1; padding: 12px 18px; border: 2px solid #e5e5e5; border-radius: 50px;
  outline: none; font-size: 0.9rem; transition: border-color 0.2s;
}
.kiruh-chat-bar input:focus { border-color: #c9a96e; }
.kiruh-chat-bar button {
  width: 44px; height: 44px; border-radius: 50%; border: none;
  background: #0a0a0a; color: #fff; display: flex; align-items: center;
  justify-content: center; cursor: pointer; transition: all 0.2s; font-size: 1rem;
}
.kiruh-chat-bar button:hover { background: #c9a96e; color: #0a0a0a; }

/* ========== RESPONSIVE ========== */
@media (max-width: 480px) {
  .kiruh-kiosk { width: calc(100vw - 32px); max-height: 80vh; left: 16px !important; right: 16px !important; }
  .kiruh-orbe { width: 56px; height: 56px; font-size: 1.5rem; }
}

/* ========== ANIMACIONES ADICIONALES ========== */
.kiruh-fade-in { animation: kiruhFadeIn 0.4s ease forwards; }
@keyframes kiruhFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.kiruh-slide-in-right { animation: kiruhSlideInRight 0.3s ease forwards; }
@keyframes kiruhSlideInRight { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }

.kiruh-scale-in { animation: kiruhScaleIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
@keyframes kiruhScaleIn { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }