/* Estilos para el contenedor flotante */
.whatsapp-assistance {
  position: fixed; /* Fija el contenedor en la pantalla */
  bottom: 20px; /* Distancia desde el borde inferior */
  right: 20px; /* Distancia desde el borde derecho */
  display: flex; /* Flexbox para alinear el logo y el texto */
  align-items: center; /* Centra verticalmente el contenido */
  background-color: #ffffff; /* Color de fondo similar a WhatsApp */
  padding: 0px 15px;
  border-radius: 30px; /* Bordes redondeados */
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2); /* Sombra sutil */
  z-index: 1000; /* Asegura que el botón esté por encima de otros elementos */
  transition: transform 0.3s ease-in-out; /* Animación para que crezca cuando el mouse pase */
}

/* Efecto de hover (cuando el usuario pasa el mouse sobre el botón) */
.whatsapp-assistance:hover {
  transform: scale(1.05); /* Hace que el botón crezca ligeramente */
}

/* Estilo del logo de WhatsApp */
.whatsapp-logo img {
  width: 40px; /* Tamaño del logo de WhatsApp */
  height: 50px;
  border-radius: 50%; /* Hace que el logo sea redondeado */
}

/* Estilo del texto de Asistencia Tecnológica */
.message-text p {
  font-size: 14px; /* Tamaño del texto */
  font-weight: bold; /* Texto en negrita */
  color: green; /* Color blanco para el texto */
  margin-left: 12px; /* Espacio entre el logo y el texto */
  text-transform: uppercase; /* Hace que el texto esté en mayúsculas */
  margin: 0;
  animation: blink 2s infinite; /* Animación infinita */
}
.img-whatsapp {
    position: absolute;
    left: 0;
    margin-left: 15px;
    margin-top: -15px;
}

.card-item {
    min-width: 280px!important;
}

.radio-group {
      display: flex;
      justify-content: space-between;
      width: 600px;
      border: 1px solid #ccc;
      border-radius: 10px;
      background-color: white;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      overflow: hidden;
    }

    .radio-option {
      flex: 1;
      text-align: center;
      justify-content: center;
      display: flex;
      transition: background-color 0.3s, color 0.3s;
    }

    .radio-option input[type="radio"] {
      /*display: none;*/
    }

    .radio-option.active {
      background: #def0ff;
      color: white;
    }

    .radio-option:hover {
      background-color: #f0f0f0;
    }

    .radio-option label {
      font-size: 16px;
      font-weight: bold;
      display: block;
      padding: 10px;
      cursor: pointer;
      
    }

    .radio-option input[type="radio"]:checked + label {
      color: #0073e6;
    }

    /* Ocultar los párrafos por defecto */
    .hidden {
      display: none;
    }
    
    .px-2 {
      padding-left: 0.5rem;
      padding-right: 0.5rem;
    }
    
    .m-0 {
      margin: 0;
    }
    
    .text-xs {
      font-size: 0.75rem;
    }

/* Animación de parpadeo para el texto */
@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}