/* ============================================
   TEMA PERSONALIZADO PUPICAT PARA INTRO.JS
   Usa CSS Variables de Pupicat (site.css)
   ============================================ */

/* Tooltip principal - Fondo blanco con borde amarillo Pupicat */
.introjs-tooltip {
    background: #ffffff;
    color: #04333D; /* Azul oscuro Pupicat */
    border: 3px solid #FFB600; /* Amarillo Pupicat */
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(255, 182, 0, 0.3), 
                0 0 0 1px rgba(255, 182, 0, 0.1);
    max-width: 380px;
    padding: 20px;
    font-family: 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Título del tooltip - Azul oscuro Pupicat */
.introjs-tooltip-title {
    font-size: 22px;
    font-weight: 700;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 2px solid #FFB600; /* Separador amarillo */
    color: #04333D;
    text-shadow: none;
}

/* Texto del tooltip - Azul oscuro con buen contraste */
.introjs-tooltiptext {
    font-size: 15px;
    line-height: 1.7;
    color: #04333D;
    margin-bottom: 15px;
}

/* Botones del tooltip - Estilo Pupicat */
.introjs-button {
    background: #6DE2D9; /* Verde agua Pupicat */
    color: #04333D;
    border: 2px solid #6DE2D9;
    padding: 10px 24px;
    border-radius: 25px;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
    box-shadow: 0 3px 10px rgba(109, 226, 217, 0.3);
    cursor: pointer;
    text-transform: none;
}

.introjs-button:hover {
    background: #42dace; /* Verde agua hover */
    border-color: #42dace;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(109, 226, 217, 0.4);
}

.introjs-button:focus {
    outline: 2px solid #FFB600;
    outline-offset: 3px;
}

/* Botón "Anterior" - Rosado Pupicat */
.introjs-prevbutton {
    background: #EBB1CA;
    border-color: #EBB1CA;
    box-shadow: 0 3px 10px rgba(235, 177, 202, 0.3);
}

.introjs-prevbutton:hover {
    background: #e199bb;
    border-color: #e199bb;
    box-shadow: 0 5px 15px rgba(235, 177, 202, 0.4);
}

/* Botón de saltar - Estilo discreto */
.introjs-skipbutton {
    color: #04333D;
    opacity: 0.6;
    font-weight: 500;
    font-size: 13px;
}

.introjs-skipbutton:hover {
    color: #04333D;
    opacity: 1;
}

/* Botón deshabilitado */
.introjs-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: #e0e0e0 !important;
    border-color: #e0e0e0 !important;
}

/* Overlay oscuro de fondo - Azul Pupicat transparente */
.introjs-overlay {
    background: rgba(4, 51, 61, 0.85) !important; /* Azul oscuro Pupicat */
    z-index: 999998;
}

/* Spotlight con borde amarillo Pupicat */
.introjs-helperLayer {
    box-shadow: 0 0 0 9999px rgba(4, 51, 61, 0.85),
                0 0 50px rgba(255, 182, 0, 0.6);
    border-radius: 20px;
    border: 4px solid #FFB600; /* Amarillo Pupicat */
    z-index: 999999;
}

/* Animación de pulso con colores Pupicat */
@keyframes pulse-pupicat {
    0%, 100% { 
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 182, 0, 0.7);
    }
    50% { 
        transform: scale(1.03);
        box-shadow: 0 0 0 15px rgba(255, 182, 0, 0);
    }
}

.introjs-showElement {
    animation: pulse-pupicat 2s infinite;
    position: relative;
    z-index: 1000000;
}

/* Flecha del tooltip - Blanca para contraste */
.introjs-arrow {
    border-color: transparent;
}

.introjs-arrow.top {
    border-bottom-color: #ffffff;
}

.introjs-arrow.bottom {
    border-top-color: #ffffff;
}

.introjs-arrow.left {
    border-right-color: #ffffff;
}

.introjs-arrow.right {
    border-left-color: #ffffff;
}

/* Bullets (indicadores de progreso) - Amarillo Pupicat */
.introjs-bullets ul li a {
    background: rgba(255, 182, 0, 0.3);
    border: 2px solid #FFB600;
    width: 12px;
    height: 12px;
}

.introjs-bullets ul li a:hover {
    background: rgba(255, 182, 0, 0.6);
}

.introjs-bullets ul li a.active {
    background: #FFB600; /* Amarillo sólido */
    transform: scale(1.3);
}

/* Barra de progreso - Verde Pupicat */
.introjs-progress {
    background-color: rgba(109, 226, 217, 0.2);
    border-radius: 10px;
    overflow: hidden;
    height: 8px;
}

.introjs-progressbar {
    background: linear-gradient(90deg, #6DE2D9 0%, #42dace 100%);
    box-shadow: 0 2px 8px rgba(109, 226, 217, 0.4);
    height: 8px;
}

/* ============================================
   BOTÓN FLOTANTE DE AYUDA - Colores Pupicat
   ============================================ */
#pupicatTourBtn {
    position: fixed;
    bottom: 80px;
    right: 20px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #FFB600; /* Amarillo Pupicat sólido */
    color: #04333D; /* Texto azul oscuro */
    border: 4px solid #ffffff;
    box-shadow: 0 5px 20px rgba(255, 182, 0, 0.5),
                0 0 0 0 rgba(255, 182, 0, 0.4);
    cursor: pointer;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    transition: all 0.3s ease;
    animation: pulse-button 3s infinite;
}

#pupicatTourBtn:hover {
    background: #6DE2D9; /* Verde agua al hover */
    transform: scale(1.15);
    box-shadow: 0 8px 30px rgba(109, 226, 217, 0.6);
    animation: none;
}

#pupicatTourBtn:active {
    transform: scale(0.95);
}

#pupicatTourBtn i {
    animation: bounce-help 2s infinite;
}

@keyframes bounce-help {
    0%, 100% { 
        transform: translateY(0); 
    }
    50% { 
        transform: translateY(-5px); 
    }
}

@keyframes pulse-button {
    0%, 100% {
        box-shadow: 0 5px 20px rgba(255, 182, 0, 0.5),
                    0 0 0 0 rgba(255, 182, 0, 0.4);
    }
    50% {
        box-shadow: 0 5px 20px rgba(255, 182, 0, 0.5),
                    0 0 0 20px rgba(255, 182, 0, 0);
    }
}

/* ============================================
   RESPONSIVE - MOBILE
   ============================================ */
@media (max-width: 768px) {
    .introjs-tooltip {
        max-width: 280px;
        font-size: 14px;
    }
    
    .introjs-tooltip-title {
        font-size: 18px;
    }
    
    .introjs-tooltiptext {
        font-size: 14px;
    }
    
    .introjs-button {
        padding: 8px 16px;
        font-size: 14px;
    }
    
    #pupicatTourBtn {
        width: 50px;
        height: 50px;
        font-size: 20px;
        bottom: 70px;
        right: 15px;
    }
}

@media (max-width: 480px) {
    .introjs-tooltip {
        max-width: 250px;
        font-size: 13px;
    }
    
    .introjs-tooltip-title {
        font-size: 16px;
    }
    
    .introjs-tooltiptext {
        font-size: 13px;
    }
    
    #pupicatTourBtn {
        width: 45px;
        height: 45px;
        font-size: 18px;
        bottom: 60px;
        right: 10px;
    }
}

/* ============================================
   COMPATIBILIDAD CON HAMMER.JS
   ============================================ */
.introjs-tooltip {
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}

/* Evitar scroll durante el tour */
body.introjs-fixParent {
    overflow: hidden;
}

/* ============================================
   ESTILOS ADICIONALES PARA MEJORAR UX
   ============================================ */

/* Sombra suave en tooltips */
.introjs-tooltipReferenceLayer {
    z-index: 9999999;
}

/* Tooltip con animación de entrada */
.introjs-tooltip {
    animation: fadeInTooltip 0.3s ease-out;
}

@keyframes fadeInTooltip {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Mejorar contraste en texto - Resaltar con amarillo */
.introjs-tooltiptext strong {
    font-weight: 700;
    color: #04333D;
    background: rgba(255, 182, 0, 0.15);
    padding: 2px 6px;
    border-radius: 4px;
}

/* Enlaces dentro del tooltip - Estilo Pupicat */
.introjs-tooltiptext a {
    color: #6DE2D9; /* Verde agua */
    text-decoration: underline;
    font-weight: 600;
}

.introjs-tooltiptext a:hover {
    color: #42dace; /* Verde agua hover */
}

/* Checkbox "No mostrar de nuevo" - Azul oscuro */
.introjs-dontShowAgain {
    color: #04333D;
    font-size: 13px;
    font-weight: 500;
}

.introjs-dontShowAgain input[type="checkbox"] {
    margin-right: 8px;
    cursor: pointer;
    accent-color: #FFB600; /* Amarillo Pupicat para checkbox */
}

/* ============================================
   CLASES CUSTOM PARA CASOS ESPECIALES
   ============================================ */

/* Tooltip más grande para pasos importantes - Destacado con rosado */
.introjs-tooltip.introjs-important {
    max-width: 420px;
    border-color: #EBB1CA; /* Rosado Pupicat */
    box-shadow: 0 10px 40px rgba(235, 177, 202, 0.4);
}

.introjs-tooltip.introjs-important .introjs-tooltip-title {
    border-bottom-color: #EBB1CA;
    color: #EBB1CA;
}

/* Tooltip compacto */
.introjs-tooltip.introjs-compact {
    max-width: 280px;
    font-size: 14px;
    padding: 15px;
}

/* Ocultar elementos durante el tour */
.introjs-hideme {
    display: none !important;
}

/* ============================================
   EMOJIS Y ICONOS EN TÍTULOS
   ============================================ */
.introjs-tooltip-title::before {
    margin-right: 8px;
}

/* ============================================
   NÚMEROS DE PASO - Estilo Pupicat
   ============================================ */
.introjs-helperNumberLayer {
    background: #FFB600 !important;
    color: #04333D !important;
    border: 3px solid #ffffff;
    font-weight: 700;
    font-size: 16px;
    box-shadow: 0 3px 10px rgba(255, 182, 0, 0.4);
}