/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.

    Created on : 12-may-2017, 8:42:40
    Author     : Tatiana
        Restaurar copia a mano:15-05-17
*/
@import 'colores';
@import 'funciones';
@import 'configuracion';
@import 'ficha_conf';


// Carrito Ampliado - Marina (03/04/2019)
.contenedor_comprar{
    margin-top: 20px;
    .texto_cabecera{
        font-size:23px;
        text-align: center;
        margin-bottom: 20px;
    }
    .titulo_opcion{
        text-align: center;
        margin-bottom: 20px;
        letter-spacing: 1px;
        text-transform: uppercase;
        font-size: 20px;
    }
    .cesta_vacia{
        border: $borde_contenedor;
        margin-bottom: 70px;
        padding:20px 0px;
        .no_articulos{
            text-align: center;
            img{
                max-width: 18%;
            }
        }
        .texto_cesta_vacia{
            padding: 3% 0%;
            font-size:16px;
            text-align: center;
        }
        .cart_voucher{
            text-align: center;
            .cart_navigation{
                height: 40px;
                .boton{
                    width: 200px;
                    padding:8px;
                }
            }
        }
    }
    .trozo_cesta_usuario{
        margin-top:30px;
        .texto_cabecera{
            text-align: left;
            font-size: 24px;
            padding-left: 14px;
        }
        .trozos_cesta_completa_acceso{
           .titulo_contenedor{
                text-align: center;
                width: 100%;
                .paso1_cesta{
                    position:relative;
                    top:-21px;
                    margin-top: 0px;
                    background:$cesta_numeros_pasos_fondo;
                    width: 175px;
                    text-align: center;
                    display:inline-block;
                    .paso_1{
                        strong{
                            padding:0px 11px;
                            color:$cesta_numeros_pasos_fuente;
                            font-size: 30px;
                        }
                    }
                }
            }
            .cuenta_si{
                h3{
                    font-size: 20px;
                    margin-bottom: 0px;
                }
                .acceso_cesta_redes_sociales{
                    width: 50%;
                    display: inline-block;
                    @media(min-width: 992px) and (max-width: 1199px){
                        width: 100%;
                    }
                    @media(max-width: 600px){
                        width: 100%;
                    }
                    .titular{
                        display: inline-block;
                    }
                    .titulo_accede{
                        text-align: center;
                        .subtitulo{
                            display:block;
                        }
                        @media (max-width: 479px){
                            padding-left: 5%;
                        }
                        @media (max-width: 394px){
                            padding-left:0px;
                            text-align: center;
                            width:100%;
                        }
                    }
                    .iconos_redes{
                        text-align: center;
                        padding-top: 10px;
                        .google, .facebook{
                            display: inline-block;
                            .icono_red{
                                height: auto;
                                width: 50px;
                            }
                        }
                        .google{
                            text-align: right;
                        }
                        .facebook{
                            text-align: left;
                        }
                        @media (max-width: 394px){
                            width:100%;
                        }
                    }  
                }
                @media (max-width: 600px){
                    margin-left: 0px;
                    margin-right: 0px;
                }
            }
            @media (max-width: 300px){
                padding: 0px;
            }
        }
        .acceso_cesta_login{
            font-size: 16px;
            text-align: center;
            margin: auto;
            width:50%;
            display: inline-block;
            float:left;
            @media(min-width: 992px) and (max-width: 1199px){
                width: 100%;
            }
            @media(max-width: 600px){
                width: 100%;
           }
            .form-group {
                margin: 0 0 10px 0;
                position:relative;
                &.email{
                    width: 91%;
                    text-align: left;
                    margin-left: 20px;
                    input#email{
                        display: inline;
                        background:none;
                        font-size: 15px;
                        max-width: 100%;
                    }       
                    .mdi-email-outline{
                        font-size: 26px;
                        position: absolute;
                        right: 3px;
                        top: 1px;
                        color:$gris_oscuro;
                    }
                }
                &.passwd{
                    width: 91%;
                    text-align: left;
                    margin-left: 20px;
                    input#passwd{
                        display: inline;
                        background:none;
                        font-size: 15px;
                        max-width: 100%;
                    }
                    .mdi-lock-outline{
                        font-size: 26px;
                        position: absolute;
                        right: 3px;
                        top: 1px;
                        color:$gris_oscuro;
                    }
                }
                &.lost_password {
                    display: inline-block;
                    margin: 14px 11px 15px 0;
                    a {
                        text-decoration: underline;
                        &:hover {
                            text-decoration: none;
                        }   
                    }
                }
            }
            .submit{
                width:auto;
                display:inline-block;
                .boton{
                    width: 100%;
                    height: 35px;
                }
            }
        }
        .acceso_cesta_registro{
            margin-top: 25px;
            .texto_registro{
                text-align: center;
                .titulo_opcion{
                    border-top: 1px solid;
                    padding-top:20px;
                    margin-top: 20px;
                }
            }
            .formulario_registro{
                padding: 0px;
                .registro_simple{
                    .check{
                        height: auto;
                        margin: 0px;
                        vertical-align: middle;
                    }
                    .texto_check{
                        font-weight: 700;
                        vertical-align: middle;
                    }
                    .autorizacion{
                        text-align: center;
                        .si, .no{
                            height: auto;
                            margin: 0px;
                            vertical-align: middle;
                        }
                        .texto_si, .texto_no{
                            font-weight: 700;
                            display: inline;
                            padding-right: 30px;
                            padding-left: 7px;
                            vertical-align: middle;
                        }
                    }
                    .guardar_datos{
                        border: $borde_contenedor;
                        text-align: center;
                        padding: 6px 0px;
                        input{
                            display:inline-block;
                        }
                        .texto_guardar{
                            font-weight: 400;
                            cursor:pointer;
                            width: 100%;
                        }
                    }
                    .submit{
                        text-align: center;
                        .boton{
                            width: 140px; 
                        }
                    }
                    a.boton{
                        text-align: center;
                        display:block;
                        &.collapse{
                            display:none;
                            &.in{
                                display:block;
                            }
                        }
                    }
                    .apartado_password{
                        .boton{
                            text-align: center; 
                        }
                    }
                }
            }
            @media (max-width: 600px){
                margin-left: 0px;
                margin-right: 0px;
            }
        }
        .trozos_cesta_completa_direcciones{
            margin-bottom: 20px;
            .titular{
                font-size: 21px;
                margin: 10px 0px 15px 0px;
            }
            .titulo_contenedor{
                text-align: center;
                width: 100%;
                .paso1_cesta_logueado, .paso2_cesta{
                    position:relative;
                    top:-22px;
                    margin-top: 0px;
                    background:$cesta_numeros_pasos_fondo;
                    width: 240px;
                    text-align: center;
                    display:inline-block;
                    margin-bottom: 0px;
                    .paso_1, .paso_2{
                        strong{
                            padding:0px 11px;
                            color:$cesta_numeros_pasos_fuente;
                            font-size: 30px;
                        }
                    }
                }
            }
            .apartado_usuario{
                margin:0px 0px 30px;
                h3{
                    margin-top: 0px;
                    font-size: 22px;
                }
                .datos_usu{
                    text-align: left;
                    margin-top: -15px;
                    @media(max-width: 425px){
                        width: 100%;
                    }
                    .titular{
                        font-size: 16px;
                        display:flex;
                        margin:0px 0px 15px 0px;
                        .mdi{
                            color:$primario;
                            font-size: 20px;
                            padding-right: 3px;
                        }
                        span{
                            padding-top: 2px;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            overflow: hidden;
                        }
                    }
                }
                .boton_nosoy{
                    text-align: center;
                    margin-top: -20px;
                    @media(max-width: 425px){
                        width: 100%;
                        display: flex;
                        justify-content: space-evenly;
                        vertical-align: middle;
                        padding-top: 12px;
                        align-items: center;
                    }
                    .subtitulo{
                        font-size: 16px;
                        margin-bottom: 5px;
                        font-weight: 500;
                    }
                    form{
                        padding-bottom: 10px;
                    }
                    .boton{
                        white-space: normal;
                        height: auto;
                        padding: 6px 4px;
                        @media(max-width: 1599px){
                            width: 100%;
                        }
                    }
                }
            }
            .seccion_direcciones{
                float:left;
                padding:0px 15px 15px;
                .recoger_en_tienda{
                    text-align: center;
                    .ok_recoger{
                        font-weight: 600;
                        padding: 20px;
                        color: $primario;
                        font-size: 23px;
                    }
                    .texto_recoger{
                        width: 80%;
                        display: inline-block;
                        margin-bottom: 30px;
                        border: $borde_contenedor;
                        .titular{
                            padding: 20px;
                            font-weight: 400;
                            margin-bottom: 10px;
                        }
                        .titular_direccion{
                            font-size: 23px;
                            text-align: center;
                            margin: 15px;
                            p{
                                font-weight: 600;
                            }
                            .postal_recogida, .localidad_recogida, .provincia_recogida{
                                display: inline-block;
                            }
                            a{
                                font-size: 18px;
                                display: block;
                                color: $primario;
                                &:hover{
                                    font-weight: 500;
                                }
                            }
                        }
                    }
                }
                .nav-tabs{
                    float:left;
                }
                .nav-tabs>li.active>a{
                    color:$primario;
                    font-weight: 600;
                }
                .box{
                    padding-left: 4px;
                    h4{
                        font-size: 21px;
                        margin-bottom: 15px;
                    }
                    .form-control{
                        border-radius: 7px;
                        border: 2px solid $gris;
                        margin-bottom: 10px;
                    }
                    .no_relleno{
                        border: 2px solid $primario;
                    }
                    .modificarDireccion {
                        text-align: center;
                        .boton{
                            width: 200px;
                            height: 39px;
                        }
                    }
                }
                .seleccion_tipo_envio{
                    .titular{
                        text-align: center;
                        strong{
                            color:$cesta_numeros_pasos_fuente;
                        }
                    }
                    .btn-group {
                        width: 100%;
                        .boton_envio{
                            text-align: left;
                            background-color: $blanco;
                            border:2px solid $gris;
                            display: flex;
                            margin: 5px 0px;
                            align-items: center;
                            width: 100%;
                            color:$primario;
                            white-space: normal;
                            height: auto;
                            &:hover{
                                color:$primario;
                                border:2px solid $primario;
                            }
                            strong{
                                white-space: normal;
                            }
                            .icono_envio{
                                flex: 1 1;
                                float: none;
                                width: auto;
                                img{
                                    height: auto;
                                    width: 50px;
                                }
                            }
                            .delivery_option_price{
                                font-weight: 700;
                            }
                            .nombre_envio{
                                strong{
                                    font-weight: 700;
                                }
                            }
                            .forma_envio{
                                strong{
                                    font-weight: 500;
                                }
                            }
                        }
                        .active{
                            color:$primario;
                            border:2px solid $primario;
                            background-color: $gris;
                        }
                        input{
                            position:inherit;
                        }
                    }
                }
            }
            .seleccion_forma_pago{
                float: left;
                width: 100%;
                margin-top: 30px;
                .contenedor_forma_pago{
                    padding: 0px 15px 15px;
                    .paso3_cesta{
                        position:relative;
                        top:-21px;
                        margin-top: 0px;
                        background:$cesta_numeros_pasos_fondo;
                        width: 233px;
                        text-align: center;
                        display:inline-block;
                        margin-bottom: 0px;
                        .paso_3{
                            strong{
                                padding:0px 11px;
                                color:$cesta_numeros_pasos_fuente;
                                font-size: 30px;
                            }
                        }
                    }
                    .btn-group{
                        width: 100%;
                    }
                    .boton_pago{
                        text-align: left;
                        background-color: $blanco;
                        border:2px solid $gris;
                        display: flex;
                        align-items: center;
                        width: 100%;
                        height: auto;
                        margin: 5px 0px;
                        &:hover{
                            color:$primario;
                            border-color:$primario;
                            .texto{
                                color:$primario;
                            }
                        }
                        input{
                            position:inherit;
                        }
                        strong{
                            white-space: normal;
                        }
                        .icono_pago{
                            float: none;
                            width: auto;
                            flex:1 1;
                            img{
                                height: auto;
                                width: 50px;
                            }
                        }
                        .texto{
                            color:$primario;
                            .forma_pago{
                                white-space: normal;
                                font-size: 14px;
                                strong{
                                    font-weight: 500;
                                }
                            } 
                        } 
                        &.active{
                            .texto{
                                color:$primario;
                            }
                            border-color:$primario;
                            background-color: $gris;
                        }
                    }
                }
            }
            .boton_finalizar{
                text-align: center;
                .boton{
                    width: 200px;
                    height: 39px;
                    &:hover, &:active, &:focus{
                        background:$secundario;
                        color:$terciario2;
                        border:1px solid $primario;
                    }
                }
            }
            .tab-content{
                float:left;
                width: 100%;
                .direccion_envio{
                    .box{
                        padding: 3px 0px 10px 2px;
                        font-size:16px;
                        .direccion_seleccionada{
                            height: 140px;
                            margin-top: 10px;
                            padding-top: 10px;
                            -webkit-box-shadow: 0px 0px 11px -1px rgba(0,0,0,0.32);
                            -moz-box-shadow: 0px 0px 11px -1px rgba(0,0,0,0.32);
                            box-shadow: 0px 0px 11px -1px rgba(0,0,0,0.32);
                            p{
                                animation-name: opacidad;
                                animation-duration: 1s;
                                opacity: 1;
                            }
                            @keyframes opacidad {
                                from {opacity: 0;}
                                to {opacity: 1;}
                            }
                        }
                        .botones_direccion{
                            padding-top: 12px;
                            padding-bottom: 16px;
                            padding-right: 0px;
                            text-align: center;
                            .boton{
                                width: 80%;
                                @media(min-width: 540px) and (max-width: 991px){
                                    width: 40%;
                                }
                            }
                        }
                        .datos_direccion{
                            padding-top: 10px;
                            i{
                                padding-right: 5px;
                            }
                        }
                        .otra_direccion{
                            text-align: center;
                            padding: 20px 0px;
                            .boton_seleccion_direccion{
                                width: 100%;
                                border: 2px solid $blanco;
                                padding:6px;
                                font-size: 18px;
                                background-color: $gris;
                                color:$primario;
                                &:hover{
                                    font-weight: 600;
                                    border-color: $primario;
                                }
                            }
                        }
                        .lista_direcciones{
                            text-align: center;
                            padding:0px;
                            .elegir_direccion{
                                background: none;
                                border:2px solid $gris;
                                text-align: left;
                                width: 80%;
                                padding: 10px;
                                margin: 10px auto;
                                vertical-align: middle;
                                -webkit-box-shadow: 0px 0px 11px -1px rgba(0,0,0,0.32);
                                -moz-box-shadow: 0px 0px 11px -1px rgba(0,0,0,0.32);
                                box-shadow: 0px 0px 11px -1px rgba(0,0,0,0.32);
                                &:hover{
                                    border-color: $primario;
                                    background-color: $gris;
                                }
                            }
                            .borrar_direccion{
                                background: $cesta_borrar_direccion_fondo;
                                color:$cesta_borrar_direccion_fuente;
                                border: none;
                                padding: 46px 0px;
                                margin: 10px auto 10px 10px;
                                font-size: 25px;
                                width: 35px;
                                vertical-align: middle;
                                &:hover{
                                    background: $cesta_borrar_direccion_fondo_hover;
                                    color:$cesta_borrar_direccion_fuente_hover;
                                }
                            }
                        }
                    }
                    .boton{
                        min-height: 50px;
                        margin:4px 0px;
                    }
                }
            }
            @media(max-width: 767px){
                padding:0px;
            }
        }
        @media (min-width: 992px){
            display: block !important;
            opacity: 1 !important;
        }
    }
    @media(max-width: 991px){
        .texto_cabecera, .cesta_vaciar{
            margin-top: 20px;
        }
    }
    .subtitulo{
        font-size: 12px;
        display:inline-block;
    }
    .trozo_cesta_fija{
        .texto_cabecera{
            font-size: 24px;
            text-align: left;
        }
        .linea_cesta{
            .linea_cesta_estilos{
                border-top: 2px solid $gris;
                overflow: hidden;
                margin: 10px 0px 0px 0px;
                padding: 10px 0px;
                display: flex;
                flex-wrap:wrap;
                &.linea_lote{
                    margin-top: 0;
                }
                .cabecera_producto{
                    display:block;
                    flex: 1 1 100%;
                    .product-name{
                        font-size: 20px;
                        display: inline-block;
                    }
                    .eliminar{
                        text-align: right;
                        padding-right: 0px;
                        position: absolute;
                        top: -18px;
                        right: -5px;
                        a{
                            font-size: 30px;
                        }
                    }
                    @media (max-width: 450px){
                        text-align: center;
                    }
                }
                .imagen_producto{
                    text-align: center;
                    a{
                        display: flex;
                        align-items: center;
                        height: 100%;
                        img{
                            height: auto;
                            width: 100%; 
                        }
                    }
                    @media (max-width: 450px){
                        width: 100%;
                        a{
                            display:inline-block;
                            img{
                                height: 100%;
                                width: auto;
                            }
                        }
                    }
                    @media (max-width: 600px){
                        padding:0px;
                    }
                }
                .info_producto{
                    .editorial{
                        height: 18px;
                        margin-bottom: 6px;
                        a{
                            font-size: 13px;

                        }
                    }
                    .cart_ref{
                        font-size: 13px;
                        display: inherit;
                    }
                    .cantidad{
                        padding:0px;
                        display: flex;
                        align-items: center;
                        .menos, .mas{
                            display: inline-block;
                            width:20px;
                            a{
                                padding:3px;
                                i{
                                    font-size: 11px;
                                }
                            }
                        }
                        .cantidad_articulos{
                            display:inline-block;
                            input{
                                width: 53px;
                                height: 26px;
                                text-align: center;
                            }
                        }
                    }
                    .semaforo {
                        flex: 1 1;
                        -webkit-flex: 1 1;
                        margin-left: 8px;
                        margin-bottom: 6px;
                        .red{
                            color:red;
                        }
                        .yellow{
                            color:orange;
                        }
                        .green{
                            color: green;
                        }
                    }
                    .cart_total{
                        text-align: right;
                        padding: 13px 0px 0px;
                        span{
                            font-size: 15px; 
                        }
                        .price{
                            font-weight: 500;
                            font-size: 17px;
                        }
                        .precio_anterior{
                            text-decoration: line-through;
                            color:$grisClaro;
                        }
                    }
                    @media (max-width: 450px){
                        width: 100%;
                    }
                }
            }    
        }
        .texto_cabecera {
            text-align: left;
            padding: 8px 8px;
            background: $cesta_fondo_cabecera;
            color:$cesta_fuente_cabecera;
            &.cabecera_lote{
                margin-bottom: 0;
            }
        }
        .cabecera_lote{
            border-top:2px solid $blanco;
            overflow: hidden;
            .palabra_lote{
                padding-left: 5px;
                @media(max-width: 500px){
                    font-size: 20px;
                }
            }
            .cantidad{
                display: flex;
                align-items: center;
                width: 80%;
                float:left;
                .menos, .cantidad_articulos, .mas{
                    display: inline-block;
                }
                .cantidad_articulos{
                    input{
                        height: 30px;
                    }
                }
            }
            .eliminar_lote{
                float:right;
                font-size: 24px;
                padding-right: 15px;
                color:$primario;
            }
        }
        .texto_cabecera.cabecera_lote p {
            color: $primario;
            padding: 0;
            margin: 0;
            display: inline-block;
            font-size:21px;
            @media(max-width: 500px){
                font-size: 20px;
            }
        }
        .texto_cabecera.cabecera_lote strong {
            float:right;
            font-size: 18px;
            margin-top: 7px;
        }
        .totales_lote{
            strong {
                float: right;
                margin-right: 2px;
                font-size: 0.8em;
            }
        }
        .texto_cabecera.cabecera_lote p {
            color: $primario;
            padding: 0;
            margin: 0;
        }
        .linea_lote {
            border-left: 15px solid $secundario;
            background: $grisCesta;
        } 
        .cesta_restaurar_estilo{
            background: $gris;
            width: 100%;
            border: 2px solid $primario;
            font-size: 18px;
            padding: 12px;
            p{
                font-size: 18px;
                display: inline-block;
                margin:0px;
            }
            .articulo{
                font-size: 18px;
                font-weight: 500;
                color: $primario;
                padding-left: 10px;
            }
            div{
                display: inline-block;
                font-size: 18px;
                padding-left: 10px;
                &:hover{
                    font-weight: 500; 
                    color: $primario;
                }
            }
        }
        .contenedor_totales_cesta{
            .cesta_vaciar{
                font-size: 20px;
                padding-left: 11px;
                position: absolute;
                top: 10px;
                right: 24px;
                a{
                    color:$cesta_vaciar;
                    &:hover{
                        color: $cesta_vaciar_hover;
                    }
                }
            }
            .total_cesta{
                padding-top: 20px;
                border-top:2px solid $gris;
                .cart_voucher{
                    float: left;
                    .cart_navigation{
                        margin-bottom: 0px;
                        .boton{
                            //width: 189px;
                            padding:8px;
                            white-space: nowrap;
                            display: inline-block;
                            text-align: center;
                        }
                    }
                }
                .precio_total_final{
                    float:right;
                    animation-name: opacidad;
                    animation-duration: 1s;
                    opacity: 1;
                    @keyframes opacidad {
                        from {opacity: 0;}
                        to {opacity: 1;}
                    }
                    .total_descuento{
                        font-size: 16px;
                    }
                }
                .precios{
                    padding: 11px;
                    font-size: 16px;
                    .cart_total_delivery, .cart_total_price{
                        text-align:right;
                        .price{
                            font-weight: 600;
                        }
                    }
                }
                .cart_total_voucher{
                    padding-right:0px;
                    .codigo_descuento{
                        text-align: right;
                        border: $borde_contenedor;
                        text-align: right;
                        padding:15px 10px;
                        .info_cod_descuento{
                            text-align: left;
                            font-size: 18px;
                            padding-top: 13px;
                        }
                        .tienes_codigo{
                            text-align: left;
                            font-size: 16px;
                            padding: 16px 0px;
                        }
                        .price{
                            padding: 11px 0px;
                            .form_cod_descuento{
                                display: flex;
                                align-items: center;
                                justify-content: flex-end;
                                input{
                                    height: 35px;
                                    margin-right: 10px;
                                    flex: 1 1;
                                    min-width: 50px;
                                }
                            }
                        }
                        .boton{
                            padding: 7px 10px;
                            white-space: nowrap;
                            text-align: center;
                            display: inline-block;
                            width: 135px;
                        }
                        .descartar_descuento{
                            padding: 0px;
                            .boton{
                                white-space: unset;
                                width: auto;
                            }
                        }
                        @media (max-width: 767px){
                            .info_cod_descuento,
                            .tienes_codigo,
                            .price,
                            .descartar_descuento{
                                text-align: center;
                            }
                        }
                        @media (max-width: 644px){
                            .tienes_codigo, .price{
                                width: 100%;
                            }
                            .price{
                                .form_cod_descuento{
                                    display:block;
                                    input{
                                        margin-right: 0px;
                                        margin-bottom: 10px;
                                    }
                                }
                            }
                        }
                    }
                    @media(max-width: 353px){
                        .tienes_codigo{
                            text-align: center;
                        }
                        .form_cod_descuento{
                            text-align: center;
                        }
                        .boton{
                            display: inline-block;
                            text-align: center;
                            width: 189px;
                        }
                    }
                }
                .total_cesta{
                    background-color: $blanco;
                    text-align: right;
                    font-weight: 700;
                    font-size: 20px;
                    padding: 15px;
                    margin: 15px 0px;
                    border: 1px solid $primario;
                    align-items: center;
                    .total_price_container, .price{
                        display:inline-block;
                        padding-top: 10px;
                    }
                }
            }
            @media(max-width: 383px){
                .precio_total_final, .cart_voucher{
                    width: 100%;
                    text-align: center;
                }
            }
            @media(max-width: 316px){
                .cesta_vaciar{
                    position:unset;
                }
            }
        }
        @media (min-width: 992px){
            float: right;
        }
        @media (min-width: 992px){
            display: block !important;
            opacity: 1 !important;
            margin-top: 28px;
        }
    }
    .finalizar_compra{
        #estado_cesta{
            display:none;
            font-size: 16px;
            text-align: center;
        }
        .boton_finalizar{
            text-align: center;
            margin: 20px;
            .boton{
                width: 250px;
                height: 50px;
                font-size: 21px;
            }
        }
    }
    // @media (max-width: 767px){
    //     margin-top: 136px;
    // }
}

.loading.clase_estado_cesta {
	text-align: center;
}

.modulo_finalizar_compra {
	text-align: center;
}
// Tatiana: Añado transiciones para los data-update 
/*
*[data-update]:before{
    content:"";
    position: absolute;
    background: red;
    display: flex;
    width: 10px;
    height: 10px;
    opacity:0;
   animation: carga_in_cesta 1s 1 ease-in-out;
}
@keyframes carga_in_cesta {
    from {opacity: 1;}
  to {opacity: 0;}
}*/