/* =============================================
   ESTILOS MINIMOS PARA INTRO.JS
   (Shadow DOM maneja los estilos del primer tooltip)
   ============================================= */

/* Definir fuente personalizada para MargaritaMía */
@font-face {
    font-family: "MargaritaMía";
    src: url("/wp-content/uploads/fonts/ITCKRIST.TTF") format("truetype");
    font-weight: normal;
    font-style: normal;
}

/* Clase para aplicar la fuente de marca */
.tooltip-brand {
    font-family: "MargaritaMía", "Times New Roman", serif !important;
    color: #FCBC04 !important;
    text-shadow: -0.5px -0.5px 0 #954800, 0.5px -0.5px 0 #954800, -0.5px 0.5px 0 #954800, 0.5px 0.5px 0 #954800 !important;
    font-size: 16px !important;
    font-weight: normal !important;
}

/* Clase para marca sin control de tamano */
.tooltip-brand-small {
    font-family: "MargaritaMía", "Times New Roman", serif !important;
    color: #FCBC04 !important;
    text-shadow: -0.5px -0.5px 0 #954800, 0.5px -0.5px 0 #954800, -0.5px 0.5px 0 #954800, 0.5px 0.5px 0 #954800 !important;
    font-weight: normal !important;
}

/* Boton 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;
}

#start-onboarding-tour:hover,
#start-onboarding-tour:active {
    background-color: #954800 !important;
    color: #FF7B00 !important;
}

/* Estilos generales para el tooltip de Intro.js */
.introjs-tooltip {
    background-color: #444 !important;
    color: #fff;
    font-size: 14px;
    border-radius: 12px;
    max-width: 300px;
    position: absolute;
    z-index: 1000;
}

/* Fondo semitransparente alrededor del elemento */
.introjs-helperLayer {
    background-color: rgba(255, 255, 255, 0);
}

/* Estilos para el segundo paso */
.custom-tooltip-second-step .introjs-tooltip {
    max-width: 250px;
    transform: none;
    left: auto;
}

.custom-tooltip-second-step .introjs-tooltip-arrow {
    top: auto;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
}

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

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

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

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

/* =============================================
   BOTONES DEL TOUR
   ============================================= */

/* Estilos para todos los botones del tour */
.introjs-button,
.introjs-next-button,
.introjs-prev-button,
.introjs-donebutton {
    background-color: #FF7B00 !important;
    color: #954800 !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 10px 20px !important;
    cursor: pointer !important;
    font-weight: bold !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

.introjs-button:hover,
.introjs-next-button:hover,
.introjs-prev-button:hover,
.introjs-donebutton:hover {
    background-color: #e66e00 !important;
    color: #7a3d00 !important;
}

/* Ocultar boton de atras en el segundo paso */
.custom-tooltip-second-step .introjs-prevbutton {
    display: none !important;
}