@charset "utf-8";
/* CSS Document */
body{
	margin: 0;
	font-family: 'Roboto', sans-serif;
	color: #81878B;
	font-size: 20px;
	background-image: url("../images/patron-fondo2@300x.png");
}

header{
	height: auto;
	display:block;
	margin: 0;
	background-color: #fff;
	padding: 10px;
}

.portada{
	padding: 15px;
	background-color: #9d2148;
	display: flex;
	justify-content: center;
	align-items: center;
}
.img-portada{
	display: inline-flex;
	justify-content: flex-end;
}
.txt-portada{
	display: inline-block;
	font-size: 40px;
}

.introduccion{
	background-color: #FFFAE9;
	margin: 20px 10%;
	padding: 30px;
	box-shadow: 0px 4px 8px;
}
a{
	color:#18b3a3;
}

.sobre-proaire{
	margin: 2% 20%;
}
.item1{
	font-weight: bold;
	color: #FFFAE9;
	text-align: left; 
	font-size: 25px;
	background-color: #083b51; 
	border-radius: 20px 0 0 20px; 
	padding: 20px 30px; 
	width: 25%;
}
.item2{
	font-size: 20px;
	text-align: justify;
	background-color: #FFFAE9; 
	border-radius: 0 20px 20px 0; 
	padding: 30px;
	width: 80%; 
	border: solid 3px #083b51;
	transition: transform 0.3s;
}
.item2:hover{
	background-color: #FFFAE9;
	transform: scale(1.03);
}

.contenido{
	margin: 0 8%;
}

/*PESTAÑAS INTERACTIVAS*/
.tabs {
	display: flex;
    cursor: pointer;
}
.tab {
	padding: 10px 20px;
    border-bottom: none;
    margin-right: 15px;
	border-radius: 10px 10px 0 0;
	font-size: 22px;
	background-color: #b83250;
	color: #fff;
}
.tab.active {
    font-weight: bold;
	background-color: #9B2347;
}
.tab-content {
    display: none;
    padding: 15px 20px;
	text-align: justify;
	font-size: 20px;
	border-radius: 0 15px 15px;
}
.tab-content.active {
    display: block;
}
.fondo{
	background-color: #9B2347;
}
.blanco{
	background-color: #ffffff;
	border-radius: 15px;
	padding: 15px 20px;
}

/*TABLA EMISIONES EVITADAS*/
/*Contenedor responsive*/
.contenedor-tabla{
    width: 100%;
    overflow-x: auto;
    margin: 20px auto;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
/*Estilo general de tabla*/
.estilo-tabla{
    width: 100%;
    border-collapse: collapse;
    background: white;
    min-width: 900px;
}
.estilo-tabla thead {
    background: #083b51;
    color: white;
}
.estilo-tabla th,
.estilo-tabla td {
    padding: 12px 15px;
    text-align: center;
    border-bottom: 1px solid #ddd;
    transition: background-color 0.25s ease;
}
/*Hover general por fila*/
.estilo-tabla tbody tr:hover {
    background: #eef7f5;
}
/*Hover por columna (clase colocada por JS*/
.highlight-col {
    background-color: #d7eee9 !important;
}
/* Texto del encabezado en hover */
.highlight-header {
    background-color: #d7eee9 !important;
    color: #81878B !important; /* Cambia el color del texto */
    font-weight: bold;
}
/*Fila Total destacada*/
.total-row {
    background: #ececec !important;
    font-weight: bold;
}
/*Notas inferiores*/
.notas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
    margin-top: 20px;
}
.nota {
    background: #f4f4f4;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.4;
    color: #333;
    border-left: 4px solid #7a6da8; /* opcional decorativo */
}

/*GRAFICA*/
.row{
	display: flex;
	flex-wrap: wrap;
}
.st0{
	fill:none;
	stroke:#D9D9D9;
	stroke-width:0.75;
	stroke-linejoin:round;
	stroke-miterlimit:10
}
.st1{
	fill:none;
	stroke:#D9D9D9;
	stroke-width:0.5179;
	stroke-linejoin:round;
	stroke-miterlimit:10;
}
.st2{
	fill:#595959;
	font-family:'Roboto';
	font-size:9.96px;
}
.st3{
	fill:#595959;
	font-family:'Roboto';
	font-size:10.56px;
}
.st4{
	fill:#595959;
	font-family:'Roboto';
	font-size:14.04px;
}
.st5{fill:#9B2347;}

rect.st5:hover {
    cursor: pointer;
    fill: #b83250; /* un rojo más claro para hover */
}
.grafica-wrapper{
	position: relative;
	display: inline-block;
}
.tooltip {
    position: absolute;
    background: rgba(0,0,0,0.8);
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 13px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s ease-out;
    z-index: 100;
}
/* Resaltado del texto */
ol li {
    transition: color .2s ease, font-weight .2s ease;
}
ol li.activo {
    color: #8A203A;
    font-weight: bold;
}

/*MEDIDAS*/
.contenedor{
	display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
    margin: 20px 0;
}
.card{
	width: 230px;
    background: #fff;
    border-radius: 15px;
    padding: 15px;
    text-align: center;
    box-shadow: 0 3px 8px rgba(0,0,0,0.30);
    transition: transform 0.2s ease;
}
.card:hover {
    transform: translateY(-5px);
}

.card-img {
    width: 100%;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
	background-color: #FFFAE9;
	border-radius: 15px;
}

.card-img img {
    transition: transform 0.25s ease, filter 0.25s ease;
}

.card-title {
    margin-top: 10px;
    min-height: 45px;
}

.card-actions {
    margin-top: 10px;
    color: #18b3a3;
    font-weight: bold;
}

footer{
	background-color: #9d2148;
	margin-top: 3%;
	padding: 2%;
}

/*PROPORCIONES*/
.col-md-1, .col-lg-1, .col-md-2, .col-lg-2, .col-md-3, .col-lg-3, .col-md-4, .col-lg-4, .col-md-5, .col-lg-5, .col-md-6, .col-lg-6, .col-md-7, .col-lg-7, .col-md-8, .col-lg-8, .col-md-9, .col-lg-9, .col-md-10, .col-lg-10, .col-md-11, .col-lg-11, .col-md-12, .col-lg-12{
	position: relative;
 	min-height: 1px;
 	padding-right: 15px;
  	padding-left: 15px;
}

.col-lg-12 {
	width: 100%;
}
.col-lg-11 {
	width: 91.66666667%;
}
.col-lg-10 {
	width: 83.33333333%;
}
.col-lg-9 {
	width: 75%;
}
.col-lg-8 {
	width: 66.66666667%;
}
.col-lg-7 {
	width: 58.33333333%;
}
.col-lg-6 {
	width: 50%;
}
.col-lg-5 {
	width: 41.66666667%;
}
.col-lg-4 {
	width: 33.33333333%;
}
.col-lg-3 {
	width: 25%;
}
.col-lg-2 {
	width: 16.66666667%;
}
.col-lg-1 {
	width: 8.33333333%;
}	