/* Estilos botón toggle */
.bcw-toggle{
    display:block;
}

.bcw-toggle__menu-icon{
    display:flex;
}
.bcw-toggle__close-icon{
    display:none;
}

.bcw-toggle.is-open .bcw-toggle__menu-icon{
    display:none;
}
.bcw-toggle.is-open .bcw-toggle__close-icon{
    display:flex;
}

/* Estilos panel */
.bcw-drawer{
    position:fixed;
    left:0;
    bottom:0;
    top:0;
    right:0;
    transition: ease .3s;
    transform: translateY(calc(100% + 0.5rem));
    display:flex;
}
.bcw-drawer.is-open{
    transform:translateY(0);
}

.bcw-panel{
    height:100%;
    width:100%;
    overflow: auto;
    box-shadow: 0 -0.125rem 0.375rem rgba(0,0,0,0.23),
                0 -0.125rem 0.375rem rgba(0,0,0,0.16);
     /* Ocultar en Firefox */
    scrollbar-width: none;

    /* Ocultar en Internet Explorer y Edge antiguo */
    -ms-overflow-style: none;
}

/* Ocultar en Chrome, Edge moderno, Safari y Opera */
.bcw-panel::-webkit-scrollbar {
  display: none;
}

/* Navegación por pasos: solo se ve el panel activo */
.bcw-menu-panel{
    display: none;
}
.bcw-menu-panel.is-active{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Entrada del contenido del panel (cabecera, ladillo y enlaces), todo a la
   vez: opacidad + desplazamiento. La dirección depende de --bcw-dir
   (1 = avanzando, entra desde la derecha · -1 = volviendo, entra desde la
   izquierda), fijada por JS antes de cada transición. */
@keyframes bcw-item-in{
    from{
        opacity: 0;
        transform: translateX(calc(var(--bcw-dir, 1) * 0.5rem));
    }
    to{
        opacity: 1;
        transform: translateX(0);
    }
}
.bcw-panel-header.bcw-animate-in,
.bcw-panel-title.bcw-animate-in,
.bcw-panel-menu > li.bcw-animate-in{
    animation: bcw-item-in .1s ease both;
}

/* Salida del panel completo (mismo --bcw-dir, sentido contrario a la entrada) */
@keyframes bcw-panel-out{
    from{
        opacity: 1;
        transform: translateX(0);
    }
    to{
        opacity: 0;
        transform: translateX(calc(var(--bcw-dir, 1) * -0.5rem));
    }
}
.bcw-menu-panel.is-leaving{
    animation: bcw-panel-out .2s ease forwards;
}

.bcw-panel-menu{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Flex para poder controlar el espaciado entre icono y texto con gap */
.bcw-panel-header{
    display: flex;
    align-items: center;
}

.bcw-panel-header,
.bcw-panel-header svg{
    transition: ease .2s;
}

.bcw-panel-header:hover svg{
    transform: translateX(-0.25rem);
}

/* Flex en columna para poder controlar con gap el espacio entre el ladillo
   y la lista de enlaces */
.bcw-panel-content{
    display: flex;
    flex-direction: column;
}

.bcw-panel-menu .menu-item{
    display:flex;
}

/* El enlace final es flujo de texto normal (ni flex ni float): así el texto
   envuelve igual que un párrafo cualquiera. La última palabra va unida al
   icono dentro de "bcw-panel-link-tail", que es inline-flex: por fuera se
   comporta como un bloque atómico (el navegador nunca parte la línea justo
   entre la palabra y la flecha, saltan juntos si no caben), y por dentro
   deja usar gap/align-items en vez de márgenes y vertical-align. */
.bcw-panel-link-end{
    display: block;
    width: 100%;
}

.bcw-panel-link-tail{
    display: inline-flex;
    align-items: center;
}

/* Caja del alto de una línea de texto (1lh = line-height), para que el
   icono quede centrado respecto a esa línea sin generar espaciados raros. */
.bcw-panel-link-icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1lh;
    transition: ease .2s;
}

.bcw-panel-link-end:hover .bcw-panel-link-icon{
    transform:translateX(0.25rem);
}