/* UPME Indicadores — frontend. Los valores vienen como variables CSS desde el admin. */

.uind {
	display: inline-flex;
	align-items: center;
	gap: var(--uind-gap, 12px);
	box-sizing: border-box;
	max-width: 100%;
	padding: var(--uind-pad, 0);
	background: var(--uind-bg, transparent);
	border: var(--uind-bw, 0) solid var(--uind-bc, transparent);
	border-radius: var(--uind-radius, 0);
	font-family: var(--uind-font, inherit);
	line-height: 1.3;
	text-align: left;
	vertical-align: middle;
}
.uind *,
.uind *::before,
.uind *::after { box-sizing: border-box; }

.uind--full { display: flex; width: 100%; }
.uind--shadow { box-shadow: 0 2px 10px rgba(15, 23, 42, .08); }
.uind--valign-top { align-items: flex-start; }

/* Icono arriba */
.uind--icon-top { flex-direction: column; align-items: flex-start; }
.uind--icon-top.uind--align-center { align-items: center; }
.uind--icon-top.uind--align-right { align-items: flex-end; }

/* Alineación */
.uind--full.uind--align-center { justify-content: center; }
.uind--full.uind--align-right { justify-content: flex-end; }
.uind--align-center .uind__body { text-align: center; align-items: center; }
.uind--align-right .uind__body { text-align: right; align-items: flex-end; }

/* Cuerpo */
.uind__body {
	display: flex;
	flex-direction: column;
	gap: var(--uind-line-gap, 2px);
	min-width: 0;
}

.uind__value {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .25em;
	margin: 0;
	color: var(--uind-value-color, #3c4650);
	font-size: var(--uind-value-size, 22px);
	font-weight: var(--uind-value-weight, 600);
	line-height: 1.15;
	font-variant-numeric: tabular-nums;
}
.uind--align-center .uind__value { justify-content: center; }
.uind--align-right .uind__value { justify-content: flex-end; }

.uind__unit {
	color: var(--uind-unit-color, inherit);
	font-size: var(--uind-unit-size, 1em);
	font-weight: var(--uind-unit-weight, inherit);
}
.uind--unit-below .uind__value { flex-direction: column; align-items: flex-start; gap: 0; }
.uind--unit-below.uind--align-center .uind__value { align-items: center; }
.uind--unit-below.uind--align-right .uind__value { align-items: flex-end; }

.uind__name {
	margin: 0;
	color: var(--uind-name-color, #4b5563);
	font-size: var(--uind-name-size, 15px);
	font-weight: var(--uind-name-weight, 400);
}
.uind__date {
	color: var(--uind-date-color, #4b5563);
	font-size: var(--uind-date-size, 12px);
	font-weight: 400;
}
.uind__line-date { margin: 0; line-height: 1.3; }

/* Icono */
.uind__icon {
	flex: 0 0 auto;
	display: inline-flex;
	width: var(--uind-icon-size, 36px);
	height: var(--uind-icon-size, 36px);
	color: var(--uind-icon-color, currentColor);
}
.uind__icon svg,
.uind__icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.uind__icon svg { stroke-width: var(--uind-icon-stroke, 1.5); }

/* Tendencia */
.uind__trend {
	flex: 0 0 auto;
	display: inline-flex;
	width: var(--uind-trend-size, 28px);
	height: var(--uind-trend-size, 28px);
}
.uind__value .uind__trend { width: .9em; height: .9em; align-self: center; }
.uind__trend svg { width: 100%; height: 100%; display: block; }
.uind__trend--good    { color: var(--uind-good, #22c55e); }
.uind__trend--bad     { color: var(--uind-bad, #ef4444); }
.uind__trend--neutral { color: var(--uind-neutral, #9ca3af); }

/* Una sola línea: todo en fila */
.uind--inline .uind__body {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: .5em;
}
.uind--inline .uind__value { flex-wrap: nowrap; }

/* ------------------------------------------------------------------ */
/* Grupo [upme_indicadores]                                            */
/* ------------------------------------------------------------------ */

.uind-group {
	display: flex;
	align-items: stretch;
	overflow: hidden;
	border-radius: var(--uindg-radius, 10px);
	background: var(--uindg-bg, #eef2f8);
	margin: 0 0 1.5em;
}
.uind-group__label {
	flex: 0 0 var(--uindg-label-w, 26%);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 16px;
	text-align: center;
	background: var(--uindg-label-bg, #b9ff6e);
	color: var(--uindg-label-color, #3c4650);
}
.uind-group__title { font-size: 20px; line-height: 1.25; }
.uind-group__subtitle { font-size: 15px; line-height: 1.3; }

.uind-group__items {
	flex: 1 1 auto;
	display: grid;
	grid-template-columns: var(--uindg-cols, repeat(auto-fit, minmax(200px, 1fr)));
	align-items: center;
	gap: var(--uindg-gap, 16px);
	padding: 14px 24px;
	min-width: 0;
}
.uind-group__item { min-width: 0; display: flex; justify-content: center; }
.uind-group__item .uind { max-width: 100%; }

.uind-group--dividers .uind-group__item + .uind-group__item {
	border-left: 1px solid rgba(60, 70, 80, .15);
}

@media (max-width: 782px) {
	.uind-group { flex-direction: column; }
	.uind-group__label { flex-basis: auto; }
	.uind-group__items { grid-template-columns: 1fr; padding: 14px 16px; }
	.uind-group__item { justify-content: flex-start; }
	.uind-group--dividers .uind-group__item + .uind-group__item {
		border-left: 0;
		border-top: 1px solid rgba(60, 70, 80, .15);
		padding-top: 12px;
	}
}