/* Buscador TTA · jerarquia search-first.
   Un hero (el catch-all) > una barra de control > un cajon de filtros plegado.
   El cajon conserva la clase .fallos-filtros porque el IIFE de sub-materia la
   busca para montar materia/submateria/observacion. */
.nv-bus { margin: 0 0 18px; }

/* ── Hero: EL buscador ──────────────────────────────────────────────── */
.nv-bus__hero {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 8px 4px 16px;
  background: var(--oc-surface);
  border: 2px solid var(--oc-line-2);
  border-radius: var(--oc-r-lg);
  box-shadow: 0 1px 2px rgba(15, 31, 61, .05);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.nv-bus__hero:focus-within { border-color: var(--oc-navy-500); box-shadow: var(--oc-focus-ring); }
.nv-bus__lupa { flex: none; color: var(--oc-navy-300); transition: color .16s ease; }
.nv-bus__hero:focus-within .nv-bus__lupa { color: var(--oc-navy-500); }
.nv-bus__hero input[type="search"] {
  flex: 1; min-width: 0; margin: 0; padding: 15px 0;
  border: 0; outline: 0; background: transparent;
  font: 400 1.06rem/1.4 var(--oc-font-sans); color: var(--oc-text);
}
.nv-bus__hero input[type="search"]::placeholder { color: var(--oc-mute); }
.nv-bus__hero .agentic-max-btn { flex: none; }

/* Boton de accion. El buscador ya busca solo con debounce, pero sin un control
   explicito nada confirma que la accion ocurrio: esto da el "go" y el feedback. */
.nv-bus__go {
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  padding: 11px 20px; cursor: pointer;
  background: var(--oc-navy); border: 0; border-radius: 999px;
  color: var(--oc-on-navy); font: 700 .9rem/1 var(--oc-font-sans);
  transition: background .15s ease, transform .08s ease;
}
.nv-bus__go:hover { background: var(--oc-navy-800); }
.nv-bus__go:active { transform: scale(.97); }
.nv-bus__go:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(45, 90, 158, .45); }
.nv-bus__go[disabled] { cursor: default; background: var(--oc-navy-500); }
.nv-bus__go-spin {
  display: none; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff;
  animation: nv-bus-spin .6s linear infinite;
}
.nv-bus__go.is-busy .nv-bus__go-ico { display: none; }
.nv-bus__go.is-busy .nv-bus__go-spin { display: inline-block; }
@keyframes nv-bus-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .nv-bus__go-spin { animation-duration: 1.6s; }
  .nv-bus__go:active { transform: none; }
}

/* ── Barra: toggle + chips de lo activo + limpiar ───────────────────── */
.nv-bus__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.nv-bus__toggle {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; cursor: pointer;
  background: var(--oc-surface); border: 1.5px solid var(--oc-line-2); border-radius: 999px;
  font: 700 .9rem/1 var(--oc-font-sans); color: var(--oc-navy);
  box-shadow: 0 1px 2px rgba(15, 31, 61, .06);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.nv-bus__toggle:hover { background: var(--oc-bg-alt); border-color: var(--oc-navy-300); }
.nv-bus__toggle[aria-expanded="true"] { background: var(--oc-navy-100); border-color: var(--oc-navy-300); color: var(--oc-navy); }
.nv-bus__chev { transition: transform .18s ease; }
.nv-bus__toggle[aria-expanded="true"] .nv-bus__chev { transform: rotate(180deg); }
.nv-bus__count {
  min-width: 17px; height: 17px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--oc-navy); color: var(--oc-on-navy);
  border-radius: 999px; font: 700 11px/1 var(--oc-font-sans);
}
.nv-bus__count[hidden] { display: none; }
/* Misma pastilla que Filtros, pero es un <a>: hay que matarle el subrayado. */
.nv-bus__ia { text-decoration: none; }
.nv-bus__ia svg { color: var(--oc-navy-500); }
.nv-bus__ia:hover svg { color: var(--oc-navy); }
.nv-bus__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.nv-bus__chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 270px;
  padding: 5px 6px 5px 11px;
  background: var(--oc-cat-1-bg); border: 1px solid var(--oc-navy-100); border-radius: 999px;
  font: 500 .8rem/1.25 var(--oc-font-sans); color: var(--oc-navy);
}
.nv-bus__chip b { font-weight: 700; font-size: .93em; opacity: .62; }
.nv-bus__chip i { font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nv-bus__chip button {
  flex: none; width: 17px; height: 17px; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: rgba(27, 58, 107, .10); color: var(--oc-navy);
  font: 700 13px/1 var(--oc-font-sans);
}
.nv-bus__chip button:hover { background: rgba(27, 58, 107, .22); }
.nv-bus__clear {
  padding: 6px 4px; border: 0; background: none; cursor: pointer;
  font: 500 .82rem/1 var(--oc-font-sans); color: var(--oc-mute);
  text-decoration: underline; text-underline-offset: 2px;
}
.nv-bus__clear:hover { color: var(--oc-bad-strong); }

/* ── Vistas de la lista + CTA alertas (rediseño A · 2026-08-16) ─────── */
/* Los inyecta beta_enhancements.js DENTRO de .nv-bus__bar. El divisor
   separa lo que filtra la consulta (Filtros, IA) de lo que ordena la
   lista (Recientes, Más vistos, Alto valor); el grupo envuelve entero a
   la segunda fila cuando hay chips de filtro activos. */
.nv-fst-group { display: inline-flex; align-items: center; gap: 2px; }
.nv-fst-div { flex: none; width: 1px; height: 22px; background: var(--oc-line-2); margin: 0 8px 0 6px; }
.nv-fst-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 12px; cursor: pointer;
  background: none; border: 0; border-radius: var(--oc-r-sm);
  font: 500 13px/1 var(--oc-font-sans); color: var(--oc-mute);
  transition: background .15s ease, color .15s ease;
}
.nv-fst-btn:hover { background: var(--oc-bg-alt); color: var(--oc-body); }
.nv-fst-btn[data-active="1"] { background: var(--oc-cat-1-bg); color: var(--oc-navy); font-weight: 600; }
.nv-fst-btn svg { flex: none; }
.nv-fst-cta {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; cursor: pointer; text-decoration: none;
  background: var(--oc-surface); border: 1.5px solid var(--oc-line-2); border-radius: 999px;
  font: 600 13px/1 var(--oc-font-sans); color: var(--oc-navy);
  transition: background .15s ease, border-color .15s ease;
}
.nv-fst-cta:hover { background: var(--oc-bg-alt); border-color: var(--oc-navy-300); }
.nv-fst-cta svg { color: var(--oc-navy-500); }

/* ── Cajon de filtros ───────────────────────────────────────────────── */
#fallos-filtros-grid.fallos-filtros {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px 14px; margin: 12px 0 0; padding: 16px;
  background: var(--oc-bg); border: 1px solid var(--oc-line); border-radius: var(--oc-r);
}
#fallos-filtros-grid.fallos-filtros[hidden] { display: none; }
.nv-bus__f { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.nv-bus__f[hidden] { display: none; }
.nv-bus__f > span {
  font: 600 .715rem/1 var(--oc-font-sans); letter-spacing: .045em;
  text-transform: uppercase; color: var(--oc-mute);
}
#fallos-filtros-grid select, #fallos-filtros-grid input {
  width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box;
  background: var(--oc-surface);
}
#fallos-filtros-grid select:focus, #fallos-filtros-grid input:focus {
  outline: 0; border-color: var(--oc-navy-500); box-shadow: var(--oc-focus-ring);
}

@media (max-width: 720px) {
  .nv-bus__hero { padding: 3px 6px 3px 13px; border-radius: var(--oc-r); }
  .nv-bus__hero input[type="search"] { padding: 13px 0; font-size: 1rem; }
  /* En movil el boton se queda con la flecha: el aria-label lo mantiene claro. */
  .nv-bus__go { padding: 11px 14px; }
  .nv-bus__go-txt { display: none; }
  #fallos-filtros-grid.fallos-filtros { grid-template-columns: 1fr; padding: 13px; }
  .nv-fst-div { display: none; }
  .nv-fst-cta { margin-left: 0; }
}