/* css/carrito.css */

.contenedor-carrito {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Esto empuja todo bien a la derecha */
    gap: 25px; /* Espacio entre el texto y el carrito */
}

/* Diseño para el texto de "Mi Cuenta" */
.enlace-header {
    color: #555;
    text-decoration: none; /* Quitamos la rayita de abajo de los enlaces */
    font-weight: 500;
    font-size: 16px;
    transition: color 0.3s ease;
}

.enlace-header:hover {
    color: #ff6b6b; /* Se pone rojito al pasar el ratón */
}

/* Diseño para el ícono del carrito */
.icono-carrito-btn {
    position: relative; /* Para poder ponerle la burbujita encima */
    color: #333;
    font-size: 24px;
    text-decoration: none;
    transition: transform 0.2s ease;
}

.icono-carrito-btn:hover {
    transform: scale(1.1); /* Hace un pequeño saltito al pasar el ratón */
    color: #ff6b6b;
}

/* La burbujita roja que marca cuántos productos hay */
.burbuja-cantidad {
    position: absolute;
    top: -8px;
    right: -12px;
    background-color: #ff6b6b;
    color: white;
    border-radius: 50%; /* La hace redondita */
    padding: 2px 7px;
    font-size: 12px;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}