/* ============================================================================
   filtros-grid.css — Rejilla común de los paneles de filtrado de los listados
   ----------------------------------------------------------------------------
   Aplica una rejilla CSS uniforme y compacta ("chips") a los paneles de filtro
   de las 8 pantallas de listado (Llamadas, Carga de llamadas, Asuntos, Asuntos
   comerciales, Partes, Partes comerciales, Carga de trabajo, Proyectos) para que
   las columnas queden alineadas e idénticas entre pantallas.

   Cada filtro es una celda (.sl-fcell). Los filtros anchos ocupan varias celdas
   con los modificadores --2 / --3 / --4.
   Namespace: sl- (sistema Softline UI). NO toca lógica ni controles, solo layout,
   salvo la sección ".sl-generic-pill" de más abajo: es el componente visual de las
   pastillas de filtro (components/pill.tpl) — vivía en softline-ui.css pero es
   exclusivo de estos paneles de filtro, así que se ha movido aquí con el resto.
   ============================================================================ */

/* El rosa de "filtro activo" es el rosa de marca del sistema: var(--sl-pink), definido
   en css/softline-ui.css. Hasta 2026-09-11 este archivo declaraba aquí su PROPIO
   --sl-rosa: #e83e8c — un segundo rosa, parecido pero distinto al token (#E33678) —
   y los dos convivían en la misma pantalla: las pills de "Filtros activos"
   (components/pill.tpl con pill_color="var(--sl-pink)") iban del token, mientras que
   la celda y el label .changed-filter iban del otro. Eliminado: un solo rosa, y el que
   manda el sistema de diseño. */

.sl-filtros-grid {
	display: grid !important;
	/*grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));*/
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 9px 8px !important; /* fila 9px (aire al envolver) · columna 8px */
	row-gap: 9px !important;
	column-gap: 8px !important;

	align-items: stretch; /* todos los chips de una fila al mismo alto */
}
.sl-filtros-grid .sl-fcell,
.sl-filtros-grid .form-group {
	position: relative;
}
#sl-app .sl-filtro { position: relative; }
/* Fila filtros + Resumen (asuntos.filtros.tpl). Con auto-fill, .sl-filtros-grid generaba
   tantas COLUMNAS como cupieran en su ancho —no tantas como celdas reales tenga—, y el
   sobrante quedaba como columnas "fantasma" sin celda que pintar (el hueco en blanco
   antes de Resumen). Con auto-fit las columnas vacías colapsan a 0 y su hueco se
   reparte entre las columnas reales (que se ensanchan para llenar el espacio
   disponible), así que ya no queda hueco que reclamar con JS. */
.sl-filtros-resumen-row {
	display: flex;
	/* stretch (no flex-start): __resumen debe poder llenar el 100% de alto de la fila
	   (igualando a __filtros, que es normalmente la más alta) — ver height:100% en
	   .sl-resumen-actividad, que es quien realmente aprovecha ese alto. */
	align-items: stretch;
}
.sl-filtros-resumen-row__filtros {
	flex: 1 1 auto;
	min-width: 0;
}
/* A diferencia de __filtros (que SÍ debe repartirse el ancho sobrante: es la rejilla de
   chips), __resumen es una tarjeta de sidebar con contenido de ancho más o menos fijo
   (pills, dos stat-tiles, botones) — no queremos que "todo lo que sobra" se lo quede ella
   y acabe estirando esas piezas con aire de más. Ancho fijo, con margen para encoger en
   pantallas estrechas. Ver modules/asuntos.resumen.actividad.tpl. */
.sl-filtros-resumen-row__resumen {
	flex: 0 1 720px;
	min-width: 0;
	max-width: 720px;
}
/* ——— Modificador: sidebar de Resumen ESTRECHO ———
   Los 720px de arriba los comparten NUEVE pantallas (asuntos, partes, llamadas, carga de
   llamadas, carga de trabajo, proyectos, visitas, partes comerciales y asuntos comerciales),
   así que estrechar la regla base para arreglar una sola las estrecharía todas. De ahí el
   modificador.

   Quien lo necesita es /comerciales (modules/asuntos_comerciales.filtros.tpl): tiene MUCHOS
   más filtros que las demás —los 7 pasos del embudo Contactado→Venta, además de los
   habituales— y con la rejilla a ~690px solo le caben 4 columnas, así que el panel se le va
   a cinco filas de alto. Con 520px la rejilla pasa a ~860px, o sea 5 columnas
   (auto-fit, minmax(140px, 1fr) + 8px de gap), y el panel baja una fila entera.

   520 y no menos: los dos stat-tiles (Asuntos / Encargos) van en fila dentro de esta tarjeta
   y por debajo de ~480px los botones de "Acciones rápidas" empiezan a envolver a dos filas.
   Sigue siendo "flex: 0 1", o sea que puede encoger más si la ventana es estrecha. */
.sl-filtros-resumen-row__resumen--estrecho {
	flex-basis: 520px;
	max-width: 520px;
}

/* ——— Modificador: sidebar de Resumen A TODO EL ANCHO ———
   Se aplica durante una búsqueda (asuntos.filtros.tpl): .sl-filtros-resumen-row__filtros no
   pinta la rejilla de filtros en ese estado (ver la guarda de ese archivo), así que esta
   tarjeta es la ÚNICA hija real de .sl-filtros-resumen-row y los 720px fijos de la regla base
   solo dejan un hueco vacío a su derecha sin nada que lo reclame. "flex: 1 1 auto" (en vez de
   "0 1 720px") le deja tomar todo el ancho sobrante, y quitar el "max-width" es necesario:
   sin eso el tope de 720px seguiría plantado aunque flex-grow ya quisiera repartirle más.
   Selector combinado con la clase base (misma especificidad que ".sl-panel-partes
   .sl-filtros-resumen-row__resumen", 0-2-0) para no depender del orden de aparición en la
   hoja frente a ese override de página. */
.sl-filtros-resumen-row__resumen.sl-filtros-resumen-row__resumen--full {
	flex: 1 1 auto;
	max-width: none;
}

/* Celda de filtro: 1 columna por defecto, con aspecto "chip" sutil.
   min-height uniforme para que todas se vean alineadas (las que llevan lista,
   como Representante o Creador encargo, pueden crecer por su contenido). */
.sl-filtros-grid > .sl-fcell {
	min-width: 0;
	min-height: 48px;
	background: #fafbfc;
	border: 1px solid var(--sl-border);
	border-radius: 5px;
	padding: 3px 7px;
	line-height: 1.15;
	margin: 0px 3px 0px 3px;
	/* Contenido alineado arriba (vertical) y centrado horizontalmente dentro del chip */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

/* Excepción: celdas cuyo interior se maqueta con columnas Bootstrap flotadas
   (Fechas desde/hasta, Ordenar) — si fueran flex, esas piezas se apilarían.
   Las dejamos en bloque (contenido arriba) para no romper su layout. */
.sl-filtros-grid > .sl-fcell:has(> [class*="col-md-"]) {
	display: block;
}

/* Filtros anchos: ocupan N columnas de la rejilla */
.sl-filtros-grid > .sl-fcell--2 { grid-column: span 2; }
.sl-filtros-grid > .sl-fcell--3 { grid-column: span 3; }
.sl-filtros-grid > .sl-fcell--4 { grid-column: span 4; }
.sl-filtros-grid > .sl-fcell--5 { grid-column: span 5; }
/* Ancho (p.ej. pastillas de fecha): cabe en 1 línea pero comparte fila */
.sl-filtros-grid > .sl-fcell--6 { grid-column: span 6; }
/* Filtro a fila completa (si alguna vez hace falta) */
.sl-filtros-grid > .sl-fcell--full { grid-column: 1 / -1; }

/* El select de Departamento lleva nombres largos ("INTERNET Y WEB",
   "PROGRAMACIÓN + SOPORTE"): su celda necesita 2 columnas para no cortarse.
   Se aplica a la celda que CONTIENE el select (no a las barras de botones). */
.sl-filtros-grid > .sl-fcell:has(select[name="dpto"]),
.sl-filtros-grid > .sl-fcell:has(select[name="dptos"]) {
	grid-column: span 2;
}

/* El <br> entre label y control sobra en los chips flex (los hijos ya se apilan)
   y separa el label de su contenido (efecto "label muy arriba"). Lo ocultamos. */
.sl-filtros-grid .sl-fcell br {
	display: none;
}

/* ----------------------------------------------------------------------------
   ORDENAR POR — el filtro de orden (components/orden-por.tpl)
   ----------------------------------------------------------------------------
   Lo usan los SEIS listados: Asuntos, Asuntos Comerciales, Partes, Partes Comerciales,
   Llamadas y Proyectos. Ya no queda ninguno con el marcado antiguo, así que las reglas que
   había aquí colgando de ":has(input[name='ol'])", de "#div-ordenar-por" y del par
   col-md-5/col-md-7 se han retirado: las pills nuevas siguen llevando radios name="ol", de
   modo que aquellas no eran código muerto sino código que habría seguido aplicando — en
   particular su "grid-column: span 2", que habría devuelto a dos columnas las celdas que
   acaban de pasar a una.

   QUÉ CAMBIÓ respecto de aquel diseño: el título ocupaba una línea entera para él solo y el
   <select> compartía la siguiente con dos botones de texto ("DESC." / "ASC.") que se llevaban
   146 de los 346px de la celda — el <select> se quedaba en 189px y truncaba las opciones largas
   ("Fecha encargo finalizado"). Y sobre todo, los dos botones eran azul sólido con una clase
   "active" que el sistema de diseño no define, así que no se veía cuál estaba aplicado.
   Ahora el sentido sube a la línea del título como dos pills de solo icono (~62px con el grupo
   segmentado) y el <select> se queda con el ancho entero de la celda.                        */
/* La celda que hospeda el filtro de orden (components/orden-por.tpl) se maqueta en FILA y
   pegada arriba. Alineado ARRIBA (no centrado) a conciencia: al ser flex-row + wrap, el eje
   transversal es vertical y lo gobierna "align-content", no "justify-content" — con "center"
   aquí, la celda entera flotaba a media altura en las filas altas (comprobado en vivo: la
   etiqueta aparecía a 107px del borde superior de una celda de 267px, frente a los 11-16px
   del resto de celdas).

   Enganchada a ".sl-orden" y NO a ":has(input[name='ol'])" como antes, por dos motivos:
   el nombre dice de qué filtro habla, y sobre todo la versión anterior también fijaba
   "grid-column: span 2" — un ancho impuesto por el CONTENIDO de la celda, que pisaba a los
   modificadores ".sl-fcell--N". Ahora el ancho lo decide quien escribe la plantilla, como en
   cualquier otra celda: Asuntos y Partes se quedan en "--2" porque comparten celda con más
   filtros; Partes Comerciales también, porque sus 4 celdas suman las 8 columnas de una sola
   fila (ver el style de cabecera de esa plantilla); y Llamadas, Proyectos y Comerciales
   pasan a una columna. */
.sl-filtros-grid > .sl-fcell:has(.sl-orden) {
	display: flex !important;
	flex-direction: row !important; /* IMPORTANTE: la regla general pone column */
	flex-wrap: wrap;
	align-content: flex-start;
	align-items: center;
	column-gap: 6px;
	row-gap: 2px;
}

.sl-filtros-grid .sl-orden {
	width: 100%;
}
/* Título a la izquierda, sentido del orden a la derecha, SIN envolver: son 11px de texto y dos
   pills de 24px, caben de sobra incluso en una celda de una sola columna (135-140px). */
.sl-filtros-grid .sl-orden__head {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: .375rem;
	width: 100%;
	margin-bottom: 2px;
}
/* El prefijo largo con los dos ":not(:has(#...))" NO es copia-pega ocioso: es exactamente el de
   la regla "Labels de cabecera centrados" del final de este archivo, que pone
   "display:block; width:100%; text-align:center" a TODO .label-filtros-sin-cabecera. Un ":not()"
   hereda la especificidad de su argumento más específico, y ahí dentro hay un id, así que esa
   regla puntúa 2-3-0: ni "#sl-app ..." (1-4-0) la gana. Reproduciendo su prefijo y añadiendo un
   nivel más llegamos a 2-4-0, que es lo mínimo para que el título pueda quedarse a su ancho
   natural y dejar sitio a las pills en la misma línea. */
.sl-filtros-grid .sl-fcell:not(:has(#btn-info-cliente)):not(:has(#btn-info-referencias)) .sl-orden__head > .label-filtros-sin-cabecera {
	width: auto;
	text-align: left;
	margin: 0;
}
/* Pills de solo icono: sin texto al lado, el icono ES el contenido y no un adorno, así que sube
   del .8125em de ".sl-generic-pill__icon" (unos 9px sobre los 11px de la pill) a 1.15em. Acotado
   a este control a propósito: las otras pills de solo icono de la app (las de tipo/estado del
   listado de partes) ya están validadas a su tamaño actual y no se tocan de rebote. */
.sl-orden__dir .sl-generic-pill__icon {
	font-size: 1.15em;
}
/* Ancho fijo para que las dos pills midan lo mismo: la flecha arriba y la flecha abajo no tienen
   el mismo ancho de glifo, y sin esto el grupo "baila" 1-2px al cambiar de sentido. */
.sl-orden__dir .sl-generic-pill {
	min-width: 1.5rem;
}

/* TEXTO COMENTARIO (Partes): label centrado arriba, y textarea (flexible) + botón en una sola
   línea. El <textarea rows="1"> se presenta como si fuera un <input> de una línea: sin tirador
   de redimensionado, sin scroll y con alto/padding fijos. Todo eso vivía en un style inline de
   siete propiedades en partes.filtros.tpl —incluido un "width:calc(100% - 100px)" que colapsaba
   en el flex y que esta misma regla tenía que anular con !important— y se trajo aquí al migrar
   Partes (2026-09-09). */
.sl-filtros-grid > .sl-fcell:has(#input-comentario) .form-group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 100%;
}
.sl-filtros-grid > .sl-fcell:has(#input-comentario) .form-group > label {
	flex: 0 0 100%;
	text-align: center;
}
.sl-filtros-grid > .sl-fcell:has(#input-comentario) #input-comentario {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	height: 26px;
	padding: 3px 6px;
	resize: none;
	overflow: hidden;
}

/* FECHAS (DESDE / HASTA + botón recargar): sale de la excepción de bloque y se
   maqueta en flex-row. El botón de recarga se alinea con los inputs (fila inferior,
   no con los labels) y todo el grupo queda centrado en la celda. */
.sl-filtros-grid > .sl-fcell:has(input[name="from"]) {
	display: flex !important;      /* vence la excepción display:block de los col-md */
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;           /* DESDE / HASTA / botón centrados verticalmente */
	justify-content: center;
	column-gap: 6px;
}
.sl-filtros-grid > .sl-fcell:has(input[name="from"]) > [class*="col-md-"] {
	width: auto;
	float: none;
	flex: 0 0 auto;
	padding: 0;
}
/* El botón de recarga: sin float ni margen que lo descuadre dentro del flex */
.sl-filtros-grid > .sl-fcell:has(input[name="from"]) button[type="submit"] {
	float: none !important;
	margin: 0 !important;
}

/* SELECTORES DE USUARIOS (Representante[s] y Creador encargo): llevan un col-md-5
   interno (#elegir_usuario / #elegir_usuario_cr_e) → caían en la excepción
   display:block y quedaban a la izquierda. Los pasamos a flex centrado como el
   resto: botón (+ papelera) en la 1ª línea, lista de usuarios elegidos debajo. */
.sl-filtros-grid > .sl-fcell:has(#elegir_usuario),
.sl-filtros-grid > .sl-fcell:has(#elegir_usuario_cr_e) {
	display: flex !important;      /* vence la excepción display:block de los col-md */
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	align-content: flex-start;         /* centrado vertical como los demás chips */
	justify-content: start;
	gap: 5px;
	width: 100%;
}
.sl-filtros-grid > .sl-fcell div#div-representantes,
.sl-filtros-grid > .sl-fcell div#div-creado-por {
	width: 100%;
}
.sl-filtros-grid > .sl-fcell .div-representantes-buttons {
	display: flex !important;
	flex-direction: row;
	gap: 5px;
}
.sl-filtros-grid > .sl-fcell #elegir_usuario {
	width: 100%;
	margin-left: 0;
}
/* La lista de usuarios (col-md-5) salta a su propia línea, a ancho completo y centrada */
.sl-filtros-grid > .sl-fcell:has(#elegir_usuario) > [class*="col-md-"],
.sl-filtros-grid > .sl-fcell:has(#elegir_usuario_cr_e) > [class*="col-md-"] {
	flex: 0 0 100%;
	width: 100% !important;
	float: none;
	margin: 0;
	padding: 0;
	text-align: center;
}
/* Lista de pills de usuarios elegidos (Representantes / Creado por): máximo 2 pills reales
   + 1 pill "+N" con el resto (ver asuntos.filtros.tpl). A petición (2026-08-25): en vez de
   dejar que las pills crezcan con el nombre y envuelvan a una 2ª línea si no caben, se fija
   una rejilla de 3 columnas — 2 iguales para las pills reales + 1 "auto" reservada para la
   "+N" — para que ese hueco de la derecha esté SIEMPRE en el mismo sitio (aparezca "+1",
   "+12" o no aparezca ninguna) y el nombre que no quepa se corte con "…" en vez de mover el
   layout. Con 1 sola pill real, la 2ª columna queda simplemente vacía (sin "+N" tampoco, ya
   que esta lista no llega a pintarse con menos de 1 userid — con 0 se pinta "Todos" aparte).
   Con la columna "auto" sin ningún item que colocar en ella (2 o menos userids), su ancho
   colapsa a 0 y las dos columnas "1fr" se reparten el 100% del ancho entre ellas. */
.sl-filtros-grid > .sl-fcell:has(#elegir_usuario) #nice_usergroup_list,
.sl-filtros-grid > .sl-fcell:has(#elegir_usuario_cr_e) #nice_usergroup_list {
	margin: 0 !important;
	display: grid;
	grid-template-columns: 1fr 1fr auto;
	align-items: center;
	gap: 5px;
}
/* Excepción: con un único representante (2º hueco vacío, sin "+N") la rejilla de 3 columnas
   de arriba le daría solo la mitad del ancho disponible y lo truncaría sin necesidad, dejando
   además un hueco en blanco a su lado sin usar — con un solo hijo, esa única pill pasa a ocupar
   el 100% del ancho. ":only-child" en vez de contar desde Smarty: es la forma CSS de decir
   "cuando de verdad solo hay una", sin tener que replicar en el .tpl la misma condición que ya
   decide cuántas pills se pintan. */
.sl-filtros-grid > .sl-fcell:has(#elegir_usuario) #nice_usergroup_list:has(> .sl-generic-pill--tag:only-child),
.sl-filtros-grid > .sl-fcell:has(#elegir_usuario_cr_e) #nice_usergroup_list:has(> .sl-generic-pill--tag:only-child) {
	grid-template-columns: 1fr;
}
/* Las pills reales necesitan poder encogerse por DEBAJO de su ancho de contenido para que el
   texto interior llegue a truncarse — sin min-width:0 aquí, tanto grid como flex respetan un
   mínimo automático igual al ancho del contenido y jamás se activaría el ellipsis de más
   abajo. La "+N" (pill_counter=true) no entra en este selector porque no la envuelve
   #nice_usergroup_list > .sl-generic-pill--tag de forma distinta — sí entra, pero su columna
   "auto" ya la dimensiona a su contenido exacto, así que min-width:0 no le cambia nada. */
.sl-filtros-grid > .sl-fcell:has(#elegir_usuario) #nice_usergroup_list > .sl-generic-pill--tag,
.sl-filtros-grid > .sl-fcell:has(#elegir_usuario_cr_e) #nice_usergroup_list > .sl-generic-pill--tag {
	min-width: 0;
}
/* El texto (envuelto en .sl-generic-pill__label por components/pill.tpl) es el único que se
   trunca — la "×" de al lado (.sl-generic-pill__remove, fuera de este span) se queda siempre
   visible y en el mismo sitio, nunca recortada. */
.sl-filtros-grid > .sl-fcell:has(#elegir_usuario) #nice_usergroup_list > .sl-generic-pill--tag .sl-generic-pill__label,
.sl-filtros-grid > .sl-fcell:has(#elegir_usuario_cr_e) #nice_usergroup_list > .sl-generic-pill--tag .sl-generic-pill__label {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* ⚠️ Sin esto, el ellipsis de arriba NO se ve pese a estar bien puesto: la etiqueta la rellena
   modules/usuario.etiqueta.tpl, cuyo ".span-u-etiq" es display:inline-flex con
   justify-content:center (pensado para su uso normal, centrando avatar+nombre cuando SÍ caben).
   Al forzar aquí un ancho más estrecho que el nombre, ese "inline-flex" no se encoge —
   justify-content:center centra el nombre entero (más ancho que el hueco) DENTRO de su propio
   flex box y lo deja desbordar por IGUAL a los dos lados; ".sl-generic-pill__label" solo recorta
   lo que sobresale de SU PROPIO borde, así que el resultado visible es una porción del MEDIO del
   nombre (falta el principio Y el final) sin ningún "…", justo lo contrario de lo que se quiere.
   Aquí, dentro de la pill, no hace falta el layout de avatar+nombre de ".span-u-etiq" (la foto ya
   viene oculta con force_hide_image=1 en asuntos.filtros.tpl): pasarlo a "inline" lo saca de ser
   su propia caja flex y deja el nombre fluir como texto normal de una sola pieza, que es lo que
   el ellipsis del padre sabe recortar correctamente. Verificado en vivo (2026-08-25) con
   caretRangeFromPoint(): sin esto, el primer carácter visible de "JENNIFER MAESTRO" era la 2ª
   "N"; con esto, el ellipsis recorta al final ("JENNIFER MA…"), como debe ser. */
.sl-filtros-grid > .sl-fcell:has(#elegir_usuario) #nice_usergroup_list .sl-generic-pill__label .span-u-etiq,
.sl-filtros-grid > .sl-fcell:has(#elegir_usuario_cr_e) #nice_usergroup_list .sl-generic-pill__label .span-u-etiq,
.sl-filtros-grid > .sl-fcell:has(#elegir_usuario) #nice_usergroup_list .sl-generic-pill__label .usuarioEtiquetaSpan,
.sl-filtros-grid > .sl-fcell:has(#elegir_usuario_cr_e) #nice_usergroup_list .sl-generic-pill__label .usuarioEtiquetaSpan {
	display: inline;
}

/* El selector de cliente trae un alto fijo (height:40px) que recorta su
   segunda fila dentro del chip; lo dejamos crecer al contenido */
.sl-filtros-grid #div-cliente-id { height: auto !important; }

/* #div-cliente-id vive en un flex-column con align-items:center: en ese eje transversal
   align-items:center dimensiona por "fit-content" sin tope real, y min-width:0 no tiene efecto
   (solo aplica al eje principal). max-width:100% sí fuerza el tope contra el chip. */
.sl-filtros-grid > .sl-fcell #div-cliente-id { max-width: 100%; }

/* .sl-filtro--cliente (solo asuntos.filtros.tpl): envoltorio EXTRA alrededor de #div-cliente-id
   que NO existe en asuntos_comerciales.filtros.tpl — ahí #div-cliente-id es hijo DIRECTO de
   .sl-fcell, con una anchura definida (la de la celda). Aquí, en cambio, #div-cliente-id cuelga
   de este wrapper sin anchura propia, que es OTRO flex item más de la columna de arriba
   (#sl-app .sl-filtros-grid .sl-fcell, más abajo) y por tanto se encoge también a fit-content por
   el mismo align-items:center — igual que el .btn-group de más abajo, mismo mecanismo.
   Consecuencia: la base de los porcentajes que cuelgan de él (el max-width:100% de arriba, y en
   cascada el max-width:100% de la pill del cliente elegido en filtros-grid.css más abajo) queda
   INDEFINIDA, así que ninguno de los dos truncaba de verdad — crecían todos al ancho del
   contenido en vez de recortarlo. Confirmado en vivo (2026-09-23): la misma pill sí truncaba en
   /comerciales y no en /asuntos, con idéntico HTML/CSS aguas abajo — la única diferencia era este
   wrapper. align-self:stretch + width:100% le da una anchura definida = la de la celda, y con
   eso los "100%" de más abajo vuelven a significar algo. */
.sl-filtros-grid .sl-filtro--cliente {
	align-self: stretch;
	width: 100%;
}


.sl-filtros-grid #div-cliente-id label,
.sl-filtros-grid #div-representantes label {
	padding: 0 !important;
	margin: 0;
	width: 100%;
}

/* Cód. cliente en 3 líneas: (1) título "Cód. cliente" · (2) input + botones ·
   (3) nombre del cliente. Solo en la rejilla de filtros (el include se reutiliza
   en diálogos y otras pantallas: no se tocan). Dos saltos forzados con ::before/::after. */
.sl-filtros-grid #div-cliente-id .form-group,
.sl-filtros-grid #div-representantes .form-group,
.sl-filtros-grid #div-creado-por .form-group {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center; /* cada fila (título, input+botones, nombre) centrada */
	gap: 5px;
}
.sl-filtros-grid .form-group {
	margin-bottom: 0 !important;
}
#sl-app .sl-filtros-grid .form-group {
	border-bottom: 0;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-bottom: 0;
	width: 100%;
}
/* (1) título: botón info + label "Cód. cliente" */
.sl-filtros-grid #div-cliente-id .form-group > #btn-info-cliente,
.sl-filtros-grid #div-cliente-id .form-group > label.label-filtros-sin-cabecera {
	order: 1;
}
.sl-filtros-grid #div-cliente-id .form-group::before {
	content: ""; order: 2; flex-basis: 100%; height: 0; /* salto 1 */
}
/* (2) input + lupa + estrella + papelera */
.sl-filtros-grid #div-cliente-id .form-group > input,
.sl-filtros-grid #div-cliente-id .form-group > a.btn:not(#btn-info-cliente) {
	order: 3;
}
.sl-filtros-grid #div-cliente-id .form-group::after {
	content: ""; order: 4; flex-basis: 100%; height: 0; /* salto 2 */
}
/* (3) nombre del cliente (label sin la clase de cabecera) */
.sl-filtros-grid #div-cliente-id .form-group > label:not(.label-filtros-sin-cabecera) {
	order: 5;
}

/* Etiqueta de cabecera compacta. OJO: NO forzar display:block/width:100% porque
   algunos filtros (cliente, referencia) llevan un botón "i" inline junto al label
   y se romperían a varias líneas. El salto de línea ya lo dan el <br> o el control. */
.sl-filtros-grid .label-filtros-sin-cabecera {
	margin-bottom: 1px;
	font-size: 11px;
	line-height: 1.2;
}

/* Selects y controles ocupan el ancho de la celda y van compactos en alto */
.sl-filtros-grid > .sl-fcell .form-control {
	max-width: 100%;
	height: 24px;
	padding-top: 1px;
	padding-bottom: 1px;
}
.sl-filtros-grid > .sl-fcell select.form-control {
	height: 24px;
}
/* Botones de los grupos (estado, sí/no, asc/desc…) más compactos */
.sl-filtros-grid > .sl-fcell .btn-xs {
	padding: 1px 6px;
}
/* Barras Sí/No (Urgente, Contactado, Pres. Preparado…) con display:block inline:
   sus botones van con float:left, así que el bloque colapsa y queda a la izquierda.
   Forzamos inline-flex → el grupo toma el ancho de su contenido y el chip lo centra. */
.sl-filtros-grid > .sl-fcell .btn-group[style*="display: block"] {
	display: inline-flex !important;
}
/* Prioridad: su include añade <script>/<style> como hermanos dentro del chip y la
   descentran verticalmente. Forzamos flex-column centrado e ignoramos esos nodos. */
.sl-filtros-grid > .sl-fcell:has(input[name="prio"]) {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.sl-filtros-grid > .sl-fcell:has(input[name="prio"]) > script,
.sl-filtros-grid > .sl-fcell:has(input[name="prio"]) > style {
	display: none !important;
}
/* Quita el <br> de aire entre label y controles donde lo haya */
.sl-filtros-grid > .sl-fcell br {
	line-height: 0.6;
}

/* ----------------------------------------------------------------------------
   Filtro ACTIVO: toda la celda en "rosita" (no solo el label)
   ---------------------------------------------------------------------------- */
/* Cuando la celda contiene un label .changed-filter, tiñe todo el chip.
   ⚠️ El selector se repite CON "#sl-app" delante, y no es adorno: softline-ui.css
   define "#sl-app .sl-filtros-grid > .sl-fcell { background: var(--sl-bg-card) }", que
   con su id puntúa 1-2-0 frente al 0-3-0 de la versión sin id — y la especificidad manda
   sobre el orden de carga, así que este archivo NO ganaba por cargarse después. Resultado:
   desde que se añadió aquella regla, la celda del filtro activo se quedaba BLANCA en todas
   las pantallas migradas y el único indicio que quedaba era el borde de 1px (el label ya no
   distingue: más abajo se pintan TODOS en rosa). Se mantienen las dos variantes: la de id
   para pantallas con #sl-app, la de clases para las que aún no lo tienen. */
#sl-app .sl-filtros-grid > .sl-fcell:has(.changed-filter),
.sl-filtros-grid > .sl-fcell:has(.changed-filter) {
	background: var(--sl-pink-050);      /* rosa de marca, tinte claro */
	border-color: var(--sl-pink);
}
/* El label deja de ser un bloque magenta sólido: pasa a texto rosa sobre el chip
   rosita (el indicador de "activo" ahora es toda la celda) */
.sl-filtros-grid .sl-fcell .changed-filter {
	background-color: transparent !important;
	color: var(--sl-pink) !important;
}

/* ----------------------------------------------------------------------------
   Labels de cabecera centrados horizontalmente, a tamaño uniforme
   (el tamaño 11px uppercase bold ya lo fija .label-filtros-sin-cabecera en style.css).
   Se excluyen las celdas con botón "i" inline (Cód. cliente, Referencia): ahí el
   label convive con el botón en la misma línea y no debe ir a ancho completo. */
.sl-filtros-grid .sl-fcell:not(:has(#btn-info-cliente)):not(:has(#btn-info-referencias)) .label-filtros-sin-cabecera {
	display: block;
	width: 100%;
	text-align: center;
}
/* ----------------------------------------------------------------------------
   COHERENCIA TIPOGRÁFICA: todos los filtros iguales, sin estilos personalizados
   de tipo de fuente ni tamaños dispares por filtro.
   ---------------------------------------------------------------------------- */
/* Un único tipo de fuente (el de la página): anula los font-family inline
   sueltos como 'roboto condensed' en los grupos de botones (Sí/No, DESC/ASC…) */
.sl-filtros-grid .sl-fcell,
.sl-filtros-grid .sl-fcell label,
.sl-filtros-grid .sl-fcell input,
.sl-filtros-grid .sl-fcell select,
.sl-filtros-grid .sl-fcell .form-control,
.sl-filtros-grid .sl-fcell .btn {
	font-family: inherit !important;
}
/* Labels de cabecera: TODOS al mismo tamaño (incluye Cód. cliente y Referencia,
   que antes iban reducidos) */
.sl-filtros-grid .sl-fcell .label-filtros-sin-cabecera {
	font-size: 11px !important;
}
/* Controles de texto (selects / inputs): un único tamaño uniforme */
.sl-filtros-grid .sl-fcell .form-control {
	font-size: 13px !important;
}

/* En viewports estrechos, celdas algo más pequeñas para mantener varias por fila */
@media (max-width: 1400px) {
	.sl-filtros-grid {
		grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
	}
}

/* ----------------------------------------------------------------------------
   Resumen de filtros activos (components/filtros.activos.pills.tpl): contenedor
   COMÚN para el array de pills ya renderizadas ($_af_pills, recopilado en
   asuntos.filtros.tpl); el modificador decide cómo fluyen entre sí. DOS usos hoy,
   en DOS sitios distintos de asuntos.tpl (ya no en el sidebar Resumen, cuya propia
   sección "Filtrando por:" se quitó el 2026-08-25 para no triplicar las pills):
   --wrap   → ".sl-filtros-activos-bar" (más abajo), la franja CON título "Filtros
              activos" fuera de ".sl-fixed-top" — se ve mientras el panel está
              abierto, pero al hacer scroll queda fuera del área sticky.
   --inline → ".sl-filtros-activos-scroll" (más abajo), la franja SIN título, en
              una sola línea con scroll horizontal, DENTRO de ".sl-fixed-top" —
              visible SOLO cuando el panel se compacta por scroll, para cubrir el
              hueco que deja la anterior al desaparecer de la vista.
   ---------------------------------------------------------------------------- */
.sl-filtros-activos-pills {
	display: flex;
	gap: .375rem;
}
.sl-filtros-activos-pills .sl-generic-pill--tag {
	flex: 0 0 auto;
}
.sl-filtros-activos-pills--wrap {
	flex-wrap: wrap;
}
.sl-filtros-activos-pills--inline {
	flex-wrap: nowrap;
	overflow-x: hidden;
	overflow-y: hidden;
	scrollbar-width: thin;
	scrollbar-color: var(--sl-border-2) transparent;
}
/* Arrastrar con el ratón + rueda (ver sl_hscroll_init() en common.tpl.js): el cursor de
   "agarrar" solo aparece cuando de verdad hay algo que arrastrar (.is-overflowing, la
   clase la pone el propio JS al medir), no siempre — así no sugiere una interacción que
   no serviría de nada si todas las pills ya caben. */
.sl-filtros-activos-pills--inline.is-overflowing { cursor: grab; }
.sl-filtros-activos-pills--inline.is-dragging { cursor: grabbing; user-select: none; }

/* ----------------------------------------------------------------------------
   Franja de filtros activos EN SCROLL, sin título — restaurada 2026-08-25 a
   petición del usuario: visible SOLO cuando el panel se compacta al hacer scroll
   (mismo disparador que colapsa la rejilla de filtros: .sl-fixed-top--auto-compact,
   ver softline-ui.css). Sin esto, al compactarse desaparecen TANTO la rejilla como
   el sidebar Resumen (ambos dentro de .sl-fixed-top) y no queda ni rastro de qué se
   está filtrando — esta franja cubre ese hueco con una fila horizontal compacta,
   con scroll si no caben todas las pills ("--inline" de arriba). La franja CON
   título ".sl-filtros-activos-bar" (más abajo) no sirve para este caso: al vivir
   fuera de ".sl-fixed-top", en cuanto se hace scroll queda fuera de la vista junto
   con el resto del contenido no fijado.

   El <div class="sl-filtros-activos-scroll"> se coloca en asuntos.filtros.tpl
   DESPUÉS de .sl-filtros-resumen-row (que es quien rellena $_af_pills — no puede
   ir antes en el HTML) pero se reordena visualmente ANTES con flex "order", para
   que quede pegado a la cabecera sin depender de conocer su altura exacta.

   Un SOLO bloque para las 8 pantallas, escopado a ".sl-panel-filtros" (2026-09-15).
   Antes eran cinco bloques idénticos, uno por pantalla, porque no existía una clase
   común y ".sl-fixed-top .panel" a secas habría arrastrado paneles que no son de
   filtros. Ahora la clase la ponen las 8 <section> de filtros y el selector genérico
   es exacto, así que migrar una pantalla más no exige tocar este archivo.

   El tercer hijo tiene DOS formas según la pantalla, y por eso van las dos en la
   misma regla: ".sl-filtros-resumen-row" donde hay sidebar "Resumen" (asuntos,
   asuntos comerciales, llamadas, partes, partes comerciales y visitas) y ".panel-body"
   donde no lo hay (proyectos, extracto de horas). Visitas cambio de grupo el 2026-09-15,
   al ganar su propio sidebar "Resumen". Solo una de las dos es hija
   DIRECTA en cada pantalla —en las primeras, el ".panel-body" va anidado dentro de
   ".sl-filtros-resumen-row__filtros"— así que el combinador ">" las mantiene
   excluyentes y ninguna pantalla recibe dos veces "order: 3".

   ⚠️ En un contenedor flex, todo hijo SIN "order" vale 0 y se va DELANTE de la
   cabecera (order 1). Comprobado antes de unificar que las 8 secciones tienen
   exactamente estos hijos y ningún nodo de texto suelto (que también sería un ítem
   flex anónimo con order 0). Al añadir un hijo nuevo a un panel de filtros, darle
   su "order" aquí — si no, aparecerá arriba del todo sin que nada avise.

   ".sl-filtros-activos-scroll" pasa a order:3, DETRÁS de la rejilla/sidebar (2026-09-16, a
   petición del usuario): al ser ahora SIEMPRE visible —no solo con el panel compactado, ver
   el aviso junto a ".sl-filtros-activos-scroll" más abajo— quedaba ENCIMA de la rejilla
   entera con el panel abierto, en vez de debajo de toda la caja de filtros como se pidió. */
.sl-panel-filtros {
	display: flex;
	flex-direction: column;
}
.sl-panel-filtros > .panel-heading { order: 1; }
.sl-panel-filtros > .sl-filtros-resumen-row,
.sl-panel-filtros > .panel-body { order: 2; }
.sl-panel-filtros > .sl-filtros-activos-scroll { order: 3; }



/* Tarjeta "Resultados" un poco más ancha en Partes — a petición del usuario (2026-09-11).
   Escopado a ".sl-panel-partes" y NO a ".sl-filtros-resumen-row__resumen" a secas: esa clase es
   compartida con Asuntos y Llamadas (mismo mecanismo que el resto de este bloque), y ensanchar
   ahí afectaría a esas dos páginas también. Solo el max-width/basis cambian; min-width:0 se
   mantiene para poder seguir encogiendo en pantallas estrechas. */
.sl-panel-partes .sl-filtros-resumen-row__resumen {
	flex: 0 1 820px;
	max-width: 820px;
}


/* Reglas propias de Visitas. Su reordenado flex/"order" NO esta aqui: lo hace
   ".sl-panel-filtros" de mas arriba, comun a las 8 pantallas (unificado el 2026-09-15,
   el mismo dia que Visitas estreno su sidebar "Resumen"). La clase ".sl-panel-visitas"
   sigue en el <section> de visitas.tpl, pero ya solo como gancho de las reglas de rejilla
   que vienen a continuacion. */
/* Rejilla de filtros de Visitas: 5 columnas fijas — Desde/Hasta y Departamento apilados en la 1ª
   (celda normal, 1 columna), Asignado a y Cliente apilados en las cols 2-3 (celda ancha),
   Comentario en las cols 4-5 (fila 1, celda ancha) — a petición del usuario 2026-09-15,
   reordenado el mismo día varias veces hasta llegar a este reparto concreto de qué va ancho y qué
   va estrecho. Cada celda lleva su posición vía una de las clases ".sl-fcell--vis-*" de más
   abajo — NO con grid-column/grid-row inline en el .tpl, mismo criterio que el resto de
   modificadores ".sl-fcell--N" de este archivo, pensados para leerse en la clase del HTML en vez
   de en un estilo suelto.

   ⚠️ Historial del mismo día — la POSICIÓN de cada filtro ha cambiado tres veces, pero las dos
   trampas de layout de abajo son las mismas cada vez y conviene no volver a caer en ellas:
   1) ".__filtros" a 340px fijos + ".__resumen" sin límite de ancho: roto en los dos sentidos —
      340px no le cabía a "Asignado a" (desbordaba por encima del "overflow:visible" de
      ".sl-fcell"), y "Resumen" sin límite se estiraba a >1500px, dejando sus pastillas/avisos
      como cajas gigantes casi vacías.
   2) Ancho de contenedor calculado "al límite" sin contar el padding de ".panel-body"
      (Bootstrap: "padding: 15px" a cada lado, 30px que hay que restar del contenedor antes de
      compararlo con la suma de mínimos de columna) — se quedó corto una vez y Comentario acabó
      cortado por la derecha. Por eso el cálculo de abajo siempre resta esos 30px explícitamente. */
.sl-panel-visitas .sl-filtros-resumen-row__filtros {
	flex: 0 0 900px;
	max-width: 900px;
}
/* Columnas explícitas en vez de dejar que "auto-fit" decida (motivo de siempre: un contenedor más
   ancho que la suma de mínimos + huecos abre columnas de sobra vacías en vez de repartir el ancho
   entre las que usan las celdas ancladas). La col 1 (Desde/Hasta y Departamento, celda normal)
   lleva el mínimo más alto de las 5: es la única celda de una sola columna, y Desde/Hasta por sí
   solo ya necesita sitio para Desde + Hasta + el botón "Buscar" en fila (mismo contenido que
   antes necesitaba 210px cuando era Asignado a quien vivía sola en su columna). Las cols 2-3
   (Asignado a/Cliente) y 4-5 (Comentario) llevan un mínimo bajo cada una — lo que importa es la
   SUMA de las dos que ocupa cada celda ancha, no cada track por separado. Suma de mínimos:
   210+120+120+120+120 = 690px + 4 huecos de 8px = 722px — con ".panel-body" restando 30px de
   padding, hacen falta ≥752px de contenedor; los 900px de arriba dejan casi 150px de margen
   real, no un cálculo al límite como las veces anteriores. */
.sl-panel-visitas .sl-filtros-grid {
	grid-template-columns: minmax(210px, 1fr) minmax(120px, 1fr) minmax(120px, 1fr) minmax(120px, 1fr) minmax(120px, 1fr);
}
/* Posiciones ancladas de Visitas, una clase por celda — ver el comentario de arriba sobre por qué
   viven aquí y no como estilo inline.
   ⚠️ ".sl-fcell--vis-dpto" lleva "!important": la regla genérica
   ".sl-filtros-grid > .sl-fcell:has(select[name='dpto']) { grid-column: span 2; }" de más arriba
   puntúa (0,3,1) (2 clases + el ":has()" suma la especificidad de su argumento, un selector de
   atributo) — MÁS que estas dos clases juntas (0,2,0) — así que sin "!important" la celda de
   Departamento volvería a ocupar 2 columnas por encima de lo que dice esta regla. Con un estilo
   inline esto no haría falta (gana a cualquier regla externa sin "!important", puntuación
   aparte), pero al usar una clase sí hay que ganar el pulso a mano. */
.sl-fcell.sl-fcell--vis-fecha       { grid-column: 1; grid-row: 1; }
.sl-fcell.sl-fcell--vis-dpto        { grid-column: 1 !important; grid-row: 2; }
.sl-fcell.sl-fcell--vis-asignado    { grid-column: 2 / span 2; grid-row: 1; }
.sl-fcell.sl-fcell--vis-cliente     { grid-column: 2 / span 2; grid-row: 2; }
.sl-fcell.sl-fcell--vis-comentario  { grid-column: 4 / span 2; grid-row: 1; }
/* Tipo/Estado (2026-09-22, rename Visitas -> Citas): cols 4-5 de la fila 2 estaban libres --
   Comentario ya ocupa esas mismas columnas pero en la fila 1. */
.sl-fcell.sl-fcell--vis-tipo        { grid-column: 4; grid-row: 2; }
.sl-fcell.sl-fcell--vis-estado      { grid-column: 5; grid-row: 2; }
/* "Seleccionar" y la papelera SIEMPRE en la misma fila (a petición del usuario 2026-09-15: "next
   to seleccionar, inline, flex-row, not under it") — el "flex-wrap: wrap" que hubo aquí antes como
   red de seguridad los apilaba en dos líneas en cuanto la celda venía algo justa de ancho, que es
   justo lo que se pidió corregir. Los dos botones caben de sobra en el mínimo de columna de
   "Asignado a" (ver el cálculo de arriba), así que "nowrap" no vuelve a abrir el desbordamiento del
   primer intento (pills incluidas: esas viven en "#nice_usergroup_list", un hermano FUERA de este
   contenedor, no dentro). */
.sl-panel-visitas .div-representantes-buttons {
	flex-wrap: nowrap;
}
/* "Resumen" siempre pegado al borde derecho de la fila, a petición del usuario 2026-09-15: ni
   "__filtros" (0 0 460px) ni "__resumen" (0 1 720px, regla base) tienen flex-grow, así que en una
   pantalla más ancha que 460+720px el sobrante quedaba como hueco en blanco DESPUÉS de "__resumen"
   en vez de empujarlo al borde — visible con la ventana ancha del navegador. Un margin-left:auto
   en el último hijo de un flex row absorbe justo ese sobrante sin tener que volver a hacer crecer
   "__resumen" sin límite (eso fue lo que rompió las cajas de "Resultados"/avisos la primera vez,
   ver el comentario de arriba). */
.sl-panel-visitas .sl-filtros-resumen-row__resumen {
	margin-left: auto;
}

/* Esquinas de abajo redondeadas cuando el panel de filtros está colapsado: con .panel-body oculto,
   el .panel-heading pasa a ser toda la pieza visible pero solo redondea arriba, dejando una esquina
   cuadrada bajo el radius de 12px del .panel. Mismo problema que softline-ui.css resuelve para
   .sl-fixed-top, pero con un ":has()" propio en vez de esa clase (arrastra un mecanismo sticky que
   este filtro no necesita). */
.sl-panel-extracto-horas:has(> .panel-body[style*="display: none"]) > .panel-heading {
	border-bottom-left-radius: var(--sl-radius-card);
	border-bottom-right-radius: var(--sl-radius-card);
}

/* ⚠️ A pesar del nombre, esta franja ya NO es "solo scroll": a petición del usuario
   (2026-09-16, cuarta iteración de este bloque — ver asuntos.tpl para el historial completo)
   la mitad de "Filtros activos" se ve SIEMPRE, esté el panel de filtros abierto o compactado.
   La franja CON título ".sl-filtros-activos-bar" que existía aparte —siempre visible, fuera de
   ".sl-fixed-top"— se ha QUITADO: duplicaba "Filtros activos" en dos sitios a la vez durante
   el "peek" o con poco scroll en listados cortos. Ahora hay UN solo sitio para "Filtros
   activos": este. El nombre de la clase se mantiene tal cual (renombrarla tocaría CSS y 9
   plantillas por poco beneficio).

   El resumen de RESULTADOS que vive DENTRO de esta misma franja (ver más abajo) es la única
   pieza que SÍ sigue dependiendo de ".sl-fixed-top--auto-compact": a diferencia de "Filtros
   activos", esas cifras SÍ se duplicarían con la tarjeta "Resultados" del sidebar
   (".sl-filtros-resumen-row__resumen") mientras esa tarjeta está visible — así que se ocultan
   exactamente cuando esa tarjeta se ve, y aparecen exactamente cuando no (panel cerrado a mano
   o compactado por scroll), nunca las dos a la vez. Ver el bloque de abajo. */
.sl-filtros-activos-scroll {
	padding: 8px 15px;
	/*border-bottom: 1px solid var(--sl-border);*/
	background: #fff;
}
/* Resumen de RESULTADOS (components/resultados.pills.tpl) — a petición del usuario
   (2026-09-16): las cifras que ya pinta la tarjeta "Resultados" del sidebar
   (X.resumen.actividad.tpl: nº de asuntos/encargos/partes/llamadas..., avisos como "Sin
   representante") se ven TAMBIÉN aquí, en su propia fila debajo de "Filtros activos" (si los
   hay) — ".sl-resultados-pills" es un contenedor de bloque, no un hijo flex de esta franja.

   "Una cosa o la otra" (2026-09-16, a petición del usuario): estas pills solo tienen sentido
   cuando la tarjeta "Resultados" del sidebar NO se ve, porque dicen exactamente lo mismo. Se
   ocultan por defecto y se muestran en los DOS casos en que esa tarjeta desaparece —replicando
   EXACTAMENTE los selectores con los que softline-ui.css la oculta a ella, para que las dos
   cosas cambien siempre a la vez sin inventar una tercera condición que pueda desincronizarse:

   1) Compactada por scroll: softline-ui.css pone ".sl-filtros-resumen-row__resumen" a
      max-height:0 mientras ".sl-fixed-top" tiene "--auto-compact", EXCEPTO durante el "peek"
      (pasar el ratón por el panel mientras está compactado, que la reabre) — mismo ":has()"
      que usa esa regla, para no desincronizarse si algún día cambia el disparador del peek.
   2) Cerrada A MANO: la tarjeta recibe "display:none" en línea —por el cookie inicial de
      Smarty ("display:none;", sin espacio) o por el toggle de jQuery en tiempo de ejecución
      (que el navegador re-serializa como "display: none;", con espacio) — de ahí los DOS
      fragmentos en el atributo-selector, para casar ambas formas sin importar cuál esté
      presente. No depende de ".sl-fixed-top--auto-compact": esa clase NUNCA está presente
      mientras el panel está cerrado a mano (asuntos.tpl.js la quita explícitamente), así que
      necesita su propio disparador. */
.sl-filtros-activos-scroll .sl-resultados-pills {
	margin-top: .375rem;
	display: none;
}
.mega-design .sl-fixed-top.sl-fixed-top--auto-compact .sl-filtros-activos-scroll .sl-resultados-pills {
	display: flex;
}
.mega-design .sl-fixed-top.sl-fixed-top--auto-compact:has(.sl-panel-filtros > :is(.panel-heading, .sl-filtros-resumen-row, .panel-body):hover) .sl-filtros-activos-scroll .sl-resultados-pills {
	display: none;
}
.mega-design .sl-fixed-top:has(.sl-filtros-resumen-row__resumen[style*="display"][style*="none"]) .sl-filtros-activos-scroll .sl-resultados-pills {
	display: flex;
}

/* Franja de "filtros activos" CON título — YA NO la usa ninguno de los 9 listados de arriba
   (asuntos, comerciales, llamadas, partes, partes_comerciales, proyectos, carga_trabajo ×3,
   carga_llamadas, visitas: ver el aviso junto a ".sl-filtros-activos-scroll", más arriba). Se
   queda porque feedbackline.tpl —pantalla NO tocada en ningún momento de este cambio— tiene su
   propia franja independiente con esta misma clase, sin ".sl-filtros-activos-scroll" al lado.
   No reutilizar esta clase en un listado nuevo: el sitio para "Filtros activos" es
   ".sl-filtros-activos-scroll". */
.sl-filtros-activos-bar {
	padding: 20px 27px;
	padding-top: 10px;
	background: #fff;
}

/* ----------------------------------------------------------------------------
   Pill de RESULTADOS (components/resultados.pills.tpl) — a petición del usuario
   (2026-09-16): las cifras que ya pinta la tarjeta "Resultados" del sidebar
   (X.resumen.actividad.tpl: nº de asuntos/encargos/partes/llamadas..., avisos como "Sin
   representante"), en ".sl-filtros-activos-scroll" (ver ahí el porqué de vivir solo allí).
   Solo cifras: ni "Acciones rápidas" ni "Visualización" viajan hasta aquí.

   Solo el CONTENEDOR es propio: cada pill en sí es components/pill.tpl en MODO 2
   ($pill_removable=true) SIN $pill_onremove — la misma pieza que ya pinta "Prioridad: Menor"
   en esta misma franja, así que el aspecto (".sl-generic-pill.sl-generic-pill--tag") es
   idéntico al de un filtro activo, sin la "×": estas pills son informativas, no removibles, y
   NO deben confundirse con un filtro aplicado. Sin $pill_onremove, pill.tpl ya se encarga de
   eso — no hay que reinventar el aspecto de la pill aquí, solo cómo fluyen entre ellas. */
.sl-resultados-pills {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .375rem;
}

/* ----------------------------------------------------------------------------
   Selector "Ningún encargo marcado" (#cb-action-selector, migrado 2026-08-27 desde
   modules/resultados.tpl al header de asuntos.filtros.tpl): su <ul class="dropdown-menu">
   se posiciona con position:absolute + top/left fijos, así que se recorta contra
   CUALQUIER ancestro con overflow:hidden que encuentre de camino — y
   "header.panel-heading" lo tiene (.mega-design #sl-app .panel > .panel-heading en
   mega-design.css, para recortar pestañas a las esquinas redondeadas del heading en
   OTRAS pantallas, ej. la ficha de asunto). Sin este permiso, el desplegable se veía
   cortado en seco justo por debajo del botón (confirmado en vivo: solo asomaba la
   primera línea, "Avanzar un estado", el resto desaparecía).

   NO se toca la regla de mega-design.css (es fleet-wide y además vive solo dentro de
   css/crunch/compiled.css, sin rebuild no se vería el cambio) — en su lugar, aquí se
   permite el overflow SOLO mientras el desplegable está realmente abierto
   (":has(.dropdown.open)") y SOLO dentro de ".sl-fixed-top" (no afecta a otros
   paneles con pestañas en el resto de la app, que siguen necesitando el recorte). */
.mega-design #sl-app .sl-fixed-top .panel > .panel-heading:has(.dropdown.open) {
	overflow: visible;
}

/* ----------------------------------------------------------------------------
   Generic pill de filtro/toggle (components/pill.tpl) — movido desde softline-ui.css:
   es exclusivo de los paneles de filtro (Estado, Visible cliente, Urgente, Modo,
   pastillas de fecha #dfbar, y el chip removible de cliente elegido).
   ---------------------------------------------------------------------------- */
.sl-generic-pill {
  display: inline-flex; align-items: center; gap: .3125rem;
  justify-content: center;
  font-size: 13px; font-weight: 500; line-height: 1.4;
  color: var(--sl-fg-2); background: white;
  border: 1px solid var(--sl-border); border-radius: var(--sl-radius-pill);
  padding: .1875rem .4rem; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, transform .1s;
  margin: 0;
	height: 24px;
}
.sl-generic-pill:hover  { transform: translateY(-3px); color: var(--sl-fg-2); }
.sl-generic-pill:focus  { outline: none; box-shadow: none; }
/* Pill que NAVEGA: components/pill.tpl la emite como <a href> cuando se le pasa $pill_href, para
   que se pueda abrir en pestaña nueva y recibir foco de teclado (un <span onclick> no puede).
   Bootstrap 3 subraya "a:hover/:focus", asi que sin esto la pill se subrayaria al pasar por encima;
   el color ya lo fija ".sl-generic-pill" y no hace falta repetirlo.
   El :focus-visible SI se pinta, y a proposito: el :focus de arriba mata el outline porque ahi el
   foco real vive en el <input type=radio> oculto del modo toggle, pero una pill-enlace es ella
   misma el elemento enfocable y dejarla sin marca la haria inutilizable con teclado. */
a.sl-generic-pill:hover, a.sl-generic-pill:focus { text-decoration: none; }
a.sl-generic-pill:focus-visible { outline: 2px solid var(--sl-blue); outline-offset: 2px; }
.sl-generic-pill.is-active { color: #fff; background: var(--sl-blue); border-color: var(--sl-blue); }
/* Alias ".active": variantes como shortcuts.fechas.desde.hasta.pills.tpl reutilizan JS ya existente
   (shortcuts.fechas.desde.hasta.extras.tpl.js + el data-toggle="buttons" de Bootstrap) que gestiona
   su propia clase "active" al estilo Bootstrap .btn-group — no ".is-active". En vez de tocar ese JS
   compartido, la pill responde a ambas clases con el mismo azul por defecto. */
.sl-generic-pill.active { color: #fff; background: var(--sl-blue); border-color: var(--sl-blue); }
.sl-generic-pill[style*="--sl-generic-pill-color"]           { border-color: var(--sl-generic-pill-color); }
.sl-generic-pill[style*="--sl-generic-pill-color"].is-active { background: var(--sl-generic-pill-color); border-color: var(--sl-generic-pill-color); color: #fff; }
/* Generic pill = grupo de radios/checkboxes "a-la-Bootstrap" (<label class="sl-generic-pill">
   <input type="radio"> texto</label>). OJO: el contenedor NO lleva [data-toggle="buttons"] — con él,
   el plugin button de Bootstrap 3 cancela el clic (hace closest('.btn'), no encuentra nada porque
   esta pill no es .btn, y aun así llama a preventDefault); ver la cabecera de components/pill.tpl.
   El input real
   se oculta con la misma técnica que usa el propio Bootstrap para .btn (clip, no display:none: sigue
   siendo accesible/enfocable) — sin depender de que el <label> lleve también la clase .btn, que
   traería el radius/box-shadow de la capa de compatibilidad de #sl-app y rompería la forma de píldora. */
.sl-generic-pill input[type="radio"],
.sl-generic-pill input[type="checkbox"] {
  position: absolute; clip: rect(0, 0, 0, 0); pointer-events: none;
}
/* Coloreada por estado: reutiliza el puente data-estado → --sl-state ya definido en softline-ui.css
   §9, así que una pill de estado no necesita sus propios colores por estado — solo data-estado="N". */
.sl-generic-pill[data-estado] { border-color: var(--sl-state); }
.sl-generic-pill[data-estado].is-active { background: var(--sl-state); border-color: var(--sl-state); color: #fff; }
/* Mismo puente, pero para la pill "tag" (informativa, ver más abajo): en vez de solo colorear el
   borde y esperar a un :is-active que aquí no existe, alimenta directamente
   --sl-generic-pill-color — así una pill de estado en modo "tag" (ej. el estado de un encargo en
   un listado) sale YA coloreada con el mismo color que esa pill de estado en los filtros, sin
   duplicar la tabla de colores por estado — a petición del usuario 2026-08-31. */
.sl-generic-pill--tag[data-estado] { --sl-generic-pill-color: var(--sl-state); }

/* Pill sin borde (components/pill.tpl con pill_no_border=true), común a los dos modos. Se quita
   con border-color:transparent, NO con border:0/none: la pill sigue ocupando exactamente el
   mismo espacio (mismo grosor de borde, solo invisible), evitando un salto de 2px al lado de
   otras pills que sí llevan borde visible. !important porque es un override explícito y
   deliberado de quien la usa: debe ganar tanto en modo "tag" (.sl-generic-pill--tag ya fija su
   propio border-color más abajo) como en modo toggle con :is-active/[data-estado].is-active
   (selectores de dos-tres clases, más específicos que este de una sola clase). */
.sl-generic-pill--no-border { border-color: transparent !important; }
/* Deshabilitada ($pill_disabled): quien de verdad impide elegirla es el atributo disabled del
   <input> — también con teclado—, esto es solo el aspecto. pointer-events:none apaga además el
   :hover (que levanta la pastilla 3px) y el cursor de mano, que prometerían un clic que no va a
   hacer nada. Nota: antes de components/pill.tpl, la barra de estados del encargo ponía el
   atributo en el <label>, donde NO es válido; funcionaba de rebote por el pointer-events:none que
   Bootstrap da a ".btn[disabled]", así que se habría perdido en silencio al dejar de ser un .btn. */
.sl-generic-pill--disabled { pointer-events: none; opacity: .5; }

/* Pill "tag" removible (components/pill.tpl con pill_removable=true): NO es un toggle de un grupo
   -input type=radio ocultos, data-toggle=buttons-, es UN valor de filtro ya aplicado (ej. el cliente
   elegido) con una "×" para quitarlo. Por eso el color se pinta SIEMPRE (no solo en :is-active) y en
   vez de rellenar a color sólido usa fondo semitransparente + texto del mismo color: pasando un solo
   --sl-generic-pill-color (ej. var(--sl-pink)) se obtienen borde + fondo(opacity) + texto a la vez. */
.sl-generic-pill--tag {
  cursor: default;
  border-color: var(--sl-generic-pill-color, var(--sl-border));
  color: var(--sl-generic-pill-color, var(--sl-fg-2));
  background: rgba(0, 0, 0, .04); /* fallback si el navegador no soporta color-mix() */
  background: color-mix(in srgb, var(--sl-generic-pill-color, var(--sl-fg-2)) 12%, transparent);
  white-space: nowrap; /* nunca partir el texto en 2 líneas: si no cabe, que scrollee el contenedor (ver más abajo) */
  flex: none; /* en un padre flex (ej. .form-group), no dejar que se comprima por debajo de su ancho de contenido */
}
.sl-generic-pill--tag:hover { transform: none; color: var(--sl-generic-pill-color, var(--sl-fg-2)); }
/* Pill-tag CLICABLE: la base .sl-generic-pill--tag pone cursor:default porque normalmente es
   solo informativa (un valor de filtro ya aplicado) — aquí se anula cuando de verdad se pulsa.
   Hay DOS formas de que una pill-tag se pulse, y hay que cubrir las dos (components/pill.tpl):
     [onclick] → $pill_onclick: la pill "+N" que abre un diálogo o un selector.
     [href]    → $pill_href: la pill que NAVEGA, emitida como <a> en lugar de <span>.
   El [href] faltaba. Es el parámetro más nuevo de los dos y su primer uso real en pantalla son
   las "Vistas rápidas" de /proyectos (2026-09-16): hasta entonces el enlace funcionaba —con su
   Ctrl+click y su URL en la barra de estado, que es justo por lo que se usa href y no onclick—
   pero la pill se veía inerte, sin mano y sin el levantamiento del hover. El cursor:pointer que
   un <a> trae de serie lo pisa la regla de arriba: un selector de clase gana a la hoja del
   navegador.
   Se selecciona por [href] y NO por "a.sl-generic-pill--tag" porque la condición real es "esta
   pill navega": el <a> solo existe PORQUE hay href. La "×" de $pill_onremove también es un <a>,
   pero no lleva --tag, así que no entra aquí (y pill.tpl documenta que href y onremove no se
   combinan: un <a> dentro de otro <a> es HTML inválido).
   ⚠️ El :hover necesita el atributo DENTRO del selector para llegar a (0,3,0) y ganarle al
   "transform:none" de .sl-generic-pill--tag:hover de aquí arriba, que es (0,2,0). */
.sl-generic-pill--tag[onclick],
.sl-generic-pill--tag[href] { cursor: pointer; }
.sl-generic-pill--tag[onclick]:hover,
.sl-generic-pill--tag[href]:hover { transform: translateY(-2px); }
/* Pill "contador" (components/pill.tpl con pill_counter=true): a diferencia de la "tag" de
   arriba, esta NO representa un valor de filtro aplicado (no lleva "×", no es removible) sino
   un contador/acceso — la pill "+N" de Representantes/Creado por que abre el diálogo "Elegir
   usuarios" con el resto de la lista. Azul sólido fijo, ignora $pill_color/--sl-generic-pill-color
   a propósito (ver la doc en components/pill.tpl): no tendría sentido "colorear por dato" algo
   que no es un dato sino un simple "hay más, pulsa para verlos". */
/*.sl-generic-pill--counter {
  background: var(--sl-blue);
  border-color: var(--sl-blue);
  color: #fff;
}
.sl-generic-pill--counter:hover { color: #fff; }*/
.sl-generic-pill__remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1rem; height: 1rem; margin: 0 -.125rem 0 .0625rem;
  border-radius: 50%; color: inherit; opacity: .65; font-size: .625rem; line-height: 1;
  cursor: pointer;
}
.sl-generic-pill__remove:hover { opacity: 1; background: rgba(0, 0, 0, .1); }
/* Swatch de color (components/pill.tpl con pill_swatch=true): cuadradito sólido del color de la
   entidad, ANTES del texto. Existe porque el fondo de .sl-generic-pill--tag es un color-mix al 12%
   —deliberadamente tenue para no competir con el texto— y a ese nivel de saturación dos etiquetas
   de tono parecido son indistinguibles. El swatch da el color al 100% en una superficie pequeña:
   se identifica la etiqueta de un vistazo sin subir la opacidad del fondo de TODAS las pills.
   Reutiliza el mismo puente --sl-generic-pill-color, así que $pill_color sirve para ambos. */
.sl-generic-pill__swatch {
  width: .75rem; height: .75rem; flex: none;
  border-radius: 3px;
  background: var(--sl-generic-pill-color, var(--sl-fg-3));
}
/* Con swatch, el padding izquierdo se recorta: el cuadradito ya aporta masa visual en ese lado y
   con el padding completo la pill queda descentrada hacia la derecha. */
.sl-generic-pill:has(> .sl-generic-pill__swatch) { padding-left: .375rem; }

/* Imagen opcional antes del texto ($pill_img en components/pill.tpl): foto de usuario, logo de
   cliente… Redonda y del alto de la línea de texto, para que la pill no crezca por llevarla. El
   aro reutiliza el mismo puente --sl-generic-pill-color que el swatch, así que con $pill_color el
   borde de la foto sale del tono de la pill sin pasar el color dos veces. "flex:none" para que no
   la encoja el truncado con ellipsis del label de al lado, y "object-fit:cover" para que una foto
   no cuadrada se recorte en vez de deformarse. */
.sl-generic-pill__img {
  /* En "em" y no en "rem": la foto sigue al tamaño de letra de la pill, así que si algún día
     cambia no hay que reajustar esto. 1.4em es el mayor valor que NO hace crecer la pill (medido
     en vivo: con 1.5em pasa de 26 a 29 px de alto y las filas con foto quedan más altas que las
     que no la tienen). */
  width: 1.4em; height: 1.4em; flex: none;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--sl-generic-pill-color, var(--sl-fg-3));
  background: #fff;
}
/* Mismo recorte de padding que con el swatch: la foto ya aporta masa visual por ese lado y con el
   padding completo la pill queda descentrada hacia la derecha. */
.sl-generic-pill:has(> .sl-generic-pill__img) { padding-left: .25rem; }

/* Icono opcional antes del texto ($pill_icon en components/pill.tpl). SIN color propio: hereda el
   de la pill, así que con $pill_color sale del mismo tono que el texto y no hay que pasarlo dos
   veces. "flex:none" para que no lo encoja el truncado con ellipsis del label de al lado. */
.sl-generic-pill__icon { flex: none; font-size: .8125em; line-height: 1; }

/* Prefijo opcional antes del texto ($pill_prelabel en components/pill.tpl): la etiqueta del CAMPO
   ("Rpte.", "Dpto.") metida DENTRO de la propia pill, para que el valor se explique solo sin gastar
   una linea en un <span class="sl-meta-label"> encima. Se separa del valor solo por PESO y OPACIDAD
   —ni tamano ni color propio—: hereda el color de la pill, asi que con $pill_color el prefijo sale
   del mismo tono un punto mas apagado, y en una pill de 13px bajar el cuerpo lo dejaria en el limite
   de lectura. El VALOR no se toca (sigue con el font-weight 500 de .sl-generic-pill): si se
   engordara aqui, una pill con prefijo y otra sin el tendrian el texto de distinto peso en la misma
   fila. "flex:none" igual que __icon/__swatch/__img: donde el label trunca con ellipsis
   (#nice_usergroup_list, mas arriba) lo que se recorta debe ser el nombre, nunca la etiqueta que
   dice que es. */
.sl-generic-pill__prelabel { flex: none; font-weight: 400; opacity: .65; }

/* Fila de pills agrupadas (modules/resumen.asunto.pills.tpl). Desde el 2026-09-15 se pinta en la
   fila de meta de la CABECERA de la ficha del asunto (.sl-ficha-header__meta, asunto.tpl), junto al
   ID y las etiquetas; antes era el cuerpo de un panel plegable "Resumen" propio. Dos niveles a propósito: los grupos (Encargos / Citas / Partes / Reclamaciones) se
   separan más entre sí (10px) que las pills de dentro de un grupo (4px), que es lo que hacía el
   antiguo "#resumen-asunto .rg" con dos columnas — sin él, "3 Encargos · 2 Acabados · 4 Citas"
   se lee como una lista plana y no se ve dónde acaba un contador y empieza el siguiente (el caso
   feo real: el "1 Pte." de Encargos pegado al "2 Ptes." de Citas).
   Cada grupo es a su vez flex-wrap: si no cabe entero, envuelve por dentro pero sigue junto. */
.sl-resumen-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
}
.sl-resumen-pills__g {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

/* Variante "dentro de la fila de meta" (2026-09-17). Adopta el ritmo de
   .sl-ficha-header__meta —gap:6px, el mismo que separa las pills de etiqueta— en lugar de los
   18px de arriba.

   Existe porque el agrupado de DOS niveles dejó de tener sentido en la cabecera del asunto: los
   grupos (Encargos / Citas / Partes) son ahora UN desplegable cada uno, así que los 18px ya no
   separan un grupo de otro, solo alejan tres botones entre sí — y de paso los desmarcan del
   ritmo de las etiquetas que tienen justo delante en la misma fila. Con dos o más pills por
   grupo la historia es otra, y por eso NO se toca la clase base: la comparte
   modules/proyectos.resumen.actividad.tpl, donde el segundo nivel sigue vivo y haciendo falta.

   ⚠️ El bloque sigue siendo un contenedor propio, y no se disuelve en .sl-ficha-header__meta
      aunque ahora tenga su mismo gap. Es lo que impide que el "|" del rótulo se quede huérfano
      al final de una línea cuando la fila envuelve: dentro de este <div> viaja con sus botones.
      Es exactamente el fallo que costó quitar el "|" anterior el 2026-09-16. */
.sl-resumen-pills--meta { gap: 6px; }

/* Contenedor de una pill "tag" removible SUELTA (Referencia/Etiqueta: .div-referencias/.div-etiquetas
   — el wrapper que las envuelve en selector.referencia.tpl/selector.etiqueta.tpl): con el texto ya
   sin wrap (arriba), si la pill no cabe en el ancho de la celda, el contenedor scrollea en vez de
   desbordar o forzar el ancho de toda la celda del grid. NO se toca #nice_usergroup_list
   (Representantes/Creado por): ese ya tiene su propio scroll horizontal dedicado más abajo, y
   duplicarlo aquí anidaría dos scrolls uno dentro del otro. Cód. cliente (.div-codcliente) NO usa
   este mecanismo — ver el bloque de truncado con ellipsis más abajo. */
.sl-filtros-grid .div-referencias:has(> .sl-generic-pill--tag),
.sl-filtros-grid .div-etiquetas:has(> .sl-generic-pill--tag) {
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--sl-border-2) transparent;
}
/* El aire entre la pill y la barra vive en el propio scrollbar (border-top transparent +
   background-clip:padding-box en el ::-webkit-scrollbar-thumb de más abajo): así solo se
   reserva espacio cuando de verdad hay overflow y se pinta una barra, nunca con un
   padding-bottom fijo del contenedor que ocuparía sitio también sin scroll. */
.sl-filtros-grid .div-referencias:has(> .sl-generic-pill--tag)::-webkit-scrollbar,
.sl-filtros-grid .div-etiquetas:has(> .sl-generic-pill--tag)::-webkit-scrollbar {
  height: 13px; /* 5px de barra visible + 8px de aire (ver border-top del thumb) */
}
.sl-filtros-grid .div-referencias:has(> .sl-generic-pill--tag)::-webkit-scrollbar-track,
.sl-filtros-grid .div-etiquetas:has(> .sl-generic-pill--tag)::-webkit-scrollbar-track {
  background: transparent;
}
.sl-filtros-grid .div-referencias:has(> .sl-generic-pill--tag)::-webkit-scrollbar-thumb,
.sl-filtros-grid .div-etiquetas:has(> .sl-generic-pill--tag)::-webkit-scrollbar-thumb {
  background: var(--sl-border-2);
  background-clip: padding-box; /* el color no pinta el border-top de abajo: ahí queda el aire */
  border-top: 8px solid transparent;
  border-radius: 3px;
}
.sl-filtros-grid .div-referencias:has(> .sl-generic-pill--tag)::-webkit-scrollbar-button,
.sl-filtros-grid .div-etiquetas:has(> .sl-generic-pill--tag)::-webkit-scrollbar-button {
  display: none; width: 0; height: 0;
}
/* Cód. cliente elegido (#div-cliente-id .div-codcliente, ver proyectos.filtros.cliente.tpl):
   a petición (2026-09-23), en vez de scrollear como Referencia/Etiqueta de arriba, el nombre se
   trunca con ellipsis — el nombre completo sigue disponible al pasar el ratón, en el tooltip que
   pinta $pill_tooltip (mismo valor que $pill_label, ver components/pill.tpl). Mismo mecanismo que
   #nice_usergroup_list más arriba: se dejan encoger tanto la pill (min-width:0, max-width:100% del
   ancho de la celda) como su .sl-generic-pill__label, y solo el label recorta — la "×" de quitar
   (.sl-generic-pill__remove, hermano fuera de ese span) se queda siempre visible entera. */
.sl-filtros-grid #div-cliente-id .div-codcliente > .sl-generic-pill--tag {
  max-width: 100%;
  min-width: 0;
}
.sl-filtros-grid #div-cliente-id .div-codcliente > .sl-generic-pill--tag .sl-generic-pill__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.form-horizontal .sl-filtros-grid .form-group:before, .form-horizontal .sl-filtros-grid .form-group:after {
	display: none;
}
.sl-fcell.sl-fcell--1 {
	grid-area: 1 / 1 / span 2;
}
.sl-fcell.sl-fcell--1-2 {
	grid-area: 1 / 2 / span 2;
}
.sl-fcell.sl-fcell--row-2 {
	grid-row: 2;
}
.sl-fcell.sl-fcell--colrow-2 {
	grid-column: span 2;
	grid-row: 2;
}
.sl-fcell.sl-fcell--column-span-2 {
	grid-column: span 2;
}
.sl-fcell.sl-fcell--2 {
	grid-column: span 2;
}
/* Celda de DOBLE ALTO que NO fija su posición: solo estira el chip a dos filas y deja que el
   auto-placement de la rejilla lo coloque donde le tocaba. Es la diferencia con "--1" y
   "--1-2", que también miden dos filas pero además clavan fila/columna (1/1 y 1/2) — usarlos
   para un chip que no va en las dos primeras columnas lo movería de sitio.
   Se combina con "--2" cuando además hace falta doble ancho:
   class="sl-fcell sl-fcell--2 sl-fcell--rowspan-2"  (así lo usa el filtro
   Representante/Rpte. en/Delegado a/Estimado por de modules/asuntos_comerciales.filtros.tpl,
   que apila cuatro <select> y necesita el alto de dos filas para no apretarlos). */
.sl-fcell.sl-fcell--rowspan-2 {
	grid-row: span 2;
}
/*.sl-fcell.grid-column-2 {
	grid-column: span 2;
}*/
.sl-fcell.sl-fcell--5 {
	grid-area: auto / auto / span 1 / span 6;
}
.sl-filtros-grid #div-cliente-id .form-group * {
	order: 1 !important;
}
#sl-app .sl-filtros-grid .sl-fcell {
	flex-direction: column;
	justify-content: flex-start;
}
#sl-app .sl-filtros-grid .filtrosFechas .filtroFechasInputs {
	display: flex;
	flex-direction: column;
}
.sl-filtros-grid #div-cliente-id .form-group::before,
.sl-filtros-grid #div-cliente-id .form-group::after {
	display: none;
}
/* align-self:stretch — vence al align-items:center del .sl-fcell padre (línea ~75):
   sin esto, el grupo se encoge a su propio contenido (comprobado en vivo: 82px de
   ancho en una celda con ~140px+ disponibles) y las pills, aunque son flex-column
   con stretch por defecto, no tienen de qué anchura "estirarse" salvo la del propio
   grupo. Con esto el grupo ocupa el 100% de la celda y cada pill (Estado, Acción
   comercial, Dirección…) ocupa el 100% del grupo. */
#sl-app .sl-filtros-grid .btn-group, #sl-app .sl-filtros-grid .btn-group-vertical {
	display: flex;
	flex-direction: column;
	gap: 5px;
	align-self: stretch;
	width: 100%;
}
/* ——— Modificador: grupo de pills EN FILA, que envuelve ———
   La regla de aquí arriba apila TODO grupo de la rejilla en una columna a lo ancho de su
   celda, que es lo correcto para un toggle de 2 o 3 opciones (Urgencia, Guardia… en
   partes.filtros.tpl). Con MUCHAS opciones deja de serlo: el filtro de Departamento de
   /carga_llamadas son 9, y apiladas inflában el panel a 9 filas de alto — medido en vivo,
   era lo que más ocupaba de toda la pantalla.

   Con esta clase el grupo fluye en fila y envuelve a la siguiente cuando no cabe. Añadido
   2026-09-15 al arreglar los paneles de /carga_llamadas y /carga_trabajo, con el aspecto
   aprobado por el usuario.

   ⚠ Hace falta declarar "flex-direction: row" EXPLÍCITAMENTE, no basta con "flex-wrap":
   sobre un contenedor en columna, envolver reparte los hijos en COLUMNAS nuevas, no en filas
   — que es justo lo que ya le pasaba a "#sl-app #eebar.btn-group" (softline-ui.css), que
   declara "flex-wrap: wrap" pero no la dirección y por eso nunca llegó a envolver dentro de
   esta rejilla.

   "width: auto" para que el grupo abrace sus pills en vez de estirarse a toda la celda: con
   el 100% heredado, la última fila de pills quedaba suelta en mitad de un bloque vacío.
   DOS SELECTORES a propósito, no uno:
   · el escopado a "#sl-app" tiene una clase más que la regla de arriba, así que la gana sin
     "!important" dentro de una pantalla migrada;
   · el suelto cubre las que NO lo están. /carga_trabajo, por ejemplo, no es UNA pantalla sino
     TRES (el controller elige plantilla según "v_emp" y "e_cre", ver carga_trabajo.php:60-67) y
     solo la de Representantes tiene "#sl-app". Las otras dos incluyen el MISMO panel de filtros,
     así que sin este segundo selector sus pills se quedaban sin layout y se solapaban.
     Ahí no compite con nada, así que no necesita más especificidad. */
#sl-app .sl-filtros-grid .btn-group.sl-fgroup--wrap,
.sl-filtros-grid .btn-group.sl-fgroup--wrap {
	flex-direction: row;
	flex-wrap: wrap;
	align-content: flex-start;
	gap: .35rem;
	width: auto;
}
/* Labels de filtros legacy (sin cabecera): estaban en 11px fijos (style.css con !important).
   Subimos a rem para que se lean y escalen; !important para batir esa regla legacy.
   text-transform: style.css fuerza "uppercase" (línea ~7125) sobre TODOS los labels
   de esta clase; el texto real de cada .tpl es inconsistente (unos ya en frase normal
   como "Acción comercial", otros escritos en mayúsculas como "DEPARTAMENTO" o
   "RPTE."), así que hasta ahora el resultado visible dependía de cómo estuviera
   tecleado cada label. En vez de tocar cada .tpl uno a uno, se normaliza aquí con el
   truco lowercase + ::first-letter uppercase: el resultado es "Frase normal" sin
   importar cómo venga escrito el texto de origen. */
#sl-app .sl-filtros-grid .sl-fcell .label-filtros-sin-cabecera {
	font-size: .6875rem !important;
	/* Neutro a propósito: el rosa de marca queda RESERVADO al filtro activo.
	   Mientras TODOS los labels iban en var(--sl-pink), el color no distinguía nada y
	   el único indicio de "filtro aplicado" era el borde de 1px de la celda. El rosa
	   lo pone .changed-filter (bloque "Filtro ACTIVO" de más arriba), que lleva
	   !important y por tanto gana a esta línea. */
	color: var(--sl-fg-2);
	font-weight: 600;
	text-transform: lowercase;
	text-align: left !important;
	padding-bottom: 5px;
}
#sl-app .sl-filtros-grid .sl-fcell .label-filtros-sin-cabecera::first-letter {
	text-transform: uppercase;
}
#sl-app .sl-filtros-grid .sl-fcell .label-filtros-sin-cabecera {

}
/* ----------------------------------------------------------------------------
   Select2 dentro de la rejilla de filtros: ocupa el ancho de su celda como
   cualquier otro .form-control, y su texto usa la tipografía de la página en
   vez del "Roboto Condensed" que cada selector.*.tpl define para su propio
   desplegable de resultados (ese SÍ se deja, es a propósito para que se lea
   bien al buscar — esto solo toca el "cuadro" cerrado). Independiente de la
   talla mini/normal de más abajo. */
.sl-filtros-grid .sl-fcell select.form-control.select2 + .select2-container {
	width: 100% !important;
	max-width: 100%;
}
.sl-filtros-grid .sl-fcell .select2-selection__rendered {
	font-family: inherit !important;
}

/* ----------------------------------------------------------------------------
   Talla de controles por DEFECTO en esta rejilla concreta: 34px (normal, ver
   .sl-ctrl--normal en softline-ui.css) en vez del 24px (mini) que sigue siendo
   el default en el resto de listados que comparten filtros-grid.css — de
   momento esto solo se activa en asuntos.filtros.tpl, con la clase
   ".sl-filtros-grid--ctrl-normal" en el contenedor. Los controles concretos
   que deban quedarse en mini (ej. #tipo_encargo) llevan la clase genérica
   ".sl-ctrl--mini" en su <select>/<input>, que gana por el :not() de abajo.
   ---------------------------------------------------------------------------- */
.sl-filtros-grid--ctrl-normal > .sl-fcell .form-control:not(.sl-ctrl--mini) {
	height: 34px !important;
	padding-top: 6px !important;
	padding-bottom: 6px !important;
	font-size: .6875rem !important; /* 11px, igual que .sl-generic-pill — vence el 13px !important de la regla general de más arriba */
}
.sl-filtros-grid--ctrl-normal .sl-fcell select.form-control.select2:not(.sl-ctrl--mini) + .select2-container .select2-selection--single {
	height: 34px !important;
	border: 1px solid var(--sl-border) !important;
	border-radius: var(--sl-radius-sm) !important;
	background: #fff !important;
	box-shadow: none !important;
}
.sl-filtros-grid--ctrl-normal .sl-fcell select.form-control.select2:not(.sl-ctrl--mini) + .select2-container .select2-selection--single .select2-selection__rendered {
	line-height: 32px;
	padding-right: 24px;
	color: var(--sl-fg-2) !important;
	font-size: .6875rem !important; /* 11px, igual que .sl-generic-pill / .sl-ctrl--normal en softline-ui.css */
	font-weight: 500;
	font-family: inherit !important;
}
.sl-filtros-grid--ctrl-normal .sl-fcell select.form-control.select2:not(.sl-ctrl--mini) + .select2-container .select2-selection--single .select2-selection__arrow {
	height: 32px !important;
	top: 0 !important;
}
label.label-filtros-sin-cabecera {
	font-size: 12px !important;
	text-transform: uppercase;
	margin-bottom: 0;
	font-weight: 600;
	color: var(--sl-fg-2);
}
/* ——— Celda "combo de filtros" (components/filtro.combo.tpl) ————————————————————
   Agrupa N filtros de tres estados en UNA celda con un menú desplegable, en vez de
   gastar N celdas de la rejilla con su grupo de pastillas cada una. Se estrenó en el
   embudo comercial de /comerciales, que eran 7 celdas de 3 filas de alto.

   El aspecto del MENÚ (submenús, pie, valor pendiente) no está aquí sino en
   css/softline-ui.css, junto a .sl-menu: eso es sistema de diseño y lo puede usar
   cualquier desplegable. Aquí queda solo lo que es maquetación de la celda. */
.sl-fcombo {
	/* La .sl-fcell es flex con align-items:center (ver arriba), así que sin esto el
	   contenido se encoge a su ancho natural y las pastillas quedan descentradas
	   respecto al rótulo. */
	width: 100%;
}
/* Las pastillas van DEBAJO del botón (ver el orden en el .tpl), así que el margen separa por
   arriba y no por abajo. */
.sl-fcombo__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-top: 7px;
}
.sl-fcombo__vacio {
	font-size: .6875rem;
	line-height: 1.2;
	color: var(--sl-fg-3);
}
/* El menú se saca del flujo con position:fixed desde el JS (el panel vive dentro de cuatro
   contenedores con overflow:hidden y si no se recorta). Al quedar fuera, necesita su propio
   z-index por encima del panel sticky, que va a 6. */
.sl-fcombo__menu { z-index: 1100; }

/* El ✓ del valor elegido dentro de un submenú. Se oculta con visibility y NO con display
   para que todas las filas del submenú midan lo mismo esté marcada o no: con display
   el menú cambiaba de ancho al moverse entre valores. */
.sl-fcombo__tick { font-size: .6875rem; }