/* ==========================================
   SISTEMA DE DISEÑO - MELIVORA DEV
   Define las variables, animaciones y clases 
   personalizadas para el sitio web.
   ========================================== */

/* Define variables de color para modo claro y oscuro */
:root {
  --bg-p: #ffffff;
  --bg-s: #f5f5f7;
  --tx-p: #1d1d1f;
  --tx-s: #86868b;
  --ac-b: #1b4c8e;
  --ac-g: #22f826;
  --ac-g-hover: #1edb22;
  --border: rgba(0, 0, 0, 0.05);
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(0, 0, 0, 0.08);
  --shadow: 0 8px 30px rgba(0, 0, 0, 0.02), 0 1px 3px rgba(0, 0, 0, 0.01);
  --shadow-hover: 0 20px 45px rgba(0, 0, 0, 0.06), 0 1px 5px rgba(0, 0, 0, 0.02);
}

/* Aplica variables cuando la clase 'dark' está activa en el elemento raíz */
html.dark {
  --bg-p: #000000;
  --bg-s: #1d1d1f;
  --tx-p: #f5f5f7;
  --tx-s: #a1a1a6;
  --border: rgba(255, 255, 255, 0.06);
  --glass-bg: rgba(29, 29, 31, 0.72);
  --glass-border: rgba(255, 255, 255, 0.08);
  --shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
  --shadow-hover: 0 20px 45px rgba(0, 0, 0, 0.45);
}

/* Reset y estilos generales estilo Apple */
body {
  background-color: var(--bg-p);
  color: var(--tx-p);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  transition: background-color 0.4s cubic-bezier(0.25, 0.1, 0.25, 1), color 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
  overflow-x: hidden;
}

/* Efecto de cristal esmerilado para elementos de navegación */
.glass {
  background-color: var(--glass-bg);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--glass-border);
  transition: background-color 0.4s, border-color 0.4s;
}

/* Tarjeta Bento minimalista con sombras refinadas */
.card {
  background-color: var(--bg-s);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow);
  transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), 
              box-shadow 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), 
              background-color 0.4s, 
              border-color 0.4s;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

/* Animación sutil de desvanecimiento hacia arriba al hacer scroll */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.25, 0.1, 0.25, 1), 
              transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.slide.show {
  opacity: 1;
  transform: translateY(0);
}

/* Animación de entrada simple */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade {
  opacity: 0;
  transition: opacity 0.6s ease;
}

.fade.show {
  opacity: 1;
}

/* Pulso sutil de color verde neón para notificaciones y chats */
@keyframes sutilPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(34, 248, 38, 0.4);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(34, 248, 38, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(34, 248, 38, 0);
  }
}

.pulse-g {
  animation: sutilPulse 2s infinite;
}

/* Botón flotante de WhatsApp discreto */
.wa-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background-color: #25d366;
  color: white;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.wa-float:hover {
  transform: scale(1.1);
}

/* Oculta scrollbar pero mantiene funcionalidad */
.no-scroll::-webkit-scrollbar {
  display: none;
}
.no-scroll {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Animación de flotación suave para la mascota */
@keyframes floatMascot {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-8px);
  }
  100% {
    transform: translateY(0px);
  }
}

.mascot-float {
  animation: floatMascot 4s ease-in-out infinite;
}

/* Contenedor flotante de sugerencias de email */
.sug-box {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 30;
  background-color: var(--bg-p);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  margin-top: 4px;
  max-height: 150px;
  overflow-y: auto;
}

/* Ítems individuales de sugerencia */
.sug-item {
  padding: 10px 16px;
  cursor: pointer;
  font-size: 13px;
  color: var(--tx-p);
  transition: background-color 0.2s, color 0.2s;
}

.sug-item:hover {
  background-color: var(--bg-s);
  color: var(--ac-b);
}

html.dark .sug-item:hover {
  color: var(--ac-g);
}