/* ══════════════════════════════════════════════
   ONBOARDING TIPS
══════════════════════════════════════════════ */
#mapita-onboarding-tip {
    position: fixed;
    z-index: 99997;
    width: 215px;
    background: #fff;
    border-radius: 14px;
    padding: 14px 34px 13px 14px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.16);
    border-left: 3px solid #1B3B6F;
    pointer-events: all;
}
#mapita-onboarding-tip.hidden { display: none; }
#mapita-onboarding-tip.tip-show {
    animation: tipSlideIn 0.3s cubic-bezier(.34,1.4,.64,1);
}

@keyframes tipSlideIn {
    from { opacity: 0; transform: scale(0.88) translateX(10px); }
    to   { opacity: 1; transform: scale(1)    translateX(0);    }
}

/* Flecha apuntando hacia la derecha (hacia el botón) */
#mapita-onboarding-tip.tip-arrow-right::after {
    content: '';
    position: absolute;
    right: -9px;
    top: 50%;
    transform: translateY(-50%);
    width: 0; height: 0;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-left: 9px solid #fff;
    filter: drop-shadow(2px 0 1px rgba(0,0,0,0.06));
}

/* Flecha apuntando hacia la izquierda (elementos del sidebar) */
#mapita-onboarding-tip.tip-arrow-left::after {
    content: '';
    position: absolute;
    left: -9px;
    top: 50%;
    transform: translateY(-50%);
    width: 0; height: 0;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-right: 9px solid #fff;
    filter: drop-shadow(-2px 0 1px rgba(0,0,0,0.06));
}

/* Flecha apuntando hacia abajo (cuando el tip va encima) */
#mapita-onboarding-tip.tip-arrow-down::after {
    content: '';
    position: absolute;
    bottom: -9px;
    left: 50%;
    transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-top: 9px solid #fff;
    filter: drop-shadow(0 2px 1px rgba(0,0,0,0.06));
}

/* Botón cerrar (✕) */
#mapita-tip-dismiss {
    position: absolute;
    top: 8px; right: 8px;
    background: none; border: none;
    font-size: 13px; color: #9ca3af;
    cursor: pointer;
    padding: 3px 6px;
    border-radius: 5px;
    line-height: 1;
    transition: color 0.15s, background 0.15s;
}
#mapita-tip-dismiss:hover { color: #374151; background: #f3f4f6; }

/* Emoji */
#mapita-tip-emoji {
    font-size: 22px;
    line-height: 1;
    margin-bottom: 7px;
}

/* Texto */
#mapita-tip-text {
    margin: 0 0 11px;
    font-size: 12.5px;
    font-weight: 500;
    color: #374151;
    line-height: 1.5;
}

/* Footer: contador + botón */
.mapita-tip-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

#mapita-tip-counter {
    font-size: 10.5px;
    color: #9ca3af;
    font-weight: 700;
    letter-spacing: 0.02em;
}

#mapita-tip-next {
    background: #1B3B6F;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 5px 11px;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    white-space: nowrap;
}
#mapita-tip-next:hover { background: #14306b; transform: translateY(-1px); }

/* Mobile: tip un poco más angosto */
@media (max-width: 480px) {
    #mapita-onboarding-tip { width: 180px; }
    #mapita-tip-text { font-size: 12px; }
}

/* ── Resaltado pulsante del elemento objetivo ───────────────────── */
.tip-target-highlight {
    outline: 2.5px solid #1B3B6F !important;
    outline-offset: 3px !important;
    animation: tipTargetPulse 1.4s ease-in-out infinite !important;
    position: relative !important;
    z-index: 99996 !important;
}
@keyframes tipTargetPulse {
    0%, 100% { outline-color: rgba(27,59,111,0.9); outline-offset: 2px; }
    50%       { outline-color: rgba(27,59,111,0.25); outline-offset: 6px; }
}