# CSS avanzado: clases estables del widget Findalo

> Documentación para desarrolladores de Findalo (buscador SaaS para tiendas online). Versión HTML: https://findalo.io/devs/css/
> Contrato estable: los tokens, clases, variables y eventos documentados solo se amplían, nunca se renombran ni eliminan. Todo lo NO documentado es interno del widget y puede cambiar sin aviso.

El widget vive en un shadow DOM: el CSS custom se escribe en el panel (Apariencia → Avanzado → Custom CSS) y se inyecta dentro. Solo las clases listadas aquí tienen soporte garantizado. Límite: 100.000 caracteres si lo pegas en el panel (vía la Automatización IA/MCP el bloque se capa a 20.000 caracteres para que un humano pueda revisar el código). Al guardar se borran —en CUALQUIER plan, no solo en free— las reglas cuyo SELECTOR apunta a las clases o atributos del badge de Findalo (`.f_brand_*`, `[data-findalo-brand]`): es un filtro por patrón, no un análisis de lo que la regla consigue, y lo que se le escape lo corta el integrity check del widget en tiempo de ejecución.

## Clases estables

### Estructura

| Selector | Qué es |
|---|---|
| `.findalo-search-host` | Host del widget en tu página (fuera del shadow). El sitio donde declarar los tokens --fdl-* desde tu propia hoja de estilos. |
| `.kos-search` | Raíz del widget dentro del shadow. Ámbito de los tokens en el Custom CSS del panel. |
| `.topbar` | Cabecera del buscador: logo, cesta y cerrar. |
| `.logo` | Enlace del logo del comercio en la cabecera. |

### Buscador

| Selector | Qué es |
|---|---|
| `.search-box` | Caja del input de búsqueda. Lleva la clase .searching mientras hay una búsqueda en vuelo. |
| `.search-box input` | El input de búsqueda. |

### Filtros

| Selector | Qué es |
|---|---|
| `.filter-bar` | Barra bajo la cabecera: chips de filtros activos, contador y orden. |
| `.active-chip` | Chip de un filtro activo. |
| `.sort-select` | Selector de ordenación. |
| `.facets` | Sidebar de filtros (marca, categoría, características…). |
| `.facet-section` | Bloque de una faceta dentro del sidebar. |
| `.facet-label` | Una opción de filtro (checkbox + texto). |

### Resultados

| Selector | Qué es |
|---|---|
| `.results` | Contenedor principal de resultados. |
| `.grid` | Rejilla de resultados (usa las columnas configuradas en el panel). Con vista lista lleva además .grid--list. |
| `.result-banner` | Banner promocional sobre los resultados. |

### Card de producto

| Selector | Qué es |
|---|---|
| `.card` | Card de producto. |
| `.card .img` | Caja de imagen de la card. |
| `.card .name` | Nombre del producto. |
| `.card .price-row` | Fila de precios (actual + tachado si hay oferta). |
| `.card .badge` | Etiqueta de la card (oferta, agotado, novedad…). |
| `.card .add-to-cart` | Botón «Añadir al carrito» de la card. |

### Pantalla inicial

| Selector | Qué es |
|---|---|
| `.empty-state` | Pantalla inicial (antes de escribir): recientes, populares, destacados. |
| `.section-title` | Título de cada sección de la pantalla inicial. |
| `.popular-card` | Card del carrusel de populares/destacados. |
| `.recent-item` | Item de búsquedas recientes. |
| `.pre-search-banner` | Banner de la pantalla inicial. |
| `.discovery-rail` | Rail de descubrimiento (accesos a rankings) de la pantalla inicial. |

### Overlays

| Selector | Qué es |
|---|---|
| `.qv-panel` | Panel del modal de vista rápida. |
| `.quiz-panel` | Panel del quiz / buscador guiado. |

## Recetas

Ocultar «Añadir al carrito» en una categoría (las cards enlazan a la ficha):

```css
.card[href*="/tarjetas-regalo/"] .add-to-cart { display: none; }
```

Rejilla más densa en desktop:

```css
@media (min-width: 1280px) {
  .grid { grid-template-columns: repeat(6, 1fr) !important; }
}
```