/* ===================== Barra de filtros alineada (.filtros.fx) — 08-oct-2026 =====================
   Pedido de Jose: «reestructura los filtros de todas las opciones, puedes guiarte de HFC, que ordenó de muy buena manera».
   Mismo diseño que /opt/hfc/css/filtros-fx.css, adaptado a las variables y temas (noche / body.day) de Rete Fija.
   Cada filtro es un .fld (etiqueta arriba, control abajo); todos los controles miden lo mismo (--fx-h) y se alinean por
   abajo. Grupos:
     .fx-acc   acciones del filtro (Restablecer, Aplicar, Reset, Actualizar): seguidas del último filtro, a la misma altura.
     .fx-chips chips de filtros activos (clic = quitar): en la misma fila, centrados.
     .fx-tools herramientas (Excel, Columnas, Compartir, Comparativo, Personalizar): fila propia abajo a la izquierda.
     .fx-nota  texto de ayuda: fila propia.
   Barras: Diario, Intervalos, Supervisores, Asesores, Retenciones, Horas, Reporte Cliente (Resumen, Agentes, Evolutivo) y
   las ventanas «Detalle por tramo» y «📞 Llamadas salientes». */

.filtros.fx{
  --fx-h:36px;
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 14px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:12px 16px 14px;margin-bottom:16px;box-shadow:0 6px 22px rgba(0,0,0,.12);
}
body.day .filtros.fx{box-shadow:0 4px 16px rgba(30,30,30,.06)}
.filtros.fx .fld{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0}
.filtros.fx .fld > label:not(.fx-chk){
  font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);line-height:1;white-space:nowrap;padding-left:2px;
}

/* controles: misma altura, misma letra */
.filtros.fx :is(select.ctl,input.ctl,button.ctl){
  box-sizing:border-box;height:var(--fx-h);padding:0 12px;font-family:var(--sans);font-size:13px;font-weight:500;
  background:var(--surface2);border:1px solid var(--border);color:var(--text);border-radius:var(--r-md);
  min-width:120px;max-width:240px;
}
.filtros.fx select.ctl{cursor:pointer}
.filtros.fx :is(select.ctl,input.ctl,button.ctl):hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--border))}
.filtros.fx :is(select.ctl,input.ctl,button.ctl):focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}
.filtros.fx select.ctl.filtro-activo{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.filtros.fx input.inp-tnps-meta{min-width:0;width:84px}
.filtros.fx .fld-buscar input.ctl{width:200px}
.filtros.fx .fecha-multi{min-width:150px}
.filtros.fx button.fecha-multi-btn{width:100%;text-align:left;cursor:pointer}

/* botones segmentados y cápsulas: misma altura que los combos */
.filtros.fx .dias-grp{margin:0;gap:0;height:var(--fx-h);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;background:var(--surface2)}
.filtros.fx .fx-seg{display:inline-flex;height:var(--fx-h);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;background:var(--surface2)}
.filtros.fx :is(.dias-grp,.fx-seg) .dias-btn{height:100%;border:0;border-radius:0;padding:0 13px;font-family:var(--sans);font-size:12.5px}
.filtros.fx :is(.dias-grp,.fx-seg) .dias-btn + .dias-btn{border-left:1px solid var(--border)}
.filtros.fx .vista-tgl{box-sizing:border-box;height:var(--fx-h);align-items:center}
.filtros.fx .vista-tgl button{padding:0 14px;height:100%}

/* casillas con aspecto de control (Día -1, Incluir sin match en nómina) */
.filtros.fx .fx-chk{
  box-sizing:border-box;display:inline-flex;align-items:center;cursor:pointer;
  height:var(--fx-h);padding:0 12px;gap:8px;border:1px solid var(--border);border-radius:var(--r-md);
  background:var(--surface2);font-family:var(--sans);font-size:13px;font-weight:500;color:var(--text);white-space:nowrap;
  text-transform:none;letter-spacing:0;
}
.filtros.fx .fx-chk input{width:15px;height:15px;margin:0;accent-color:var(--accent)}

/* chips de filtros activos y texto de ayuda */
.filtros.fx .fx-chips{display:flex;gap:6px;align-items:center;align-self:center;flex-wrap:wrap}
.filtros.fx .fx-nota{flex-basis:100%;margin-top:-4px}

.filtros.fx .fx-acc{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end}
.filtros.fx .fx-tools{flex-basis:100%;display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-start;padding-top:2px}
.filtros.fx :is(.fx-acc,.fx-tools) :is(.dias-btn,.btn-export){
  box-sizing:border-box;height:var(--fx-h);min-height:0;padding:0 14px;display:inline-flex;align-items:center;gap:6px;margin:0;
  font-family:var(--sans);font-size:12.5px;font-weight:600;border-radius:var(--r-md);white-space:nowrap;transform:none;
}

@media (max-width:760px){
  .filtros.fx{padding:10px 12px 12px;gap:10px}
  .filtros.fx .fld{flex:1 1 130px;align-items:stretch}
  .filtros.fx :is(select.ctl,input.ctl,button.ctl){max-width:none;width:100%}
  .filtros.fx .fld-buscar{flex-basis:100%}
  .filtros.fx .fld-buscar input.ctl{width:100%}
  .filtros.fx .fecha-multi{min-width:0;width:100%}
  .filtros.fx :is(.vista-tgl,.dias-grp,.fx-seg){width:100%}
  .filtros.fx :is(.vista-tgl,.dias-grp,.fx-seg) > *{flex:1 1 0;justify-content:center}
  .filtros.fx .fx-chk{font-size:12px;padding:0 10px;overflow:hidden}
  .filtros.fx .fld:has(> .fx-chk),.filtros.fx .fld:has(> .dias-grp){flex-basis:100%}   /* casillas y Rango: fila completa, sin cortar el texto */
  .filtros.fx :is(.dias-grp,.fx-seg) .dias-btn{padding:0 6px;min-width:0}
}

/* Reporte Cliente › Evolutivo: dentro de la barra, Excel va con las demás herramientas (no a la derecha) y
   «Personalizar tablas» con el mismo borde que el resto de botones. */
.filtros.fx .fx-tools .rce-export-wrap{margin-left:0}
.filtros.fx .fx-tools .rce-table-custom-btn{border-color:var(--border);color:var(--muted)}
.filtros.fx .fx-tools .rce-table-custom-btn:hover{border-color:var(--accent);color:var(--accent-ink)}