/*  https://codepen.io/Schepp/pen/WNbQByE */

.TArticleProfile .edp{
        padding: 2rem;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
        grid-column-gap: 4rem;
        grid-template-areas:
        'top-left top-right'
        'top-middle top-right'
        'middle-left middle-left'
        'middle-right middle-right'
        'bottom bottom';
    }

.TArticleProfile{    

}



.TArticleProfile .title-field{

    font: bold 13px Arial;
       white-space: nowrap;
       
}

.TArticleProfile #invoiceCart{

    width: 320px;  
    min-height: 100%;
    margin: 0px 0px 0px 20px;
    /* border: 1px #292929 solid; */
    background-color: #fff;
    border-radius: 5px;
    border: 1px solid #bbb;
    padding: 15px 15px 120px 15px;
    position:relative;

        position: sticky;
    top: 100px;
}

/* priceBlock */

.TArticleProfile .priceBlock .precioMain {
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    color: #ff6000;
    font-size: 42px;
    font-weight: 700;
    line-height: 20px;
    margin-top: 15px;
}
.TArticleProfile  .priceBlock .precio, .priceBlock .precioMain {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
    margin-right: 1.38462rem;
}
@media only screen and (min-width: 768px) and (max-width: 1201px)
.priceBlock .precioMain {
    padding-bottom: 1.15385rem;
}
/* -------------------------------------  */




.art_name{
    font-weight: 700;
    word-break: break-word;
    font-family: sans-serif;
   font-size: 18px;
   color: #000;
    line-height: 22px !important;
}

.priceBlock{
display: flex;
align-items: center;
flex-wrap: wrap;
place-items: flex-end;
}

.TArticleProfile  .main_container{
    display:flex; 
    min-height: 500px;
    align-items: flex-start;
    justify-content: space-between;

 
}

.TArticleProfile  .Tselect2.multi{
    
    min-height: 30px;
}


.priceBlock .precioMain
{
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
      

    color: #ff6000;
    font-size: 42px;
    font-weight: 700;
    line-height: 20px;
    margin-top: 15px;
}
.priceBlock span.baseprice {
    font-size: 44px;
    margin: 0;
        color: #ff6000;
    font-size: 30px;
    font-weight: 700;
    line-height: 20px;
}

.priceBlock span.cents {
    margin-left: 0;
    font-size: 20px;
      color: #ff6000;
      font-weight: 700;
}

.priceBlock .euro {
    font-size: 20px;
    margin-left: 6px;
     color: #ff6000;
}

.priceBlock .old_price{
    text-decoration:line-through;
            font-size: 15px;
    font-weight: 300;
    letter-spacing: 0;
    line-height: 20px;
    color: #bbb;
}

.priceBlock .discount{
      background-color: #bf0019;
    border-radius: 4px;
    color: #fff;
    font-size: .92308rem;
    line-height: 1.23077rem;
    font-weight: 700;
    padding: 3px;
    position: relative;
    align-items: center;
    margin-left: 10px;
}

.priceBlock .discount span
{
    color:#FFF;
    font: bold 15px Arial;
}

.btn-buy{
    padding: 20px;
    color: #fff;
    background-color: #ff6000;
    border-color: #ed6003;
    height: 50px;
    width: 100%;
}

.btn-buy{
    font: 800 16px Arial;
    font-weight: bold;
    padding: 15px;
        display: inline-block;

    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    color: #fff;
    background-color: #ff6000;
    border-color: #ed6003;
    user-select: none;
    border: 1px solid transparent;
    margin-top: 10px;
    line-height: 1.33333;
    border-radius: 6px;

}

 .btn-buy:hover{
    color: #fff;
    background-color: #cc4d00;
    border-color: #b14802;
}


 

 .suscripciones {
  margin-left: 10px;

}

 .suscripciones > div{
  display:inline-block;
}
 .suscripciones span{
     font: bold 12px Arial;
     user-select: none;
     
 }

.suscripciones label{
    position: relative;
    display: inline-block;
    cursor: pointer;
    padding: 5px;
    border: 1px solid #bbb;
    border-radius: 5px;
    margin: 4px 4px 0px 0px
}
 .suscripciones input{
   
 }


  .suscripciones > div {
  display: inline-block;
  cursor: pointer;
}

 .suscripciones input[type=radio] {
  display: none;
  /* Ocultar los inputs de radio */
}

 .suscripciones input[type=radio]:checked + label {
  border-color: blue; /* Establecer el color de borde cuando el radio está seleccionado */
  color:blue;
}

  .suscripciones input[type=radio]:checked + label span {  
  color:blue;
}

  .TArticleProfile .info{
      font: bold 15px Arial;
      cursor:pointer;
  }



.download_trial
{
   
   
     background-color: #2185d0;
    padding: 5px;
    color:#fff;
    border-radius: 5px;
    box-shadow: 0 0 0 0 rgb(34 36 38 / 15%) inset;
}

.download_trial span
{
   margin-left: 0px; 
   color:#fff;
}




 .Ttab .TtabContainer{

  
 }

 .TArticleProfile ul li{
     list-style: outside;

 }

 .TArticleProfile ul ul li{
     list-style: outside;
    

 }


.TArticleProfile #customFields{

        margin-left: 10px;
}

.TArticleProfile .Tselect{
        width: 270px;
    height: auto;
    outline: none;
}

.TArticleProfile Tselect.pending{
        border: 1px solid #f91919 !important;
    background: #ffeaec;
}

.TArticleProfile .error_info, 
.TArticleProfile .error_info b{
    margin-top: 2px;
    color: red;
}



.TArticleProfile .short_resumen{
    margin-top: 10px; color: #000 !important;
}

.TArticleProfile .short_resumen p{
    color: #000;
    font-family: 'Microsoft Sans Serif', Arial;
    font-size: 13px;
}

.TArticleProfile .selectMark{
    top: -6px !important;
}

.TArticleProfile .seller_box{
margin-top: 20px;
    padding: 10px;
    border: 1px solid #bbb;
    border-radius: 5px;
    margin-bottom: 20px;
}

.TArticleProfile a, .TArticleProfile span{
        font:  13px Open Sans, open-sans, sans-serif;
        color: #333333;
}
.TArticleProfile h2{
    font-size: 1.0rem;
    line-height: 0.5rem;
    font-weight: 700;
    margin-bottom: 0rem;
    margin-top: 1rem;

    position: relative;
    color: #000;

      
}


 .TArticleProfile h1:after {
    background: #ff6000;
    content: "";
    display: block;
    height: 2px;
    margin: 0.74rem 0 0;
    width: 2.5rem;
}
    

.TArticleProfile li{
    list-style: auto;
    color: #333;
}

.TArticleProfile strong span,
.TArticleProfile strong,
.TArticleProfile b{
        font: bold 13px Arial;
        color: #000;
}

.TArticleProfile .btnDn{
    font-size: 30px;
    border: 1px solid #CCC;
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
    height: 30px;
    width: 40px;
    margin-left: 1px;
    border-right: 0px;
}


.TArticleProfile .btnUp{
    font-size: 30px;
    border: 1px solid #CCC;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    height: 30px;
    width: 40px;
    margin-left: -1px;
   
}
.TArticleProfile #var_amount{
        border-radius: 0px;
}

.TArticleProfile
{
    --colorTxt: rgb(51, 51, 51);
}

.TArticleProfile .cod_art
{
 margin-top: 10px !important;

}



/* LA ESQUINA DE LA FOTO: un solo sitio para el cupon y las etiquetas.
   Antes cada uno se colocaba en absoluto por su cuenta --el cupon aqui, las
   etiquetas 7px mas abajo-- y se pisaban. Ahora la esquina la coloca este
   contenedor y ellos solo se apilan dentro. */
.TArticleProfile .pt-esquina-foto{

    position: absolute;
    top: 8px;
    left: 10px;
    z-index: 10;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;

    /* El ancho del visor, menos el margen del otro lado: una promocion con
       codigo largo se corta con puntos suspensivos en vez de cruzar la foto. */
    max-width: calc(100% - 20px);
}

/* El cupon YA NO SE COLOCA: lo coloca la esquina. Se queda en flujo dentro de
   ella --si se le deja `absolute`, vuelve a montarse sobre las etiquetas--. */
.TArticleProfile .offer_container{

    position: static;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 5px;
    max-width: 100%;
}

.TArticleProfile .offer_code{

    background-color: #DB0680 !important;
    color: #fff !important;
    padding: 5px;
    border-radius: 11px;
    cursor: pointer;

    /* Sin `margin-right`: el hueco entre cupones lo pone el `gap` del
       contenedor, que no deja margen sobrante detras del ultimo. */
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

seccion {
background-color: transparent;
border: 0;
}

 .prev,.next
        {
            display: none;
        }
        #img2 {
  width: 500px;
  height: 500px;
  background: url('https://images-assets.nasa.gov/image/iss054e022823/iss054e022823~orig.jpg') no-repeat #FFF;
  box-shadow:0 37px 38px -27px rgba(0,0,0,0.5);
  pointer-events: none;
  position: absolute;
  opacity: 0;
  border: 4px solid whitesmoke;
  z-index: 100000;
  box-sizing: border-box;
 /*border-radius: 100%;*/
  display: block;
  transition: opacity .2s;
}
        .theater{
                    align-content: center;
        }

 .magnifyarea  { /* CSS to add shadow to magnified image. Optional */
	box-shadow: 5px 5px 10px #818181;
	background: white;
    border: 4px solid #000 !important;
    border-radius: 10px;
    transition: opacity 0.3s !important;
    opacity: 0;
}
/* ── LAS ETIQUETAS DEL PRODUCTO, SOBRE EL VISOR ────────────────────────
 *
 * Flotan encima de la primera foto, arriba a la izquierda, que es donde se
 * miran sin buscarlas. En columna cuando hay varias: en fila se comen el ancho
 * de la imagen y tapan el producto, que es justo lo que han venido a vender.
 */
.pt-etiquetas-articulo {
    /* Tampoco se coloca: vive dentro de `.pt-esquina-foto`. */
    position: static;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    pointer-events: none;   /* no estorban al zoom ni al carrusel */
}

/* La pastilla: la misma forma y colores que en el panel --los pone el `style`
   en línea, que es el dato-- con un poco de sombra para que se lea sobre una
   foto clara. */
.pt-etiquetas-articulo .pt-pastilla {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
}

.pt-etiquetas-articulo .pt-pastilla iconify-icon { font-size: 13px; }

/* ══ LAS SECCIONES DE ABAJO ════════════════════════════════════════
 *
 * Antes eran pestañas (`TTabES6`). Ahora la ficha se lee bajando: descripción,
 * opiniones, y --si las hay-- parámetros y versiones. El porqué está en la
 * plantilla; aquí solo el aire que necesita una sección para leerse como tal.
 */
/* EN SU TARJETA BLANCA. El bloque de opiniones (`TReviewList`) es el del
   perfil del agricultor, que va sobre el fondo blanco de su página; aquí la
   página es gris, y sin tarjeta la descripción y las opiniones quedaban
   sueltas, con los resúmenes como rectángulos blancos sin marco. */
.TArticleProfile .ap-secciones{
    margin-top: 28px;
    padding: 26px 30px 30px;
    background: #fff;
    border: 1px solid #e4eae4;
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(20, 40, 25, .06);
}

/* LAS OPINIONES SON UNA SECCIÓN MÁS: con su raya y su aire, como las otras.
   Iban pegadas al último renglón de la descripción. */
.TArticleProfile .ap-secciones > .ap-seccion + #atr_OPINIONES{
    margin-top: 34px;
    padding-top: 26px;
    border-top: 1px solid #e4eae4;
}
.TArticleProfile #atr_OPINIONES:empty{ display: none; }

.ap-seccion{
    padding-top: 26px;
    margin-top: 34px;
    border-top: 1px solid #e4eae4;
}
/* La primera no lleva línea: no separa de nada, y encima de la descripción
   quedaba una raya suelta a media página. */
.ap-secciones > .ap-seccion:first-child{ margin-top: 0; padding-top: 0; border-top: 0; }

.ap-seccion > h2{
    margin: 0 0 14px;
    padding: 0;
    font-size: 19px; font-weight: 800; letter-spacing: -.2px;
    color: #16211a;
}

/* El cuerpo lo escribe un editor rico, así que se le da forma a lo que puede
   traer dentro: sin esto, un `<ul>` hereda los topos y el margen del navegador
   y sale descolocado, y los párrafos van pegados unos a otros. */
.ap-seccion-cuerpo{ font-size: 13.5px; line-height: 1.7; color: #5b6b60; }
/* CON LA RAÍZ DELANTE Y EL TAMAÑO EN CADA ETIQUETA: la hoja global del sitio fija
   `font` con la forma corta sobre p, li, span y div, y el texto heredado se
   perdía --los párrafos salían en negro a 14px y la lista a 12px--. */
.TArticleProfile .ap-seccion-cuerpo,
.TArticleProfile .ap-seccion-cuerpo p,
.TArticleProfile .ap-seccion-cuerpo li,
.TArticleProfile .ap-seccion-cuerpo span,
.TArticleProfile .ap-seccion-cuerpo div,
.TArticleProfile .ap-seccion-cuerpo td,
.TArticleProfile .ap-seccion-cuerpo th{ font-size: 13.5px; line-height: 1.7; color: #46514a; }
.TArticleProfile .ap-seccion-cuerpo b,
.TArticleProfile .ap-seccion-cuerpo strong{ color: #16211a; }
.ap-seccion-cuerpo p{ margin: 0 0 12px; }
.ap-seccion-cuerpo p:last-child{ margin-bottom: 0; }
.ap-seccion-cuerpo ul, .ap-seccion-cuerpo ol{ margin: 10px 0; padding-left: 20px; }
.ap-seccion-cuerpo li{ margin: 3px 0; }
.ap-seccion-cuerpo img{ max-width: 100%; height: auto; border-radius: 8px; }
.ap-seccion-cuerpo table{ width: 100%; border-collapse: collapse; }
.ap-seccion-cuerpo td, .ap-seccion-cuerpo th{ border: 1px solid #e4eae4; padding: 7px 10px; }

/* ══════════════════════════════════════════════════════════════════════
   LA FICHA EN UN MÓVIL (~400 px) — 14/09/2026
   ══════════════════════════════════════════════════════════════════════

   No existía: `.main_container` era un flex en fila siempre, la caja de compra
   medía 400 px fijos y el contenedor de la página (`.body-content`, hoja de
   `base.php`) exige `min-width: 800px`. En 400 px la ficha se salía por la
   derecha y el botón de comprar quedaba fuera de la pantalla.

   CON @media Y NO CON @container, a propósito: `container-type: inline-size`
   sobre `.TArticleProfile` CONGELÓ el renderizador de Chrome al probarlo en la
   maqueta --página en blanco, sin error y sin que contestara ni una línea de
   JavaScript-- (ver PendingWorks/FICHA-ALIMENTARIA.md §5.2). Aquí la ficha ocupa
   la ventana, así que medir la ventana es medir la ficha.

   El `min-width` del contenedor se suelta SOLO en la página de un artículo
   (`:has(.TArticleProfile)`): el resto del sitio sigue como estaba. */
@media (max-width: 760px){

    .body-content:has(> .TArticleProfile){
        min-width: 0 !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .TArticleProfile .main_container{
        flex-direction: column;
        align-items: stretch;
        min-height: 0;
    }

    .TArticleProfile #imageView{
        position: static !important;
        flex: none !important;
        width: 100%;
    }

    .TArticleProfile #imageView .TCarousel{ height: 300px !important; }

    .TArticleProfile .ap-secciones{
        margin-top: 16px;
        padding: 18px 16px 22px;
        border-radius: 10px;
    }
}



/* https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_star_rating */

/*  
 *  Pure CSS star rating that works without reversing order
 *  of inputs
 *  -------------------------------------------------------
 *  NOTE: For the styling to work, there needs to be a radio
 *        input selected by default. There also needs to be a
 *        radio input before the first star, regardless of
 *        whether you offer a 'no rating' or 0 stars option
 *  
 *  This codepen uses FontAwesome icons
 */

/*
    //------------- estrellas FIJAS ----------------- 
   <div>
                        <span class="fa fa-star checked"></span>
                        <span class="fa fa-star checked"></span>
                        <span class="fa fa-star checked"></span>
                        <span class="fa fa-star"></span>
                        <span class="fa fa-star"></span>
                   </div>
    

     //------------- estrellas editables ----------------- 
      <div id="full-stars-example">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="rating-group">
<input class="rating__input rating__input--none" name="rating" id="rating-none" value="0" type="radio">
<label aria-label="No rating" class="rating__label" for="rating-none"><i class="rating__icon rating__icon--none fa fa-ban"></i></label>
<label aria-label="1 star" class="rating__label" for="rating-1"><i class="rating__icon rating__icon--star fa fa-star"></i></label>
<input class="rating__input" name="rating" id="rating-1" value="1" type="radio">
<label aria-label="2 stars" class="rating__label" for="rating-2"><i class="rating__icon rating__icon--star fa fa-star"></i></label>
<input class="rating__input" name="rating" id="rating-2" value="2" type="radio">
<label aria-label="3 stars" class="rating__label" for="rating-3"><i class="rating__icon rating__icon--star fa fa-star"></i></label>
<input class="rating__input" name="rating" id="rating-3" value="3" type="radio" checked>
<label aria-label="4 stars" class="rating__label" for="rating-4"><i class="rating__icon rating__icon--star fa fa-star"></i></label>
<input class="rating__input" name="rating" id="rating-4" value="4" type="radio">
<label aria-label="5 stars" class="rating__label" for="rating-5"><i class="rating__icon rating__icon--star fa fa-star"></i></label>
<input class="rating__input" name="rating" id="rating-5" value="5" type="radio">
</div>
<p class="desc" style="margin-bottom: 2rem; font-family: sans-serif; font-size:0.9rem">Full stars<br />'No rating' option</p>
    </div>

*/

.fa-star {
 color: #999;
}

.fa-star.checked {
  color: orange;
}


#full-stars-example {
  /* use display:inline-flex to prevent whitespace issues. alternatively, you can put all the children of .rating-group on a single line */
  /* make hover effect work properly in IE */
  /* hide radio inputs */
  /* set icon padding and size */
  /* set default star color */
  /* set color of none icon when unchecked */
  /* if none icon is checked, make it red */
  /* if any input is checked, make its following siblings grey */
  /* make all stars orange on rating group hover */
  /* make hovered input's following siblings grey on hover */
  /* make none icon grey on rating group hover */
  /* make none icon red on hover */
}


#full-stars-example .rating-group {
  display: inline-flex;
}
#full-stars-example .rating__icon {
  pointer-events: none;
}
#full-stars-example .rating__input {
  position: absolute !important;
  left: -9999px !important;
}
#full-stars-example .rating__label {
  cursor: pointer;
  padding: 0 0.1em;
  font-size: 2rem;
}
#full-stars-example .rating__icon--star {
  color: orange;
}
#full-stars-example .rating__icon--none {
  color: #eee;
}
#full-stars-example .rating__input--none:checked + .rating__label .rating__icon--none {
  color: red;
}
#full-stars-example .rating__input:checked ~ .rating__label .rating__icon--star {
  color: #ddd;
}
#full-stars-example .rating-group:hover .rating__label .rating__icon--star {
  color: orange;
}
#full-stars-example .rating__input:hover ~ .rating__label .rating__icon--star {
  color: #ddd;
}
#full-stars-example .rating-group:hover .rating__input--none:not(:hover) + .rating__label .rating__icon--none {
  color: #eee;
}
#full-stars-example .rating__input--none:hover + .rating__label .rating__icon--none {
  color: red;
}






#half-stars-example {
  /* use display:inline-flex to prevent whitespace issues. alternatively, you can put all the children of .rating-group on a single line */
  /* make hover effect work properly in IE */
  /* hide radio inputs */
  /* set icon padding and size */
  /* add padding and positioning to half star labels */
  /* set default star color */
  /* set color of none icon when unchecked */
  /* if none icon is checked, make it red */
  /* if any input is checked, make its following siblings grey */
  /* make all stars orange on rating group hover */
  /* make hovered input's following siblings grey on hover */
  /* make none icon grey on rating group hover */
  /* make none icon red on hover */
}
#half-stars-example .rating-group {
  display: inline-flex;
}
#half-stars-example .rating__icon {
  pointer-events: none;
}
#half-stars-example .rating__input {
  position: absolute !important;
  left: -9999px !important;
}
#half-stars-example .rating__label {
  cursor: pointer;
  /* if you change the left/right padding, update the margin-right property of .rating__label--half as well. */
  padding: 0 0.1em;
  font-size: 2rem;
}
#half-stars-example .rating__label--half {
  padding-right: 0;
  margin-right: -0.6em;
  z-index: 2;
}
#half-stars-example .rating__icon--star {
  color: orange;
}
#half-stars-example .rating__icon--none {
  color: #eee;
}
#half-stars-example .rating__input--none:checked + .rating__label .rating__icon--none {
  color: red;
}
#half-stars-example .rating__input:checked ~ .rating__label .rating__icon--star {
  color: #ddd;
}
#half-stars-example .rating-group:hover .rating__label .rating__icon--star,
#half-stars-example .rating-group:hover .rating__label--half .rating__icon--star {
  color: orange;
}
#half-stars-example .rating__input:hover ~ .rating__label .rating__icon--star,
#half-stars-example .rating__input:hover ~ .rating__label--half .rating__icon--star {
  color: #ddd;
}
#half-stars-example .rating-group:hover .rating__input--none:not(:hover) + .rating__label .rating__icon--none {
  color: #eee;
}
#half-stars-example .rating__input--none:hover + .rating__label .rating__icon--none {
  color: red;
}






#full-stars-example-two {
  /* use display:inline-flex to prevent whitespace issues. alternatively, you can put all the children of .rating-group on a single line */
  /* make hover effect work properly in IE */
  /* hide radio inputs */
  /* hide 'none' input from screenreaders */
  /* set icon padding and size */
  /* set default star color */
  /* if any input is checked, make its following siblings grey */
  /* make all stars orange on rating group hover */
  /* make hovered input's following siblings grey on hover */
}
#full-stars-example-two .rating-group {
  display: inline-flex;
}
#full-stars-example-two .rating__icon {
  pointer-events: none;
}
#full-stars-example-two .rating__input {
  position: absolute !important;
  left: -9999px !important;
}
#full-stars-example-two .rating__input--none {
  display: none;
}
#full-stars-example-two .rating__label {
  cursor: pointer;
  padding: 0 0.1em;
  font-size: 2rem;
}
#full-stars-example-two .rating__icon--star {
  color: orange;
}
#full-stars-example-two .rating__input:checked ~ .rating__label .rating__icon--star {
  color: #ddd;
}
#full-stars-example-two .rating-group:hover .rating__label .rating__icon--star {
  color: orange;
}
#full-stars-example-two .rating__input:hover ~ .rating__label .rating__icon--star {
  color: #ddd;
}






/*  https://codepen.io/Schepp/pen/WNbQByE */

.TArticleResumeBox .box-info .edp{
        padding: 2rem;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
        grid-column-gap: 4rem;
        grid-template-areas:
        'top-left top-right'
        'top-middle top-right'
        'middle-left middle-left'
        'middle-right middle-right'
        'bottom bottom';
    }

.TArticleCombination{    
 

}


.TArticleCombination .title-field{

    font: bold 13px Arial;
       white-space: nowrap;
       
}
/* 400 px, LOS MISMOS QUE LA CAJA DE ALQUILER.
 *
 * Las dos ocupan el mismo hueco de la ficha --el visitante alterna entre ellas
 * con el selector «Alquilar / Comprar»-- y con 390 aquí y ancho libre allí la
 * columna derecha cambiaba de tamaño al cambiar de modo, arrastrando con ella la
 * foto del producto. Si un día se mueve, se mueve en los dos sitios. */
.TArticleResumeBox {
    min-width: 400px;
    width: 400px;  
    min-height: 100%;
    margin: 0px 0px 0px 20px;    
    position: sticky !important; 
    top: 100px;
}

.TArticleResumeBox .box-info{
    position: relative;
    /* border: 1px #292929 solid; */
    background-color: #fff;
    border-radius: 5px;
    border: 1px solid #bbb;
    padding: 15px 15px 120px 15px;
 
}

/* priceBlock */

.TArticleResumeBox .box-info .priceBlock .precioMain {
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    color: #ff6000;
    font-size: 42px;
    font-weight: 700;
    line-height: 20px;
    margin-top: 15px;
}
.TArticleResumeBox .box-info  .priceBlock .precio, .priceBlock .precioMain {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
    margin-right: 1.38462rem;
}
@media only screen and (min-width: 768px) and (max-width: 1201px)
.TArticleResumeBox .box-info .priceBlock .precioMain {
    padding-bottom: 1.15385rem;
}
/* -------------------------------------  */




.TArticleResumeBox .box-info .art_name{
    font-weight: 700;
    word-break: break-word;
    font-family: sans-serif;
   font-size: 18px;
   color: #000;
    line-height: 22px !important;
}

.TArticleResumeBox .box-info .priceBlock{
display: flex;
align-items: center;
flex-wrap: wrap;
place-items: flex-end;
justify-content: flex-end;
padding-bottom: 10px;
}


.TArticleResumeBox .box-info  .Tselect2.multi{
    
    min-height: 30px;
}


.TArticleResumeBox .box-info .priceBlock .precioMain
{
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
      

    color: #ff6000;
    font-size: 42px;
    font-weight: 700;
    line-height: 20px;
    margin-top: 15px;
}
.TArticleResumeBox .box-info .priceBlock span.baseprice {
    font-size: 44px;
    margin: 0;
        color: #ff6000;
    font-size: 30px;
    font-weight: 700;
    line-height: 20px;
}

.TArticleResumeBox .box-info  .priceBlock span.cents {
    margin-left: 0;
    font-size: 20px;
      color: #ff6000;
      font-weight: 700;
}

.TArticleResumeBox .box-info .priceBlock .euro {
    font-size: 20px;
    margin-left: 6px;
     color: #ff6000;
}

.TArticleResumeBox .box-info .priceBlock .old_price{
    text-decoration:line-through;
            font-size: 15px;
    font-weight: 300;
    letter-spacing: 0;
    line-height: 20px;
    color: #bbb;
} 

.TArticleResumeBox .box-info .priceBlock .discount{
      background-color: #bf0019;
    border-radius: 4px;
    color: #fff;
    font-size: .92308rem;
    line-height: 1.23077rem;
    font-weight: 700;
    padding: 3px;
    position: relative;
    align-items: center;
    margin-left: 0px !important;
}

.TArticleResumeBox .box-info .priceBlock .discount span
{
    color:#FFF;
    font: bold 15px Arial;
}

.TArticleResumeBox .box-info .btn-buy{
    padding: 20px;
    color: #fff;
    background-color: #ff6000;
    border-color: #ed6003;
    height: 50px;
    width: 100%;

    display: flex;
    justify-content: center;
}

}

.TArticleResumeBox .box-info .btn-buy{
    font: 800 16px Arial;
    font-weight: bold;
    padding: 15px;
        display: inline-block;

    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    color: #fff;
    background-color: #ff6000;
    border-color: #ed6003;
    user-select: none;
    border: 1px solid transparent;
    margin-top: 10px;
    line-height: 1.33333;
    border-radius: 6px;

}

 .TArticleResumeBox .box-info .btn-buy:hover{
    color: #fff;
    background-color: #cc4d00;
    border-color: #b14802;
}


 

.TArticleResumeBox .box-info  .suscripciones {
  margin-left: 10px;

}

.TArticleResumeBox .box-info  .suscripciones > div{
  display:inline-block;
}
.TArticleResumeBox .box-info .suscripciones span{
     font: bold 12px Arial;
     user-select: none;
     
 }

.TArticleResumeBox .box-info .suscripciones label{
    position: relative;
    display: inline-block;
    cursor: pointer;
    padding: 5px;
    border: 1px solid #bbb;
    border-radius: 5px;
    margin: 4px 4px 0px 0px
}
.TArticleResumeBox .box-info  .suscripciones input{
   
 }


  .TArticleResumeBox .box-info .suscripciones > div {
  display: inline-block;
  cursor: pointer;
}

 .TArticleResumeBox .box-info .suscripciones input[type=radio] {
  display: none;
  /* Ocultar los inputs de radio */
}

.TArticleResumeBox .box-info  .suscripciones input[type=radio]:checked + label {
  border-color: blue; /* Establecer el color de borde cuando el radio está seleccionado */
  color:blue;
}

  .TArticleResumeBox .box-info .suscripciones input[type=radio]:checked + label span {  
  color:blue;
}

  .TArticleResumeBox .box-info  .info{
      font: bold 15px Arial;
      cursor:pointer;
  }



.TArticleResumeBox .box-info .download_trial
{
   
   
     background-color: #2185d0;
    padding: 5px;
    color:#fff;
    border-radius: 5px;
    box-shadow: 0 0 0 0 rgb(34 36 38 / 15%) inset;
}

.TArticleResumeBox .box-info .download_trial span
{
   margin-left: 0px; 
   color:#fff;
}






 .TArticleResumeBox .box-info ul li{
     list-style: outside;

 }

 .TArticleResumeBox .box-info ul ul li{
     list-style: outside;
    

 }


.TArticleResumeBox .box-info #customFields{

        margin-left: 10px;
}

.TArticleResumeBox .box-info .Tselect{
        width: 270px;
    height: auto;
    outline: none;
}

.TArticleResumeBox .box-info Tselect.pending{
        border: 1px solid #f91919 !important;
    background: #ffeaec;
}

.TArticleResumeBox .box-info .error_info, 
.TArticleResumeBox .box-info .error_info b{
    margin-top: 2px;
    color: red;
}

.TArticleResumeBox .box-info .theater,
.TArticleResumeBox .box-info .TitemThumb {
    background-color: #FFF;
    border: 1px solid #bbb;
    border-radius: 5px;
}

.TArticleResumeBox .box-info .short_resumen{
    margin-top: 10px; color: #000 !important;
}

.TArticleResumeBox .box-info .short_resumen p{
    color: #000;
    font-family: 'Microsoft Sans Serif', Arial;
    font-size: 13px;
}

.TArticleResumeBox .box-info .selectMark{
    top: -6px !important;
}

.TArticleResumeBox .box-info .seller_box{
margin-top: 20px;
    padding: 10px;
    border: 1px solid #bbb;
    border-radius: 5px;
    margin-bottom: 20px;
}

/* ── VENDIDO POR ──────────────────────────────────────────────────
   El estilo estaba escrito a mano en el atributo `style` del span, así que
   no había forma de tocarlo sin editar el marcado. Y el nombre necesita
   parecer un enlace: es la puerta al perfil del vendedor, que en un
   marketplace es la mitad de la decisión de compra. */
.TArticleResumeBox .box-info .seller_box .sold-by{
    display: inline-flex; align-items: center; flex-wrap: wrap; gap: 5px;
    font: bold 13px Arial;
    color: #333;
}
.TArticleResumeBox .box-info .seller_box .sold-by a{
    color: #15803d;
    text-decoration: none;
    border-bottom: 1px solid rgba(21,128,61,.35);
}
.TArticleResumeBox .box-info .seller_box .sold-by a:hover{
    border-bottom-color: #15803d;
}
.TArticleResumeBox .box-info .seller_box .sold-by-ok{
    display: inline-flex; align-items: center; gap: 3px;
    font: 600 11px Arial;
    color: #1d4ed8;
}
/* El tamaño va en el icono y no en su caja: `iconify-icon` no hereda el
   `font-size`, y sin esto sale a 20px al lado de un texto de 11. */
.TArticleResumeBox .box-info .seller_box .sold-by-ok iconify-icon{ font-size: 13px; }
.TArticleResumeBox .attr a{
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* TODO `span` DE LA CAJA A 13 px Y #333… MENOS LOS DEL BLOQUE ALIMENTARIO.
   Sin la excepción, esta regla (0,2,1) pisaba cada rótulo y cada dato de
   `TProductFoodInfo`, que se escribe con `.TProductFoodInfo .pfi-x` (0,2,0):
   medido con `getComputedStyle`, todo el bloque salía a 13 px y gris oscuro.
   `:where()` no suma especificidad, así que la regla sigue pesando lo mismo
   para todo lo demás de la caja. */
.TArticleResumeBox .attr a, .TArticleResumeBox .box-info span:where(:not(.TProductFoodInfo *)){
        font:  13px Open Sans, open-sans, sans-serif;
        color: #333333;
}

.TArticleResumeBox .attr .price-info{
    margin-top: 5px;
   
    white-space: nowrap;
}

.TArticleResumeBox .attr img{
    object-fit: contain;
    height: 40px;
    width: 40px;
}

.TArticleResumeBox .box-info h2{
    font-size: 1.0rem;
    line-height: 0.5rem;
    font-weight: 700;
    margin-bottom: 0rem;
    margin-top: 1rem;

    position: relative;
    color: #000;

}


 .TArticleResumeBox .box-info h1:after {
    background: #ff6000;
    content: "";
    display: block;
    height: 2px;
    margin: 0.74rem 0 0;
    width: 2.5rem;
}
    

.TArticleResumeBox .box-info li{
    list-style: auto;
    color: #333;
}

.TArticleResumeBox .box-info strong span,
.TArticleResumeBox .box-info strong,
.TArticleResumeBox .box-info b{
        font: bold 13px Arial;
        color: #000;
}

.TArticleResumeBox .box-info .btnDn{
    font-size: 30px;
    border: 1px solid #CCC;
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
    height: 30px;
    width: 40px;
    margin-left: 1px;
    border-right: 0px;
}


.TArticleResumeBox .box-info .btnUp{
    font-size: 30px;
    border: 1px solid #CCC;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    height: 30px;
    width: 40px;
    margin-left: -1px;
   
}
.TArticleResumeBox .box-info #var_amount{
        border-radius: 0px;
}

.TArticleResumeBox .box-info
{
    --colorTxt: rgb(51, 51, 51);
}

.TArticleResumeBox .box-info .cod_art
{
 margin-top: 10px !important;
 margin-bottom: 20px;
}




.TArticleResumeBox .box-info button.download{
    color: #fff;
    background-color: #fc6437;
    padding: 8px 10px;
    border-radius: 4px;
    border: 0px;
    background-color: #1291f3;
    color: #ffffff;
    margin-left: unset;
}


border{
    
    height: 100%;
    width: 4px;
    /* border-radius: 5px; */
    position: absolute;
    left: -3px;
    top: 0px;
    background-color: #1291f3;
}




.TArticleResumeBox .box-info .attr li a {
    text-decoration: none;
    cursor: inherit;
}
.TArticleResumeBox .box-info .attr li {
    border-radius: 5px;
    margin-right: 5px;
    border: 1px solid #ccc;
     
    list-style: none;
}

.TArticleResumeBox .box-info .attr li:not(.disabled)
{
    cursor: pointer;
}








 /* Contenedor principal */
.option_box,
.option_box:focus,
.option_box:visited,
.option_box:active{
  
    border: 1px solid #b4b4b4; /* Color del borde */
    border-radius: 5px;
    background-color: #ffffff;
   
    position: relative;
    font: 14px Arial, sans-serif  !important;    
    color: #555 !important;
    
    overflow: hidden;
    
    padding: 5px;
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: 5px;
    margin-right: 5px;
    line-height: 14px; 
    cursor: pointer;
    text-decoration: none !important;
    user-select: none;

}
/* --------------------------------------------------------------------------
   SELECTOR DE VARIANTES: los ejes y las muestras

   Un eje por atributo (talla, color, duracion...) y dentro sus opciones. Lo
   pinta CombinationRender; ver PendingWorks/SELECTOR-VARIANTES.md.
   -------------------------------------------------------------------------- */

.comb-eje .attr {
    display: flex;
    flex-wrap: wrap;          /* con muchos valores, que baje de linea en vez
                                 de estrujarlos o salirse de la caja */
    align-items: stretch;
    gap: 5px;
    padding: 5px 0 5px 10px;
    margin: 0 0 5px;
    position: relative;
}

/* LA MUESTRA ES UNA PIEZA DE TAMAÑO FIJO, no el fondo de la opcion.
   Poniendole el color al propio <a>, en cuanto el flex le daba ancho la
   muestra se estiraba de lado a lado de la fila. Y el precio encima de un
   color cualquiera no se lee. */
.option_box.swatch {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 10px;
    min-width: 54px;
}

.option_box.swatch .swatch-muestra {
    display: block;
    width: 26px;
    height: 26px;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, .18);
    object-fit: cover;
    flex: 0 0 auto;
}

/* La flecha del final estorba en una muestra cuadrada. */
.option_box.swatch::after { content: none; }

.option_box .price-info {
    font-size: 11px;
    line-height: 13px;
    color: #666;
    white-space: nowrap;
}

/* Agotada: se ve, se lee y se puede visitar, pero se distingue de un vistazo.
   Sobre la muestra va una barra diagonal, que es lo unico que se entiende sin
   leer nada. */
.option_box.disabled .swatch-muestra {
    position: relative;
    opacity: .55;
}

.option_box.disabled.swatch::before {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    top: 18px;
    height: 1px;
    background: #535353;
    transform: rotate(-24deg);
    pointer-events: none;
}

.option_box:not(.disabled):not(.selected):hover
{
      color: #000 !important;
    border: 1px solid #555 !important; /* Color del borde */
}

.option_box.disabled
{
     cursor: default;
     border: 1px dashed #535353;
     opacity: 0.4;
}
.option_box.selected
{
 color: #000 !important;  
border: 1px solid var(--color_opt_blue) !important; /* Color del borde */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

:root{
--color_opt_blue: #0078d7;
}
/* Check con pseudo-elemento */
.option_box.selected::before {
content: "✓";
    position: absolute;

    top: -4px;
    left: -3px;
    width: 18px;
    height: 20px;
    line-height: 11px;
    background-color: var(--color_opt_blue);
    color: #ffffff;
    clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
    font-size: 13px;
    font-weight: bold;
    padding: 6px;
}



.option_box::after {

    content: "›";
    position: absolute;
    top: 50%; /* Centrado verticalmente */
    right: 7px; /* Separación del borde derecho */
    transform: translateY(-50%); /* Ajuste para centrado */
    font-size: 16px;
    color:  #b4b4b4; /* Color del check */
}

.option_box.selected::after
{    
    color: #0078d7; /* Color de la flecha */
}

.overlayed-attr{
    top: 0;
    background-color: #fff;
    opacity: 0; 
    width:100% !important; 
    height: 100% !important;
    position:absolute !important;
    transition: opacity 0.2s ease-in;
}

.TArticleResumeBox a{
    color: #333;
    text-decoration:underline;
}

.TArticleResumeBox .related_items{
   background-color: transparent;
   border: 0;
}
/* --- Disponibilidad ---------------------------------------------------
   Sustituyen a los style= que llevaba el marcado en TArticleResumeBox.php.
   'art-stock--bajo' es el aviso de "sólo quedan N": mismo verde que el resto
   de la disponibilidad, porque sigue siendo comprable -- lo que cambia es que
   se dice el número. */

.art-stock {
    font-weight: 600;
}

.art-stock--ok,
.art-stock--bajo {
    color: var(--ok_text);
}

/* ------------- Aviso de condicion de transporte del articulo -------------- */
/*
   CANDIDATO A LA HOJA COMUN del area de cliente: es la misma caja de aviso
   --icono a la izquierda, titulo y explicacion-- que usa el carrito para el
   stock corregido. Ver la nota de CLAUDE.md sobre la extraccion final.

   Se dice AQUI y no en el checkout: un segundo porte que aparece al final se
   lee como un cobro sorpresa; dicho en la ficha, es una condicion del producto.
*/
.art-ship-note {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 8px 0 2px;
    padding: 10px 12px;
    border: 1px solid #dbeafe;
    border-radius: 10px;
    background: #f0f7ff;
}

.art-ship-note-ico {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #dbeafe;
    color: #1d4ed8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.art-ship-note-txt {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* El tamaño, sobre el elemento que pinta el texto: la regla global con
   shorthand `font:` fija 12px a span/b/small y no se hereda del padre. */
.art-ship-note-txt b {
    font-size: 13px;
    font-weight: 700;
    color: #1e3a8a;
}

.art-ship-note-txt small {
    font-size: 12px;
    line-height: 1.45;
    color: #334155;
}

/* El frio y la mercancia peligrosa se distinguen del aviso corriente: son las
   dos condiciones que de verdad cambian como llega el pedido. */
.art-ship-note--refrigerated,
.art-ship-note--frozen,
.art-ship-note--seafood { border-color: #bae6fd; background: #f0f9ff; }

.art-ship-note--refrigerated .art-ship-note-ico,
.art-ship-note--frozen .art-ship-note-ico,
.art-ship-note--seafood .art-ship-note-ico { background: #bae6fd; color: #0369a1; }

.art-ship-note--dangerous_goods,
.art-ship-note--flammable { border-color: #fde68a; background: #fffbeb; }

.art-ship-note--dangerous_goods .art-ship-note-ico,
.art-ship-note--flammable .art-ship-note-ico { background: #fde68a; color: #b45309; }

.art-ship-note--dangerous_goods .art-ship-note-txt b,
.art-ship-note--flammable .art-ship-note-txt b { color: #92400e; }

/* ─────────────────────────────────────────────────────────────────────
 * «AVÍSAME CUANDO VUELVA»
 *
 * Ocupa el hueco del botón de comprar cuando el artículo está agotado y no
 * admite pedido. Antes ese hueco se quedaba vacío.
 *
 * Se reutilizan las medidas de `.btn-buy` (que ya está en esta hoja) en vez de
 * inventar otro botón: dos botones con dos alturas distintas en el mismo sitio
 * de la ficha es lo que después hace imposible unificar la hoja del área de
 * cliente. CANDIDATO A LA HOJA COMÚN.
 * ───────────────────────────────────────────────────────────────────── */
.art-watch{ margin-top: 10px; }

.art-watch-lead{
    margin: 0 0 8px 0;
    font-size: 13px;
    line-height: 19px;
    color: #475569;
}

.art-watch-email{
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 8px;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14px;
    color: #0f172a;
}

.art-watch-email:focus{
    outline: none;
    border-color: #3b82f6;
}

.art-watch-note{
    margin: 8px 0 0 0;
    font-size: 11px;
    line-height: 17px;
    color: #94a3b8;
}

.art-watch-done{
    margin: 10px 0 0 0;
    padding: 12px 14px;
    background-color: #dcfce7;
    border: 1px solid #bbf7d0;
    border-radius: 12px;
    font-size: 13px;
    line-height: 20px;
    color: #15803d;
}

/* ─────────────────────────────────────────────────────────────────────
 * EL AGRICULTOR ESTÁ DE VACACIONES
 * ─────────────────────────────────────────────────────────────────────
 * Ocupa el sitio del botón de comprar, y por eso pesa lo que pesa: no es una
 * nota al pie, es la respuesta a «quiero esto».
 *
 * ÁMBAR Y NO ROJO: no ha fallado nada, el agricultor ha avisado. El rojo diría
 * «algo va mal» y lo que pasa es que vuelve el mes que viene.
 *
 * El mismo tono y el mismo redondeo que `.art-watch-done`, que es el bloque
 * hermano --el de «te avisamos cuando vuelva»--: son la misma clase de
 * respuesta y verlos distintos es lo que después hace imposible unificar la
 * hoja. CANDIDATO A LA HOJA COMÚN.
 * ───────────────────────────────────────────────────────────────────── */
.art-vacaciones{ margin-top: 10px; }

/* El flex de dos columnas de siempre: icono en la primera y TODO el texto en la
   segunda, para que las tres líneas arranquen en la misma vertical. */
.art-vac-lead{
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0 0 10px 0;
    padding: 12px 14px;
    background-color: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 12px;
    font-size: 13px;
    line-height: 20px;
    color: #92400e;
}

/* El tamaño se declara EN el icono: no hereda el `font-size` de su caja. */
.art-vac-lead iconify-icon{
    flex: 0 0 auto;
    font-size: 17px;
    margin-top: 1px;
    color: #b45309;
}

/* El botón de escribir hereda de `.btn-buy` --mismo alto y mismo peso, porque
   ocupa su sitio-- y se distingue por el color: verde apagado, que es una
   acción buena pero no la que se venía a hacer. Con el naranja de comprar se
   pulsa creyendo que se compra, y eso es peor que no poner botón.

   ── EL SELECTOR LARGO HACE FALTA ──────────────────────────────────
   `.TArticleResumeBox .box-info .btn-buy` pesa (0,3,0) y le ganaba a un
   `.btn-vacaciones` de (0,1,0): se comprobó con `getComputedStyle` y el botón
   salía naranja. Con el prefijo y el `a` va a (0,3,1) y no depende del orden de
   las reglas dentro de la hoja.

   `inline-flex` explícito porque una regla global del sitio pone
   `button { display:flex }`. */
.TArticleResumeBox .box-info a.btn-vacaciones,
.btn-vacaciones{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    text-decoration: none;
    background-color: #ffffff;
    border: 1px solid #16a34a;
    color: #15803d;
}

.TArticleResumeBox .box-info a.btn-vacaciones:hover,
.btn-vacaciones:hover{
    background-color: #f0fdf4;
    color: #14532d;
}

/* ── EL TEXTO LEGAL DE LA COMPRA (14/09/2026) ─────────────────────────
   Bajo «Vendido por»: con quién se contrata, si es profesional y si hay
   desistimiento. Icono en su columna y el texto en la segunda; los tamaños
   declarados porque la hoja global fija los `span` a 12 px y `iconify-icon` no
   hereda el tamaño. */
.TArticleResumeBox .box-info .seller_box .sold-by-legal{
    margin-top: 8px; padding-top: 8px;
    border-top: 1px dashed #d6dcd6;
}
.TArticleResumeBox .box-info .seller_box .sold-by-legal-fila{
    display: flex; align-items: flex-start; gap: 6px;
    margin-bottom: 4px;
}
.TArticleResumeBox .box-info .seller_box .sold-by-legal-fila > span{
    flex: 1; min-width: 0;
    font-size: 12px; line-height: 1.45; color: #3f4a43;
}
.TArticleResumeBox .box-info .seller_box .sold-by-legal-fila b{ font-size: 12px; color: #16211a; }
.TArticleResumeBox .box-info .seller_box .sold-by-legal-fila iconify-icon{
    flex: 0 0 auto; margin-top: 1px;
    font-size: 14px; width: 14px; height: 14px; color: #236e30;
}
.TArticleResumeBox .box-info .seller_box .sold-by-legal-fila > span.sold-by-legal-enlaces{
    display: flex; flex-wrap: wrap; gap: 4px 12px;
}
.TArticleResumeBox .box-info .seller_box .sold-by-legal-enlaces a,
.TArticleResumeBox .box-info .seller_box .sold-by-legal-enlaces a:visited{
    font-size: 12px; color: #16491f; text-decoration: none;
    border-bottom: 1px solid rgba(22,73,31,.3);
}
.TArticleResumeBox .box-info .seller_box .sold-by-legal-enlaces a:hover{ border-bottom-color: #16491f; }


/* ══════════════════════════════════════════════════════════════════════
   EL PRECIO POR KILO O LITRO, PEGADO AL TOTAL (RD 3423/2000)
   ══════════════════════════════════════════════════════════════════════ */
.TArticleResumeBox .box-info .art-precio-ud{
    display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline;
    gap: 2px 6px; width: 100%;
    margin: -2px 0 10px;
}
.TArticleResumeBox .box-info .art-precio-ud span{
    font: 600 12.5px 'Inter', sans-serif; color: #16211a; font-variant-numeric: tabular-nums;
}
.TArticleResumeBox .box-info .art-precio-ud small{ font: 400 11px 'Inter', sans-serif; color: #5d6a62; }

/* ══════════════════════════════════════════════════════════════════════
   LA BARRA DE COMPRA DEL MÓVIL — solo por debajo de 760 px
   ══════════════════════════════════════════════════════════════════════ */
.TArticleResumeBox .art-barra-movil{ display: none; }

@media (max-width: 760px){

    /* LA CAJA A TODO EL ANCHO. Medía 400 px fijos (`min-width`) y era
       `sticky`: en un móvil se salía por la derecha y se quedaba pegada encima
       de la descripción al bajar. */
    .TArticleResumeBox{
        min-width: 0; width: 100%;
        margin: 12px 0 0;
        position: static !important;
    }
    .TArticleResumeBox .box-info{ padding-bottom: 100px; }

    .TArticleResumeBox .art-barra-movil{
        display: flex; align-items: center; gap: 10px;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
        background: #fff; border-top: 1px solid #d6dcd6;
        box-shadow: 0 -4px 14px rgba(0,0,0,.08);
    }
    .TArticleResumeBox .art-barra-movil-precio{ flex: 1; min-width: 0; display: flex; flex-direction: column; }
    .TArticleResumeBox .art-barra-movil .art-barra-movil-total{
        font: 800 20px/1.2 'Inter', sans-serif; color: #f45d01; font-variant-numeric: tabular-nums;
    }
    .TArticleResumeBox .art-barra-movil-precio small{
        font: 400 11px/1.35 'Inter', sans-serif; color: #5d6a62;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    /* EL CHAT DE SOPORTE SE APARTA: su burbuja flotante (bottom 12 px) tapaba
       el botón de la barra. Mismo recurso que ya usa la pasarela de pago
       (`body:has(.pgw) #sopChat`). */
    body:has(.art-barra-movil) #sopChat{ bottom: 84px; }

    .TArticleResumeBox .box-info .art-barra-movil .art-barra-movil-comprar,
    .TArticleResumeBox .art-barra-movil .art-barra-movil-comprar{
        flex: 0 0 auto; width: auto; height: 44px; margin: 0; padding: 0 18px;
    }
}



/* ══════════════════════════════════════════════════════════════════════
   TReviewList — EL BLOQUE DE OPINIONES, IGUAL EN LAS DOS PANTALLAS
   ══════════════════════════════════════════════════════════════════════

   Sale de la pestaña «Opiniones» del perfil del agricultor: es la misma
   maqueta, movida aquí para que la ficha de producto enseñe exactamente lo
   mismo en vez de una imitación.

   ── LOS COLORES, CON RESPALDO EN EL PUNTO DE USO ────────────────────
   En el perfil los tokens `--sd-*` los pone `TSellersUI`. La ficha de producto
   NO carga esa hoja, así que cada uso lleva su valor de reserva
   --`var(--sd-tinta, #16211a)`--, que es la forma que no cicla. Un token que se
   cita a sí mismo en su propia declaración deja vacías TODAS las reglas que lo
   usan, y sin un solo error: ya pasó en `TProductCard`.

   TODO CUELGA DE `.rl`: la ficha de producto arrastra reglas globales muy
   agresivas (una fija `font: 12px` sobre div/span/p/li con la forma corta, otra
   le da `height: 22px` a cualquier `textarea`) y sin prefijo se cuelan.
   ══════════════════════════════════════════════════════════════════════ */

.rl{ display: block; }

/* `hidden` MANDA. El botón «Escribir una opinión» nace oculto y solo se enseña
   si quien mira tiene una compra pendiente de valorar, pero `.rl-btn` le da
   `display: inline-flex` y eso le gana al atributo: salía SIEMPRE, y pulsarlo
   sin compra detrás no hacía nada. Lo mismo con los resúmenes y el vacío. */
.rl [hidden]{ display: none !important; }

/* ── LAS DOS COLUMNAS ──────────────────────────────────────────────
   El resumen a la izquierda se mira UNA VEZ y se queda ahí mientras se leen las
   opiniones; apilado obligaba a subir cada vez que se quería contrastar un
   comentario con el conjunto. */
.rl .rl-rej{
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

/* Las dos tarjetas del lado suben juntas al hacer scroll: la pegajosa es la
   COLUMNA, no cada tarjeta.

   ── EL TOPE SALE DE LA CABECERA, NO DE UN NÚMERO ────────────────────
   Aquí ponía `top: 78px` y la cabecera del sitio mide 118: la columna se
   quedaba pegada 40px por DEBAJO de su borde superior, o sea tapada por ella,
   y el resumen de reputación se leía cortado por la mitad. `--site-cabecera`
   la mide y la publica `base.php`; el respaldo es por si esta hoja se usa
   fuera del sitio (la ficha de producto no carga `TSellersUI`, y el mismo
   día puede no cargar otra cosa). */
.rl .rl-lado{
    display: flex; flex-direction: column; gap: 22px;
    position: sticky; top: calc(var(--site-cabecera, 118px) + 14px);
    align-self: start;
}

.rl .rl-card{ background: #fff; }

.rl .rl-card-cab{ display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.rl .rl-card-cab h3{
    margin: 0; padding: 0;
    flex: 1; min-width: 0;
    font-size: 14.5px; font-weight: 700;
    color: var(--sd-tinta, #16211a);
}

.rl .rl-btn{
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 14px;
    border: 0; border-radius: 9px;
    background: var(--sd-verde, #04713a); color: #fff;
    font-family: inherit; font-size: 12px; font-weight: 700;
    white-space: nowrap; cursor: pointer;
}
.rl .rl-btn:hover{ filter: brightness(1.08); }
.rl .rl-btn.suave{
    background: #fff; color: var(--sd-suave, #6b7a70);
    border: 1px solid var(--sd-borde, #e4eae4);
}
.rl .rl-btn[disabled]{ opacity: .55; cursor: default; }

/* ── EL RESUMEN DE REPUTACIÓN ──────────────────────────────────────── */

.rl .rl-rep-rejilla{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rl .rl-rep{ display: flex; gap: 9px; align-items: flex-start; }
.rl .rl-rep-ico{
    flex: 0 0 auto; width: 28px; height: 28px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
}
/* El tamaño se declara EN el icono: `iconify-icon` no hereda el de su caja y
   sin esto salen todos a los 20px de fábrica. */
.rl .rl-rep-ico iconify-icon{ font-size: 15px; }
.rl .rl-rep-ico.verde{ background: var(--sd-verde-claro, #eef6ee); color: var(--sd-verde-oscuro, #005c2d); }
.rl .rl-rep-ico.rojo { background: #fdecec; color: #b42318; }
.rl .rl-rep-ico.azul { background: #eaf1fd; color: #175cd3; }
.rl .rl-rep-ico.ambar{ background: #fdf3e2; color: #b54708; }
.rl .rl-rep > div{ flex: 1; min-width: 0; }
.rl .rl-rep b{
    display: block; line-height: 1.15;
    font-size: 17px; font-weight: 800;
    color: var(--sd-tinta, #16211a);
}
.rl .rl-rep small{ display: block; margin-top: 2px; font-size: 10.5px; color: var(--sd-suave, #6b7a70); }
.rl .rl-rep-pie{ margin: 12px 0 0; font-size: 10.5px; line-height: 1.5; color: var(--sd-tenue, #93a399); }

/* ── LA VALORACIÓN GENERAL ─────────────────────────────────────────
   La nota en grande y sola: es el número por el que se entra aquí. */

.rl .rl-nota{ margin-bottom: 16px; }
.rl .rl-nota b{
    display: block; line-height: 1;
    font-size: 46px; font-weight: 800;
    color: var(--sd-tinta, #16211a);
}
.rl .rl-nota small{ display: block; margin-top: 7px; font-size: 11.5px; color: var(--sd-suave, #6b7a70); }

.rl .rl-estrellas{ display: flex; gap: 2px; margin-top: 6px; }
.rl .rl-s{ width: 15px; height: 15px; fill: var(--sd-oro, #e2a812); flex: 0 0 auto; }
/* En la ficha de una opinión son algo menores que la nota grande, pero NO las
   11px del reparto: al lado de un titular se leían como una pelusa. */
.rl .rl-s.mini{ width: 14px; height: 14px; }

.rl .rl-barras{ display: flex; flex-direction: column; gap: 5px; }
.rl .rl-barra{ display: flex; align-items: center; gap: 9px; font-size: 11px; color: var(--sd-suave, #6b7a70); }
.rl .rl-barra em{ flex: 0 0 auto; width: 28px; font-style: normal; }
.rl .rl-barra i{
    flex: 1; min-width: 0; height: 7px;
    border-radius: 999px;
    background: #eef2ee;
    border: 1px solid var(--sd-borde, #e4eae4);
    overflow: hidden;
}
.rl .rl-barra i > b{ display: block; height: 100%; background: var(--sd-verde, #04713a); }
.rl .rl-barra u{
    flex: 0 0 auto; width: 26px; text-align: right;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}

/* ── LA LISTA ──────────────────────────────────────────────────────
   Cada opinión separada por una línea y no por una caja: son del mismo bloque,
   y encajonarlas una a una lo convierte en una lista de listas. */

.rl .rl-opiniones{ display: flex; flex-direction: column; }
.rl .rl-opinion{ padding: 16px 0; border-top: 1px solid var(--sd-borde, #e4eae4); }
.rl .rl-opinion:first-child{ padding-top: 0; border-top: 0; }

.rl .rl-quien{ display: flex; align-items: center; gap: 8px; }
.rl .rl-avatar{
    flex: 0 0 auto; width: 26px; height: 26px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--sd-verde-claro, #eef6ee);
    border: 1px solid var(--sd-verde-borde, #cfe3d2);
    color: var(--sd-verde-oscuro, #005c2d);
    font-size: 11px; font-weight: 800;
}
.rl .rl-quien-txt{ flex: 1; min-width: 0; }
.rl .rl-quien-txt b{ display: block; font-size: 12px; color: var(--sd-tinta, #16211a); }
.rl .rl-quien-txt small{ display: block; font-size: 10.5px; color: var(--sd-tenue, #93a399); }

/* ── NOMBRE · ESTRELLAS · NOTA, EN UNA LÍNEA ──────────────────────
   Quién opina y cuánto puntúa son el mismo dato cuando se recorre una
   lista. `flex-wrap` para que en una columna estrecha la nota baje sola
   en vez de empujar el nombre fuera de la caja. */
.rl .rl-quien-linea{
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 6px; min-width: 0;
}

/* ── LOS TRES, A LA MISMA ALTURA ──────────────────────────────────
   Medido: la nota salía 11px POR ENCIMA de las estrellas y se leía como
   un superíndice. No era el flex --`align-items:center` estaba puesto--
   sino el MARGEN que la hoja del sitio le da a un `<small>`, que empuja
   la caja dentro de su línea; y los `line-height` dispares de un `<b>`,
   un `<small>` y unos SVG, que hacían cada caja de un alto distinto.

   Con el margen a cero y una interlínea común, los cinco comparten
   centro y la fila mide lo que mide su contenido. */
.rl .rl-quien-linea > *{
    margin: 0;
    line-height: 1;
    align-self: center;
}

/* El nombre y la nota son `display:block` por las dos reglas de arriba
   --valen para el bloque de debajo, el del lugar-- y aquí estorban: en
   línea, cada uno ocuparía su propio renglón. */
.rl .rl-quien-linea b,
.rl .rl-quien-linea small{ display: inline-block; }

/* El punto centrado: separa sin pesar. Con el mismo gris que el lugar,
   para que la línea la lidere el nombre. */
.rl .rl-sep{
    flex: 0 0 auto;
    font-size: 11px; line-height: 1;
    color: var(--sd-tenue, #93a399);
}

.rl .rl-nota{
    flex: 0 0 auto;
    font-size: 10.5px; font-weight: 700;
    color: var(--sd-suave, #6b7a70);
    white-space: nowrap;
}
.rl .rl-quien > small{ flex: 0 0 auto; font-size: 10.5px; color: var(--sd-tenue, #93a399); white-space: nowrap; }

.rl .rl-op-cab{ display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.rl .rl-op-cab b{ font-size: 13px; color: var(--sd-tinta, #16211a); }

/* El sello pesa MÁS que el texto de la opinión: es lo que separa una valoración
   de un comentario. Con su icono a medida, o sale a 20px y tuerce la línea. */
.rl .rl-ok{
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 10.5px; font-weight: 700; line-height: 1;
    color: var(--sd-verde-oscuro, #005c2d);
}
.rl .rl-ok iconify-icon{ font-size: 13px; flex: 0 0 auto; }

.rl .rl-opinion > p{
    margin: 9px 0 0;
    font-size: 12.5px; line-height: 1.6;
    color: var(--sd-texto, #3d4a42);
}

/* ── EL ARTÍCULO VALORADO ──────────────────────────────────────────── */

/* ── LA TARJETA DEL ARTÍCULO SE AJUSTA A LO QUE DICE ──────────────
   Era `display:flex`, o sea un bloque, y se estiraba hasta el 100% del
   ancho de la opinión: un recuadro enorme para un nombre y una
   referencia, con más de media caja vacía.

   Con `inline-flex` la caja mide lo que mide su contenido. El
   `max-width:100%` es la otra mitad: sin él, un nombre de artículo largo
   la sacaría fuera de la columna en vez de recortarse con los puntos
   suspensivos que ya tiene el `<b>`. */
.rl .rl-prod{
    display: inline-flex; align-items: center; gap: 9px;
    max-width: 100%;
    margin-top: 10px;
    padding: 8px 10px;
    border: 1px solid var(--sd-borde, #e4eae4);
    border-radius: 10px;
    background: var(--sd-crema, #f7faf6);
}
.rl .rl-prod-foto{
    flex: 0 0 auto; width: 34px; height: 34px;
    border-radius: 7px; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: #fff; color: var(--sd-tenue, #93a399);
    font-size: 16px;
}
.rl .rl-prod-foto img{ width: 100%; height: 100%; object-fit: cover; display: block; }
/* `0 1 auto` y no `1`: con el padre ajustado al contenido, un `flex:1`
   no tiene espacio sobrante que repartir, pero deja la intención clara
   --el texto cede y se recorta, no estira la caja--. */
.rl .rl-prod-txt{ flex: 0 1 auto; min-width: 0; }
.rl .rl-prod-txt b{
    display: block; font-size: 12px; color: var(--sd-tinta, #16211a);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rl .rl-prod-txt small{ display: block; font-size: 10.5px; color: var(--sd-tenue, #93a399); }

/* ── PROS, CONTRAS Y FOTOS ─────────────────────────────────────────── */

.rl .rl-puntos{ display: flex; flex-wrap: wrap; gap: 16px; margin-top: 9px; }
.rl .rl-punto{ display: flex; gap: 6px; font-size: 11.5px; color: var(--sd-suave, #6b7a70); }
.rl .rl-punto iconify-icon{ flex: 0 0 auto; margin-top: 2px; font-size: 14px; }
.rl .rl-punto.pro iconify-icon{ color: var(--sd-verde, #04713a); }
.rl .rl-punto.contra iconify-icon{ color: #b42318; }

.rl .rl-fotos{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.rl .rl-foto{
    display: block; width: 104px; height: 78px;
    border-radius: 8px; overflow: hidden;
    border: 1px solid var(--sd-borde, #e4eae4);
}
.rl .rl-foto img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.rl .rl-respuesta .rl-foto{ width: 84px; height: 64px; }

/* ── LAS ACCIONES: ENLACES, NO BOTONES ─────────────────────────────
   Debajo de lo que alguien ha escrito, un botón macizo compite con el texto y
   convierte la conversación en un formulario. */

.rl .rl-acciones{ display: flex; align-items: center; gap: 16px; margin-top: 9px; }

/* «Denunciar contenido»: el aspecto del botón es de TContentReportForm (viaja
   con toda página); aquí solo se acerca a la tarjeta. */
.rl .rl-denuncia{ margin-top: 4px; }
.rl .rl-accion{
    display: inline-flex; align-items: center; gap: 5px;
    background: none; border: 0; padding: 2px 0;
    font-family: inherit; font-size: 11.5px; font-weight: 700;
    color: var(--sd-suave, #6b7a70); cursor: pointer;
}
.rl .rl-accion:hover{ color: var(--sd-tinta, #16211a); text-decoration: underline; }
.rl .rl-accion[disabled]{ opacity: .5; cursor: default; text-decoration: none; }
.rl .rl-accion iconify-icon{ font-size: 14px; flex: 0 0 auto; }

/* EJECUTADO: color propio y contador. Sin esto, al volver a la página no se
   sabe si se llegó a dar el voto y se pulsa otra vez quitándolo. */
.rl .rl-accion.on{ color: var(--sd-verde-oscuro, #005c2d); }
.rl .rl-accion.on:hover{ color: var(--sd-verde-oscuro, #005c2d); }
.rl .rl-accion.on iconify-icon{ color: var(--sd-verde, #04713a); }
.rl .rl-accion em{
    font-style: normal; font-size: 10.5px;
    color: var(--sd-suave, #6b7a70);
    background: var(--sd-crema, #f7faf6);
    border-radius: 9px; padding: 1px 6px;
}
.rl .rl-accion.on em{ background: var(--sd-verde-claro, #eef6ee); color: var(--sd-verde-oscuro, #005c2d); }
.rl .rl-accion.peligro:hover,
.rl .rl-accion.peligro:hover iconify-icon{ color: #b42318; }

/* ── LA RESPUESTA DEL VENDEDOR ─────────────────────────────────────
   Metida y con su barra verde: se ve de un vistazo que cuelga de la opinión de
   arriba y no es otra opinión más. */

.rl .rl-respuesta{
    display: flex; gap: 9px;
    margin: 10px 0 0 14px;
    padding: 11px 13px;
    background: var(--sd-verde-claro, #eef6ee);
    border-left: 2px solid var(--sd-verde, #04713a);
    border-radius: 0 10px 10px 0;
}
.rl .rl-resp-avatar{
    flex: 0 0 auto; width: 28px; height: 28px;
    border-radius: 50%; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: #fff; border: 1px solid var(--sd-verde-borde, #cfe3d2);
    color: var(--sd-verde-oscuro, #005c2d);
    font-size: 11px; font-weight: 800;
}
.rl .rl-resp-avatar img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.rl .rl-respuesta > div{ flex: 1; min-width: 0; }
.rl .rl-resp-cab{ display: flex; align-items: center; gap: 8px; }
.rl .rl-resp-cab b{ font-size: 12px; color: var(--sd-verde-oscuro, #005c2d); }
.rl .rl-resp-cab small{ font-size: 10.5px; color: var(--sd-tenue, #93a399); }
.rl .rl-respuesta p{ margin: 3px 0 0; font-size: 12px; line-height: 1.55; color: var(--sd-texto, #3d4a42); }

/* ── CONTESTAR ─────────────────────────────────────────────────────── */

.rl .rl-contestar{ margin: 10px 0 0 14px; }
/* EL ALTO VA AQUÍ Y NO EN `rows`: una regla global de la hoja de arranque
   (`.whiteWindow input, textarea`) le pone `height:22px` a TODO textarea del
   sitio, y la caja salía como una línea con el texto cortado por la mitad. */
.rl .rl-contestar textarea{
    width: 100%; height: auto; min-height: 76px;
    border: 1px solid var(--sd-borde, #e4eae4); border-radius: 10px;
    padding: 9px 11px;
    font-family: inherit; font-size: 12.5px; line-height: 1.5;
    color: var(--sd-tinta, #16211a); resize: vertical;
    background: #fff;
}
.rl .rl-contestar textarea:focus{ outline: none; border-color: var(--sd-verde, #04713a); }
.rl .rl-adjuntos{ margin-top: 9px; }
.rl .rl-contestar-pie{
    display: flex; align-items: center; justify-content: flex-end; gap: 8px;
    margin-top: 9px; flex-wrap: wrap;
}
.rl .rl-gracia{ flex: 1; min-width: 0; font-size: 10.5px; line-height: 1.4; color: var(--sd-tenue, #93a399); }

/* ── SIN OPINIONES ─────────────────────────────────────────────────
   Con su explicación, nunca un hueco en blanco: que un producto nuevo no tenga
   opiniones no es un fallo, y decirlo evita que lo parezca. */

.rl .rl-vacio{
    text-align: center;
    padding: 34px 20px;
    border: 1px dashed var(--sd-borde, #e4eae4);
    border-radius: 12px;
    color: var(--sd-suave, #6b7a70);
}
.rl .rl-vacio iconify-icon{ font-size: 30px; color: var(--sd-tenue, #93a399); }
.rl .rl-vacio b{ display: block; margin-top: 10px; font-size: 13.5px; color: var(--sd-tinta, #16211a); }
.rl .rl-vacio small{ display: block; margin-top: 4px; font-size: 11.5px; }

@media (max-width: 1000px){
    /* Sin dos columnas, pegar el resumen arriba lo deja tapando las opiniones. */
    .rl .rl-rej{ grid-template-columns: minmax(0, 1fr); }
    .rl .rl-lado{ position: static; }
}






.TCarousel {
  
  display: flex;
  flex-direction: column;
}

 

.TCarousel  .main_area
{
    width: 100%;
    max-height: 100%;
    overflow: hidden;
    background-color: #fff;
    position:relative;
    margin-bottom: 20px;
    border: 1px solid #bbb;
    border-radius: 5px;
    flex: 1;
   
}

/* La tira de imagenes.
 *
 * FLEX y desplazamiento por TRANSFORM, no por `left` en pixeles: cada imagen
 * ocupa exactamente el 100% del visor (flex: 0 0 100%) y el salto de una a otra
 * es translateX(-N*100%). Asi la cuenta la hace el navegador con el tamaño real
 * en cada momento — no hay medida que se quede vieja, que es lo que hacia que
 * al reabrir el visor asomara la imagen siguiente por la derecha.
 */
.TCarousel  .main_area image-list{
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;
    height: 100%;
    left: 0;
    will-change: transform;
}


.TCarousel  .main_area img{
    /* Cada imagen, un visor completo: ni se encoge ni se estira. */
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    object-fit: contain;   /* Mantiene las proporciones */
}

.TCarousel  .thumb_area{

  position: relative;
  width: auto;
  white-space: nowrap;
  display: block;

  /* Recorta la tira: es lo que hace que haga falta desplazarla y que las
     miniaturas de mas alla del borde no se salgan del carrusel. */
  overflow: hidden;
}

/* La tira que SE MUEVE. Las flechas se quedan fuera de ella, quietas.
   Se desplaza con `left`, que es lo que anima _setupThumbScroller(). */
.TCarousel .thumb_list {
    position: relative;
    left: 0;
    display: inline-block;
    white-space: nowrap;
}

.TCarousel .thumb_area img
{
 height: 70px;
    width: 70px;
    padding: 5px;
    border: 2px solid #d7d7d7;
    border-radius: 10px;
    margin-right: 10px;
    flex-shrink: 0; /* Evita que las imágenes se redimensionen */
    object-fit: contain; /* Ajusta la imagen sin deformarla */
    border-radius:5px;
    background-color: #fff;
    transition: 0.2s ease-in-out; /* Suaviza el deslizamiento */
}
/* Estilo de las flechas */
.TCarousel .arrow-left,
.TCarousel  .arrow-right {
    position: absolute;
    bottom: 40px;
  border-radius: 5px;
    width: 30px;
    height: 30px;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    user-select: none;
}
.TCarousel .arrow-left {
    left: 10px;
    top: 50%;
}

.TCarousel .arrow-right {
    right: 10px;
     top: 50%;
}

.TCarousel .arrow-left.hidden, 
.TCarousel .arrow-right.hidden {
    display: none;
}


.TCarousel  .thumb_area img:hover,
.TCarousel  .thumb_area img.selected
{    
    border: 2px solid #1497ff;
}





/* ══════════════════════════════════════════════════════════════════════
   TProductFoodInfo — «Información del producto» (14/09/2026)

   El bloque alimentario de la ficha (Rgto. UE 1169/2011, art. 14). UNA sola
   pieza para la ficha normal, la ficha de subasta y el overlay de compra de
   la subasta holandesa: cambia el contenedor, no el bloque.

   LOS TONOS SON LOS DE `.sold-by-legal`, que vive en la misma caja justo
   encima: #236e30 para el icono, #16211a para el dato, #3f4a43 para el texto
   y #d6dcd6 para las líneas. Dos verdes distintos en la misma columna se
   notan. Candidatos a la hoja común de la tienda cuando se extraiga.

   OJO con TRES reglas que muerden aquí (ver Memoria):
   · `.TArticleResumeBox .box-info span { font: 13px Open Sans; color:#333 }`
     pisaba cualquier span de la caja con más especificidad que
     `.TProductFoodInfo .x`. Ya excluye el bloque (`:where(:not(...))`), pero
     las fichas de subasta tienen sus propias reglas de span: por eso las de
     aquí llevan la clase doblada (`.TProductFoodInfo.TProductFoodInfo span.x`).
   · `div, span, p, li { font: normal 12px 'Inter' }` — el tamaño va SIEMPRE
     sobre el elemento que pinta las letras, nunca sobre su caja.
   · `<iconify-icon>` no hereda el font-size — se declara en el icono.
   ══════════════════════════════════════════════════════════════════════ */

.TProductFoodInfo {
    --pfi-ico:        #236e30;
    --pfi-ink:        #16211a;
    --pfi-text:       #3f4a43;
    --pfi-muted:      #5d6a62;   /* 5,6:1 sobre blanco: AA en 11px */
    --pfi-line:       #d6dcd6;
    --pfi-line-soft:  #e8ece8;
    --pfi-soft:       #f6f8f6;
    --pfi-warn-bg:    #fff4e0;
    --pfi-warn-line:  #f0c47a;
    --pfi-warn-ink:   #6b3a00;   /* 8,9:1 sobre el fondo ámbar */
    --pfi-ok-bg:      #eef7ef;
    --pfi-ok-line:    #bfdcc3;

    margin: 12px 0 10px;
    border: 1px solid var(--pfi-line);
    border-radius: 5px;           /* el mismo radio que `.box-info` y `.seller_box` */
    background: #fff;
    box-sizing: border-box;
}
.TProductFoodInfo *, .TProductFoodInfo *::before, .TProductFoodInfo *::after { box-sizing: border-box; }

/* ── Cabecera: icono en su columna, título y subtítulo en la segunda ── */
.TProductFoodInfo .pfi-cab {
    display: flex; gap: 8px; align-items: flex-start;
    padding: 10px 12px 9px;
    border-bottom: 1px solid var(--pfi-line-soft);
}
.TProductFoodInfo .pfi-cab > iconify-icon {
    flex: 0 0 auto; font-size: 16px; width: 16px; height: 16px;
    margin-top: 1px; color: var(--pfi-ico);
}
.TProductFoodInfo .pfi-cab-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.TProductFoodInfo .pfi-cab-txt b     { font: 700 14px/1.3 'Inter', sans-serif; color: var(--pfi-ink); }
.TProductFoodInfo .pfi-cab-txt small { font: 400 11px/1.4 'Inter', sans-serif; color: var(--pfi-muted); }

/* ── Filas ────────────────────────────────────────────────────────────
   UN FLEX DE DOS COLUMNAS: el icono fuera del <details>, a la izquierda, y
   todo el texto --rótulo, dato, desplegable-- en la segunda. Así lo que se
   abre debajo arranca en la misma vertical que el rótulo sin compensar nada. */
.TProductFoodInfo .pfi-lista { margin: 0; padding: 2px 12px 4px; list-style: none; }

.TProductFoodInfo .pfi-fila {
    display: flex; gap: 8px; align-items: flex-start;
    padding: 7px 0;
    border-bottom: 1px solid var(--pfi-line-soft);
    font: 400 12px 'Inter', sans-serif;
}
.TProductFoodInfo .pfi-fila:last-child { border-bottom: 0; }

.TProductFoodInfo .pfi-fila > .pfi-ico {
    flex: 0 0 auto; font-size: 15px; width: 15px; height: 15px;
    margin-top: 1px; color: var(--pfi-ico);
}
.TProductFoodInfo .pfi-col { flex: 1; min-width: 0; }

/* El <details> nativo: se abre con teclado (Intro/Espacio) y lo anuncia el
   lector de pantalla sin una línea de JS. WCAG 2.1 AA gratis. */
.TProductFoodInfo details { margin: 0; }
.TProductFoodInfo summary {
    display: flex; align-items: flex-start; gap: 8px;
    list-style: none; cursor: pointer;
    border-radius: 3px;
}
.TProductFoodInfo summary::-webkit-details-marker { display: none; }
/* El foco lo pinta la regla común `:focus-visible` (Tjquery/css/index.css). */
.TProductFoodInfo summary:hover .pfi-label { color: var(--pfi-ink); }

.TProductFoodInfo.TProductFoodInfo span.pfi-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.TProductFoodInfo.TProductFoodInfo span.pfi-label {
    font: 500 11px/1.35 'Inter', sans-serif; color: var(--pfi-muted);
}
.TProductFoodInfo.TProductFoodInfo span.pfi-valor {
    font: 600 12.5px/1.4 'Inter', sans-serif; color: var(--pfi-ink);
}
.TProductFoodInfo .pfi-valor em { font: 400 12px/1.4 'Inter', sans-serif; font-style: normal; color: var(--pfi-text); }

.TProductFoodInfo .pfi-chev {
    flex: 0 0 auto; font-size: 14px; width: 14px; height: 14px;
    margin-top: 8px; color: var(--pfi-muted);
    transition: transform .15s ease;
}
.TProductFoodInfo details[open] > summary .pfi-chev { transform: rotate(180deg); }
/* Plegado, el dato va en UNA línea con elipsis; desplegado se ve entero en el cuerpo. */
.TProductFoodInfo.TProductFoodInfo details:not([open]) span.pfi-valor { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.TProductFoodInfo .pfi-cuerpo {
    margin: 6px 0 2px;
    padding: 8px 10px;
    background: var(--pfi-soft);
    border-radius: 4px;
}
.TProductFoodInfo .pfi-cuerpo p {
    margin: 0 0 5px; font: 400 12px/1.5 'Inter', sans-serif; color: var(--pfi-text);
}
.TProductFoodInfo .pfi-cuerpo p:last-child { margin-bottom: 0; }
.TProductFoodInfo .pfi-cuerpo b { font: 600 12px/1.5 'Inter', sans-serif; color: var(--pfi-ink); }
.TProductFoodInfo .pfi-cuerpo small { display: block; margin-top: 4px; font: 400 11px/1.45 'Inter', sans-serif; color: var(--pfi-muted); }
.TProductFoodInfo .pfi-cuerpo a, .TProductFoodInfo .pfi-cuerpo a:visited {
    font: 500 12px 'Inter', sans-serif; color: #16491f; text-decoration: none;
    border-bottom: 1px solid rgba(22,73,31,.3);
}

/* Pares rótulo/dato dentro de un desplegable (certificado, nutrición). */
.TProductFoodInfo .pfi-pares { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 0; }
.TProductFoodInfo .pfi-pares dt { font: 400 11.5px/1.45 'Inter', sans-serif; color: var(--pfi-muted); }
.TProductFoodInfo .pfi-pares dd { margin: 0; font: 500 12px/1.45 'Inter', sans-serif; color: var(--pfi-ink); font-variant-numeric: tabular-nums; }
.TProductFoodInfo .pfi-pares dd.pfi-sub,
.TProductFoodInfo .pfi-pares dt.pfi-sub { padding-left: 0; font-weight: 400; }
.TProductFoodInfo .pfi-pares dt.pfi-sub::before { content: '· '; }

/* ── Alérgenos: NUNCA se pliegan ───────────────────────────────────────
   El art. 21 los quiere DESTACADOS. Por eso son una fila sin <details> y
   con su propio fondo cuando contiene alguno. */
.TProductFoodInfo .pfi-fila.is-alergenos { padding: 8px 0; }
.TProductFoodInfo .pfi-aviso {
    display: flex; gap: 7px; align-items: flex-start;
    margin-top: 3px; padding: 6px 8px;
    border-radius: 4px; border: 1px solid;
}
.TProductFoodInfo .pfi-aviso > iconify-icon { flex: 0 0 auto; font-size: 14px; width: 14px; height: 14px; margin-top: 1px; }
.TProductFoodInfo.TProductFoodInfo .pfi-aviso > span { flex: 1; min-width: 0; font: 400 12px/1.45 'Inter', sans-serif; }
.TProductFoodInfo .pfi-aviso b { font: 700 12px/1.45 'Inter', sans-serif; }

.TProductFoodInfo .pfi-aviso.is-contiene { background: var(--pfi-warn-bg); border-color: var(--pfi-warn-line); }
.TProductFoodInfo .pfi-aviso.is-contiene > iconify-icon,
.TProductFoodInfo.TProductFoodInfo .pfi-aviso.is-contiene > span,
.TProductFoodInfo .pfi-aviso.is-contiene b { color: var(--pfi-warn-ink); }

.TProductFoodInfo .pfi-aviso.is-ninguno { background: var(--pfi-ok-bg); border-color: var(--pfi-ok-line); }
.TProductFoodInfo .pfi-aviso.is-ninguno > iconify-icon { color: var(--pfi-ico); }
.TProductFoodInfo.TProductFoodInfo .pfi-aviso.is-ninguno > span,
.TProductFoodInfo .pfi-aviso.is-ninguno b { color: var(--pfi-ink); }

/* ── Distintivo del certificado, junto al dato ─────────────────────── */
.TProductFoodInfo.TProductFoodInfo span.pfi-chip {
    display: inline-flex; align-items: center; gap: 3px;
    margin-left: 6px; padding: 1px 6px;
    border-radius: 999px; background: var(--pfi-ok-bg); border: 1px solid var(--pfi-ok-line);
    font: 600 10.5px/1.5 'Inter', sans-serif; color: #1c5a27; vertical-align: 1px;
}
.TProductFoodInfo .pfi-chip iconify-icon { font-size: 11px; width: 11px; height: 11px; color: #1c5a27; }

/* ── Pie del bloque ────────────────────────────────────────────────── */
.TProductFoodInfo .pfi-pie {
    display: flex; gap: 8px; align-items: flex-start;
    padding: 8px 12px 9px; border-top: 1px solid var(--pfi-line-soft);
    background: var(--pfi-soft); border-radius: 0 0 5px 5px;
}
.TProductFoodInfo .pfi-pie > iconify-icon { flex: 0 0 auto; font-size: 13px; width: 13px; height: 13px; margin-top: 1px; color: var(--pfi-muted); }
.TProductFoodInfo.TProductFoodInfo .pfi-pie > span { flex: 1; min-width: 0; font: 400 11px/1.45 'Inter', sans-serif; color: var(--pfi-muted); }

/* ── Alérgenos sin declarar: solo puede verse si alguien activó a mano un
   producto incompleto; lo normal es que salga el bloqueo de abajo. ── */
.TProductFoodInfo .pfi-aviso.is-sin-declarar { background: #f3f4f3; border-color: var(--pfi-line); }
.TProductFoodInfo .pfi-aviso.is-sin-declarar > iconify-icon { color: var(--pfi-muted); }
.TProductFoodInfo.TProductFoodInfo .pfi-aviso.is-sin-declarar > span,
.TProductFoodInfo.TProductFoodInfo .pfi-aviso.is-sin-declarar b { color: var(--pfi-ink); }

/* ══════════════════════════════════════════════════════════════════════
   NO DISPONIBLE PARA LA VENTA — falta un dato obligatorio
   ══════════════════════════════════════════════════════════════════════ */
.TProductFoodInfo.is-blocked { border: 0; background: transparent; margin: 12px 0; }
.TProductFoodInfo .pfi-bloqueo {
    display: flex; gap: 8px; align-items: flex-start;
    padding: 10px 12px; border-radius: 5px;
    background: #f3f4f3; border: 1px solid var(--pfi-line);
}
.TProductFoodInfo .pfi-bloqueo > iconify-icon { flex: 0 0 auto; font-size: 16px; width: 16px; height: 16px; margin-top: 1px; color: var(--pfi-muted); }
.TProductFoodInfo .pfi-bloqueo-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.TProductFoodInfo .pfi-bloqueo-txt b { font: 700 13px/1.35 'Inter', sans-serif; color: var(--pfi-ink); }
.TProductFoodInfo.TProductFoodInfo .pfi-bloqueo-txt span { font: 400 12px/1.45 'Inter', sans-serif; color: var(--pfi-text); }

/* ══════════════════════════════════════════════════════════════════════
   SEGUNDA ENTREGA (15/09/2026): nutrición, ingredientes y advertencias.
   Mismos tokens; ningún color nuevo.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Información nutricional: una <table> con <caption> y <th scope=row> ──
   Las subfilas («de las cuales saturadas») van sangradas en su celda. */
.TProductFoodInfo table.pfi-nutri { width: 100%; border-collapse: collapse; margin: 0; }
.TProductFoodInfo table.pfi-nutri caption {
    caption-side: top; text-align: left; padding: 0 0 4px;
    font: 600 11px/1.4 'Inter', sans-serif; color: var(--pfi-muted);
}
.TProductFoodInfo table.pfi-nutri th,
.TProductFoodInfo table.pfi-nutri td {
    padding: 3px 0; border-bottom: 1px solid var(--pfi-line-soft);
    font: 400 12px/1.4 'Inter', sans-serif; color: var(--pfi-text); text-align: left; background: transparent;
}
.TProductFoodInfo table.pfi-nutri td {
    text-align: right; font-weight: 600; color: var(--pfi-ink);
    font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 10px;
}
.TProductFoodInfo table.pfi-nutri tr:last-child th,
.TProductFoodInfo table.pfi-nutri tr:last-child td { border-bottom: 0; }
.TProductFoodInfo table.pfi-nutri tr.pfi-sub th { padding-left: 12px; font-size: 11.5px; }
.TProductFoodInfo table.pfi-nutri tr.pfi-sub td { font-weight: 400; }
.TProductFoodInfo .pfi-cuerpo table.pfi-nutri + small { margin-top: 6px; }

/* ── Ingredientes: la lista, con el alérgeno en negrita (art. 21) ────── */
.TProductFoodInfo .pfi-cuerpo p.pfi-ingr   { font: 400 12.5px/1.55 'Inter', sans-serif; color: var(--pfi-ink); }
.TProductFoodInfo .pfi-cuerpo p.pfi-ingr b { font: 800 12.5px/1.55 'Inter', sans-serif; color: var(--pfi-ink); }

/* ── Advertencias: el aviso ámbar de los alérgenos ─────────────────── */
.TProductFoodInfo .pfi-fila.is-advertencia { padding: 8px 0; }
.TProductFoodInfo .pfi-fila.is-advertencia > .pfi-ico { color: var(--pfi-warn-ink); }
.TProductFoodInfo .pfi-aviso.is-advertencia { background: var(--pfi-warn-bg); border-color: var(--pfi-warn-line); }
.TProductFoodInfo.TProductFoodInfo .pfi-aviso.is-advertencia > span,
.TProductFoodInfo .pfi-aviso.is-advertencia b { color: var(--pfi-warn-ink); }



/* ══════════════════════════════════════════════════════════════════════
   TContentReportForm — «Denunciar contenido»

   Esta hoja VIAJA CON TODA PÁGINA (pageComponents), y por eso el botón se
   define aquí: lo ponen la ficha de producto, el perfil del vendedor y cada
   valoración, y así los tres se ven igual sin que ninguno lo redefina.

   ── DISCRETO, PERO ACCESIBLE ─────────────────────────────────────────
   Es una opción que casi nadie usa y que no puede competir con «Añadir a la
   cesta»: texto pequeño, sin fondo ni borde. Pero el gris cumple AA
   (#556259 sobre blanco, 6,3:1) y el foco se ve.

   ── LA CLASE DOBLADA ─────────────────────────────────────────────────
   `.TComponentES6 button` impone display:flex y 25px de alto a todo botón
   dentro de un componente, y la hoja de la ficha arrastra reglas globales
   sobre `button`: con `button.crf-boton.crf-boton` se gana sin depender del
   orden de carga.

   Candidato a la hoja común del área pública cuando se extraiga.
   ══════════════════════════════════════════════════════════════════════ */

button.crf-boton.crf-boton{
    display: inline-flex; align-items: center; gap: 5px;
    height: auto; min-height: 0; width: auto;
    margin: 0; padding: 4px 2px;
    background: none; border: 0; border-radius: 4px; box-shadow: none;
    font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1.3;
    color: #556259; cursor: pointer;
    text-decoration: none;
}
button.crf-boton.crf-boton:hover{ color: #9b1c14; text-decoration: underline; }
button.crf-boton.crf-boton:focus-visible{ outline: 2px solid #04713a; outline-offset: 2px; }
button.crf-boton.crf-boton iconify-icon{ font-size: 13px; flex: 0 0 auto; }

/* La fila que lo coloca al final de un bloque, alineado a la derecha. */
.crf-fila{ display: flex; justify-content: flex-end; margin-top: 10px; }

/* La variante de la página /denunciar-contenido: aquí SÍ es la acción principal. */
button.crf-boton.crf-boton--principal{
    padding: 10px 18px; border-radius: 8px;
    background: #04713a; color: #fff; font-size: 14px;
}
button.crf-boton.crf-boton--principal:hover{ background: #005c2d; color: #fff; text-decoration: none; }
button.crf-boton.crf-boton--principal iconify-icon{ font-size: 16px; }

/* ── LA PÁGINA ───────────────────────────────────────────────────────── */

.crf [hidden]{ display: none !important; }

.crf .crf-pagina{
    max-width: 880px; margin: 34px auto; padding: 0 16px;
    color: #16211a; font-size: 14px;
}

.crf .crf-cab{ display: flex; gap: 14px; align-items: flex-start; margin-bottom: 26px; }
.crf .crf-cab-ico{
    flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: #eef6ee; color: #04713a;
}
.crf .crf-cab-ico iconify-icon{ font-size: 24px; }
.crf .crf-cab-txt{ flex: 1; min-width: 0; }
.crf .crf-cab-txt h1{ margin: 0 0 6px; font-size: 24px; line-height: 1.25; }
.crf .crf-cab-txt p{ margin: 0; color: #4a564e; line-height: 1.5; font-size: 14px; }

.crf .crf-pasos{ display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.crf .crf-paso{
    display: flex; gap: 10px; align-items: flex-start;
    padding: 14px; border: 1px solid #e3e9e4; border-radius: 12px; background: #fff;
}
.crf .crf-paso-ico{ flex: 0 0 auto; color: #04713a; }
.crf .crf-paso-ico iconify-icon{ font-size: 20px; }
.crf .crf-paso > div{ flex: 1; min-width: 0; }
.crf .crf-paso b{ display: block; margin-bottom: 4px; font-size: 14px; }
.crf .crf-paso small{ display: block; color: #4a564e; font-size: 13px; line-height: 1.45; }

.crf .crf-accion{ display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 26px; }
.crf .crf-accion small{ color: #4a564e; font-size: 12px; }
.crf .crf-accion a{ color: #04713a; }

/* ── EL FORMULARIO ──────────────────────────────────────────────────────
   `rows` no pinta nada: una regla global le fija 22px a todo textarea y la de
   los controles un min-height de 60px. La altura se pide por clase. */
.crf-explicacion textarea,
textarea.crf-explicacion{ min-height: 120px !important; height: 120px !important; }

p.crf-nota{
    margin: 4px 0 0; padding: 9px 11px; border-radius: 8px;
    background: #f3f6f4; color: #3f4a43; font-size: 12.5px; line-height: 1.45;
}

/* ── EL ACUSE ───────────────────────────────────────────────────────── */

.crf-acuse{ max-width: 520px; padding: 4px 2px; color: #16211a; font-size: 14px; }
.crf-acuse .crf-acuse-fila{ display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; }
.crf-acuse .crf-acuse-ico{ flex: 0 0 auto; color: #04713a; }
.crf-acuse .crf-acuse-ico iconify-icon{ font-size: 26px; }
.crf-acuse .crf-acuse-txt{ flex: 1; min-width: 0; }
.crf-acuse .crf-acuse-txt b{ display: block; font-size: 16px; margin-bottom: 3px; }
.crf-acuse .crf-acuse-txt small{ display: block; font-size: 13px; color: #4a564e; }
.crf-acuse p{ margin: 0 0 10px; line-height: 1.5; font-size: 14px; }
.crf-acuse .crf-acuse-pie{ display: flex; justify-content: flex-end; margin-top: 14px; }