/**
 * Floating Icons Pro - Posicionamiento
 * Contiene: Todas las clases de posición y sus variantes responsive
 */

/* ===================================
   Contenedores de Posición Base
   =================================== */
.fip-position-container {
    position: fixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--fip-container-gap);
    pointer-events: auto;
}

/* ===================================
   Posiciones Desktop
   =================================== */
/* Superior */
.fip-position-top-left {
    top: var(--fip-position-offset);
    left: var(--fip-position-offset);
    align-items: flex-start;
}

.fip-position-top-right {
    top: var(--fip-position-offset);
    right: var(--fip-position-offset);
    align-items: flex-end;
}

/* Centro */
.fip-position-center-left {
    top: 50%;
    left: var(--fip-position-offset);
    transform: translateY(-50%);
    align-items: flex-start;
}

.fip-position-center-right {
    top: 50%;
    right: var(--fip-position-offset);
    transform: translateY(-50%);
    align-items: flex-end;
}

/* Inferior */
.fip-position-bottom-left {
    bottom: var(--fip-position-offset);
    left: var(--fip-position-offset);
    align-items: flex-start;
}

.fip-position-bottom-center {
    bottom: var(--fip-position-offset);
    left: 50%;
    transform: translateX(-50%);
    flex-direction: row;
    align-items: flex-end;
    gap: 15px;
}

.fip-position-bottom-right {
    bottom: var(--fip-position-offset);
    right: var(--fip-position-offset);
    align-items: flex-end;
}

/* ===================================
   Ajustes de Posición para Elementos
   =================================== */
/* Ajustes para sidebar en diferentes posiciones */
.fip-position-top-left .fip-sidebar,
.fip-position-top-right .fip-sidebar {
    flex-direction: column;
}

.fip-position-bottom-left .fip-sidebar,
.fip-position-bottom-right .fip-sidebar {
    flex-direction: column-reverse;
}

.fip-position-bottom-center .fip-sidebar {
    flex-direction: column-reverse;
}

/* ===================================
   Responsive - Tablet
   =================================== */
@media (max-width: 1024px) {
    :root {
        --fip-position-offset: 15px;
    }
}

/* ===================================
   Responsive - Mobile
   =================================== */
@media (max-width: 768px) {
    :root {
        --fip-position-offset: 10px;
        --fip-container-gap: var(--fip-container-gap-mobile);
    }
    
    /* Ocultar posiciones no móviles */
    .fip-main-container[data-mobile="true"] .fip-position-top-left,
    .fip-main-container[data-mobile="true"] .fip-position-top-right,
    .fip-main-container[data-mobile="true"] .fip-position-center-left,
    .fip-main-container[data-mobile="true"] .fip-position-center-right {
        display: none !important;
    }
    
    /* Aplicar posiciones móviles */
    .fip-main-container[data-mobile="true"] .fip-mobile-bottom-left {
        position: fixed !important;
        bottom: var(--fip-position-offset) !important;
        left: var(--fip-position-offset) !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
        align-items: flex-start !important;
    }
    
    .fip-main-container[data-mobile="true"] .fip-mobile-bottom-center {
        position: fixed !important;
        bottom: var(--fip-position-offset) !important;
        left: 50% !important;
        right: auto !important;
        top: auto !important;
        transform: translateX(-50%) !important;
        flex-direction: row !important;
        align-items: flex-end !important;
    }
    
    .fip-main-container[data-mobile="true"] .fip-mobile-bottom-right {
        position: fixed !important;
        bottom: var(--fip-position-offset) !important;
        right: var(--fip-position-offset) !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        align-items: flex-end !important;
    }
    
    /* Ajustar espaciado en mobile */
    .fip-position-bottom-center {
        gap: 10px;
    }
}

/* ===================================
   Micro ajustes para pantallas pequeñas
   =================================== */
@media (max-width: 360px) {
    :root {
        --fip-position-offset: 8px;
    }
    
    .fip-position-bottom-center {
        gap: 8px;
    }
}