.grafico.barras {
	display: flex;
    flex-direction: column;
    gap: 1.5rem;
	max-width:16rem;
}
.barra {
	position:relative;
}
.barra:before,
.barra:after {
    display: block;
    background:#878787;
    height: 0;
    overflow: hidden;
    padding-top: 0.5rem;
    border-radius: 0.5rem;
    width: var(--porcentaje-barras);
	transition: width 2s;
}
.barra:not(.andbank):before,
.barra.andbank:after {
	content: '▴';
}
.barra:not(.andbank):before {
	margin-bottom:5.5rem;
}
.barra.andbank:after {
	 background:var(--andbank-highlight);
	margin-top:4.5rem;
	width:var(--porcentaje-barras);;
}
.barra:not(.andbank) p:before, 
.barra.andbank p:after {
	display:block;
	content: ">";
	line-height:.5;
}
.barra:not(.andbank) p:before {
	transform: rotate(-90deg);
	line-height:1;
}

.barra.andbank p:after {
	transform: rotate(90deg);
}
.barra p {
    text-transform: none;
    color:#878787;
	position:absolute;
	bottom:0;
	left:var(--porcentaje-barras);
	transform:translate(-50%);
	width:100%;
	
	transition: left 2s;
}
.grafico.barras.inactivo {
	--porcentaje-barras: 0%;
}
.wysiwyg .barra p {
	line-height:1.2;
}
.barra strong {
    display: block;
    font-size: 120%;
    font-weight: bold;
    color:#878787;
}
.barra.andbank p,
.barra.andbank p strong {
	color:var(--andbank-highlight);
}

.solvencia .grafico.barras:not(.inactivo) .barra { --porcentaje-barras: 24%; }
.solvencia .grafico.barras:not(.inactivo) .barra.andbank { --porcentaje-barras: 70%; }

.liquidez .grafico.barras:not(.inactivo) .barra { --porcentaje-barras: 40%; }
.liquidez .grafico.barras:not(.inactivo) .barra.andbank { --porcentaje-barras: 70%; }


.morosidad .grafico.barras:not(.inactivo) .barra { --porcentaje-barras: 66%; }
.morosidad .grafico.barras:not(.inactivo) .barra.andbank { --porcentaje-barras: 10%; }

.clientes ul {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-gap: 10px;
    grid-auto-rows: minmax(100px, auto);
	align-items:center;
	position:relative;
}
.clientes ul.grafico:before {
	content: 'a';
	color:white;
	background:url(https://www.andbank.es/wp-content/themes/andbank/agentes/images/agente.png) center center no-repeat;
	background-size:contain;
	height:100%;
	width: auto;
	position: absolute;
    object-fit: cover;
    display: block;
	left:50%;
	transform:translate(-50%);
    aspect-ratio: 63/77;
	transition:height 2s;
	clip-path: circle(10%);
	transition: clip-path 2s;
	z-index:1;
}

.clientes ul.grafico:not(.inactivo):before {
	height:100%;
	clip-path: circle(100%);
}
.wysiwyg .clientes li {
	background:#fff;
	padding:0 1rem;
	padding: 0 1rem;
    font-size: 1.4rem;
	position:relative;
	z-index:10;
	text-align:left;
}
.clientes li::marker {
	content: none;
}
.clientes li:first-child {
	grid-column: 2;
    grid-row: 1/7;
    align-self: center;
	justify-self:center;
	font-size:2rem;
}
.clientes li:nth-child(2),
.clientes li:nth-child(3),
.clientes li:nth-child(4),
.clientes li:nth-child(5),
.clientes li:nth-child(6),
.clientes li:nth-child(7) {
	text-align:right;
}
.clientes li:nth-child(2) {
	grid-column:1;
	grid-row:1;
}
.clientes li:nth-child(3) {
	grid-column:1;
	grid-row:2;
}
.clientes li:nth-child(4) {
	grid-column:1;
	grid-row:3;
}
.clientes li:nth-child(5) {
	grid-column:1;
	grid-row:4;
}
.clientes li:nth-child(6) {
	grid-column:1;
	grid-row:5;
}
.clientes li:nth-child(7) {
	grid-column:1;
	grid-row:6;
}

table.grafico.anyos {
	border:0;
	font-size: 1.3rem;
}
.grafico.anyos caption {
	font-size:1.3rem;
	color:#000;
	text-align:center;
}
.grafico.anyos tbody {
    display: flex;
    flex-direction: row;
	justify-content: center;
}
.grafico.anyos.inactivo {
	--porcentaje-barra: 0%;
}
.grafico.anyos tr {
    display: flex;
    flex-direction: column-reverse;
}
.grafico.anyos th {
	background:#fff;
	border-width: 1px 0 0 0;
	font-weight:normal;
}
.grafico.anyos td {
	height:250px;
	border:none;
	background:#fff;
	display: flex;
    justify-content: flex-end;
    flex-direction: column;
	text-align:center;
	padding:0;
	position:relative;
}

.grafico.anyos td:before {
	content: '▴';
    display: block;
    width: 0;
	padding-left:1.5rem;
	overflow:hidden;
    text-align: center;
    position: absolute;
    background: linear-gradient(to bottom, #da7e88, var(--andbank-highlight));
	margin:0 auto;
	left: 50%;
    transform: translateX(-50%);
    z-index: 1;
	height:var(--porcentaje-barra);
	transition: height 2s;
}
.grafico.anyos td span {
    position: relative;
    background: #ffffffea;
    box-shadow: 0 0 3px 3px #00000020;
    margin: 5px;
    line-height: 1;
    z-index: 40;
}

.incorporaciones .grafico.anyos th {
	padding: .5rem 1rem;
}
.incorporaciones .grafico.anyos td span {
    bottom: var(--porcentaje-barra);
    position: absolute;
    width: 100%;
	box-shadow:none;
	transition:bottom 2s;
}
.incorporaciones .grafico.anyos td:before {
	width:auto;
	padding-left: .5rem;
	padding-right: .5rem;
	color:#fff;
	font-size:1.5rem;
}
.incorporaciones .grafico.anyos td:after {
	background:linear-gradient(to right, #ffffff00 0, #ffffff00 49%, #fff 50%, #ffffff00 51%);
	background-position: 1rem center;
	
	content: '▴';
    display: block;
	background:#fff;
	position:absolute;
	z-index:2;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
	padding-left:1px;
    overflow: hidden;
    /*padding-left: 1.5rem;
    text-align: center;
    background: linear-gradient(to bottom, #da7e88, var(--andbank-highlight));
    margin: 0 auto;
    */
    height: calc(var(--porcentaje-barra) - 1.2rem);
    transition: height 2s;
}
	
.grafico.anyos:not(.inactivo) .dic16   { --porcentaje-barra:45%; }
.grafico.anyos:not(.inactivo) .dic17   { --porcentaje-barra:52%; }
.grafico.anyos:not(.inactivo) .dic18   { --porcentaje-barra:52%; }
.grafico.anyos:not(.inactivo) .dic19   { --porcentaje-barra:59%; }
.grafico.anyos:not(.inactivo) .dic20   { --porcentaje-barra:70%; }
.grafico.anyos:not(.inactivo) .dic21   { --porcentaje-barra:100%; }
.grafico.anyos:not(.inactivo) .dic22   { --porcentaje-barra:96%; }

.grafico.anyos:not(.inactivo) .anyo16  { --porcentaje-barra:5%; }
.grafico.anyos:not(.inactivo) .anyo17  { --porcentaje-barra:22%; }
.grafico.anyos:not(.inactivo) .anyo18  { --porcentaje-barra:33%; }
.grafico.anyos:not(.inactivo) .anyo19  { --porcentaje-barra:45%; }
.grafico.anyos:not(.inactivo) .anyo20  { --porcentaje-barra:56%; }
.grafico.anyos:not(.inactivo) .anyo21  { --porcentaje-barra:77%; }
.grafico.anyos:not(.inactivo) .anyo22  { --porcentaje-barra:100%; }


@media screen and (min-width:400px) and (max-width:781px) {
	.wysiwyg .clientes ul {
		padding-left:0;
	}
	.wysiwyg .clientes li {
		font-size: .75rem;
	}
	.clientes ul {
		grid-auto-rows: minmax(50px, auto);
	}
}
@media screen and (min-width:782px) and (max-width:993px) {
	.clientes ul {
		grid-auto-rows: minmax(75px, auto);
	}
}
@media screen and (max-width:400px) {
	.clientes ul {
		grid-auto-rows: auto;
	}
	.wysiwyg .clientes li {
		font-size: .5rem;
		text-align:right;
	}
	.clientes li:nth-child(2),
	.clientes li:nth-child(3),
	.clientes li:nth-child(4),
	.clientes li:nth-child(5),
	.clientes li:nth-child(6),
	.clientes li:nth-child(7) {
		text-align:left;
	}
}