/**
 * ═══════════════════════════════════════════════════════════════════════
 *  TAuctionProduct — la ficha de un lote agrícola en subasta
 * ═══════════════════════════════════════════════════════════════════════
 *
 * PLANTILLA PROPIA, no la ficha de artículo con una caja pegada. Aquí el
 * producto es fresco y de temporada, lo vende una persona con nombre y finca,
 * y se puede comprar de dos maneras que conviven: precio fijo y puja. Nada de
 * eso cabe en la ficha de un móvil, y forzarlo era lo que dejaba la subasta
 * como un apéndice de una pantalla pensada para otra cosa.
 *
 * TODO VA PREFIJADO CON `.TAuctionProduct`. La tienda tiene reglas globales
 * agresivas --una sobre `label:has(input)` con `!important`, y un `font:` con
 * shorthand que fija 12px a div/span/p/li-- así que aquí cada elemento que
 * pinta texto declara su tamaño y ningún selector se queda a dos clases.
 *
 * Sale de la maqueta aprobada: tmp-maquetas/subasta-agricola.html.
 */

.TAuctionProduct {
    /*
     * ── LA FICHA SE SALE DEL CONTENEDOR DEL SITIO, A PROPÓSITO ──
     *
     * La tienda envuelve las páginas en `.body-content`, que corta a 1200px.
     * Este diseño son TRES columnas arriba --galería, producto y las dos
     * formas de comprar-- y con 1140 útiles las dos cajas de compra se quedan
     * en 230px cada una: el reloj de la subasta parte en cuatro líneas y el
     * botón de pujar no cabe. Medido en el navegador.
     *
     * YA NO SE SALE DEL CARRIL: EL CARRIL LE VALE (27/09/2026).
     *
     * Aquí hubo dos apaños seguidos, y los dos vivían de que el carril del
     * sitio era estrecho y estaba descentrado: primero crecer solo hacia la
     * derecha (`100vw - 70px`), luego crecer por los dos lados y centrarse en
     * el eje de la página. Con el carril ya centrado y con tope EN PÍXELES,
     * salirse deja de tener sentido -- a 1600 la ficha se quedaba en 1512
     * mientras el carril ofrecía 1545, o sea que el «ensanche» la ESTRECHABA --
     * y además traía su propio escalón al cruzar la banda.
     *
     * Ocupa lo que le den y no pasa de los 1512 del diseño, que es lo único
     * que de verdad quería: con las tres columnas ya cabiendo, más ancho solo
     * separa la galería del botón de comprar. El resto del aire lo pone el
     * carril, igual que en cualquier otra página. Un `@media` menos y ningún
     * número copiado de `base.php`. */
    width: min(1512px, 100%);
    margin-inline: auto;

    /* IGUAL POR LOS CUATRO LADOS. Estaba en `0 24px 8px`: la ficha arrancaba
       pegada a las migas de pan --sin un solo píxel arriba-- mientras tenía 24
       a los lados, y el desnivel se ve justo en la esquina donde empieza la
       galería. Un contenedor con un padding distinto en cada lado no se lee
       como un margen, se lee como un fallo.

       EN UNA VARIABLE porque en pantallas estrechas lo baja `@media` y la
       galería necesita el MISMO número en negativo para salirse hasta el borde
       de la ficha: escrito dos veces, el día que uno cambie la foto queda
       descuadrada. */
    padding: var(--ag-pad);

    /* Y las columnas se recolocan por el ancho DEL CONTENEDOR, no por el de la
     * ventana: con `@media` una ficha metida en una caja estrecha seguiría
     * creyéndose ancha, que es justo lo que pasaba aquí. */
    container-type: inline-size;
    container-name: apfiche;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #1e293b;
    background: #fff;
}

}

.TAuctionProduct, .TAuctionProduct *, .TAuctionProduct *::before, .TAuctionProduct *::after { box-sizing: border-box; }

.TAuctionProduct {
    /* El verde es el campo; el naranja es la puja. Dos familias y ninguna
       más: cada color de más en una ficha es una jerarquía que se pierde. */
    --ag-green:        #16a34a;
    --ag-green-dark:   #15803d;
    --ag-green-deep:   #166534;
    --ag-green-soft:   #f0fdf4;
    --ag-green-line:   #bbf7d0;

    --ag-amber:        #f97316;
    --ag-amber-dark:   #ea580c;
    --ag-amber-soft:   #fff7ed;
    --ag-amber-line:   #fdba74;

    --ag-star:         #f59e0b;

    --ag-ink:          #1e293b;
    --ag-ink-soft:     #475569;
    --ag-muted:        #64748b;
    --ag-faint:        #94a3b8;

    --ag-line:         #e5e7eb;
    --ag-line-soft:    #f1f5f9;
    --ag-bg:           #ffffff;
    --ag-radius:       12px;

    /* El margen interior de la ficha. Lo baja `@media` en tableta y móvil, y
       la galería lo usa en negativo para llegar al borde. */
    --ag-pad:          24px;

    /* Restos del `body{}` de la maqueta: al traerla a componente estas
       declaraciones se quedaron SIN selector, colgando tras el cierre del
       bloque de variables. El navegador se las come en silencio --parsea
       hasta el siguiente `}` y descarta--, así que el suavizado de fuente
       nunca llegó a aplicarse. Reintegradas aquí, que es su sitio. */
    -webkit-font-smoothing: antialiased;
}

.TAuctionProduct iconify-icon { display: inline-block; vertical-align: -0.125em; }

/* La estrella maciza. `fill: currentColor` para que herede el ámbar de
   donde se ponga, igual que un icono de trazo hereda el color. */
.TAuctionProduct .ag-s {
    width: 1em; height: 1em;
    fill: currentColor;
    vertical-align: -0.125em;
    flex: 0 0 auto;
}

/* El contenedor es la propia raíz del componente. */
.TAuctionProduct .ag-wrap { display: contents; }

/* ═══════════════════════════════════════════════════════════════════
   MIGAS
   ═══════════════════════════════════════════════════════════════════ */

/*
 * ── LAS MIGAS SE HAN IDO A LA HOJA COMÚN (28/09/2026) ───────────────
 *
 * `Modules/Basic/templates/Tbasic/css/articles.css`, con las mismas clases
 * `.ag-crumbs`. La ficha del catálogo --`TArticleProfile`-- también las pinta
 * desde el 28/09/2026, y el CSS por componente se empaqueta POR PANTALLA: aquí
 * dentro, la otra ficha se habría quedado sin estilos y habría acabado con su
 * propia copia, que es el camino conocido para que la misma ruta se vea de dos
 * maneras.
 *
 * Lo que las pinta sigue siendo de cada ficha --esta las monta en el navegador
 * (`_paintCrumbs`) y la otra las echa ya escritas-- pero del mismo sitio:
 * `Modules\Articles\Lib\ProductBreadcrumb`.
 */

/* ═══════════════════════════════════════════════════════════════════
   EL ARMAZÓN: DOS COLUMNAS

   Izquierda, QUÉ ES ESTO --galería, descripción corta, características y
   el detalle en pestañas--. Derecha, QUÉ PUEDES HACER --comprar ya o
   pujar-- y lo que da confianza para hacerlo.

   ANTES ERAN TRES COLUMNAS ARRIBA y otras tres abajo, y una fila de grid
   no empieza hasta que acaba la MÁS ALTA de la anterior: la caja de la
   subasta --reloj, reparto y tres modos-- medía el doble que la columna
   del producto, así que bajo la galería quedaba un agujero enorme antes
   de llegar al agricultor. Con dos columnas cada una avanza a su ritmo.
   ═══════════════════════════════════════════════════════════════════ */

.TAuctionProduct .ag-main {
    display: grid;

    /*
     * LA DERECHA, 400 FIJOS. Es una columna de acción --el reloj, la oferta y
     * los botones-- y esos controles no ganan nada por ser más anchos: en fr se
     * estiraba a 600 y el reloj quedaba con cuatro cajas separadas por aire. Lo
     * que sí gana con el ancho es la izquierda, que es donde va el texto, así
     * que se lleva todo lo que sobre.
     */
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 28px;
    align-items: start;
}

/* Las dos columnas apilan sus bloques con la misma separación: así la
   parrilla se lee como una rejilla y no como dos listas distintas. */
.TAuctionProduct .ag-left,
.TAuctionProduct .ag-right {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

/*
 * LA COMPRA ACOMPAÑA MIENTRAS SE LEE.
 *
 * La izquierda es bastante más alta --producto, agricultor, detalle y
 * opiniones-- así que al bajar a leer las opiniones la puja se quedaba
 * arriba, fuera de pantalla. En una subasta eso es justo lo que no puede
 * pasar: el reloj corre y la mejor oferta cambia mientras lees.
 *
 * `sticky` solo actúa mientras haya recorrido; si la columna derecha creciera
 * más que la ventana, deja de pegarse sola y no hay nada que corregir.
 */
.TAuctionProduct .ag-right {
    position: sticky;
    top: 16px;
    align-self: start;
}

/* En una pantalla de una columna no se pega: taparía el contenido. */
@container apfiche (max-width: 900px) {
    .TAuctionProduct .ag-right { position: static; }
}

/*
 * El agricultor y el detalle, UNO AL LADO DEL OTRO.
 *
 * Es lo que pide el diseño y además evita que la columna izquierda se estire:
 * son los dos bloques que se leen después de fijarse en el producto, y
 * apilados empujaban la ficha hacia abajo sin necesidad. El detalle se lleva
 * algo más de ancho porque dentro van tres tarjetas de virtudes en fila.
 */
/* El detalle ocupa la columna entera desde que el agricultor se mudó al top
   de la derecha: compartía fila con él y ahora no hay con quién repartirla. */
.TAuctionProduct .ag-detail { display: block; }

/*
 * Dentro de la izquierda, la galería y la ficha del producto se reparten la
 * fila de arriba.
 *
 * `minmax(0, 1fr)` Y NO `1fr`: un `1fr` pelado es `minmax(auto, 1fr)`, o sea
 * que la columna nunca baja del ancho MÍNIMO de su contenido. El carrusel trae
 * el suyo --sus imágenes-- y con eso se llevaba 829 de los 1064: el producto se
 * quedaba en 235px con el título partido en cuatro líneas. Medido.
 */
/*
 * Y SE PARTE EN DOS SOLO SI A LAS DOS LES CABE UNA FOTO.
 *
 * Con dos columnas fijas, una tableta apaisada --1024, donde la ficha mide 984
 * y la derecha se lleva sus 400-- dejaba la galería en 241px: una foto de lote
 * del tamaño de una miniatura, con el aire de la fila entera a los lados.
 * Medido. Con `auto-fit` la fila se parte cuando caben dos de 320 y se junta
 * cuando no: a 1024 la foto pasa a 508 y a 1920 se quedan las dos de 505.
 *
 * `min(320px, 100%)` Y NO `320px` pelado: en un móvil la columna mide 305 y un
 * mínimo mayor que el hueco no encoge --se sale, y arrastra la página con él--.
 */
.TAuctionProduct .ag-hero {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: 26px;
    align-items: start;
}

/* ── GALERÍA ─────────────────────────────────────────────────────── */

.TAuctionProduct .ag-gallery { display: flex; flex-direction: column; gap: 14px; }

.TAuctionProduct .ag-shot {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: var(--ag-radius);
    overflow: hidden;
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 45%, #86efac 100%);
    display: grid;
    place-items: center;
}

.TAuctionProduct .ag-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Marca de agua de la maqueta: en la plantilla real va la foto del lote. */
.TAuctionProduct .ag-shot-mock { font-size: 96px; color: #15803d; opacity: .5; }

.TAuctionProduct .ag-fresh {
    position: absolute;
    top: 12px; left: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border-radius: 999px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
    font-size: 12px;
    font-weight: 600;
    color: var(--ag-green-deep);
}

.TAuctionProduct .ag-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.92);
    box-shadow: 0 1px 4px rgba(0,0,0,.14);
    color: var(--ag-ink);
    font-size: 18px;
    cursor: pointer;
}

.TAuctionProduct .ag-arrow.is-prev { left: 12px; }
.TAuctionProduct .ag-arrow.is-next { right: 12px; }

.TAuctionProduct .ag-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 11px; }

.TAuctionProduct .ag-thumb {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 9px;
    overflow: hidden;
    border: 1px solid var(--ag-line);
    background: linear-gradient(135deg, #dcfce7, #86efac);
    display: grid;
    place-items: center;
    cursor: pointer;
}

.TAuctionProduct .ag-thumb.is-on { border-color: var(--ag-green); box-shadow: 0 0 0 1px var(--ag-green); }
.TAuctionProduct .ag-thumb iconify-icon { font-size: 26px; color: #15803d; opacity: .55; }

.TAuctionProduct .ag-thumb-more {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    background: rgba(15,23,42,.55);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
}

/* ── EL PRODUCTO ─────────────────────────────────────────────────── */

.TAuctionProduct .ag-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 6px;
    font-size: 28px;
    line-height: 1.15;
    letter-spacing: -.5px;
}

.TAuctionProduct .ag-verified { color: var(--ag-green); font-size: 22px; flex: 0 0 auto; }

.TAuctionProduct .ag-claim { margin: 0 0 12px; font-size: 14px; color: var(--ag-ink-soft); }

/* ── VENDIDO POR ──────────────────────────────────────────────────
   Una línea, no una tarjeta: la tarjeta del agricultor ya está en la columna
   de al lado y dos bloques con la misma información compitiendo hacen que no
   se lea ninguno. Aquí solo hace falta el nombre y la puerta a su ficha.
   El tamaño de los iconos va en el propio `iconify-icon`, que no hereda el
   `font-size` de su caja. */
.TAuctionProduct .ag-soldby {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
    margin: 0 0 14px;
    font-size: 13px;
    color: var(--ag-ink-soft);
}
.TAuctionProduct .ag-soldby iconify-icon { font-size: 15px; }
.TAuctionProduct .ag-soldby a {
    color: var(--ag-green, #15803d);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(21, 128, 61, .35);
}
.TAuctionProduct .ag-soldby a:hover { border-bottom-color: currentColor; }
.TAuctionProduct .ag-soldby-ok {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 11px; font-weight: 600;
    color: #1d4ed8;
}
.TAuctionProduct .ag-soldby-ok iconify-icon { font-size: 13px; }

.TAuctionProduct .ag-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 13px;
    color: var(--ag-muted);
}

.TAuctionProduct .ag-rating b { color: var(--ag-ink); font-size: 14px; }
.TAuctionProduct .ag-stars { display: inline-flex; gap: 1px; color: var(--ag-star); font-size: 14px; }
.TAuctionProduct .ag-dot { color: var(--ag-line); }

.TAuctionProduct .ag-desc {
    margin: 0 0 18px;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--ag-ink-soft);
}

/* Los cuatro sellos de cultivo. Icono arriba y texto debajo, centrados: es
   una fila de garantías, no una lista que se lea de izquierda a derecha. */
.TAuctionProduct .ag-seals {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 16px 0;
    border-top: 1px solid var(--ag-line-soft);
    border-bottom: 1px solid var(--ag-line-soft);
    margin-bottom: 16px;
}

.TAuctionProduct .ag-seal {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}

.TAuctionProduct .ag-seal iconify-icon { font-size: 21px; color: var(--ag-green); }
.TAuctionProduct .ag-seal span { font-size: 11.5px; line-height: 1.35; color: var(--ag-ink-soft); }

/* Ficha técnica del lote: icono, etiqueta y valor en tres columnas fijas,
   para que TODOS los valores caigan en la misma vertical. */
.TAuctionProduct .ag-specs { display: flex; flex-direction: column; gap: 11px; margin-bottom: 16px; }

/* El bloque «Información del producto» trae su propia hoja (TProductFoodInfo);
   aquí solo su hueco en la columna. */
.TAuctionProduct .ag-foodinfo { margin: 0 0 16px; }
.TAuctionProduct .ag-foodinfo .TProductFoodInfo { margin: 0; }

.TAuctionProduct .ag-spec { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.TAuctionProduct .ag-spec > iconify-icon { flex: 0 0 auto; font-size: 15px; color: var(--ag-faint); }
.TAuctionProduct .ag-spec-label { flex: 0 0 108px; color: var(--ag-muted); }
.TAuctionProduct .ag-spec-value { flex: 1; min-width: 0; color: var(--ag-ink); }

.TAuctionProduct .ag-more {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--ag-green);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}

/* ── LAS DOS FORMAS DE COMPRAR ───────────────────────────────────── */

/*
 * LAS DOS FORMAS DE COMPRAR, UNA DEBAJO DE OTRA.
 *
 * En paralelo se leían como equivalentes, y no lo son: esta ficha existe POR
 * la subasta --es la que tiene reloj, la que cambia sola y a la que se vuelve--
 * y el precio fijo es la salida para quien no quiere esperar. Apiladas, la de
 * arriba manda y la de abajo se ofrece.
 */
.TAuctionProduct .ag-buy {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.TAuctionProduct .ag-card {
    border: 1px solid var(--ag-line);
    border-radius: var(--ag-radius);
    background: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.TAuctionProduct .ag-card-head { padding: 16px 18px 14px; border-bottom: 1px solid var(--ag-line-soft); }

.TAuctionProduct .ag-card-head h3 { margin: 0 0 2px; font-size: 16px; }
.TAuctionProduct .ag-card-head p { margin: 0; font-size: 12px; color: var(--ag-muted); }

.TAuctionProduct .ag-card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 14px; }

/* La de compra, verde; la de subasta, ámbar. Es lo único que las distingue
   de lejos, y basta: la misma tarjeta con dos temperaturas. */
.TAuctionProduct .ag-card.is-direct { border-color: var(--ag-green-line); }
.TAuctionProduct .ag-card.is-direct .ag-card-head { background: #f7fdf9; }
.TAuctionProduct .ag-card.is-direct .ag-card-head h3 { color: var(--ag-green-deep); }

.TAuctionProduct .ag-card.is-auction { border-color: var(--ag-amber-line); }
.TAuctionProduct .ag-card.is-auction .ag-card-head { background: #fffaf5; }
.TAuctionProduct .ag-card.is-auction .ag-card-head h3 { color: var(--ag-amber-dark); }

.TAuctionProduct .ag-field-label { font-size: 12px; color: var(--ag-muted); margin-bottom: 4px; }

.TAuctionProduct .ag-price { display: flex; align-items: baseline; gap: 6px; }
.TAuctionProduct .ag-price b { font-size: 30px; line-height: 1; letter-spacing: -.5px; }
.TAuctionProduct .ag-price small { font-size: 15px; font-weight: 600; }

.TAuctionProduct .ag-price-note { font-size: 11.5px; color: var(--ag-muted); margin-top: 4px; }

/* Selector de cantidad: los dos botones a los lados y el valor en medio. */
.TAuctionProduct .ag-qty {
    display: flex;
    align-items: center;
    border: 1px solid var(--ag-line);
    border-radius: 9px;
    overflow: hidden;
}

.TAuctionProduct .ag-qty button {
    width: 42px; height: 40px;
    border: 0;
    background: #fff;
    color: var(--ag-ink);
    font-size: 17px;
    cursor: pointer;
}

.TAuctionProduct .ag-qty button:hover { background: var(--ag-line-soft); }

.TAuctionProduct .ag-qty span {
    flex: 1;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    border-left: 1px solid var(--ag-line);
    border-right: 1px solid var(--ag-line);
    line-height: 40px;
}

/* Aviso de disponibilidad: icono a la izquierda y TODO el texto en la
   segunda columna, para que las dos líneas arranquen igual. */
.TAuctionProduct .ag-note {
    display: flex;
    gap: 9px;
    padding: 11px 13px;
    border-radius: 9px;
    border: 1px solid var(--ag-green-line);
    background: var(--ag-green-soft);
}

.TAuctionProduct .ag-note > iconify-icon { flex: 0 0 auto; font-size: 16px; color: var(--ag-green); margin-top: 1px; }
.TAuctionProduct .ag-note-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.TAuctionProduct .ag-note-text b { font-size: 12.5px; color: var(--ag-green-deep); }
.TAuctionProduct .ag-note-text span { font-size: 11.5px; color: #3f6212; }

.TAuctionProduct .ag-delivery { display: flex; flex-direction: column; gap: 1px; }
.TAuctionProduct .ag-delivery .ag-field-label { margin: 0; }
.TAuctionProduct .ag-delivery b { font-size: 14px; }
.TAuctionProduct .ag-delivery span { font-size: 11.5px; color: var(--ag-muted); }

.TAuctionProduct .ag-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 44px;
    border: 0;
    border-radius: 9px;
    font: inherit;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
}

.TAuctionProduct .ag-btn-green { background: var(--ag-green-dark); color: #fff; }
.TAuctionProduct .ag-btn-green:hover { background: var(--ag-green-deep); }

.TAuctionProduct .ag-btn-amber { background: var(--ag-amber); color: #fff; }
.TAuctionProduct .ag-btn-amber:hover { background: var(--ag-amber-dark); }

.TAuctionProduct .ag-btn-ghost {
    background: #fff;
    color: var(--ag-ink);
    border: 1px solid var(--ag-line);
}

.TAuctionProduct .ag-btn-ghost:hover { background: var(--ag-line-soft); }

.TAuctionProduct .ag-secure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--ag-muted);
}

/* ── LA SUBASTA ──────────────────────────────────────────────────── */

.TAuctionProduct .ag-live {
    border: 1px solid var(--ag-amber-line);
    border-radius: 9px;
    background: var(--ag-amber-soft);
    padding: 12px 13px;
}

.TAuctionProduct .ag-live b { display: block; font-size: 12.5px; color: var(--ag-amber-dark); }
.TAuctionProduct .ag-live > span { display: block; font-size: 11.5px; color: #9a3412; margin-bottom: 8px; }

/* El reloj, en cuatro cajas iguales: los números bailan cada segundo y sin
   ancho fijo el bloque entero se movería con ellos. */
.TAuctionProduct .ag-clock { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }

.TAuctionProduct .ag-clock div {
    background: #fff;
    border: 1px solid var(--ag-amber-line);
    border-radius: 7px;
    padding: 5px 2px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--ag-ink);
    font-variant-numeric: tabular-nums;
}

.TAuctionProduct .ag-bid-now { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.TAuctionProduct .ag-bid-now .ag-price b { color: var(--ag-amber-dark); }
.TAuctionProduct .ag-bid-count { font-size: 12px; color: var(--ag-muted); padding-bottom: 3px; }

.TAuctionProduct .ag-bid-input {
    display: flex;
    align-items: center;
    border: 1px solid var(--ag-line);
    border-radius: 9px;
    overflow: hidden;
}

.TAuctionProduct .ag-bid-input input {
    flex: 1; min-width: 0;
    border: 0; outline: 0;
    padding: 11px 13px;
    font: inherit;
    font-size: 14px;
}

.TAuctionProduct .ag-bid-input input::placeholder { color: var(--ag-faint); }

.TAuctionProduct .ag-bid-input em {
    font-style: normal;
    font-size: 12.5px;
    color: var(--ag-muted);
    padding: 0 12px;
    border-left: 1px solid var(--ag-line);
    line-height: 42px;
    background: #fafafa;
}

.TAuctionProduct .ag-hint { font-size: 11px; color: var(--ag-muted); }

/* ═══════════════════════════════════════════════════════════════════
   ZONA BAJA: agricultor · pestañas · confianza y opiniones
   ═══════════════════════════════════════════════════════════════════ */

/* `.ag-lower` era la rejilla de la zona baja y ya no hay zona baja: sus
   tres bloques viven ahora dentro de su columna. Se conserva la clase
   por si alguna plantilla vieja la usa, sin rejilla propia. */
.TAuctionProduct .ag-lower { display: contents; }

.TAuctionProduct .ag-panel {
    border: 1px solid var(--ag-line);
    border-radius: var(--ag-radius);
    background: #fff;
    padding: 20px;
}

.TAuctionProduct .ag-panel-title { margin: 0 0 16px; font-size: 17px; }

/* ── EL AGRICULTOR ───────────────────────────────────────────────── */

.TAuctionProduct .ag-farmer { display: flex; gap: 14px; margin-bottom: 14px; }

.TAuctionProduct .ag-avatar {
    position: relative;
    flex: 0 0 auto;
    width: 72px; height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, #86efac, #16a34a);
    display: grid; place-items: center;
    color: #fff;
    font-size: 32px;
    overflow: hidden;
}

.TAuctionProduct .ag-avatar img { width: 100%; height: 100%; object-fit: cover; }

.TAuctionProduct .ag-avatar-check {
    position: absolute;
    right: 0; bottom: 2px;
    width: 20px; height: 20px;
    box-shadow: 0 0 0 2px #fff;
    border-radius: 50%;
    background: #fff;
    display: grid; place-items: center;
    color: var(--ag-green);
    font-size: 15px;
}

/* Datos del agricultor: todo el texto en la segunda columna del flex. */
.TAuctionProduct .ag-farmer-data { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }

.TAuctionProduct .ag-farmer-name { display: flex; align-items: center; gap: 7px; font-size: 17px; font-weight: 600; }
.TAuctionProduct .ag-farmer-name iconify-icon { color: var(--ag-green); font-size: 15px; }

.TAuctionProduct .ag-farmer-role { font-size: 12px; color: var(--ag-muted); margin-bottom: 4px; }

.TAuctionProduct .ag-farmer-line { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ag-ink-soft); }
.TAuctionProduct .ag-farmer-line iconify-icon { flex: 0 0 auto; font-size: 14px; color: var(--ag-faint); }

.TAuctionProduct .ag-farmer-bio { margin: 0 0 14px; font-size: 13px; line-height: 1.6; color: var(--ag-ink-soft); }

.TAuctionProduct .ag-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ag-green);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
}

.TAuctionProduct .ag-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--ag-line-soft);
    text-align: center;
}

.TAuctionProduct .ag-stat b { display: block; font-size: 16px; color: var(--ag-green-deep); }
.TAuctionProduct .ag-stat span { display: block; font-size: 10.5px; line-height: 1.3; color: var(--ag-muted); }

/* ── PESTAÑAS ────────────────────────────────────────────────────── */

.TAuctionProduct .ag-tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--ag-line); margin: -20px -20px 18px; padding: 0 20px; }

.TAuctionProduct .ag-tab {
    padding: 14px 0 12px;
    font-size: 13px;
    white-space: nowrap;   /* «Envíos y devoluciones» partía en dos líneas y
                              descuadraba la altura de la barra de pestañas */
    color: var(--ag-muted);
    border-bottom: 2px solid transparent;
    cursor: pointer;
    background: none;
    border-top: 0; border-left: 0; border-right: 0;
    font-family: inherit;
}

.TAuctionProduct .ag-tab.is-on { color: var(--ag-green-deep); border-bottom-color: var(--ag-green); font-weight: 600; }

.TAuctionProduct .ag-tab-body p { margin: 0 0 14px; font-size: 13.5px; line-height: 1.7; color: var(--ag-ink-soft); }

/* Las tres virtudes del producto: icono a la izquierda, texto en la
   segunda columna. La misma regla de siempre. */
.TAuctionProduct .ag-perks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 18px 0; }

.TAuctionProduct .ag-perk {
    display: flex;
    gap: 9px;
    padding: 13px;
    border: 1px solid var(--ag-line);
    border-radius: 10px;
}

.TAuctionProduct .ag-perk > iconify-icon { flex: 0 0 auto; font-size: 17px; color: var(--ag-green); margin-top: 1px; }
.TAuctionProduct .ag-perk-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.TAuctionProduct .ag-perk-text b { font-size: 11.5px; }   /* «Rico en nutrientes» tiene que
                                            caber en una línea, como en el diseño */
.TAuctionProduct .ag-perk-text span { font-size: 11px; line-height: 1.4; color: var(--ag-muted); }

.TAuctionProduct .ag-didyouknow {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--ag-green-line);
    border-radius: 10px;
    background: var(--ag-green-soft);
}

.TAuctionProduct .ag-didyouknow-text { flex: 1; min-width: 0; }
.TAuctionProduct .ag-didyouknow-text b { display: block; font-size: 13px; color: var(--ag-green-deep); margin-bottom: 3px; }
.TAuctionProduct .ag-didyouknow-text span { font-size: 12.5px; line-height: 1.55; color: #3f6212; }
.TAuctionProduct .ag-didyouknow-art { flex: 0 0 auto; font-size: 40px; }

/* ── CONFIANZA ───────────────────────────────────────────────────── */

/*
 * POR QUÉ FIARSE — al pie de la ficha del producto.
 *
 * `minmax(0, 1fr)` y no `1fr`: los tres textos son largos --«Trato directo con
 * el agricultor»-- y con el mínimo automático la rejilla se ensancha hasta
 * desbordar la columna en vez de partir las líneas.
 */
.TAuctionProduct .ag-trust {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
    padding: 14px 16px;
    border: 1px solid var(--ag-line);
    border-radius: var(--ag-radius);
    background: #fff;
}

.TAuctionProduct .ag-trust-item { display: flex; gap: 10px; }
.TAuctionProduct .ag-trust-item > iconify-icon { flex: 0 0 auto; font-size: 19px; color: var(--ag-green); margin-top: 1px; }
.TAuctionProduct .ag-trust-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.TAuctionProduct .ag-trust-text b { font-size: 12.5px; }
.TAuctionProduct .ag-trust-text span { font-size: 11px; line-height: 1.35; color: var(--ag-muted); }

/* ── OPINIONES ───────────────────────────────────────────────────── */

.TAuctionProduct .ag-reviews-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.TAuctionProduct .ag-reviews-head h3 { margin: 0; font-size: 17px; }

.TAuctionProduct .ag-reviews {
    display: grid;
    /* Ya no está en la columna estrecha de la compra: aquí tiene el ancho
       entero y las destacadas se llevan algo más, que es donde va el texto. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: 26px;
}

.TAuctionProduct .ag-score { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ag-muted); margin-bottom: 12px; }
.TAuctionProduct .ag-score iconify-icon { color: var(--ag-star); font-size: 15px; }
.TAuctionProduct .ag-score b { color: var(--ag-ink); font-size: 14px; }

.TAuctionProduct .ag-bars { display: flex; flex-direction: column; gap: 7px; }

.TAuctionProduct .ag-bar { display: flex; align-items: center; gap: 9px; font-size: 11.5px; color: var(--ag-muted); }
.TAuctionProduct .ag-bar-label { flex: 0 0 30px; display: flex; align-items: center; gap: 3px; }
.TAuctionProduct .ag-bar-label iconify-icon { color: var(--ag-star); font-size: 11px; }

.TAuctionProduct .ag-bar-track {
    display: block;      /* era <span> INLINE: el alto y el % del relleno no
                            pintaban nada y las cinco barras salían vacías */
    flex: 1;
    height: 7px;
    border-radius: 999px;
    background: var(--ag-line-soft);
    overflow: hidden;
}

.TAuctionProduct .ag-bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--ag-green); }
.TAuctionProduct .ag-bar-n { flex: 0 0 28px; text-align: right; font-variant-numeric: tabular-nums; }

.TAuctionProduct .ag-featured-title { font-size: 13px; font-weight: 600; margin-bottom: 12px; }

.TAuctionProduct .ag-review { display: flex; gap: 10px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--ag-line-soft); }
.TAuctionProduct .ag-review:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }

.TAuctionProduct .ag-review-avatar {
    flex: 0 0 auto;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #bbf7d0, #22c55e);
    display: grid; place-items: center;
    color: #fff;
    font-size: 15px;
    overflow: hidden;
}

/* Todo lo del comentario, en la segunda columna. */
.TAuctionProduct .ag-review-body { flex: 1; min-width: 0; }

.TAuctionProduct .ag-review-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 3px; }
.TAuctionProduct .ag-review-top b { font-size: 12.5px; }

.TAuctionProduct .ag-verified-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    color: var(--ag-green-dark);
}

.TAuctionProduct .ag-review-when { margin-left: auto; font-size: 10.5px; color: var(--ag-faint); }

.TAuctionProduct .ag-review-stars { color: var(--ag-star); font-size: 11px; margin-bottom: 5px; display: flex; gap: 1px; }

.TAuctionProduct .ag-review-text { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--ag-ink-soft); }

.TAuctionProduct .ag-review-shot {
    width: 106px; height: 62px;
    margin-top: 8px;
    border-radius: 7px;
    background: linear-gradient(135deg, #dcfce7, #4ade80);
    display: grid; place-items: center;
    color: #15803d;
    font-size: 22px;
}

/* ═══════════════════════════════════════════════════════════════════
   BARRA DE GARANTÍAS
   ═══════════════════════════════════════════════════════════════════ */

.TAuctionProduct .ag-guarantees {
    margin-top: 34px;
    border-top: 1px solid var(--ag-line);
    background: #fff;
}

.TAuctionProduct .ag-guarantees-in {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 22px;
    padding: 22px 0 24px;
}

.TAuctionProduct .ag-guarantee { display: flex; gap: 10px; }
.TAuctionProduct .ag-guarantee > iconify-icon { flex: 0 0 auto; font-size: 19px; color: var(--ag-green); margin-top: 1px; }
.TAuctionProduct .ag-guarantee-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.TAuctionProduct .ag-guarantee-text b { font-size: 12.5px; }
.TAuctionProduct .ag-guarantee-text span { font-size: 11px; line-height: 1.35; color: var(--ag-muted); }

/* ═══════════════════════════════════════════════════════════════════
   PANTALLAS ESTRECHAS
   ═══════════════════════════════════════════════════════════════════ */

/*
 * POR EL ANCHO DEL CONTENEDOR, NO POR EL DE LA VENTANA.
 *
 * Con `@media` esto no llegaba a saltar nunca: la ventana medía 1920 y el
 * hueco real de la ficha 1140 --la tienda envuelve las páginas en un
 * contenedor de 1200-- así que se quedaba en tres columnas dentro de un sitio
 * donde no caben, con las cajas de compra a 230px. Un `@container` mide lo que
 * de verdad hay.
 */
/* Cuando la derecha ya no da para dos cajas de compra, se apilan. */
@container apfiche (max-width: 1240px) {
    /* La derecha mantiene sus 400: lo que se estrecha es el texto. */
    .TAuctionProduct .ag-buy  { grid-template-columns: 1fr; }
    .TAuctionProduct .ag-trust { grid-template-columns: 1fr; }
}

/* Y cuando no dan ni las dos columnas: la compra sube justo detrás de la
   galería --es lo que se ha venido a hacer-- y el resto va debajo. */
@container apfiche (max-width: 900px) {
    /* `minmax(0, 1fr)` y no `1fr`, por lo mismo que en `.ag-hero`: con `1fr` la
       columna no baja del ancho mínimo del carrusel y a 400 px la ficha medía
       667 (15/09/2026). */
    .TAuctionProduct .ag-main,
    .TAuctionProduct .ag-hero,
    .TAuctionProduct .ag-perks { grid-template-columns: minmax(0, 1fr); }

    /* La compra sigue apilada también aquí: la jerarquía --primero la puja,
       después el precio fijo-- no depende del ancho de la pantalla. */
    .TAuctionProduct .ag-guarantees-in { grid-template-columns: 1fr 1fr; }
    .TAuctionProduct .ag-seals { grid-template-columns: repeat(2, 1fr); }
}

@container apfiche (max-width: 620px) {
    .TAuctionProduct .ag-guarantees-in { grid-template-columns: 1fr; }

    /* En un móvil, la cantidad y el botón no caben en la misma línea. */
    .TAuctionProduct .ag-direct-buy { flex-wrap: wrap; }
    .TAuctionProduct .ag-direct-buy .ag-qty { flex: 1 1 100%; }
}

/* ═══════════════════════════════════════════════════════════════════
   LO QUE LA MAQUETA NO PODÍA ENSEÑAR

   La maqueta es una foto fija: no tiene visitante que haya pujado, ni
   subasta cerrada, ni error del servidor. Estos estados existen en
   cuanto la ficha es de verdad, y sin estilo salían como texto suelto.
   ═══════════════════════════════════════════════════════════════════ */

/* ── DÓNDE QUEDAS TÚ ─────────────────────────────────────────────── */

.TAuctionProduct .ag-mine {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 11px 13px;
    border-radius: 9px;
    border: 1px solid var(--ag-line);
}

.TAuctionProduct .ag-mine.is-in  { background: var(--ag-green-soft); border-color: var(--ag-green-line); }
.TAuctionProduct .ag-mine.is-out { background: #fffbeb; border-color: #fcd34d; }

.TAuctionProduct .ag-mine-top { font-size: 11.5px; color: var(--ag-muted); }
.TAuctionProduct .ag-mine b   { font-size: 13.5px; color: var(--ag-ink); }
.TAuctionProduct .ag-mine small { font-size: 11px; color: var(--ag-muted); }

/* La subasta cerrada apaga el ámbar: ya no hay nada que correr. */
.TAuctionProduct .ag-live.is-over { background: #f8fafc; border-color: var(--ag-line); }
.TAuctionProduct .ag-live.is-over b { color: #b91c1c; }
.TAuctionProduct .ag-live.is-over > span { color: var(--ag-muted); }

/* ── AVISOS DE LA PUJA ───────────────────────────────────────────── */

.TAuctionProduct .ag-notice {
    padding: 10px 12px;
    border-radius: 8px;
    background: #f8fafc;
    border: 1px solid var(--ag-line);
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--ag-muted);
}

.TAuctionProduct .ag-notice.is-bad {
    background: #fffbeb;
    border-color: #fcd34d;
    color: #92400e;
}

/* ── LOS TRES MODOS DE ADJUDICACIÓN ──────────────────────────────── */

.TAuctionProduct .ag-modes { display: flex; flex-direction: column; gap: 8px; }

/*
 * OJO: LA TIENDA TIENE UNA REGLA GLOBAL SOBRE <label> CON <input>.
 *
 * `label:not(.switch):not(.TCheckbox):has(input)` --0,3,1-- impone
 * `flex-flow: wrap`, `gap: 0 6px` y `align-items: center !important`. Gana a
 * dos clases, así que estos selectores llevan `.ag-modes` delante y el
 * `align-items` va con `!important`: es la única forma de vencer al suyo.
 * Comprobado con getComputedStyle, no supuesto.
 */
.TAuctionProduct .ag-modes label.ag-radio {
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-start !important;
    gap: 9px;
    padding: 10px 12px;
    border: 1px solid var(--ag-line);
    border-radius: 8px;
    cursor: pointer;
}

.TAuctionProduct .ag-modes label.ag-radio:hover { border-color: #cbd5e1; background: #f8fafc; }

.TAuctionProduct .ag-modes label.ag-radio > span {
    display: flex;
    flex-flow: column nowrap;
    gap: 1px;
}

.TAuctionProduct .ag-modes label.ag-radio b     { font-size: 12.5px; color: var(--ag-ink); }
.TAuctionProduct .ag-modes label.ag-radio small { font-size: 10.5px; color: var(--ag-muted); }

/* ── PREGUNTAS FRECUENTES ────────────────────────────────────────── */

.TAuctionProduct .ag-faq {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 0;
    border-bottom: 1px solid var(--ag-line-soft);
}

.TAuctionProduct .ag-faq:last-child { border-bottom: 0; }
.TAuctionProduct .ag-faq b    { font-size: 13px; color: var(--ag-ink); }
.TAuctionProduct .ag-faq span { font-size: 12.5px; line-height: 1.6; color: var(--ag-ink-soft); }

/* ── SIN DATOS TODAVÍA ───────────────────────────────────────────── */

.TAuctionProduct .ag-empty {
    padding: 18px;
    border-radius: 9px;
    background: #f8fafc;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ag-muted);
    text-align: center;
}

/* ── LAS OFERTAS DE LA SUBASTA (en la ventana, `view/ofertas.php`) ─────
   La tabla es la del sitio (`TDataTable`, piel `tdt--escaparate`); aquí solo
   el resumen de encima y la píldora «Su oferta». La ventana no cuelga de
   `.TAuctionProduct`, así que las reglas van por su propia clase. */
.ap-ofertas{ display:flex; flex-direction:column; gap:12px; min-width:0; }
.ap-ofertas-resumen{ display:flex; flex-wrap:wrap; gap:8px; }
.ap-ofertas-dato{ flex:1 1 140px; min-width:0; padding:8px 12px; border-radius:10px;
    background:var(--sd-crema, #f7faf6); border:1px solid var(--sd-borde, #e4eae4); }
.ap-ofertas-dato small{ display:block; font-size:11px; letter-spacing:.3px; text-transform:uppercase; color:var(--sd-suave, #6b7a70); }
.ap-ofertas-dato b{ display:block; font-size:15px; color:var(--sd-tinta, #16211a); font-variant-numeric:tabular-nums; }
/* «Su oferta», junto al número del comprador: la única fila que es de quien mira. */
.ap-ofertas .tdt .tdt-pill.t-yo{ background:var(--sd-verde, #04713a); color:#fff; }

/* ── FOTOS REALES ────────────────────────────────────────────────── */

/*
 * ENCUADRE CON `object-fit`, NO CON `max-*`.
 *
 * Una foto real no viene en la proporción del hueco, y con `max-width/height`
 * se sale o deja franjas. Ya pasó en la portada de colección.
 */
.TAuctionProduct .ag-thumb img,
.TAuctionProduct .ag-avatar img,
.TAuctionProduct .ag-review-shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.TAuctionProduct .ag-review-shot { overflow: hidden; }

/* ═══════════════════════════════════════════════════════════════════
   LA GALERÍA: EL TEMA «farm» DE TCarousel

   El carrusel es el del proyecto --con su tira desplazable y su
   transición-- y aquí solo se le da el aspecto del diseño: foto en
   4:3 con esquinas redondeadas, flechas circulares blancas y
   miniaturas cuadradas con el borde verde en la elegida.

   Va prefijado con `.TAuctionProduct` además de `.is-farm`, así que
   ninguna otra pantalla que monte un TCarousel cambia de aspecto.
   ═══════════════════════════════════════════════════════════════════ */

.TAuctionProduct .ag-gallery { position: relative; display: flex; flex-direction: column; }

/* El distintivo va sobre el carrusel pero fuera de él: no es del
   carrusel, es de lo que se está vendiendo. */
.TAuctionProduct .ag-gallery-badge {
    position: absolute;
    top: 12px; left: 12px;
    z-index: 3;
}

/*
 * EL VISOR, EN 4:3 Y DE VERDAD.
 *
 * Son DOS declaraciones y hacen falta las dos, más el `height: 'auto'` que
 * `TAuctionProduct.js` le pasa al carrusel:
 *
 *   `flex: 0 0 auto` --el carrusel es un flex en columna y el visor venía con
 *   `flex: 1`, o sea `flex-basis: 0`. Con la caja de 500 eso lo estiraba a 480;
 *   sin ella lo dejaría en CERO, porque el alto de una columna automática sale
 *   de la base de sus hijos. Quien decide el alto es la proporción, así que el
 *   flex no debe tocarlo.
 *
 *   `height: auto` --por si alguien vuelve a poner un alto en píxeles en la
 *   config: un número ahí manda sobre `aspect-ratio` y vuelve el fallo, que
 *   además es mudo. La foto simplemente sale con otra forma.
 */
.TAuctionProduct .TCarousel.is-farm .main_area {
    position: relative;
    aspect-ratio: 4 / 3;
    flex: 0 0 auto;
    height: auto !important;
    border-radius: var(--ag-radius);
    overflow: hidden;
    background: var(--ag-line-soft);
}

.TAuctionProduct .TCarousel.is-farm .main_area img { object-fit: cover; }

/* LAS FLECHAS, REDONDAS Y BLANCAS. Las del carrusel son dos caracteres
   ◀ ▶ sueltos; aquí se les da el botón de alrededor. */
.TAuctionProduct .TCarousel.is-farm .main_area .arrow-left,
.TAuctionProduct .TCarousel.is-farm .main_area .arrow-right {
    width: 36px; height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255,255,255,.92);
    box-shadow: 0 1px 4px rgba(0,0,0,.14);
    color: var(--ag-ink);
    font-size: 12px;
    opacity: 1;
}

.TAuctionProduct .TCarousel.is-farm .main_area .arrow-left  { left: 12px; }
.TAuctionProduct .TCarousel.is-farm .main_area .arrow-right { right: 12px; }

/* ── LA TIRA DE MINIATURAS ────────────────────────────────────────── */

.TAuctionProduct .TCarousel.is-farm .thumb_area { margin-top: 14px; }

/*
 * LA TIRA, UNA FILA QUE SE REPARTE EL ANCHO.
 *
 * La del carrusel es un `inline-block` con `white-space: nowrap` pensado para
 * desplazarse con sus flechas. Aquí siempre son cinco celdas --lo garantiza
 * `maxThumbs`-- así que caben todas y no hace falta desplazar nada: las flechas
 * de la tira se esconden porque no tendrían adónde llevar.
 */
.TAuctionProduct .TCarousel.is-farm .thumb_list {
    display: flex;
    gap: 11px;
    width: 100%;
    white-space: normal;
}

.TAuctionProduct .TCarousel.is-farm .thumb_area > .arrow-left,
.TAuctionProduct .TCarousel.is-farm .thumb_area > .arrow-right { display: none; }

/*
 * LAS MINIATURAS SE REPARTEN EL ANCHO, no miden 84 fijos.
 *
 * Con cinco celdas de 84 y sus huecos hacen 464, y la galería mide 400: la
 * quinta --justo la del contador-- se salía del marco. Con `flex: 1` ocupan lo
 * que haya, y el tope las mantiene siempre en cinco.
 */
.TAuctionProduct .TCarousel.is-farm .thumb_list img,
.TAuctionProduct .TCarousel.is-farm .thumb_more {
    flex: 1 1 0;
    min-width: 0;
    max-width: 92px;
    width: auto;
    aspect-ratio: 1 / 1;
    height: auto;

    /* El CSS del carrusel les pone `margin-right: 10px` y `padding: 5px`, y
       aquí la separación la lleva el `gap`: sin anularlos, la celda del
       contador --que no es un <img>-- salía diez píxeles más estrecha que las
       demás y la fila quedaba descuadrada. Medido. */
    margin: 0;
    padding: 0;

    object-fit: cover;
    border-radius: 9px;
    border: 1px solid var(--ag-line);
    cursor: pointer;
}

.TAuctionProduct .TCarousel.is-farm .thumb_list img.selected {
    border-color: var(--ag-green);
    box-shadow: 0 0 0 1px var(--ag-green);
}

/* El «+6» es UNA CELDA MÁS de la tira, con la foto que esconde de fondo y un
   velo oscuro encima. Antes iba superpuesta con un margen negativo, y en
   cuanto la tira cambiaba de ancho el número se iba a otra parte. */
.TAuctionProduct .TCarousel.is-farm .thumb_more {
    display: grid;
    place-items: center;
    background-size: cover;
    background-position: center;
    box-shadow: inset 0 0 0 999px rgba(15,23,42,.58);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════
   LA JERARQUÍA DE LAS DOS FORMAS DE COMPRAR

   Arriba la subasta, con todo su peso: borde ámbar, cabecera con
   fondo y el precio grande. Debajo la compra directa, en una tarjeta
   compacta de tres líneas --precio, cantidad y botón, y el resto en
   un pie-- que se ofrece sin competir.

   Las dos siguen A LA VISTA. Esconder la directa detrás de una
   pestaña obligaría a descubrirla, y quien tiene prisa no la busca.
   ═══════════════════════════════════════════════════════════════════ */

/* LA SUBASTA, LA PRINCIPAL: su borde se nota y su cabecera pesa. */
.TAuctionProduct .ag-card.is-auction {
    border-width: 2px;
    box-shadow: 0 1px 3px rgba(249, 115, 22, .10);
}

.TAuctionProduct .ag-card.is-auction .ag-card-head h3 { font-size: 17px; }

.TAuctionProduct .ag-card.is-auction .ag-price b { font-size: 32px; }

/* ── LA COMPRA DIRECTA, COMPACTA ──────────────────────────────────── */

.TAuctionProduct .ag-card.is-compact { border-color: var(--ag-line); }

.TAuctionProduct .ag-card.is-compact .ag-card-body {
    padding: 14px 16px;
    gap: 11px;
}

/* Primera línea: qué es, a la izquierda; cuánto vale, a la derecha. */
.TAuctionProduct .ag-direct-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.TAuctionProduct .ag-direct-what { display: flex; flex-direction: column; min-width: 0; }
.TAuctionProduct .ag-direct-what b { font-size: 14px; color: var(--ag-green-deep); }
.TAuctionProduct .ag-direct-what small { font-size: 11px; color: var(--ag-muted); }

.TAuctionProduct .ag-direct-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex: 0 0 auto;
    line-height: 1.15;
}

/* 21px, y no los 30 de la subasta: el precio fijo se lee, pero no compite
   con la oferta actual, que es el número que la ficha viene a enseñar. */
.TAuctionProduct .ag-direct-price b { font-size: 21px; color: var(--ag-ink); }
.TAuctionProduct .ag-direct-price small { font-size: 10.5px; color: var(--ag-muted); }

/* Segunda línea: la cantidad y el botón, en la misma fila. */
.TAuctionProduct .ag-direct-buy { display: flex; align-items: center; gap: 10px; }

.TAuctionProduct .ag-direct-buy .ag-qty { flex: 0 0 132px; height: 40px; }
.TAuctionProduct .ag-direct-buy .ag-qty button { width: 34px; height: 38px; font-size: 16px; }
.TAuctionProduct .ag-direct-buy .ag-qty span { font-size: 13px; line-height: 38px; }

.TAuctionProduct .ag-direct-buy .ag-btn { flex: 1; height: 40px; font-size: 13.5px; }

/* Tercera línea: todo lo que antes eran tres bloques con sus rótulos.
   Icono en la primera columna y el texto entero en la segunda. */
.TAuctionProduct .ag-direct-note { display: flex; gap: 7px; }

.TAuctionProduct .ag-direct-note > iconify-icon {
    flex: 0 0 auto;
    font-size: 14px;
    color: var(--ag-green);
    margin-top: 1px;
}

.TAuctionProduct .ag-direct-note span {
    flex: 1;
    min-width: 0;
    font-size: 11px;
    line-height: 1.45;
    color: var(--ag-muted);
}

/* El enlace al historial de ofertas, al pie de la caja de subasta. */
.TAuctionProduct .ag-bids-link { text-align: center; }

.TAuctionProduct .ag-bids-link button {
    border: 0;
    background: none;
    font-family: inherit;
    font-size: 12.5px;
    color: var(--ag-amber-dark);
    text-decoration: underline;
    cursor: pointer;
}

/* Todas las opiniones, en la ventana. */
/* Lleva la clase del componente para heredar tokens y reglas, pero no es la
   ficha: fuera el ancho de página, el relleno y el contenedor. */
.TAuctionProduct.ag-all-reviews { width: auto; padding: 0 4px; container-type: normal; background: transparent; }
.TAuctionProduct.ag-all-reviews .ag-review { padding: 14px 0; margin: 0; border-bottom: 1px solid var(--ag-line-soft); }
.TAuctionProduct.ag-all-reviews .ag-review:last-child { border-bottom: 0; }


/*
 * ═══════════════════════════════════════════════════════════════════
 *  TABLETA Y MÓVIL: EL ANCHO ES CARO
 * ═══════════════════════════════════════════════════════════════════
 *
 * AQUÍ SÍ VA `@media`, Y NO ES UNA EXCEPCIÓN AL CRITERIO DE ARRIBA. Lo que se
 * recoloca por `@container` son las columnas de DENTRO --miden lo que les deja
 * la ficha--; lo de aquí es el ancho y el margen de la ficha MISMA, que salen
 * de `100vw`. Una consulta de contenedor sobre el propio contenedor que se
 * está midiendo no se puede escribir.
 *
 * EL CORTE ES 860, el mismo de la cabecera, el carril y la tienda: una tableta
 * de 800 que cortara aquí por otro número enseñaría la ficha con un margen y
 * la cabecera con otro, y el desnivel se ve en la columna de la izquierda.
 *
 * LO QUE SE RECUPERA, MEDIDO A 393px:
 *   antes   foto 305 de 393 --40 a la izquierda, 48 a la derecha--
 *   ahora   foto 361 de 393 --16 y 16, que es el margen del sitio--
 */
@media (max-width: 860px) {

    /* AQUÍ SE REPETÍA `width: 100%` para deshacer el ensanche de escritorio, y
       ya no hace falta: arriba es `min(1512px, 100%)`, y en un móvil el 100 %
       siempre es lo pequeño. Lo que sí es de aquí es el relleno. */
    .TAuctionProduct {
        --ag-pad: 14px;
    }

    /* La ruta, en una línea de texto de listado y no en un menú. */
    .ag-crumbs {
        padding: 8px 2px 6px;
        gap: 1px 7px;
        font-size: 11.5px;
    }
    .ag-crumbs iconify-icon { font-size: 11px; }
}

@media (max-width: 560px) {

    .TAuctionProduct { --ag-pad: 12px; }

    /*
     * LA FOTO, DE BORDE A BORDE DE LA FICHA.
     *
     * En un teléfono el margen interior de la ficha se le come a la foto el
     * 6% del ancho por cada lado, y la foto del lote es lo único que se mira
     * antes de decidir. El resto del contenido --texto, botones-- sí lo
     * necesita, así que se sale SOLO el carrusel, con el mismo número que
     * entra por `--ag-pad` y en negativo.
     *
     * Es el carrusel y no `.ag-gallery`: de esa cuelga también la tarjeta del
     * agricultor, que es texto y no debe pegarse al borde.
     */
    .TAuctionProduct .ag-gallery .TCarousel,
    .TAuctionProduct .ag-gallery .ag-shot {
        margin-inline: calc(var(--ag-pad) * -1);
        width: auto;
    }

    /* `.ag-shot` es el hueco verde de un lote SIN fotos: se sale igual que el
       carrusel, o la ficha cambia de ancho según el lote tenga foto o no. */
    .TAuctionProduct .ag-gallery .ag-shot { border-radius: 0; }

    /* Sin esquinas redondeadas ni línea lateral: ya no hay esquina que
       redondear, la foto termina donde termina la ficha. */
    .TAuctionProduct .TCarousel.is-farm .main_area {
        border-radius: 0;
        border-left: 0;
        border-right: 0;
    }

    /*
     * EL DISTINTIVO SE COLOCA RESPECTO A LA GALERÍA, NO A LA FOTO.
     *
     * `.ag-gallery` es quien tiene el `position: relative`, así que al sacar
     * el carrusel `--ag-pad` hacia fuera el distintivo se quedaba esa misma
     * distancia más adentro de la foto. Se le resta para que quede sobre la
     * imagen a la misma distancia de siempre --la píldora lleva además su
     * propio `top/left: 12px`, así que se ve a 24 del borde, igual que en
     * escritorio--.
     */
    .TAuctionProduct .ag-gallery-badge { left: calc(12px - var(--ag-pad)); }

    /* Las miniaturas no se salen: son texto de la ficha, no la foto. */
    .TAuctionProduct .TCarousel.is-farm .thumb_area { padding-inline: var(--ag-pad); }
}






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





/**
 * TFarmerCard — la tarjeta de quien cultiva o vende.
 *
 * ESTILO PROPIO Y COMPLETO, sin depender de la ficha que la contenga: se usa en
 * la de subasta agrícola y va a usarse en el perfil del productor y en los
 * listados. Los colores salen de las variables de la ficha cuando las hay, con
 * su valor de respaldo detrás para cuando se monte en otro sitio.
 *
 * Todo elemento que pinta texto declara su tamaño: la tienda tiene una regla
 * global con el shorthand `font:` que fija 12px a div/span/p/li.
 */

.TFarmerCard {
    border: 1px solid var(--ag-line, #e5e7eb);
    border-radius: var(--ag-radius, 12px);
    background: #fff;
    padding: 20px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ag-ink, #1e293b);
}

.TFarmerCard .fc-title {
    margin: 0 0 16px;
    font-size: 17px;
    font-weight: 600;
}

/* ── LA CABECERA: foto y datos ────────────────────────────────────── */

.TFarmerCard .fc-head { display: flex; gap: 14px; margin-bottom: 14px; }

.TFarmerCard .fc-avatar {
    position: relative;
    flex: 0 0 auto;
    width: 72px; height: 72px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #86efac, #16a34a);
    display: grid; place-items: center;
    color: #fff;
    font-size: 32px;
}

/* Encuadre con object-fit: una foto real no viene en la proporción del hueco
   y con max-width se sale o deja franjas. */
.TFarmerCard .fc-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.TFarmerCard .fc-check {
    position: absolute;
    right: 0; bottom: 2px;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 2px #fff;
    display: grid; place-items: center;
    overflow: hidden;
}

/* La escarapela llena su hueco: el `box-shadow` blanco de arriba es el que la
   recorta contra la foto. */
.TFarmerCard .fc-check .fc-sello { width: 100%; height: 100%; display: block; }

/*
 * TODO EL TEXTO EN LA SEGUNDA COLUMNA.
 *
 * Es la regla de alineación del proyecto: dos columnas, el icono en la primera
 * y el texto entero en la segunda, para que el nombre, el cargo y las líneas
 * con icono arranquen en la misma vertical. Nada de `margin-left` a ojo.
 */
.TFarmerCard .fc-data { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }

/*
 * EL NOMBRE Y SU CHECK, EN EL MISMO FLUJO DE TEXTO.
 *
 * Con `display: flex` el icono es una columna aparte, así que un nombre de dos
 * líneas --«Finca Los Verdes» en una tarjeta estrecha-- se partía por su lado y
 * el check se quedaba solo, pegado al borde derecho. Como texto normal, el
 * icono va detrás de la última palabra, que es donde tiene que estar.
 */
.TFarmerCard .fc-name {
    font-size: 16px;      /* con 17 el check se quedaba solo en la línea de
                             abajo en cuanto el nombre tenía tres palabras */
    font-weight: 600;
    line-height: 1.3;
}

/* EL NOMBRE ES UN ENLACE PERO NO SE LEE COMO UNO: hereda color y peso y solo se
   subraya al pasar por encima. Un azul de enlace en el nombre del agricultor lo
   convierte en un dato secundario, y es el titular de la tarjeta. */
.TFarmerCard .fc-name-link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.TFarmerCard .fc-name-link:hover { text-decoration: underline; }

.TFarmerCard .fc-name-link:focus-visible {
    outline: 2px solid var(--ag-green, #16a34a);
    outline-offset: 2px;
    border-radius: 3px;
}

/* LA ESCARAPELA AZUL, junto al nombre. Se mide en `em` para que siga al
   tamaño del nombre en la tira y en la tarjeta grande sin dos números. */
.TFarmerCard .fc-name .fc-sello {
    width: 1em;
    height: 1em;
    margin-left: 5px;
    vertical-align: -0.12em;
}

.TFarmerCard .fc-role { font-size: 12px; color: var(--ag-muted, #64748b); margin-bottom: 4px; }

.TFarmerCard .fc-line { display: flex; align-items: center; gap: 7px; }
.TFarmerCard .fc-line iconify-icon { flex: 0 0 auto; font-size: 14px; color: var(--ag-faint, #94a3b8); }
.TFarmerCard .fc-line span { font-size: 12.5px; color: var(--ag-ink-soft, #475569); }

/* ── LA PRESENTACIÓN Y EL ENLACE ──────────────────────────────────── */

.TFarmerCard .fc-bio {
    margin: 0 0 14px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--ag-ink-soft, #475569);
}

.TFarmerCard .fc-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ag-green, #16a34a);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
}

.TFarmerCard .fc-link:hover { text-decoration: underline; }

/* ── LAS CIFRAS ───────────────────────────────────────────────────── */

/*
 * `auto-fit` Y NO CUATRO COLUMNAS FIJAS: se enseñan las que se pueden
 * calcular --un vendedor recién dado de alta no tiene ventas-- y con la
 * rejilla fija quedaban dos huecos vacíos a la derecha.
 */
.TFarmerCard .fc-stats {
    display: grid;
    /* 58px + 5 de hueco es lo que hace que las CUATRO quepan en una fila con
       los 250 útiles que tiene la tarjeta en la ficha --medido--: con 74 se
       iban a 3+1, y una cifra sola en una segunda fila parece un descuadre. */
    grid-template-columns: repeat(auto-fit, minmax(58px, 1fr));
    gap: 5px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--ag-line-soft, #f1f5f9);
    text-align: center;
}

.TFarmerCard .fc-stat b {
    display: block;
    font-size: 16px;
    color: var(--ag-green-deep, #166534);
}

.TFarmerCard .fc-stat span {
    display: block;
    font-size: 10.5px;
    line-height: 1.3;
    color: var(--ag-muted, #64748b);
}

/* ═══════════════════════════════════════════════════════════════════════════
 *  LA TIRA — tableta y móvil (≤ 860 px)
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * ── POR QUÉ SE RECOGE ───────────────────────────────────────────────
 *
 * En un teléfono esta tarjeta medía 515 px --título, avatar de 72, tres líneas
 * con icono, la presentación completa y cuatro cifras-- y está colocada ENTRE
 * LA GALERÍA Y EL NOMBRE DEL PRODUCTO: había que pasar media pantalla de
 * biografía antes de leer qué se compra y cuánto cuesta. Medido el 27/09/2026.
 *
 * Recogida son unos 96 px y sigue diciendo lo mismo que importa ahí: quién es,
 * que está verificado, de dónde es y su frase. Lo demás --la presentación
 * entera, sus cifras, sus productos-- se abre en `TSellerPreview`, que es la
 * pantalla que existe para eso, encima y sin salir de la ficha.
 *
 * ── Y NO ES UN ENLACE FRÍO ──────────────────────────────────────────
 *
 * La tira ES la persona: su foto grande con el sello, su nombre y su frase
 * entrecomillada. Lo que invita a pulsar no es un «ver más», es que ya se ha
 * empezado a leer. El reclamo va debajo, en verde y discreto, y la flecha se
 * desplaza al pasar por encima -- que es lo único que hace de botón.
 *
 * El corte es 860, el mismo que el carril del sitio, la cabecera y la tienda.
 * ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 860px){

    /* UNA SOLA ESCARAPELA EN LA TIRA. En la tarjeta grande hay sitio para la
       del avatar y la del nombre; en 131 px de alto, dos son ruido. Se queda la
       del nombre, que es a lo que califica. */
    .TFarmerCard.es-tira .fc-check{ display: none; }

    .TFarmerCard.es-tira{
        padding: 12px 14px;
        cursor: pointer;
        background: linear-gradient(180deg, #f6fbf6, #fff 60%);
        border-color: var(--ag-green-soft, #cfe3d2);
        transition: border-color .15s, box-shadow .15s, transform .12s;
    }

    .TFarmerCard.es-tira:hover{
        border-color: var(--ag-green, #16a34a);
        box-shadow: 0 3px 14px rgba(20, 60, 30, .10);
    }

    /* Se hunde un pelo al tocar: en un móvil no hay `hover`, y sin esto no hay
       forma de notar que la pulsación ha entrado. */
    .TFarmerCard.es-tira:active{ transform: translateY(1px); }

    .TFarmerCard.es-tira:focus-visible{
        outline: 2px solid var(--ag-green, #16a34a);
        outline-offset: 2px;
    }

    /* LO QUE NO VA EN LA TIRA SE QUITA, no se esconde a medias: los márgenes de
       lo que queda se calculan sobre lo que de verdad hay.

       `.fc-line ~ .fc-line` Y NO `:not(:first-of-type)`: `first-of-type` mira el
       TIPO de etiqueta, no la clase, y `.fc-role` es otro `div` que va delante
       -- así que el primero de tipo era él y se escondían las DOS líneas, la
       población incluida. Se vio en pantalla: la tira salía sin el sitio. */
    .TFarmerCard.es-tira .fc-title,
    .TFarmerCard.es-tira .fc-bio,
    .TFarmerCard.es-tira .fc-stats,
    .TFarmerCard.es-tira .fc-link,
    .TFarmerCard.es-tira .fc-line ~ .fc-line{ display: none !important; }

    /* ── TODO EL TEXTO EN LA SEGUNDA COLUMNA ────────────────────────────
     *
     * La regla de alineación del proyecto: lo que va debajo del nombre arranca
     * en la MISMA vertical que el nombre. La frase y el reclamo son hermanos de
     * `.fc-head` --y no pueden meterse dentro de `.fc-data`, que el JS rellena
     * con `.html()` y se los llevaría por delante-- así que la rejilla los
     * coloca: una columna para la foto y otra para todo lo demás.
     *
     * `.fc-head` pasa a `display: contents` para que sus dos hijos sean ítems de
     * ESTA rejilla. Sin eso habría que empujar la frase con un `padding-left`
     * «que compense el avatar», que es justo lo que el proyecto prohíbe: se
     * acerca pero no cuadra, y se descuadra en cuanto el avatar cambie. */
    .TFarmerCard.es-tira{
        display: grid;
        grid-template-columns: 54px minmax(0, 1fr);
        grid-template-areas:
            "foto  datos"
            ".     frase"
            ".     ir";
        column-gap: 12px;
        align-items: center;
    }

    .TFarmerCard.es-tira .fc-head{ display: contents; }
    .TFarmerCard.es-tira .fc-avatar{ grid-area: foto; }
    .TFarmerCard.es-tira .fc-data{ grid-area: datos; }
    .TFarmerCard.es-tira .fc-resumen{ grid-area: frase; }
    .TFarmerCard.es-tira .fc-ir{ grid-area: ir; }

    .TFarmerCard.es-tira .fc-avatar{ width: 54px; height: 54px; }

    .TFarmerCard.es-tira .fc-name{ font-size: 15px; font-weight: 700; }
    .TFarmerCard.es-tira .fc-role{ font-size: 11.5px; margin-bottom: 2px; }
    .TFarmerCard.es-tira .fc-line{ font-size: 12px; margin-top: 1px; }

    /* LA FRASE DEL VENDEDOR, entrecomillada y a dos líneas: es su voz, y por eso
       no se pinta como un párrafo más. Arranca en la vertical del nombre --toda
       la tira es el flex de dos columnas de la regla del proyecto-- así que va
       dentro de `.fc-data`, no debajo de la tarjeta. */
    .TFarmerCard.es-tira .fc-resumen{
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin: 6px 0 0;
        font-size: 12.5px;
        line-height: 1.45;
        color: var(--ag-muted, #64748b);
        font-style: italic;
    }

    /* Sin frase escrita, la tira se queda en nombre y sitio --que ya dicen lo
       suyo-- y no deja dos comillas vacías. */
    .TFarmerCard.es-tira.sin-resumen .fc-resumen{ display: none; }

    .TFarmerCard.es-tira .fc-resumen::before{ content: '\201C'; }
    .TFarmerCard.es-tira .fc-resumen::after { content: '\201D'; }

    /* EL RECLAMO. Debajo de todo y alineado a la derecha: no compite con el
       nombre y queda justo donde acaba de leerse la frase. */
    .TFarmerCard.es-tira .fc-ir{
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 4px;
        margin-top: 8px;
        font-size: 12.5px;
        font-weight: 600;
        color: var(--ag-green, #16a34a);
    }

    .TFarmerCard.es-tira .fc-ir iconify-icon{
        font-size: 15px;
        transition: transform .15s;
    }

    .TFarmerCard.es-tira:hover .fc-ir iconify-icon{ transform: translateX(3px); }

    /* Quien no quiera movimiento no lo tiene (WCAG 2.3.3). */
    @media (prefers-reduced-motion: reduce){
        .TFarmerCard.es-tira,
        .TFarmerCard.es-tira .fc-ir iconify-icon{ transition: none; }
        .TFarmerCard.es-tira:active{ transform: none; }
    }
}

/* En escritorio la tarjeta no es un botón: tiene su propio enlace al pie. */
.TFarmerCard .fc-resumen,
.TFarmerCard .fc-ir{ display: none; }



/**
 * TProductTabs — el detalle del producto, en pestañas.
 *
 * Estilo propio y completo: se monta en la ficha de subasta agrícola pero no
 * depende de ella. Las variables de la ficha se usan cuando existen, con su
 * respaldo detrás para cuando el componente viva en otra pantalla.
 */

.TProductTabs {
    border: 1px solid var(--ag-line, #e5e7eb);
    border-radius: var(--ag-radius, 12px);
    background: #fff;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ag-ink, #1e293b);
    overflow: hidden;
}

/* ── LA BARRA ─────────────────────────────────────────────────────── */

.TProductTabs .pt-tabs {
    display: flex;
    /* Justo lo necesario para que las cuatro quepan en una fila: medido, con
       gap 18 y padding 20 pedían 485 sobre 470 disponibles y la última se iba
       al desplazamiento. */
    gap: 14px;
    padding: 0 16px;
    border-bottom: 1px solid var(--ag-line, #e5e7eb);
    overflow-x: auto;          /* con seis pestañas y poco ancho, se desplaza
                                  en vez de partir la barra en dos líneas */
    scrollbar-width: none;
}

.TProductTabs .pt-tabs::-webkit-scrollbar { display: none; }

.TProductTabs .pt-tab {
    flex: 0 0 auto;
    /* En línea aunque lleve icono: por la regla global de la tienda un `span`
       dentro de un botón no hereda su tamaño, así que el texto va en su propio
       elemento y se le declara aquí. */
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 14px 0 12px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    font-family: inherit;
    font-size: 13px;
    white-space: nowrap;       /* «Envíos y devoluciones» partía en dos líneas
                                  y descuadraba la altura de la barra */
    color: var(--ag-muted, #64748b);
    cursor: pointer;
}

.TProductTabs .pt-tab span { font-size: 13px; }
.TProductTabs .pt-tab iconify-icon { font-size: 16px; display: inline-block; }

.TProductTabs .pt-tab:hover { color: var(--ag-ink, #1e293b); }

.TProductTabs .pt-tab.is-on {
    color: var(--ag-green-deep, #166534);
    border-bottom-color: var(--ag-green, #16a34a);
    font-weight: 600;
}

/* ── EL CUERPO ────────────────────────────────────────────────────── */

.TProductTabs .pt-body { padding: 18px 20px 20px; }

.TProductTabs .pt-body p {
    margin: 0 0 14px;
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--ag-ink-soft, #475569);
}

.TProductTabs .pt-body p:last-child { margin-bottom: 0; }

.TProductTabs .pt-body ul { margin: 0 0 14px; padding-left: 20px; }
.TProductTabs .pt-body li { font-size: 13.5px; line-height: 1.7; color: var(--ag-ink-soft, #475569); }



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