/**
 * Deltanet Search - Estilos del buscador.
 *
 * Todos los valores personalizables usan variables CSS con su valor por defecto
 * como respaldo: var(--dns-xxx, valor). El panel "Personalización" del módulo
 * genera un bloque <style> con las variables cambiadas; sin personalizar, se ve así.
 */
.dnsearch { position: relative; width: 100%; max-width: var(--dns-max-width, 100%); font-family: var(--dns-font, inherit); font-size: var(--dns-font-size, inherit); }
.dnsearch__form { display: flex; align-items: stretch; margin: 0; border: var(--dns-border-width, 1px) solid var(--dns-border, #cfd4da); border-radius: var(--dns-radius, 4px); background: var(--dns-bg, #fff); box-shadow: var(--dns-shadow, none); overflow: hidden; }
.dnsearch__form:focus-within { border-color: var(--dns-border-focus, #7a8691); }
.dnsearch__input { order: 1; flex: 1 1 auto; min-width: 0; margin: 0; border: 0; outline: 0; padding: var(--dns-pad-y, .55rem) var(--dns-pad-x, .75rem); font: inherit; color: var(--dns-text, #232323); background: transparent; box-shadow: none; }
.dnsearch__input::placeholder { color: var(--dns-placeholder, #8a8f94); opacity: 1; }
.dnsearch__btn { order: var(--dns-btn-order, 2); flex: 0 0 auto; display: flex; align-items: center; gap: .4em; margin: 0; border: 0; padding: 0 var(--dns-pad-x, .75rem); background: var(--dns-btn-bg, transparent); color: var(--dns-btn-color, #555); font: inherit; font-weight: 600; cursor: pointer; }
.dnsearch__btn:hover, .dnsearch__btn:focus-visible { color: var(--dns-btn-hover, #000); }
.dnsearch__btn-icon { display: var(--dns-btn-icon, inline-flex); }
.dnsearch__btn-text { display: var(--dns-btn-label, none); white-space: nowrap; }
.dnsearch__btn svg { width: 20px; height: 20px; }
.dnsearch.is-loading .dnsearch__btn svg { opacity: .4; }
.dnsearch__close { display: none; order: 3; align-items: center; margin: 0; border: 0; padding: 0 .75rem; background: transparent; color: var(--dns-btn-color, #555); font-size: 1.6em; line-height: 1; cursor: pointer; }
.dnsearch__panel { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 1050; max-height: var(--dns-panel-max, 70vh); overflow-y: auto; background: var(--dns-panel-bg, #fff); color: var(--dns-panel-text, #232323); border: 1px solid var(--dns-panel-border, #dfe3e7); border-radius: var(--dns-panel-radius, 4px); box-shadow: var(--dns-panel-shadow, 0 8px 24px rgba(0, 0, 0, .12)); text-align: left; }
.dnsearch__panel[hidden] { display: none; }
.dnsearch__item { display: flex; align-items: center; gap: .75rem; padding: .5rem .75rem; border-bottom: 1px solid var(--dns-sep, #f1f3f5); color: inherit; text-decoration: none; }
.dnsearch__item:hover, .dnsearch__item.is-active { background: var(--dns-hover, #f5f7f9); color: inherit; text-decoration: none; }
.dnsearch__img { display: var(--dns-img-display, block); flex: 0 0 var(--dns-img, 48px); width: var(--dns-img, 48px); height: var(--dns-img, 48px); object-fit: contain; background: #fff; }
.dnsearch__info { flex: 1 1 auto; min-width: 0; }
.dnsearch__name { display: -webkit-box; -webkit-line-clamp: var(--dns-lines, 2); -webkit-box-orient: vertical; overflow: hidden; font-size: .9em; line-height: 1.3; }
.dnsearch__name mark { padding: 0 .05em; border-radius: 2px; background: var(--dns-mark-bg, none); color: var(--dns-mark-color, inherit); font-weight: var(--dns-mark-weight, 700); }
.dnsearch__meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2px; font-size: .75em; color: var(--dns-muted, #6b6b6b); }
.dnsearch__ref { display: var(--dns-ref-display, inline); }
.dnsearch__price { flex: 0 0 auto; font-size: .9em; font-weight: 700; white-space: nowrap; color: var(--dns-price, inherit); }
.dnsearch__stock--in { color: var(--dns-in, #2e7d32); }
.dnsearch__stock--out { color: var(--dns-out, #c62828); }
.dnsearch__all { display: block; padding: .6rem .75rem; background: var(--dns-foot-bg, #fafbfc); color: inherit; font-size: .85em; font-weight: 600; text-align: center; text-decoration: none; }
.dnsearch__all.is-active, .dnsearch__all:hover { background: var(--dns-hover, #f0f2f4); color: inherit; text-decoration: none; }
.dnsearch__head { display: flex; justify-content: space-between; align-items: center; padding: .5rem .75rem; font-size: .8em; color: var(--dns-muted, #6b6b6b); }
.dnsearch__head + .dnsearch__item, .dnsearch__item + .dnsearch__head { border-top: 1px solid var(--dns-sep, #f1f3f5); }
.dnsearch__clear { border: 0; background: none; padding: 0; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
.dnsearch__recent { display: block; width: 100%; border: 0; padding: .45rem .75rem; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.dnsearch__recent:hover, .dnsearch__recent.is-active { background: var(--dns-hover, #f5f7f9); }
.dnsearch__note { padding: .5rem .75rem; border-bottom: 1px solid var(--dns-sep, #f1f3f5); background: var(--dns-foot-bg, #fafbfc); font-size: .8em; color: var(--dns-muted, #6b6b6b); }
.dnsearch__note strong { color: var(--dns-panel-text, #232323); }
.dnsearch a.dnsearch__item, .dnsearch a.dnsearch__all, .dnsearch a.dnsearch__item:hover, .dnsearch a.dnsearch__all:hover { color: inherit; text-decoration: none; }
.dnsearch__empty { padding: .75rem; font-size: .85em; color: var(--dns-muted, #6b6b6b); }