/* Lógica de comportamiento y animación */
.btn-expandible {
    display: inline-flex;
    align-items: center;
    /* justify-content: center; <--- QUITAR ESTO (importante para que la animación fluya hacia la derecha) */
    overflow: hidden;

    /* CAMBIO CLAVE 1: Usar min-width en lugar de width fijo */
    min-width: 35px;
    height: 35px;

    border-radius: 50px;
    padding: 0;

    transition: all 0.4s ease;
}

/* El texto */
.btn-expandible .text-content {
    /* CAMBIO CLAVE 2: Esto controla la animación del ancho */
    max-width: 0;
    opacity: 0;
    white-space: nowrap;
    overflow: hidden;

    /* Aseguramos que la transición ocurra tanto al entrar como al salir */
    transition: all 0.4s ease;

    margin-left: 0;
}

/* El icono */
.btn-expandible i {
    font-size: 1.1rem;
    display: flex;
    justify-content: center;
    align-items: center;

    /* El icono mantiene el ancho mínimo del círculo para no deformarse */
    min-width: 40px;
    height: 40px;

    transition: margin 0.4s ease;
}

/* --- ESTADO HOVER --- */

.btn-expandible:hover {
    /* YA NO modificamos el width aquí */
    padding-right: 15px; /* Solo agregamos el aire al final */
}

.btn-expandible:hover .text-content {
    /* Al dar un max-width grande, el texto empuja suavemente las paredes del botón */
    max-width: 200px;
    opacity: 1;
    margin-left: 0px;
}