/* ==========================================================================
   Formulario de postulación docente ("Sumate al equipo")
   Reutiliza las variables de estilo-index.css (--color-primario, etc.)
   ========================================================================== */

.vacantes-seccion {
	padding: var(--espacio-8) 0;
	background: var(--color-fondo-alt);
	min-height: 60vh;
	display: flex;
	align-items: center;
}

.vacantes-caja {
	background: #fff;
	max-width: 560px;
	width: 100%;
	margin: 0 auto;
	border-radius: var(--radio-lg);
	box-shadow: var(--sombra-md);
	padding: var(--espacio-6);
}

.vacantes-caja__header {
	text-align: center;
	margin-bottom: var(--espacio-5);
	padding-bottom: var(--espacio-4);
	border-bottom: 1px solid var(--color-borde);
}

.vacantes-caja__header img {
	max-width: 110px;
	margin: 0 auto;
	border-radius: var(--radio-sm);
}

.vacantes-paso { display: none; animation: vacantesFadeIn .4s ease-in-out; }
.vacantes-paso.activo { display: block; }

@keyframes vacantesFadeIn {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
}

.vacantes-caja h2 { text-align: center; font-size: 24px; margin-bottom: 8px; }

.vacantes-subtitulo {
	text-align: center;
	color: var(--color-texto-suave);
	margin-bottom: var(--espacio-4);
	font-size: 15.5px;
}

.vacantes-campo { margin-bottom: var(--espacio-4); }

.vacantes-campo label {
	display: block;
	margin-bottom: 8px;
	font-weight: 700;
	font-family: var(--fuente-texto);
	color: var(--color-primario);
	font-size: 14px;
}

.vacantes-campo .etiqueta-seccion { font-size: 17px; }
.vacantes-campo .texto-ayuda { font-size: 13.5px; color: var(--color-texto-suave); font-weight: 400; margin-top: -4px; margin-bottom: 10px; }

.vacantes-caja input[type="text"],
.vacantes-caja input[type="date"],
.vacantes-caja input[type="tel"],
.vacantes-caja input[type="email"],
.vacantes-caja select {
	width: 100%;
	padding: 12px 15px;
	border: 1.5px solid var(--color-borde);
	border-radius: var(--radio-sm);
	font-family: var(--fuente-texto);
	font-size: 15.5px;
	color: var(--color-texto);
	transition: border-color .2s, box-shadow .2s;
	background: #fff;
}

.vacantes-caja input:focus,
.vacantes-caja select:focus {
	outline: none;
	border-color: var(--color-acento);
	box-shadow: 0 0 0 3px rgba(0, 87, 191, 0.12);
}

.vacantes-caja small { display: block; margin-top: 6px; color: var(--color-texto-suave); font-size: 12.5px; }

.vacantes-checks, .vacantes-radios { display: flex; flex-direction: column; gap: 12px; }

.vacantes-check-item, .vacantes-radio-item {
	display: flex;
	align-items: center;
	cursor: pointer;
	font-family: var(--fuente-texto);
	font-weight: 400;
	color: var(--color-texto);
}

.vacantes-check-item input, .vacantes-radio-item input {
	margin-right: 10px;
	width: 18px;
	height: 18px;
	cursor: pointer;
	accent-color: var(--color-acento);
}

.vacantes-acciones { margin-top: var(--espacio-5); text-align: right; }
.vacantes-acciones--split { display: flex; justify-content: space-between; gap: 12px; }

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

.vacantes-materia-extra { animation: vacantesSlideDown .3s ease-out; margin-top: 10px; }

@keyframes vacantesSlideDown {
	from { opacity: 0; transform: translateY(-10px); }
	to { opacity: 1; transform: translateY(0); }
}

.vacantes-uploader {
	position: relative;
	border: 2px dashed var(--color-acento);
	border-radius: var(--radio-md);
	background: rgba(0, 87, 191, 0.03);
	padding: var(--espacio-6) var(--espacio-4);
	text-align: center;
	cursor: pointer;
	transition: background .2s, border-color .2s;
}

.vacantes-uploader:hover,
.vacantes-uploader--arrastrando {
	background: rgba(0, 87, 191, 0.08);
	border-color: var(--color-primario);
}

.vacantes-uploader input[type="file"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

.vacantes-uploader__contenido { display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.vacantes-uploader__icono { width: 44px; height: 44px; color: var(--color-acento); margin-bottom: 10px; }
.vacantes-uploader__texto { font-size: 15px; font-weight: 700; color: var(--color-primario); }

.vacantes-uploader__nombre {
	margin-top: 10px;
	background: #fff;
	padding: 7px 16px;
	border-radius: 999px;
	font-size: 13px;
	color: var(--color-acento);
	border: 1px solid var(--color-acento);
	word-break: break-all;
}

.vacantes-error {
	display: none;
	color: var(--color-peligro, #d3402f);
	font-size: 13px;
	margin-top: 6px;
}

.vacantes-con-error input,
.vacantes-con-error select { border-color: #d3402f; }
.vacantes-con-error .vacantes-error { display: block; }

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

.vacantes-gracias__icono {
	width: 100px;
	height: 100px;
	background: rgba(3, 45, 95, 0.08);
	color: var(--color-acento);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto var(--espacio-5);
}

.vacantes-gracias h1 { font-size: 30px; margin-bottom: 10px; }
.vacantes-gracias p { color: var(--color-texto-suave); font-size: 16.5px; margin-bottom: var(--espacio-5); }

@media (max-width: 600px) {
	.vacantes-caja { padding: var(--espacio-5) var(--espacio-4); }
	.vacantes-acciones--split { flex-direction: column-reverse; }
	.vacantes-acciones--split .btn { width: 100%; }
}