/* ══════════════════════════════════════════════════════════════════════════
   Búsqueda global · Ctrl+K
   ══════════════════════════════════════════════════════════════════════════ */

.bg-overlay {
  position: fixed; inset: 0; z-index: 10120;
  background: rgba(8, 22, 36, .5);
  display: none;
  align-items: flex-start; justify-content: center;
  padding: 12vh 16px 16px;
}
.bg-overlay.is-open { display: flex; }

.bg-panel {
  width: 100%; max-width: 620px;
  background: #fff; border-radius: 14px;
  box-shadow: 0 26px 70px rgba(8, 22, 36, .38);
  overflow: hidden;
  font-family: var(--cf-fuente, Inter, "Segoe UI", Roboto, sans-serif);
  color: var(--cf-ink, #1f2a37);
  display: flex; flex-direction: column;
  max-height: 74vh;
}

.bg-campo {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--cf-line, #e3e8ef);
}
.bg-campo > .material-icons { color: var(--cf-muted, #5b6774); font-size: 21px; }
.bg-campo input[type="text"] {
  flex: 1; border: none !important; outline: none;
  height: auto !important; margin: 0 !important; padding: 0 !important;
  font-size: 16px !important; font-family: inherit !important;
  color: var(--cf-ink, #1f2a37) !important; background: transparent !important;
  box-shadow: none !important;
}
.bg-cerrar {
  border: 1px solid var(--cf-line, #e3e8ef); border-radius: 6px;
  background: #f4f6f8; color: var(--cf-muted, #5b6774);
  font-size: 10px; font-weight: 700; letter-spacing: .6px;
  padding: 4px 8px; cursor: pointer; font-family: inherit;
}
.bg-cerrar:hover { background: #e9edf2; }
.bg-cerrar:focus { background: #f4f6f8; }

.bg-lista { overflow-y: auto; flex: 1; }

.bg-grupo {
  display: flex; align-items: center; gap: 7px;
  padding: 12px 16px 6px;
  font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--cf-muted, #5b6774);
}
.bg-grupo .material-icons { font-size: 15px; color: var(--cf-gold, #c9a227); }

.bg-item {
  display: block; width: 100%; text-align: left;
  border: none; background: none; cursor: pointer;
  padding: 9px 16px; font-family: inherit;
  border-left: 3px solid transparent;
}
.bg-item:hover, .bg-item.is-on {
  background: #f3f7fc; border-left-color: var(--cf-gold, #c9a227);
}
.bg-item:focus { background: #f3f7fc; }
.bg-item__t {
  display: block; font-size: 13.5px; font-weight: 600;
  color: var(--cf-navy, #0f2a44); line-height: 1.3;
}
.bg-item__m {
  display: block; font-size: 11.5px; color: var(--cf-muted, #5b6774);
  margin-top: 2px; font-variant-numeric: tabular-nums;
}

.bg-vacio { padding: 26px 16px; text-align: center; font-size: 13px; color: var(--cf-muted, #5b6774); }

.bg-pie {
  border-top: 1px solid var(--cf-line, #e3e8ef);
  padding: 9px 16px; font-size: 11.5px; color: var(--cf-muted, #5b6774);
  background: #fafbfc;
}
.bg-pie b {
  background: #fff; border: 1px solid var(--cf-line, #e3e8ef); border-radius: 4px;
  padding: 1px 5px; font-size: 10.5px; color: var(--cf-ink, #1f2a37);
}

/* Botón de la barra superior, para que el atajo se descubra. */
.bg-lanzador {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 8px; color: #fff !important;
  padding: 6px 11px; font-size: 12px; cursor: pointer;
  font-family: var(--cf-fuente, Inter, "Segoe UI", Roboto, sans-serif);
}
.bg-lanzador:hover { background: rgba(255, 255, 255, .2); color: #fff !important; }
.bg-lanzador:focus { background: rgba(255, 255, 255, .12); }
.bg-lanzador .material-icons { font-size: 17px; }
.bg-lanzador kbd {
  background: rgba(255, 255, 255, .16); border-radius: 4px;
  padding: 1px 5px; font-size: 10.5px; font-family: var(--cf-mono, monospace);
}
@media (max-width: 700px) {
  .bg-lanzador kbd, .bg-lanzador span:not(.material-icons) { display: none; }
  .bg-lanzador { padding: 6px 8px; }
  .bg-overlay { padding-top: 6vh; }
}

@media (prefers-reduced-motion: reduce) {
  .bg-overlay *, .bg-panel * { transition-duration: .01ms !important; animation: none !important; }
}