/* 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 */

.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;
}

/*
 * ══ TRES COLUMNAS: QUÉ SE VE · QUÉ ES · QUÉ PUEDES HACER ═════════════
 *
 * Eran dos --la foto y la caja de compra-- con `space-between`, o sea con TODO
 * el sobrante metido en medio: con la tarjeta de la foto ajustada a lo que mide
 * la imagen, en un monitor quedaban 500 px de nada entre las dos mientras la
 * descripción esperaba turno debajo del pliegue.
 *
 * Ahora la de en medio se lleva ese hueco y la ficha se lee como la del lote del
 * campo (`TAuctionProduct`), que ya iba así: la foto a la izquierda, lo que el
 * vendedor cuenta del producto en el centro y la compra a la derecha.
 *
 * `flex-start` y `gap` en vez de `space-between`: con tres hijos, repartir el
 * sobrante entre ellos abre dos zanjas en vez de una. Aquí el sobrante se lo
 * queda la columna del medio, que es texto y siempre lo agradece.
 */
.TArticleProfile  .main_container{
    display:flex;
    min-height: 500px;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 24px;
}

/*
 * LA COLUMNA DE EN MEDIO, en su tarjeta blanca.
 *
 * El mismo aspecto que la banda de abajo (`.ap-secciones`) porque es lo mismo:
 * lo que el vendedor escribe de su producto. `min-width: 0` porque es el hijo
 * flexible y sin eso una tabla o una palabra larga de la descripción le impiden
 * encogerse y empujan la caja de compra fuera de la pantalla.
 */
.TArticleProfile .ap-col-centro{
    flex: 1 1 340px;
    min-width: 0;

    padding: 22px 26px 26px;
    background: #fff;
    border: 1px solid #e4eae4;
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(20, 40, 25, .06);
}

.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;

}



/*
 * ══ LAS PASTILLAS: DOS ENCIMA DE LA FOTO Y TODAS DEBAJO ═══════════════
 *
 * En TODAS las tallas de pantalla (27/09/2026). Esto nació solo para el
 * teléfono y la tableta --donde nueve cupones tapaban la caja de aguacates
 * entera-- pero el problema no era del ancho: era que la foto del producto es
 * lo que se ha venido a ver, y una rejilla de pastillas encima la esconde
 * igual en un monitor. En escritorio simplemente tardaba más en molestar.
 *
 * Así que la esquina enseña DOS y la lista completa vive debajo de las
 * miniaturas, donde hay sitio y donde no tapa nada.
 */
/*
 * EL ORDEN LO DECIDE LA HOJA, NO EL DOM, Y AQUÍ HACE FALTA.
 *
 * El bloque se escribe en el PHP dentro de `#imageView`, pero la galería
 * (`.Component`) **la añade el visor por JavaScript al montar**, así que
 * termina DETRÁS de lo que hubiera escrito el servidor: el bloque de pastillas
 * quedaba entre la esquina y la foto, o sea ENCIMA de la imagen, que es justo
 * lo que se quería evitar. Medido: el bloque en y=97 y la foto en y=221.
 *
 * Con `#imageView` en columna y un `order` alto, el bloque es el último
 * pase lo que pase --lo inserte el JS antes, después o en medio--. Es lo único
 * que no hay que volver a comprobar el día que cambie el visor.
 */
/*
 * ══ Y ES UNA TARJETA BLANCA: LA FOTO, LAS MINIATURAS Y LOS CUPONES ═══
 *
 * Los tres son la misma cosa --las imágenes del producto y lo que se descuenta
 * al comprarlo-- y estaban sueltos sobre el gris de la página: la foto con su
 * marco, la tira de miniaturas al aire y las pastillas flotando debajo, sin
 * nada que dijera dónde empieza y dónde acaba el bloque. Enfrente, la columna
 * de compra sí es una tarjeta (`.box-info`), así que la ficha se leía
 * descompensada.
 *
 * El aspecto es el que ya tiene esta ficha --blanco, `1px solid #bbb` y radio
 * de 5-- y no uno nuevo: es el de `.main_area` y `.box-info`, y por eso la foto
 * pierde aquí dentro su marco propio, que si no quedaría un recuadro dentro de
 * otro separados por el relleno.
 *
 * `--ap-caja` es ese relleno, y existe para que la esquina de las pastillas
 * --que se coloca en absoluto-- caiga sobre la FOTO y no sobre el margen de la
 * tarjeta. Un número a ojo ahí se queda viejo en cuanto cambia el relleno.
 *
 * `box-sizing` acotado a este bloque porque el sitio NO lo declara global: con
 * `content-box`, el relleno se sumaba al ancho que reparte el flex de
 * `.main_container` y la tarjeta se salía por la derecha, por debajo de la caja
 * de compra.
 */
.TArticleProfile #imageView,
.TArticleProfile #imageView *{ box-sizing: border-box; }

.TArticleProfile #imageView{
    --ap-caja: 14px;

    /* LO QUE ESTABA EN EL `style` DE LA PLANTILLA. `sticky` para que la foto
       acompañe mientras se lee la descripción, y una BASE de 620: con `flex: 1`
       --lo que había-- la columna de en medio le quitaba ancho y la foto se
       quedaba en 425 px. Puede encoger si la ventana aprieta, no crecer más
       allá del tope de abajo. */
    position: sticky;
    top: 85px;
    flex: 0 1 620px;

    display: flex;
    flex-direction: column;

    background: #fff;
    border: 1px solid #bbb;
    border-radius: 5px;
    padding: var(--ap-caja);

    /*
     * ── Y LA TARJETA MIDE LO QUE LA FOTO PUEDE MEDIR ────────────────
     *
     * El visor era `flex: 1`, o sea TODA la columna libre: 1.268 px en un
     * monitor. Como el alto de la foto está topado en 68vh --648 px-- una foto
     * cuadrada se dibujaba a 648 y dejaba 295 px de fondo a CADA lado, con las
     * pastillas de cupón flotando en esa franja en vez de sobre la imagen. Es
     * lo que se veía «mal encajado con el contenedor y sus márgenes».
     *
     * Así que el ancho sale del MISMO tope que el alto: lo que cabe de foto más
     * el relleno de la tarjeta y sus bordes. Con las fotos cuadradas del
     * catálogo, caja y foto coinciden exactamente y no sobra un píxel; una
     * apaisada llena el ancho y sobra alto, que es lo correcto.
     */
    max-width: calc(68vh + var(--ap-caja) * 2 + 2px);
}

/*
 * ── SIN FOTOGRAFÍA: EL HUECO, CON SU ICONO Y EN ESPAÑOL ──────────────
 *
 * Sustituye a `/images/no_image2.jpg`, un mapa de bits con «NO IMAGE AVAILABLE»
 * dentro que además el carrusel trataba como una foto más del producto.
 *
 * CUADRADO, y es a propósito: ocupa lo mismo que ocuparía la foto, así que la
 * tarjeta mide igual con imágenes y sin ellas y la ficha no se recoloca al
 * cambiar de producto. El tope de alto es el mismo `68vh` de la foto.
 *
 * Los colores son los de la ficha --el gris de sus bordes y el verde tenue de
 * sus textos--, no un gris nuevo: esto es un estado vacío, no un aviso.
 */
.TArticleProfile .ap-sinfoto{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;

    aspect-ratio: 1 / 1;
    max-height: 68vh;

    background: #f6f8f6;
    border: 1px dashed #d6dcd6;
    border-radius: 8px;
    text-align: center;
    padding: 20px;
}

.TArticleProfile .ap-sinfoto iconify-icon{
    font-size: 52px;
    color: #b6c2b8;
}

.TArticleProfile .ap-sinfoto b{
    font-size: 14px;
    font-weight: 700;
    color: #46514a;
}

.TArticleProfile .ap-sinfoto small{
    font-size: 12px;

    /* EL MISMO GRIS QUE EL CUERPO DE LAS SECCIONES, y no uno más claro: con
       `#7d8a81` sobre este fondo el contraste se quedaba en 3,3:1 y hace falta
       4,5:1 (WCAG 2.1 AA, exigible desde junio de 2025). Medido: 5,1:1. */
    color: #5b6b60;

    /* Que no se parta en tiras dentro de una tarjeta estrecha. */
    max-width: 24em;
}

/* Dentro de la tarjeta, la foto ya no lleva marco: lo pone la tarjeta. Y el
   hueco hasta las miniaturas lo da este margen y no el `20px` del visor, que
   estaba pensado para cuando la foto iba suelta en la página. */
.TArticleProfile #imageView .TCarousel .main_area{
    border: 0;
    border-radius: 0;
    margin-bottom: 12px;
}

/*
 * ══ LA FOTO, A TODO EL ANCHO, EN TODAS LAS TALLAS ════════════════════
 *
 * El visor traía un alto fijo, y con `object-fit: contain` una foto más
 * apaisada que la caja se quedaba con barras blancas a los lados: en la ficha
 * de los aguacates, casi un tercio del visor era fondo. Medido en escritorio:
 * caja de 780 px, imagen de 778 px de ancho declarado y la foto de verdad
 * ocupando 600 y pico, centrada.
 *
 * Con el alto en `auto` el alto lo pone la PROPORCIÓN de la foto, así que no
 * hay nada que rellenar: la imagen llega a los dos bordes.
 *
 * `!important` porque el alto lo escribe el visor en el `style` del elemento
 * al montar, y un estilo en línea gana a cualquier hoja.
 *
 * ── EL TOPE VA EN LA FOTO, NO EN LA CAJA (27/09/2026) ────────────────
 *
 * Estaba al revés --`max-height: 68vh` en `.TCarousel` y `height: auto` en la
 * imagen-- y eso es pedir dos cosas incompatibles: el contenido medía lo que la
 * foto (1.050 px con 1.266 de ancho) y la caja se quedaba en 648. Como el
 * carrusel NO recorta (`overflow: visible`, y tiene que serlo: el aumento y las
 * flechas se salen a propósito), **la foto se desbordaba 400 px por debajo de su
 * contenedor**: tapaba las miniaturas y caía encima de las pastillas de cupón,
 * que es como se vio en pantalla.
 *
 * Con el tope en la IMAGEN, la caja mide siempre lo que se ve: `height: auto`
 * hace que el alto salga de la proporción, `max-height` lo corta cuando la foto
 * es muy alta --para que el precio no se vaya de la pantalla y el `sticky` del
 * visor siga teniendo sentido-- y el `object-fit: contain` que ya trae
 * `TCarousel.css` evita que ese corte la deforme.
 */
.TArticleProfile #imageView .TCarousel{
    width: 100% !important;
    height: auto !important;
}

/* La caja de la foto no impone alto: lo trae la imagen. `max-height: 100%` y
   `flex: 1` venían de cuando el carrusel tenía un alto fijo que repartir. */
.TArticleProfile #imageView .TCarousel .main_area{
    max-height: none;
    flex: 0 0 auto;
}

/*
 * SOLO LAS FOTOS DEL VISOR, Y AQUÍ ESTÁ LA MITAD DEL FALLO.
 *
 * Esto era `.TCarousel img`, o sea TODAS: también las MINIATURAS, que
 * `TCarousel.css` deja en 70×70 y que con `height: auto` pasaban a medir 84×72
 * y se salían de su tira de 41 px. Una regla de la foto grande no puede alcanzar
 * a la tira de abajo.
 */
.TArticleProfile #imageView .TCarousel .main_area img{
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 68vh;
}

.TArticleProfile .pt-pastillas-bajo-fotos{
    order: 99;

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

    margin: 12px 0 4px;
}

/* Aquí no hay foto detrás, así que las pastillas no se recortan por ancho: se
   reparten en las líneas que hagan falta. */
.TArticleProfile .pt-pastillas-bajo-fotos .offer_container{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-width: 100%;
}

/*
 * ── YA NO SE RECORTA NADA, PORQUE NO SE REPITE NADA (28/09/2026) ─────
 *
 * Aquí había tres reglas para dejar DOS pastillas encima de la foto: los dos
 * primeros cupones, las etiquetas fuera si había cupones, y las dos primeras
 * etiquetas si no. Eran el apaño de echar los dos bloques en los dos sitios, y
 * lo que se veía era **dos códigos sobre la foto y otros nueve debajo**, los
 * mismos dos repetidos.
 *
 * Con cada cosa en su sitio --las etiquetas arriba, los códigos abajo-- no hay
 * nada que recortar ni que esconder. Ver la regla en `CLAUDE.md` y el porqué en
 * la plantilla.
 */

/* LA ESQUINA DE LA FOTO: ARRIBA A LA IZQUIERDA Y SOLO LAS ETIQUETAS.
   «Novedad», «Rebajado», «Reacondicionado»… lo que califica la mercancía, que
   es lo que califica la FOTO. Los códigos de descuento no entran aquí: van
   debajo de las imágenes, enteros y pulsables (regla del proyecto). */
.TArticleProfile .pt-esquina-foto{

    position: absolute;

    /* SOBRE LA FOTO, NO SOBRE EL MARGEN DE LA TARJETA. `#imageView` es el que
       posiciona --es `sticky`-- así que el relleno de la tarjeta hay que
       sumarlo, o las pastillas se pintan en la esquina blanca de fuera. */
    top: calc(var(--ap-caja, 0px) + 8px);
    left: calc(var(--ap-caja, 0px) + 10px);
    z-index: 10;

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

    /* El ancho del visor, menos el relleno de la tarjeta y el margen del otro
       lado: una etiqueta larga baja de línea en vez de cruzar la foto. */
    max-width: calc(100% - var(--ap-caja, 0px) * 2 - 20px);
}

/* Varias etiquetas: en fila y bajando de línea si hace falta. Son una palabra
   cada una y son pocas, así que no hay que recortarlas. */
.TArticleProfile .pt-esquina-foto .pt-etiquetas-articulo{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-width: 100%;
}

/* El cupon YA NO SE COLOCA: vive debajo de las imágenes, en flujo. La regla se
   queda porque el marcado viene de `remarkableOffer()` y el `absolute` que traía
   lo volvería a montar sobre la foto. */
.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; }

/* ══════════════════════════════════════════════════════════════════════
   PANTALLAS MEDIANAS: DOS COLUMNAS ARRIBA Y EL TEXTO DEBAJO — 28/09/2026
   ══════════════════════════════════════════════════════════════════════

   Las tres columnas piden 1.488 px de contenido: la foto (620), el texto (420
   para que no salga en tiras) y la compra (400 fijos), más los dos huecos. Por
   debajo de eso el reparto encoge lo que puede encoger --la foto, que es la de
   base más grande-- y acababa dejando la imagen del producto en 430 px y la
   descripción en columna de seis palabras: las dos peor que antes.

   Así que en ese tramo la de en medio BAJA y ocupa el ancho entero, con la foto
   y la compra arriba. Es el mismo contenido, en dos filas en vez de tres
   columnas, y no hay nada que encoger. */
@media (max-width: 1250px){

    .TArticleProfile .main_container{ flex-wrap: wrap; }

    /* `order` alto para que baje ella --la caja de compra lleva el de por
       defecto-- y `100%` para que al bajar ocupe la fila entera. */
    .TArticleProfile .ap-col-centro{
        order: 4;
        flex: 1 1 100%;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   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 Documentacion/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. */
/* EL CORTE ES 860 Y NO 760 (27/09/2026). El resto del sitio --cabecera, carril
   y tienda-- se subió a 860 en su día «para que corten por el mismo sitio», y
   esta ficha se quedó en 760: una tableta de 800 px caía en la versión de
   escritorio, con el visor a media columna y la caja de compra al lado. Que es
   justo donde se veía mal. */
@media (max-width: 860px){

    .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;
    }

    /*
     * `relative` Y NO `static`, Y ESTE ES EL FALLO QUE SOLO SE VE EN UN MÓVIL.
     *
     * Aquí ponía `position: static !important` --para quitarle el `sticky`, que
     * en una columna no pinta nada-- y con eso la tarjeta dejaba de ser el
     * contenedor de posicionamiento. `.pt-esquina-foto` es `absolute`, así que
     * se colgaba del siguiente ancestro posicionado y las dos pastillas de cupón
     * se pintaban ARRIBA DEL TODO, encima de la ruta: medido en un Pixel 8
     * emulado (412×915), tapando «Aguacate Hass · Palé 250 kg».
     *
     * `relative` quita el `sticky` igual y conserva el contenedor.
     */
    .TArticleProfile #imageView{
        position: relative !important;
        top: auto !important;
        flex: none !important;
        width: 100%;
        max-width: none;
    }

    /* EN COLUMNA, LA COMPRA VA ANTES QUE EL TEXTO. En el orden del marcado la
       columna de en medio está entre la foto y la caja --que es el orden de
       escritorio-- y apilada dejaría el precio y el botón detrás de toda la
       descripción: en un teléfono, a dos pantallas de scroll de lo que se ha
       venido a hacer. */
    .TArticleProfile .ap-col-centro{
        order: 3;
        padding: 18px 16px 22px;
        border-radius: 10px;
    }

    /* LAS PASTILLAS NO SE DECIDEN AQUÍ. Estaban en este bloque --el recorte a
       dos y la lista de debajo-- porque nacieron para el teléfono; desde el
       27/09/2026 valen para todas las tallas y viven arriba, fuera de toda
       media query. */

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



/* ── LOS ATRIBUTOS OPCIONALES, EN TARJETAS (09/10/2026) ─────────────────
   Una tarjeta por valor: de radio si se elige uno, de casilla si varios (lo
   dice la ficha del atributo). El control de verdad sigue ahí --oculto pero
   enfocable--, así que el teclado y el lector de pantalla funcionan como con
   un radio cualquiera. Plantilla: `TBuyerOptions.php`; la usan la caja de compra y la cesta. */
.ao-grupo{ border: 0; margin: 0; padding: 0; min-width: 0; }
.ao-ayuda{ padding: 0; margin: 0 0 6px; font-size: 11.5px; color: var(--tinta-suave, #64748b); }
.ao-tarjetas{ display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }

.ao-tarjeta{
    position: relative; display: flex; align-items: flex-start; gap: 9px;
    padding: 10px 12px; margin: 0;
    border: 1px solid var(--borde, #e2e8f0); border-radius: 10px;
    background: #fff; cursor: pointer;
    transition: border-color .15s, background-color .15s;
}
.ao-tarjeta:hover{ border-color: #cbd5e1; }
.ao-tarjeta input{ position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }

/* La marca: un círculo en las de radio, un cuadrado en las de casilla. */
.ao-marca{
    flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px;
    border: 2px solid #cbd5e1; border-radius: 50%; background: #fff;
}
.ao-checkbox .ao-marca{ border-radius: 4px; }

.ao-muestra{ flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; border: 1px solid rgba(0,0,0,.12); }

.ao-texto{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.ao-texto b{ font-size: 13px; color: var(--tinta, #1e293b); }
.ao-precio{ font-size: 12px; font-weight: 600; color: var(--btn_color, #16a34a); }
.ao-precio.ao-incluido{ color: var(--tinta-suave, #64748b); font-weight: 500; }

/* ELEGIDA: borde y fondo del color de acción, y la marca rellena. */
.ao-tarjeta:has(input:checked){
    border-color: var(--btn_color, #16a34a);
    background: color-mix(in srgb, var(--btn_color, #16a34a) 7%, #fff);
}
.ao-tarjeta:has(input:checked) .ao-marca{
    border-color: var(--btn_color, #16a34a);
    background: radial-gradient(circle, var(--btn_color, #16a34a) 0 4px, #fff 4.5px);
}
.ao-checkbox .ao-tarjeta:has(input:checked) .ao-marca{
    background: var(--btn_color, #16a34a);
    box-shadow: inset 0 0 0 2px #fff;
}

/* FOCO VISIBLE (WCAG 2.4.7): el control está oculto, así que el anillo va en la tarjeta. */
.ao-tarjeta:has(input:focus-visible){ outline: 2px solid var(--btn_color, #16a34a); outline-offset: 2px; }

/* EN PEQUEÑO, dentro de una línea de la cesta: las mismas tarjetas, más
   apretadas y sin la ayuda «Elige uno». */
.ao-compacto .ao-tarjetas{ grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; }
.ao-compacto .ao-tarjeta{ padding: 6px 9px; gap: 7px; border-radius: 8px; }
.ao-compacto .ao-marca{ width: 14px; height: 14px; }
.ao-compacto .ao-texto b{ font-size: 12px; }
.ao-compacto .ao-precio{ font-size: 11px; }




/*  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 Documentacion/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); }
/* EL DATO SE VE ENTERO, SIEMPRE, AUNQUE OCUPE DOS LÍNEAS.
   Iba plegado en una línea con `nowrap` + elipsis, y en la columna de compra
   (400 px) eso se comía la mitad de la conservación y la fecha de entrega
   --«Entrega a partir del 29/09/2026», que es información obligatoria antes de
   pagar (Rgto. 1169/2011, art. 14)--. Una elipsis avisa de que falta texto,
   pero no deja leerlo: el `title` no existe en táctil ni con teclado, y el
   `extra` no siempre se repite en el cuerpo del desplegable. */
.TProductFoodInfo.TProductFoodInfo span.pfi-valor { overflow-wrap: break-word; }

.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); }



/* ═══════════════════════════════════════════════════════════════════════════
 *  LA VISTA PREVIA DE UN VENDEDOR — autocontenida
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * ── LOS TOKENS VAN EN LA TARJETA, NO EN QUIEN LA CONTIENE ───────────
 *
 * Los mismos valores que `TSellerCard.css`, declarados sobre `.svp` para que
 * viajen con ella. Es la lección de aquella tarjeta: los suyos colgaban de
 * `.sd` --la raíz del directorio-- y pintada en favoritos, donde no hay `.sd`
 * por encima, `var(--sd-borde)` quedaba sin valor, el navegador tiraba la
 * propiedad entera y salía SIN BORDE. Aquí además se pinta dentro de un
 * overlay, que no tiene NADA de la pantalla por encima.
 *
 * Candidato a la hoja común del área de cliente el día que se extraiga: la
 * paleta es byte a byte la de `TSellerCard`.
 *
 * ── Y LOS CORTES MIRAN LA TARJETA, NO LA VENTANA ────────────────────
 *
 * `@container`, no `@media`. La misma tarjeta se pinta en un overlay de 480 px
 * sobre un monitor de 2.560 y en un móvil de 348: el ancho de la ventana no
 * dice nada de lo que le toca a ella. Y en un listado irá dentro de una
 * columna, que es un tercer ancho más.
 *
 * ── NO SE ESCOPA BAJO UNA PANTALLA ──────────────────────────────────
 * Es global: el prefijo `svp-` es lo que la acota.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── `border-box`, Y NO ES UNA COSTUMBRE: ES UN ARREGLO ──────────────
 *
 * Este sitio NO declara `box-sizing: border-box` global, así que un
 * `width: 100%` con relleno mide el 100 % MÁS el relleno. Medido: «Ver perfil
 * completo» pedía 386 px de hueco y ocupaba 414 -- se salía 28 px por la
 * derecha, justo por encima del borde redondeado de la tarjeta.
 *
 * Y es el fallo que peor se ve venir: la maqueta lo tenía puesto (`* {}` en su
 * cabecera) y la tarjeta salía perfecta; el componente, sin él, salía rota sin
 * que hubiera cambiado una sola medida.
 *
 * Acotado a la tarjeta --`.svp *`-- y nunca al documento: un `*` global desde
 * la hoja de un componente cambia pantallas que nadie ha mirado. */
.svp, .svp *, .svp *::before, .svp *::after { box-sizing: border-box; }

/* ── El hueco mientras llega ─────────────────────────────────────── */
.svp-cargando,
.svp-error{
    display:flex; gap:9px; align-items:center; justify-content:center;
    padding:34px 18px; font-size:13px; color:#6b7a70;
}
.svp-cargando iconify-icon{ font-size:19px; animation:svp-gira 1s linear infinite; }
.svp-error{ color:#9a3b2f; }
.svp-error iconify-icon{ font-size:19px; }
.svp-cargando[hidden], .svp-error[hidden]{ display:none; }

@keyframes svp-gira{ to{ transform:rotate(360deg); } }


.svp{
    --svp-verde:        #04713a;
    --svp-verde-oscuro: #005c2d;
    --svp-verde-claro:  #eef6ee;
    --svp-verde-borde:  #cfe3d2;

    --svp-tinta:  #16211a;
    --svp-texto:  #46514a;
    --svp-suave:  #6b7a70;
    --svp-tenue:  #93a399;

    --svp-crema:  #f7faf6;
    --svp-borde:  #e4eae4;
    --svp-oro:    #d9a51e;

    --svp-radio:  14px;

    container-type: inline-size;

    background:#fff;
    border:1px solid var(--svp-borde);
    border-radius:var(--svp-radio);
    overflow:hidden;
}

/* ── La portada ──────────────────────────────────────────────────── */
.svp-portada{ position:relative; height:104px; background:var(--svp-verde-claro); }
.svp-portada img{ width:100%; height:100%; object-fit:cover; display:block; }
.svp-portada-vacia{ position:absolute; inset:0; display:grid; place-items:center;
                    color:var(--svp-verde); font-size:32px; opacity:.35; }

.svp--compact .svp-portada{ height:86px; }

/* ── LA HOJA BLANCA SUBE SOBRE LA PORTADA, con el radio arriba ──────
 *
 * Es lo que separa la foto del contenido sin dibujar una línea: el blanco monta
 * sobre la imagen y le tapa las dos esquinas de abajo. Y el avatar vive AQUÍ
 * --no en la portada-- porque colocado allí quedaría por debajo de esta hoja. */
.svp-hoja{
    position:relative;
    margin-top:-14px;
    background:#fff;
    border-radius:var(--svp-radio) var(--svp-radio) 0 0;
    display:flex; flex-direction:column;
}

/* ── Identidad ───────────────────────────────────────────────────── */
.svp-id{ display:flex; gap:10px; padding:0 16px; }

/* La columna del avatar: reserva su ancho y NADA MÁS. El avatar sale de ella
   hacia arriba, sobre la portada. */
.svp-id-izq{ flex:0 0 64px; position:relative; }
.svp-id-txt{ flex:1; min-width:0; padding-top:12px; }

.svp-avatar{
    position:absolute; left:0; top:-34px; width:64px; height:64px;
    border-radius:50%; border:3px solid #fff; background:var(--svp-verde-claro);
    overflow:hidden; box-shadow:0 2px 8px rgba(20,40,25,.18);
    display:grid; place-items:center;
}
.svp-avatar img{ width:100%; height:100%; object-fit:cover; }
.svp-avatar b{ font-size:26px; color:var(--svp-verde); font-weight:800; }

/* ── EL SELLO DE CUMPLIMIENTO, DEBAJO DEL AVATAR Y EN SU VERTICAL ───
 *
 * Y no en la fila de las cifras, que es donde estaba: allí compite por el
 * ancho con tres datos que crecen --«4,8 (1.284)», «1.024 productos»-- y en
 * cuanto uno se alarga, el sello se desplaza a la línea siguiente o se
 * colapsa contra el borde. Aquí tiene una columna suya que nadie le disputa,
 * y además queda donde ya está mirando quien acaba de ver la foto. */
.svp-marchamo{
    display:block; width:42px; height:auto; margin:38px auto 0;
}

.svp-id-fila{ display:flex; gap:10px 12px; align-items:center;
              justify-content:space-between; flex-wrap:wrap; }

.svp-nombre{ display:flex; align-items:center; gap:6px; min-width:0; flex:0 1 auto; }
.svp-nombre h3{ flex:0 1 auto; margin:0; font-size:17px; font-weight:800;
                color:var(--svp-verde-oscuro); line-height:1.2;
                overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.svp-check{ width:16px; height:16px; flex:0 0 auto; }

.svp-sellos{ display:flex; gap:5px; flex-wrap:wrap; }
.svp-sello{ display:inline-flex; align-items:center; gap:3px; font-size:9.5px;
            font-weight:700; padding:3.5px 7px; border-radius:999px;
            line-height:1.2; white-space:nowrap; }
.svp-sello iconify-icon{ font-size:12px; }

/* EL COLOR LO PONE EL NIVEL. Sin la clase del nivel se cae al oro, que es el
   valor que tenía antes de repartirlos: nunca se queda sin fondo. */
.svp-sello--nivel{ background:#fdf5e1; color:#8a6410; border:1px solid #f0dda6; }
.svp-sello--bronce  { background:#f8efe7; color:#8a4f1e; border-color:#e8d2bd; }
.svp-sello--plata   { background:#f2f4f6; color:#5a616a; border-color:#dfe3e8; }
.svp-sello--oro     { background:#fdf5e1; color:#8a6410; border-color:#f0dda6; }
.svp-sello--diamante{ background:#eef0fd; color:#4a53b8; border-color:#d4d8f6; }

.svp-sello--prot{ background:var(--svp-verde-claro); color:var(--svp-verde);
                  border:1px solid var(--svp-verde-borde);
                  padding:2.5px 8px 2.5px 4px; gap:4px; }
.svp-sello--prot img{ height:17px; width:auto; display:block; }

/* ── EL RESUMEN, BAJO EL NOMBRE ──────────────────────────────────── */
.svp-resumen{
    margin:6px 0 0; font-size:12.5px; line-height:1.5; color:var(--svp-texto);
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}

/* Icono en su columna y TODO el texto en la segunda. */
.svp-meta{ display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:8px; }
.svp-meta > span{ display:flex; gap:5px; align-items:center;
                  font-size:11.5px; color:var(--svp-suave); }
.svp-meta iconify-icon{ flex:0 0 auto; font-size:13px; color:var(--svp-verde); }

/* ── Las cuatro cifras (talla `full`) ────────────────────────────── */
.svp-cifras{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px;
             margin:13px 0 0; padding:13px 16px 0; border-top:1px solid var(--svp-borde); }
.svp-cifra{ text-align:center; min-width:0; }
.svp-cifra-v{ display:flex; align-items:center; justify-content:center; gap:4px; }
.svp-cifra-v iconify-icon{ flex:0 0 auto; font-size:13px; color:var(--svp-suave); }
.svp-cifra--nota .svp-cifra-v iconify-icon{ color:var(--svp-oro); }
.svp-cifra b{ font-size:15.5px; font-weight:800; color:var(--svp-tinta); line-height:1.15; }
.svp-cifra small{ display:block; font-size:10px; color:var(--svp-suave); margin-top:2px;
                  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ── Pestañas ────────────────────────────────────────────────────── */
.svp-tabs{ display:flex; gap:2px; margin-top:14px; padding:0 10px;
           border-bottom:1px solid var(--svp-borde);
           overflow-x:auto; scrollbar-width:none; }
.svp-tabs::-webkit-scrollbar{ display:none; }
.svp-tab{ appearance:none; border:0; background:transparent; cursor:pointer;
          padding:9px 9px 8px; font-size:12px; font-weight:600; color:var(--svp-suave);
          border-bottom:2px solid transparent; white-space:nowrap; font-family:inherit; }
.svp-tab:hover{ color:var(--svp-tinta); }
.svp-tab[aria-selected="true"]{ color:var(--svp-verde); border-bottom-color:var(--svp-verde); }
/* Foco visible: WCAG 2.1 AA, y el overlay se opera con teclado. */
.svp-tab:focus-visible{ outline:2px solid var(--svp-verde); outline-offset:-2px; border-radius:4px; }

.svp-panel{ padding:13px 0 14px; }
.svp-panel > [hidden]{ display:none; }

/* Carril de productos */
.svp-carril{ position:relative; }
.svp-rail{ display:flex; gap:9px; overflow-x:auto; padding:0 16px 4px;
           scroll-snap-type:x mandatory; scrollbar-width:none; }
.svp-rail::-webkit-scrollbar{ display:none; }
.svp-prod{ flex:0 0 118px; scroll-snap-align:start; text-decoration:none; color:inherit;
           border:1px solid var(--svp-borde); border-radius:11px; overflow:hidden;
           background:#fff; display:flex; flex-direction:column;
           transition:border-color .15s, box-shadow .15s; }
.svp-prod:hover{ border-color:var(--svp-verde-borde); box-shadow:0 2px 10px rgba(20,40,25,.08); }
.svp-prod-foto{ display:grid; place-items:center; height:84px;
                background:var(--svp-verde-claro); overflow:hidden; }
.svp-prod-foto img{ width:100%; height:100%; object-fit:cover; display:block; }
.svp-prod-foto iconify-icon{ font-size:22px; color:var(--svp-verde); opacity:.35; }
.svp-prod-txt{ padding:8px 9px 10px; display:flex; flex-direction:column; gap:4px; flex:1; min-height:0; }
.svp-prod-nom{ font-size:11.5px; line-height:1.3; color:var(--svp-texto);
               display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.svp-prod-precio{ display:block; margin-top:auto; font-size:12.5px; font-weight:800; color:var(--svp-verde); }
.svp-prod-precio span{ font-weight:600; color:var(--svp-suave); font-size:11px; }

.svp-flecha{ position:absolute; top:42px; right:8px; width:28px; height:28px;
             border-radius:50%; border:1px solid var(--svp-borde); background:#fff;
             color:var(--svp-tinta); display:grid; place-items:center; cursor:pointer;
             box-shadow:0 2px 8px rgba(20,40,25,.14); }
.svp-flecha:focus-visible{ outline:2px solid var(--svp-verde); outline-offset:2px; }

/* Las otras tres pestañas */
.svp-texto{ padding:0 16px; display:flex; flex-direction:column; gap:10px; }
.svp-texto p{ margin:0; font-size:13px; line-height:1.55; color:var(--svp-texto); }

.svp-pills{ display:flex; flex-wrap:wrap; gap:6px; }
.svp-pill{ font-size:11px; padding:3.5px 9px; border-radius:999px;
           background:var(--svp-crema); border:1px solid var(--svp-borde); color:var(--svp-texto); }

.svp-hitos{ display:flex; flex-direction:column; gap:12px; }
.svp-hito{ display:flex; gap:10px; }
.svp-hito iconify-icon{ flex:0 0 auto; font-size:16px; color:var(--svp-verde); margin-top:2px; }
.svp-hito div{ flex:1; min-width:0; }
.svp-hito b{ display:block; font-size:12.5px; color:var(--svp-tinta); }
.svp-hito small{ display:block; font-size:12px; color:var(--svp-suave); line-height:1.45; }

.svp-canales{ display:flex; flex-direction:column; gap:8px; }
.svp-canal{ display:flex; gap:10px; align-items:flex-start; padding:10px 11px;
            border:1px solid var(--svp-borde); border-radius:10px;
            background:var(--svp-crema); text-decoration:none; color:inherit; }
.svp-canal:hover{ border-color:var(--svp-verde-borde); }
.svp-canal iconify-icon{ flex:0 0 auto; font-size:17px; color:var(--svp-verde); margin-top:1px; }
.svp-canal div{ flex:1; min-width:0; }
.svp-canal b{ display:block; font-size:12.5px; color:var(--svp-tinta); }
.svp-canal small{ display:block; font-size:11.5px; color:var(--svp-suave); line-height:1.4; }

/* ── Pie ─────────────────────────────────────────────────────────── */
.svp-pie{ padding:2px 16px 14px; }
.svp-ver{ display:flex; align-items:center; justify-content:center; gap:7px; width:100%;
          padding:11px 14px; border-radius:9px; background:var(--svp-verde-oscuro);
          color:#fff; font-size:13.5px; font-weight:700; text-decoration:none; }
.svp-ver:hover, .svp-ver:visited{ color:#fff; }
.svp-ver:hover{ background:#00491f; }

/* ═══════════════════════════════════════════════════════════════════
   TALLA `compact` — sin pestañas y sin productos
   ═══════════════════════════════════════════════════════════════════ */
.svp--compact .svp-id-izq{ flex:0 0 58px; }
.svp--compact .svp-avatar{ width:58px; height:58px; top:-30px; }
.svp--compact .svp-avatar b{ font-size:23px; }
.svp--compact .svp-id-txt{ padding-top:9px; }
.svp--compact .svp-nombre h3{ font-size:15.5px; }
.svp--compact .svp-marchamo{ width:38px; margin-top:34px; }

.svp--compact .svp-cuerpo{ padding:0 16px; }
.svp--compact .svp-meta{ margin-top:10px; }
.svp--compact .svp-pills{ margin-top:9px; }

/* Las tres cifras EN LÍNEA --icono + dato--: aquí no se compara con nadie,
   solo se dice de un vistazo qué hay detrás. */
.svp-hechos{ display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; margin-top:11px; }
.svp-hecho{ display:flex; gap:5px; align-items:center; font-size:11.5px;
            color:var(--svp-texto); white-space:nowrap; }
.svp-hecho iconify-icon{ flex:0 0 auto; font-size:13px; color:var(--svp-suave); }
.svp-hecho b{ color:var(--svp-tinta); font-weight:700; }
.svp-hecho small{ color:var(--svp-suave); font-size:11px; }
.svp-hecho--nota iconify-icon{ color:var(--svp-oro); }

.svp-acciones{ display:grid; grid-template-columns:1fr 1fr; gap:9px; padding:14px 16px 14px; }
.svp-btn{ display:flex; align-items:center; justify-content:center; gap:6px;
          padding:10px 12px; border-radius:9px; font-size:13px; font-weight:700;
          text-decoration:none; white-space:nowrap; }
.svp-btn--linea{ background:#fff; color:var(--svp-verde); border:1.5px solid var(--svp-verde-borde); }
.svp-btn--linea:hover{ background:var(--svp-verde-claro); color:var(--svp-verde); }
.svp-btn--principal, .svp-btn--principal:visited{ background:var(--svp-verde-oscuro); color:#fff; }
.svp-btn--principal:hover{ background:#00491f; color:#fff; }

/* ═══════════════════════════════════════════════════════════════════
   CONTENEDOR, NO VENTANA
   ═══════════════════════════════════════════════════════════════════ */

/* El nombre y los sellos dejan de caber en la misma línea. */
@container (max-width: 386px){
    .svp-id-fila{ flex-direction:column; align-items:flex-start; gap:8px; }
}

@container (max-width: 366px){
    .svp-cifras{ grid-template-columns:repeat(2,1fr); gap:12px 6px; }
    .svp-prod{ flex:0 0 112px; }
    .svp-acciones{ grid-template-columns:1fr; }
}



/* ══════════════════════════════════════════════════════════════════════
   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; }



/* ═══════════════════════════════════════════════════════════════════════════
 *  RECUPERAR LA CONTRASEÑA — la ficha dentro de la ventana
 *
 *  Copia la ficha de la pantalla (`TRegisterQuick`, `.rqk-solo-form`): el
 *  logotipo a 44 px, el título de 26 px, el campo de 11 px de radio con el
 *  verde de foco y el botón verde a todo lo ancho. CANDIDATO A LA HOJA COMÚN
 *  del área pública, junto con aquella: hoy son dos copias de los mismos
 *  valores (tokens `--rq-*` allí, `--fgp-*` aquí).
 * ═══════════════════════════════════════════════════════════════════════════ */

.fgp{
    --fgp-verde:        #2d6a2f;
    --fgp-verde-vivo:   #3f8f43;
    --fgp-verde-oscuro: #14532d;
    --fgp-verde-borde:  #dbe8d6;
    --fgp-verde-caja:   #f5faf3;
    --fgp-texto: #14261a;
    --fgp-suave: #5b6b60;
    --fgp-tenue: #93a399;

    padding: 18px 28px 26px;
    color: var(--fgp-texto);
    font-size: 13px;
    line-height: 1.5;
    text-align: left;
}

.fgp .fgp-marca{ display: block; height: 44px; width: auto; margin: 0 0 22px; }

.fgp .fgp-titulo{
    margin: 0 0 5px;
    font-size: 26px; font-weight: 800;
    letter-spacing: -.5px;
    line-height: 1.2;
    color: #07090d;
}

.fgp .fgp-sub{ margin: 0 0 14px; font-size: 13px; color: var(--fgp-suave); }

/* `!important` COMO EN `.rqk-campo`: una regla global del sitio pone los
   `label` en fila con `!important`, y sin esto el rótulo y el campo salían
   uno al lado del otro y el campo a media anchura (medido: 225 de 400 px). */
.fgp .fgp-campo{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 5px;
    margin: 0 0 14px;
}

.fgp .fgp-rotulo{ align-self: stretch; font-size: 12px; font-weight: 600; }

.fgp .fgp-con-ico{ position: relative; display: block; width: 100%; }
.fgp .fgp-con-ico > iconify-icon{
    position: absolute; left: 13px; top: 50%;
    transform: translateY(-50%);
    font-size: 15px; color: var(--fgp-tenue);
    pointer-events: none;
}

.fgp .fgp-con-ico input{
    width: 100%;
    box-sizing: border-box;
    height: auto;
    padding: 12px 14px 12px 38px;
    border: 1px solid #dbe4dd;
    border-radius: 11px;
    background: #fff;
    font-size: 13px; font-family: inherit;
    color: var(--fgp-texto);
}
.fgp .fgp-con-ico input::placeholder{ color: var(--fgp-tenue); }
.fgp .fgp-con-ico input:focus{
    outline: none;
    border-color: var(--fgp-verde-vivo);
    box-shadow: 0 0 0 3px rgba(63,143,67,.12);
}

.fgp .fgp-error{ display: none; font-size: 11px; color: #b91c1c; font-style: normal; }
.fgp .fgp-campo.mal input{ border-color: #f87171; background: #fef2f2; }
.fgp .fgp-campo.mal .fgp-error{ display: block; }

/* EL BOTÓN, EL DE LA FICHA (`.rqk-btn-crear`). `height:auto` porque la regla
   global `.TComponentES6 button{height:25px}` lo aplastaría. */
.fgp .fgp-btn{
    display: flex; align-items: center; justify-content: center; gap: 9px;
    width: 100%;
    height: auto;
    padding: 13px;
    border: 0;
    border-radius: 11px;
    background: var(--fgp-verde);
    color: #fff;
    font-size: 14.5px; font-weight: 700; font-family: inherit;
    cursor: pointer;
}
.fgp .fgp-btn:hover{ background: var(--fgp-verde-oscuro); }
.fgp .fgp-btn:focus-visible{ outline: 3px solid rgba(63,143,67,.35); outline-offset: 2px; }
.fgp .fgp-btn:disabled{ opacity: .7; cursor: default; }
.fgp .fgp-btn iconify-icon{ font-size: 17px; }

/* EL AVISO: la misma caja verde que el de la pantalla (`.rqk-olv-hecho`). */
.fgp .fgp-hecho{
    display: none;
    gap: 10px;
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 11px;
    border: 1px solid var(--fgp-verde-borde);
    background: var(--fgp-verde-caja);
    color: #2f5136;
    font-size: 12.5px; line-height: 1.5;
}
.fgp .fgp-hecho.on{ display: flex; }
.fgp .fgp-hecho > iconify-icon{ flex: 0 0 auto; font-size: 18px; color: var(--fgp-verde-vivo); }
.fgp .fgp-hecho > div{ flex: 1; min-width: 0; }

.fgp .fgp-ya{ margin: 14px 0 0; text-align: center; font-size: 12.5px; }
.fgp .fgp-ya a{ color: var(--fgp-verde); font-weight: 700; text-decoration: underline; }

/* LA VENTANA, CON LAS ESQUINAS DE LA TARJETA de la pantalla (`--rq-radio`,
   30 px; algo menos aquí porque la ventana es más pequeña). Va por la
   `hostClass` que pone `open()`: el overlay vive fuera del árbol de `.fgp`. */
.TOverlayWin.fgp-ventana{ border-radius: 24px; overflow: hidden; }

@media (max-width: 600px){
    .fgp{ padding: 14px 18px 22px; }
    .fgp .fgp-marca{ height: 32px; }
    .fgp .fgp-titulo{ font-size: 22px; }
}