/**************************************************************/
/* 	Archivo: style.css   
/* 	Creado para: https://nyda.mx:443/   
/* 	Creado en: Desarrollado en: NyDa Development tool 5.1 http://www.nyda.mx   
/* 	Creado por: Durrutia   
/**************************************************************/

.report{
    max-width:1400px;
    margin:auto;
    padding:40px;
    h3{
    	margin-top:0px;
    }
}
.header{
	display:flex;
	align-items: center;
	gap:10px;
	margin-bottom:10px;
	justify-content: space-between;
	.title{
		display:flex;
	align-items: center;
	gap:10px;
		.logoNyDa{
			min-width:32px;
		}
		.name{
			color:#000;
			font-weight:bold;
			font-size:1.5em;
		}
	}
	h1{
		text-align:right;
		color:#000;
		font-size:1.6em;
	}
}
.hero{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap: wrap;

    background:white;
    border-radius:18px;
    padding:20px;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
    .business{
    	display:flex;
    	align-items: center;
    	gap:10px;
    	.icon{
    		border-radius:50%;
		background:#f2f5f9;
    		padding:5px;
    		fill:#9eaac2;
    	}
    }
    .heroRight{
    	display:flex;
    	align-items: center;
    	.evalTitle{
    		color: var(--color-primary);
    	}
    	p{
    		font-size:0.8em;
    		max-width:180px;
    	}
    }

}

.hero h1{

    margin:0;

    font-size:34px;

}

.website{

    color:#666;

    margin-top:10px;

}

.date{

    margin-top:8px;

    color:#999;

}
.donut {
    width: 100%;
    max-width: 180px;
    min-width: 60px;
    margin: auto;
    display: block;
	.ring-bg {
	    fill: none;
	    stroke: #CCC;
	    stroke-width: 10;
	}
	.ring {
	    fill: none;
	    stroke: #22c55e;
	    stroke-width: 10;
	    stroke-linecap: round;
	    transform: rotate(-90deg);
	    transform-origin: center;
	    transition: stroke-dasharray 1.2s ease;
	}
	.donut-text{
		font-size:18px;
		font-weight:bold;
		fill:#22c55e;
	}
	.text-mini{
		font-size:12px;
		font-weight:normal;
		fill:#333;
	}
}

.scoreValue{

    font-size:2em;

    font-weight:bold;

    color:#32c56d;

}

.scoreText{

    color:#888;

}

.cards{

    display:flex;
    gap:18px;
    margin-top:30px;
    flex-wrap: wrap;
    justify-content: space-between;
    > div{
    	flex-grow: 1;
    	display:flex;
    	background:white;
	padding:15px;
	border-radius:16px;
	box-shadow:0 5px 18px rgba(0,0,0,.06);
	gap:10px;
	text-align:right;
	justify-content: space-between;
	svg{
		border-radius:50%;
		background:#f2f5f9;
    		padding:5px;
    		fill:#FFF;
	}
	span{
	    color:#333;
	}
	h2{
	    margin-top:15px;
	    font-size:34px;
	}	
    }
    .cardO > svg{
	background:#206bee;
    }
    .cardS > svg{
	background:#805dcd;
    }
    .cardH > svg{
	background:#fdad1b;
    }
    .cardI > svg{
	background:#4ca347;
    }
}

.section{

    margin-top:30px;

    background:white;

    padding:30px;

    border-radius:16px;

}

.progress{

    display:grid;

    grid-template-columns:120px 1fr 60px;

    gap:20px;

    align-items:center;

    margin:18px 0;

}

.bar{

    height:12px;

    background:#eceff1;

    border-radius:8px;

}

.fill{

    height:100%;

    background:#32c56d;

    border-radius:8px;

}

.orange{

    background:#f5a623;

}

.red{

    background:#e74c3c;

}

.twoColumns{

    display:flex;
    gap:30px;
    margin-top:30px;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
}

.panel,.beneficios,.next{
    display:flex;
    background:white;
    padding:30px;
    border-radius:16px;
    font-size:0.9em;
    flex-grow: 1;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: column;
    align-content: center;
	table{
	    max-width:500px;
	    border-collapse:collapse;
	    border-radius:15px;
	}
	th{
	    text-align:left;
	    padding:10px;
	    border-bottom:2px solid #eee;
	    background:#f9f9fb;
	    font-weight:normal;
	    text-transform: uppercase;
	}
	
	td{
	    padding:10px;
	    border-bottom:1px solid #eee;
	    h4,p{
	    	margin:0px;
	    	padding:0px;
	    }
	    h4{
		color:#333;
	    }
	}
	ol, ul{
		max-width:500px;
		list-style-type: none;
		padding:0px;
		margin:0px;
		margin-left:24px;
		h4,p{
		    margin:0px;
		    padding:0px;
		}
		h4{
		    color:#333;
		    a{
		      	font-family: var(--font-secondary);
			font-weight: var(--font-weight-bold);
			text-decoration:none;
		    }
		}
		li{
		    border-bottom:1px solid #eee;
		}
	}
	ol{
		counter-reset: my-counter; 
		margin-left:28px;
		li{
			counter-increment: my-counter;
		}
	}
	ul li::before {
	  content: "✓";
	  margin-left:-24px;
	  position: absolute;
	  color: RGB(255, 255, 255,1);
	  font-weight: bold;
	  background:#27ae60;
	  width:18px;
	  height:18px;
	  border-radius:50%;
	  text-align:center;
	}
	ol li::before {
	  content: counter(my-counter); /* Muestra el número */		  
	  margin-left:-28px;
	  position: absolute;
	  color: RGB(255, 255, 255,1);
	  font-weight: bold;
	  background:#206bee;
	  background-position:20px;
	  width:22px;
	  height:22px;
	  border-radius:50%;
	  line-height:22px;
	  text-align:center;
	}
}

.ask{
    	display:flex;
    	background:#e7eefb;
	padding:15px;
	border-radius:16px;
	box-shadow:0 5px 18px rgba(0,0,0,.06);
	gap:10px;
	align-items: center;
	font-size:0.9em;
	div{
		max-width:450px;
	}
	svg{
		border-radius:50%;
    		padding:5px;
    		fill:#206bee;
    		min-width:32px;
	}
	h4,p{
	    margin:0px;
	    padding:0px;
	}
	h4{
	    color:#333;
	}
	a{
		background:#206bee;
		border-radius:8px;
		color:#FFF;
		text-align:center;
		white-space: nowrap;
		text-wrap: nowrap;
		padding:10px 15px;
		text-decoration:none;
		transition: background-color var(--transition-normal), color var(--transition-fast);	
	}
	a:hover{
		background:var(--color-secondary);
	}
}
.mark{
    	display:flex;
	padding:15px;
	border-radius:16px;
	gap:10px;
	align-items: center;
	font-size:0.9em;
	margin-left: auto;
	svg{
		border-radius:50%;
    		padding:5px;
    		fill:#206bee;
    		min-width:32px;
	}
	h4,p{
	    margin:0px;
	    padding:0px;
	}
	h4{
	    color:#333;
	}
}
table{

    width:100%;

    border-collapse:collapse;

}

th{

    text-align:left;

    padding:14px;

    border-bottom:2px solid #eee;

}

td{

    padding:14px;

    border-bottom:1px solid #eee;

}

.badge{

    display:inline-block;

    padding:5px 12px;

    border-radius:20px;

    color:white;

    font-size:12px;

}

.high{

    background:#d63031;

}

.medium{

    background:#f39c12;

}

.low{

    background:#27ae60;

}
.critical{

    background:#810000;

}

.footerPanel{

    margin-top:30px;

    background:white;

    padding:30px;

    border-radius:16px;

}

ol{

    line-height:34px;

}