// Ls cabeceras de los listados de items
.tablapreitemscabecera {
   margin: 0;
   width: 100%;
   color: @color-main;

   tr {
      background-color: @color-item-list-top-bg;

      td {
         vertical-align: baseline !important;
         font-size: 0.8rem;
         padding: 0.5em 0 0.5em 0;

         &.tdcabeceranumitems {
            font-weight: bold;
            text-align: center;
            cursor: default;
         }

         &.tdcabecerafamilias {
            font-weight: bold;
            color: @color-item-list-top-familia;
         }

         &.tdcabecerahojas {
            text-align: right;
            cursor: default;
         }

         &.tdcabeceramostrando {
            text-align: center;
            cursor: default;
         }
      }
   }
}

// Botón OCULTAR/MOSTRAR
.tpic-a {
   td.showhide {
      width: 100px;
      color: @color-nav;
      text-align: center;
      text-transform: uppercase;

      &:hover {
         color: @color-main;
      }
   }
}













@itemicon-image-width: 40px;
@itemicon-image-height: 40px;

.tablaitems {
   margin: 0 1px;
   padding: 2px;
   width: calc(100% - ( (2px * 2) + (1px * 2) ));

   tbody {
      tr {
         &:nth-child(even) {
            background-color: @color-item-list-bg-even;
         }

         &:nth-child(odd) {
            background-color: @color-item-list-bg-odd;
         }

         &:hover {
            background-color: @color-item-list-bg-hover;
         }

         td {
            position: relative;
            user-select: none;
            outline: 0;
            color: @color-main;



            &.tdItemIcon {
               padding: 1px 0 1px 0;
               width: @itemicon-image-width;

               img {
                  border-radius: 3px;
               }
               div.imgitemicon {
                  border-radius: 3px;
                  width: @itemicon-image-width;
                  height: @itemicon-image-height;
               }
            }

            &.tdItemName {
               width: calc((100% - 12px) - (@itemicon-image-width + (70px + 12px) + 64px ));
            }

            &.tdItemPrice {
               width: 70px;
               text-align: right;
               background-color: rgba(255, 255, 255, 0.2);
            }

            &.tdItemCart {
               width: 64px;
               padding: 0;
               text-align: center;
            }

            &.tditemDimmed {
               opacity: 0.4;

               div.precioshow {
                  display: none;
               }
            }

            &.softcarrito {
               display: none;
               width: 40px;
               height: 40px;
               padding: 0;
               cursor: pointer;
               background-color: rgba(0, 0, 0, 0.0);
               background-image: url("../res/v2/icons/cesta-de-la-compra_soft_carrito.png");
               background-repeat: no-repeat;
               background-position: 0 0;

               &:hover {
                  background-color: rgba(0, 255, 0, 0.2);
               }
            }

            &.softcarritoSelected {
               background-position: 0 -40px;
            }

            > a {
               display: block;
            }
         }
      }
   }


   &.tablaitemsSoftCarrito {
      tbody {
         tr {
            td {
               &.tdItemName {
                  width: calc((100% - 12px) - (@itemicon-image-width + (140px + 12px) + 40px) );
               }

               &.tdItemPrice {
                  width: 140px;
                  text-align: left;
               }

               &.tdItemCart {
                  display: none;
               }

               &.softcarrito {
                  display: table-cell;
               }
            }

            div.precioshow {
               display: flex;
            }
         }
      }
   }



   div.precioshow {
      display: none;
      align-items: center;
      position: absolute;
      right: 0;
      top: 4px;
      height: 32px;
      color: @color-main;
      font-family: @font-price;
      text-align: left;
      vertical-align: bottom;

      h1, h2, h3, h4 {
         display: block;
         text-align: left;
         font-weight: normal;
         color: @color-main;
         padding: 0;
         margin: 0;
      }

      h1, h3 { // Signo x y cantidad
         font-size: 1.5em;
      }

      h2 { // El precio total
         font-size: 1em;
         letter-spacing: -1px;
         font-weight: normal;
         color: @color-main-55;
         opacity: 1;
         border-radius: 2px;
         margin: 0 3px 0 3px;
         padding: 1px 3px 1px 3px;
         min-width: 3em;

         span {
            font-weight: normal;
         }
      }


      h4 { // El signo -
         position: absolute;
         right: 6px;
         top: -3px;
         height: 13px;
         font-size: 0.7em;
         font-weight: normal;
         color: @color-main-100;
         background-color: @color-main;
         text-align: center;
         border-radius: 2px;
         margin: 0 0 0 0;
         padding: 0 3px 0 3px;
         cursor: pointer;

         &:hover {
            background-color: @color-main-60;
         }
      }
   }


}





.tditemscabecera {
   a {
      display: block;
      font-weight: bold;
      text-align: center;
      font-size: 14px;
      color: #6a371f;
      background-color: #4C2816;
      margin: 0 1px 0 0;

      &:hover {
         background-color: #542c18;
      }
   }
}


.tritems3 {
   background-color: #494723;
   margin: 1px;
   padding: 1px;
}

.tritemssel {
   background-color: #494723;
   padding: 1px;
}

.tditem {
   font-size: 1.3em;
   padding: 0 4px 0 8px;
   vertical-align: middle !important;

   a {
      img:hover {
         opacity: 0.6;
      }
   }
}










.tablaprecarrito {
   background-color: #D7A2A2;
   margin: 1px;
   padding: 1px;
   width: 100%;
}

.tdprecarrito {
   margin: 1px;
   font-size: 9px;
   color: #000000;
   text-align: left;
}

.tablacarrito {
   background-color: #FFCCFF;
   margin: 0 1px;
   padding: 2px;
   width: 100%;
}










.tablacarritoresumen {
   background-color: #D7A2A2;
   margin: 1px;
   padding: 1px;
   border: 1px solid #000000;
}

.tdcarritoresumen {
   margin: 1px;
   font-size: 12px;
   color: #000000;
   background-color: #222C21;
   padding: 1px;
   text-align: right;
}












@item-image-width: 400px;
@item-image-height: 400px;

@item-image-icon-width: 70px;
@item-image-icon-height: 70px;

div.itemDetail {

   > blockquote {
      background-color: @color-item-list-top-bg;
      color: @color-item-list-top-familia;
      font-size: 1rem;
      padding: 0.8em;
   }

   div.itemDetailContents {
      position: relative;
      padding: 1em;
      margin: 0 0 4em 0;
      color: @color-main;

      > h1 {
         font-size: 1.8rem;
         margin: 0 0 0.3em 0;
      }

      > nav {
         font-size: 0.9rem;
         vertical-align: baseline;
         margin-bottom: 1em;
      }

      > section {
         &.primary {
            display: flex;

            > div {
               &.itemImage {
                  img {
                     border-radius: 4px;
                  }
                  > div.imgitem {
                     width: @item-image-width;
                     height: @item-image-height;
                     border-radius: 4px;
                     cursor: zoom-in;
                  }
                  > div.imgitemicon {
                     width: @item-image-icon-width;
                     height: @item-image-icon-height;
                     border-radius: 3px;
                  }
               }

               &.info {
                  font-family: @font-item;

                  > div {
                     font-size: 0.9rem;
                     margin: 0 0 2em 0.8em;

                     &.itemDescription {
                        iframe {
                           width: 100%;
                        }
                     }

                     &.itemInfoNutricional {

                     }
                  }
               }

               &.purchase {
                  font-size: 1rem;
                  width: 180px;
                  height: fit-content;
                  margin: 0 0 0 0.6rem;
                  padding: 0 0.6rem 0 0.6rem;
                  border: 1px solid @color-borders;
                  background-color: @color-purchase-bg;
                  border-radius: 3px;

                  > div {
                     > div {
                        margin: 0 0 1rem 0;
                     }
                  }

                  > div.itemPrecios {
                     div.panelItemPrecios {
                        div.displayPrecio {
                           font-size: 2rem;
                        }
                     }
                  }

                  > div.itemCarrito {
                     form.formItemAnadir {
                        border-top: 1px solid @color-borders;
                        padding: 0.6em 0 0 0;

                        div.addToCarritoButton {
                           display: block;
                        }
                     }

                     h5 {
                        margin: 0 0 1em 0;
                     }
                  }

                  > div.itemPortes {
                     font-family: @font-item;

                     div.panelItemPortes {
                        border-top: 1px solid @color-precio-tachado;
                        padding: 0.6em 0 0 0;

                        span {
                           display: block;

                           &.pesoDesc {
                              font-size: 0.8em;
                              margin: 0 0 0.6em 0;
                           }

                           &.peso {
                              text-align: right;
                              color: @color-precio;

                              em {
                                 color: @color-precio-tachado;
                              }
                           }

                           &.envioGratuito {
                              text-align: right;
                              font-size: 0.9em;
                              color: @color-precio-dto;
                           }

                           &.necesitaFrio {
                              margin-top: 1em;
                              text-align: left;
                              font-size: 0.8em;
                              color: #07c1df;
                              text-shadow: rgba(255,255,255,1) 0 0 2px;
                              cursor: default;
                              &:hover {
                                 color: #067686;
                                 text-shadow: rgba(0,255,255,1.0) 0 0 10px;
                              }
                           }
                        }
                     }
                  }
               }
            }
         }


      }

      .iditem {
         display: none;
         font-size: 0.7rem;
         color: @color-nav;
         background-color: @color-nav-bg;
         padding: 2px 4px;
         border-radius: 2px;
      }
   }
}





form.formItemAnadir {
   font-size: 1.2rem;

   div.inputPlusMinusWrapper {
      width: 78px;
      height: 32px;

      input.sleCarritoCantidad {
         width: 28px;
         height: 18px;
         text-align: left;
         border: 1px solid @color-precio-tachado;
         padding: 1px 4px 1px 4px;
         color: @color-precio;
      }
   }
}