/* ─────────────────────────────────────────────────────────────────────────────
   Buscador de entidades — estilos del diálogo único (Shared/BuscadorEntidad.razor)
   y de las filas que arman los buscadores por entidad (clientes, proveedores,
   artículos…).

   Va en un archivo GLOBAL y no en CSS aislado a propósito: las filas y los filtros
   los dibuja la pantalla envolvente con RenderFragment, y el CSS aislado de Blazor
   marca cada componente con su propio identificador, así que las reglas del
   diálogo no alcanzarían al contenido que le pasan.

   Se carga DESPUÉS de fesv-v2*.css, por eso acá no hace falta el truco
   ":root:not(#_)" que sí usan los buscadores viejos.
   ───────────────────────────────────────────────────────────────────────────── */

.bx-modal { background: var(--v2-backdrop, rgba(0, 0, 0, .55)); overflow-y: auto; }

.bx-body {
    display: flex;
    flex-direction: column;
    gap: var(--v2-s2, 8px);
    min-height: 0;
}

/* ── Búsqueda + botón de filtros (este último solo en móvil) ── */
.bx-busca { display: flex; gap: var(--v2-s2, 8px); align-items: stretch; }
.bx-busca .input-group { flex: 1 1 auto; }
.bx-modal .bx-btn-filtros { display: none; white-space: nowrap; }

/* ── Barra de filtros ── */
.bx-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--v2-s2, 8px) var(--v2-s3, 12px);
    padding: var(--v2-s2, 8px) var(--v2-s3, 12px);
    background: var(--v2-surface-alt, var(--bs-tertiary-bg));
    border: 1px solid var(--v2-border-subtle, var(--bs-border-color));
    border-radius: var(--v2-r-sm, 6px);
}
.bx-filtro { display: flex; flex-direction: column; gap: 2px; min-width: 140px; }
.bx-filtro select, .bx-filtro input { min-width: 140px; }
.bx-filtro-check { justify-content: flex-end; padding-bottom: 5px; min-width: auto; }
.bx-filtro-limpiar { margin-left: auto; min-width: auto; }
.bx-lbl {
    font-size: var(--v2-fs-caption, .75rem);
    font-weight: 600;
    color: var(--v2-text-3, var(--bs-secondary-color));
    margin: 0;
}
.bx-lock { font-size: .7em; color: var(--v2-warn, #b26b00); margin-left: 2px; }
.bx-filtro select:disabled { cursor: not-allowed; opacity: .75; }

.bx-restr {
    font-size: var(--v2-fs-caption, .75rem);
    color: var(--v2-warn, #8a5300);
    background: var(--v2-warn-soft, #fff4e0);
    border: 1px solid var(--v2-warn-bd, #f0d09a);
    border-radius: var(--v2-r-sm, 6px);
    padding: 4px 10px;
}

.bx-conteo {
    font-size: var(--v2-fs-caption, .75rem);
    color: var(--v2-text-3, var(--bs-secondary-color));
    min-height: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.bx-conteo strong { color: var(--v2-text, var(--bs-body-color)); }
.bx-pista { font-style: italic; }

/* ── Lista ── */
.bx-lista {
    border: 1px solid var(--v2-border, var(--bs-border-color));
    border-radius: var(--v2-r-sm, 6px);
    overflow-y: auto;
    max-height: 56vh;
    background: var(--v2-surface, var(--bs-body-bg));
}
.bx-fila {
    display: grid;
    gap: var(--v2-s3, 12px);
    align-items: center;
    padding: 7px var(--v2-s3, 12px);
    border-bottom: 1px solid var(--v2-border-subtle, var(--bs-border-color));
    font-size: var(--v2-fs-body, .8125rem);
}
.bx-cab {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--v2-surface-alt, var(--bs-tertiary-bg));
    font-size: var(--v2-fs-micro, .6875rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--v2-text-3, var(--bs-secondary-color));
}
.bx-item { cursor: pointer; }
.bx-item:hover { background: var(--v2-row-hover, var(--bs-tertiary-bg)); }
.bx-item.sel {
    background: var(--v2-accent-soft, rgba(13, 110, 253, .12));
    box-shadow: inset 3px 0 0 var(--v2-accent, var(--bs-primary));
}
.bx-item.bloqueado { opacity: .55; cursor: not-allowed; }

.bx-cod { font-family: var(--v2-mono, var(--bs-font-monospace)); font-size: var(--v2-fs-caption, .75rem); overflow-wrap: anywhere; }
.bx-desc { color: var(--v2-text, var(--bs-body-color)); font-weight: 500; min-width: 0; }
.bx-sub { display: block; font-size: var(--v2-fs-micro, .6875rem); color: var(--v2-text-3, var(--bs-secondary-color)); font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bx-num { text-align: right; font-variant-numeric: tabular-nums; }
.bx-saldo.debe { color: var(--v2-err, var(--bs-danger)); font-weight: 600; }
.bx-rot { display: none; }   /* rótulos por celda: solo en tarjetas (móvil) */

.bx-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: var(--v2-r-pill, 999px);
    font-size: var(--v2-fs-micro, .6875rem);
    font-weight: 600;
    vertical-align: middle;
}
.bx-badge.ok { color: var(--v2-ok, var(--bs-success)); background: var(--v2-ok-soft, rgba(25, 135, 84, .12)); }
.bx-badge.aviso { color: var(--v2-warn, #8a5300); background: var(--v2-warn-soft, #fff4e0); }
.bx-badge.inactivo { color: var(--v2-err, var(--bs-danger)); background: var(--v2-err-soft, rgba(220, 53, 69, .1)); }
.bx-badge.info { color: var(--v2-info, var(--bs-info)); background: var(--v2-info-soft, rgba(13, 202, 240, .12)); }

/* ── Columnas propias del buscador de artículos ── */
.bx-uni { color: var(--v2-text-2, var(--bs-secondary-color)); font-size: var(--v2-fs-caption, .75rem); }
.bx-neto { color: var(--v2-text-2, var(--bs-secondary-color)); }
.bx-gross { font-weight: 600; color: var(--v2-text, var(--bs-body-color)); }
.bx-exist.agotado { color: var(--v2-err, var(--bs-danger)); font-weight: 600; }
.bx-exist.na { color: var(--v2-text-4, var(--bs-secondary-color)); }

/* ── Estados vacíos: los tres se ven distintos a propósito ── */
.bx-estado {
    padding: var(--v2-s6, 24px);
    text-align: center;
    color: var(--v2-text-3, var(--bs-secondary-color));
}
.bx-estado .bx-estado-icono { font-size: 1.75rem; display: block; margin-bottom: 6px; opacity: .6; }
.bx-estado .bx-estado-titulo { display: block; font-weight: 600; color: var(--v2-text, var(--bs-body-color)); margin-bottom: 2px; }
.bx-estado .bx-estado-acciones { margin-top: 10px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.bx-estado.error .bx-estado-icono, .bx-estado.error .bx-estado-titulo { color: var(--v2-err, var(--bs-danger)); opacity: 1; }

/* ── Pie: atajos + paginador ── */
.bx-pie { justify-content: space-between; flex-wrap: nowrap; }
.bx-ayuda { font-size: var(--v2-fs-micro, .6875rem); color: var(--v2-text-3, var(--bs-secondary-color)); }
.bx-ayuda kbd {
    background: var(--v2-sunk, var(--bs-secondary-bg));
    color: var(--v2-text, var(--bs-body-color));
    border: 1px solid var(--v2-border, var(--bs-border-color));
    font-size: .95em;
    padding: 0 4px;
    margin-right: 2px;
}
.bx-pager { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.bx-modal .bx-pager .btn { min-width: 32px; padding-left: 8px; padding-right: 8px; }
.bx-pag-txt { font-size: var(--v2-fs-caption, .75rem); padding: 0 6px; white-space: nowrap; }

/* ── Campo inline que abre el buscador (Shared/CampoBuscador.razor) ── */
.bx-campo { display: flex; align-items: stretch; width: 100%; }
.bx-campo .bx-campo-btn {
    flex: 1 1 auto;
    text-align: left;
    min-height: 31px;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
}
.bx-campo .bx-campo-txt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bx-campo .bx-campo-vacio { color: var(--v2-text-3, var(--bs-secondary-color)); }
.bx-campo .bx-campo-sub { font-size: var(--v2-fs-micro, .6875rem); color: var(--v2-text-3, var(--bs-secondary-color)); }

/* ── Móvil: filtros plegados y filas tipo tarjeta ── */
@media (max-width: 575.98px) {
    .bx-modal .bx-btn-filtros { display: inline-flex; align-items: center; gap: 4px; }
    .bx-filtros { display: none; }
    .bx-filtros.abierto { display: grid; grid-template-columns: 1fr 1fr; }
    .bx-filtro, .bx-filtro select, .bx-filtro input { min-width: 0; }
    .bx-filtro-check, .bx-filtro-limpiar { grid-column: span 1; margin-left: 0; }

    .bx-lista { max-height: none; flex: 1 1 auto; border: 0; background: transparent; }
    .bx-cab { display: none; }
    .bx-fila.bx-item {
        grid-template-columns: 1fr 1fr !important;
        gap: 4px 8px;
        margin-bottom: 8px;
        padding: 10px 12px;
        border: 1px solid var(--v2-border, var(--bs-border-color));
        border-radius: var(--v2-r, 10px);
        background: var(--v2-surface, var(--bs-body-bg));
    }
    .bx-item .bx-desc { grid-column: span 2; font-size: var(--v2-fs-strong, .875rem); }
    .bx-rot {
        display: block;
        font-size: var(--v2-fs-micro, .6875rem);
        font-weight: 500;
        color: var(--v2-text-3, var(--bs-secondary-color));
        text-transform: uppercase;
        letter-spacing: .03em;
    }
    .bx-pie { justify-content: center; }
    .bx-pager { margin: 0 auto; }
}