/* =====================================================================
 * Buscador local y filtros del catálogo (26/09/2026)
 * Usa las variables del tema (theme.css) y tokens propios con su versión
 * de noche ([data-theme="dark"]).
 * ===================================================================== */
:root {
    --cb-azul: #1d4ed8;
    --cb-azul-suave: #e8efff;
    --cb-verde: #067647;
    --cb-verde-suave: #e6f6ee;
    --cb-ambar: #8a5a00;
    --cb-ambar-suave: #fff4dc;
    --cb-wa: #0a6e37;
}
[data-theme="dark"] {
    --cb-azul: #9db8ff;
    --cb-azul-suave: #1b2a4a;
    --cb-verde: #7fe0a8;
    --cb-verde-suave: #133322;
    --cb-ambar: #ffd27a;
    --cb-ambar-suave: #3a2d0f;
    --cb-wa: #0a6e37;
}

/* --- Sugerencias mientras se escribe --- */
.cb-sug {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    z-index: 50;
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, rgba(0, 0, 0, .1));
    border-radius: 12px;
    box-shadow: var(--shadow-lg, 0 8px 32px rgba(0, 0, 0, .12));
    overflow: hidden;
    text-align: left;
}
.cb-sug-fila {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    cursor: pointer;
    color: var(--text-primary, #1a1a1a);
    font-size: 0.93rem;
    border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, .08));
}
.cb-sug-fila:last-child { border-bottom: 0; }
.cb-sug-fila small { color: var(--text-secondary, #666); white-space: nowrap; }
.cb-sug-activa { background: var(--cb-azul-suave); }

/* --- Resumen: lo que entendió, corrección y filtros activos --- */
.cb-resumen { margin: 0 0 1.25rem; }
.cb-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0; }
.cb-rotulo { font-size: 0.88rem; font-weight: 600; color: var(--text-secondary, #666); margin-right: 2px; }
.cb-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px 4px 12px;
    border-radius: 999px;
    background: var(--cb-azul-suave);
    color: var(--cb-azul);
    font-size: 0.85rem;
    font-weight: 600;
}
.cb-chip-suave { background: var(--cb-verde-suave); color: var(--cb-verde); }
.cb-x {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    color: inherit;
    text-decoration: none;
    font-size: 1rem;
    line-height: 1;
}
.cb-x:hover, .cb-x:focus-visible { background: rgba(0, 0, 0, .1); outline: none; }
[data-theme="dark"] .cb-x:hover, [data-theme="dark"] .cb-x:focus-visible { background: rgba(255, 255, 255, .15); }
.cb-limpiar { font-size: 0.85rem; color: var(--cb-azul); margin-left: 4px; }
.cb-corregido {
    background: var(--cb-ambar-suave);
    color: var(--cb-ambar);
    border-radius: 10px;
    padding: 9px 13px;
    font-size: 0.92rem;
    margin-bottom: 8px;
}
.cb-corregido a { color: inherit; font-weight: 700; margin-left: 4px; }

/* --- Modo noche: catalogo.css pinta estas dos cajas "white" sin versión de noche,
 *     y sus textos (que sí cambian a claro) quedaban blanco sobre blanco. --- */
[data-theme="dark"] .catalog-filters,
[data-theme="dark"] .empty-state-modern {
    background: var(--bg-secondary, #0f172a);
    border-color: var(--border-color, rgba(255, 255, 255, .1));
}

/* --- Filtros --- */
.cb-aplicar { width: 100%; margin: 0.75rem 0 0.5rem; }

/* --- Sin resultados --- */
.cb-alternativas { text-align: left; margin: 1rem 0; }
.cb-alt-grupo h4 { font-size: 0.95rem; margin: 1rem 0 0.5rem; color: var(--text-primary, #1a1a1a); }
.cb-alt-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.cb-alt-card {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px;
    border: 1px solid var(--border-color, rgba(0, 0, 0, .1));
    border-radius: 12px;
    background: var(--bg-primary, #fff);
    color: var(--text-primary, #1a1a1a);
    text-decoration: none;
    font-size: 0.85rem;
    transition: transform .15s, box-shadow .15s;
}
.cb-alt-card:hover, .cb-alt-card:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow-md, 0 4px 16px rgba(0, 0, 0, .08)); }
.cb-alt-card img { width: 100%; height: 90px; object-fit: cover; border-radius: 8px; background: var(--bg-secondary, #f7f8fa); }
.cb-alt-nombre { font-weight: 600; }
.cb-alt-dato { color: var(--text-secondary, #666); }
.cb-alt-precio { color: var(--cb-azul); font-weight: 700; }
.cb-vacio-acciones { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 1rem; }
.cb-btn-wa {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--cb-wa);
    color: #fff;
    padding: 0.7rem 1.2rem;
    border-radius: 10px;
    font-weight: 600;
    text-decoration: none;
}
.cb-btn-wa:hover { filter: brightness(1.08); }
.cb-fabricar { margin-top: 0.75rem; font-size: 0.88rem; color: var(--text-secondary, #666); }
.cb-fabricar a { color: var(--cb-azul); font-weight: 600; }