/* Estilos compartidos para todas las páginas de BeeLife Social Post */

/* Estilos para la sidebar */
.sidebar {
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.sidebar-transition {
    will-change: opacity, transform;
}

/* Estilos para mejorar la experiencia de navegación */
a {
    transition: color 0.2s ease, background-color 0.2s ease;
}

/* Estilos para el efecto de carga */
.content-loading {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.content-loaded {
    opacity: 1;
}

/* Estilos para el menú móvil */
@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
        position: fixed;
        z-index: 50;
        height: 100vh;
    }
    
    .sidebar.active {
        transform: translateX(0);
    }
}

/* Estilos para el icono de honeycomb */
.honeycomb-icon {
    position: relative;
    width: 40px;
    height: 40px;
    background-color: var(--primary);
    transform: rotate(30deg);
}

.honeycomb-icon:before,
.honeycomb-icon:after {
    content: "";
    position: absolute;
    width: 40px;
    height: 40px;
    background-color: var(--primary);
}

.honeycomb-icon:before {
    transform: rotate(60deg);
}

.honeycomb-icon:after {
    transform: rotate(120deg);
}

/* Splitted Text Reveal Animation */
.splitted-title {
    display: flex;
    gap: 0em;
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -2px;
    color: #18181b;
    background: none;
    background-clip: unset;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    text-fill-color: unset;
    position: relative;
    overflow: hidden;
    filter: drop-shadow(0 4px 24px rgba(0,0,0,0.07));
    font-size: 4rem;
}

@media (min-width: 768px) {
  .splitted-title {
    font-size: 6rem;
  }
}

.splitted-title .splitted-text {
    display: inline-block;
    opacity: 0;
    transform: translateY(80px) scale(1.15) skewY(8deg);
    animation: splitted-reveal 0.7s cubic-bezier(.77,0,.18,1) forwards;
}

.splitted-title .splitted-text:nth-child(1) { animation-delay: 0.03s; }
.splitted-title .splitted-text:nth-child(2) { animation-delay: 0.12s; }
.splitted-title .splitted-text:nth-child(3) { animation-delay: 0.21s; }
.splitted-title .splitted-text:nth-child(4) { animation-delay: 0.30s; }
.splitted-title .splitted-text:nth-child(5) { animation-delay: 0.39s; }
.splitted-title .splitted-text:nth-child(6) { animation-delay: 0.48s; }

@keyframes splitted-reveal {
    0% {
        opacity: 0;
        transform: translateY(80px) scale(1.15) skewY(8deg);
    }
    70% {
        opacity: 1;
        transform: translateY(-10px) scale(1.05) skewY(-2deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1) skewY(0);
    }
}

.dashboard-header {
    min-height: 180px;
}

@media (max-width: 600px) {
  .splitted-title {
    font-size: 2.4rem;
    letter-spacing: -2px;
  }
  .dashboard-header {
    min-height: 120px;
  }
}