/* ============================================================================
   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.
   ============================================================================ */

/* Rosa común para indicadores de filtro activo (changed-filter, fechas activas) */
:root {
	--sl-rosa: #e83e8c;
}

.sl-filtros-grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, 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 */
}

/* 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 #dddfe1;
	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;
}

/* MODO (Por Asuntos / Por Encargos) ocupa 2 columnas */
.sl-filtros-grid > .sl-fcell:has(input[name="mode"]) {
	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: queda centrado como los demás (sale de la excepción de bloque) y sus
   columnas internas se apilan a ancho completo → select arriba y DESC/ASC en una
   sola línea (en vez de uno debajo del otro por el ancho de las col-md-6). */
.sl-filtros-grid > .sl-fcell:has(input[name="ol"]) {
	grid-column: span 2;   /* compacto: select + DESC/ASC caben en 1 línea con flex */
	display: flex !important;
	flex-direction: row !important; /* IMPORTANTE: la regla general pone column */
	flex-wrap: wrap;
	align-content: center;     /* las dos líneas (label / select+DESC-ASC) centradas verticalmente */
	align-items: center;       /* select y DESC/ASC alineados entre sí en su línea */
	justify-content: center;   /* label y fila select+DESC/ASC centrados */
	column-gap: 6px;
	row-gap: 2px;
}
.sl-filtros-grid > .sl-fcell:has(input[name="ol"]) > label {
	flex: 0 0 100%;        /* "Ordenar por" solo, en la 1ª línea */
	margin: 0 0 2px 0;
	text-align: center;
}
.sl-filtros-grid > .sl-fcell:has(input[name="ol"]) > [class*="col-md-"] {
	flex: 0 0 auto;        /* select y DESC/ASC en la MISMA línea (flex, sin hueco fantasma) */
	width: auto;
	float: none;
	padding: 0;
}
.sl-filtros-grid > .sl-fcell:has(input[name="ol"]) select[name="of"] {
	max-width: 124px !important; /* vence al max-width:146px inline; cabe junto a DESC/ASC en --2 */
}

/* TEXTO COMENTARIO (Partes): el textarea trae width:calc(100% - 100px) inline que
   colapsa en el chip flex y hace envolver el placeholder. Label centrado arriba,
   y textarea (flexible) + botón en una sola línea. */
.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 !important;   /* vence el calc(100% - 100px) inline */
	min-width: 0;
}

/* 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: center;         /* centrado vertical como los demás chips */
	justify-content: center;
	gap: 2px 4px;
}
/* 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;
}
/* El span de usuarios elegidos: sin el margen inferior inline que añade aire de más */
.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;
}

/* 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; }

/* 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 {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center; /* cada fila (título, input+botones, nombre) centrada */
	gap: 2px 4px;
}
/* (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;
}

/* Los form-group internos no añaden márgenes que descuadren la rejilla.
   !important para vencer el "margin: 0 auto" inline (p.ej. Prioridad), que
   centraba el control en medio del chip en vez de alinearlo al inicio. */
.sl-filtros-grid > .sl-fcell .form-group {
	margin: 0 !important;
}

/* 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 */
.sl-filtros-grid > .sl-fcell:has(.changed-filter) {
	background: #fce4ef;                 /* rosita claro */
	border-color: var(--sl-rosa);
}
/* 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-rosa) !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));
	}
}