/**
 * Floating Icons Pro - Sistema Sidebar
 * Version: 1.3.0
 * Cambios: Corregido posicionamiento de iconos en semicírculo
 */

/* ===================================
   Contenedor Sidebar
   =================================== */
.fip-sidebar {
    position: relative;
    display: flex;
    align-items: center;
    z-index: var(--fip-z-sidebar-content);
}

/* ===================================
   Botón Toggle del Sidebar
   =================================== */
.fip-sidebar-toggle {
    width: var(--fip-sidebar-toggle-size);
    height: var(--fip-sidebar-toggle-size);
    background-color: var(--fip-sidebar-default-bg);
    border: none;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--fip-transition-default);
    box-shadow: var(--fip-icon-shadow);
    padding: 0;
    position: relative;
    z-index: var(--fip-z-sidebar-toggle);
}

.fip-sidebar-toggle:hover {
    transform: scale(1.1);
    box-shadow: var(--fip-icon-hover-shadow);
}

/* Icono del toggle */
.fip-sidebar-toggle-icon {
    width: 24px;
    height: 24px;
    transition: var(--fip-transition-transform);
}

.fip-sidebar-toggle-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

/* ===================================
   Contenido del Sidebar
   =================================== */
.fip-sidebar-content {
    position: absolute;
    display: flex;
    gap: var(--fip-container-gap);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: var(--fip-transition-default);
    z-index: var(--fip-z-sidebar-content);
}

/* Estado abierto */
.fip-sidebar.open .fip-sidebar-content {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* ===================================
   Layout Columna (Default)
   =================================== */
.fip-sidebar[data-layout="column"] .fip-sidebar-content {
    flex-direction: column;
}

/* Posiciones específicas para columna - CORREGIDO */
.fip-position-top-left .fip-sidebar[data-layout="column"] .fip-sidebar-content,
.fip-position-top-right .fip-sidebar[data-layout="column"] .fip-sidebar-content {
    top: calc(100% + var(--fip-container-gap));
    flex-direction: column;
}

/* Centro Izquierda - Los iconos se despliegan hacia abajo desde el sidebar */
.fip-position-center-left .fip-sidebar[data-layout="column"] .fip-sidebar-content {
    left: 0;
    top: calc(100% + var(--fip-container-gap));
    transform: none;
    flex-direction: column;
    align-items: center;
}

/* Centro Derecha - Los iconos se despliegan hacia abajo desde el sidebar */
.fip-position-center-right .fip-sidebar[data-layout="column"] .fip-sidebar-content {
    right: 0;
    left: auto;
    top: calc(100% + var(--fip-container-gap));
    transform: none;
    flex-direction: column;
    align-items: center;
}

.fip-position-bottom-left .fip-sidebar[data-layout="column"] .fip-sidebar-content,
.fip-position-bottom-right .fip-sidebar[data-layout="column"] .fip-sidebar-content {
    bottom: calc(100% + var(--fip-container-gap));
    flex-direction: column-reverse;
}

/* Bottom Center - Los iconos se despliegan hacia la derecha desde el sidebar */
.fip-position-bottom-center .fip-sidebar[data-layout="column"] .fip-sidebar-content {
    bottom: 0;
    left: calc(100% + var(--fip-container-gap));
    transform: none;
    flex-direction: row;
    align-items: center;
}

/* ===================================
   Layout Semicírculo - CORREGIDO
   =================================== */
.fip-sidebar[data-layout="semicircle"] .fip-sidebar-content {
    display: block;
    position: absolute;
    width: 400px;
    height: 400px;
    pointer-events: none;
    /* IMPORTANTE: No usar transform aquí para evitar conflictos */
}

/* Posicionamiento base del contenedor */
.fip-position-center-left .fip-sidebar[data-layout="semicircle"] .fip-sidebar-content {
    left: -30px;
    right: auto;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
}

.fip-position-center-right .fip-sidebar[data-layout="semicircle"] .fip-sidebar-content {
    right: -30px;
    left: auto;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
}

/* Iconos en semicírculo - CORREGIDO */
.fip-sidebar[data-layout="semicircle"] .fip-icon--in-sidebar {
    position: absolute !important;
    /* IMPORTANTE: NO definir left/top aquí, se hace desde JavaScript */
    margin: 0;
    transform-origin: center;
    transition: transform var(--fip-animation-speed) cubic-bezier(0.4, 0, 0.2, 1),
                opacity var(--fip-animation-speed) ease;
    pointer-events: auto;
    /* Estado inicial: las posiciones se definen en JavaScript */
}

/* Prevenir que el CSS sobrescriba las posiciones calculadas */
.fip-sidebar[data-layout="semicircle"] .fip-icon--in-sidebar {
    /* Remover cualquier posicionamiento por defecto */
    /* left: auto !important;
    top: auto !important; */
}
 
/* Hover en semicírculo - sin cambiar transform */
.fip-sidebar[data-layout="semicircle"] .fip-icon--in-sidebar:hover {
    filter: brightness(1.2);
    box-shadow: 0 8px 25px rgba(0,0,0,0.35), 
                0 0 0 2px rgba(255,255,255,0.2);
    z-index: calc(var(--fip-z-icons) + 10);
}

/* ===================================
   Animaciones del Toggle
   =================================== */
/* Rotate 180 */
.fip-sidebar[data-click-animation="rotate180"].open .fip-sidebar-toggle-icon {
    transform: rotate(180deg);
}

/* Rotate 360 */
.fip-sidebar[data-click-animation="rotate360"].open .fip-sidebar-toggle-icon {
    animation: fip-rotate360 0.5s ease;
}

/* Flip */
.fip-sidebar[data-click-animation="flip"].open .fip-sidebar-toggle-icon {
    animation: fip-flip 0.5s ease;
}

/* Scale */
.fip-sidebar[data-click-animation="scale"].open .fip-sidebar-toggle-icon {
    animation: fip-scaleAnimation 0.5s ease;
}

/* Bounce */
.fip-sidebar[data-click-animation="bounce"].open .fip-sidebar-toggle-icon {
    animation: fip-bounceAnimation 0.5s ease;
}

/* ===================================
   Keyframes para animaciones
   =================================== */
@keyframes fip-rotate360 {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes fip-flip {
    0% { transform: scaleX(1); }
    50% { transform: scaleX(0); }
    100% { transform: scaleX(1); }
}

@keyframes fip-scaleAnimation {
    0% { transform: scale(1); }
    50% { transform: scale(0.8); }
    100% { transform: scale(1); }
}

@keyframes fip-bounceAnimation {
    0%, 100% { transform: translateY(0); }
    25% { transform: translateY(-8px); }
    75% { transform: translateY(4px); }
}

 
/* ===================================
   Responsive
   =================================== */
@media (max-width: 768px) {
    .fip-sidebar-toggle {
        width: var(--fip-icon-size-mobile);
        height: var(--fip-icon-size-mobile);
    }
    
    .fip-sidebar-toggle-icon {
        width: 20px;
        height: 20px;
    }
    
    /* Ajustar tamaño del contenedor semicírculo en móvil */
    .fip-sidebar[data-layout="semicircle"] .fip-sidebar-content {
        width: 300px;
        height: 300px;
    }
}