/* ═══════════════════════════════════════════════════════════════════════════
 *  LA TARJETA DE UN LOTE EN EL RELOJ — autocontenida
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * ── LOS TOKENS VAN EN LA TARJETA, NO EN QUIEN LA CONTIENE ───────────
 *
 * Es el mismo mordisco que ya documenta `TSellerCard.css`: la tarjeta anterior
 * del directorio leía `--sd-borde`, `--sd-radio` y compañía de `.sd`, la raíz
 * del directorio de agricultores. Pintada en otra pantalla no había `.sd` por
 * encima, `var(--sd-borde)` quedaba sin valor, el navegador tiraba la propiedad
 * ENTERA y la tarjeta salía sin borde, sin radio y sin sombra. Sin un error.
 *
 * Esta la pintan la landing profesional, la portada y el listado de subastas, y
 * ninguna de las tres cuelga de `.sd`. Así que los tokens se declaran sobre
 * `.ax-card` y viajan con ella. Los valores son los mismos del escaparate,
 * muestreados de la maqueta aprobada; el día que la hoja común del área de
 * cliente declare la paleta, se cambian aquí y ya.
 *
 * ── NO SE ESCOPA BAJO UNA PANTALLA ──────────────────────────────────
 * Es global: el prefijo `ax-` es lo que la acota, y todas sus clases lo llevan.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* El contenedor de los `<template>` no se ve nunca. */
.ax-cards{ display:none; }

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

    --ax-tinta:  #16211a;
    --ax-texto:  #46514a;
    --ax-suave:  #6b7a70;
    /* SOLO PARA LO DECORATIVO --el icono del lugar, el hueco sin foto--: sobre
       blanco da 2,65 de contraste y WCAG AA pide 4,5. Texto que diga algo va
       en `--ax-suave`, que da 4,52. Medido, no estimado. */
    --ax-tenue:  #93a399;

    --ax-crema:  #f7faf6;
    --ax-borde:  #e4eae4;

    /* Los dos únicos que el sistema `sd-*` no tenía: el directorio de
       agricultores no enseña subidas ni bajadas de precio. */
    /* El verde de las subidas, el del diseño. El MISMO que el de la tabla
       de referencias (`--cn-sube`): dos verdes para lo mismo en la misma
       pantalla se nota aunque cada uno por separado parezca bien. */
    --ax-sube:   #4caf6f;
    --ax-baja:   #c0392b;

    --ax-radio:  14px;
    --ax-sombra: 0 2px 10px rgba(20,40,25,.06);

    position:relative;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    background:#fff;
    border:1px solid var(--ax-borde);
    border-radius:var(--ax-radio);
    box-shadow:var(--ax-sombra);
    color:var(--ax-texto);
    font-size:14px;
    line-height:1.45;
    cursor:pointer;
    transition:border-color .15s, box-shadow .15s, transform .15s;
}
.ax-card:hover{
    border-color:var(--ax-verde-borde);
    box-shadow:0 8px 22px rgba(20,40,25,.13);
    transform:translateY(-2px);
}
.ax-card *{ box-sizing:border-box; }
.ax-card a{ color:inherit; text-decoration:none; }
.ax-card iconify-icon{ display:inline-block; vertical-align:-.125em; }

/* ── EL ENLACE VISITADO: SOLO EL BORDE, NUNCA EL COLOR ──────────────
 *
 * La hoja global del sitio pinta de negro el borde de cualquier enlace ya
 * visitado, y aquí dentro hay dos enlaces: sin esto, volver a la landing
 * enseña las tarjetas con marco negro.
 *
 * PERO ESTO DECÍA TAMBIÉN `color: inherit` SOBRE `*`, Y ESO ERA EL PROBLEMA.
 * Con el `*`, TODO lo que cuelga del enlace --el distintivo de la esquina, el
 * botón, el nombre-- pasaba a heredar el color del enlace visitado: «Ver
 * subasta» salía negro sobre el verde y «Finalizada» salía ROSA sobre el
 * suyo. Se fueron parcheando uno a uno y cada pieza nueva dentro del enlace
 * volvía a caer.
 *
 * El problema que la regla venía a resolver era el BORDE, no el color. Así
 * que solo se hereda el borde, y cada pieza conserva el color que declara.
 * Con eso sobran los parches del botón y del distintivo.
 *
 * ── Y NO SE PUEDE COMPROBAR CON `getComputedStyle` ─────────────────
 *
 * Por privacidad, el navegador devuelve SIEMPRE el estilo de no-visitado para
 * un enlace visitado: el contraste que se mida sale bien aunque en pantalla
 * esté rosa. Esto hay que mirarlo con los ojos. */
.ax-card a:visited, .ax-card a:visited *{ border-color:inherit; }

/* El enlace en sí tampoco cambia de color: el nombre del lote no es un enlace
   «de los de subrayar», es el título de la tarjeta. */
.ax-card a, .ax-card a:visited{ color:inherit; }

/* ── Y LOS `span` DE DENTRO, QUE NO ES LO MISMO ─────────────────────
 *
 * Quitar el `color` del `*` de arriba arregló lo del visitado, pero quedaba
 * un magenta que NO era del visitado y por eso se confundía con él: la hoja
 * global pinta `a span { color:#910C88 }`, o sea CUALQUIER `span` dentro de
 * un enlace, visitado o no. Y un selector de elemento (0,0,2) le gana al
 * color HEREDADO, que no pesa nada --por eso el `<b>` del distintivo salía
 * blanco y el `<span>` de al lado magenta, en la misma caja--.
 *
 * Medido el 26/09/2026 en producción: `.ax-badge-txt` daba rgb(145,12,136).
 *
 * ── Y SE TAPA CON `:where()`, NO CON `.ax-card a span` ─────────────
 *
 * Porque `.ax-card a span` pesa (0,1,2) y entonces le gana también a
 * `.ax-badge{ color:#fff }` (0,1,0): el distintivo pasaba de magenta a GRIS
 * heredado, que es igual de malo y más difícil de ver. `:where()` no suma
 * nada, así que esto pesa (0,1,0) --por encima de `a span` (0,0,2), y por
 * debajo o a la par de cualquier clase que declare su color más abajo en
 * esta misma hoja--.
 *
 * O sea: los `span` que no dicen de qué color son, heredan; los que lo
 * dicen, mandan. Y no hay que acordarse de nada al añadir uno nuevo. */
.ax-card :where(a span, a:visited span){ color:inherit; }


/* FOCO VISIBLE en lo operable (WCAG 2.1 AA). Se declara con la tarjeta porque
   la tarjeta viaja a pantallas que pueden no tenerlo puesto. */
.ax-card a:focus-visible{ outline:3px solid var(--ax-verde); outline-offset:2px; border-radius:4px; }

/* ══ LA FOTO ══════════════════════════════════════════════════════════ */

/* LA FOTO ES UN ENLACE, no un `div` que el JS hace pulsable: con
   `openPage()` el manejador del componente no llega al nodo que se ve
   --comprobado--, así que la tarjeta entera no respondía y solo funcionaba el
   nombre. Un `<a>` de verdad funciona sin JavaScript y además es un camino
   para un rastreador. */
.ax-foto{
    display:block;
    position:relative;
    height:112px;
    background:var(--ax-crema);
    overflow:hidden;
    flex:0 0 auto;
}
.ax-img{ display:block; width:100%; height:100%; object-fit:cover; }

/* Sin foto, el hueco con su icono: una tarjeta más baja que las de al lado
   escalona la rejilla y se lee como que falta algo. */
.ax-sinfoto{ position:absolute; inset:0; display:grid; place-items:center; }
.ax-sinfoto iconify-icon{ font-size:30px; color:#c3cfc6; }

/* LA ESQUINA ES UNA SOLA: o la cuenta atrás o el estado. El tono llega en
   `data-tono` y NO como clase, porque un `{campo}` dentro de un `class` lo
   rellena `TFill` en el navegador pero el servidor lo imprimiría literal. */
.ax-badge{
    position:absolute; top:9px; left:9px; z-index:2;
    display:inline-flex; align-items:center; gap:5px;
    padding:4px 9px; border-radius:7px;
    font-size:11px; font-weight:700; color:#fff;
    background:rgba(20,40,25,.82);
}
.ax-badge iconify-icon{ font-size:12px; }
/* LOS CUATRO TONOS, MEDIDOS CONTRA SU TEXTO y no elegidos a ojo. Los de la
   maqueta venían del diseño y dos no llegaban: el naranja daba 4,17 y el ámbar
   con letra blanca 2,59, cuando WCAG AA pide 4,5. Y no se ve: un texto blanco
   sobre ámbar «casi» se lee, así que nadie lo mira dos veces.

     alta   #c0392b + blanco  5,44
     media  #b34700 + blanco  5,50   (era #d35400, 4,17)
     baja   #e2a812 + tinta   7,77   (era #c99a10 + blanco, 2,59)
     fin    #04713a + blanco  6,13

   El ámbar no se oscurece hasta que la letra blanca cabe --quedaría marrón--:
   se le pone letra oscura, que además es el patrón de siempre para un aviso en
   ámbar. Y el tono es `--sd-oro`, el que el sitio ya usa para las estrellas, en
   vez de estrenar un amarillo propio. */
.ax-badge[data-tono="alta"]{ background:#c0392b; }
.ax-badge[data-tono="media"]{ background:#b34700; }
.ax-badge[data-tono="baja"]{ background:#e2a812; color:var(--ax-tinta); }
.ax-badge[data-tono="fin"]{ background:var(--ax-verde); }
/* EL RESULTADO DE UN LOTE CERRADO (REGISTRO-SALA.md): «Vendido en sala» en el
   violeta de los cierres de sala de la línea de precios (#6d28d9 + blanco,
   7,1) y «Desierto» en pizarra (#475569 + blanco, 7,6). «Vendido en red» es
   el verde de siempre (`fin`). */
.ax-badge[data-tono="sala"]{ background:#6d28d9; }
.ax-badge[data-tono="desierto"]{ background:#475569; }

/* ══ EL CUERPO ════════════════════════════════════════════════════════ */

.ax-cuerpo{ display:flex; flex-direction:column; flex:1; padding:11px 13px 13px; }

/* Icono en su columna y TODO el texto en la segunda: la regla de alineación. */
.ax-linea{ display:flex; align-items:center; gap:4px; }
.ax-linea > iconify-icon{ font-size:12px; color:var(--ax-tenue); flex:0 0 auto; }
.ax-linea span{ flex:1; min-width:0; font-size:11px; color:var(--ax-suave); }

/* CON `.ax-card` DELANTE: la hoja del sitio estila todos los `h3` --peso,
   cuerpo y relleno-- y aunque (0,0,1) pierda contra (0,1,0), esta tarjeta
   viaja a pantallas cuyas hojas sí la alcanzarían. Se asegura aquí. */
.ax-card .ax-nombre{ margin:4px 0 0; padding:0; font-size:14.5px; font-weight:700;
                     line-height:1.25; color:var(--ax-tinta); }
.ax-card .ax-nombre .ax-enlace{ font-weight:700; color:var(--ax-tinta); }

.ax-vendedor{ margin:3px 0 0; font-size:11.5px; color:var(--ax-suave); }
.ax-vendedor-enlace:hover{ color:var(--ax-verde); text-decoration:underline; }
.ax-verificado{ color:var(--ax-verde); font-size:12px; vertical-align:-2px; margin-left:3px; }

.ax-pills{ display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }
.ax-pill{
    font-size:11px; font-weight:700; border-radius:99px; padding:3px 10px;
    background:var(--ax-crema); color:var(--ax-texto); border:1px solid var(--ax-borde);
}

/* ══ EL PIE DE DATOS ══════════════════════════════════════════════════
   Precio a la izquierda y el dato de apoyo a la derecha, alineados por arriba.
   `margin-top:auto` empuja el bloque al fondo: dos tarjetas de la misma fila
   con distinto número de píldoras tienen que cuadrar el precio a la misma
   altura, y si no se escalonan. */
.ax-datos{
    display:flex; align-items:flex-start; gap:12px;
    margin-top:auto; padding-top:10px;
    border-top:1px solid var(--ax-borde);
}
/* El borde y el relleno superiores necesitan aire cuando lo de arriba termina
   pegado; con `margin-top:auto` el hueco lo pone el flex, pero en la tarjeta
   más alta de la fila el auto vale 0. */
.ax-pills + .ax-datos, .ax-vendedor + .ax-datos{ margin-top:11px; }

.ax-precio{ flex:1; min-width:0; }
.ax-precio-rotulo{ display:block; font-size:10.5px; color:var(--ax-suave); }
.ax-precio-cifra{ display:block; font-size:18px; font-weight:800; color:var(--ax-tinta); line-height:1.2; }
/* «sin IVA» NO es decoración: al comprador profesional el precio va sin
   impuestos, y tiene que estar donde está el precio, no en un pie de página. */
.ax-precio-iva{ display:block; font-style:normal; font-size:10px; color:var(--ax-suave); margin-top:1px; }

/* ── LA ENTREGA (variante próxima) ────────────────────────────────── */
/* «Entrega estimada» NO SE PARTE. Cortado en «Entrega / estimada» se lee como
   dos cosas, y el plazo --que es el dato-- queda colgando en una tercera
   línea. Cabe entero a 10px, así que se le deja el ancho que necesita. */
.ax-entrega{ flex:0 0 auto; display:flex; align-items:flex-start; gap:6px; }
.ax-entrega > iconify-icon{ font-size:14px; color:var(--ax-verde); flex:0 0 auto; margin-top:1px; }
.ax-entrega-txt{ flex:1; min-width:0; }
.ax-entrega-txt small{ display:block; font-size:10px; color:var(--ax-suave); line-height:1.3; white-space:nowrap; }
/* El PLAZO en negrita: es el dato, el rótulo de encima solo lo nombra. */
.ax-entrega-plazo{ font-weight:700; color:var(--ax-tinta) !important; }

/* ── LA VARIACIÓN Y SU TRAZO (variante cerrada) ───────────────────── */
.ax-variacion{ flex:0 0 auto; max-width:132px; text-align:right; }
.ax-var{ display:inline-flex; align-items:center; gap:3px; font-size:12px; font-weight:800; }
.ax-var iconify-icon{ font-size:13px; }
.ax-var[data-dir="sube"]{ color:var(--ax-sube); }
.ax-var[data-dir="baja"]{ color:var(--ax-baja); }

/* El porcentaje NO puede ir suelto: en una subasta a la baja «+5 %» se leería
   como que cerró por encima del precio de salida, que es imposible. Dice contra
   qué se compara. */
.ax-var-pie{ display:block; font-size:10px; color:var(--ax-suave); line-height:1.25; margin-top:1px; }

/* El trazo hereda el color de la variación: una línea verde junto a un «-6 %»
   rojo es el tipo de detalle que nadie mira y que cuenta lo contrario. */
.ax-spark{ display:block; width:96px; height:26px; margin-left:auto; margin-top:2px; }
.ax-var[data-dir="sube"] ~ .ax-spark{ color:var(--ax-sube); }
.ax-var[data-dir="baja"] ~ .ax-spark{ color:var(--ax-baja); }

.ax-adjudicaciones{ margin:9px 0 0; font-size:11px; color:var(--ax-suave); }
.ax-cierre{ margin:7px 0 0; font-size:10.5px; color:var(--ax-suave); }

/* ══ EL BOTÓN ═════════════════════════════════════════════════════════
   Solo en la variante próxima: en una cerrada llevaría a una sala que ya no
   admite nada. Es el `sd-btn-primary` del escaparate, con sus valores aquí para
   que no dependa de estar bajo `.sd`. */
/* ── Y VA CON `.ax-card` DELANTE, QUE NO ES ADORNO ─────────────────
   `.ax-btn` sola es (0,1,0) y `.ax-card a{color:inherit}` --la regla que evita
   el marco negro del enlace visitado-- es (0,1,1): le GANA. El botón heredaba
   el gris del texto de la tarjeta sobre el verde, y medido con
   `getComputedStyle` daba un contraste de 1,35 contra el 4,5 que pide WCAG AA.
   Se leía como un botón desactivado, y ninguna hoja daba un aviso.
   Con `.ax-card .ax-btn` (0,2,0) manda ésta.

   ── Y CON SU `:visited`, QUE NO ES LO MISMO ───────────────────────
   Porque `.ax-card a:visited` es (0,2,1) y le gana también a (0,2,0): el
   botón se volvía oscuro sobre el verde EN CUANTO se había abierto ese lote,
   y solo entonces. Con `a.ax-btn` de por medio esto pesa (0,2,1) y (0,3,1) y
   manda en los dos estados. Ojo: esto NO se puede comprobar con
   `getComputedStyle` --el navegador devuelve siempre el estilo de
   no-visitado--; se pincha el enlace, se vuelve y se mira. */
.ax-card a.ax-btn, .ax-card a.ax-btn:visited{
    display:inline-flex; align-items:center; justify-content:center;
    width:100%; height:34px; margin-top:11px; padding:0 14px;
    border:1px solid transparent; border-radius:9px;
    background:var(--ax-verde); color:#fff;
    font-size:12.5px; font-weight:700; font-family:inherit;
    cursor:pointer; white-space:nowrap;
    transition:background .15s;
}
.ax-card a.ax-btn:hover{ background:var(--ax-verde-oscuro); color:#fff; }



/* ═══════════════════════════════════════════════════════════════════════════
 *  LA BARRA DE BÚSQUEDA DE LOTES — autocontenida
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * Mismo criterio que `TAuctionCard.css`: los tokens se declaran en la propia
 * barra y viajan con ella. La pintan la landing profesional, la portada y el
 * listado, y ninguna cuelga de `.sd`; leyendo `--sd-borde` de fuera, en la
 * pantalla que no lo tenga el navegador tira la propiedad entera y la barra
 * sale sin bordes ni fondo, sin un solo error.
 *
 * Los valores son los del escaparate, muestreados de la maqueta aprobada.
 *
 * ── EL PREFIJO ES `axs-` Y NO EL OBVIO `as-` ───────────────────────
 *
 * Porque `as-` YA ESTÁ COGIDO: `Admin/templates/TAuctionSessions` lo usa
 * (`.as-cola`, `.as-corte`, `.as-orden`…). Hoy no choca ninguna --las suyas
 * son `as-cola*` y las mías eran `as-campo`, `as-caja`, `as-btn`-- pero esos
 * tres son justo los nombres que una pantalla de formulario acaba usando, y
 * esta hoja NO se escopa bajo ninguna pantalla: el día que allí nazca un
 * `.as-btn`, uno de los dos pinta el botón del otro sin que nadie vea un
 * error. `axs-` estaba libre en todo el proyecto, comprobado.
 *
 * El prefijo es lo único que acota esta hoja, así que todas sus clases lo
 * llevan.
 * ═══════════════════════════════════════════════════════════════════════════ */

.axs-barra{
    --axs-verde:        #04713a;
    --axs-verde-oscuro: #005c2d;

    --axs-tinta:  #16211a;
    --axs-texto:  #46514a;
    --axs-suave:  #6b7a70;

    /* EL GRIS DE LA ETIQUETA NO ES `--axs-suave`, Y ES POR EL FONDO.
       #6b7a70 da 4,52 sobre blanco --pasa-- pero esta barra tiene fondo
       crema, y sobre #f7faf6 baja a 4,30: por debajo del 4,5 de WCAG AA.
       Medido con getComputedStyle sobre la barra pintada, no calculado sobre
       el token. Es la trampa de heredar un color pensado para otro fondo.
       #5f6d66 da 5,16 sobre el crema (y 5,43 sobre blanco, por si la barra
       acaba en un panel claro). */
    --axs-etiqueta: #5f6d66;

    --axs-crema:  #f7faf6;
    --axs-borde:  #e4eae4;

    --axs-radio:  14px;

    display:block;
    background:var(--axs-crema);
    border:1px solid var(--axs-borde);
    border-radius:var(--axs-radio);
    padding:20px 22px 22px;
    color:var(--axs-texto);
    font-size:14px;
    line-height:1.45;
}
.axs-barra *{ box-sizing:border-box; }

/* Icono en su columna y el título en la segunda: la regla de alineación. */
.axs-tit{ display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.axs-tit iconify-icon{ font-size:21px; color:var(--axs-verde); flex:0 0 auto; }
.axs-tit h2{ margin:0; padding:0; font-size:19px; font-weight:800; color:var(--axs-tinta); }

/* CUATRO COLUMNAS: siete campos y el botón hacen exactamente dos filas. Con
   tres o cinco, el botón queda suelto en una fila para él solo. */
.axs-rejilla{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }

.axs-campo label{
    display:block; margin-bottom:5px;
    font-size:11.5px; font-weight:600; color:var(--axs-etiqueta);
}
.axs-caja{
    display:flex; align-items:center; gap:8px;
    height:40px; padding:0 12px;
    background:#fff; border:1px solid var(--axs-borde); border-radius:9px;
}
.axs-caja > iconify-icon{ font-size:16px; color:var(--axs-verde); flex:0 0 auto; }
.axs-caja select{
    flex:1; min-width:0;
    border:0; outline:none; background:transparent;
    font:inherit; font-size:13px; font-weight:600; color:var(--axs-tinta);
    cursor:pointer;
}

/* El botón ocupa la última celda y se alinea con los campos, que llevan su
   etiqueta encima: sin este `flex-end` queda los 5px de la etiqueta más alto. */
.axs-envio{ display:flex; align-items:flex-end; }

/* CON `.axs-barra` DELANTE, por lo mismo que en la tarjeta: una hoja de pantalla
   con una regla sobre `button` o sobre `a` la alcanzaría con más peso, y el
   botón principal de la sección se quedaría con el color de otro. Medido en la
   tarjeta: `.ax-btn` sin prefijo perdía contra `.ax-card a` y daba 1,35 de
   contraste. Aquí se pone desde el principio. */
.axs-barra .axs-btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    width:100%; height:40px; padding:0 18px;
    border:1px solid transparent; border-radius:9px;
    background:var(--axs-verde); color:#fff;
    font-size:13.5px; font-weight:700; font-family:inherit;
    cursor:pointer; white-space:nowrap;
    transition:background .15s;
}
.axs-barra .axs-btn:hover{ background:var(--axs-verde-oscuro); color:#fff; }

/* FOCO VISIBLE (WCAG 2.1 AA). Va con la barra porque la barra viaja a pantallas
   que pueden no tenerlo puesto. */
.axs-barra select:focus-visible,
.axs-barra button:focus-visible{
    outline:3px solid var(--axs-verde); outline-offset:2px; border-radius:4px;
}

/* ══ PANTALLAS ESTRECHAS ══════════════════════════════════════════════ */
@media (max-width:1100px){ .axs-rejilla{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:760px){
    .axs-barra{ padding:16px; }
    .axs-rejilla{ grid-template-columns:1fr; }
}



/* ═══════════════════════════════════════════════════════════════════════════
 *  «COMPRAS PARA TU NEGOCIO» — la landing de la lonja para profesionales
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * SALE DE LA MAQUETA APROBADA (`Documentacion/PendingWorks/maquetas/compras-para-tu-negocio.html`)
 * y se trae TAL CUAL: los tokens `--sd-*` son los de `TSellersUI.css` y los
 * cuatro tonos de esquina vienen ya medidos contra su texto --alta 5,44 · media
 * 5,50 · baja 7,77 · fin 6,13-- después de que los del diseño original dieran
 * 4,17 y 2,59, por debajo del 4,5 de WCAG AA.
 *
 * ── LO QUE NO ESTÁ AQUÍ, Y ES A PROPÓSITO ───────────────────────────
 *
 * La tarjeta de subasta y la barra de búsqueda tienen SU PROPIA hoja
 * (`TAuctionCard.css`, `TAuctionSearch.css`) con sus tokens declarados en
 * ellas mismas, porque viajan a otras pantallas --la portada las usa--. Aquí
 * solo está lo de esta página: el hero, las cifras, la tabla de referencias,
 * los motivos, los pasos, las opiniones y el cierre.
 *
 * Y la cabecera del sitio tampoco: la pone la plantilla base del escaparate.
 *
 * ── CANDIDATAS A LA HOJA COMÚN ──────────────────────────────────────
 * `.cn-tit` (cabecera de sección con icono) y `.cn-cifras` van a repetirse en
 * la portada. Cuando la hoja común del área de cliente se extraiga, suben.
 * ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   MAQUETA — «Compras para tu negocio» · /para-tu-negocio
   ═══════════════════════════════════════════════════════════════════════════

   Landing de subastas y compra directa para el COMPRADOR PROFESIONAL. La
   enlaza la portada (la está haciendo la sesión «landingpage»), así que comparte
   con ella el lenguaje de la tienda y no estrena ninguno.

   ── DE DÓNDE SALE CADA COLOR ─────────────────────────────────────────
   Los tokens `--sd-*` son los de `Modules/Storefront/templates/TSellersUI/css/
   TSellersUI.css`, COPIADOS TAL CUAL para que la maqueta se vea como se verá de
   verdad. Aquí no se inventa ni un verde ni un radio: el verde de los botones es
   #04713a, el de la franja #005c2d y el crema #f7faf6, que ya son los del
   directorio de agricultores y los de la portada.

   Lo único propio de esta pantalla son las clases `.cn-*` (cn = compras para tu
   negocio): el hero con foto, la tarjeta de subasta, la tabla de referencias de
   precios y la franja de cierre. Todo lo demás --botones, píldoras, cifras,
   títulos de sección-- son las clases `sd-*` que ya existen.

   CANDIDATOS A SUBIR A LA HOJA COMÚN cuando la landing y esta pantalla estén
   asentadas (marcados también más abajo, en su sitio):
     · `.cn-tit`     — la cabecera de sección con icono, va a pasar en la portada.
     · `.cn-sub`     — la tarjeta de subasta; la portada enseña las mismas.
     · `.cn-spark`   — la línea de tendencia, se repite en tarjeta y en tabla.
     · `.cn-var`     — la variación con flecha, ídem.

   ── DE QUÉ MODELO SALE ESTA PANTALLA, Y POR QUÉ IMPORTA ──────────────
   Hay DOS sistemas de subasta en el proyecto y no son el mismo dato:
     · `DutchAuction\Lib\AuctionLot` — el RELOJ HOLANDÉS de la lonja. El
       precio BAJA de `precio_salida` a `precio_minimo`, no hay pujas y lo que
       queda son adjudicaciones (`AuctionAward`: kilos, precio, importe). Su
       ficha es `/subastas/lote/{id}`.
     · `Admin\Lib\AuctionTerms` + `AuctionBid` — subasta ASCENDENTE con pujas
       y puja automática, colgada de la ficha del artículo,
       `/articles/{slug}-{id}`. Es la que pinta el escaparate.
   ESTA PÁGINA ES LA PRIMERA: el hero dice «lonja online» y los campos de las
   tarjetas --producto, variedad, calibre, categoría, kilos, antelación de
   entrega-- son uno a uno los de `AuctionLot`. Por eso no se habla de pujas y
   por eso el enlace es `/subastas/lote/{id}`. Si alguna tarjeta llegara a
   salir de `AuctionTerms`, cambian las dos cosas: el enlace y el vocabulario.

   ── LA REGLA DE ALINEACIÓN, APLICADA EN TODAS PARTES ─────────────────
   Todo bloque «icono + texto» es un flex de dos columnas con el icono en la
   primera y TODO el texto en la segunda (`.cn-ic`). Ni un `margin-left` a ojo
   para compensar el icono, ni un `padding-left` en el padre.

   ── ICONOS ───────────────────────────────────────────────────────────
   Todos Lucide, y los 50 comprobados contra la API de Iconify antes de
   escribirlos (`api.iconify.design/lucide.json?icons=...`). Ninguno inventado:
   un nombre que no existe no da error, deja el hueco vacío.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ══ LOS TOKENS DEL SITIO ═════════════════════════════════════════════
   Copiados de TSellersUI.css. En el componente de verdad NO se redeclaran:
   la plantilla lleva `class="sd"` y los hereda. */
.cn-page{
    --sd-verde:        #04713a;
    --sd-verde-vivo:   #01753b;
    --sd-verde-oscuro: #005c2d;
    --sd-verde-claro:  #eef6ee;
    --sd-verde-borde:  #cfe3d2;

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

    --sd-crema:  #f7faf6;

    /* EL GRIS PARA TEXTO SOBRE CREMA O SOBRE FILA REALZADA. `--sd-suave`
       pasa sobre blanco (4,52) y NO sobre estos fondos (4,30 / 4,18).
       Éste da 5,16 sobre el crema. Ver la nota de arriba. */
    --cn-suave-fondo: #5f6d66;
    --sd-borde:  #e4eae4;
    --sd-oro:    #e2a812;

    --sd-radio:  14px;
    --sd-sombra: 0 2px 10px rgba(20,40,25,.06);

    /* Propios de esta pantalla: el rojo y el verde de la variación de precio.
       Son los únicos dos colores que el sistema `sd-*` no tenía, porque el
       directorio de agricultores no enseña subidas ni bajadas. */
    /* El verde de las subidas y de su relleno. Lo fija el diseño. */
    --cn-sube:  #4caf6f;
    --cn-baja:  #c0392b;

    color: var(--sd-texto);
    font-size: 14px;
    line-height: 1.45;
}

/* Acotado a la página: en la maqueta esto era `*`, `html` y `body`, que en un
   componente alcanzan al sitio entero --el relleno del body, un `box-sizing`
   que pisa a las demás hojas y un `overflow-x:hidden` en `html` que deja sin
   efecto cualquier `position:sticky` de la cabecera--. */
.cn-page, .cn-page *{ box-sizing: border-box; }
.cn-page{ max-width:100%; overflow-x:clip; color:var(--sd-texto);
          font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; }

.cn-page img{ display:block; max-width:100%; }
/* CON `:visited` EXPLÍCITO. La hoja global del sitio le da su color a todo
   enlace ya visitado, y `a:visited` tiene la misma especificidad que
   `.cn-page a`: gana la que venga después, o sea la suya. Sin esto, volver a
   la página pinta de otro color los nombres de lote y las pestañas --se vio
   en las tarjetas, donde el distintivo «Finalizada» salía rosa--.
   Y NO SE PUEDE COMPROBAR CON `getComputedStyle`: por privacidad el navegador
   devuelve siempre el estilo de no-visitado. Esto se mira con los ojos. */
/* ── Y SIN ENTRAR EN LA TARJETA DE LOTE ────────────────────────────
 *
 * `:visited` cuenta como clase, así que `.cn-page a:visited` pesa (0,2,1) y
 * ALCANZABA a los enlaces de dentro de `TAuctionCard`, que trae su hoja: le
 * ganaba a `.ax-card .ax-btn{ color:#fff }` (0,2,0) y el botón «Ver subasta»
 * se volvía gris oscuro sobre su verde EN CUANTO se había abierto ese lote.
 * Contraste medido entonces: 1,35 contra el 4,5 que pide WCAG AA.
 *
 * El `:not(.ax-card *)` va FUERA del `:where()` a propósito: así conserva el
 * peso (0,2,1) que hace falta para tapar el `a:visited` (0,1,1) de la hoja
 * global en los enlaces sueltos de la página, y a la vez no pisa a la
 * tarjeta, que ya se ocupa de los suyos. */
.cn-page a:not(.ax-card *),
.cn-page a:visited:not(.ax-card *){ color:inherit; text-decoration:none; }

/* ── Y LO QUE SÍ TIENE COLOR PROPIO, CON `a` Y CON `:visited` ──────────
 *
 * La regla de arriba es cómoda y por eso muerde: `:visited` cuenta como CLASE,
 * así que `.cn-page a:visited` pesa (0,2,1) y le gana a `.cn-page .sd-btn-primary`
 * (0,2,0) y a la antigua tarjeta verde (0,1,0). Consecuencia medida el 26/09/2026: el
 * botón verde del hero y la tarjeta verde salían con el texto NEGRO --heredado--
 * en cuanto su destino estaba visitado; en un navegador limpio se veían bien, que
 * es lo que hace que no se detecte.
 *
 * Por eso lo que lleva color propio se declara con el `a` DELANTE y con su
 * `:visited` al lado: (0,2,1) y (0,3,1), por encima de la regla general. */
.cn-page a.sd-btn-primary,   .cn-page a.sd-btn-primary:visited{ color:#fff; }
.cn-page a.sd-btn-secondary, .cn-page a.sd-btn-secondary:visited{ color:var(--sd-tinta); }
.cn-page a.sd-btn-blanco,    .cn-page a.sd-btn-blanco:visited{ color:var(--sd-tinta); }

/* ── Y LOS `span` DE DENTRO, QUE LOS PINTA LA HOJA GLOBAL ──────────────
 *
 * `a, .link, a:active, a:focus, a:visited, a span { color:#910C88 }` del boot
 * alcanza a CUALQUIER `span` dentro de un enlace, esté visitado o no, y `a span`
 * (0,0,2) le gana al color HEREDADO, que no pesa nada. Por eso el texto de la
 * tarjeta verde y su flecha salían magenta con el `<b>` en blanco al lado.
 * Se tapa con `:where()`, que NO SUMA ESPECIFICIDAD: así esto pesa (0,1,0)
 * --por encima de `a span` (0,0,2) y a la par de cualquier `.cn-loquesea`
 * que declare su color más abajo en esta hoja, que por venir después gana--.
 * Con `.cn-page a span` (0,1,2) se arreglaba el magenta pero se rompía lo
 * siguiente: el `span` que sí tiene color propio pasaba a heredarlo. */
/* Y SIN ENTRAR EN LA TARJETA DE LOTE, que trae su hoja y ya se ocupa de lo
   suyo. Las hojas se concatenan, la de la landing va DESPUÉS de la de la
   tarjeta, y con la misma especificidad gana la última: sin esta exclusión
   este `inherit` le ganaba a `.ax-badge{ color:#fff }` y el distintivo
   «Finalizada» salía gris sobre su verde --peor que el magenta que se venía
   a arreglar, porque parece un color a propósito--. */
.cn-page :where(a span, a:visited span):where(:not(.ax-card *)){ color:inherit; }
/* CADA SELECTOR CON SU PREFIJO. El sitio le mete `padding:10px 0` a todo
   `h2` y `margin` a los demás títulos --está documentado en el proyecto--,
   y aquí hay que quitarlo o la caja del título no coincide con su texto. */
.cn-page h1,.cn-page h2,.cn-page h3,.cn-page h4{ margin:0; padding:0; color:var(--sd-tinta); }
.cn-page iconify-icon{ display:inline-block; vertical-align:-.125em; }

/* FOCO VISIBLE EN TODO LO OPERABLE (WCAG 2.1 AA, exigible desde junio de 2025).
   Se declara una vez para toda la página: un `outline:none` suelto en un botón
   es lo que deja la pantalla sin teclado sin que nadie se entere. */
.cn-page a:focus-visible,
.cn-page button:focus-visible,
.cn-page select:focus-visible,
.cn-page input:focus-visible{
    outline:3px solid var(--sd-verde);
    outline-offset:2px;
    border-radius:4px;
}

.cn-page .sd-ancho{ max-width:1200px; margin:0 auto; padding:0 20px; }

/* ══ BOTONES ══════════════════════════════════════════════════════════
   Los de TSellersUI.css, sin tocar. El que cierra o es alternativo va en
   `secondary`; el principal, en `primary`. */
.cn-page .sd-btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    height:40px; padding:0 18px; border:1px solid transparent; border-radius:9px;
    font-size:13.5px; font-weight:700; cursor:pointer; white-space:nowrap;
    font-family:inherit; transition:background .15s, border-color .15s, color .15s;
}
.cn-page .sd-btn-primary{ background:var(--sd-verde); color:#fff; }
.cn-page .sd-btn-primary:hover{ background:var(--sd-verde-oscuro); color:#fff; }
.cn-page .sd-btn-secondary{ background:#fff; color:var(--sd-tinta); border-color:var(--sd-borde); }
.cn-page .sd-btn-secondary:hover{ background:var(--sd-crema); }

/* ── EL BLANCO, QUE EN LA MAQUETA ERA UN `style=""` ────────────────────
 *
 * Allí se escribió `class="sd-btn sd-btn-blanco" style="background:#fff;
 * color:var(--sd-tinta)"`, y al pasar a componente se quitó el estilo en línea
 * --que no se copia nunca-- sin declarar la clase en ninguna parte. Resultado:
 * el botón se quedaba SIN FONDO sobre el verde de la franja de cierre y se
 * leía como un enlace suelto al lado del verde. No da error: `.sd-btn` le pone
 * la caja y la tipografía, y lo único que falta es el color.
 *
 * Y SIN BORDE, al revés que `secondary`: ese vive sobre blanco y necesita el
 * contorno para existir; éste va sobre verde oscuro y el propio blanco ya lo
 * recorta. */
.cn-page .sd-btn-blanco{ background:#fff; color:var(--sd-tinta); border-color:transparent; }
.cn-page .sd-btn-blanco:hover{ background:var(--sd-crema); color:var(--sd-tinta); }
.cn-page .sd-btn-sm{ height:34px; padding:0 14px; font-size:12.5px; }
.cn-page .sd-btn-block{ width:100%; }
.cn-page .sd-btn-lg{ height:48px; padding:0 24px; font-size:14.5px; }

.cn-page .sd-pill{ display:inline-block; font-size:11px; font-weight:700; border-radius:99px; padding:3px 10px;
          background:var(--sd-crema); color:var(--sd-texto); border:1px solid var(--sd-borde); }
.cn-page .sd-pill.verde{ background:var(--sd-verde-claro); color:var(--sd-verde-oscuro); border-color:var(--sd-verde-borde); }

/* ══ EL BLOQUE «ICONO + TEXTO» ════════════════════════════════════════
   LA REGLA DURA DE ALINEACIÓN DEL PROYECTO, en una sola clase. Dos columnas:
   el icono en la primera, TODO el texto en la segunda. Así el título y lo que
   va debajo arrancan en la misma vertical sin compensar nada. */
.cn-ic{ display:flex; align-items:flex-start; gap:10px; }
.cn-ic > iconify-icon{ flex:0 0 auto; margin-top:2px; }
.cn-ic-txt{ flex:1; min-width:0; }

/* ══ EL HERO ══════════════════════════════════════════════════════════
   La foto es de fondo y el texto va encima con un velo que arranca a la
   izquierda: el texto tiene que leerse sobre CUALQUIER foto que se suba
   después, no solo sobre ésta. Sin el velo, cambiar la imagen rompe el
   contraste y nadie lo mira hasta que ya está publicado. */
.cn-hero{ position:relative; overflow:hidden; }
/* LOS TRES PISOS, DECLARADOS. El velo estaba en `z-index:auto` y la foto
   recibe `z-index:1` de una regla global del sitio: la foto ganaba y el
   titular se leía sobre las cajas de fruta. El orden del DOM no basta cuando
   uno de los dos trae un z-index de fuera. */
/* LA FOTO DEL COMPRADOR CON LA TABLETA (28/09/2026). Es más estrecha que la
   franja, así que con `inset:0` se ajusta al ancho y el hombre --al 61 % de la
   foto-- quedaba justo detrás del panel verde y sin cabeza. Se ensancha un 22 %
   hacia la izquierda (queda entre el texto y el panel, como en la maqueta) y el
   encuadre sube para que se le vea la cara. `max-width:none` porque la hoja
   de esta página pone `.cn-page img{max-width:100%}` (0,1,1) y la foto se
   cortaba antes del borde: por eso el selector lleva `.cn-page` delante. */
.cn-page .cn-hero-foto{ position:absolute; top:0; bottom:0; left:-22%; z-index:1; width:122%; max-width:none; height:100%;
               object-fit:cover; object-position:center 14%; }
/* EL VELO SOLO DONDE HAY TEXTO: macizo hasta el final de la columna del titular
   y fuera antes de llegar a la persona. Con el de antes, al 56 % todavía
   quedaba un 62 % de blanco y la foto salía lavada. */
.cn-hero-velo{
    position:absolute; inset:0; z-index:2;
    background:linear-gradient(95deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.93) 32%,
                                       rgba(255,255,255,.72) 42%, rgba(255,255,255,.12) 53%,
                                       rgba(255,255,255,0) 60%);
}
/* CON `.cn-page` DELANTE, Y NO ES DE ADORNO: este `div` lleva también
   `.sd-ancho`, y la regla de arriba --`.cn-page .sd-ancho{ padding:0 20px }`,
   (0,2,0)-- le ganaba a `.cn-hero-in` (0,1,0) y le dejaba el relleno vertical
   en CERO. El titular y la tarjeta verde salían pegados al borde de la foto.
   Cualquier regla que quiera dar relleno a algo que sea `.sd-ancho` tiene que
   pesar lo mismo o más. */
.cn-page .cn-hero-in{ position:relative; z-index:3; display:flex; align-items:flex-start; gap:30px;
             padding:44px 20px 40px; min-height:420px; }
.cn-hero-cuerpo{ flex:1 1 auto; max-width:620px; }

/* ── EL TITULAR (maqueta del 28/09/2026) ─────────────────────────────
   Dos líneas: la primera en tinta y la segunda en verde. */
.cn-hero h1{ font-size:58px; line-height:1.02; font-weight:800; letter-spacing:-1.6px; color:var(--sd-tinta); }
.cn-hero h1 em{ font-style:normal; color:var(--sd-verde); }
.cn-hero-lead{ margin:16px 0 0; font-size:16.5px; line-height:1.55; color:var(--sd-texto); max-width:540px; }

.cn-hero-botones{ display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }

/* LOS CUATRO RECLAMOS: cada uno en su columna, con el icono ENCIMA del rótulo.
   Así los cuatro rótulos arrancan en la misma vertical que su icono y no hay
   un texto que empiece más a la derecha que otro. */
.cn-claims{ display:grid; grid-template-columns:repeat(4, minmax(0, 110px)); gap:14px 22px;
            margin:26px 0 0; padding:0; list-style:none; }
.cn-claims li{ display:flex; flex-direction:column; align-items:flex-start; gap:6px;
               font-size:12.5px; font-weight:600; line-height:1.3; color:var(--sd-tinta); }
.cn-claims iconify-icon{ color:var(--sd-verde); font-size:26px; flex:0 0 auto; }

/* ── EL PANEL: LAS FORMAS DE COMPRAR ────────────────────────────────
   Verde de la casa translúcido sobre la foto, con cuatro filas-enlace y el
   botón claro del origen al pie. Cada fila: icono en su columna y TODO el texto
   en la segunda --título y subtítulo en la misma vertical--. */
.cn-panel{
    /* `margin-left:auto` para cerrar la franja por la derecha, como la maqueta. */
    flex:0 0 auto; width:330px; align-self:flex-start; margin-left:auto;
    display:flex; flex-direction:column;
    padding:16px 14px 14px;
    background:rgba(8,80,40,.84);
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
    border:1px solid rgba(255,255,255,.22); border-radius:var(--sd-radio);
    box-shadow:0 18px 40px rgba(10,40,20,.30);
    color:#fff;
}
.cn-panel-marca{ display:flex; align-items:center; gap:8px; padding:0 6px 10px; }
.cn-panel-marca img{ width:26px; height:26px; object-fit:contain; filter:brightness(0) invert(1); }
.cn-panel-marca b{ font-size:19px; font-weight:800; color:#fff; letter-spacing:-.3px; }

.cn-page a.cn-panel-fila, .cn-page a.cn-panel-fila:visited{
    display:flex; align-items:center; gap:12px;
    padding:11px 6px; color:#fff; border:0;
    border-top:1px solid rgba(255,255,255,.16);
    border-radius:8px; transition:background .15s;
}
.cn-page a.cn-panel-fila:hover{ background:rgba(255,255,255,.08); }
.cn-panel-ico{ flex:0 0 auto; width:40px; height:40px; display:flex; align-items:center; justify-content:center;
               border-radius:50%; background:rgba(255,255,255,.12); }
.cn-panel-ico iconify-icon{ font-size:20px; color:#fff; }
.cn-panel-txt{ flex:1; min-width:0; }
.cn-panel-txt b{ display:block; font-size:14px; font-weight:800; line-height:1.25; color:#fff; }
.cn-panel-txt small{ display:block; margin-top:2px; font-size:11.5px; line-height:1.4; color:rgba(255,255,255,.82); }
.cn-panel-flecha{ flex:0 0 auto; font-size:17px; color:rgba(255,255,255,.8); }

.cn-page a.cn-panel-origen, .cn-page a.cn-panel-origen:visited{
    display:flex; align-items:center; gap:10px;
    margin-top:10px; padding:12px 14px;
    background:#fff; color:var(--sd-verde-oscuro); border:0; border-radius:10px;
    font-size:13.5px; font-weight:800; line-height:1.2;
}
.cn-page a.cn-panel-origen:hover{ background:var(--sd-verde-claro); }
.cn-panel-origen > iconify-icon:first-child{ font-size:24px; color:var(--sd-verde); flex:0 0 auto; }
.cn-panel-origen span{ flex:1; min-width:0; }
.cn-panel-origen .cn-panel-flecha{ color:var(--sd-verde); }

/* ══ LA FRANJA DE CIFRAS ══════════════════════════════════════════════
   Cuatro, justo debajo del hero: icono en su círculo, la cifra, el rótulo y
   qué se cuenta. */
/* TANTAS COLUMNAS COMO CIFRAS: las que valen cero no se pintan, y con una
   rejilla fija de cuatro, dos cifras dejaban media franja vacía. */
.cn-cifras{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); background:var(--sd-verde-claro);
            border:1px solid var(--sd-verde-borde); border-radius:var(--sd-radio); margin-top:22px; }
.cn-cifra{ display:flex; align-items:center; gap:14px; padding:18px 20px; }
.cn-cifra + .cn-cifra{ border-left:1px solid var(--sd-verde-borde); }
.cn-cifra-ico{ flex:0 0 auto; width:48px; height:48px; display:flex; align-items:center; justify-content:center;
               border-radius:50%; background:#fff; }
.cn-cifra-ico iconify-icon{ font-size:24px; color:var(--sd-verde); }
.cn-cifra div{ flex:1; min-width:0; }
.cn-cifra b{ display:block; font-size:24px; font-weight:800; color:var(--sd-tinta); line-height:1.1; }
.cn-cifra div > span{ display:block; margin-top:2px; font-size:13px; font-weight:600; color:var(--sd-tinta); line-height:1.3; }
.cn-cifra small{ display:block; font-size:11.5px; color:var(--cn-suave-fondo); line-height:1.3; }

/* ══ CABECERA DE SECCIÓN ══════════════════════════════════════════════
   CANDIDATA A LA HOJA COMÚN: la portada usa la misma.
   Icono en su columna, título y subtítulo en la segunda --misma vertical-- y el
   enlace de «ver todo» al final de la fila. */
/* PROPIEDAD LARGA, no el atajo `padding`: el gutter lateral lo pone
   `.cn-page .sd-ancho` --que estas secciones también llevan-- y con el atajo
   una de las dos se lleva por delante lo de la otra. Con `padding-top` se
   componen: el hueco de aquí y los 20px de allí. */
.cn-page .cn-seccion{ padding-top:38px; }
/* `--cn-tit-linea` es la altura de la primera línea del `h2` (23px x 1.2).
   La declara el contenedor para que el título y su icono no puedan
   desviarse: quien cambie el cuerpo del título cambia las dos cosas. */
.cn-tit{ --cn-tit-linea:27.6px;
         display:flex; align-items:flex-start; gap:12px; margin-bottom:16px; }
/* La caja del icono = la altura de la PRIMERA LÍNEA del h2 (23px × 1.2), con
   el glifo centrado dentro. Con `margin-top` a ojo se alinea la caja, no el
   dibujo: el glifo de Lucide trae aire dentro de sus 24px y quedaba flotando
   sobre la mayúscula. */
.cn-page .cn-tit > iconify-icon{
    font-size:24px; color:var(--sd-verde); flex:0 0 auto;
    /* La caja del icono mide LO QUE LA PRIMERA LÍNEA DEL TÍTULO, y el glifo va
       centrado dentro: así el centro del dibujo y el de las letras coinciden,
       que es lo que el ojo lee como alineado. La medida sale de la variable
       para que no se desvíe si cambia el cuerpo del `h2`. */
    height:var(--cn-tit-linea); display:flex; align-items:center; margin-top:0;
}
.cn-tit-txt{ flex:1; min-width:0; }
.cn-tit h2{ font-size:23px; font-weight:800; line-height:1.2; letter-spacing:-.3px; }
.cn-tit p{ margin:5px 0 0; font-size:12.5px; color:var(--sd-suave); }
.cn-tit-mas{ flex:0 0 auto; align-self:flex-end; font-size:12.5px; font-weight:700;
             color:var(--sd-verde); display:inline-flex; align-items:center; gap:6px;
             border-bottom:1px solid currentColor; padding-bottom:1px; }

/* ══ EL BUSCADOR DE LOTES ═════════════════════════════════════════════
   Es un `<form method="get">` de verdad, no un panel de JavaScript: cada
   combinación de filtros tiene que ser una URL que un rastreador pueda seguir y
   un comprador pueda guardar en favoritos.

   PERO UNA URL POR COMBINACIÓN NO ES UNA URL INDEXABLE POR COMBINACIÓN. Con
   siete desplegables de vocabulario cerrado salen miles, y la mayoría sin un
   solo lote detrás. El contrato acordado con la sesión «landingpage» está
   escrito entero en la nota del pie de esta maqueta; lo que toca al marcado es
   esto:

     · los siete `<select>` arrancan con `value=""`, para poder QUITAR los
       filtros sin elegir antes de escribir la URL. Sin eso, la búsqueda vacía
       manda `product=Todos+los+productos&province=Todas+las+provincias...`:
       siete parámetros de relleno y una URL nueva que no filtra nada;
     · el formulario serializa en orden de DOM, que es el mismo siempre, así que
       de aquí no salen duplicados. PERO ESO NO BASTA, y es la parte que se
       olvida: por la página no se entra solo desde este formulario. Un enlace
       de un correo, uno tecleado a mano o uno que escriba cualquier JS futuro
       puede llegar como `?province=Malaga&product=aguacate`, y con la canónica
       apuntando a sí misma eso son DOS URLs indexables con el mismo contenido
       --justo lo que la canónica venía a evitar--.

       LA NORMALIZACIÓN VA EN EL SERVIDOR, AL EMITIR LA CANÓNICA: se ordenan los
       parámetros conocidos en un orden fijo, se tiran los vacíos y los
       desconocidos, y ESO es la canónica, venga la petición como venga. El
       mismo criterio que `HtmlCache::claveDeUrl()` aplica para la clave de
       caché (con `ksort`, y ordenando también los valores con coma), donde
       igualmente da igual en qué orden lleguen. `TStorefront.js#_comoUrl()` es
       la otra mitad: ordenar al escribir la URL desde dentro. */
.cn-busca{ background:var(--sd-crema); border:1px solid var(--sd-borde);
           border-radius:var(--sd-radio); padding:20px 22px 22px; margin-top:30px; }
.cn-busca-tit{ display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.cn-busca-tit iconify-icon{ font-size:21px; color:var(--sd-verde); flex:0 0 auto; }
.cn-busca-tit h2{ font-size:19px; font-weight:800; }
.cn-busca-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }

.cn-campo label{ display:block; font-size:11.5px; font-weight:600; color:var(--sd-suave); margin-bottom:5px; }
.cn-campo-caja{ display:flex; align-items:center; gap:8px; height:40px; padding:0 12px;
                background:#fff; border:1px solid var(--sd-borde); border-radius:9px; }
.cn-campo-caja > iconify-icon{ font-size:16px; color:var(--sd-verde); flex:0 0 auto; }
.cn-campo-caja select{ flex:1; min-width:0; border:0; outline:none; background:transparent;
                       font:inherit; font-size:13px; font-weight:600; color:var(--sd-tinta); cursor:pointer; }
/* El botón ocupa la última celda de la rejilla y se alinea con los campos, que
   llevan su etiqueta encima: sin este hueco queda cuatro píxeles más alto. */
.cn-busca-envio{ display:flex; align-items:flex-end; }
.cn-busca-envio .sd-btn{ width:100%; height:40px; }

/* ══ LA TARJETA DE SUBASTA ════════════════════════════════════════════
   CANDIDATA A LA HOJA COMÚN / A COMPONENTE PROPIO: la portada enseña estas
   mismas tarjetas, así que en el paso de PHP esto sale a
   `Storefront:TAuctionCard/view/card` y las dos páginas lo comparten.

   Dos variantes sobre la misma caja: `.es-proxima` (cuenta atrás, precio de
   salida, entrega estimada) y `.es-cerrada` (precio de adjudicación, variación
   frente a la media y kilos vendidos).
   Una segunda tarjeta para lo cerrado serían dos formatos de precio que se
   separan a la primera. */
.cn-rejilla{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }

.cn-sub{
    position:relative; display:flex; flex-direction:column; overflow:hidden;
    background:#fff; border:1px solid var(--sd-borde); border-radius:var(--sd-radio);
    box-shadow:var(--sd-sombra);
    transition:border-color .15s, box-shadow .15s, transform .15s;
}
.cn-sub:hover{ border-color:var(--sd-verde-borde); box-shadow:0 8px 22px rgba(20,40,25,.13); transform:translateY(-2px); }

/* La tapa cubre la tarjeta entera para poder pulsar en cualquier sitio, y va
   DEBAJO del botón en el apilado: si no, se traga su clic. Es un `<a href>` de
   verdad --no un `onclick`--, que es lo único que un rastreador sigue. */
.cn-sub-tapa{ position:absolute; inset:0; z-index:1; }

.cn-sub-foto{ position:relative; height:112px; background:var(--sd-crema); overflow:hidden; }
.cn-sub-foto img{ width:100%; height:100%; object-fit:cover; }

/* LA ESQUINA ES UNA SOLA: o la cuenta atrás o el estado, nunca las dos. Con
   varias etiquetas la esquina se vuelve un semáforo y deja de leerse ninguna. */
.cn-sub-badge{ position:absolute; top:9px; left:9px; z-index:2;
               display:inline-flex; align-items:center; gap:5px;
               padding:4px 9px; border-radius:7px; font-size:11px; font-weight:700; color:#fff;
               background:rgba(20,40,25,.82); backdrop-filter:blur(2px); }
.cn-sub-badge iconify-icon{ font-size:12px; }
/* LOS CUATRO TONOS, MEDIDOS CONTRA SU TEXTO al construir el componente y no
   elegidos a ojo: alta 5,44 · media 5,50 · baja 7,77 (letra oscura) · fin 6,13.
   Los del diseño original --#d35400 y #c99a10 con letra blanca-- daban 4,17 y
   2,59, por debajo del 4,5 de WCAG AA, y eso no se ve: un blanco sobre ámbar
   «casi» se lee y nadie lo mira dos veces. */
.cn-sub-badge.es-alta{ background:#c0392b; }
.cn-sub-badge.es-media{ background:#b34700; }
.cn-sub-badge.es-baja{ background:var(--sd-oro); color:var(--sd-tinta); }
.cn-sub-badge.es-fin{ background:var(--sd-verde); }

.cn-sub-cuerpo{ position:relative; z-index:2; pointer-events:none;
                display:flex; flex-direction:column; flex:1; padding:11px 13px 13px; }
/* `pointer-events:none` deja pasar el clic a la tapa; lo que SÍ es operable
   --el botón, el enlace del vendedor-- lo recupera. */
.cn-sub-cuerpo a,
.cn-sub-cuerpo button{ pointer-events:auto; }

.cn-sub-lugar{ display:flex; align-items:center; gap:4px; font-size:11px; color:var(--sd-suave); }
.cn-sub-lugar iconify-icon{ font-size:12px; color:var(--sd-tenue); flex:0 0 auto; }

.cn-sub h3{ margin:4px 0 0; font-size:14.5px; font-weight:700; line-height:1.25; color:var(--sd-tinta); }
.cn-sub-vendedor{ margin:3px 0 0; font-size:11.5px; color:var(--sd-suave); }
.cn-sub-vendedor a{ color:var(--sd-suave); }
.cn-sub-vendedor a:hover{ color:var(--sd-verde); text-decoration:underline; }
.cn-sub-vendedor iconify-icon{ color:var(--sd-verde); font-size:12px; vertical-align:-2px; margin-left:3px; }

.cn-sub-pills{ display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }

/* El pie: precio a la izquierda y el dato de apoyo a la derecha. Los dos son
   bloques icono+texto, alineados por arriba. */
.cn-sub-datos{ display:flex; align-items:flex-start; gap:12px; margin-top:11px; padding-top:10px;
               border-top:1px solid var(--sd-borde); }
.cn-sub-precio{ flex:1; min-width:0; }
.cn-sub-precio small{ display:block; font-size:10.5px; color:var(--sd-suave); }
.cn-sub-precio b{ display:block; font-size:18px; font-weight:800; color:var(--sd-tinta); line-height:1.2; }
/* «sin IVA» NO es letra pequeña decorativa: esta página es para comprador
   PROFESIONAL y el precio va sin impuestos. Tiene que estar donde está el
   precio, no en un pie de página. (REQUISITOS-LEGALES.md, punto 2.) */
.cn-sub-precio em{ display:block; font-style:normal; font-size:10px; color:var(--sd-suave); margin-top:1px; }

.cn-sub-entrega{ flex:0 0 auto; max-width:104px; }
.cn-sub-entrega small{ display:block; font-size:10px; color:var(--sd-suave); line-height:1.3; }
.cn-sub-entrega > iconify-icon{ font-size:14px; color:var(--sd-verde); margin-top:1px; }

.cn-sub .sd-btn{ margin-top:11px; }

/* ── LA VARIACIÓN Y LA LÍNEA DE TENDENCIA ──────────────────────────────
   CANDIDATAS A LA HOJA COMÚN: se repiten en la tarjeta cerrada y en la tabla.
   El color NO es el único portador del dato --va con flecha y con signo--,
   porque un daltónico no distingue el rojo del verde (WCAG 1.4.1). */
.cn-var{ display:inline-flex; align-items:center; gap:3px; font-size:12px; font-weight:800; }
.cn-var iconify-icon{ font-size:13px; }
.cn-var.sube{ color:var(--cn-sube); }
.cn-var.baja{ color:var(--cn-baja); }

.cn-spark{ display:block; width:72px; height:24px; flex:0 0 auto; margin-left:auto; }
/* El porcentaje NO puede ir suelto: en una subasta a la baja «+5 %» se leería
   como que cerró por encima del precio de salida, que es imposible. Dice
   contra qué se compara, y es lo mismo que calcula la tabla de referencias. */
.cn-var-pie{ display:block; font-size:10px; color:var(--sd-suave); line-height:1.25; margin-top:1px; }
.cn-spark.grande{ width:110px; height:28px; }

.cn-sub-cierre{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:9px; }
.cn-sub-cierre span{ font-size:10.5px; color:var(--sd-suave); }
.cn-sub-pujas{ font-size:11px; color:var(--sd-suave); margin-top:7px; }
.cn-sub-pujas b{ color:var(--sd-tinta); font-weight:700; }

/* ══ LA TABLA DE REFERENCIAS DE PRECIOS ═══════════════════════════════
   Es la tabla del sitio (`TDataTable`, piel `tdt--escaparate`), pintada en el
   servidor: su hoja es `Tbasic/css/TDataTable.css`. Aquí solo el respiro bajo
   las pestañas. Ya no hay `min-width` ni caja con `overflow-x`: la tabla se
   mide sola y en el móvil pasa a una tarjeta por producto. */
.cn-periodo-panel > .tdt{ margin-top:2px; }

/* ══ LAS PESTAÑAS DE PERIODO, SIN UNA LÍNEA DE JAVASCRIPT ═════════════
 *
 * Las cuatro tablas vienen pintadas y un `<input type="radio">` escondido por
 * pestaña decide cuál se ve: `:checked ~` enseña su panel. No hay nada que
 * enganchar, así que no puede fallar por donde falló el `<select>` --con
 * `openPage()` el manejador del componente no llegaba al nodo que se ve-- y
 * funciona antes de que cargue ningún script.
 *
 * El radio se esconde con `position:absolute; opacity:0` y NO con
 * `display:none`: así sigue siendo enfocable con el teclado y el `<label>`
 * sigue activándolo. Con `display:none` la tabla deja de poder cambiarse sin
 * ratón. */
.cn-periodos{ position:relative; }

.cn-ventana-rotulo{ margin-right:4px; font-size:11.5px; color:var(--cn-suave-fondo); }

.cn-page .cn-periodo-tab{
    display:inline-flex; align-items:center; height:30px; margin:0 4px 14px 0; padding:0 11px;
    border:1px solid var(--sd-borde); border-radius:99px;
    background:#fff; color:var(--cn-suave-fondo);
    font-size:12px; font-weight:600; white-space:nowrap; cursor:pointer;
    transition:background .15s, border-color .15s, color .15s;
}
.cn-page .cn-periodo-tab, .cn-page .cn-periodo-tab:visited{ color:var(--cn-suave-fondo); }
.cn-page .cn-periodo-tab:hover{ border-color:var(--sd-verde-borde); color:var(--sd-tinta); }

/* ── LA PUESTA, POR CLASE Y NO POR COMBINADOR DE HERMANO ───────────
   Estaba con `<input type=radio>` y `:checked + label`: el panel cambiaba,
   pero la pestaña marcada NO SE REPINTABA --`querySelectorAll` devolvía la
   etiqueta correcta para ese mismo selector y `matches()` decía `true`, y aun
   así el verde se quedaba en la de salida--. Es la invalidación de estilo del
   combinador de hermanos sobre el DOM que monta `openPage()`.

   Con una clase que se pone y se quita no hay combinador que invalidar, y el
   servidor puede pintarla ya puesta para que funcione sin JavaScript. */
.cn-page .cn-periodo-tab.es-puesto{
    background:var(--sd-verde); border-color:var(--sd-verde); color:#fff;
}
/* El enlace visitado NO puede robarle el blanco al de la pestaña puesta: es la
   misma trampa que ya mordió en el botón de la tarjeta. */
.cn-page .cn-periodo-tab.es-puesto:visited{ color:#fff; }

/* Los paneles: solo el marcado. */
.cn-periodo-panel{ display:none; }
.cn-periodo-panel.es-visible{ display:block; }


/* ══ LOS SIETE MOTIVOS ════════════════════════════════════════════════ */
/* CON EL ICONO AL LADO, siete columnas dejan ~140px por tarjeta y el título
   cae en cuatro líneas. Se reparten en las que caben sin romper el rótulo, y
   la rejilla las coloca solas. */
.cn-ventajas{ display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:12px; }
/* DOS COLUMNAS: el icono en la suya y TODO el texto en la segunda. Es la
   regla de alineación del proyecto y es como está en el diseño --antes el
   icono iba encima y el título arrancaba en otra vertical--. */
.cn-ventaja{
    display:flex; align-items:flex-start; gap:10px;
    background:#fff; border:1px solid var(--sd-borde); border-radius:11px; padding:13px 12px;
}
.cn-ventaja > iconify-icon{ flex:0 0 auto; font-size:20px; color:var(--sd-verde); margin-top:1px; }
.cn-ventaja-txt{ flex:1; min-width:0; }
.cn-ventaja b{ display:block; font-size:12.5px; font-weight:700; color:var(--sd-tinta); line-height:1.3; }
.cn-ventaja small{ display:block; margin-top:3px; font-size:11px; color:var(--sd-suave); line-height:1.35; }

/* ══ LOS CUATRO PASOS ═════════════════════════════════════════════════
   El camino entero está DENTRO de la plataforma: descubrir, pujar, entregar y
   facturar. Ningún paso dice «llama al productor», que es justo lo que esta
   pantalla tiene que evitar. */
.cn-pasos{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.cn-paso{ display:flex; align-items:flex-start; gap:11px; }
.cn-paso-n{ flex:0 0 auto; width:26px; height:26px; border-radius:50%; background:var(--sd-verde);
            color:#fff; font-size:12.5px; font-weight:800; display:flex; align-items:center; justify-content:center; }
.cn-paso-ic{ flex:0 0 auto; font-size:19px; color:var(--sd-verde); margin-top:2px; }
.cn-paso-txt{ flex:1; min-width:0; }
.cn-paso-txt b{ display:block; font-size:12.5px; font-weight:700; color:var(--sd-tinta); line-height:1.3; }
.cn-paso-txt small{ display:block; margin-top:3px; font-size:11.5px; color:var(--sd-suave); line-height:1.4; }

/* ══ LAS OPINIONES ════════════════════════════════════════════════════ */
.cn-opiniones{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.cn-opinion{ display:flex; align-items:flex-start; gap:12px; background:#fff;
             border:1px solid var(--sd-borde); border-radius:var(--sd-radio); padding:14px; }
.cn-opinion img{ flex:0 0 auto; width:62px; height:62px; border-radius:9px; object-fit:cover; }

/* Sin foto, la inicial: un hueco gris no se lee como una identidad. */
.cn-opinion-inicial{
    flex:0 0 auto; width:62px; height:62px; border-radius:9px;
    display:flex; align-items:center; justify-content:center;
    background:var(--sd-verde-claro); border:1px solid var(--sd-verde-borde);
    color:var(--sd-verde-oscuro); font-size:24px; font-weight:800;
}

/* ══ CUANDO NO HAY NINGUNA ════════════════════════════════════════════
   La sección se pinta igual y el hueco INVITA. Escondiéndola, quien acaba de
   comprar no descubre nunca que puede opinar --y la zona aparecería de golpe
   el día que alguien lo haga, que se lee como un fallo--. Centrado, porque es
   lo único que hay en la fila y alineado a la izquierda parece un error. */
/* Los dos vacíos de la página comparten forma: icono en su círculo, rótulo,
   explicación y una salida. Centrados, porque son lo único que hay en la fila
   y alineados a la izquierda se leen como un fallo de carga. */
.cn-sin-datos{
    display:flex; flex-direction:column; align-items:center; text-align:center;
    gap:4px; padding:40px 20px 34px;
}
.cn-sin-datos b{ font-size:15px; font-weight:800; color:var(--sd-tinta); }
.cn-sin-datos p{ margin:2px 0 14px; max-width:430px; font-size:12.5px;
                 color:var(--cn-suave-fondo); line-height:1.5; }

/* LA NOTA DEL MÉTODO EN UN PERIODO SIN DATOS (P2B): la misma que lleva la
   tabla debajo (`.tdt-pie-nota`, con `->note()`), con su forma --icono en su
   columna y el texto en la segunda--. Candidata a una pieza común si otra
   pantalla pública necesita su nota sin tabla. */
.cn-nota-metodo{ display:flex; gap:8px; align-items:flex-start; margin:0; font-size:12px; color:var(--sd-suave, #6b7a70); }
.cn-nota-metodo > iconify-icon{ flex:0 0 auto; font-size:15px; margin:1px 0 0; color:var(--sd-verde, #04713a); }
.cn-nota-metodo > span{ flex:1 1 auto; min-width:0; }
.cn-nota-metodo a{ color:var(--sd-verde, #04713a); font-weight:600; }

.cn-sin-opiniones{
    display:flex; flex-direction:column; align-items:center; text-align:center;
    gap:4px; padding:34px 20px 30px;
    background:var(--sd-crema);
    border:1px dashed var(--sd-verde-borde);
    border-radius:var(--sd-radio);
}
.cn-sin-icono{
    display:flex; align-items:center; justify-content:center;
    width:52px; height:52px; margin-bottom:6px;
    border-radius:50%; background:#fff; border:1px solid var(--sd-verde-borde);
}
.cn-sin-icono iconify-icon{ font-size:24px; color:var(--sd-verde); }
.cn-sin-opiniones b{ font-size:15px; font-weight:800; color:var(--sd-tinta); }
.cn-sin-opiniones p{ margin:2px 0 14px; max-width:430px; font-size:12.5px; color:var(--sd-suave); line-height:1.5; }
.cn-opinion-txt{ flex:1; min-width:0; }
.cn-opinion-txt b{ display:block; font-size:13px; font-weight:700; color:var(--sd-tinta); }
.cn-opinion-txt .cn-rol{ display:block; font-size:11px; color:var(--sd-suave); margin-top:1px; }
/* LA ESTRELLA VA COMO SVG Y NO COMO `<iconify-icon>`: la de Lucide es de trazo
   --su `<path>` trae `fill="none"`-- y dentro de `iconify-icon` vive en un
   shadow DOM que ninguna regla de esta hoja alcanza para rellenarla. Con solo
   el contorno, cinco estrellas se leen como «sin valorar», que dice justo lo
   contrario. Mismo criterio y mismo trazo que `.ag-estrella` en TAgroCard. */
.cn-estrella{ width:13px; height:13px; flex:0 0 auto; fill:var(--sd-oro); color:var(--sd-oro); }
.cn-estrella.es-vacia{ fill:none; color:#d6ddd6; }

.cn-estrellas{ display:flex; align-items:center; gap:2px; margin-top:5px; }
.cn-estrellas iconify-icon{ font-size:12px; color:var(--sd-oro); }
.cn-estrellas small{ margin-left:5px; font-size:10.5px; color:var(--sd-tenue); }
.cn-opinion-txt p{ margin:7px 0 0; font-size:12px; line-height:1.5; color:var(--sd-texto); }

/* ══ LA FRANJA DE CIERRE ══════════════════════════════════════════════ */
.cn-cierre{ position:relative; margin-top:44px; overflow:hidden; }
/* Los tres pisos, por lo mismo que en el hero: la foto trae `z-index:1` de
   una regla global y con el velo en `auto` ganaba ella. */
.cn-cierre-foto{ position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover; }
/* LOS VALORES DE LA MAQUETA, que se habían subido a .88 y .72 «por si acaso»
   y dejaban la franja como un rectángulo verde plano. El texto va todo a la
   IZQUIERDA, donde el velo es .94, así que aflojar el extremo derecho no le
   quita contraste a nada y devuelve la foto, que es lo que se ve en el
   diseño. */
.cn-cierre-velo{ position:absolute; inset:0; z-index:2;
                 background:linear-gradient(90deg, rgba(0,58,28,.94) 0%, rgba(0,72,35,.86) 52%, rgba(0,80,38,.66) 100%); }
/* CON `.cn-page` DELANTE, igual que `.cn-hero-in` y por lo mismo: este `div`
   lleva también `.sd-ancho`, y `.cn-page .sd-ancho{ padding:0 20px }` (0,2,0)
   le ganaba a `.cn-cierre-in` (0,1,0) y le dejaba el relleno vertical en CERO.
   La franja salía aplastada: el titular rozando el borde de arriba y los
   botones el de abajo. */
.cn-page .cn-cierre-in{ position:relative; z-index:3; display:flex; align-items:center; gap:28px; padding:34px 20px; }
.cn-cierre-txt{ flex:1; min-width:0; }
.cn-cierre-txt h2{ font-size:24px; font-weight:800; color:#fff; line-height:1.24; letter-spacing:-.3px; }
.cn-cierre-txt p{ margin:9px 0 0; font-size:13px; color:rgba(255,255,255,.86); }
.cn-cierre-botones{ flex:0 0 auto; display:flex; flex-wrap:wrap; gap:12px; }

/* ══ PANTALLAS ESTRECHAS ══════════════════════════════════════════════
   Gutter de 16px y ni un scroll horizontal. Las rejillas caen a dos y luego a
   una; la tabla se desplaza dentro de su caja, nunca arrastrando la página. */
@media (max-width:1100px){
    /* El campo de búsqueda de la cabecera se queda sin sitio antes que el resto:
       aplastado se lee como un fallo de carga, así que se retira aquí y no en el
       corte de móvil. */
    .cn-rejilla{ grid-template-columns:repeat(2,1fr); }
    .cn-cifras{ grid-auto-flow:row; grid-template-columns:repeat(2,1fr); }
    .cn-cifra:nth-child(2n+1){ border-left:0; }
    .cn-cifra:nth-child(n+3){ border-top:1px solid var(--sd-verde-borde); }
    .cn-pasos{ grid-template-columns:repeat(2,1fr); }
    .cn-opiniones{ grid-template-columns:1fr; }
    .cn-busca-grid{ grid-template-columns:repeat(2,1fr); }
    .cn-panel{ width:290px; }
    .cn-hero h1{ font-size:44px; }
}
@media (max-width:760px){
    .cn-page .sd-ancho{ padding:0 16px; }
    .cn-page .cn-hero-in{ flex-direction:column; padding:28px 16px 30px; min-height:0; }
    .cn-hero-velo{ background:linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.92) 62%, rgba(255,255,255,.86) 100%); }
    .cn-hero h1{ font-size:34px; }
    .cn-panel{ width:100%; margin-left:0; }
    .cn-claims{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
    .cn-rejilla{ grid-template-columns:1fr; }
    .cn-cifras{ grid-auto-flow:row; grid-template-columns:1fr; }
    .cn-cifra + .cn-cifra{ border-left:0; border-top:1px solid var(--sd-verde-borde); }
    .cn-pasos{ grid-template-columns:1fr; }
    .cn-busca-grid{ grid-template-columns:1fr; }
    .cn-tit{ flex-wrap:wrap; }
    .cn-tit-mas{ width:100%; align-self:flex-start; }
    /* CON `.cn-page`, o `.sd-ancho` vuelve a quitarle el relleno de arriba
       y abajo --aquí más corto, que la franja se apila--. */
    .cn-page .cn-cierre-in{ flex-direction:column; align-items:flex-start; padding:28px 16px; }
    .cn-hero-botones .sd-btn,.cn-cierre-botones .sd-btn{ flex:1 1 auto; }
}

/* ══ LO QUE LA MAQUETA NO NECESITABA ══════════════════════════════════
   Allí el buscador traía su propio `margin-top`; aquí la barra es otro
   componente con su hoja, así que el hueco lo pone la página. */
/* Por lo mismo que `.cn-seccion`: `.cn-page .sd-ancho` declara `margin:0 auto`
   y le ganaba a este bloque, que se quedaba pegado a las cifras. */
.cn-page .cn-busca-caja{ margin-top:30px; }

/* Para un lector de pantalla y para nadie más: el `<caption>` de la tabla
   dice de qué son esas columnas, y visible sobraría. `clip-path` y no
   `display:none`, que lo sacaría también del árbol de accesibilidad. */
.cn-sr{
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip-path:inset(50%); white-space:nowrap;
}

/* El selector de periodo es un `<form>`: sin esto se apila bajo el título. */
.cn-page form.cn-ventana{ margin:0; }



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