/* lista-filtro-orden.css — «Filtrar» y «Ordenar» de las listas de registros
   (assets/ui/lista-filtro-orden.js). Valores CALCADOS de los botones de la cartera
   del multiproyecto (#projGate .pgx-*, assets/ui/multiproyecto.css): misma pieza,
   mismo aspecto. Los menús cuelgan del body con position:fixed. */

.lfo-acc{ display:inline-flex; align-items:center; gap:8px; flex:none; }
.lfo-btn{
  display:inline-flex; align-items:center; gap:6px; height:32px; box-sizing:border-box; margin:0;
  padding:0 12px; border:1px solid #E6F2FA; border-radius:50px; background:#FFFFFF; cursor:pointer;
  font:500 12px/normal Inter,system-ui,sans-serif; color:#5C5E64; white-space:nowrap;
}
.lfo-btn svg{ width:16px; height:16px; flex:none; color:#077FCF; }
.lfo-btn:hover{ border-color:#99CBEB; color:#077FCF; }
.lfo-btn[aria-expanded="true"]{ border-color:#077FCF; color:#077FCF; box-shadow:0 0 0 3px rgba(7,127,207,.12); }
/* activo (filtros puestos / orden distinto del predeterminado): tenue, igual en los dos */
.lfo-btn.lfo-on{ border-color:#077FCF; background:#E6F2FA; color:#077FCF; font-weight:600; }
.lfo-btn:focus-visible{ outline:2px solid #077FCF; outline-offset:2px; }
/* el contador común de la plataforma, variante informativa (azul: es un estado, no un pendiente) */
.lfo-num{
  display:inline-block; box-sizing:border-box; text-align:center;
  min-width:var(--cnt-min, 20px); padding:var(--cnt-pad, 2px 7px); border-radius:var(--cnt-radius, 999px);
  background:var(--cnt-info-bg, #077FCF); color:var(--cnt-info-fg, #FFFFFF);
  font:var(--cnt-font, 600 10px/normal Inter,system-ui,sans-serif); letter-spacing:var(--cnt-ls, .02em);
}

/* la fila de chips, bajo la cabecera de la lista; sin filtros no se pinta */
.lfo-fila{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px; box-sizing:border-box;
  padding:0 0 12px; font-family:Inter,system-ui,sans-serif;
}
.lfo-chip{
  display:inline-flex; align-items:center; flex:none; max-width:100%; height:28px; box-sizing:border-box;
  padding:0 4px 0 0; border-radius:50px; background:#E6F2FA; border:1px solid #99CBEB; color:#077FCF;
}
.lfo-chip-tx{
  display:inline-block; min-width:0; max-width:240px; height:26px; padding:0 6px 0 12px; margin:0;
  border:0; background:transparent; color:#077FCF; cursor:pointer; border-radius:50px 0 0 50px;
  font:500 12px/26px Inter,system-ui,sans-serif; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.lfo-chip-tx b{ font-weight:600; }
.lfo-chip-x{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:20px; height:20px; padding:0; margin:0; border:0; border-radius:50%; cursor:pointer;
  background:rgba(7,127,207,.12); color:#077FCF; font:600 14px/1 Inter,system-ui,sans-serif;
}
.lfo-chip-x:hover{ background:rgba(7,127,207,.22); }
.lfo-chip-tx:focus-visible, .lfo-chip-x:focus-visible, .lfo-limpiar:focus-visible{ outline:2px solid #077FCF; outline-offset:2px; }
.lfo-limpiar{
  flex:none; height:28px; padding:0 4px; margin:0; border:0; background:transparent; cursor:pointer;
  font:600 12px/28px Inter,system-ui,sans-serif; color:#077FCF; white-space:nowrap;
}
.lfo-limpiar:hover{ text-decoration:underline; }

/* los menús flotantes: fijos bajo su botón (el JS les pone top/left/ancho) */
.lfo-pop{
  position:fixed; z-index:1500; display:flex; flex-direction:column; box-sizing:border-box;
  width:320px; max-height:380px; padding:6px; overflow:hidden;
  background:#FFFFFF; border:1px solid #E6F2FA; border-radius:12px;
  box-shadow:0 10px 30px rgba(4,8,16,.14); font-family:Inter,system-ui,sans-serif;
}
.lfo-pop[hidden]{ display:none; }
.lfo-pop-o{ overflow-y:auto; outline:none; }
/* el menú de Ordenar toma el foco para el teclado; el anillo global de foco de la plataforma
   no le corresponde (la opción activa ya se marca con su fondo) */
.lfo-pop-o:focus, .lfo-pop-o:focus-visible{ outline:none!important; border-color:#E6F2FA!important; box-shadow:0 10px 30px rgba(4,8,16,.14)!important; }
.lfo-pop > input{
  display:block; flex:none; width:100%; height:34px; box-sizing:border-box; margin:0 0 6px;
  padding:0 12px; border:1px solid #E6F2FA; border-radius:8px; background:#F6F9FD;
  font:400 12px/normal Inter,system-ui,sans-serif; color:#2A2D34;
}
.lfo-pop > input::placeholder{ color:#8E9093; opacity:1; }
.lfo-pop > input:focus{ outline:none; border-color:#077FCF; background:#FFFFFF; box-shadow:0 0 0 3px rgba(7,127,207,.12); }
.lfo-menu{ flex:1 1 auto; min-height:0; overflow-y:auto; }
.lfo-op{
  display:flex; align-items:center; gap:10px; min-height:34px; box-sizing:border-box;
  padding:7px 10px; border-radius:8px; cursor:pointer;
  font:400 13px/1.3 Inter,system-ui,sans-serif; color:#2A2D34;
}
.lfo-op .lfo-k{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lfo-op .lfo-s{ flex:none; max-width:45%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:12px; color:#8E9093; font-variant-numeric:tabular-nums; }
.lfo-op.lfo-act{ background:#F2F8FD; }
.lfo-op[aria-selected="true"]{ color:#077FCF; font-weight:600; }
.lfo-op[aria-selected="true"] .lfo-s{ color:#077FCF; }
.lfo-op mark{ background:transparent; color:inherit; font-weight:700; }
.lfo-op.lfo-volver{ min-height:30px; font:600 12px/1.3 Inter,system-ui,sans-serif; color:#077FCF; }
.lfo-sep{ height:1px; margin:4px 2px; background:#E6F2FA; }
.lfo-vacio{ padding:8px 10px; font:400 12px/1.4 Inter,system-ui,sans-serif; color:#8E9093; }

/* en el teléfono, dedo: 44 de alto en botones y opciones */
html.mv .lfo-btn{ height:40px; padding:0 14px; font-size:13px; }
html.mv .lfo-op{ min-height:44px; font-size:14px; }
html.mv .lfo-chip-x{ width:28px; height:28px; }