/* Estilos generales */

	/* Fuentes */
		@font-face {
		    font-family: 'Montserrat';
		    src: url('../fonts/Montserrat.ttf') format('truetype');
		    font-weight: normal; 
		    font-style: normal; 
		}

		@font-face {
		    font-family: 'Montserrat-Bold';
		    src: url('../fonts/Montserrat-Bold.ttf') format('truetype');
		    font-weight: normal; 
		    font-style: normal; 
		}

		@font-face {
		    font-family: 'OpenSans';
		    src: url('../fonts/OpenSans.ttf') format('truetype');
		    font-weight: normal; 
		    font-style: normal; 
		}	

		@font-face {
		    font-family: 'Karla';
		    src: url('../fonts/Karla.ttf') format('truetype');
		    font-weight: normal; 
		    font-style: normal; 
		}		


	/*Correcciones a la plantilla original de Vanilla*/

		main{
			min-height: 60vh;
		}

		/* Body + row sin márgenes ni padding y ocupando todo el ancho de la pantalla */
		.body{
			padding: 0px!important;
			font-family: "Karla";
			background-color: #F9FAFB!important;
			color: #222222;
			font-size: 1rem;
		}

		.row{
			max-width: 100vw;		
			padding: 0px;
			margin: 0px;
			grid-gap: 0; /* no queremos separación entre los divs */
		}

		.row-margin{
			max-width: 80rem!important; 
			margin: 0 auto 1.75rem auto!important;
			grid-gap: 0 2rem!important;
		}

		.row-margin-noGap{
			max-width: 80rem!important; 
			margin: 0 auto 1.75rem auto!important;
			grid-gap: 0!important;
		}

		.row-margin-1{
			max-width: 80rem!important; 
			margin: 0 auto 1rem auto!important;
			grid-gap: 0 1rem!important;
		}

		.row-noGap{
			grid-gap: 0!important;
		}

		.row-gap2{
			grid-gap: 0 2rem;
		}

		button, .button{
			
			/*border: 3px solid #1B2E48;    /* Fondo transparente */
			background-color: #A07814;	
		  	padding: 10px 24px;
		  	font-size: 16px;
		  	font-weight: 600;
		  	font-family: "Montserrat-Bold";
		  	text-transform: uppercase;
		  	letter-spacing: 1px;
		  	color: #ffffff;	           
		  	cursor: pointer;
		  	border: none!important;

		  
		}

		.button-simulation{			
		    color: #ffffff;
		    background-color: #171a3c!important;
		    font-size: 14px !important;
		    padding: 10px 18px !important;		   
		    letter-spacing: 1px;		    
		    
		}

			


		button:hover, button:active, button[aria-pressed=true], button[aria-selected=true], button[aria-expanded=true], .button:hover{
			text-decoration: none;
			box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),0 1px 5px 0 rgba(0,0,0,0.12),0 3px 1px -2px rgba(0,0,0,0.2);
			background-color: #A07814;	
		}
		
		p{
			max-width: none!important;
			font-size: 1rem;
			font-family: "Karla";
			color: #222222;
		}

        h2{
            max-width: none!important;
        }

        strong{
        	font-weight: bold;
        }

		.display-none{
			display: none!important;
		}

		.no-margin{
			margin: 0px!important;
		}

			.no-margin-bottom{
				margin-bottom: 0px!important;
			}

		.no-padding{
			padding: 0px!important;
		}

			.no-padding-bottom{
				padding-bottom: 0px!important
			}

            .padding-left-2{
                padding-left: 2rem!important;
            }

        .center-align{
        	text-align: center;
        }

        .right-align{
        	text-align: right;
        }

        .left-align{
        	text-align: left;
        }

        .vertical-align{
        	justify-content: center; 
  			align-items: center; 
  			height: 87vh;
  			
        }

        .padding-9{
        	padding: 9rem;
        }

        .padding-2-9{
        	padding: 4rem 9rem;
        }

        .padding-6{
        	padding: 6rem;
        }

        .padding-2-6{
        	padding: 2rem 6rem;
        }

        .margin-bottom-2{
        	margin-bottom: 2rem!important;
        }

        a{
        	text-decoration: underline;
        	color: initial!important;
        	color: #222222;
        }



    /* fin correcciones */

    /* Estilo de los elementos del form */
	input{
		border-radius: 0 !important;
	    border-bottom: 1px solid #666666 !important;
	    font-size: 0.95rem !important;
	    height: auto !important;
	    padding: 14px !important;
	    background-color: #ffffff !important;
	    margin-bottom: 0px!important;
	    margin-bottom: 2rem!important;
	    font-family: "Karla"!important;


	}

	textarea, select{
		border-radius: 0 !important;
	    border: 1px solid #666666 !important;
	    font-size: 0.95rem !important;
	    height: auto !important;
	    padding: 14px !important;
	    background-color: #ffffff !important;
	    margin-bottom: 0px!important;
	    font-family: "Karla"!important;
	    margin-bottom: 2rem!important;
	}

	

    /* Estilos generales */
    .title{
        color: #1B2E48;
        font-size: 1.25rem;
        text-transform: uppercase;
        font-family: "Montserrat-Bold";
        font-weight: bold;
        margin-bottom: 1.75rem;
    }

    .subtitle{
        color: #A07814;
    }

    .full-height{
    	height: 100vh;
    }

    .error-message{
    	background-color: pink; 
    	padding: 10px 5px;
    }

    .home .vertical-align{
    	height: 100vh!important;
    }

/* Custom */

	/* Navegación */
	.horizontal-list {
		display: flex;          /* Usar flexbox para alinear los elementos en fila */
		padding: 0;             /* Eliminar el espaciado por defecto del <ul> */
		margin: 0;              /* Eliminar márgenes por defecto */
		list-style-type: none;  /* Eliminar los puntos de la lista */
		text-transform: uppercase;
		font-size: 12px;
		letter-spacing: .2em;
		font-weight: bold;
		justify-content: flex-end;
	}

		.horizontal-list li {
			margin-right: 20px;     /* Espacio entre los elementos */
		}

		.horizontal-list i{
			color: #222222;
			font-size: 32px;
		}

		.horizontal-list a{
			text-decoration: none;
		}


	nav{
		padding: 1rem 1rem 0 1rem!important;
	}


	/* BreadCrumbs */
	.breadcrumbs {
		list-style: none;
		padding: 2rem 0 1rem 0;
		border-top: 1px solid #f2f2f2;
		margin: 0;
		display: flex;
		flex-wrap: wrap;		
		font-family: "Karla";
		font-size: 1rem;
	}

		.breadcrumbs a{
			text-decoration: none;
		}

		.breadcrumbs li {
			position: relative;
			padding-right: 10px;
		}

		.breadcrumbs li:not(:last-child)::after {
			content: ">";
			margin-left: 8px;
			color: #555;
		}

	/* Histórico de tests */
	.historical{		
		padding-left: 0;
		list-style-type: none;
		margin-left: 0px;
	}	


		.historical li {
   			position: relative;
    		padding: 12px 30px 12px 10px; /* espacio para pico */  
    		cursor: pointer;    
    		transition: background 0.3s, color 0.3s;
    		border-bottom: 1px solid #f2f2f2;			
			font-family: "Karla";
			letter-spacing: 1px;
			font-size: 1rem;
			font-weight: bold;
		}

		/* Ítem activo del menú izquierdo */
		.historical li.active {
			background: #1B2E48;
			color: white;
			box-shadow: 0 4px 5px -2px rgba(0, 0, 0, 0.2);
			border: none;
			position: relative; /* Necesario para posicionar el ::after */
			z-index: 2; /* Asegura que quede encima del panel blanco */
		}

		/* El piquito blanco que apunta al panel */
		.historical li.active::after {
			content: "";
			position: absolute;
			top: 50%;
			right: -1px; /* Asegura que toque el panel blanco */
			transform: translateY(-50%);
			width: 0;
			height: 0;
			clip-path: polygon(100% 0, 0 50%, 100% 100%);
			border-top: 24px solid transparent;
			border-bottom: 24px solid transparent;
			border-right: 18px solid white; /* Color del panel blanco */
			z-index: 10; /* Más alto que el panel blanco */
		}


	/* Panel para los tests */

	.test-panel{                
		background: white;
  		position: relative;
		z-index: 1; /* Debajo del piquito */
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
		padding: 2rem;"
	}

		.mini-title{
			font-family: "Montserrat";
			text-transform: uppercase;
			font-size: 0.75rem;
			letter-spacing: 0.5px;
			margin-bottom: 0.25rem;
			color: #222222;
		}

		.value-test{
			font-size: 1.75rem;
			margin-top: 0.5rem;
			color: #222222;
		}

		.answer{
			margin-bottom: 2rem;
		}

			.answer p:first-of-type{
				font-weight: bold;
				margin-bottom: 0.45rem;
			}

			.answer ul{
				margin-bottom: 0;
				list-style-type: none;
				margin-left: 1rem;
				padding-left: 0px
			}

			.answer input[type="radio"]{
				margin-bottom: 1rem!important;
				margin-right: 0.5rem!important;
			}

			.answer label{
				padding: 0.1rem 0.3rem;

			}

				label{
					max-width: 90%!important;
				}

			.answer .correct{
				background-color: #C5E1A5;
			}

			.answer .wrong{
				background-color: #FFCDD2;
			}

			.answer .explanation{
				margin-left: 2.5rem;
				margin-right: 2.5rem;
				padding: 0.5rem 1rem;				
				background-color: #E3F2FD;
			}

				.explanation p{
					font-weight: normal!important;
					font-family: "Karla"
				}

			.question-answer{
				vertical-align: top;
   				margin-top: 8px;
			}

			.correction-panel{
				background-color: #FFF59D; 
				padding: 1rem;
			}

			.disabled-answer{
				color: grey;
				cursor: auto;
			}

			.race-score{
				background-color: #f5f5f5;
				padding: 10px 15px;
			}


		.clean-link{
			text-decoration: none!important
		}

		.graphic-title{
			text-transform: uppercase;
		    letter-spacing: 1px;
		    font-size: 0.90rem;
		    margin-top: 0.05rem;
		    margin-botom: 0!important;
		}


		.border-mobile-bottom-grey{
			border-bottom: 1px solid #f2f2f2;
			margin-bottom: 1rem;
		}

	footer{
		border-top: 1px solid #f2f2f2;
		padding-top: 3rem;
		margin-top: 3rem;
	}

/* RESPONSIVE */
/* Tablet */
@media (max-width: 1035px) {

	main{
    	padding: 1rem;
    }

	.home{
		height: 18vh!important;
	}

		.home .vertical-align{
			height: 18vh!important;
		}

	.border-mobile-bottom-grey{
		border-bottom: none;
	}
	
    
}

/* Móvil */
@media (max-width: 617px) {
    
	.test-responsive{
		display: none;
	}

	.breadcrumbs, .race-score{
		font-size: 0.80rem;
	}

	.padding-2-9, .padding-6, .padding-2-6{
		padding: 2rem;
	}
    
 	.vertical-align{
 		height: auto!important;
 	}

 	.button{
 		display: block;
 	}
}