/* FILTROS */

.filtros{
width:80%;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:5px;
margin-bottom:10px;
}

.filtros input,
.filtros select{
padding:10px;
border:1px solid #ddd;
border-radius:8px;
font-size:2.5vh;
font-family:Calibri;
}


/* TARJETAS */

#contenedorVacantes{
	width:94%;
	display:grid;
	grid-template-columns:	repeat(auto-fill,minmax(280px,1fr));
	gap:20px;
}

.card{
	background:white;
	padding:25px;
	border-radius:14px;
	box-shadow:
	0 4px 15px rgba(0,0,0,.08);
	cursor:pointer;
	transition:.3s;
	text-align:left;
}

.card:hover	{transform:translateY(-5px);}
.card h3	{margin:0;font-size:4.0vh;font-family:Calibri;color:black;}
.empresa	{color:#0000AA;margin-bottom:20px;font-size:3.2vh;font-family:Calibri;font-weight:bold;}
.item		{margin:6px 0;font-size:2.5vh;font-family:Calibri;}
.sueldo		{margin-top:15px;font-size:4.0vh;font-family:Calibri;font-weight:bold;color:#0a7a4f;}


/* PAGINACION */

#paginacion{margin-top:40px;display:flex;justify-content:center;gap:10px;}
.pag{padding:10px 15px;background:white;border-radius:8px;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.08);}
.activa{background:#1b74ff;color:white;}


/* MODAL */

.modal{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.6);
display:none;
justify-content:center;
align-items:center;
padding:20px;
z-index:999;
}

.modal-content{
background:white;
width:100%;
max-width:90%;
max-height:80vh;
overflow:auto;
border-radius:14px;
padding:30px;
animation:fade .3s;
}

@keyframes fade{
from{
opacity:0;
transform:translateY(30px);
}
to{
opacity:1;
transform:none;
}}

.cerrar{
float:right;
font-size:28px;
cursor:pointer;
}



.btn-postular{
background:#1b74ff;
color:white;
border:none;
padding:15px 35px;
border-radius:10px;
font-size:18px;
cursor:pointer;}

.grid-form{
display:grid;
grid-template-columns:1fr 1fr;
gap:15px;
margin-top:30px;}

.grid-form input{
padding:14px;
border:1px solid #ddd;
border-radius:8px;
}

.enviar{
margin-top:25px;
width:100%;
padding:15px;
border:none;
background:#14804a;
color:white;
border-radius:10px;
font-size:18px;
cursor:pointer;
}

@media(max-width:700px){
.grid-form{
grid-template-columns:1fr;
}
	.card .empresa{font-size:2.5vh;}
	.card h3{font-size:3.0vh;}
	.card .item{font-size:1.5vh;}
	.card .sueldo{font-size:2.5vh;}
}



.modal-header{

margin-bottom:25px;
padding-bottom:20px;
border-bottom:1px solid #eee;

}

.modal-empresa	{font-size:4.5vh;color:#666;font-family:Calibri; text-align:left;}
.modal-vacante	{font-size:5.5vh;font-weight:bold;margin-top:5px; font-family:Calibri;}
.badges			{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px;text-align:center;}
.badge			{background-color:#eef4ff;padding:8px 14px;border-radius:30px;font-size:2.5vh;font-family:Calibri;}
.salario-box	{background:#f5faf6;padding:25px;border-radius:12px;margin:25px 0; font-family:Calibri;}
.salario-label	{font-size:2vh;color:#777;font-family:Calibri;}
.salario		{font-size:6vh;font-weight:bold;color:#14804a;font-family:Calibri;}
.grid-info		{display:grid;
				grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
				gap:10px;
				margin:30px 0;	
				background-color:white;
				font-family:Calibri;}
.gabiz			{display:grid;
				grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
				gap:10px;
				margin:30px 0;	
				background-color:white;
				font-family:Calibri;}
				
.bloque			{background:#f5f5f5;padding:15px;border-radius:10px;}

.bloque small	{display:block;color:#555;margin-bottom:6px;font-size:2vh;font-family:Calibri;}
.seccion		{margin-top:30px; background-color:white; }
.seccion h3		{margin-bottom:10px; color:black; font-size:5vh; font-family:Calibri;}
.texto			{line-height:1.3; color:white;font-family:Calibri; text-align:left; background-color:#555555;}
/* white-space:pre-line; */

@media(max-width:700px){
	.modal-content {max-width:100%;}
	.modal-header .modal-empresa{font-size:2.2vh;}
	.modal-header .modal-vacante{font-size:2.5vh;}
	.modal-header .badges .badge{font-size:1.3vh;}
	.salario{font-size:2.2vh;}
	.grid-info .bloque{font-size:1.5vh;}
	.seccion h3		{font-size:2.5vh;}
	.seccion .texto	{font-size:1.4vh;line-height:1.3;}
	.datosgenerales		{font-size:2.5vh;}
}