/* ============================================================
   Buscador de entidad (agencia/static/js/buscador-entidad.js)
   Contrato visual: artefacto K9Vq1PQtJHaQ7SLviaiAek. Solo variables de
   main.css / main-v2.css / Apariencia; nada de colores fijos.
   Los !important del campo interno lo blindan contra reglas de página
   del tipo "#tabla td input { … }".
   ============================================================ */

.be { position: relative; width: 100%; min-width: 0; font-family: var(--font-ui, Inter, system-ui, sans-serif); }
/* en una fila flex o en línea no se estira: mide lo que medía el select */
.be.be--auto { width: auto; }
.be.be--inline { display: inline-block; width: auto; vertical-align: middle; }
.be .be-i, .be-pop .be-i { width: 1em; height: 1em; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }

/* El campo: el select original queda dentro, en el flujo e invisible, y
   le da su ancho y su alto (el de su clase, su max-width, su min-width).
   Campo y chip van encima en absoluto: abrir o elegir no mueve el layout. */
.be-field { position: relative; display: flex; min-height: 34px; }
.be-sizer { display: flex; flex: 0 1 auto; min-width: 0; overflow: hidden; pointer-events: none; }
.be select.be-native {
  display: block !important; flex: 0 0 auto !important; align-self: flex-start !important; margin: 0 !important;
  opacity: 0 !important; pointer-events: none !important; visibility: visible !important;
  position: static !important; transform: none !important;
}

/* ---------- campo de búsqueda ---------- */
.be-box {
  position: absolute; inset: 0; box-sizing: border-box;
  display: flex; align-items: center; gap: 8px; padding: 0 10px;
  background: var(--bg-input); border: 1px solid var(--border-strong); border-radius: 9px;
  color: var(--text-tertiary); transition: border-color .15s, box-shadow .15s; cursor: text;
}
.be-box[hidden] { display: none !important; }
.be-box:focus-within, .be.is-open .be-box { border-color: var(--aura-blue); box-shadow: 0 0 0 3px var(--aura-blue-soft); }
.be-box input.be-input {
  flex: 1 1 auto !important; min-width: 2.5em !important; width: auto !important; height: 100% !important;
  background: transparent !important; border: 0 !important; outline: none !important; box-shadow: none !important;
  color: var(--text-primary) !important; font: inherit; font-size: 13px !important; font-weight: 500;
  padding: 0 !important; margin: 0 !important; border-radius: 0 !important;
}
.be-box input.be-input::placeholder { color: var(--text-tertiary); font-weight: 400; opacity: 1; }
.be-count { font-family: var(--font-mono, ui-monospace, monospace); font-size: 10.5px; color: var(--text-tertiary); white-space: nowrap; flex: 0 1 auto; min-width: 0; overflow: hidden; }
.be-count[hidden] { display: none; }
.be-clear {
  display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  border: 0; border-radius: 6px; background: transparent; color: var(--text-tertiary); cursor: pointer; padding: 0; font-size: 14px;
}
.be-clear[hidden] { display: none; }
.be-clear:hover { background: var(--bg-secondary); color: var(--text-primary); }
.be-clear:focus-visible, .be-tag-x:focus-visible, .be-tag:focus-visible { outline: 2px solid var(--aura-blue); outline-offset: 1px; }

/* ---------- chip del elegido: ocupa el lugar del campo ---------- */
.be-chipbox {
  position: absolute; inset: 0; box-sizing: border-box; cursor: pointer;
  display: flex; align-items: center; gap: 8px; padding: 0 4px 0 6px;
  background: var(--bg-input); border: 1px solid var(--border-strong); border-radius: 9px; min-width: 0;
}
.be-chipbox[hidden] { display: none !important; }
.be-tag {
  display: inline-flex; align-items: center; gap: 7px; min-width: 0; max-width: 100%; height: 24px; padding: 0 4px 0 9px;
  background: var(--aura-blue-soft); border: 1px solid var(--aura-blue-border); border-radius: 7px;
  color: var(--text-primary); font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.be-tag-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.be-tag-sec { color: var(--text-secondary); font-weight: 400; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.be-tag-sec[hidden] { display: none; }
.be-tag-x {
  display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
  border: 0; border-radius: 5px; background: transparent; color: var(--text-secondary); cursor: pointer; padding: 0; font-size: 13px; flex: 0 0 auto;
}
.be-tag-x:hover { background: var(--aura-blue-soft-hover); color: var(--text-primary); }
.be-spacer { flex: 1; }

/* ---------- estados ---------- */
.be--error .be-box, .be--error .be-chipbox { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.be-err { font-size: 11.5px; color: var(--danger); margin-top: .3rem; }
.be-err[hidden] { display: none; }
.be--disabled { opacity: .55; }
.be--disabled .be-box, .be--disabled .be-tag { cursor: not-allowed; }

/* ---------- variante formulario (select con .form-input / .form-control) ---------- */
.be--form .be-field { min-height: 37px; }
.be--form .be-box, .be--form .be-chipbox { border-radius: var(--radius); background: var(--bg-secondary); border-color: var(--border); }

/* ---------- variante compacta: barra de filtros (.cmd-sel) y filas de tabla ---------- */
.be--compact .be-field { min-height: 30px; }
.be--compact .be-box, .be--compact .be-chipbox { border-radius: 8px; }
.be--compact .be-tag { height: 22px; }
.be--filtro { flex: 0 1 200px; min-width: 160px; } /* la lista abre a 340px; el campo cabe en la fila de filtros */
.be--filtro .be-box, .be--filtro .be-chipbox { background: var(--bg-secondary); border-color: var(--cmd-line, var(--border-strong)); }
.be--filtro .be-box:focus-within, .be--filtro.is-open .be-box { border-color: var(--aura-blue); }

/* ---------- lista de coincidencias (vive en document.body, position: fixed) ---------- */
.be-pop {
  position: fixed; z-index: 10050; background: var(--bg-elevated); border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden;
  font-family: var(--font-ui, Inter, system-ui, sans-serif); font-size: 13.5px; line-height: 1.5; color: var(--text-primary);
  text-align: left;
}
.be-pop[hidden] { display: none; }
.be-list { list-style: none; margin: 0; padding: 4px; max-height: 296px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.be-group {
  padding: 8px 10px 4px; font-size: 10px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: var(--text-tertiary); cursor: default;
}
.be-opt { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 7px; cursor: pointer; min-width: 0; }
.be-o-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.be-o-name { font-size: 13px; font-weight: 500; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.be-o-sec { font-size: 11.5px; color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.be-opt.active { background: var(--aura-blue-soft); box-shadow: inset 2px 0 0 var(--aura-blue); }
.be-opt.is-baja .be-o-name { color: var(--text-secondary); }
.be-opt.is-disabled { opacity: .45; cursor: not-allowed; }
.be-pop mark.be-hl {
  background: var(--aura-blue-soft); color: var(--text-primary); border-radius: 3px; padding: 0 1px; font-weight: 600;
  box-shadow: inset 0 -1px 0 var(--aura-blue);
}
.be-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: .7rem; font-weight: 500; text-transform: lowercase; white-space: nowrap; }
.be-badge-ok { background: var(--success-soft); color: var(--success); }
.be-badge-warn { background: var(--warning-soft); color: var(--warning); }
.be-badge-fail { background: var(--danger-soft); color: var(--danger); }
.be-badge-muted { background: var(--bg-secondary); color: var(--text-tertiary); }
.be-foot {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 7px 12px;
  border-top: 1px solid var(--border); color: var(--text-tertiary); font-size: 11px;
}
.be-foot span { display: inline-flex; align-items: center; gap: 4px; }
.be-foot .be-foot-count { margin-left: auto; font-family: var(--font-mono, ui-monospace, monospace); font-size: 10.5px; }
.be-foot kbd {
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 10.5px; color: var(--text-secondary);
  border: 1px solid var(--border-strong); border-radius: 4px; padding: 0 4px; line-height: 16px; min-width: 18px;
  text-align: center; background: transparent; box-shadow: none;
}
.be-hint { padding: 12px 14px; color: var(--text-tertiary); font-size: 12.5px; }
.be-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 20px 14px; text-align: center; }
.be-empty-ico { font-size: 20px; color: var(--text-tertiary); display: inline-flex; }
.be-empty strong { font-size: 13px; color: var(--text-primary); font-weight: 600; }
.be-empty span { font-size: 12px; color: var(--text-tertiary); }

@media (max-width: 760px) {
  .be--filtro { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { .be-box { transition: none; } }