/*====================================== CAMBIOS PARA LOS REPORTES ==============================================*/


/**
PROSPECT EN REPORTES

*/

:root {
	--clr-resal-4c: #39b5df !important;
}

.geo-preload {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	z-index: 1000;
	/*background: #ff000040;*/
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	opacity: 1;
  
	& .line-preload {
	  position: relative;
	  animation: rotacion 14s linear infinite;
		
	  & .cont-line {
		position: absolute;
	  }
	  & .line {
		/*box-shadow: 0 0px 6px #0ff7;
		box-shadow: 0 4px 2px #0ff7;*/
		box-shadow: 0 4px 2px #0ff7, -39px 4px 6px #4cb0ff4f;	
		position: absolute;
		bottom: 10px;
		height: 2px;
		width: 4px;
		margin-bottom: 10px;
		background-color: #fff;
		transform-origin: bottom;
		animation: alargar 1.2s ease infinite;
	  }
	}
  }
  
  @keyframes alargar {
	0%,
	60%,
	100% {
	  transform: scaleY(2);
	}
	80% {
	  transform: scaleY(5);
	}
  }
  @keyframes rotacion {
	0%
	 {
	  transform: rotate(0deg);
	}
	100% {
	  transform: rotate(360deg);
	}
  }

/* deshabilita la interacción con los mapas */
.svg_resumen_map {
	pointer-events: none;
	
	& .legend text {
		fill: #000 !important;
	}
}

.no-disponible {
	width: 90px;
	height: 90px;
	border-radius: 50%;
	background: #fff1;
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	box-shadow: 0 0 10px #fff6;
	&:before {
		content: "EN CONSTRUCCION";
		text-align: center;
		position: absolute;
		line-height: 0.8rem;
		top: 18%;
		left: 50%;
		opacity: 0.4;
		transform: translateX(-50%);
		font-size: 0.6rem;
	}
	&:after {
		content: "\f013";
		font-family: "Font Awesome 6 Free";
		font-weight: 900;
		text-align: center;
		position: absolute;
		top: 43%;
		font-size: 2rem;
		opacity: .14;
		animation: spinGear 3s infinite linear;
	}
}

@keyframes spinGear {
	from {	transform: rotate(0deg);}
	to {transform: rotate(360deg);}
}

@media screen {
	#rbody #cuadroTexto {
		columns: 260px 2;
		column-rule: 1px dotted #555;
		gap: 2em;
		page-break-before: always;
	}
}

.brilloHover:hover {
	filter: brightness(1.1);
}

table.ranking_table thead {
	position: sticky;
	top: 0;
	z-index: 1;
	
	& tr td:not(:first-child) {
	    text-align: center;
	}
}

#rbody {
	table * {
		background-color: initial;
		border: initial;
	}

	& tr.ranking_table_row {
		& td {
			color: #333;
			background: #00000010;
		}
		& td:not(:first-child) {
			color: white;
			text-align: center;
			text-shadow: 0 0 50px #000000, 0 0 16px black;
		}
	}
	
	& .report-secciones {
		& ul li {
			padding-inline: 8px !important;
			background: #fff1;
			margin-bottom: 6px;
			transition: background .4s ease;
		}
		& .titulo {
			text-align: center;
			margin-block: 10px;
			color: white;
	    		font-weight: bold;
		}
	}
	& .imagen img:hover {
		box-shadow: 0 0 0px 2px var(--clr-princ-2);
		cursor: pointer;
	}
	& .prospect_component_table {
		& .col-0 {
			min-width: 34px;
			margin-right: 5px;
    			text-align: center;
			padding-inline: initial;
		}
		& .col-1, .col-2, .col-3, .col-4 {
			/*display: flex;
    			align-items: center;*/
		}
		& .description {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 5px;
			color: #0687c7;
			color: var(--clr-princ-4);
			transform: scale(2);
			transition: transform .2s ease;
			margin-left: auto;
		}
	}
	
	& .prospect_component_ranking_table {
		& thead td {
			font-size: 1rem;
			font-weight: 600;
			background: var(--clr-neutro-7) !important;
            		color: white;
		}
		
		& tbody { 
			& td {
				border-radius: 4px;
			}
			
			& tr:nth-child(-n + 5) td {
				font-weight: bold;
				background: #00000020;
			}
		}
	}
	& .prospect_component_ranking_preview svg {
		width: 500px;
	}
	#rep_tabla_resumen_clusters {
		background: #669dbd;
        	padding: 20px 10px;
        	border-radius: 8px;
		& .nombre_tabla {
			color: white;
		}
		& tbody td {
		    color: white;
			
			&:first-child {
				font-size: .9rem;
				font-weight: bold;
			}
		}
	}
}

.prospect_component {
	width: 100%;
}

.prospect_component_table {
	
	margin: 0px 10px 10px 0px; 

	& .prospect_component_indicator {
		gap: 10px;
		flex-wrap: nowrap;
		align-items: center;
		padding: 2px 10px;
		border-radius: 6px;
		margin-block: 4px;
		background-color: color-mix(in srgb, var(--clr-princ-4) 20%, transparent);
        	border: 2px solid var(--clr-princ-4);

		& > div {	
			font-size: .9rem;
			text-wrap: auto;
			text-align: left !important;
			line-height: 1rem;
			color: #0c627f;
			font-weight: normal;
			text-overflow: ellipsis;
			text-align: left;
			
			overflow: hidden;
			display: flex;
            		align-items: center;
		}

		& .drag,
		.weight,
		.is_checked {
			text-align: center;
			flex: 0 0 34px;
			height: 34px;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: var(--clr-princ-4);
            		color: white;
			transition: transform .4s ease;
		}

		& .weight_-1 {
			transform: rotate(180deg);
		}
			
		

		&.is_checked_true {
			font-weight: bold;	
			font-style: normal;

			& i.fa-xmark {
				display: none;
			}
		}

		&.is_checked_false {
			font-weight: normal;	
			/*font-style: italic;*/

			& > div {
				opacity: .5;
			}

			& i.fa-check {
				display: none;
			}
		}

		&.is_checked_false .badge-success {
			display: none;
		}

		&.is_checked_true .badge-secondary {
			display: none;
		}

		&.weight_uniform .weight_linear {
			display: none;
		}

		&.weight_linear .weight_uniform {
			display: none;
		}
		& .country, .topic {
			flex: 4;
		}
		& .indicator_1 {
			flex: 12;
		}
		& .period {
			flex: 2;
		}
	}	

	& .prospect_component_ranking_table {
		max-height: 500px;
		overflow-y: scroll;

		& .indicator_index {
			width: 50px !important;
		}
		& .indicator_score {
			width: 50px !important;
		}

		& .is_checked_false .badge-success {
			display: none;
		}

		& .is_checked_true .badge-secondary {
			display: none;
		}

		& .prospect_ranking {
			font-weight: bold;
			/*font-size: 15px !important;*/
			text-align: center !important;
		}

	} 
}


.prospect_component_indicator .drag {
	/*position: absolute;
	transform: rotate(90deg);
	top:30px;
	left: 7px;
	opacity: 0;
	*/
	&:hover {
	  cursor: grab;
	}	
  }
  
  .prospect_component_indicator .drag {
	opacity: 0.9;
	transition: opacity 0.5s ease;
  }


/* franja superior para indicar 'DESARROLLO' */
.desarrollo {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 30px;
	background-color: #ff0000aa;
	text-align: center;
	line-height: 30px;
	color: #fff;
	font-size: 1rem;
	z-index: 9999;
	transform: translate(calc(-50% + 40px), calc(-50% + 40px)) rotate(-45deg);
	user-select: none;

	&:after {
		content: "DESARROLLO";
	}
}

.shapeDrawX,
.shapeDrawX svg {
	width: 540px;
	height: 540px;
}

#rbody {
	min-height: 800px;
	background-color: #FFFFFF;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-bottom: 100px;
	border-radius: 20px;
	margin-block: 20px;

	& h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	table {
		margin-bottom: 14px;
		font-family: "Open Sans", sans-serif;
		font-weight: 400;
		font-style: normal;
		color: #444;
	}

	& h1 {
		font-size: 2.5rem;
	}

	& h2 {
		font-size: 1.8rem;
	}

	& h3 {
		font-size: 1.5rem;
	}

	& h4 {
		font-size: 1.2rem;
	}

	& h5 {
		font-size: 1rem;
	}

	& h6 {
		font-size: .9rem;
	}

	& .seccion_reporte {
		margin-bottom: 20px;
		padding-inline: 15px;

	& .recuadro_reporte {
		border-radius: 1.5rem;
		padding-top: 30px;
		padding-bottom: 30px;
		background: #00000010;
    		border: 2px solid #00000011;
	}

	/* Es del texto que se carga del wizard... borrar si cambia o no se usa */
	& div#cuadroTexto img,
	& div#cuadroTexto em {
		width: auto;
		height: auto;
		max-width: 100%;
		display: block;
		margin: auto;
		text-align: center;
	}

	& svg {
		margin: 0 auto;
		/*filter: drop-shadow(8px 6px 3px rgba(0, 0, 0, 0.2));*/
	}

	& .pais {
		background: var(--cel-7);
		color: white;
	}

	& #content_resumen_map {
		/* centra los maps */
		display: flex;
		justify-content: center;
	}

	& .svg_resumen_map {
		width: auto !important;
	}

	& table {
		letter-spacing: initial;

		& td {
			padding: 8px;
			color: #333;
			font-size: inherit;
			letter-spacing: inherit;
			position: relative;
			/*width: 50%;*/
			
			&:not(:first-child) {
				text-align: center !important;
			}
		}

		& thead {
			font-size: 1.1rem;
			position: sticky;
			top: 0;
			background: white;
			z-index: 1;

			& td,
			.nombre_clusters td {
				text-align: center;
				background-color: #ffffff80;
			}

			/* bordes tabla */
			& tr:first-child td:first-child {
				border-top-left-radius: 6px;
				min-width: 190px;
				width: 100%;
			}

			& tr:first-child td:last-child {
				border-top-right-radius: 6px;
			}
		}

		& tbody {
			font-size: .8rem;

			& tr:nth-child(odd) {
				background-color: #00000010;
				color: #0009;
			}

			& tr:nth-child(even) {
				background-color: #ffffff30;
				color: #000000A0;
			}

			/* bordes tabla */
			& tr:last-child td:first-child {
				border-bottom-left-radius: 6px;
			}

			& tr:last-child td:last-child {
				border-bottom-right-radius: 6px;
			}
		}
	}
}

.seccion_detalle_niveles .seccion_reporte > div > .col-md-12 {
	border-radius: 1.5rem;
	background: #ffffff;
	padding-block: 20px;
	padding-inline: 30px;
	margin: 10px;
	width: calc(100% - 20px);
}


/* Alineaciones dentro de la tabla */
#rbody table thead tr td:last-child,
#rbody table thead tr td.nombre_total,

#rbody table tbody tr td:last-child,
#rbody table tbody tr td {
	text-align: right;
}

#rbody table thead tr td:first-child,

#rbody table tbody tr td:first-child,
#rbody table tr td.nombre_indicator,
#rbody table thead tr td.nombre_prov,
#rbody table tr td.nombre_padre,
#rbody table tr td.valor_padre {
	text-align: left;
}

#rbody table tr.nombre_clusters td {
	text-align: center !important;
}

/* Color textos de reportes */
#rbody .grafico_treemap text {
    fill: #444444 !important;
    text-shadow: none;
}
#rbody .grafico_treemap .treemap_data text {
    fill: white !important;
}

#rbody svg.treemap {
    transform: scale(.8);
}

.colapsar {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	width: 100%;
	padding: 6px 10px;
	color: #666;
	z-index: 1000;

	&>div:first-child {
		font-size: .8rem;
	}

	& i {
		font-size: .9rem;
		transition: transform 0.3s ease;

		&.activo {
			font-size: 1.2rem;
			cursor: pointer;
		}

		&.fa-rotate-180 {
			transform: rotate(180deg);
		}
	}
}


.borde-inferior {
	/* renglón al colapsar */
	border-bottom: 1px solid #dddddd;
	margin-bottom: 20px;
}

.ocultar {
	display: none;
}

.semitransp {
	opacity: .5;
	
	& i.fa-print:before {
		    opacity: .5;
	}
	& i.fa-print:after {
	    content: '\58';
	    font-size: 1.2rem;
	    position: absolute;
	    width: 22px;
	    height: 3px;
	    top: -2px;
	    left: 0px;
	    color: #4f4f4f;
	}
}

/* ------------------- PRINT ------------------- */
@media print {
	.no-imprimir {
		display: none !important;
	}

	.seccion_reporte.seccion_detalle_niveles .row .seccion_reporte {
		margin-top: 10rem;
	}

	/*#rbody .grafico_treemap {
		position: relative;
		display: block;
		width: 50%;
		
		& .content {
			flex: initial;
			display: block;
			max-width: initial;
			min-width: initial;
			width: 100%;
			margin: 0 auto !important;
		}
	}*/
	
}
			
/*#rbody .grafico_treemap {
		position: relative;
		gap: 20px;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	
	& .content {
		max-width: 500px;
		min-width: 360px;
		flex: 1;
	}
}*/

.cluster_bar svg {
	border-radius: 4px;
	box-shadow: 0px 0px 10px 0px rgb(125 125 125 / 50%);
}

/*abrir reporte boton*/
td.nombre_reporte * {
	font-size: 1.5rem;
	color: white;
}

#resumen_texto * {
	font-size: 1.1rem;
	color: #444;
}

#tbody_clusters {

	& tr {
		transition: background .4s ease;

		&:nth-child(odd):not(:first-child):hover {
			background: #00000073 !important;
		}
		&:nth-child(even):hover {
			background: #ffffff17 !important;
		}

		&:first-child {
			background-color: rgb(35, 95, 117) !important;
			
			& td {
				color: white !important;
				padding-top: 12px;
				padding-bottom: 12px;
				border-radius: 8px;
				/*box-shadow: inset 0 0 0px 1px rgb(74 159 185);*/
			}
		}
	}
}

.seccion_reporte {
	
	& table {
		display: block;
		max-height: 500px;
		overflow-y: scroll;
		border-collapse: inherit;
	}
	
	& .label tspan {
		fill: #333;
	    	font-size: .8rem;
	}
	
	& .centro {
		display:none;
	}
	
	& .datosPais .grafica {
		background: linear-gradient(var(--clr-neutro-9), var(--clr-neutro-8));
		color: black !important;
		& * {
			text-shadow: none !important;
		}
	}
	
}

#rep_tabla_resumen_clusters table {
	max-height: 100%;
}

.infoTexto {
	padding: 0;
	
	& h1:first-child {
	    background: #03A9F4;
	    color: white;
	    padding: 20px 10px;
	    border-radius: .5rem;
	}
}

#rbody {
	
	& svg path.type_cluster {
		stroke: #000;
		stroke-width: 0.3;
	}

	& ::-webkit-scrollbar-thumb {
		background: #888888;
		border-radius: 4px;
	}

	& ::-webkit-scrollbar-track {
		background: #0002;
		border-radius: 4px;
	}

	& .row {
		margin-right: 0;
		margin-left: 0;
	}
}

.estructura_ficha .row {
	margin: 0;
	
	& > div {
	    flex: 1 1 50%;
	    min-width: 380px;
	    padding: 0;
		
		& svg path {
		    stroke: #888888;
		}
	}
}

.aglomeraciones_ficha {
	display: flex;
	flex-direction: column;
	gap: 20px;

	& .row {
		gap: 10px;
		& > div:first-child {
			flex: 1;
			padding: 0;
    			min-width: 330px;
			overflow: hidden;
		}
		& > div:last-child {
			flex: 3;
    			min-width: 330px;
		}
	}
}

#rbody thead td {

	& button {
		width: 100%;
		text-align: left;
		padding-left: 0px;
		padding-right: 14px;
	}
}

td.orden_asc,
td.orden_desc {
	position: relative;
	color: black;
	background: white !important;
}

td.orden_asc>button:after {
	content: '\f0d8';
}

td.orden_desc>button:after {
	content: '\f0d7';
}

td.orden_asc>button:after,
td.orden_desc>button:after {
	position: absolute;
	top: .9rem;
	right: 6px;
	font-family: 'FontAwesome';
	font-size: 1rem;
	color: #555;
}



/* quizas esto de mostrar el icono se puede hacer con js como el resto, pero dejo el estilo
td.ordenar_columna:not(.orden_asc):not(.orden_desc):after {
	content: '\f0d7';
	font-family: 'FontAwesome';

	font-size: 14px;
	color: #0003;
	position: absolute;
	top: 50%;
	right: 0px;
	transform: translateY(-50%);
} */


.datos-item {
	background-image: linear-gradient(120deg, #1b1b1b, #151515);
	padding: 6px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0px;
	font-size: .9rem;
	width: 100%;
	border: 1px solid #111;
	border-radius: 10px;
	box-shadow: 0 4px 10px #0006;

	& .columna {
		padding: 8px 12px;
		color: #aaa;
		display: flex;
		flex-direction: column;
		line-height: normal;
		gap: 6px;
		flex: 1;
		min-width: 270px;
		border-width: 0 1px 0 0;
		border-style: dotted;
		border-color: #666;

		&:last-child {
			border-width: 0;
		}

		&.chica {
			flex: none;
			min-width: 100px;
		}

		& .linea {
			width: 100%;
			height: 1px;
			background: var(--blc10);
			margin: 3px 0;
		}

		& .datos-fila {
			width: 100%;
			display: flex;
			gap: 8px;
			align-items: center;
			justify-content: space-between;

			& .datos-txt {
				display: flex;
				white-space: nowrap;
				overflow: hidden;
				align-items: center;

				& strong {
					margin-right: 7px;
					color: #ddd;
				}
			}

			& .datos-btn {
				border-radius: 4px;
				background: #0091c1;
				padding: 3px 6px;
				min-width: 70px;
				display: flex;
				justify-content: center;
				align-items: center;
				gap: 6px;
				user-select: none;

				&.chico {
					min-width: 20px;
				}
			}

			& .datos-ico {
				width: 17px;
				height: 17px;
				background: var(--none);
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;

				& i {
					font-size: 0.6rem;
				}
			}

			& .datos-btn,
			.datos-ico {
				transition: filter 0.3s ease;
				cursor: pointer;
				color: white;

				&:hover {
					filter: brightness(1.1);
				}
			}
		}
	}
}

.st-checked {
	background: var(--checked) !important;
}

.st-none {
	background: var(--none) !important;
}

.st-alert {
	background: var(--alert) !important;
	animation: alerta 2s linear infinite;
}

@keyframes alerta {

	0%,
	100% {
		box-shadow: 0 0 8px 2px transparent;
	}

	50% {
		box-shadow: 0 0 8px 2px var(--alert);
	}
}

/* MAPA */
.contenedor {
	background: #0004;
	width: 100%;
	height: 100%;
	min-height: 140px;
	overflow: hidden;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}

.contenedor-imagen {
	position: absolute;
	/*top: 50%;*/
	/*left: 50%;*/
	transition: all 0.1s ease-out;

	& img {
		transform: translate(-50%, -50%) scale(.4);
		transition: transform 0.5s ease;
	}

	& svg {
		width: 180px;
	}
}

.contenedor:hover .contenedor-imagen img {
	transform: translate(-50%, -50%) scale(1);
}

.axisLabelSector {
	& text.label tspan {
		font-size: 8px !important;
	}
	& circle {
	    fill: white;
	}
}
.spider_radar circle:nth-child(5) {
    display: none;
}