/*
RUTA: wwwroot/css/gaia/pages/help-guide.css
-----------------------------------------------------------------------------
GAIA VIP - Modal común ayudas visuales
- Marcos comunes estables 8-4.
- Imagen ajustada por escala por ayuda.
- Imagen anclada arriba izquierda para que las coordenadas coincidan.
- Panel lateral con titular, texto con scroll y navegación.
- Hotspot visual del paso activo.
-----------------------------------------------------------------------------
*/

.gaia-help-guide-modal {
    --gaia-help-sidebar-width: 260px;
    --gaia-help-topbar-height: 60px;
    --gaia-help-modal-gap: .75rem;
    --gaia-help-image-scale: 100%;

    top: var(--gaia-help-topbar-height);
    left: var(--gaia-help-sidebar-width);
    width: calc(100vw - var(--gaia-help-sidebar-width));
    height: calc(100vh - var(--gaia-help-topbar-height));
    overflow: hidden;
}

.gaia-help-guide-modal[data-help-guide="member-dashboard"] {
    --gaia-help-image-scale: 100%;
}

.gaia-help-guide-modal[data-help-guide="profile"] {
    --gaia-help-image-scale: 92%;
}

.gaia-help-guide-modal-dialog {
    width: calc(100% - (var(--gaia-help-modal-gap) * 2));
    max-width: none;
    height: calc(100% - (var(--gaia-help-modal-gap) * 2));
    margin: var(--gaia-help-modal-gap);
}

.gaia-help-guide-modal-content {
    height: 100%;
    background: rgba(15, 23, 42, .98);
    border: 1px solid var(--border-subtle);
    border-radius: 1rem;
    overflow: hidden;
}

.gaia-help-guide-modal-body {
    position: relative;
    height: 100%;
    padding: 1rem;
    overflow: hidden;
}

.gaia-help-guide-close {
    position: absolute;
    top: .75rem;
    right: .75rem;
    z-index: 5;
}

.gaia-help-guide-modal-main-frame,
.gaia-help-guide-modal-side-frame {
    width: 100%;
    height: 100%;
    min-height: calc(100vh - var(--gaia-help-topbar-height) - 3.5rem);
    border: 2px solid var(--bs-primary);
    border-radius: .9rem;
    background: rgba(255, 255, 255, .025);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .035);
}

.gaia-help-guide-modal-main-frame {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    overflow: hidden;
}

.gaia-help-guide-image {
    display: block;
    width: var(--gaia-help-image-scale);
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.gaia-help-arrow-layer,
.gaia-help-hotspot-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.gaia-help-arrow-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 4;
    overflow: visible;
    pointer-events: none;
}

.gaia-help-arrow-line {
    stroke: var(--bs-warning);
    stroke-width: 4;
    stroke-linecap: round;
    filter: drop-shadow(0 0 .2rem rgba(0, 0, 0, .85));
}



.gaia-help-text-anchor {
    position: absolute;
    z-index: 5;
    transform: translate(-50%, -50%);
    width: .72rem;
    height: .72rem;
    border: 2px solid var(--bs-warning);
    border-radius: 50%;
    background: rgba(220, 53, 69, .98);
    box-shadow: 0 0 0 .16rem rgba(220, 53, 69, .20);
    pointer-events: none;
}

.gaia-help-hotspot-layer {
    z-index: 6;
}

.gaia-help-hotspot {
    position: absolute;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    border: 2px solid var(--bs-primary);
    border-radius: 50%;
    background: rgba(15, 23, 42, .92);
    color: var(--text-main);
    font-size: 1.1rem;
    font-weight: 700;
    box-shadow: 0 0 0 .35rem rgba(13, 110, 253, .18);
    pointer-events: none;
}

.gaia-help-guide-modal-side-frame {
    display: flex;
    flex-direction: column;
    padding: 2rem 1.5rem;
}

.gaia-help-panel-header {
    margin-top: .5rem;
}

.gaia-help-panel-title {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 0;
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.35;
}

.gaia-help-step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.4rem;
    height: 2.4rem;
    border: 2px solid var(--bs-primary);
    border-radius: 50%;
    font-size: 1.25rem;
    font-weight: 700;
}

.gaia-help-step-title {
    min-width: 0;
}

.gaia-help-panel-progress {
    display: none;
}

.gaia-help-panel-content {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    padding-right: .35rem;
    overscroll-behavior: contain;
    font-size: .98rem;
    line-height: 1.55;
}

.gaia-help-step-content-title {
    margin: 0 0 .75rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-main);
}

.gaia-help-panel-content p {
    margin: 0 0 .85rem;
}

.gaia-help-panel-content p:last-child {
    margin-bottom: 0;
}

.gaia-help-panel-divider {
    width: 100%;
    height: 2px;
    margin: 1rem 0;
    border-radius: 999px;
    background: var(--bs-primary);
    opacity: .95;
}

.gaia-help-panel-divider-actions {
    margin-top: 1rem;
}

.gaia-help-panel-actions {
    display: flex;
    gap: .75rem;
}

.gaia-help-panel-actions .btn {
    flex: 1;
}

.gaia-help-panel-exit {
    margin-top: 1rem;
}

.gaia-help-panel-exit .btn {
    width: 100%;
}

@media (max-width: 991.98px) {
    .gaia-help-guide-modal {
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
    }

    .gaia-help-guide-modal-dialog {
        width: calc(100% - 1rem);
        height: calc(100% - 1rem);
        margin: .5rem;
    }

    .gaia-help-guide-modal-body {
        overflow: auto;
    }

    .gaia-help-guide-modal-main-frame,
    .gaia-help-guide-modal-side-frame {
        min-height: 18rem;
        height: auto;
    }

    .gaia-help-guide-image {
        max-height: 70vh;
    }

    .gaia-help-panel-actions {
        flex-direction: column;
    }
}

.gaia-help-arrow-layer,.gaia-help-text-anchor{display:none!important;}