/* ══════════════════════════════════════════════════════════════════════ LAS TARJETAS DE AGROCALIA — los tres formatos ══════════════════════════════════════════════════════════════════════ `ag-card` la completa · `ag-mini` la compacta · `ag-subasta` la fila. Comparten foto, etiqueta, corazón, nombre, vendedor, nota y precio: lo común se declara una vez y cada formato solo cambia sus medidas. ── LOS COLORES SON LOS DEL ESCAPARATE ─────────────────────────────── Tokens `--sd-*` con respaldo en el punto de uso, porque los sirve `TSellersUI` y estas tarjetas se pintan también dentro del panel de cuenta, que no lo carga. ── NO SE ESCOPAN BAJO UNA PANTALLA ────────────────────────────────── A propósito: son globales y se usan en el catálogo, en favoritos, en las colecciones y en el perfil del agricultor. El prefijo `ag-` es lo que las acota, y por eso todas las clases lo llevan. ────────────────────────────────────────────────────────────────────── */ .ag-cards { display: none; } /* ── LO QUE LA REJILLA NECESITA SABER DE LA TARJETA ────────────────── Las rejillas del escaparate y de favoritos se montan con estos tokens, y los declaraba `TProductCard`. Al retirarlo a `old/` (10/09/2026) dejaron de llegar y las rejillas caían a sus respaldos: funcionaba, pero el ancho de la tarjeta lo decidía la pantalla en vez de la tarjeta. Van en `:root` a propósito: un token declarado sobre `.ag-card` no lo ve su contenedor, que es justo quien lo usa. */ :root{ /* EL MÍNIMO. Por debajo de 260 la foto se queda pequeña y el nombre se parte en tres líneas. */ --tf-card-min: 260px; /* Y EL TOPE, porque «líquida» no es «sin límite»: una fila con una sola tarjeta le daba el ancho entero de la página, y eso no es una tarjeta de producto, es un banner. */ --tf-card-max: 350px; --tf-card-gap: 20px; } .ag-card, .ag-mini, .ag-subasta, .ag-card *, .ag-mini *, .ag-subasta * { box-sizing: border-box; } /* ── LOS `` DE LA TARJETA HEREDAN SU LETRA, A LA FUERZA ──────── * * `boot.css` declara `div, span, p, ul, li, ol { font: 12px Inter, sans-serif }` * y ese ATAJO `font` fija tamaño Y peso de un golpe. Un selector de elemento * (0,0,1) le gana siempre a un valor HEREDADO --que no tiene especificidad * ninguna-- así que todo el texto que la tarjeta mete en un `` salía a * 12px y en redonda, dijera lo que dijera su contenedor. Medido el 26/09/2026: * * .ag-vendedor 13 / 400 → su span 12 / 400 * .ag-lugar 12,5 / 400 → su span 12 / 400 * .ag-meta-it 11,5 / 500 → su span 12 / 400 * .ag-reloj 12 / 700 → su span 12 / 400 ← el que más se notaba * * O sea que el reloj de la subasta se declaraba en negrita y salía normal, y * no había forma de verlo leyendo esta hoja: hay que mirar `getComputedStyle` * DEL SPAN, no del bloque. Misma familia que las otras trampas de `boot.css` * (ver `Documentacion/Memoria/boot-css-pisa-color-heredado.md`). * * `font-size`/`font-weight`/`line-height` y no el atajo `font: inherit`: ese * arrastraría también `font-variant` y `font-stretch`, y aquí solo estorban * los tres de arriba. */ .ag-card :is(.ag-vendedor, .ag-lugar, .ag-nota, .ag-meta-it, .ag-reloj) > span, .ag-mini :is(.ag-vendedor, .ag-lugar, .ag-nota, .ag-meta-it) > span, .ag-subasta :is(.ag-vendedor, .ag-lugar, .ag-nota, .ag-meta-it) > span { font-size: inherit; font-weight: inherit; line-height: inherit; } /* ── LO COMÚN ───────────────────────────────────────────────────────── */ .ag-card, .ag-mini, .ag-subasta { position: relative; background: #fff; border: 1px solid var(--sd-borde, #e4eae4); border-radius: 14px; overflow: hidden; } .ag-card:hover, .ag-mini:hover, .ag-subasta:hover { border-color: #cfe0d3; box-shadow: 0 4px 14px rgba(20,40,25,.09); } /* La tapa cubre la tarjeta para poder pulsar en cualquier sitio. Va DEBAJO del corazón y del botón en el apilado: si no, se traga sus clics. */ .ag-card .ag-tapa, .ag-mini .ag-tapa, .ag-subasta .ag-tapa { position: absolute; inset: 0; z-index: 1; border: 0; text-decoration: none; } .ag-card .ag-foto, .ag-mini .ag-foto, .ag-subasta .ag-foto { position: relative; display: block; overflow: hidden; background: var(--sd-gris, #f2f5f2); } .ag-card .ag-foto img, .ag-mini .ag-foto img, .ag-subasta .ag-foto img { width: 100%; height: 100%; display: block; /* CUBRE EL HUECO, Y ANCLADA ARRIBA. `cover` recorta lo que sobra en vez de deformar la foto; `object-position: top` decide POR DÓNDE recorta, y en una foto de producto lo que importa está arriba --el género-- mientras que abajo suele haber caja, suelo o mesa. Con el centrado de fábrica, una foto vertical entraba por la mitad y la tarjeta enseñaba el palé. */ object-fit: cover; object-position: top; } /* SIN FOTO, EL HUECO CON SU ICONO: un rectángulo vacío se lee como una imagen que no ha cargado, y la gente recarga la página. */ .ag-card .ag-sinfoto, .ag-mini .ag-sinfoto, .ag-subasta .ag-sinfoto { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #c3cfc6; } .ag-card .ag-sinfoto iconify-icon, .ag-mini .ag-sinfoto iconify-icon, .ag-subasta .ag-sinfoto iconify-icon { font-size: 30px; } /* Oculto mientras la foto carga bien -- TAgroCard.js lo vuelve a enseñar solo si el `` falla (`onerror`). Con `display:none` en vez de quitarlo del DOM, sigue ahí para ese caso; `.remove()` no se puede deshacer. ── Y CON LA TARJETA DELANTE, QUE SI NO NO OCULTA NADA (26/09/2026) ── Estaba como `.ag-sinfoto--oculto` a secas --0,0,1,0-- contra la regla que lo enseña, `.ag-card .ag-sinfoto` --0,0,2,0--: perdía por especificidad, así que el icono de «sin foto» salía SIEMPRE, también encima de las fotos que sí habían cargado. Se veía como un cuadradito gris en mitad de cada producto y no daba ningún error: el JS y el render de PHP llevaban meses poniendo una clase que no hacía nada. */ .ag-card .ag-sinfoto--oculto, .ag-mini .ag-sinfoto--oculto, .ag-subasta .ag-sinfoto--oculto { display: none; } /* ── LA ETIQUETA DE LA ESQUINA ──────────────────────────────────────── */ .ag-card .ag-etiqueta, .ag-mini .ag-etiqueta { position: absolute; top: 10px; left: 10px; z-index: 2; display: inline-block; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1.3; color: #fff; background: var(--sd-verde, #1d753b); box-shadow: 0 1px 4px rgba(20,40,25,.2); } .ag-mini .ag-etiqueta { top: 8px; left: 8px; padding: 3px 9px; font-size: 11px; } /* 18px Y NO 10: la foto entró 8px hacia dentro (ver `.ag-card .ag-foto`), así que la esquina y el corazón se quedaban montados sobre su borde. Se suman los mismos 8 para que sigan cayendo DENTRO de la foto. */ .ag-card .ag-etiqueta { top: 18px; left: 18px; } .ag-card .ag-fav { top: 18px; right: 18px; } /* ── LOS CUATRO TONOS, Y DOS NO LLEGABAN A AA ────────────────────── * * Medido el 26/09/2026 con la letra blanca que declara `.ag-etiqueta`: * * ámbar #e8a33d + #fff → 2,16 verde #1d753b + #fff → 5,74 * rojo #ef5350 + #fff → 3,49 azul #2f6fd0 + #fff → 4,88 * * WCAG 2.1 AA pide 4,5 para texto normal, y esto son 12px. El ámbar es el que * más se ve --«Producción integrada» sale en media rejilla-- y era el peor. * * EL ÁMBAR NO SE ARREGLA OSCURECIÉNDOLO: para que quepa letra blanca hay que * bajarlo hasta que deja de ser ámbar y se vuelve marrón. Lleva LETRA OSCURA * (6,37) y se queda con su color. El rojo sí: #d32f2f con blanco da 4,98. * * Mismo hallazgo y misma decisión que en `TAuctionCard` (otra sesión, el mismo * día): ahí el ámbar con blanco daba 2,59 y se resolvió igual. */ .ag-card .ag-et--verde, .ag-mini .ag-et--verde { background: #1d753b; } .ag-card .ag-et--ambar, .ag-mini .ag-et--ambar { background: #e8a33d; color: #3d2a00; } .ag-card .ag-et--azul, .ag-mini .ag-et--azul { background: #2f6fd0; } .ag-card .ag-et--rojo, .ag-mini .ag-et--rojo { background: #d32f2f; } /* ── EL CORAZÓN ─────────────────────────────────────────────────────── */ .ag-card .ag-fav, .ag-mini .ag-fav { height: auto; min-height: 0; position: absolute; top: 9px; right: 9px; z-index: 3; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin: 0; padding: 0; background: rgba(255,255,255,.95); border: 0; border-radius: 999px; color: #9aa8a0; cursor: pointer; box-shadow: 0 1px 5px rgba(20,40,25,.18); } .ag-mini .ag-fav { top: 7px; right: 7px; width: 28px; height: 28px; } /* El corazón es un SVG inline --no un ``-- justo para poder rellenarlo: dentro de un shadow DOM el `fill="none"` de Lucide no se alcanza desde aquí. */ .ag-card .ag-corazon, .ag-mini .ag-corazon { width: 18px; height: 18px; fill: none; } .ag-mini .ag-corazon { width: 15px; height: 15px; } .ag-card .ag-fav:hover, .ag-mini .ag-fav:hover { color: #e11d48; } /* GUARDADO: rojo y RELLENO. Con solo el contorno no se distingue de «se puede guardar», que es justo lo contrario de lo que dice. */ .ag-card .ag-fav.on, .ag-mini .ag-fav.on { color: #e11d48; } .ag-card .ag-fav.on .ag-corazon, .ag-mini .ag-fav.on .ag-corazon { fill: #e11d48; } /* ── EL CUERPO ──────────────────────────────────────────────────────── */ /* EL CUERPO CRECE PARA QUE EL BOTÓN SE QUEDE ABAJO. Sin esto, el botón sube o baja según lo que haya encima --un nombre de una línea o de dos, un producto con lugar y otro sin él-- y en una rejilla eso se ve como una fila de botones a distintas alturas. Con el cuerpo en columna y el botón con `margin-top:auto`, su sitio no depende del contenido: siempre al pie de la tarjeta. */ .ag-card .ag-cuerpo, .ag-mini .ag-cuerpo { position: relative; z-index: 2; pointer-events: none; flex: 1; display: flex; flex-direction: column; } /* El cuerpo deja pasar el clic a la tapa, salvo lo que sí se pulsa. */ .ag-card .ag-cuerpo .ag-btn, .ag-mini .ag-cuerpo .ag-btn { pointer-events: auto; } .ag-card .ag-cuerpo { padding: 13px 14px 14px; } .ag-mini .ag-cuerpo { padding: 8px 10px 9px; min-height: 0; } .ag-card .ag-nombre, .ag-mini .ag-nombre, .ag-subasta .ag-nombre { margin: 0; padding: 0; font-weight: 800; line-height: 1.3; color: var(--sd-tinta, #16211a); } .ag-card .ag-nombre { font-size: 15px; } /* HASTA DOS LÍNEAS, y sin encogerse. Antes era una sola línea con puntos suspensivos porque la tarjeta medía 150px fijos; pero el cuerpo no cabía en esos 150 --foto de 71, relleno y cuatro líneas-- y el flex, al ser el nombre `overflow:hidden`, lo comprimía por debajo de su altura: el título salía cortado por abajo y montado sobre el vendedor. Con `flex:0 0 auto` cada línea conserva su altura y es la tarjeta la que crece (ver `.ag-mini`). */ .ag-mini .ag-nombre { flex: 0 0 auto; font-size: 12.5px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; } .ag-subasta .ag-nombre { font-size: 13.5px; } .ag-card .ag-vendedor, .ag-mini .ag-vendedor, .ag-subasta .ag-vendedor { margin: 3px 0 0; padding: 0; line-height: 1.35; color: var(--sd-suave, #6b7a70); } /* El icono del vendedor en su columna, como el del lugar: flex de dos columnas y todo el texto en la segunda. */ .ag-card .ag-vendedor { display: flex; align-items: center; gap: 6px; } .ag-card .ag-vendedor > iconify-icon { flex: 0 0 auto; font-size: 14px; color: var(--sd-suave, #93a09a); } /* En la compacta y en la fila no hay sitio para el icono. */ .ag-mini .ag-vendedor > iconify-icon, .ag-subasta .ag-vendedor > iconify-icon { display: none; } .ag-card .ag-vendedor { font-size: 13px; } .ag-mini .ag-vendedor { flex: 0 0 auto; font-size: 11px; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ag-subasta .ag-vendedor { font-size: 12px; } /* ── EL LUGAR ───────────────────────────────────────────────────────── */ .ag-card .ag-lugar { display: flex; align-items: center; gap: 5px; margin: 5px 0 0; padding: 0; font-size: 12.5px; line-height: 1.35; color: var(--sd-suave, #6b7a70); } /* El tamaño se declara EN el icono: `iconify-icon` no hereda el `font-size`. */ .ag-card .ag-lugar iconify-icon { flex: 0 0 auto; font-size: 14px; } /* ── LA NOTA ────────────────────────────────────────────────────────── */ .ag-card .ag-nota, .ag-mini .ag-nota { display: flex; align-items: center; gap: 5px; margin: 6px 0 0; padding: 0; } .ag-mini .ag-nota { margin-top: 3px; } /* La estrella va RELLENA. Es el trazo de Lucide copiado de su propia definición --su `` trae `fill="none"` y con `iconify-icon` vive en un shadow DOM que ninguna regla alcanza-- así que no se mezcla ninguna familia de iconos: solo se pinta el interior. */ .ag-card .ag-estrella, .ag-mini .ag-estrella { width: 16px; height: 16px; flex: 0 0 auto; fill: #feac08; color: #feac08; } .ag-mini .ag-estrella { width: 14px; height: 14px; } .ag-card .ag-nota b { font-size: 13.5px; font-weight: 700; color: var(--sd-tinta, #16211a); } .ag-mini .ag-nota b { font-size: 12px; font-weight: 700; color: var(--sd-tinta, #16211a); } .ag-card .ag-nota small { font-size: 13px; color: var(--sd-suave, #6b7a70); } .ag-mini .ag-nota small { font-size: 11.5px; color: var(--sd-suave, #6b7a70); } /* ── EL PRECIO, Y EL DESCUENTO A SU DERECHA ─────────────────────────── */ .ag-card .ag-precios, .ag-mini .ag-precios { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin: 9px 0 0; padding: 0; } .ag-mini .ag-precios { margin: 0; gap: 5px; } .ag-card .ag-precio { font-size: 18px; font-weight: 600; color: var(--sd-tinta, #16211a); font-family: sans-serif; } .ag-mini .ag-precio { font-size: 14.5px; font-weight: 800; color: var(--sd-tinta, #16211a); } /* EN OFERTA EL PRECIO VA EN ROJO: es lo que lo distingue de un precio normal de un vistazo. El tachado de al lado se lee después, no antes. */ .ag-card .ag-precio.ag-rebajado, .ag-mini .ag-precio.ag-rebajado { color: #e11d48; } .ag-card .ag-antes, .ag-mini .ag-antes { font-size: 14px; font-weight: 600; color: var(--sd-suave, #93a09a); text-decoration: line-through; } .ag-mini .ag-antes { font-size: 11.5px; } /* ── LA SUBASTA: EL RÓTULO DEL PRECIO Y EL RELOJ ──────────────────── En una subasta la cifra NO es el precio: es lo que va costando ahora mismo. El rótulo va en su propia línea, encima, y ocupa la fila entera (`flex-basis:100%`) porque `.ag-precios` es un flex en línea de base. */ .ag-card .ag-precio-rotulo, .ag-mini .ag-precio-rotulo { flex-basis: 100%; font-size: 11px; font-weight: 700; line-height: 1.2; text-transform: uppercase; letter-spacing: .4px; color: var(--sd-suave-aa, #5f6b65); } .ag-mini .ag-precio-rotulo { font-size: 10px; } /* EL RELOJ, EN ÁMBAR Y NO EN ROJO: el rojo de esta hoja es el del precio rebajado, y dos rojos en la misma tarjeta dicen dos cosas distintas. Icono en su columna y todo el texto en la segunda, como manda la regla de alineación del proyecto. */ .ag-card .ag-reloj { /* `align-self` Y `width:fit-content`: el cuerpo de la tarjeta es un flex en columna, y en un flex `inline-flex` no basta -- el hijo se estira igual y la píldora salía de borde a borde. */ display: inline-flex; align-self: flex-start; width: fit-content; align-items: center; gap: 6px; margin: 9px 0 0; padding: 4px 9px; border-radius: 99px; background: #fff7e6; border: 1px solid #f5d999; font-size: 12px; font-weight: 700; line-height: 1.2; color: #8a5a00; } .ag-card .ag-reloj iconify-icon { flex: 0 0 auto; font-size: 14px; } /* TERMINADA: la píldora pasa a gris. El ámbar avisa de que queda poco, y en una subasta cerrada ya no queda nada que avisar. #475569 sobre #f1f5f9: 7,2. */ .ag-card.es-finalizada .ag-reloj { background: #f1f5f9; border-color: #e2e8f0; color: #475569; } .ag-card.es-finalizada .ag-reloj small { color: #475569; } .ag-card .ag-reloj span { color: inherit; } .ag-card .ag-reloj small { /* #a07a33 daba 3,70 sobre el fondo de la píldora y esto son 11px: por debajo del 4,5 de AA. Con #8a6620, 4,92. */ font-size: 11px; font-weight: 500; color: #8a6620; } /* LA MENCIÓN DEL IVA: discreta pero legible (suelo de 10 px) y con contraste AA sobre el blanco de la tarjeta. El `span` no hereda el tamaño en este sitio --una regla global con `font:` lo fija--, así que se declara. */ .ag-card .ag-iva, .ag-mini .ag-iva, .ag-subasta .ag-iva { font-size: 11px; font-weight: 500; line-height: 1.2; color: var(--sd-suave-aa, #5f6b65); } .ag-mini .ag-iva { font-size: 10px; flex-basis: 100%; } .ag-subasta .ag-iva { display: block; font-size: 10px; } /* EL PRECIO POR KILO O LITRO: su propia línea bajo el precio, sobrio. Mismo tono que la mención del IVA, que es dato de lectura y no cifra de decisión. */ .ag-card .ag-ud, .ag-mini .ag-ud, .ag-subasta .ag-ud { flex-basis: 100%; font-size: 11px; font-weight: 500; line-height: 1.2; color: var(--sd-suave-aa, #5f6b65); font-variant-numeric: tabular-nums; } .ag-card .ag-ud { margin-top: -4px; } .ag-mini .ag-ud { font-size: 10px; } .ag-subasta .ag-ud { display: block; font-size: 10px; } .ag-card .ag-dto { padding: 2px 8px; background: #ef5350; border-radius: 7px; font-size: 12px; font-weight: 700; color: #fff; } /* ── EL BOTÓN ───────────────────────────────────────────────────────── */ /* `height:auto` a la fuerza: la hoja global le pone `height:25px; display:flex` a todo `button` dentro de un TComponentES6, y estas tarjetas se pintan también dentro del panel de cuenta. */ .ag-card .ag-btn, .ag-mini .ag-btn, .ag-subasta .ag-btn { height: auto; min-height: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin: 0; background: var(--sd-verde, #116f34); border: 0; border-radius: 10px; font-size: 13.5px; font-weight: 700; line-height: 1.2; color: #fff; cursor: pointer; box-shadow: none; pointer-events: auto; } .ag-card .ag-btn:hover, .ag-mini .ag-btn:hover, .ag-subasta .ag-btn:hover { background: var(--sd-verde-oscuro, #0b5a2a); } .ag-card .ag-btn iconify-icon, .ag-mini .ag-btn iconify-icon, .ag-subasta .ag-btn iconify-icon { font-size: 16px; } /* El rótulo del botón, en su ``: así se puede quitar en la vista de lista sin tocar el icono. */ .ag-card .ag-btn-txt { display: inline; } /* EL PIE. `margin-top: auto` lo empuja al fondo, que es lo que hace que todas las tarjetas de una fila tengan el botón a la misma altura. */ .ag-card .ag-pie { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 12px 14px 14px; } /* ── LA ACCIÓN DE LA TARJETA VERTICAL ES «VER PRODUCTO» ──────────── * * Diseño del usuario (26/09/2026): el botón de carrito sale de la rejilla y la * tarjeta ofrece una sola puerta, en línea y no maciza. En un catálogo * agrícola casi nada se compra de un clic --hay mínimos, calibres y formatos * que decidir-- así que el carrito desde la rejilla prometía un atajo que casi * ningún artículo admite. * * El apaisado y la vista de lista lo vuelven a encender desde * `TStorefront.css`, que gana por especificidad. */ .ag-card .ag-pie .ag-btn { display: none; } /* «VER PRODUCTO», a todo lo ancho y en línea. */ .ag-card .ag-ver { display: flex; flex: 1; width: 100%; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; /* EL BORDE, MÁS MARCADO QUE `--sd-borde`. Ese gris está pensado para separar superficies --el canto de una tarjeta sobre el fondo-- y sobre blanco casi no se ve; en un botón el borde ES el botón, porque no tiene fondo que lo dibuje. */ border: 1px solid var(--ag-borde-btn, #a9bdaf); border-radius: 10px; font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--sd-verde, #116f34); text-decoration: none; white-space: nowrap; pointer-events: auto; position: relative; z-index: 3; } .ag-card .ag-ver:hover { background: var(--sd-gris, #f2f5f2); } .ag-card .ag-ver:hover { border-color: var(--sd-verde, #116f34); } /* ── EL BORDE SE PONÍA NEGRO AL VISITARLO, Y NO SE VE MIDIENDO ────── * * La hoja global declara `a, a:active, a:focus, a:visited { … border: 0px; }`. * Ese shorthand deja `border-color` en `currentColor`, y el color del borde es * de las pocas propiedades que `:visited` SÍ puede cambiar --el navegador * bloquea el resto por privacidad--. Como `a:visited` (0,1,1) gana a una clase * suelta (0,1,0), este botón salía con el borde casi negro en cuanto se había * pinchado el producto una vez, mientras los no visitados seguían grises: dos * bordes distintos en la misma fila. * * **`getComputedStyle` no lo delata**: devuelve a propósito el valor del enlace * SIN visitar. Hay que declarar el `:visited` explícito. * Ver `Documentacion/Memoria/borde-negro-por-a-visited.md`. */ .ag-card .ag-ver:link, .ag-card .ag-ver:visited, .ag-card .ag-ver:hover, .ag-card .ag-ver:active, .ag-card .ag-ver:focus { border: 1px solid var(--ag-borde-btn, #a9bdaf); color: var(--sd-verde, #116f34); } /* El hueco mínimo sobre el botón lo pone el bloque de precios, no el botón: si lo pusiera él, `margin-top:auto` lo perdería. */ .ag-card .ag-precios { margin-bottom: 12px; } /* En la compacta se queda en su icono: a todo lo ancho se comería la tarjeta. */ .ag-mini .ag-btn-icono { width: 30px; height: 30px; flex: 0 0 30px; padding: 0; border-radius: 8px; } .ag-subasta .ag-btn { padding: 8px 14px; font-size: 12.5px; } /* ── FORMATO 1: LA COMPLETA ─────────────────────────────────────────── */ /* `height:100%` para que la tarjeta ocupe toda la celda de la rejilla: es lo que permite que el botón se vaya al fondo. Una rejilla estira sus celdas, pero la tarjeta tiene que aceptar el alto. */ .ag-card { display: flex; flex-direction: column; height: 100%; } /* EL THUMB: TODO EL ANCHO DE LA TARJETA, 138 de alto. ── EL `max-width: 210px` ESTABA MAL Y SE VEÍA ──────────────────── La maqueta mide 210 x 138 porque SU tarjeta mide 210 de ancho. Copiar los dos números dejó la foto centrada dentro de una tarjeta de 298: un rectángulo despegado de los bordes, con dos franjas blancas a los lados que se leen como un fallo de montaje. Lo que la maqueta dice de verdad es que la foto ocupa el ancho ENTERO y mide 138 de alto. El alto sí se fija --no `aspect-ratio`-- para que las tarjetas de una fila tengan el texto a la misma altura, y `object-fit: cover` en el `img` recorta lo que sobre en vez de deformar la foto. */ /* ── Y VA METIDA, CON SUS CUATRO ESQUINAS REDONDEADAS (26/09/2026) ── Petición expresa del usuario sobre la maqueta. Antes iba a sangre y con las esquinas de arriba cuadradas, pegada al canto de la tarjeta: la foto se leía como el fondo del bloque y no como el producto. Con 8px de aire alrededor y 12 de radio, la tarjeta enmarca la foto -- y el marco blanco es lo que hace que se lea como una ficha. */ .ag-card .ag-foto { display: block; width: 100%; height: 150px; margin: 8px 0 0; width: calc(100% - 16px); margin-left: 8px; border-radius: 12px; } /* ── FORMATO 2: LA COMPACTA ─────────────────────────────────────────── */ /* LA COMPACTA MIDE 178 de ancho y AL MENOS 150 de alto, con el thumb de 71: es una tarjeta de panel lateral, donde caben dos por fila. Dos tarjetas seguidas quedan iguales porque la fila las estira, no porque el alto sea fijo --fijo, el cuerpo no cabía y se solapaban título y vendedor--. */ .ag-mini { display: flex; flex-direction: column; /* Alto mínimo y no fijo: el cuerpo (nombre en dos líneas, vendedor, precio y «IVA incluido») no cabe en 79px, y con `height` fija se comprimía. */ width: 178px; min-height: 150px; max-width: 100%; } .ag-mini .ag-foto { height: 71px; flex: 0 0 71px; } .ag-mini .ag-mini-pie { display: flex; align-items: center; justify-content: space-between; gap: 8px; /* Al pie, por lo mismo que en la completa. */ margin-top: auto; padding-top: 6px; } .ag-mini .ag-mini-pie .ag-precios { margin: 0; } /* ── FORMATO 3: LA FILA DE SUBASTA ──────────────────────────────────── */ /* LA FILA DE SUBASTA: 75 de alto y el thumb CUADRADO de 57 x 57. Las dos medidas salen de la maqueta (el PNG va a escala 1:1) y el alto es exactamente el thumb más sus 9 de aire arriba y abajo. */ .ag-subasta { display: grid; grid-template-columns: 57px minmax(0, 1fr) auto; gap: 12px; align-items: center; height: 75px; padding: 9px; } .ag-subasta .ag-foto { width: 57px; height: 57px; flex: 0 0 57px; border-radius: 10px; } .ag-subasta .ag-subasta-txt { position: relative; z-index: 2; min-width: 0; pointer-events: none; } .ag-subasta .ag-queda { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; padding: 3px 9px; background: #fdecec; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: #d92d20; } .ag-subasta .ag-queda iconify-icon { font-size: 13px; } /* LA PÍLDORA VA EN ROJO SIEMPRE, falten dos horas o falten tres días. Aquí había un `.ag-holgado` que la pasaba a gris con más de un día por delante -- idea mía, no de la maqueta, y lo que conseguía era que la misma fila se viera de dos maneras distintas sin que nada lo explicara. La maqueta pinta una sola píldora, y en una subasta el tiempo SIEMPRE es el dato que decide. */ /* ── LA FILA COMO ARTÍCULO NORMAL ─────────────────────────────────── El mismo formato sirve para lo que no es subasta: cambian los textos, no la colocación. En vez de la cuenta atrás va el lugar, que es lo que la tarjeta completa pone en esa misma posición. */ .ag-subasta .ag-lugar { display: inline-flex; align-items: center; gap: 5px; margin: 6px 0 0; padding: 0; font-size: 12px; line-height: 1.35; color: var(--sd-suave, #6b7a70); } .ag-subasta .ag-lugar iconify-icon { flex: 0 0 auto; font-size: 13px; } .ag-subasta .ag-subasta-puja { position: relative; z-index: 2; text-align: right; } .ag-subasta .ag-subasta-puja small { display: block; font-size: 11px; color: var(--sd-suave, #6b7a70); } .ag-subasta .ag-subasta-puja b { display: block; margin-top: 2px; font-size: 15px; font-weight: 800; color: var(--sd-tinta, #16211a); } .ag-subasta .ag-subasta-puja .ag-btn { margin-top: 7px; } /* ── EL FOCO TIENE QUE VERSE ────────────────────────────────────────── */ .ag-card .ag-btn:focus-visible, .ag-mini .ag-btn:focus-visible, .ag-subasta .ag-btn:focus-visible, .ag-card .ag-fav:focus-visible, .ag-mini .ag-fav:focus-visible, .ag-card .ag-tapa:focus-visible, .ag-mini .ag-tapa:focus-visible, .ag-subasta .ag-tapa:focus-visible { outline: 2px solid var(--sd-verde, #04713a); outline-offset: 2px; } /* ══ LAS ETIQUETAS Y LOS DATOS DE VENTA ════════════════════════════════ * * NACÍAN OCULTAS y las encendía la hoja de cada pantalla. Desde el 26/09/2026 * son parte de la tarjeta vertical --diseño del usuario-- y se ven SIEMPRE: * las píldoras bajo el precio (qué es la mercancía) y la fila de datos debajo * (cómo y cuándo se compra). El apaisado y la vista de lista las siguen * colocando a su manera desde `TStorefront.css`, que gana por especificidad. * * Y LAS PÍLDORAS VAN BAJO EL PRECIO Y NO SOBRE LA FOTO, a propósito: * amontonarlas encima tapa el producto, que es lo único que vende en una * rejilla. Sobre la foto se queda solo la etiqueta de esquina. * * CANDIDATAS A LA HOJA COMÚN del área de cliente junto con el resto de la * tarjeta; van aquí porque son de la tarjeta, no de la tienda. */ .ag-card .ag-tags, .ag-card .ag-meta { display: flex; } /* ── LAS ETIQUETAS: qué es la mercancía ───────────────────────────── */ .ag-card .ag-tags { flex-wrap: wrap; gap: 6px; margin-top: 9px; } .ag-card .ag-tag { display: inline-flex; align-items: center; padding: 4px 11px; /* REDONDEO COMPLETO, como la maqueta: una píldora, no una etiqueta cuadrada. Es lo que la distingue del rótulo de la esquina. */ border-radius: 999px; background: #f1f4f1; border: 1px solid transparent; color: var(--sd-texto, #46514a); font-size: 11.5px; font-weight: 700; line-height: 1.4; white-space: nowrap; } /* ── LOS DOS TONOS DE LA MAQUETA ─────────────────────────────────── `eco` es una afirmación verificada --lleva certificado detrás-- y va maciza en verde; `info` es un dato del género (el calibre, un sello de finca) y va en azul pálido con letra azul. Medidos: 5,10 y 7,26 sobre sus fondos. */ .ag-card .ag-tag.es-eco { background: #1d753b; border-color: #1d753b; color: #fff; } .ag-card .ag-tag.es-info { background: #e8f0fb; border-color: #d3e3f7; color: #1f4f8f; } /* El cultivo ecológico con su verde: es el que el comprador busca, y en gris pesa lo mismo que el formato del envase. */ .ag-card .ag-tag.es-eco { background: #e8f5ec; border-color: #bfe3cb; color: #1d753b; } /* Y los sellos de finca en azul apagado: son una afirmación del agricultor --«Producción integrada», «GlobalG.A.P.»--, no un certificado ecológico, y con el mismo verde se leerían como lo segundo. */ .ag-card .ag-tag.es-info { background: #eaf2fb; border-color: #c8ddf4; color: #1c5b96; } /* ── LOS DATOS DE VENTA: cómo y cuándo se compra ──────────────────── * * SIN FONDO Y SIN FILETE (26/09/2026). Los llevaba --un `#fbfdfb` con borde * arriba-- y con las píldoras encima la tarjeta se leía partida en tres * bandas: ficha, píldoras y «pie». En la maqueta es una línea de texto * pequeño más, no una franja: lo que la separa es el aire, no una caja. * * Y SE PARTE EN DOS LÍNEAS antes que recortarse: «Envío disponible» cortado a * la mitad no dice nada. En el apaisado manda lo contrario --una sola línea * con puntos suspensivos-- y lo impone `TStorefront.css`, que gana. */ .ag-card .ag-meta { flex-wrap: wrap; align-items: center; gap: 5px 14px; margin: 10px 14px 0; padding: 0; border-top: 0; background: none; /* COMO EL CUERPO: la tapa que hace pulsable la tarjeta entera vive debajo, y sin esto esta franja se traga el clic en toda su altura. */ position: relative; z-index: 2; pointer-events: none; } .ag-card .ag-meta-it { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 500; line-height: 1.3; color: var(--sd-suave-aa, #5f6b65); white-space: nowrap; } .ag-card .ag-meta-it iconify-icon { flex: 0 0 auto; font-size: 14px; color: var(--sd-verde, #116f34); } .ag-card .ag-meta-it span { color: inherit; } /* ══ EL PIE, YA FUERA DEL CUERPO ═══════════════════════════════════════ * * Se sacó de `.ag-cuerpo` para que en apaisado pueda compartir fila con los * datos de venta. En la tarjeta vertical no cambia nada a la vista --sigue * siendo lo último y pegado al fondo por su `margin-top: auto`-- pero necesita * lo que antes le daba el cuerpo: el relleno lateral y, sobre todo, el paso del * ratón. El cuerpo es `pointer-events: none` para que la tapa que hace pulsable * la tarjeta entera reciba el clic, y sus botones lo recuperaban con una regla * propia; fuera de él, sin esto, el botón de comprar dejaba de responder EN * TODAS LAS PANTALLAS y sin un solo error. */ .ag-card > .ag-cuerpo { padding-bottom: 0; } .ag-card > .ag-pie { padding: 10px 14px 14px; position: relative; z-index: 2; pointer-events: none; } .ag-card > .ag-pie > * { pointer-events: auto; } /* ══ EL SELLO DE VERIFICADO ════════════════════════════════════════════ Relleno y azul: de trazo se lee como «se puede verificar». Va pegado al nombre del vendedor, en su línea. */ .ag-card .ag-vendedor { display: flex; align-items: center; gap: 5px; } .ag-card .ag-verificado { flex: 0 0 auto; width: 15px; height: 15px; color: #1d8cf0; } /* ── LA ETIQUETA NO SE SALE DE LA TARJETA ────────────────────────────── * * `top/left` fijos y ningún tope de ancho: con un sello de dos palabras no se * notaba, pero desde que la etiqueta puede traer el sello de cultivo del * agricultor --«Sin tratamiento postcosecha»-- se salía por la derecha de la * tarjeta y se metía por debajo del corazón. El hueco que se le deja a la * derecha es el del corazón (34px) más su margen. */ .ag-card .ag-etiqueta, .ag-mini .ag-etiqueta { max-width: calc(100% - 56px); white-space: normal; line-height: 1.25; } /* ═══════════════════════════════════════════════════════════════════════════ EL DIRECTORIO DE AGRICULTORES — la hoja común de las dos pantallas ═══════════════════════════════════════════════════════════════════════════ Todo cuelga de `.sd`. Aquí vive lo que las DOS pantallas comparten --la tarjeta del vendedor y sus cuatro tallas, los sellos, las píldoras, el bloque de búsqueda, las cifras, las etiquetas de lo filtrado y la columna de criterios--; lo propio de cada una está en su propio componente. Los verdes están MUESTREADOS del PNG de la maqueta (botón #01753b, «Buscar» #01642c, pie #005c2d), no elegidos a ojo. Y los cuatro colores de medalla, muestreados de las piezas de `/assets/sellers/`: es el mismo dorado del sello el que rodea la tarjeta. CANDIDATO A LA HOJA COMÚN DEL ÁREA DE CLIENTE (ver CLAUDE.md): la tarjeta, las píldoras, la valoración y los botones se repiten ya en TOrderDetail y TReturnOrder con otros valores. Cuando esa hoja se extraiga, esto sube tal cual. ═══════════════════════════════════════════════════════════════════════════ */ .sd{ --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; --sd-borde: #e4eae4; --sd-oro: #e2a812; /* ── LOS COLORES DE LAS MEDALLAS ────────────────────────────── Muestreados de las piezas: el tono dominante de cada escarapela. Con ellos se rodea la tarjeta del vendedor que tiene ese nivel, para que la medalla y su borde sean lo mismo y no dos verdes distintos. */ --sd-m-oro: #d9a51e; --sd-m-plata: #a8adb4; --sd-m-bronce: #c1783a; --sd-m-diamante: #9aa0e8; --sd-radio: 14px; --sd-sombra: 0 2px 10px rgba(20,40,25,.06); color: var(--sd-texto); font-size: 14px; line-height: 1.45; } .sd *{ box-sizing: border-box; } .sd img{ display:block; max-width:100%; } .sd a{ color:inherit; text-decoration:none; } .sd h1,.sd h2,.sd h3,.sd h4{ margin:0; color:var(--sd-tinta); } /* EL TAMAÑO SE DECLARA EN EL ICONO, NO EN SU CAJA: `iconify-icon` no hereda el `font-size` del padre y sin esto todos saldrían al tamaño por defecto. */ .sd iconify-icon{ display:inline-block; vertical-align:-.125em; } /* La hoja global del sitio pinta de negro el borde de cualquier enlace ya visitado (`a:visited`), y estas tarjetas SON enlaces: sin esto, volver a una búsqueda las enseña todas con marco negro. `getComputedStyle` no lo delata. */ .sd a:visited, .sd a:visited *{ border-color: inherit; color: inherit; } /* El contenido recogido a la medida de la página; las franjas van a sangre. */ .sd-ancho{ max-width:1200px; margin:0 auto; padding:0 20px; } /* ═══ BOTONES ══════════════════════════════════════════════════════ */ .sd .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; } .sd .sd-btn-primary{ background:var(--sd-verde); color:#fff; } .sd .sd-btn-primary:hover{ background:var(--sd-verde-oscuro); color:#fff; } .sd .sd-btn-secondary{ background:#fff; color:var(--sd-tinta); border-color:var(--sd-borde); } .sd .sd-btn-secondary:hover{ background:var(--sd-crema); color:var(--sd-tinta); } .sd .sd-btn-blanco{ background:#fff; color:var(--sd-tinta); } .sd .sd-btn-sm{ height:34px; padding:0 14px; font-size:12.5px; } .sd .sd-btn-block{ width:100%; } /* ═══ TÍTULOS DE SECCIÓN ═══════════════════════════════════════════ */ .sd-seccion{ padding:34px 0 0; } .sd-tit{ display:flex; align-items:flex-end; gap:16px; margin-bottom:16px; } .sd-tit-txt{ flex:1; min-width:0; } .sd-tit h2{ font-size:17px; font-weight:800; letter-spacing:.3px; text-transform:uppercase; border-bottom:3px solid var(--sd-verde); display:inline-block; padding-bottom:6px; } .sd-tit p{ margin:8px 0 0; font-size:12.5px; color:var(--sd-suave); } .sd .sd-tit-mas{ flex:0 0 auto; font-size:12.5px; font-weight:700; color:var(--sd-verde); display:inline-flex; align-items:center; gap:6px; } /* ═══ EL BLOQUE DE BÚSQUEDA ════════════════════════════════════════ */ .sd-busca{ background:#fff; border:1px solid var(--sd-borde); border-radius:var(--sd-radio); box-shadow:0 14px 34px rgba(18,40,24,.13); padding:18px; } .sd-busca-fila{ display:flex; gap:12px; } .sd-busca-txt{ flex:1; display:flex; align-items:center; gap:10px; height:48px; border:1px solid var(--sd-borde); border-radius:10px; padding:0 14px; background:#fff; } .sd-busca-txt iconify-icon{ font-size:18px; color:var(--sd-tenue); flex:0 0 auto; } .sd-busca-txt input{ flex:1; min-width:0; border:0; outline:none; font-size:14px; font-family:inherit; color:var(--sd-tinta); background:transparent; } .sd .sd-btn-buscar{ height:48px; padding:0 30px; font-size:14px; background:var(--sd-verde-oscuro); color:#fff; border-radius:10px; } .sd-filtros{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:14px; } .sd-campo{ border:1px solid var(--sd-borde); border-radius:10px; padding:8px 12px 6px; background:#fff; } .sd-campo label{ display:block; font-size:11px; color:var(--sd-suave); } .sd-campo select{ width:100%; border:0; outline:none; background:transparent; font-size:13.5px; font-weight:600; color:var(--sd-tinta); font-family:inherit; padding:2px 0; cursor:pointer; } /* Los dos interruptores. APAGADOS DE SALIDA: encendidos esconden a la mayoría del censo y la primera pantalla del directorio parece vacía. */ .sd-switches{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:14px; } .sd-switch{ display:flex; align-items:center; gap:10px; border:1px solid var(--sd-borde); border-radius:10px; padding:10px 14px; cursor:pointer; background:#fff; } .sd-switch > iconify-icon{ font-size:19px; color:var(--sd-verde); flex:0 0 auto; } .sd-switch-txt{ flex:1; min-width:0; } .sd-switch-txt b{ display:block; font-size:13px; color:var(--sd-tinta); font-weight:600; } .sd-switch-txt small{ display:block; font-size:11px; color:var(--sd-suave); } .sd-palanca{ flex:0 0 auto; width:44px; height:24px; border-radius:99px; background:#d8ded8; position:relative; transition:background .18s; } .sd-palanca::after{ content:''; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:left .18s; } .sd-switch.on .sd-palanca{ background:var(--sd-verde); } .sd-switch.on .sd-palanca::after{ left:23px; } /* ═══ CIFRAS ═══════════════════════════════════════════════════════ */ .sd-cifras{ display:grid; grid-template-columns:repeat(4,1fr); background:var(--sd-crema); border:1px solid var(--sd-borde); border-radius:var(--sd-radio); margin-top:22px; } .sd-cifra{ display:flex; align-items:center; gap:12px; padding:16px 20px; } .sd-cifra + .sd-cifra{ border-left:1px solid var(--sd-borde); } .sd-cifra > iconify-icon{ font-size:22px; color:var(--sd-verde); flex:0 0 auto; } .sd-cifra div{ flex:1; min-width:0; } .sd-cifra b{ display:block; font-size:19px; font-weight:800; color:var(--sd-tinta); line-height:1.15; } .sd-cifra small{ display:block; font-size:11.5px; color:var(--sd-suave); } /* ═══ PIEZAS DE UNA TARJETA ════════════════════════════════════════ */ /* EL SELLO VERIFICADO ES UNA IMAGEN, Y LA REGLA SE ESCRIBE CON `img`. `.sd img{display:block}` (0,1,1) le gana a `.sd-verificado` (0,1,0) y el sello se iba a su propia línea debajo del nombre -- el mismo mordisco que ya estaba documentado en `.sd-card-foto img.sd-card-sello`. Con la clase Y el elemento, esta manda. Bajado tres píxeles para que se siente en la base del nombre y no sobre su altura de mayúsculas. */ .sd img.sd-verificado{ display:inline-block; vertical-align:-3px; width:16px; height:16px; margin-left:5px; object-fit:contain; } /* Icono a la izquierda y TODO el texto en la segunda columna: la regla de alineación del proyecto. Nada de `margin-left` a ojo para compensar el icono. */ .sd-linea{ display:flex; align-items:flex-start; gap:6px; margin-top:5px; } .sd-linea > iconify-icon{ font-size:13px; color:var(--sd-tenue); flex:0 0 auto; margin-top:2px; } .sd-linea span{ flex:1; min-width:0; font-size:12px; color:var(--sd-suave); } .sd-rating{ display:flex; align-items:center; gap:5px; margin-top:7px; font-size:12.5px; } .sd-rating b{ color:var(--sd-tinta); font-weight:700; } .sd-rating iconify-icon{ color:var(--sd-oro); font-size:13px; } .sd-rating small{ color:var(--sd-suave); font-size:11.5px; } .sd-hechos{ display:flex; gap:14px; margin-top:10px; margin-bottom:12px; padding-top:10px; border-top:1px solid var(--sd-borde); } .sd-hecho{ display:flex; align-items:flex-start; gap:6px; flex:1; min-width:0; } .sd-hecho > iconify-icon{ font-size:14px; color:var(--sd-verde); flex:0 0 auto; margin-top:1px; } .sd-hecho div{ flex:1; min-width:0; } .sd-hecho b{ display:block; font-size:12px; color:var(--sd-tinta); } .sd-hecho small{ display:block; font-size:10.5px; color:var(--sd-suave); } .sd-pills{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; } .sd-pill{ font-size:10.5px; font-weight:700; border-radius:99px; padding:3px 9px; background:var(--sd-verde-claro); color:var(--sd-verde-oscuro); border:1px solid var(--sd-verde-borde); } .sd-nivel{ display:inline-flex; align-items:center; gap:4px; background:var(--sd-crema); border:1px solid var(--sd-borde); border-radius:99px; padding:2px 9px 2px 3px; font-size:10px; font-weight:700; color:var(--sd-tinta); white-space:nowrap; } .sd-nivel img{ width:18px; height:18px; object-fit:contain; } .sd-proteccion{ display:flex; align-items:center; gap:7px; margin-top:auto; background:var(--sd-verde-claro); border-top:1px solid var(--sd-verde-borde); padding:9px 14px; } .sd-proteccion iconify-icon{ color:var(--sd-verde); font-size:14px; flex:0 0 auto; } .sd-proteccion span{ font-size:11.5px; font-weight:700; color:var(--sd-verde-oscuro); } /* El avatar: con foto o con su inicial. Un círculo con letra se lee como una identidad; un hueco gris, no. */ .sd-avatar{ flex:0 0 auto; width:44px; height:44px; border-radius:50%; overflow:hidden; background:var(--sd-verde-claro); color:var(--sd-verde-oscuro); font-weight:800; display:flex; align-items:center; justify-content:center; font-size:15px; border:1px solid var(--sd-verde-borde); } .sd-avatar img{ width:100%; height:100%; object-fit:cover; } /* La foto de portada cuando el vendedor no ha subido ninguna: su inicial sobre el verde de la casa. NUNCA una foto de archivo: sería enseñar una finca que no es la suya. */ .sd-portada-vacia{ position:absolute; inset:0; z-index:1; display:flex; align-items:center; justify-content:center; gap:10px; color:#7ba57f; background:linear-gradient(135deg, #e8f2e6 0%, #d7e9d6 100%); } .sd-portada-vacia iconify-icon{ font-size:26px; } /* Las iniciales, para que el hueco se lea como una identidad y no como una foto que no ha cargado. */ .sd-portada-vacia b{ font-size:22px; font-weight:800; letter-spacing:1px; color:#6f9c74; } /* ═══ LA TARJETA ════════════════════════════════════════════════════ Vive en `TSellerCard` (Storefront/templates), con sus tokens puestos en la propia tarjeta: así no pierde el borde fuera de `.sd`, en favoritos. */ /* ═══ CARRIL ═══════════════════════════════════════════════════════ */ .sd-carril{ position:relative; } .sd-carril-pista{ display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 4*14px)/5); gap:14px; overflow-x:auto; scroll-behavior:smooth; padding:4px 2px 8px; scrollbar-width:none; } .sd-carril-pista::-webkit-scrollbar{ display:none; } .sd-flecha{ position:absolute; top:50%; right:-16px; transform:translateY(-50%); z-index:3; width:34px; height:34px; border-radius:50%; background:#fff; border:1px solid var(--sd-borde); box-shadow:0 3px 10px rgba(20,40,25,.16); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--sd-tinta); } /* ═══ ETIQUETAS DE LO FILTRADO ═════════════════════════════════════ Arriba del todo y quitables una a una. Un filtro puesto hace tres pantallas y olvidado es la causa número uno de «no hay resultados». */ .sd-chips{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:12px; } .sd-chips-tit{ font-size:11.5px; font-weight:700; color:var(--sd-suave); text-transform:uppercase; letter-spacing:.4px; } .sd-chip{ display:inline-flex; align-items:center; gap:6px; background:var(--sd-verde-claro); border:1px solid var(--sd-verde-borde); border-radius:99px; padding:4px 6px 4px 11px; font-size:11.5px; font-weight:600; color:var(--sd-verde-oscuro); } .sd-chip button{ border:0; background:rgba(0,0,0,.06); color:inherit; cursor:pointer; width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:10px; padding:0; } .sd-chip button:hover{ background:var(--sd-verde); color:#fff; } .sd-chips-limpiar{ font-size:11.5px; font-weight:700; color:var(--sd-verde); cursor:pointer; display:inline-flex; align-items:center; gap:5px; background:none; border:0; font-family:inherit; } /* ═══ COLUMNA DE CRITERIOS ═════════════════════════════════════════ */ .sd-panel{ background:#fff; border:1px solid var(--sd-borde); border-radius:var(--sd-radio); box-shadow:var(--sd-sombra); overflow:hidden; } .sd-panel-cab{ display:flex; align-items:center; gap:8px; padding:11px 14px; border-bottom:1px solid var(--sd-borde); } .sd-panel-cab > iconify-icon{ color:var(--sd-verde); font-size:16px; flex:0 0 auto; } .sd-panel-cab b{ flex:1; min-width:0; font-size:13px; color:var(--sd-tinta); } .sd-panel-cab a{ font-size:11.5px; font-weight:700; color:var(--sd-verde); cursor:pointer; } .sd-grupo{ border-bottom:1px solid var(--sd-borde); } .sd-grupo:last-child{ border-bottom:0; } /* 20 ARRIBA Y 12 ABAJO, Y NO LOS 11 IGUALES DE ANTES. Cada grupo lleva su línea de separación (`.sd-grupo`), así que el rótulo se leía pegado a la raya. Y no van iguales a propósito: un título pertenece a lo que tiene DEBAJO, así que se separa más de la línea de arriba --que es el final del grupo anterior-- que de sus propias opciones. Con los dos iguales, la columna se lee como una tabla de filas sueltas y no como una lista de secciones. El relleno lateral no se toca: lo comparte con el cuerpo. */ .sd-grupo-cab{ width:100%; display:flex; align-items:center; gap:8px; padding:20px 14px 12px; background:none; border:0; cursor:pointer; font-family:inherit; text-align:left; } .sd-grupo-cab b{ flex:1; min-width:0; font-size:12.5px; font-weight:700; color:var(--sd-tinta); } .sd-grupo-cab > iconify-icon:first-child{ font-size:15px; color:var(--sd-verde); flex:0 0 auto; } .sd-grupo-flecha{ font-size:15px; color:var(--sd-tenue); transition:transform .15s; } .sd-grupo.cerrado .sd-grupo-flecha{ transform:rotate(-90deg); } /* Y el cuerpo cierra con 16: es lo que deja el aire de debajo del último control parecido al de encima del título siguiente, contando que ahí hay además una línea. */ .sd-grupo-cuerpo{ padding:0 14px 16px; } .sd-grupo.cerrado .sd-grupo-cuerpo{ display:none; } .sd-buscasub{ display:flex; align-items:center; gap:6px; border:1px solid var(--sd-borde); border-radius:8px; padding:5px 9px; margin-bottom:8px; } .sd-buscasub iconify-icon{ font-size:14px; color:var(--sd-tenue); flex:0 0 auto; } .sd-buscasub input{ flex:1; min-width:0; border:0; outline:none; font-family:inherit; font-size:12px; } /* Una casilla, con SU RECUENTO: sin él no se sabe si un filtro deja dos resultados o doscientos, y se prueba a ciegas. */ .sd-check{ display:flex; align-items:center; gap:8px; padding:4px 0; cursor:pointer; } .sd-check input{ position:absolute; opacity:0; width:0; height:0; } .sd-marca{ flex:0 0 auto; width:16px; height:16px; border:1px solid #c8d2c8; border-radius:4px; background:#fff; display:flex; align-items:center; justify-content:center; color:#fff; font-size:11px; } .sd-check input:checked + .sd-marca{ background:var(--sd-verde); border-color:var(--sd-verde); } .sd-marca iconify-icon{ visibility:hidden; } .sd-check input:checked + .sd-marca iconify-icon{ visibility:visible; } .sd-check-txt{ flex:1; min-width:0; font-size:12px; color:var(--sd-texto); display:flex; align-items:center; gap:6px; } .sd-check-txt img{ width:17px; height:17px; object-fit:contain; } .sd-check i{ flex:0 0 auto; font-style:normal; font-size:10.5px; color:var(--sd-tenue); } .sd-check input:checked ~ .sd-check-txt{ color:var(--sd-verde-oscuro); font-weight:600; } .sd-vermas{ display:inline-block; margin-top:6px; font-size:11.5px; font-weight:700; color:var(--sd-verde); cursor:pointer; } /* Valoración mínima: una sola respuesta, así que píldoras y no casillas. */ .sd-notas{ display:flex; flex-wrap:wrap; gap:6px; } .sd-nota{ cursor:pointer; } .sd-nota input{ position:absolute; opacity:0; } .sd-nota span{ display:inline-flex; align-items:center; gap:4px; border:1px solid var(--sd-borde); border-radius:99px; padding:4px 10px; font-size:11.5px; color:var(--sd-texto); } .sd-nota span iconify-icon{ color:var(--sd-oro); font-size:12px; } .sd-nota input:checked + span{ background:var(--sd-verde-claro); border-color:var(--sd-verde); color:var(--sd-verde-oscuro); font-weight:700; } /* ═══ BARRA DE RESULTADOS Y VISTAS ═════════════════════════════════ */ .sd-barra{ display:flex; align-items:center; gap:10px; margin-bottom:14px; } .sd-barra h2{ font-size:15px; font-weight:800; display:flex; align-items:center; gap:8px; text-transform:none; border:0; padding:0; } .sd-barra h2 iconify-icon{ color:var(--sd-verde); font-size:17px; } .sd-barra small{ color:var(--sd-suave); font-size:12px; } .sd-barra-sp{ flex:1; } .sd-vista{ display:flex; border:1px solid var(--sd-borde); border-radius:8px; overflow:hidden; } .sd-vista button{ width:34px; height:34px; border:0; background:#fff; cursor:pointer; color:var(--sd-suave); font-size:16px; } .sd-vista button.on{ background:var(--sd-verde-claro); color:var(--sd-verde-oscuro); } /* ═══ PAGINACIÓN ═══════════════════════════════════════════════════ */ /* LA PAGINACIÓN ES UN