/* =========================================================
   CARRITO (PANEL)
   - SIN overlay propio (usa .fondo global)
   - #contenedor_carrito solo controla visibilidad
   - .carrito_panel es el panel lateral
========================================================= */
#contenedor_carrito{

    box-sizing:                 border-box;
    display:                    none;

    position:                   fixed;
    top:                        0;
    right:                      0;

    width:                      300px;
    height:                     100%;

    z-index:                    var( --nivel_modal );

}

#contenedor_carrito.activo{

    display:                    block;

}

/* =========================================================
   PANEL DERECHO
========================================================= */
#contenedor_carrito .carrito_panel{

    background:                 var( --fondo_claro );
    box-shadow:                 -1px 1px 1px rgba( 0 , 0 , 0 , 0.5 );

    box-sizing:                 border-box;
    height:                     100%;
    overflow:                   hidden;

    position:                   relative;
    width:                      100%;

    transform:                  translateX( 100% );
    transition:                 transform 250ms ease;

    display:                    flex;
    flex-direction:             column;

}
#contenedor_carrito.activo .carrito_panel{

    transform:                  translateX( 0 );

}

/* =========================================================
   ENCABEZADO (DEJAMOS LO DE ARRIBA PORQUE ES ÚNICO)
========================================================= */
#contenedor_carrito .carrito_encabezado{

    align-items:                center;
    background:                 var( --fondo_primera_linea );
    box-sizing:                 border-box;
    color:                      white;

    display:                    flex;
    justify-content:            space-between;

    font-family:                var( --fuente_titulos ) , sans-serif;
    font-weight:                var( --peso_negrita );
    font-size:                  1em;

    height:                     60px;
    padding:                    0 1em;

}
#contenedor_carrito .carrito_titulo{

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

}
#contenedor_carrito .carrito_btn_cerrar{

    background:                 transparent;
    border:                     none;
    color:                      white;
    cursor:                     pointer;
    font-size:                  1.1em;
    outline:                    none;
    padding:                    .25em;

}
#contenedor_carrito .carrito_btn_vaciar{

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

}

/* =========================================================
   LISTA PRODUCTOS (DEJAMOS LO MÍNIMO, SIN DUPLICAR ABAJO)
========================================================= */
#contenedor_carrito .carrito_lista_productos{

    box-sizing:                 border-box;
    flex:                       1 1 auto;
    overflow-y:                 auto;
    padding:                    0 1em; /* le da aire al render nuevo */

}

/* =========================================================
   FOOTER (DEJAMOS EL BLOQUE DE ARRIBA, PORQUE ABAJO SOLO TOCA #btn_ir_pagar)
========================================================= */
#contenedor_carrito .carrito_footer{

    box-sizing:                 border-box;
    border-top:                 1px solid #EDEDEE;
    padding:                    1em;

}
#contenedor_carrito .carrito_total_linea{

    display:                    flex;
    justify-content:            space-between;
    align-items:                center;
    margin-bottom:              .75em;

    font-family:                var( --fuente_textos ) , sans-serif;

}
#contenedor_carrito .carrito_btn_pagar{

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

}

/* =========================================================
   LISTA
========================================================= */
.carrito_vacio {

    box-sizing:                 border-box;
    color:                      var( --texto_secundario );
    font-family:                var( --fuente_textos ) , sans-serif;
    font-size:                  .95em;
    padding:                    1em;
    text-align:                 center;

}
.carrito_item {

    align-items:                flex-start;
    border-bottom:              1px solid #EDEDEE;
    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;

}

/* =========================================================
   INFO (TITULO + VARIANTES)
========================================================= */
.carrito_item_info {

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

}
.carrito_item_titulo {

    font-family:                var( --fuente_titulos ) , sans-serif;
    font-size:                  .92em;
    font-weight:                var( --peso_negrita );
    line-height:                1.2em;
    margin-bottom:              .25em;
    overflow:                   hidden;
    text-overflow:              ellipsis;
    white-space:                nowrap;

}
.carrito_item_variantes {

    display:                    flex;
    align-items:                center;
    gap:                        4px;
    font-family:                var( --fuente_textos ), sans-serif;
    font-size:                  10px;
    line-height:                1.2em;
    color:                      var( --texto_secundario );

}
.carrito_sep {

    opacity:                    .6;

}
.carrito_bolita_color {

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

}

/* =========================================================
   CONTROLES (CANTIDAD + PRECIOS)
========================================================= */
.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:                 #F2F2F2;
    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 #EDEDEE;
    border-radius:              8px;
    box-sizing:                 border-box;
    font-family:                var( --fuente_textos ) , sans-serif;
    font-size:                  .9em;
    height:                     30px;
    outline:                    none;
    padding:                    0 .4em;
    text-align:                 center;
    width:                      54px;

}
/* QUITAR SPINNERS DEL INPUT NUMBER (OPCIONAL, SE VE MÁS LIMPIO) */
.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 {

    color:                      #515151;
    font-family:                var( --fuente_textos ) , sans-serif;
    font-size:                  .82em;
    line-height:                1.1em;

}
.carrito_precio_total {

    color:                      #000;
    font-family:                var( --fuente_etiquetas ) , sans-serif;
    font-size:                  .95em;
    font-weight:                var( --peso_negrita );
    line-height:                1.2em;
    margin-top:                 .15em;

}

/* =========================================================
   BOTON BORRAR (X)
========================================================= */
.carrito_item_borrar {

    background:                 transparent;
    border:                     0;
    color:                      #515151;
    cursor:                     pointer;
    font-size:                  .9em;
    line-height:                1em;
    padding:                    .25em;

    position:                   absolute;
    right:                      .25em;
    top:                        0;

}
.carrito_item_borrar:hover{

    color:                      #000;

}

/* =========================================================
   BOTON FINALIZAR COMPRA
========================================================= */
#btn_ir_pagar {

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

}
#btn_ir_pagar:hover {

    filter:                     brightness( .95 );

}
.carrito_item_promos {
    
    color:                      #2e7d32;
    font-size:                  12px;
    margin-top:                 4px;
    
}
.carrito_precio_unitario {
    
    align-items:                baseline;
    display:                    flex;
    gap:                        8px;
    
}
.carrito_precio_base {
    
    opacity:                    .65;
    text-decoration:            line-through;
    
}
.carrito_precio_final {
    
    font-weight:                700;
    
}
.carrito_precio_unidad {
    
    opacity:                    .85;
    
}