/* ====================================================================================================
Estilos del módulo de onboarding interactivo
==================================================================================================== */
/* Overlay oscuro de fondo */
.onb-overlay
{
    position:         fixed;
    inset:            0;
    background:       rgba(0, 0, 0, 0.6);
    z-index:          9000;
    backdrop-filter:  blur(2px);
    animation:        onb-fade-in 0.25s ease;
}

/* Recuadro spotlight sobre el elemento objetivo */
.onb-spotlight
{
    position:      absolute;
    z-index:       9001;
    border-radius: 10px;
    box-shadow:    0 0 0 4000px rgba(0, 0, 0, 0.01);
    /* no bloquea el overlay real */
    outline:       3px solid var(--color-primary);
    outline-offset: 2px;
    pointer-events: none;
    transition:     top 0.3s ease, left 0.3s ease, width 0.3s ease, height 0.3s ease, opacity 0.25s ease;
    opacity:        0;
}

/* Onb spotlight visible */
.onb-spotlight-visible
{
    opacity: 1;
}

/* Tooltip principal */
.onb-tooltip
{
    position:      absolute;
    z-index:       9002;
    width:         320px;
    max-width:     calc(100vw - 2.5rem);
    background:    #1e1e2e;
    border:        1px solid rgba(193, 75, 54, 0.35);
    border-radius: 14px;
    box-shadow:    0 8px 32px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.04);
    animation:     onb-pop-in 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition:    opacity 0.15s ease;
}

/* Onb tooltip inner */
.onb-tooltip-inner
{
    padding: 1.5rem 1.25rem 1.25rem;
    position: relative;
}

/* Botón de cerrar (saltar) */
.onb-skip-btn
{
    position:        absolute;
    top:             0.75rem;
    right:           0.75rem;
    background:      transparent;
    border:          none;
    color:           rgba(255, 255, 255, 0.4);
    font-size:       0.85rem;
    cursor:          pointer;
    padding:         var(--gap-xs);
    line-height:     1;
    transition:      color 0.15s ease;
}

/* Onb skip btn */
.onb-skip-btn:hover
{
    color: rgba(255, 255, 255, 0.9);
}

/* Ícono del paso */
.onb-tooltip-icon
{
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           2.5rem;
    height:          2.5rem;
    border-radius:   50%;
    background:      rgba(193, 75, 54, 0.15);
    color:           var(--color-primary);
    font-size:       1.1rem;
    margin-bottom:   var(--spacing-md);
}

/* Título del tooltip */
.onb-tooltip-title
{
    font-size:     1rem;
    font-weight:   600;
    color:         #f0f0f0;
    margin:        0 0 var(--spacing-sm);
    padding-right: 1.5rem;
    /* espacio para el botón X */;
}

/* Texto descriptivo */
.onb-tooltip-text
{
    font-size:   0.875rem;
    color:       rgba(255, 255, 255, 0.65);
    line-height: 1.5;
    margin:      0 0 var(--spacing);
}

/* Dots de navegación */
.onb-dots
{
    display:         flex;
    gap:             6px;
    justify-content: center;
    margin-bottom:   1rem;
}

/* Onb dot */
.onb-dot
{
    width:         8px;
    height:        8px;
    border-radius: 50%;
    background:    rgba(255, 255, 255, 0.2);
    transition:    background 0.2s ease, transform 0.2s ease;
}

/* Onb dot active */
.onb-dot-active
{
    background: var(--color-primary);
    transform:  scale(1.25);
}

/* Botones de acción */
.onb-tooltip-actions
{
    display:         flex;
    gap:             var(--gap-sm);
    justify-content: flex-end;
}

/* Onb btn */
.onb-btn
{
    display:       inline-flex;
    align-items:   center;
    gap:           0.4rem;
    padding:       var(--spacing-sm) var(--spacing);
    border-radius: 8px;
    border:        none;
    font-size:     0.85rem;
    font-weight:   500;
    cursor:        pointer;
    transition:    background 0.15s ease, transform 0.1s ease;
}

/* Onb btn */
.onb-btn:active
{
    transform: scale(0.97);
}

/* Onb btn primary */
.onb-btn-primary
{
    background: var(--color-primary);
    color:      var(--color-white);
}

/* Onb btn primary */
.onb-btn-primary:hover
{
    background: var(--color-primary-dark);
}

/* Onb btn secondary */
.onb-btn-secondary
{
    background: rgba(255, 255, 255, 0.08);
    color:      rgba(255, 255, 255, 0.75);
}

/* Onb btn secondary */
.onb-btn-secondary:hover
{
    background: rgba(255, 255, 255, 0.14);
}

/* Clase de fade-out para la animación de salida */
.onb-fade-out
{
    animation: onb-fade-out 0.3s ease forwards !important;
}

/* ====================================================================================================
Keyframes
==================================================================================================== */
@keyframes onb-fade-in
{
    /* from */
    from
    {
        opacity: 0;
    }

    /* to */
    to
    {
        opacity: 1;
    }

}

/* Animación: onb-pop-in */
@keyframes onb-pop-in
{
    /* from */
    from
    {
        opacity: 0;
        transform: scale(0.88) translateY(8px);
    }

    /* to */
    to
    {
        opacity: 1;
        transform: scale(1)    translateY(0);
    }

}

/* Animación: onb-fade-out */
@keyframes onb-fade-out
{
    /* from */
    from
    {
        opacity: 1;
    }

    /* to */
    to
    {
        opacity: 0;
    }

}

/* ====================================================================================================
Responsive: en pantallas pequeñas el tooltip se centra fijo en la parte inferior
==================================================================================================== */
/* Tablet horizontal */
@media screen and (min-width: 48rem) and (max-width: 64rem) and (orientation: landscape)
{
    /* El tooltip mantiene su posicionamiento absoluto normal; solo limitamos el ancho */
    .onb-tooltip
    {
        width:     300px;
        max-width: calc(100vw - 3rem);
    }

}

/* Tablet vertical */
@media screen and (min-width: 30rem) and (max-width: 48rem) and (orientation: portrait)
{
    /* En tablet vertical el tooltip se ancla a la parte inferior */
    .onb-tooltip
    {
        position:  fixed !important;
        left:      1.5rem !important;
        right:     1.5rem !important;
        bottom:    1.5rem !important;
        top:       auto !important;
        width:     auto;
        max-width: none;
    }

}

/* Móvil vertical */
@media screen and (max-width: 30rem) and (orientation: portrait)
{
    /* En móvil el tooltip ocupa todo el ancho con márgenes mínimos */
    .onb-tooltip
    {
        position:  fixed !important;
        left:      1rem !important;
        right:     1rem !important;
        bottom:    1rem !important;
        top:       auto !important;
        width:     auto;
        max-width: none;
    }

}