.ayuda-container {
    position: relative; display: inline-block; cursor: pointer; margin: 0; padding: 0; 
}

.ayuda-container .ayuda-mensaje {
    visibility: hidden; background-color: #555; color: #fff; text-align: center; border-radius: 5px;
    padding: 5px; position: absolute; z-index: 1; opacity: 0; transition: opacity 0.3s;
    width: 200px;  /* Ancho */
}

.ayuda-container .ayuda-mensaje.derecha {
    top: 50%; /* Centra verticalmente */
    left: calc(100% + 10px); /* Coloca el tooltip a la derecha separando 10px */
    transform: translateY(-50%); /* Centra verticalmente el tooltip */
}

.ayuda-container .ayuda-mensaje.derecha::after {
    content: "";
    position: absolute;
    top: 50%; /* Centrado verticalmente */ 
    right: 100%; /* A la izquierda del tooltip */ 
    margin-left: -5px; /* Centra la flecha ajustando el margen */
    border-width: 5px;
    border-style: solid;
    border-color: transparent #555 transparent  transparent ; /* Flecha hacia la izquierda */
}

.ayuda-container .ayuda-mensaje.arriba {
    bottom: calc(100% + 10px); /* Posiciona el tooltip arriba del contenedor separando 10px */
    left: 50%; /* Alinea el tooltip al centro horizontal */
    transform: translateX(-50%); /* Centra horizontalmente el tooltip */
}

.ayuda-container .ayuda-mensaje.arriba::after {
    content: "";
    position: absolute;
    top: 100%; /* Coloca la flecha debajo del tooltip */
    left: 50%; /* Centra la flecha horizontalmente */
    margin-left: -5px; /* Centra la flecha ajustando el margen */
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent; /* Flecha hacia abajo */
}

/*
.ayuda-container[data-position="near-left"] .ayuda-mensaje.arriba {
    left: 200%;
}
*/

.ayuda-container:hover .ayuda-mensaje {
    visibility: visible;
    opacity: 1;
}