/* style.css */

/* Custom CSS for animations and patterns */
/* Fade in from bottom animation */
@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#mobile-menu.menu-open {
  
/* Aumenta la altura máxima para que quepan todos los botones */
max-height: 500px; /* Un valor grande que asegura que se expande por completo */
    
}

/* Fade in from top animation */
@keyframes fade-in-down {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Bounce in animation for CTA */
@keyframes bounce-in {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
    }
}

.animate-fade-in-up {
    animation: fade-in-up 0.6s ease-out forwards;
}

.animate-fade-in-down {
    animation: fade-in-down 0.6s ease-out forwards;
}

.animate-bounce-in {
    animation: bounce-in 0.8s ease-out forwards;
}

/* Carousel image transition */
.carousel-image {
    transition: opacity 1000ms ease-in-out;
}

.carousel-image.active {
    opacity: 1;
}

.carousel-image:not(.active) {
    opacity: 0;
}

/* Apply Inter font family to the body for a consistent look */
body {
    font-family: 'Inter', sans-serif;
}

/* Custom phone styling */
.phone-frame {
    position: relative;
    width: 250px; /* Adjust phone width */
    height: 500px; /* Adjust phone height */
    background-color: #0a0a0a; /* Dark frame */
    border-radius: 30px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 7px; /* Margen interno entre el borde del teléfono y la pantalla */
    border: 8px solid #5f5f5f; /* Borde del marco del teléfono */
}

.phone-screen {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
    box-sizing: border-box;
}

/* New style for the phone screen with GIF background */
.phone-gif-background {
    background-image: url('img/video2.gif'); /* aqui seleccionan el gif */
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
}

.phone-speaker {
    width: 60px;
    height: 6px;
    background-color: #555;
    border-radius: 3px;
    margin-bottom: 10px;
    margin-top: -5px; /* Adjust position */
}

.phone-camera {
    width: 10px;
    height: 10px;
    background-color: #555;
    border-radius: 50%;
    position: absolute;
    top: 25px;
    right: 50px;
}

/* Small notch for modern phones */
.phone-notch {
    width: 100px;
    height: 25px;
    background-color: #333;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    position: absolute;
    top: 8px; /* Position at the top of the frame */
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
}
.phone-notch .speaker {
    width: 40px;
    height: 4px;
    background-color: #555;
    border-radius: 2px;
}
.phone-notch .camera {
    width: 8px;
    height: 8px;
    background-color: #555;
    border-radius: 50%;
    margin-left: 10px;
}

/* Chatbot specific animations */
@keyframes chatbot-fade-in {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes chatbot-fade-out {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    
}
/*carrucel clientes*/

@keyframes scroll-slow {
    /* Desplaza el contenedor por el 100% de su ancho total (30 logos) */
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-400%); 
    }
}
/* La duración de 20s en el HTML se mantendrá si usas la clase de Tailwind */
.animate-scroll-slow {
    animation: scroll-slow 50s linear infinite; /* Ajusta 20s a la velocidad deseada */
}

.chatbot-fade-in-out {
    animation-duration: 0.3s;
    animation-fill-mode: forwards;
}

.chatbot-fade-in-out.hidden {
    animation-name: chatbot-fade-out;
}

.chatbot-fade-in-out:not(.hidden) {
    animation-name: chatbot-fade-in;
}

/* Ensure chat history scrolls */
#chat-history {
    display: flex;
    flex-direction: column;
    /* Eliminado justify-content: flex-end; para permitir desplazamiento normal */
    overflow-y: auto; /* Asegura la barra de desplazamiento vertical */
}

/* Estilos para el indicador de escritura (puntos animados) */
.typing-indicator .typing-dot {
    display: inline-block;
    animation: bounce-dot 1.4s infinite ease-in-out both;
}

.typing-indicator .typing-dot:nth-child(1) {
    animation-delay: -0.32s;
}

.typing-indicator .typing-dot:nth-child(2) {
    animation-delay: -0.16s;
}


@keyframes bounce-dot {
    0%, 80%, 100% {
        transform: scale(0);
    }
    40% {
        transform: scale(1.0);
    }
}

/* Estilos para el Gráfico de Dona (Estadísticas de Recuperación) */
.donut-chart-container {
    /* Define el tamaño del contenedor del gráfico */
    width: 12rem; /* w-48 */
    height: 12rem; /* h-48 */
    position: relative;
    margin: 0 auto; /* Centrar */
}

.donut-chart {
    /* El gráfico en sí */
    border-radius: 50%; /* Lo convierte en un círculo */
    /* Crea el efecto de dona al tener un fondo blanco en el centro */
    box-shadow: 0 0 0 1.5rem #fff inset; /* Ajusta este valor (1.5rem) para cambiar el grosor de la dona */
}
.donut-chart {
    border-radius: 50%;
    /* Asegúrate de que este valor (1.5rem) sea adecuado para que el texto sea visible en el centro blanco */
    box-shadow: 0 0 0 1.5rem #fff inset; 
}