/* Estilo para el botón de ayuda */
#boton-ayuda {
    position: fixed;
    bottom: 45px;
    left: 60px;
    transform: translate(50%, 50%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    font-size: 2rem !important;
    font-weight: bold;
    background-color: #3A737E; /* Color de fondo del botón */
    color: white; /* Color de texto del botón */
    border: none;
    cursor: pointer;
    z-index: 2000;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

/* Animación cuando se pasa el mouse por encima */
#boton-ayuda:hover {
    background-color: #3A737E; /* Cambia a un azul más oscuro */
    transform: translate(50%, 50%) scale(1.1); /* Aumenta ligeramente el tamaño */
}

/* Animación cuando se hace clic */
#boton-ayuda:active {
    transform: translate(50%, 50%) scale(0.95); /* Reduce ligeramente el tamaño */
}

.tippy-content {
    padding: 10px;
    background-color: #2d2d2d; /* Fondo oscuro para contraste */
    color: #ffffff; /* Texto blanco */
    border-radius: 8px; /* Bordes redondeados */
}

.tippy-content h5 {
    margin-bottom: 15px;
    font-size: 1.25rem;
    color: #f0a500; /* Color de título */
}

.tippy-content .btn {
    display: block;
    width: 100%;
    padding: 10px;
    margin: 5px 0;
    color: #ffffff;
    background-color: #4CAF50; /* Color de fondo del botón */
    text-align: center;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.tippy-content .btn:hover {
    background-color: #45a049; /* Cambio de color en hover */
}

.tippy-content .btn.btn-link {
    background-color: transparent; /* Botón link transparente */
    color: #ffffff;
}

.tippy-content .btn.btn-link:hover {
    text-decoration: underline; /* Subrayar en hover */
}