/**
 * Sarcomp - Modulo Comparativo entre sucursales (Maestro).
 *
 * Ajustes visuales propios: resaltado de la mejor sucursal por indicador,
 * barra de participacion y bloque de gastos por categoria.
 *
 * @package Sarcomp
 */

.sarcomp-comp {
	display: block;
}

/* Caja de gastos del resumen (tono distinto al resto). */
.sarcomp-comp-caja-gasto .sarcomp-inv-valor-caja-num,
.sarcomp-comp-caja-gasto .sarcomp-inv-valor-caja-eti {
	color: #b3261e;
}

/* Celdas con el mejor valor del indicador. */
.sarcomp-comp-tabla td.sarcomp-comp-mejor {
	background: #e8f5e9;
	color: #1b5e20;
	font-weight: 700;
	border-radius: 6px;
	outline: 1px solid #a5d6a7;
	outline-offset: -1px;
}

/* Barra de participacion sobre las ventas globales. */
.sarcomp-comp-barra {
	display: inline-block;
	width: 54px;
	height: 7px;
	margin-right: 6px;
	vertical-align: middle;
	background: #e3e7ed;
	border-radius: 999px;
	overflow: hidden;
}

.sarcomp-comp-barra-relleno {
	display: block;
	height: 100%;
	background: #1e5aa8;
	border-radius: 999px;
}

/* Tabla del comparativo: numeros sin saltos raros. */
.sarcomp-comp-tabla .col-num {
	white-space: nowrap;
}

/* Los gastos se muestran en rojo; si son los mas bajos, el resaltado manda. */
.sarcomp-comp-tabla td.sarcomp-comp-gasto {
	color: #b3261e;
}

/* Bloque de gastos por categoria. */
.sarcomp-comp-gastos-cat {
	margin-top: 18px;
}

.sarcomp-comp-gastos-cat .sarcomp-estad-panel-titulo {
	margin-top: 10px;
	margin-bottom: 10px;
}

/* En movil la tabla se desplaza en horizontal sin romper el layout. */
@media (max-width: 760px) {
	.sarcomp-comp-barra {
		width: 32px;
	}

	.sarcomp-comp-tabla {
		min-width: 720px;
	}
}

/* Impresion: sin rellenos ni barras, solo el dato. */
@media print {
	.sarcomp-comp-tabla td.sarcomp-comp-mejor {
		background: transparent;
		color: inherit;
		font-weight: 700;
		outline: none;
	}

	.sarcomp-comp-barra {
		display: none;
	}
}