/* Fondo con rombos en el header */
        body {
            background-color: #2c2c2c;
            background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%),
                linear-gradient(-45deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%),
                linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.1) 75%),
                linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.1) 75%);
            background-size: 40px 40px;
            height: 100dvh;
            width: 100dvw;
            overflow-y: hidden;
        }

        /* Fondo del contenedor padre */
        .productos-wrapper {
            background: #f5f5f5;
            border-radius: 15px 0px 0px 15px;
            height: 75dvh;
            /* ocupa el resto de la pantalla menos el header */
            width: 90dvw;
            margin: 0px auto;
            display: flex;
            padding: 20px;
            overflow-y: scroll;
            scrollbar-color: #2c2c2c #f5f5f5;
            justify-content: center;
        }

        .aromas-list {
            height: 40dvh;
            overflow-y: scroll;
            padding: 10px;
        }

        #aromasDropdown {
            margin: 0px !important;
        }

        .aromas-header {
            width: 100% !important;
            display: block;
            text-align: center;
            /* margin: 0px auto; */
            color: #2c2c2c;
            text-decoration: underline;
        }

        .aromas-btn {
            width: 40dvw !important;
        }

        .aromas-list.show {
            /* left: -55%; */
            display: flex;
            flex-wrap: wrap;
            width: 40dvw !important;
            padding: 10px;
        }

        .checkbox-item {
            margin-top: 10px;
        }

        /* Contenedor flex con wrap */
        .productos-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 20px;
            max-width: 1200px;
        }

        /* Tarjetas iguales */
        .card.product-card {
            width: 250px;
            min-height: 250px;
            height: fit-content;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .card.product-card img {
            height: 150px;
            object-fit: cover;
        }

        .card-body div button {
            margin-top: 10px;
        }

        .area-login {
            width: 100%;
            margin-bottom: 10px;
        }

        .form-login button {
            display: flex;
            justify-content: center;
        }

        form {
            width: max-content !important;
        }

        .navbar .container-fluid {
            display: flex !important;
            flex-direction: column !important;
            width: 80dvw;
        }

        #loading-spinner {
            margin-left: 6px;
            width: 20px;
            height: 20px;
            border: 4px solid #ccc;
            /* color del borde base */
            border-top-color: #3498db;
            border-bottom-color: #3498db;
            /* color del borde que se verá como “activo” */
            border-radius: 50%;
            /* forma circular */
            animation: spin 0.8s linear infinite;
        }

        /* Animación de giro */
        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }

        .alertas {
            position: fixed;
            bottom: 20px;
            left: 10px;
            transform: translateX(-50%);
            display: flex;
            flex-direction: column;
            height: fit-content;
            gap: 10px;
            width: 30%;
            word-wrap: break-word;
            /* separación entre alertas */
            z-index: 9999;
        }

        .alerta {
            position: relative;
            bottom: 0;
            left: 100%;
            transform: translateX(-50%) translateY(100%);
            /* empieza fuera de la ventana */
            background: #f44336;
            color: white;
            padding: 10px 20px;
            border-radius: 5px;
            opacity: 0;
        }

        /* Animación completa: subir, quedarse, bajar */
        @keyframes aparecerDesvanecer {
            0% {
                opacity: 0;
                transform: translateX(-50%) translateY(100%);
            }

            10% {
                opacity: 1;
                transform: translateX(-50%) translateY(-30px);
                /* entra */
            }

            70% {
                opacity: 1;
                transform: translateX(-50%) translateY(-30px);
                /* se mantiene */
            }

            100% {
                opacity: 0;
                transform: translateX(-50%) translateY(100%);
                /* baja y desaparece */
            }
        }

        .alerta.mostrar {
            animation: aparecerDesvanecer 7s ease forwards;
        }

        .must-be-logged {
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            background-color: #2c2c2c51;
        }

        .must-be-logged div {
            padding: 10px;
            border-radius: 10px;
            background-color: #f5f5f5;
            width: 80%;
            height: fit-content;
        }

        .cart-dropdown {
            padding-top: 0px !important;
        }

        .error-bg {
            background-color: lightcoral;
            color: white
        }

        .ok-bg {
            background-color: #00a716;
        }

        .info-bg {
            background-color: lightskyblue;
        }

        .filtros {
            display: flex !important;
            flex-direction: column !important;
            flex-wrap: wrap !important;
            justify-content: space-between !important;
            margin: 0px !important;

        }

        .filtros2 {
            width: inherit !important;
            margin: 0px;
        }

        .filtros div,
        .filtros select {
            /* width: fit-content; */
            width: 300px;
            margin-bottom: 10px;
        }

        /* Checkbox oculto */
        .filtros-toggle {
            display: none;
        }

        /* Desktop: los filtros se muestran normalmente */
        .filtros-boton {
            display: none;
            /* en PC no mostramos el botón */
        }

        .filtros-contenido {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            flex-direction: row;
            width: 100% !important;
        }

        .filtros-contenido select,
        #aromasDropdown {
            margin: 5px !important;
            height: fit-content !important;
            width: fit-content !important;
        }

        .putosAromasDELosCOJONES {
            width: fit-content !important;
        }

        .putosAromasDELosCOJONES .dropdown-menu {
            width: inherit;
            left: unset !important;
            top: unset !important;
        }

        /* RESPONSIVE — Menos de 800px */
        @media (max-width: 800px) {
            .filtros {
                width: 100%;
            }
            .aromas {
                top: 0px !important;
                left: 0px !important;
                width: 80% !important;
            }

            .area-login {
                flex-direction: column;
            }

            .area-login .rounded-1 {
                margin: 0px !important;
            }

            .contenedor-login .form-login {
                width: 100% !important;
            }

            .form-keep-logged {
                display: flex;
                justify-content: left;
            }

            .form-keep-logged * {
                width: fit-content !important;
            }

            tr {
                display: flex;
            }

            tr td:last-of-type {
                width: 40px !important;
            }

            .productos-wrapper {
                height: 62dvh;
                margin-top: -4%;
            }

            .cantidad-control {
                display: flex;
                text-align: center;
            }

            .area-login .dropdown {
                width: 100% !important;
                margin-left: 0px !important;
                margin-right: 0px !important;
                margin-top: 5px;
                margin-bottom: 5px;
                background: rgba(255, 255, 255, 1);
                background-clip: text;
            }

            .area-login .dropdown * {
                width: inherit;
            }

            /* El botón aparece */
            .filtros-boton {
                display: inline-block;
                background: #f5f5f5;
                color: #2c2c2c;
                width: 100%;
                padding: 10px 14px;
                border-radius: 8px;
                cursor: pointer;
                font-weight: 600;
            }

            /* Contenido oculto por defecto */
            .filtros-contenido {
                max-height: 0;
                overflow: auto;
                padding: 0 12px;
                transition: max-height .3s ease, padding .3s ease;
                background: white;
                border-radius: 8px;
                box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
                margin-top: 8px;
            }

            /* Cuando el checkbox está activado → expandimos */
            .filtros-toggle:checked~.filtros-contenido {
                max-height: 500px;
                padding: 12px;
            }
        }