/* INFORME DE CONSULTORIA — mismo lenguaje visual que el listado rediseñado
   de AGENDA (agenda.css: hero de KPIs + sidebar de filtros + tarjetas
   responsive), con namespace propio (informe_*) para no acoplarse a clases
   de agenda.css que tienen semantica propia de esa pantalla. */

.informe{
	display: flex;
	flex-direction: column;
	gap: 1.2em;
	padding: 1.5em;
	box-sizing: border-box;
}

/* -------------------- Hero de KPIs -------------------- */
.informe_hero{
	background: linear-gradient(135deg, var(--nav_a_hover_COLOR, #0076A5), var(--nav_a_hover_COLOR_medio, #3391b7));
	border-radius: 14px;
	padding: 1em 1.2em;
	color: #ffffff;
	display: flex;
	flex-direction: column;
	gap: .8em;
}
.informe_hero_titulo_fila{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .7em;
}
.informe_hero_pill{
	background: rgba(255, 255, 255, .18);
	border-radius: 999px;
	padding: .2em .8em;
	font-size: .68em;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
}
.informe_hero_titulo{
	margin: 0;
	font-size: 1.05em;
	font-weight: 800;
	white-space: nowrap;
}
.informe_hero_kpis{
	display: flex;
	flex-wrap: wrap;
	gap: .8em;
}
.informe_hero_kpi{
	background: rgba(255, 255, 255, .14);
	border-radius: 10px;
	padding: .5em .8em;
	min-width: 140px;
}
.informe_hero_kpi_numero{
	display: block;
	font-size: 1.1em;
	font-weight: 800;
}
.informe_hero_kpi_texto{
	display: block;
	font-size: .72em;
	color: rgba(255, 255, 255, .85);
}

/* -------------------- Cuerpo: filtros + resultados -------------------- */
.informe_cuerpo{
	display: flex;
	align-items: flex-start;
	gap: 1.2em;
}
.informe_filtros{
	width: 260px;
	min-width: 220px;
	flex: 0 0 auto;
	background: #ffffff;
	border-radius: 16px;
	box-shadow: 0 18px 40px rgba(15, 23, 42, .08);
	padding: 1.2em;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 1em;
}
.informe_filtro_campo{
	display: flex;
	flex-direction: column;
	gap: .3em;
}
.informe_filtro_campo label{
	font-size: .76em;
	font-weight: 700;
	letter-spacing: .03em;
	color: #64748b;
	text-transform: uppercase;
}
.informe_filtro_campo select,
.informe_filtro_campo input{
	height: 38px;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 0 .6em;
	background: #f8fafc;
	color: #1f2937;
}
.informe_linea_negocio{
	display: flex;
	flex-direction: column;
	gap: .4em;
	padding-top: .8em;
	border-top: 1px solid #eef1f5;
}
.informe_linea_negocio_titulo{
	font-size: .76em;
	font-weight: 700;
	letter-spacing: .03em;
	color: #64748b;
	text-transform: uppercase;
}
.informe_linea_chip{
	display: flex;
	align-items: center;
	gap: .5em;
	width: 100%;
	font-size: .82em;
	color: #334155;
	background: none;
	border: 1px solid transparent;
	border-radius: 8px;
	padding: .35em .5em;
	cursor: pointer;
	text-align: left;
}
.informe_linea_chip:hover{
	background: #f8fafc;
	border-color: #e2e8f0;
}
.informe_linea_chip.activo{
	background: color-mix(in srgb, var(--nav_a_hover_COLOR, #0076A5) 10%, white);
	border-color: var(--nav_a_hover_COLOR, #0076A5);
	color: var(--nav_a_hover_COLOR, #0076A5);
	font-weight: 700;
}
.informe_boton_principal{
	width: 100%;
	border: none;
	border-radius: 10px;
	padding: .7em 1em;
	background: linear-gradient(135deg, var(--nav_a_hover_COLOR, #0076A5), var(--nav_a_hover_COLOR_medio, #3391b7));
	color: #ffffff;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 8px 18px rgba(0, 118, 165, .28);
}
.informe_boton_secundario{
	display: block;
	text-align: center;
	font-size: .8em;
	font-weight: 700;
	color: var(--nav_a_hover_COLOR, #0076A5);
	text-decoration: none;
	padding: .6em 0;
	margin-top: .2em;
	border: 1px solid currentColor;
	border-radius: 8px;
	background: none;
	cursor: pointer;
	width: 100%;
}
.informe_boton_secundario:hover{
	background: color-mix(in srgb, var(--nav_a_hover_COLOR, #0076A5) 8%, white);
	color: var(--nav_a_hover_COLOR, #0076A5);
}

.informe_resultados{
	flex: 1 1 auto;
	min-width: 0;
	background: #ffffff;
	border-radius: 16px;
	box-shadow: 0 18px 40px rgba(15, 23, 42, .08);
	padding: 1.2em;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 1em;
}

/* -------------------- Tarjeta de consultor -------------------- */
.informe_lista{
	display: flex;
	flex-direction: column;
	gap: .8em;
}
.informe_tarjeta{
	border: 1px solid #eef1f5;
	border-radius: 12px;
	padding: .9em 1.1em;
}
.informe_tarjeta_cabecera{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .6em;
}
.informe_tarjeta_punto{
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex: 0 0 auto;
	background: #2fa88a;
}
.informe_tarjeta_punto.baja{
	background: #94a3b8;
}
.informe_tarjeta_razon_social{
	font-weight: 700;
	color: #1f2937;
	flex: 1 1 auto;
}
.informe_tarjeta_chip{
	font-size: .72em;
	font-weight: 700;
	color: #64748b;
	background: #f1f5f9;
	border-radius: 999px;
	padding: .15em .6em;
	text-transform: uppercase;
	letter-spacing: .02em;
}
.informe_tarjeta_estado{
	font-size: .72em;
	font-weight: 800;
	border-radius: 999px;
	padding: .15em .7em;
	color: #ffffff;
}
.informe_tarjeta_estado.estado-verde{ background: #2fa88a; }
.informe_tarjeta_estado.estado-naranja{ background: #e58d00; }
.informe_tarjeta_estado.estado-rojo{ background: #c0392b; }
.informe_tarjeta_cuerpo{
	display: flex;
	flex-wrap: wrap;
	gap: 1.2em;
	margin: .7em 0 0 0;
	padding-top: .7em;
	border-top: 1px solid #eef1f5;
}
.informe_tarjeta_dato{
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 90px;
}
.informe_tarjeta_dato_numero{
	font-weight: 800;
	color: #1f2937;
	font-size: .95em;
}
.informe_tarjeta_dato_texto{
	font-size: .72em;
	color: #6b7785;
	text-transform: uppercase;
	letter-spacing: .02em;
}

.informe_paginacion{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .8em;
}
.informe_paginacion_texto{
	font-size: .82em;
	color: #6b7785;
}

@media screen and ( max-width: 870px){
	.informe{
		padding: 1em;
		gap: 1em;
	}
	.informe_cuerpo{
		flex-direction: column;
	}
	.informe_filtros{
		width: 100%;
	}
}