/**
 * Buscador predictivo del navbar — componente liviano para usar en TODAS las páginas
 * (home, fichas, internas). El buscador completo (page-buscador) usa su propio CSS/JS;
 * este archivo trae solo el input, las sugerencias y el modal mobile.
 * Se usa con predictivo.js. Los colores caen a un fallback por si el header no define la var.
 */

/* ── Search pill (desktop) ── */
.fn-nav-search {
  flex: 1; max-width: 440px; display: flex; align-items: center; gap: 8px;
  background: #f5f6f8; border: 1.5px solid var(--fn-border, #e5e7eb); border-radius: 50px;
  padding: 7px 10px 7px 16px; margin: 0 20px; position: relative;
}
.fn-nav-search input {
  background: transparent; border: none; outline: none; color: var(--fn-black, #000911);
  font-size: 12px; font-family: 'Montserrat', sans-serif; flex: 1; min-width: 0;
}
.fn-nav-search input::placeholder { color: #9ca3af; }

/* ── Lupa (mobile) ── */
.fn-nav-search-icon {
  background: #f5f6f8; border: 1.5px solid var(--fn-border, #e5e7eb); color: var(--fn-gray, #667085);
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.fn-nav-search-icon:hover { border-color: var(--fn-blue, #004884); color: var(--fn-blue, #004884); }

/* ── Dropdown de sugerencias (desktop) ── */
.buscador-sugerencias {
  display:none; position:absolute; top:calc(100% + 8px); left:0;
  min-width:520px; max-width:600px;
  background:#fff; border-radius:14px; box-shadow:0 12px 40px rgba(0,9,17,.18);
  z-index:300; overflow:hidden; max-height:420px; overflow-y:auto;
}
.sug-item { display:flex; align-items:center; gap:12px; padding:9px 14px; cursor:pointer; transition:background .12s; }
.sug-item:hover { background:#f5f5f5; }
.sug-img { width:58px; height:44px; border-radius:8px; background:#eef0f2 center/cover no-repeat; flex-shrink:0; }
.sug-ico { width:58px; height:44px; border-radius:8px; background:#f0f4f7; display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.sug-txt { flex:1; min-width:0; }
.sug-title { font-size:13px; font-weight:600; color:var(--fn-black, #000911); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sug-sub { font-size:11px; color:var(--fn-gray, #667085); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sug-precio { font-size:13px; font-weight:700; color:var(--fn-blue, #004884); flex-shrink:0; white-space:nowrap; }
.sug-item mark { background:#fde68a; color:inherit; padding:0 1px; border-radius:2px; }

/* ── Modal de búsqueda (mobile, a pantalla completa) ── */
#search-modal { display:none; position:fixed; inset:0; z-index:1100; background:#fff; flex-direction:column; }
#search-modal.open { display:flex; }
.search-modal-head { display:flex; align-items:center; gap:8px; padding:12px 14px; border-bottom:1px solid var(--fn-border, #e5e7eb); flex-shrink:0; }
.search-modal-head .sm-back { background:none; border:none; cursor:pointer; padding:6px; color:var(--fn-black, #000911); flex-shrink:0; display:flex; }
.search-modal-pill { flex:1; display:flex; align-items:center; gap:8px; background:#f5f5f5; border-radius:50px; padding:11px 16px; min-width:0; }
.search-modal-pill input { flex:1; background:transparent; border:none; outline:none; font-family:'Montserrat',sans-serif; font-size:14px; color:var(--fn-black, #000911); min-width:0; }
.search-modal-sug { flex:1; overflow-y:auto; }
.search-modal-sug .sug-item { border-bottom:1px solid #f0f4f7; padding:12px 16px; }