/* Estilos generales para el tooltip de Intro.js */
.introjs-tooltip {
    background-color: #444 !important;
    color: #fff;
    font-size: 14px;
    border-radius: 5px;
    max-width: 300px;             /* Limita el ancho a 300px para evitar desbordes */
    position: absolute;           /* Mantiene el tooltip posicionado dinámicamente */
    z-index: 1000;                /* Asegura que esté sobre otros elementos */
}

/* Fondo semitransparente alrededor del elemento */
.introjs-helperLayer {
    background-color: rgba(255, 255, 255, 0); /* Fondo más claro para destacar el elemento */
}

/* Botón de inicio del tour */
#start-onboarding-tour {
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #0073aa;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

/* Hover y active para invertir colores */
#start-onboarding-tour:hover, #start-onboarding-tour:active {
    background-color: #954800 !important;
    color: #FF7B00 !important;
}

/* Estilos específicos para el segundo paso del tooltip */
.custom-tooltip-second-step .introjs-tooltip {
    max-width: 250px;             /* Ajusta el ancho para dispositivos más pequeños */
    transform: none;              /* Anula cualquier desplazamiento adicional */
    left: auto;                   /* Permite que Intro.js calcule dinámicamente la posición */
}

/* Flecha del tooltip en el segundo paso */
.custom-tooltip-second-step .introjs-tooltip-arrow {
    top: auto;                    /* Calculado automáticamente según posición */
    bottom: -10px;                /* Mueve la flecha hacia abajo */
    left: 50%;                    /* Centra la flecha horizontalmente */
    transform: translateX(-50%);  /* Ajuste fino */
}

/* Quitar el separador encima de los botones */
.introjs-tooltipbuttons {
    border-top: none !important; /* Elimina el borde superior */
    margin-top: 0 !important;   /* Elimina el margen superior */
    padding-top: 0 !important;  /* Elimina el espacio de padding */
}

/* Cambiar el color de los puntos inactivos */
.introjs-bullet {
    background-color: #d3d3d3 !important; /* Cambia este color para los puntos inactivos */
}

/* Cambiar el color del punto activo */
.introjs-bullet-active {
    background-color: #0078d4 !important; /* Cambia este color para el punto activo */
}

/* Cambiar el color de la "x" de cierre */
.introjs-skipbutton {
    color: #FF7B00 !important;
}