/* ════════════════════════════════════════════════════════════════════
   LA BÚSQUEDA GLOBAL (Ctrl/⌘ + K)

   Portada de GNL Facturación (app.css, «Usabilidad: búsqueda global»), con las mismas medidas, la
   misma estructura y los mismos nombres sin el prefijo gnl-. Pedido de Arturo del 01-11-2026: «el
   buscar tambien lo quiero replicar en era».

   Lo único que cambia son los colores: GNL usa sus variables --pf-*; acá salen de la paleta de
   MudBlazor —nunca un hexadecimal crudo—, así la paleta toma el tema de cada empresa y el oscuro
   funciona solo, como en dialog-system.css. El borde de la paleta, que GNL pone sólo en oscuro, va
   siempre: en ERA el CSS no sabe cuál tema está puesto, y en claro casi no se nota.
   ════════════════════════════════════════════════════════════════════ */

.buscar-barra kbd,
.paleta kbd {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .68rem;
    background: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-lines-default);
    border-bottom-width: 2px;
    border-radius: 4px;
    padding: 0 5px;
    color: var(--mud-palette-text-secondary);
}

/* El botón de la barra superior: reemplaza el campo «Buscar...» que no buscaba nada. */
.buscar-barra { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; margin: 0 6px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 8px; background: rgba(255, 255, 255, .12); color: #fff; font: inherit; font-size: .82rem; cursor: pointer; transition: background .15s; white-space: nowrap; }
.buscar-barra:hover { background: rgba(255, 255, 255, .22); }
.buscar-barra kbd { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .3); color: #fff; }
/* Desde 960 px, ancho como el campo «Buscar...» de antes, al lado del selector de empresa (Arturo, 02-11-2026); el atajo
   va al final del campo. */
@media (min-width: 960px) {
    .buscar-barra { width: 320px; height: 34px; padding: 0 12px; margin: 0 6px 0 10px; font-size: .9rem; }
    .buscar-barra kbd { margin-left: auto; }
}

/* Encima de todo mientras está abierta, también de la barra de tareas de las ventanas flotantes
   (9999) y su vista previa (10001): es una ventana modal, y la barra quedaba nítida y clicable sobre el
   fondo velado. GNL la pone en 1600 porque allá la barra de tareas no tapa nada. */
.paleta-fondo { position: fixed; inset: 0; z-index: 10002; background: rgba(10, 25, 35, .45); display: flex; justify-content: center; align-items: flex-start; padding: 11vh 16px 0; backdrop-filter: blur(2px); }
.paleta { width: min(680px, 100%); background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); border-radius: 14px; box-shadow: 0 24px 70px rgba(0, 0, 0, .35); overflow: hidden; display: flex; flex-direction: column; max-height: 70vh; }
.paleta-entrada { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--mud-palette-table-lines); color: var(--mud-palette-text-secondary); }
.paleta-entrada input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; font-size: 1.02rem; color: var(--mud-palette-text-primary); background: transparent; }
.paleta-lista { overflow-y: auto; padding: 6px; }
.paleta-grupo { font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mud-palette-text-secondary); padding: 10px 10px 4px; }
.paleta-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--mud-palette-text-primary); text-decoration: none; cursor: pointer; }
.paleta-item:hover { text-decoration: none; }
.paleta-item .mud-icon-root { color: var(--mud-palette-text-secondary); flex: none; }
.paleta-item .titulo { font-weight: 600; white-space: nowrap; }
.paleta-item .detalle { color: var(--mud-palette-text-secondary); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paleta-item.activo { background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent); }
.paleta-item.activo .mud-icon-root { color: var(--mud-palette-primary); }
.paleta-vacio { padding: 26px 16px; text-align: center; color: var(--mud-palette-text-secondary); font-size: .88rem; }
.paleta-pie { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 8px 16px; border-top: 1px solid var(--mud-palette-table-lines); background: var(--mud-palette-background-gray); font-size: .74rem; color: var(--mud-palette-text-secondary); }
.paleta-pie kbd { margin-right: 3px; }