/* ==========================================================================
   EmpleoLatino Toolkit — estilos del frontend
   Paleta: navy #101B3C · coral #FF5A5F · teal #00A699 · amber #FFB400
   ========================================================================== */

/* ---------- Caja de consejos [el_tips] ---------- */
.el-tips {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	margin: 1.75em 0;
	padding: 18px 20px;
	background: #FFF8E7;
	border: 1px solid #F5D98B;
	border-left: 5px solid #FF5A5F;
	border-radius: 10px;
}
.el-tips-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #FF5A5F;
	color: #fff;
}
.el-tips-body { flex: 1 1 auto; }
.el-tips-title {
	margin: 0 0 6px;
	font-weight: 700;
	font-size: 1.02em;
	color: #101B3C;
}
.el-tips-body p:last-child { margin-bottom: 0; }

/* ---------- FAQ acordeón ---------- */
.el-faq { margin: 1.75em 0; }
.el-faq-item {
	border: 1px solid #E2E8F5;
	border-radius: 10px;
	margin-bottom: 10px;
	background: #fff;
	overflow: hidden;
}
.el-faq-q {
	position: relative;
	margin: 0;
	padding: 14px 44px 14px 18px;
	font-size: 1.02em;
	font-weight: 700;
	color: #101B3C;
	cursor: pointer;
	user-select: none;
}
.el-faq-q::after {
	content: "+";
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.4em;
	font-weight: 400;
	color: #FF5A5F;
	line-height: 1;
}
.el-faq-item.el-open .el-faq-q::after { content: "−"; }
.el-faq-q:focus-visible {
	outline: 2px solid #00A699;
	outline-offset: 2px;
}
.el-faq-a { display: none; padding: 0 18px 16px; }
.el-faq-item.el-open .el-faq-a { display: block; }
.el-faq-a p:last-child { margin-bottom: 0; }

/* ---------- Buscador de empleo [el_buscador_empleo] ---------- */
.el-buscador {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 1.5em 0;
	padding: 18px;
	background: #101B3C;
	border-radius: 12px;
}
.el-buscador-keyword { flex: 1 1 220px; margin: 0; }
.el-buscador-pais { flex: 0 1 180px; margin: 0; }
.el-buscador input[type="search"],
.el-buscador select {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid #2A3A63;
	border-radius: 8px;
	font-size: 1em;
	background: #fff;
	color: #1A2332;
}
.el-buscador .el-btn { flex: 0 0 auto; }

/* ---------- Botones ---------- */
.el-btn {
	display: inline-block;
	padding: 12px 26px;
	border: 0;
	border-radius: 8px;
	background: #FF5A5F;
	color: #fff;
	font-size: 1em;
	font-weight: 700;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.2s ease;
}
.el-btn:hover,
.el-btn:focus { background: #E5484D; color: #fff; }
.el-btn:disabled { opacity: 0.6; cursor: wait; }

/* ---------- Formulario de contacto [el_contacto] ---------- */
.el-contacto-wrap { margin: 1.5em 0; }
.el-form .el-field { margin: 0 0 16px; }
.el-form label { display: block; font-weight: 600; color: #101B3C; }
.el-form input[type="text"],
.el-form input[type="email"],
.el-form textarea {
	display: block;
	width: 100%;
	margin-top: 6px;
	padding: 12px 14px;
	border: 1px solid #CBD5E8;
	border-radius: 8px;
	font-size: 1em;
	font-family: inherit;
	background: #fff;
	color: #1A2332;
	box-sizing: border-box;
}
.el-form input:focus,
.el-form textarea:focus {
	outline: 2px solid #00A699;
	outline-offset: 1px;
	border-color: #00A699;
}
/* Honeypot: fuera de pantalla, invisible para personas. */
.el-honeypot {
	position: absolute !important;
	left: -9999px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}
.el-form-msg {
	margin: 14px 0 0;
	padding: 12px 16px;
	border-radius: 8px;
	font-weight: 600;
}
.el-form-msg:empty { display: none; }
.el-form-msg.el-ok {
	background: #E6F7F5;
	color: #0B6E66;
	border: 1px solid #9ADCD6;
}
.el-form-msg.el-error {
	background: #FDECEC;
	color: #B4232A;
	border: 1px solid #F5B8BC;
}

/* ---------- Tiempo de lectura ---------- */
.el-tiempo-lectura {
	display: inline-block;
	margin: 0 0 14px;
	padding: 6px 14px;
	background: #F6F8FC;
	border: 1px solid #E2E8F5;
	border-radius: 999px;
	font-size: 0.85em;
	font-weight: 600;
	color: #41507A;
}

/* ---------- Entradas relacionadas ---------- */
.el-relacionados { margin: 2.5em 0 1em; }
.el-relacionados-titulo {
	font-size: 1.35em;
	color: #101B3C;
	margin-bottom: 18px;
}
.el-relacionados-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}
.el-relacionado {
	border: 1px solid #E2E8F5;
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.el-relacionado:hover {
	box-shadow: 0 8px 24px rgba(16, 27, 60, 0.12);
	transform: translateY(-3px);
}
.el-relacionado-enlace { display: block; text-decoration: none; color: inherit; }
.el-relacionado-img { width: 100%; height: auto; display: block; aspect-ratio: 16 / 9; object-fit: cover; }
.el-relacionado-titulo {
	font-size: 1em;
	line-height: 1.4;
	padding: 12px 14px 16px;
	margin: 0;
	color: #101B3C;
}

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
	.el-relacionados-grid { grid-template-columns: 1fr; }
	.el-buscador { flex-direction: column; }
	.el-buscador-pais { flex-basis: auto; }
	.el-buscador .el-btn { width: 100%; }
}