/* Informe Completo - Diseño de cada página */

/* Títulos */
/* TITLE 01 */
.portrait-design .design-title-01 {
	background-color: var(--color-lightblue);
	text-transform: uppercase;
	font-weight: 500;
}

.portrait-design .design-title-01 .header {
	top: 30px;
	color: #000;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
}

.portrait-design .design-title-01 .header > div {
	margin: 0 0 7px 0;
}
.portrait-design .design-title-01 .header div:last-child {
	margin-bottom: 0;
}

.portrait-design .design-title-01 .header .divider {
	width: 100%;
	opacity: 0.5;
}

.portrait-design .design-title-01 .report-name {
	position: absolute;
	bottom: 30px;
	left: 50px;
}

.portrait-design .design-title-01 .app-name {
	position: absolute;
	bottom: 30px;
	right: 50px;
	text-align: right;
}

/* TITLE 02 */
.portrait-design .design-title-02 {
	background-color: var(--color-turquoise);
}

.portrait-design .design-title-02 .header {
	top: 30px;
	color: #000;
	text-transform: uppercase;
	display: flex;
}

.portrait-design .design-title-02 .header .number {
	max-width: 45%;
}

.portrait-design .design-title-02 .divider {
	opacity: .4;
}

.portrait-design .design-title-02 .header .title {
	text-align: right;
	max-width: 45%;
}

/* TITLE 03 */
.portrait-design .design-title-03 {
	background-color: var(--color-turquoise-lighter);
}

.portrait-design .design-title-03 .header {
	top: 30px;
	color: #000;
	text-transform: uppercase;
	display: flex;
}

.portrait-design .design-title-03 .title {
	font-weight: 500;
	max-width: 45%;
}

.portrait-design .design-title-03 .divider {
	opacity: .4;
}

.portrait-design .design-title-03 .header .subtitle {
	text-align: right;
	max-width: 45%;
}


/* Introducciones */
/* INTRO 01 */
.portrait-design .design-intro-01 {
	background-color: var(--color-lightblue-light);
}

.portrait-design .design-intro-01 .header {
	color: #a4a8bb;
}

.portrait-design .design-intro-01 .h1 {
	position: absolute;
	left: 50px;
	top: 65px;
	text-decoration: underline;
}

.portrait-design .design-intro-01 .index {
	position: absolute;
	left: 50px;
	top: 100px;
	right: 50px;
	bottom: 30px;
	font-size: 11px;
}

.portrait-design .design-intro-01 .index .content {
	width: 100%;
	font-weight: 500;
	margin-top: 6px;
	margin-bottom: 20px;
}

.portrait-design .design-intro-01 .index .content:first-child {
	margin-top: 0;
}

.portrait-design .design-intro-01 .index .content .content {
	padding-left: 28px;
	font-weight: 300;
	margin-bottom: 6px;
}

.portrait-design .design-intro-01 .index .row {
	width: 100%;
	display: flex;
	align-items: flex-start;
}

.portrait-design .design-intro-01 .index .number::after {
	content: ">";
	margin: 0 4px;
}

.portrait-design .design-intro-01 .index .content .content .number::after {
	margin: 0 3px;
}

.portrait-design .design-intro-01 .index .name {
	padding-right: 6px;
}

.portrait-design .design-intro-01 .index .content .content .content .name {
	opacity: 0.4;
}

.portrait-design .design-intro-01 .index .page {
	margin-left: auto;
	text-align: right;
	font-weight: 300;
	opacity: 0.3;
}

/* INTRO 02 */
.portrait-design .design-intro-02 .h1 {
	position: absolute;
	left: 50px;
	top: 65px;
	text-decoration: underline;
}

.portrait-design .design-intro-02 .content {
	position: absolute;
	top: 100px;
	bottom: 50px;
	left: 50px;
	right: 50px;
	font-size: 11px;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
}

.portrait-design .design-intro-02 .data-sheet {
	width: 400px;
}

.portrait-design .design-intro-02 .section {
	display: grid;
	grid-template-columns: 70px 35px 1fr;
	align-items: center;
	margin: 50px 0;
}
.portrait-design .design-intro-02 .section:first-child {
	margin-top: 0;
}
.portrait-design .design-intro-02 .section:last-child {
	margin-bottom: 0;
}

.portrait-design .design-intro-02 .section .divider {
	transform: rotate(270deg);
	display: flex;
	justify-content: center;
	font-size: 9px;
}

.portrait-design .design-intro-02 .info {
	font-family: Roboto, sans-serif;
}

/* INTRO 03 */
.portrait-design .design-intro-03 .h1 {
	position: absolute;
	left: 50px;
	top: 65px;
	text-decoration: underline;
}

.portrait-design .design-intro-03 .content {
	position: absolute;
	top: 200px;
	bottom: 50px;
	left: 50px;
	right: 50px;
	font-family: Roboto, sans-serif;
	font-size: 11px;
	line-height: 13px;
}

.portrait-design .design-intro-03.cloned .content {
	top: 90px;
}

.portrait-design .design-intro-03 .ql-editor {
	column-count: 2;
	-moz-column-count: 2;
	column-gap: 40px;
	column-fill: auto;
}

/* INTRO 04 */
.portrait-design .design-intro-04 .h1 {
	position: absolute;
	left: 50px;
	top: 65px;
	text-decoration: underline;
}
.portrait-design .design-intro-04.cloned .h1 {
	display: none;
}

.portrait-design .design-intro-04 .content {
	position: absolute;
	top: 200px;
	bottom: 40px;
	left: 50px;
	right: 50px;
	width: 420px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.portrait-design .design-intro-04.cloned .content {
	top: 70px;
	justify-content: flex-start;
}

.portrait-design .design-intro-04 .quotes-list {
	width: 420px;
	max-height: 602px;
}

.portrait-design .design-intro-04.cloned .quotes-list {
	max-height: 732px;
}

.portrait-design .design-intro-04 .section {
	margin: 18px 0;
	position: relative;
}
.portrait-design .design-intro-04 .section:first-child {
	margin-top: 0;
}
.portrait-design .design-intro-04 .section:last-child {
	margin-bottom: 0;
}

.portrait-design .design-intro-04 .section .title {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
}

.portrait-design .design-intro-04 .section .icon {
	width: 30px;
	min-width: 30px;
	height: 30px;
	border-radius: 50%;
	background-color: hsl(var(--color-cat-h), var(--color-cat-s), var(--color-cat-l));
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 10px;
}

.portrait-design .design-intro-04 .section object {
	width: 25px;
	height: 25px;
}

.portrait-design .design-intro-04 .title .name {
	font-size: 12px;
	text-decoration: underline;
	max-width: 350px;
}

.portrait-design .design-intro-04 .description {
	font-family: Roboto, sans-serif;
	color: #888;
	font-size: 11px !important;
	line-height: 13px;
}

.portrait-design .design-intro-04 .section .delete {
	position: absolute;
	top: 5px;
	right: 5px;
	height: 15px;
	width: 15px;
	background: url("../images/icon--cross--black.svg") no-repeat center;
	background-size: 25px;
	opacity: 0.3;
	transition: opacity 0.1s ease-in-out;
	cursor: pointer;
}
.portrait-design .design-intro-04 .section .delete::before {
	content: "Eliminar";
	display: none;
	font-size: 10px;
	margin-left: -55px;
	margin-right: 20px;
	margin-top: 1px;
}
.portrait-design .design-intro-04 .section .delete:hover {
	opacity: 1;
}
.portrait-design .design-intro-04 .section .delete:hover::before {
	display: block;
}

/* Estadísticas */
/* STATS 01 */
.portrait-design .design-stats-01 {
	background-color: var(--color-lightblue-lighter);
}

.portrait-design .design-stats-01 .header {
	color: #a4a8bb;
}

.portrait-design .design-stats-01 .h1 {
	font-size: 15px;
	margin-bottom: 40px;
	text-decoration: underline;
}

.portrait-design .design-stats-01 .content {
	position: absolute;
	left: 50px;
	top: 70px;
	right: 50px;
	bottom: 50px;
	font-size: 11px;
}

.portrait-design .design-stats-01 .section {
	position: relative;
	margin-bottom: 45px;
}
.portrait-design .design-stats-01 .section:last-child {
	margin-bottom: 0;
}

.portrait-design .design-stats-01 .section.circle {
	height: calc(100% - 55px);
}

.portrait-design .design-stats-01 .content .h2 {
	font-size: 12px;
	margin-bottom: 25px;
}
.portrait-design .design-stats-01 .content .h2::before {
	content: ">";
	margin-right: 3px;
}

.portrait-design .design-stats-01 .section > .delete {
	position: absolute;
	top: 0;
	right: 0;
	height: 20px;
	width: 20px;
	background: url("../images/icon--cross--black.svg") no-repeat center;
	background-size: 25px;
	opacity: 0.3;
	transition: opacity 0.1s ease-in-out;
	cursor: pointer;
}

.portrait-design .design-stats-01 .section > .delete::before {
	content: "Eliminar";
	display: none;
	font-size: 10px;
	margin-left: -55px;
	margin-right: 20px;
}
.portrait-design .design-stats-01 .section > .delete:hover {
	opacity: 1;
}
.portrait-design .design-stats-01 .section > .delete:hover::before {
	display: block;
}

.portrait-design .design-stats-01 .graph {
	width: 90%;
	font-size: 10px;
}

/* Gráfico de torta outline */
.portrait-design .design-stats-01 .graph.circle {
	height: 300px;
	width: 300px;
	margin: 0 auto;
	margin-top: 100px;
	position: relative;
}

.portrait-design .design-stats-01 .graph.circle span {
	position: absolute;
	left: 50%;
	top: 50%;
	transform-origin: 0 170px;
	transform: translateY(-170px) rotate(var(--angle));
	font-size: 35px;
	font-weight: 100;
	color: #aaa;
}
.portrait-design .design-stats-01 .graph.circle span.active {
	color: var(--color-lightblue-dark);
	font-weight: 500;
}

.portrait-design .design-stats-01 .graph.circle .value {
	position: absolute;
	left: 0%;
	top: 0%;
	width: 300px;
	height: 300px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 85px;
	font-weight: 100;
	text-align: center;
	padding-left: 10px;
}

/* Gráfico de barras */
.portrait-design .design-stats-01 .graph.bars .item {
	display: grid;
	grid-template-columns: 145px 1fr 30px;
	grid-column-gap: 15px;
	align-items: center;
	margin: 10px 0;
	min-height: 30px;
}

.portrait-design .design-stats-01 .graph.bars .bar {
	height: 3px;
	background-color: #eee;
}

.portrait-design .design-stats-01 .graph.bars .fill {
	width: 50%;
	height: 3px;
	background-color: var(--color-lightblue);
	position: relative;
}

.portrait-design .design-stats-01 .graph.bars .fill::after {
	content: "";
	display: block;
	width: 17px;
	min-width: 17px;
	height: 17px;
	min-height: 17px;
	border-radius: 50%;
	background-color: var(--color-lightblue);
	position: absolute;
	right: -8px;
	top: -7px;
}

.portrait-design .design-stats-01 .graph.bars .value {
	text-align: right;
}

/* Versión con colores personalizados e iconos */
.portrait-design .design-stats-01 .graph.bars.icon .item {
	grid-template-columns: 20px 110px 1fr 30px;
	grid-column-gap: 15px;
	margin: 15px 0;
	line-height: 11px;
	min-height: 23px;
}

.portrait-design .design-stats-01 .graph.bars.icon .icon {
	height: 20px;
	width: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.portrait-design .design-stats-01 .graph.bars.icon object {
	height: 25px;
}

.portrait-design .design-stats-01 .graph.bars.custom-color .fill {
	background-color: hsl(var(--color-cat-h), var(--color-cat-s), var(--color-cat-l));
}
.portrait-design .design-stats-01 .graph.bars.custom-color .fill::after {
	background-color: hsl(var(--color-cat-h), var(--color-cat-s), var(--color-cat-l));
}

/* Gráfico porcentaje 100% */
.portrait-design .design-stats-01 .graph.percentage .list .item {
	margin: 25px 0;
}
.portrait-design .design-stats-01 .graph.percentage .list .item:last-child {
	margin-bottom: 20px;
}

.portrait-design .design-stats-01 .graph.percentage .list .name {
	margin-bottom: 7px;
}

.portrait-design .design-stats-01 .graph.percentage .bar {
	height: 19px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.portrait-design .design-stats-01 .graph.percentage .grade {
	min-width: 2%;
	width: 20%;
	height: 19px;
	margin-right: 2px;
	border-radius: 2px;
	position: relative;
}

.portrait-design .design-stats-01 .graph.percentage .grade:first-child {
	background-color: var(--color-lightblue-5);
	border-radius: 30px 6px 6px 30px;
}
.portrait-design .design-stats-01 .graph.percentage .grade:nth-of-type(2) {
	background-color: var(--color-lightblue-4);
}
.portrait-design .design-stats-01 .graph.percentage .grade:nth-of-type(3) {
	background-color: var(--color-lightblue-3);
}
.portrait-design .design-stats-01 .graph.percentage .grade:nth-of-type(4) {
	background-color: var(--color-lightblue-2);
}
.portrait-design .design-stats-01 .graph.percentage .grade:last-child {
	background-color: var(--color-lightblue-1);
	border-radius: 6px 30px 30px 6px;
	margin-right: 0;
}

.portrait-design .design-stats-01 .graph.percentage .value {
	font-size: 10px;
	position: absolute;
	top: 2px;
	left: 6px;
}

/* Caso 0% */
.portrait-design .design-stats-01 .graph.percentage .grade.value-0 {
	width: 2%;
}
.portrait-design .design-stats-01 .graph.percentage .grade.value-0 .value {
	top: 22px;
	left: -1px;
}

.portrait-design .design-stats-01 .graph.percentage .legend {
	display: flex;
	align-items: flex-start;
	justify-content: space-around;
	font-size: 9px;
}

.portrait-design .design-stats-01 .graph.percentage .legend .item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.portrait-design .design-stats-01 .graph.percentage .legend .icon {
	height: 30px;
	width: 30px;
	margin-bottom: 2px;
}

.portrait-design .design-stats-01 .graph.percentage .legend .icon.icon-01 {
	background: url("../images/icon--face-scale-blue--01.svg") no-repeat center;
	background-size: 40px;
}
.portrait-design .design-stats-01 .graph.percentage .legend .icon.icon-02 {
	background: url("../images/icon--face-scale-blue--02.svg") no-repeat center;
	background-size: 40px;
}
.portrait-design .design-stats-01 .graph.percentage .legend .icon.icon-03 {
	background: url("../images/icon--face-scale-blue--03.svg") no-repeat center;
	background-size: 40px;
}
.portrait-design .design-stats-01 .graph.percentage .legend .icon.icon-04 {
	background: url("../images/icon--face-scale-blue--04.svg") no-repeat center;
	background-size: 40px;
}
.portrait-design .design-stats-01 .graph.percentage .legend .icon.icon-05 {
	background: url("../images/icon--face-scale-blue--05.svg") no-repeat center;
	background-size: 40px;
}

.portrait-design .design-stats-01 .photo {
	height: 350px;
	width: 485px;
	min-width: 485px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	position: relative;
}

.portrait-design .design-stats-01 .photo img {
	height: auto;
	width: 100%;
}

.portrait-design .design-stats-01 .photo .actions {
	position: absolute;
	top: 10px;
	right: 10px;
	display: flex;
	justify-content: flex-end;
}

.portrait-design .design-stats-01 .photo .actions button {
	height: 30px;
	width: 30px;
	margin-left: 10px;
	opacity: 0.5;
	transition: background-color 0.1s ease-in-out;
}
.portrait-design .design-stats-01 .photo .actions button:first-child {
	margin-left: 0;
}

.portrait-design .design-stats-01 .photo .actions button.edit {
	background: url("../images/icon--pen--black.svg") no-repeat center;
	background-size: 25px;
}
.portrait-design .design-stats-01 .photo .actions button.delete {
	background: url("../images/icon--cross--black.svg") no-repeat center;
	background-size: 25px;
}

.portrait-design .design-stats-01 .photo .actions button:hover {
	background-color: #fff;
	opacity: 1;
}

.portrait-design .design-stats-01 .photo .empty {
	display: none;
}

/* Al no haber imagen */
.portrait-design .design-stats-01.no-photo .photo {
	background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='black' stroke-width='2' stroke-dasharray='24%2c 20' stroke-dashoffset='12' stroke-linecap='round'/%3e%3c/svg%3e");
	opacity: 0.2;
	transition: opacity 0.1s ease-in-out;
	cursor: pointer;
}
.portrait-design .design-stats-01.no-photo .photo:hover {
	opacity: 1;
}

.portrait-design .design-stats-01.no-photo .photo img,
.portrait-design .design-stats-01.no-photo .photo .actions {
	display: none;
}

.portrait-design .design-stats-01.no-photo .photo .empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	background-color: transparent;
}

.portrait-design .design-stats-01.no-photo .photo .empty .icon {
	height: 30px;
	width: 30px;
	margin-bottom: 10px;
	background: url("../images/icon--camera--black.svg") no-repeat center;
	background-size: 25px;
}

/* Extensión a más de una página */
.portrait-design .design-stats-01.cloned {
	background-color: #fff;
}
.portrait-design .design-stats-01.cloned .h1 {
	display: none;
}
.portrait-design .design-stats-01.cloned .content {
	top: 70px;
}

/* STATS 02 */
.portrait-design .design-stats-02 .h1 {
	position: absolute;
	left: 50px;
	top: 65px;
	text-decoration: underline;
}

.portrait-design .design-stats-02 .content {
	position: absolute;
	left: 50px;
	top: 95px;
	right: 50px;
	bottom: 30px;
	font-size: 11px;
}

.portrait-design .design-stats-02 .section .h2 {
	font-size: 13px;
	text-decoration: underline;
	margin-bottom: 6px;
}

.portrait-design .design-stats-02 .survey--header {
	margin-top: 40px;
}

.portrait-design .design-stats-02 .survey--header:first-child {
	margin: 0;
}

.portrait-design .design-stats-02 .survey--info {
	font-family: Roboto, sans-serif;
	font-size: 11px;
	line-height: 12px;
}

.portrait-design .design-stats-02 .survey--header + .survey--category {
	margin-top: 12px;
}

.portrait-design .design-stats-02 .survey--question-result + .survey--category, .portrait-design .design-stats-02 .survey--question-text + .survey--category {
	margin-top: 25px;
}

.portrait-design .design-stats-02 .survey--category .title {
	display: flex;
	align-items: center;
}

.portrait-design .design-stats-02 .survey--category .title .icon {
	width: 32px;
	min-width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: hsl(var(--color-cat-h), var(--color-cat-s), var(--color-cat-l));
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 15px;
}

.portrait-design .design-stats-02 .survey--category .title object {
	height: 80%;
}

.portrait-design .design-stats-02 .survey--category .legend {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.portrait-design .design-stats-02 .survey--category .divider {
	color: hsl(var(--color-cat-h), var(--color-cat-s), calc(var(--color-cat-l) - 10%), 0.7);
	font-size: 9px;
	width: 100%;
	height: 9px;
}
.portrait-design .design-stats-02 .survey--category .divider:first-child {
	margin-bottom: 10px;
}
.portrait-design .design-stats-02 .survey--category .divider:last-child {
	margin-top: 3px;
}

.portrait-design .design-stats-02 .survey--category .list {
	width: 100%;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	font-size: 9px;
	line-height: 10px;
}

.portrait-design .design-stats-02 .survey--category .item {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0 5px;
}

.portrait-design .design-stats-02 .survey--category .legend .icon {
	width: 23px;
	min-width: 23px;
	height: 23px;
	margin-bottom: 5px;
	background-size: 37px;
	background-repeat: no-repeat;
	background-position: center;
	border-radius: 50%;
}

.portrait-design .design-stats-02 .icon-01 {
	background-color: hsl(var(--color-cat-h), var(--color-cat-s), calc(var(--color-cat-l) + 15%), 0.5);
	background-image: url(../images/icon--face-scale-transparent--01.svg);
}
.portrait-design .design-stats-02 .icon-02 {
	background-color: hsl(var(--color-cat-h), var(--color-cat-s), calc(var(--color-cat-l) + 8%), 0.6);
	background-image: url(../images/icon--face-scale-transparent--02.svg);
}
.portrait-design .design-stats-02 .icon-03 {
	background-color: hsl(var(--color-cat-h), var(--color-cat-s), calc(var(--color-cat-l) + 6%));
	background-image: url(../images/icon--face-scale-transparent--03.svg);
}
.portrait-design .design-stats-02 .icon-04 {
	background-color: hsl(var(--color-cat-h), var(--color-cat-s), calc(var(--color-cat-l) - 10%), 0.7);
	background-image: url(../images/icon--face-scale-transparent--04.svg);
}
.portrait-design .design-stats-02 .icon-05 {
	background-color: hsl(var(--color-cat-h), var(--color-cat-s), calc(var(--color-cat-l) - 20%), 0.7);
	background-image: url(../images/icon--face-scale-transparent--05.svg);
}

.portrait-design .design-stats-02 .survey--question-header {
	margin-top: 10px;
}
.portrait-design .design-stats-02 .survey--question-header:first-child {
	margin-top: 0;
}
.portrait-design .design-stats-02 .survey--category + .survey--question-header {
	margin-top: 12px;
}

.portrait-design .design-stats-02 .survey--question-results {
	padding-bottom: 10px;
}

.portrait-design .design-stats-02 .h3 {
	font-size: 12px;
	text-decoration: underline;
	margin-bottom: 8px;
}

.portrait-design .design-stats-02 .global {
	width: 100%;
	display: flex;
	align-items: center;
}

.portrait-design .design-stats-02 .graph {
	width: 100%;
}

/* Gráfico de barra grande */
.portrait-design .design-stats-02 .graph.big-bar .name {
	margin-bottom: 3px;
}

.portrait-design .design-stats-02 .graph.big-bar .item {
	display: grid;
	grid-template-columns: 1fr 53px;
	grid-column-gap: 19px;
	align-items: center;
}

.portrait-design .design-stats-02 .graph.big-bar .bar {
	height: 5px;
	background-color: #eee;
}

.portrait-design .design-stats-02 .graph.big-bar .fill {
	width: 50%;
	height: 5px;
	background-color: hsl(var(--color-cat-h), var(--color-cat-s), var(--color-cat-l));
	position: relative;
}

.portrait-design .design-stats-02 .graph.big-bar .fill::after {
	content: "";
	display: block;
	width: 15px;
	min-width: 15px;
	height: 15px;
	min-height: 15px;
	border-radius: 50%;
	background-color: hsl(var(--color-cat-h), var(--color-cat-s), var(--color-cat-l));
	position: absolute;
	right: -8px;
	top: -5px;
}

.portrait-design .design-stats-02 .graph.big-bar .value {
	font-size: 14px;
}

.portrait-design .design-stats-02 .survey--question-result {
	padding-bottom: 13px;
	padding-left: 20px;
}
.portrait-design .design-stats-02 .survey--question-result:first-child {
	margin-top: 0;
}
.portrait-design .design-stats-02 .survey--question-header + .survey--question-result {
	padding-top: 6px;
}
.portrait-design .design-stats-02 .survey--question-result + .survey--question-result {
	padding-top: 2px;
}

.portrait-design .design-stats-02 .survey--question-result .user {
	font-size: 9px;
	text-decoration: underline;
	margin-bottom: 3px;
}

.portrait-design .design-stats-02 .survey--question-result .question {
	font-family: Roboto, sans-serif;
	font-size: 11px;
	line-height: 12px;
}

/* Gráfico porcentaje 100% */
.portrait-design .design-stats-02 .graph.percentage {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 55px;
	grid-column-gap: 15px;
	align-items: center;
}

.portrait-design .design-stats-02 .graph.percentage .average {
	display: flex;
	align-items: center;
}

.portrait-design .design-stats-02 .graph.percentage .average .icon {
	width: 19px;
	min-width: 19px;
	height: 19px;
	background-size: 35px;
	background-position: center;
	border-radius: 50%;
}

.portrait-design .design-stats-02 .graph.percentage .average .value {
	width: 33px;
	margin-left: 7px;
}

.portrait-design .design-stats-02 .graph.percentage .bar {
	height: 14px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.portrait-design .design-stats-02 .graph.percentage .grade {
	min-width: 2%;
	width: 20%;
	height: 13px;
	margin-right: 2px;
	border-radius: 2px;
	position: relative;
}

.portrait-design .design-stats-02 .graph.percentage .grade:first-child {
	background-color: hsl(var(--color-cat-h), var(--color-cat-s), calc(var(--color-cat-l) + 15%), 0.5);
	border-radius: 20px 6px 6px 20px;
}
.portrait-design .design-stats-02 .graph.percentage .grade:nth-of-type(2) {
	background-color: hsl(var(--color-cat-h), var(--color-cat-s), calc(var(--color-cat-l) + 8%), 0.6);
}
.portrait-design .design-stats-02 .graph.percentage .grade:nth-of-type(3) {
	background-color: hsl(var(--color-cat-h), var(--color-cat-s), calc(var(--color-cat-l) + 6%));
}
.portrait-design .design-stats-02 .graph.percentage .grade:nth-of-type(4) {
	background-color: hsl(var(--color-cat-h), var(--color-cat-s), calc(var(--color-cat-l) - 10%), 0.7);
}
.portrait-design .design-stats-02 .graph.percentage .grade:last-child {
	background-color: hsl(var(--color-cat-h), var(--color-cat-s), calc(var(--color-cat-l) - 20%), 0.7);
	border-radius: 6px 20px 20px 6px;
	margin-right: 0;
}

.portrait-design .design-stats-02 .graph.percentage .grade .value {
	font-size: 10px;
	position: absolute;
	top: 0;
	left: 5px;
}

/* Caso 0% */
.portrait-design .design-stats-02 .graph.percentage .grade.value-0 {
	width: 2%;
}
.portrait-design .design-stats-02 .graph.percentage .grade.value-0 .value {
	top: 16px;
	left: -3px;
}

.portrait-design .design-stats-02 .graph.percentage .svg-container{
	top: -26px;
}

.portrait-design .design-stats-02 .survey--question-legend {
	width: calc(100% - 88px);
	display: flex;
	justify-content: space-between;
	height: 2px;
	background-color: hsl(var(--color-cat-h), var(--color-cat-s), var(--color-cat-l));
	margin: 12px 5px 40px 5px;
}

.portrait-design .design-stats-02 .survey--question-legend .marker {
	position: relative;
}

.portrait-design .design-stats-02 .survey--question-legend .marker::before {
	content: "";
	display: block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: hsl(var(--color-cat-h), var(--color-cat-s), var(--color-cat-l));
	position: absolute;
	top: -2px;
	left: -2px;
}

.portrait-design .design-stats-02 .survey--question-legend .marker:first-child::before {
	width: 9px;
	height: 9px;
	top: -4px;
	left: -4px;
}
.portrait-design .design-stats-02 .survey--question-legend .marker:last-child::before {
	width: 9px;
	height: 9px;
	top: -4px;
	left: -4px;
}

.portrait-design .design-stats-02 .survey--question-legend .marker .name {
	position: absolute;
	top: 11px;
	left: -25px;
	text-align: center;
	font-size: 7px;
	line-height: 8px;
	width: 50px;
}

/* Respuesta de tipo libre */
.portrait-design .design-stats-02 .survey--question-text {
	margin-top: 12px;
	padding-bottom: 2px;
	padding-left: 20px;
}
.portrait-design .design-stats-02 .survey--question-text:first-child {
	margin-top: 0;
}
.portrait-design .design-stats-02 .survey--question-text + .survey--question-text {
	margin-top: 3px;
}
.portrait-design .design-stats-02 .survey--question-result + .survey--question-text {
	margin-top: 20px;
}

.portrait-design .design-stats-02 .survey--question-text .subtitle {
	font-size: 9px;
	margin-bottom: 3px;
}

.portrait-design .design-stats-02 .survey--question-text .caption {
	font-family: "Roboto Mono", sans-serif;
	font-size: 10px;
	line-height: 13px;
	margin-bottom: 3px;
}

.portrait-design .design-stats-02 .survey--question-text .user {
	display: block;
	font-size: 9px;
	text-decoration: underline;
	margin-bottom: 3px;
}

.portrait-design .design-stats-02 .survey--question-text .question {
	display: block;
	font-family: Roboto, sans-serif;
	font-size: 11px;
	line-height: 12px;
}

.portrait-design .design-stats-02 .survey--question-text .container {
	padding: 4px 8px;
	background-color: hsl(var(--color-cat-h), var(--color-cat-s), 92%, 0.7);
	position: relative;
}

.portrait-design .design-stats-02 .survey--question-text .answer {
	height: 130px;
	font-size: 11px !important;
	font-family: Roboto, sans-serif;
}

.portrait-design .design-stats-02 .survey--question-text .mini-spinner--white {
	position: absolute;
	left: calc(50% - 3rem);
	top: 45%;
}

.portrait-design .design-stats-02 .survey--question-text .mini-spinner--white::after {
	display: block;
}

.portrait-design .design-stats-02 .survey--question-text .icon {
	width: 21px;
	min-width: 21px;
	height: 21px;
	background-size: 35px;
	background-position: center;
	border-radius: 50%;
	margin: 3px 0 2px auto;
	outline: 2px solid #fff;
	cursor: pointer;
}

/* Mini menú para editar icono */
.portrait-design .design-stats-02 .survey--question-text .menu--edit-icon {
	background-color: #fff;
	position: absolute;
	right: 55px;
	bottom: 5px;
	padding: 4px 3px;
}

.portrait-design .design-stats-02 .survey--question-text .menu--edit-icon::after {
	content: '';
	display: block;
	width: 10px;
	height: 12px;
	background: url('data:image/svg+xml, <svg fill="%23fff" viewBox="0 0 100 120" xmlns="http://www.w3.org/2000/svg"><path d="M 0 0 L 100 60 L 0 120 z"/></svg>') no-repeat center;
	background-size: 10px;
	position: absolute;
	right: -10px;
	top: calc(50% - 6px);
}

.portrait-design .design-stats-02 .survey--question-text .menu--edit-icon .list {
	display: flex;
	align-items: center;
}

.portrait-design .design-stats-02 .survey--question-text .menu--edit-icon .icon {
	outline: none;
	margin: 0;
	margin-inline: 7px;
	width: 20px;
	min-width: 20px;
	height: 20px;
	background-size: 35px;
	transition: opacity .1s ease-in-out;
	cursor: pointer;
}

.portrait-design .design-stats-02 .survey--question-text .menu--edit-icon:hover .icon {
	opacity: .5;
}

.portrait-design .design-stats-02 .survey--question-text .menu--edit-icon .icon:hover {
	opacity: 1;
}

/* Extensión a más de una página */
.portrait-design .design-stats-02.cloned .h1 {
	display: none;
}
.portrait-design .design-stats-02.cloned .content {
	top: 65px;
}

/* Conclusiones */
/* CONCL 01 - Resultados grupos focales */
.portrait-design .design-concl-01 .h1 {
	position: absolute;
	left: 50px;
	top: 65px;
	text-decoration: underline;
}

.portrait-design .design-concl-01 .content {
	position: absolute;
	top: 200px;
	bottom: 50px;
	left: 50px;
	right: 50px;
	width: 400px;
}

.portrait-design .design-concl-01 .section {
	margin: 18px 0;
	position: relative;
}
.portrait-design .design-concl-01 .section:first-child {
	margin-top: 0;
}
.portrait-design .design-concl-01 .section:last-child {
	margin-bottom: 0;
}

.portrait-design .design-concl-01 .section .title {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
}

.portrait-design .design-concl-01 .section .icon {
	width: 30px;
	min-width: 30px;
	height: 30px;
	border-radius: 50%;
	background-color: hsl(var(--color-cat-h), var(--color-cat-s), var(--color-cat-l));
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 10px;
}

.portrait-design .design-concl-01 .section object {
	width: 25px;
	height: 25px;
}

.portrait-design .design-concl-01 .title .name {
	font-size: 12px;
	text-decoration: underline;
	max-width: 350px;
}

.portrait-design .design-concl-01 .section .delete {
	position: absolute;
	top: 5px;
	right: 5px;
	height: 15px;
	width: 15px;
	background: url("../images/icon--cross--black.svg") no-repeat center;
	background-size: 25px;
	opacity: 0.3;
	transition: opacity 0.1s ease-in-out;
	cursor: pointer;
}
.portrait-design .design-concl-01 .section .delete::before {
	content: "Eliminar";
	display: none;
	font-size: 10px;
	margin-left: -55px;
	margin-right: 20px;
	margin-top: 1px;
}
.portrait-design .design-concl-01 .section .delete:hover {
	opacity: 1;
}
.portrait-design .design-concl-01 .section .delete:hover::before {
	display: block;
}

.portrait-design .design-concl-01 .description {
	font-family: Roboto, sans-serif;
	color: #888;
	font-size: 11px;
	line-height: 13px;
}

.portrait-design .design-concl-01 .highlights {
	margin-top: 30px;
}

.portrait-design .design-concl-01 .highlights .subtitle {
	font-weight: 500;
	font-size: 12px;
}

.portrait-design .design-concl-01 .highlights .divider {
	color: hsl(var(--color-cat-h), var(--color-cat-s), var(--color-cat-l));
	font-size: 9px;
	width: 100%;
	height: 13px;
	margin-bottom: 10px;
}

.portrait-design .design-concl-01 .highlights .quote {
	font-family: Roboto, sans-serif;
	font-size: 11px;
	line-height: 13px;
	color: #888;
	margin-bottom: 20px;
}
.portrait-design .design-concl-01 .highlights .quote:last-child {
	margin-bottom: 0;
}

.portrait-design .design-concl-01 .highlights .user {
	margin-bottom: 5px;
	text-transform: uppercase;
}

/* Extensión a más de una página */
.portrait-design .design-concl-01.cloned .h1 {
	display: none;
}
.portrait-design .design-concl-01.cloned .content {
	top: 70px;
}

/* CONCL 02 - Análisis de resultados */
.portrait-design .design-concl-02 .h1 {
	position: absolute;
	left: 50px;
	top: 65px;
	text-decoration: underline;
}

.portrait-design .design-concl-02 .content {
	position: absolute;
	top: 200px;
	bottom: 50px;
	left: 50px;
	right: 50px;
	font-size: 11px;
	line-height: 13px;
}

.portrait-design .design-concl-02 .section {
	margin: 30px 0;
	position: relative;
}
.portrait-design .design-concl-02 .section:first-child {
	margin-top: 0;
}
.portrait-design .design-concl-02 .section:last-child {
	margin-bottom: 0;
}

/* Ítem solo texto en 2 columnas */
.portrait-design .design-concl-02 .section.text {
	font-family: Roboto, sans-serif;
	column-count: 2;
	-moz-column-count: 2;
	column-gap: 40px;
	column-fill: balance;
}

.portrait-design .design-concl-02 .text p {
	margin: 10px 0;
	-webkit-column-break-inside: avoid;
	-webkit-backface-visibility: hidden;
}
.portrait-design .design-concl-02 .text p:first-child {
	margin-top: 0;
}
.portrait-design .design-concl-02 .text p:last-child {
	margin-bottom: 0;
}

/* Ítem categoría */
.portrait-design .design-concl-02 .section.category {
	width: 400px;
}

.portrait-design .design-concl-02 .category .title {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
}

.portrait-design .design-concl-02 .category .icon {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background-color: hsl(var(--color-cat-h), var(--color-cat-s), var(--color-cat-l));
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 10px;
}

.portrait-design .design-concl-02 .category object {
	width: 25px;
	height: 25px;
}

.portrait-design .design-concl-02 .category .title .name {
	font-size: 12px;
	text-decoration: underline;
}

.portrait-design .design-concl-02 .category .description {
	font-family: Roboto, sans-serif;
	color: #888;
	font-size: 11px;
	line-height: 13px;
}

.portrait-design .design-concl-02 .delete {
	position: absolute;
	top: 5px;
	right: 5px;
	height: 15px;
	width: 15px;
	background: url("../images/icon--cross--black.svg") no-repeat center;
	background-size: 25px;
	opacity: 0.3;
	transition: opacity 0.1s ease-in-out;
	cursor: pointer;
}
.portrait-design .design-concl-02 .delete::before {
	content: "Eliminar";
	display: none;
	font-size: 10px;
	margin-left: -55px;
	margin-right: 20px;
	margin-top: 1px;
}
.portrait-design .design-concl-02 .delete:hover {
	opacity: 1;
}
.portrait-design .design-concl-02 .delete:hover::before {
	display: block;
}
.portrait-design .design-concl-02 .text .delete {
	font-family: "Roboto Mono", sans-serif;
	top: -20px;
	right: -15px;
}

/* Extensión a más de una página */
.portrait-design .design-concl-02.cloned .h1 {
	display: none;
}
.portrait-design .design-concl-02.cloned .content {
	top: 70px;
}

/* CONCL 03 - Propuestas de mejora */
.portrait-design .design-concl-03 .h1 {
	position: absolute;
	left: 50px;
	top: 65px;
	text-decoration: underline;
}

.portrait-design .design-concl-03 .content {
	position: absolute;
	top: 200px;
	bottom: 50px;
	left: 50px;
	right: 50px;
	font-size: 11px;
	line-height: 13px;
}

.portrait-design .design-concl-03 .section {
	margin: 30px 0;
	width: 400px;
	position: relative;
}
.portrait-design .design-concl-03 .section:first-child {
	margin-top: 0;
}
.portrait-design .design-concl-03 .section:last-child {
	margin-bottom: 0;
}

/* Ítem propuesta de mejora */
.portrait-design .design-concl-03 .section .number {
	font-size: 30px;
	height: 30px;
	font-weight: 100;
	display: flex;
	align-items: center;
	margin-bottom: 3px;
}

.portrait-design .design-concl-03 .section .headline {
	padding: 2px 3px;
	font-size: 11px;
	line-height: 15px;
}

.portrait-design .design-concl-03 .section .divider {
	color: hsl(var(--color-cat-h), var(--color-cat-s), var(--color-cat-l));
	font-size: 9px;
	width: 100%;
	height: 13px;
}

.portrait-design .design-concl-03 .section .text {
	font-family: Roboto, sans-serif;
	color: #888;
	font-size: 11px;
	line-height: 13px;
	padding: 2px 3px;
}

.portrait-design .design-concl-03 .delete {
	position: absolute;
	top: 5px;
	right: 5px;
	height: 15px;
	width: 15px;
	background: url("../images/icon--cross--black.svg") no-repeat center;
	background-size: 25px;
	opacity: 0.3;
	transition: opacity 0.1s ease-in-out;
	cursor: pointer;
}
.portrait-design .design-concl-03 .delete::before {
	content: "Eliminar";
	display: none;
	font-size: 10px;
	margin-left: -55px;
	margin-right: 20px;
	margin-top: 1px;
}
.portrait-design .design-concl-03 .delete:hover {
	opacity: 1;
}
.portrait-design .design-concl-03 .delete:hover::before {
	display: block;
}

.portrait-design .design-concl-03 .text .delete {
	font-family: "Roboto Mono", sans-serif;
	top: -20px;
	right: -15px;
}

/* Extensión a más de una página */
.portrait-design .design-concl-03.cloned .h1 {
	display: none;
}
.portrait-design .design-concl-03.cloned .content {
	top: 70px;
}

/* Otros */
/* OTHER 01 */
.portrait-design .design-other-01 .photo {
	height: 842px;
	width: 595px;
	min-width: 595px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	position: relative;
}

.portrait-design .design-other-01 .photo img {
	height: 100%;
	width: auto;
}

.portrait-design .design-other-01 .photo .actions {
	position: absolute;
	top: 10px;
	right: 10px;
	display: flex;
	justify-content: flex-end;
}

.portrait-design .design-other-01 .photo .actions button {
	height: 30px;
	width: 30px;
	margin-left: 10px;
	opacity: 0.5;
	transition: background-color 0.1s ease-in-out;
}
.portrait-design .design-other-01 .photo .actions button:first-child {
	margin-left: 0;
}

.portrait-design .design-other-01 .photo .actions button.edit {
	background: url("../images/icon--pen--black.svg") no-repeat center;
	background-size: 25px;
}
.portrait-design .design-other-01 .photo .actions button.delete {
	background: url("../images/icon--cross--black.svg") no-repeat center;
	background-size: 25px;
}

.portrait-design .design-other-01 .photo .actions button:hover {
	background-color: #fff;
	opacity: 1;
}

.portrait-design .design-other-01 .photo .empty {
	display: none;
}

/* Al no haber imagen */
.portrait-design .design-other-01.no-photo {
	display: flex;
	align-items: center;
	justify-content: center;
}

.portrait-design .design-other-01.no-photo .photo {
	background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='black' stroke-width='2' stroke-dasharray='24%2c 20' stroke-dashoffset='2' stroke-linecap='round'/%3e%3c/svg%3e");
	opacity: 0.2;
	height: 742px;
	min-width: 495px;
	width: 495px;
	transition: opacity 0.1s ease-in-out;
	cursor: pointer;
}
.portrait-design .design-other-01.no-photo .photo:hover {
	opacity: 1;
}

.portrait-design .design-other-01.no-photo .photo img,
.portrait-design .design-other-01.no-photo .photo .actions {
	display: none;
}

.portrait-design .design-other-01.no-photo .photo .empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	background-color: transparent;
}

.portrait-design .design-other-01.no-photo .photo .empty .icon {
	height: 30px;
	width: 30px;
	margin-bottom: 10px;
	background: url("../images/icon--camera--black.svg") no-repeat center;
	background-size: 25px;
}