/* =========================================================================
       DISEÑO DE LA TARJETA PRINCIPAL (POPUP)
       ========================================================================= */
    .introjs-tooltip {
        background-color: #084E88 !important; /* Azul corporativo Busqueo */
        color: #ffffff !important;
        border-radius: 16px !important; /* Bordes más suaves */
        padding: 24px !important;
        min-width: 300px;
        box-shadow: 0 10px 25px rgba(0,0,0,0.3) !important;
        border: 1px solid rgba(255,255,255,0.1) !important;
    }
    
    /* Titulo principal */
    .introjs-tooltipheadline {
        font-size: 18px !important;
        font-weight: 700 !important;
        color: #ffffff !important;
        margin-bottom: 10px !important;
    }
    
    /* Texto descriptivo */
    .introjs-tooltiptext {
        font-size: 14px !important;
        line-height: 1.5 !important;
        color: rgba(255, 255, 255, 0.85) !important;
        margin-bottom: 20px !important;
    }

    /* ❌ OCULTAR LA EQUIS (X) DE CIERRE */
    .introjs-skipbutton.introjs-closebutton {
        display: none !important;
    }

    /* =========================================================================
       DISEÑO PREMIUM DE LOS BOTONES DE NAVEGACIÓN
       ========================================================================= */
    /* Contenedor inferior de los botones */
    .introjs-tooltipbuttons {
        border-top: 1px solid rgba(255,255,255,0.1) !important;
        padding-top: 15px !important;
        text-align: right !important;
        display: flex !important;
        justify-content: flex-end !important;
        gap: 8px !important; /* Espacio uniforme entre botones */
    }

    /* Base unificada para todos los botones */
    .introjs-button {
        font-family: inherit !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        text-shadow: none !important;
        border: none !important;
        border-radius: 8px !important; /* Botones semi-redondeados */
        padding: 8px 16px !important;
        transition: all 0.2s ease-in-out !important;
        cursor: pointer !important;
        outline: none !important;
    }

    /* Botón Principal (Siguiente / Finalizar) */
    .introjs-nextbutton, .introjs-donebutton {
        background-color: #FDCF33 !important; /* Amarillo de tu marca */
        color: #084E88 !important; /* Texto azul para contraste óptimo */
        box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
    }
    .introjs-nextbutton:hover, .introjs-donebutton:hover {
        background-color: #ffe066 !important;
        transform: translateY(-1px) !important;
    }

    /* Botón Secundario (Atrás) */
    .introjs-prevbutton {
        background-color: rgba(255, 255, 255, 0.15) !important;
        color: #ffffff !important;
    }
    .introjs-prevbutton:hover {
        background-color: rgba(255, 255, 255, 0.25) !important;
    }

    /* Botón Saltar (Esquina inferior izquierda) */
    .introjs-skipbutton:not(.introjs-closebutton) {
        background-color: transparent !important;
        color: rgba(255, 255, 255, 0.6) !important;
        float: left !important; /* Lo empuja al extremo izquierdo */
        margin-right: auto !important;
    }
    .introjs-skipbutton:not(.introjs-closebutton):hover {
        color: #ffeb3b !important; /* Cambia a amarillo al pasar el mouse */
    }

    /* Puntos de progreso inferiores (Bullets) */
    .introjs-bullets ul li a {
        background: rgba(255,255,255,0.3) !important;
    }
    .introjs-bullets ul li a.active {
        background: #FDCF33 !important; /* Punto activo amarillo */
    }