/*  CARRITO (PANEL) */
#contenedor_carrito {

    box-sizing:                 border-box;
    display:                    none;
    height:                     100%;
    position:                   fixed;
    right:                      0;
    top:                        0;
    width:                      300px;
    z-index:                    var( --nivel_modal );

}
#contenedor_carrito.activo {

    display:                    block;

}

/*  PANEL DERECHO */
#contenedor_carrito .carrito_panel {

    background:                 var( --color_blanco );
    box-shadow:                 -1px 1px 1px rgba( 0 , 0 , 0 , .5 );
    box-sizing:                 border-box;
    display:                    flex;
    flex-direction:             column;
    height:                     100%;
    overflow:                   hidden;
    position:                   relative;
    transform:                  translateX( 100% );
    transition:                 transform 250ms ease;
    width:                      100%;

}
#contenedor_carrito.activo .carrito_panel {

    transform:                  translateX( 0 );

}

/*  ENCABEZADO */
#contenedor_carrito .carrito_encabezado {

    align-items:                center;
    background:                 var( --color_principal_oscuro );
    box-sizing:                 border-box;
    color:                      var( --color_blanco );
    display:                    flex;
    font-family:                var( --fuente_principal );
    font-size:                  1em;
    font-weight:                var( --peso_seminegrita );
    height:                     60px;
    justify-content:            space-between;
    padding:                    0 1em;

}
#contenedor_carrito .carrito_titulo {

    font-size:                  1em;
    font-weight:                var( --peso_seminegrita );
    margin:                     0;
    padding:                    0;

}
#contenedor_carrito .carrito_btn_cerrar {

    background:                 transparent;
    border:                     none;
    color:                      var( --color_blanco );
    cursor:                     pointer;
    font-size:                  1.1em;
    outline:                    none;
    padding:                    .25em;

}
#contenedor_carrito .carrito_btn_vaciar {

    background:                 transparent;
    border:                     none;
    color:                      var( --color_blanco );
    cursor:                     pointer;
    font-size:                  .85em;
    outline:                    none;
    padding:                    .25em;
    text-decoration:            underline;

}

/*  LISTA PRODUCTOS */
#contenedor_carrito .carrito_lista_productos {

    box-sizing:                 border-box;
    flex:                       1 1 auto;
    overflow-y:                 auto;
    padding:                    0 1em;

}

/*  FOOTER */
#contenedor_carrito .carrito_footer {

    border-top:                 1px solid var( --color_borde );
    box-sizing:                 border-box;
    padding:                    1em;

}
#contenedor_carrito .carrito_total_linea {

    align-items:                center;
    display:                    flex;
    font-family:                var( --fuente_secundaria );
    justify-content:            space-between;
    margin-bottom:              .75em;

}
#contenedor_carrito .carrito_btn_pagar {

    background:                 var( --color_principal_oscuro );
    border:                     none;
    color:                      var( --color_blanco );
    cursor:                     pointer;
    display:                    block;
    font-size:                  1em;
    padding:                    .7em 0;
    width:                      100%;

}

/*  LISTA */
.carrito_vacio {

    box-sizing:                 border-box;
    color:                      var( --color_texto_secundario );
    font-family:                var( --fuente_secundaria );
    font-size:                  .95em;
    padding:                    1em;
    text-align:                 center;

}
.carrito_item {

    align-items:                flex-start;
    border-bottom:              1px solid var( --color_borde );
    box-sizing:                 border-box;
    display:                    flex;
    gap:                        .65em;
    padding:                    1.5em 0;
    position:                   relative;
    width:                      100%;

}
.carrito_item:first-child {

    margin-top:                 .25em;

}
.carrito_item:last-child {

    border-bottom:              0;

}

/*  FOTO */
.carrito_item_foto {

    box-sizing:                 border-box;
    flex:                       0 0 54px;
    width:                      54px;

}
.carrito_item_foto img {

    border-radius:              8px;
    display:                    block;
    height:                     54px;
    object-fit:                 cover;
    width:                      54px;

}

/*  INFORMACIÓN */
.carrito_item_info {

    box-sizing:                 border-box;
    flex:                       1 1 auto;
    min-width:                  0;

}
.carrito_item_titulo {

    font-family:                var( --fuente_principal );
    font-size:                  .92em;
    font-weight:                var( --peso_seminegrita );
    line-height:                1.2em;
    margin-bottom:              .25em;
    overflow:                   hidden;
    text-overflow:              ellipsis;
    white-space:                nowrap;

}
.carrito_item_variantes {

    align-items:                center;
    color:                      var( --color_texto_secundario );
    display:                    flex;
    font-family:                var( --fuente_secundaria );
    font-size:                  10px;
    gap:                        4px;
    line-height:                1.2em;

}
.carrito_sep {

    opacity:                    .6;

}
.carrito_bolita_color {

    border:                     1px solid rgba( 0 , 0 , 0 , .18 );
    border-radius:              50%;
    display:                    inline-block;
    flex-shrink:                0;
    height:                     10px;
    vertical-align:             middle;
    width:                      10px;

}

/*  CONTROLES */
.carrito_item_controles {

    align-items:                flex-end;
    box-sizing:                 border-box;
    display:                    flex;
    flex:                       0 0 auto;
    flex-direction:             column;
    gap:                        .45em;
    min-width:                  120px;

}
.carrito_cantidad {

    align-items:                center;
    display:                    flex;
    gap:                        .35em;

}
.carrito_btn_menos,
.carrito_btn_mas {

    align-items:                center;
    background:                 var( --color_fondo_suave );
    border:                     0;
    border-radius:              8px;
    cursor:                     pointer;
    display:                    inline-flex;
    font-size:                  .95em;
    height:                     30px;
    justify-content:            center;
    line-height:                1em;
    padding:                    0;
    width:                      30px;

}
.carrito_btn_menos:hover,
.carrito_btn_mas:hover {

    filter:                     brightness( .95 );

}
.carrito_btn_menos svg {

    font-size:                  .7em;
    opacity:                    .85;
    pointer-events:             none;

}
.carrito_input_cantidad {

    border:                     1px solid var( --color_borde );
    border-radius:              8px;
    box-sizing:                 border-box;
    font-family:                var( --fuente_secundaria );
    font-size:                  .9em;
    height:                     30px;
    outline:                    none;
    padding:                    0 .4em;
    text-align:                 center;
    width:                      54px;

}
.carrito_input_cantidad::-webkit-outer-spin-button,
.carrito_input_cantidad::-webkit-inner-spin-button {

    -webkit-appearance:         none;
    margin:                     0;

}
.carrito_input_cantidad[type=number] {

    -moz-appearance:            textfield;

}

/*  PRECIOS */
.carrito_precios {

    text-align:                 right;

}
.carrito_precio_unitario {

    align-items:                baseline;
    color:                      var( --color_texto_secundario );
    display:                    flex;
    font-family:                var( --fuente_secundaria );
    font-size:                  .82em;
    gap:                        8px;
    line-height:                1.1em;

}
.carrito_precio_total {

    color:                      var( --color_texto );
    font-family:                var( --fuente_principal );
    font-size:                  .95em;
    font-weight:                var( --peso_seminegrita );
    line-height:                1.2em;
    margin-top:                 .15em;

}
.carrito_precio_base {

    opacity:                    .65;
    text-decoration:            line-through;

}
.carrito_precio_final {

    font-weight:                var( --peso_negrita );

}
.carrito_precio_unidad {

    opacity:                    .85;

}
.carrito_item_promos {

    color:                      var( --color_exito );
    font-size:                  12px;
    margin-top:                 4px;

}

/*  BOTÓN BORRAR */
.carrito_item_borrar {

    background:                 transparent;
    border:                     0;
    color:                      var( --color_texto_secundario );
    cursor:                     pointer;
    font-size:                  .9em;
    line-height:                1em;
    padding:                    .25em;
    position:                   absolute;
    right:                      .25em;
    top:                        0;

}
.carrito_item_borrar:hover {

    color:                      var( --color_texto );

}

/*  BOTÓN FINALIZAR COMPRA */
#btn_ir_pagar {

    background:                 var( --color_principal_oscuro );
    border:                     0;
    color:                      var( --color_blanco );
    cursor:                     pointer;
    display:                    block;
    font-size:                  1em;
    margin:                     auto;
    padding:                    .65em 0;
    width:                      80%;

}
#btn_ir_pagar:hover {

    filter:                     brightness( .95 );

}