/* ==========================================================================
   03-jobs.css — Board de ofertas: barra de filtros, layout half-job-details,
   cards de jobs, panel de detalle, ficha single, employers y candidates.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Barra de filtros (topbar)
   -------------------------------------------------------------------------- */

/* La fila de selects sí lleva tarjeta; el topbar en la home envuelve el
   hero Elementor y debe quedar transparente para no crear un marco extra. */
.filter-sub-topbar-sidebar {
	background: var(--jt-surface);
	border: 1px solid var(--jt-border);
	border-radius: var(--jt-radius-lg);
	box-shadow: var(--jt-shadow-sm);
	padding: 14px 16px;
	margin-bottom: 1.5rem;
}

.filter-topbar-sidebar {
	background: transparent;
	border: none;
	box-shadow: none;
	padding: 0;
	margin-bottom: 1.25rem;
}

.filter-topbar-sidebar .widget,
.filter-sub-topbar-sidebar .widget,
.filter-topbar-sidebar aside.widget,
.filter-sub-topbar-sidebar aside.widget {
	background: transparent;
	border: none;
	box-shadow: none;
	padding: 0;
}

/* La fila de orden/selects se queda fija al hacer scroll, solo fuera
   de la home; con fondo opaco para que no "flote" sobre las cards. */
body:not(.home) .jobs-alert-ordering-wrapper {
	position: sticky;
	top: 84px;
	z-index: 30;
	background: var(--jt-bg);
	padding: 10px 0;
}

/* En móvil el bloque de aplicar queda fijo abajo en la ficha de oferta */
@media (max-width: 991px) {
	body.single-job_listing .job-detail-buttons {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background: #fff;
		padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
		box-shadow: 0 -8px 24px rgba(16, 24, 40, .14);
		z-index: 70;
		display: flex;
		gap: 10px;
	}

	body.single-job_listing .job-detail-buttons .btn {
		flex: 1;
	}

	body.single-job_listing {
		padding-bottom: 90px;
	}
}

/* Impresión limpia de la ficha de oferta (PDF para candidatos) */
@media print {

	#apus-header,
	#apus-header-mobile,
	#apus-footer,
	#back-to-top,
	.filter-sidebar,
	.filter-topbar-sidebar,
	.filter-sub-topbar-sidebar,
	.sidebar-job,
	.job-detail-buttons,
	.sharebox-job,
	.socials-apply,
	#apus-mobile-menu,
	.skip-link {
		display: none !important;
	}

	body,
	#wrapper-container {
		background: #fff !important;
	}

	.job-detail-description,
	.job-detail-header .top-detail-job {
		box-shadow: none !important;
		border: none !important;
	}

	.job-detail-description {
		padding: 0 !important;
	}

	a {
		color: #000 !important;
		text-decoration: none !important;
	}
}

.filter-topbar-sidebar select,
.filter-sub-topbar-sidebar select,
.filter-topbar-sidebar .form-control,
.filter-sub-topbar-sidebar .form-control,
.form-jobtex-ppp select {
	background: #f9fafb;
	border: 1px solid var(--jt-border);
	border-radius: var(--jt-radius-sm);
	font-size: .875rem;
	font-weight: 600;
	color: var(--jt-ink-2);
}

.filter-topbar-sidebar select:hover,
.filter-sub-topbar-sidebar select:hover,
.form-jobtex-ppp select:hover {
	border-color: var(--jobtex-theme-color, #14a077);
	color: var(--jobtex-theme-color, #14a077);
}

/* Sidebar de filtros (offcanvas / lateral) */
.filter-sidebar .widget,
.filter-sidebar aside.widget {
	margin-bottom: 1rem;
}

.filter-sidebar .btn-view-map,
.filter-sidebar .btn-view-listing {
	border-radius: var(--jt-radius-sm);
}

/* Panel de filtros (offcanvas y lateral): el padre pinta #F5F5F5 con
   padding propio y eso crea el "marco doble". Se limpia con !important
   para ganar a cualquier regla del padre o de Elementor. */
.offcanvas-filter-sidebar,
.filter-sidebar .sidebar,
.filter-sidebar .apus-sidebar {
	background: var(--jt-bg) !important;
	padding: 16px !important;
	border: none !important;
	box-shadow: none !important;
}

/* La plantilla Elementor del filtro no debe añadir capas propias.
   OJO: el reset de paddings solo aplica al contexto .filter-sidebar /
   offcanvas; en la home el hero vive dentro de widget_apus_elementor_template
   y necesita conservar sus paddines de columna. */
aside.widget_apus_elementor_template {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
}

.filter-sidebar aside.widget_apus_elementor_template .elementor-section,
.filter-sidebar aside.widget_apus_elementor_template .elementor-column,
.filter-sidebar aside.widget_apus_elementor_template .elementor-widget-wrap,
.filter-sidebar aside.widget_apus_elementor_template .elementor-widget-container,
.sidebar-wrapper aside.widget_apus_elementor_template .elementor-section,
.sidebar-wrapper aside.widget_apus_elementor_template .elementor-column,
.sidebar-wrapper aside.widget_apus_elementor_template .elementor-widget-wrap,
.sidebar-wrapper aside.widget_apus_elementor_template .elementor-widget-container,
.offcanvas-filter-sidebar .elementor-section,
.offcanvas-filter-sidebar .elementor-column,
.offcanvas-filter-sidebar .elementor-widget-wrap,
.offcanvas-filter-sidebar .elementor-widget-container {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
}

/* Elementor añade márgenes propios a cada widget del template de filtros
   (elementor-1500); se neutralizan para que mande el ritmo de .form-group */
.elementor-1500 .elementor-widget {
	margin: 0 !important;
}

/* Una sola tarjeta para todo el formulario de filtros */
.filter-listing-form.vertical {
	background: var(--jt-surface) !important;
	border: 1px solid var(--jt-border) !important;
	border-radius: var(--jt-radius-lg) !important;
	box-shadow: var(--jt-shadow-sm) !important;
	padding: 1.4rem !important;
	overflow: hidden;
}

/* Etiquetas de los grupos de filtro */
.filter-listing-form .heading-label,
.widget-job-search-form label.heading-label {
	font-size: .78rem !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: .07em !important;
	color: var(--jt-ink-2) !important;
	margin: 0 0 .45rem !important;
}

/* Controles más compactos y espaciado ajustado */
.filter-listing-form.vertical .form-group {
	margin-bottom: 1.1rem !important;
}

.filter-listing-form.vertical .form-group:last-child {
	margin-bottom: 0 !important;
}

.filter-listing-form.vertical .form-control {
	padding: .55rem .9rem !important;
	background: #f9fafb !important;
	border: 1px solid var(--jt-border) !important;
	border-radius: var(--jt-radius-sm) !important;
}

/* Los campos con icono conservan el hueco izquierdo para el icono
   (el padding compacto de arriba no debe comérselo) */
.filter-listing-form .form-group-inner.has-icon .form-control,
.filter-listing-form .form-group-inner.has-icon select.form-control {
	padding-left: 48px !important;
}

/* Separación entre el último campo y el botón de enviar */
.filter-listing-form.vertical .wrapper-submit,
.filter-listing-form.vertical .submit-button-wrapper {
	margin-top: 1.2rem !important;
}

/* Slider de radio y salario */
.filter-listing-form.vertical .ui-slider,
.filter-listing-form.vertical .range-slider {
	border-radius: var(--jt-pill);
}

/* --------------------------------------------------------------------------
   Layout half-job-details (home tipo Indeed)
   -------------------------------------------------------------------------- */

.layout-type-half-job-details #main-content,
.layout-type-half-job-details-v2 #main-content {
	padding-top: 1.5rem;
}

.layout-type-half-job-details .wrapper-half-detail,
.layout-type-half-job-details-v2 .wrapper-half-detail {
	align-items: flex-start;
}

/* Columna de listado */
.layout-type-half-job-details .jobs-wrapper .item-job,
.layout-type-half-job-details-v2 .jobs-wrapper .item-job {
	margin-bottom: 14px;
}

/* Panel de detalle sticky */
#job-details-wrapper {
	background: var(--jt-surface);
	border: 1px solid var(--jt-border);
	border-radius: var(--jt-radius-lg);
	box-shadow: var(--jt-shadow-md);
	overflow: hidden;
	top: 96px;
	max-height: calc(100vh - 120px);
	overflow-y: auto;
	scrollbar-width: thin;
}

#job-details-wrapper::-webkit-scrollbar {
	width: 6px;
}

#job-details-wrapper::-webkit-scrollbar-thumb {
	background: #d0d5dd;
	border: none;
}

/* --------------------------------------------------------------------------
   Card de job — estilo list (el de la home)
   -------------------------------------------------------------------------- */

article.job-list,
article.layout-job.job-list {
	background: var(--jt-surface);
	border: 1px solid var(--jt-border);
	border-radius: var(--jt-radius);
	box-shadow: var(--jt-shadow-sm);
	transition: all .25s var(--jt-ease);
	overflow: hidden;
}

article.job-list:hover {
	border-color: var(--jobtex-theme-color-08, rgba(20, 160, 119, .4));
	box-shadow: var(--jt-shadow-md);
	transform: translateY(-2px);
}

.item-job.active article.job-list,
.item-job.active article.layout-job.job-list {
	border-color: var(--jobtex-theme-color, #14a077);
	box-shadow: 0 0 0 1px var(--jobtex-theme-color, #14a077), var(--jt-shadow-md);
}

article.job-list .employer-logo img,
article.job-grid .employer-logo img,
.employer-logo img {
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: 14px;
	background: #f2f4f7;
	box-shadow: inset 0 0 0 1px var(--jt-border);
}

article.job-list h2.job-title,
article.job-list h2.job-title a {
	color: var(--jt-ink);
	font-size: 1.08rem;
	font-weight: 700;
	letter-spacing: -.01em;
	text-decoration: none;
	transition: color .2s var(--jt-ease);
}

article.job-list h2.job-title a:hover,
article.job-grid h2.job-title a:hover {
	color: var(--jobtex-theme-color, #14a077);
}

article.job-list .info-bottom {
	border-top: 1px solid var(--jt-border-soft);
	padding-top: .9rem;
}

article.job-list .job-salary,
article.job-list .job-salary i {
	color: var(--jobtex-theme-hover-color, #0e7355);
}

article.job-list .deadline-time,
article.job-list .deadline-closed {
	color: var(--jt-ink-3);
	font-size: .82rem;
}

/* --------------------------------------------------------------------------
   Card de job — estilo grid
   -------------------------------------------------------------------------- */

article.job-grid,
article.layout-job.job-grid {
	background: var(--jt-surface);
	border: 1px solid var(--jt-border);
	border-radius: var(--jt-radius-lg);
	box-shadow: var(--jt-shadow-sm);
	padding: 1.5rem;
	transition: all .25s var(--jt-ease);
	height: 100%;
}

article.job-grid:hover {
	transform: translateY(-3px);
	box-shadow: var(--jt-shadow-lg);
	border-color: var(--jobtex-theme-color-08, rgba(20, 160, 119, .4));
}

article.job-grid h2.job-title a {
	color: var(--jt-ink);
	font-weight: 700;
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   Ficha single de oferta
   -------------------------------------------------------------------------- */

.job-detail-header .top-img-detail {
	border-radius: 0 0 var(--jt-radius-lg) var(--jt-radius-lg);
	overflow: hidden;
}

.job-detail-header .top-detail-job,
.member-detail-header .top-detail-job {
	background: var(--jt-surface);
	border: 1px solid var(--jt-border);
	border-radius: var(--jt-radius-lg);
	box-shadow: var(--jt-shadow-md);
}

.job-detail-header .employer-logo img,
.member-detail-header .employer-logo img,
.member-detail-header .candidate-logo img {
	width: 72px;
	height: 72px;
	border-radius: 18px;
	box-shadow: inset 0 0 0 1px var(--jt-border), var(--jt-shadow-sm);
}

h1.job-detail-title,
h1.member-title {
	font-size: clamp(1.5rem, 2.6vw, 2.1rem);
	font-weight: 800;
	letter-spacing: -.03em;
}

.job-metas-detail,
.job-metas-detail-bottom {
	color: var(--jt-ink-3);
}

.job-detail-buttons .btn-apply,
.job-detail-buttons a.btn-theme,
.member-detail-buttons a.btn-theme {
	border-radius: var(--jt-radius-sm);
	padding: .7rem 1.6rem;
}

/* Descripción */
.job-detail-description {
	background: var(--jt-surface);
	border: 1px solid var(--jt-border);
	border-radius: var(--jt-radius-lg);
	box-shadow: var(--jt-shadow-sm);
	padding: 2rem;
	margin-bottom: 1.5rem;
}

.job-detail-description p,
.job-content-area p {
	color: var(--jt-ink-2);
}

/* Job Overview: rejilla de tiles */
.job-detail-detail ul.list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 12px;
	list-style: none;
	padding: 0;
}

.job-detail-detail ul.list li {
	background: #f9fafb;
	border: 1px solid var(--jt-border);
	border-radius: var(--jt-radius-sm);
	padding: 14px 16px;
	transition: border-color .2s var(--jt-ease);
}

.job-detail-detail ul.list li:hover {
	border-color: var(--jobtex-theme-color-08, rgba(20, 160, 119, .4));
}

.job-detail-detail ul.list li .details .text {
	color: var(--jt-ink-3);
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .05em;
	font-weight: 600;
}

.job-detail-detail ul.list li .details .value {
	color: var(--jt-ink);
	font-weight: 600;
}

/* Sidebar sticky de la ficha */
.sidebar-job.sticky-top {
	top: 96px;
}

/* Formularios de aplicación (popup) */
.job-apply-email-form-wrapper .inner,
.job-apply-internal-form-wrapper .inner {
	border-radius: var(--jt-radius-lg);
}

.upload-file-btn,
label.list-file-cv {
	border-radius: var(--jt-radius-sm);
}

/* --------------------------------------------------------------------------
   Employers
   -------------------------------------------------------------------------- */

article.employer-card .employer-grid,
.employer-grid.layout-employer {
	background: var(--jt-surface);
	border: 1px solid var(--jt-border);
	border-radius: var(--jt-radius-lg);
	box-shadow: var(--jt-shadow-sm);
	padding: 1.6rem;
	text-align: center;
	transition: all .25s var(--jt-ease);
	height: 100%;
}

article.employer-card .employer-grid:hover,
.employer-grid.layout-employer:hover {
	transform: translateY(-3px);
	box-shadow: var(--jt-shadow-lg);
	border-color: var(--jobtex-theme-color-08, rgba(20, 160, 119, .4));
}

.employer-grid .employer-logo img,
.wrapper-logo .employer-logo img {
	width: 72px;
	height: 72px;
	border-radius: 18px;
	object-fit: cover;
	box-shadow: inset 0 0 0 1px var(--jt-border);
}

.employer-grid h2.employer-title a,
.employer-list h2.employer-title a {
	color: var(--jt-ink);
	font-weight: 700;
	text-decoration: none;
}

.employer-grid h2.employer-title a:hover,
.employer-list h2.employer-title a:hover {
	color: var(--jobtex-theme-color, #14a077);
}

/* Employer en lista */
.employer-list.layout-employer {
	background: var(--jt-surface);
	border: 1px solid var(--jt-border);
	border-radius: var(--jt-radius);
	box-shadow: var(--jt-shadow-sm);
	padding: 1.3rem 1.5rem;
	transition: all .25s var(--jt-ease);
}

.employer-list.layout-employer:hover {
	transform: translateY(-2px);
	box-shadow: var(--jt-shadow-md);
	border-color: var(--jobtex-theme-color-08, rgba(20, 160, 119, .4));
}

/* --------------------------------------------------------------------------
   Candidates
   -------------------------------------------------------------------------- */

.candidate-grid.candidate-archive-layout,
article.candidate-card .candidate-grid {
	background: var(--jt-surface);
	border: 1px solid var(--jt-border);
	border-radius: var(--jt-radius-lg);
	box-shadow: var(--jt-shadow-sm);
	padding: 1.6rem;
	transition: all .25s var(--jt-ease);
	height: 100%;
}

.candidate-grid.candidate-archive-layout:hover {
	transform: translateY(-3px);
	box-shadow: var(--jt-shadow-lg);
	border-color: var(--jobtex-theme-color-08, rgba(20, 160, 119, .4));
}

.candidate-logo img,
.candidate-grid .candidate-logo img {
	border-radius: var(--jt-pill);
	object-fit: cover;
	box-shadow: 0 0 0 4px var(--jobtex-theme-color-008, rgba(20, 160, 119, .12));
}

h2.candidate-title,
h2.candidate-title a {
	color: var(--jt-ink);
	font-weight: 700;
	text-decoration: none;
}

h2.candidate-title a:hover {
	color: var(--jobtex-theme-color, #14a077);
}

.candidate-list.candidate-archive-layout {
	background: var(--jt-surface);
	border: 1px solid var(--jt-border);
	border-radius: var(--jt-radius);
	box-shadow: var(--jt-shadow-sm);
	transition: all .25s var(--jt-ease);
}

.candidate-list.candidate-archive-layout:hover {
	transform: translateY(-2px);
	box-shadow: var(--jt-shadow-md);
}

a.btn.btn-theme.btn-outline.btn-inside {
	border-radius: var(--jt-radius-sm);
}

/* --------------------------------------------------------------------------
   Mapa (half-map / top-map)
   -------------------------------------------------------------------------- */

#jobs-google-maps.fix-map,
#jobs-google-maps.top-map {
	border-left: 1px solid var(--jt-border);
}

/* Estado vacío */
.not-found {
	background: var(--jt-surface);
	border: 1px dashed var(--jt-border);
	border-radius: var(--jt-radius-lg);
	padding: 3rem 1.5rem;
	text-align: center;
	color: var(--jt-ink-3);
}

/* --------------------------------------------------------------------------
   Hero de la home (construido con Elementor)
   Sección interna f82716f | columna izquierda 3b7948c | tarjeta CV 38901c0.
   Si se reconstruye la página y cambian los IDs, estas reglas dejan de
   aplicarse sin romper nada.
   -------------------------------------------------------------------------- */

#apus-main-content .elementor-element-f82716f {
	border-radius: 24px;
	overflow: hidden;
}

#apus-main-content .elementor-element-3b7948c>.elementor-widget-wrap {
	padding: 3rem 2.5rem 2.5rem 3rem;
}

#apus-main-content .elementor-element-38901c0>.elementor-widget-wrap {
	padding: 2.5rem 2.2rem;
	height: 100%;
}

@media (max-width: 991px) {
	#apus-main-content .elementor-element-3b7948c>.elementor-widget-wrap {
		padding: 2rem 1.4rem;
	}
}

/* Buscador principal */
.widget-job-search-form .filter-listing-form {
	background: var(--jt-surface);
	border: 1px solid var(--jt-border);
	border-radius: var(--jt-radius-lg);
	box-shadow: var(--jt-shadow-md);
	max-width: 100%;
}

.widget-job-search-form .filter-listing-form .form-control,
.widget-job-search-form .filter-listing-form select {
	border: none;
	background: transparent;
	box-shadow: none;
}

.widget-job-search-form .btn-submit {
	border-radius: var(--jt-radius-sm);
}

/* Keywords trending bajo el buscador */
.trending-keywords {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0;
	margin: 1rem 0 0;
	list-style: none;
}

.trending-keywords li a {
	display: inline-flex;
	padding: .35rem .95rem;
	border-radius: var(--jt-pill);
	background: var(--jt-surface);
	border: 1px solid var(--jt-border);
	color: var(--jt-ink-2);
	font-size: .85rem;
	font-weight: 600;
	text-decoration: none;
	transition: all .2s var(--jt-ease);
}

.trending-keywords li a:hover {
	border-color: var(--jobtex-theme-color, #14a077);
	color: var(--jobtex-theme-color, #14a077);
	transform: translateY(-1px);
	box-shadow: var(--jt-shadow-sm);
}

/* Tarjeta "Sube tu CV" (columna Elementor de la home).
   El ID es el de la columna actual; si se reconstruye la página y cambia,
   estas reglas simplemente dejan de aplicarse sin romper nada. */
#apus-main-content .elementor-element-38901c0 {
	background: linear-gradient(160deg, var(--jobtex-theme-color, #14a077) 0%, var(--jobtex-theme-hover-color, #0e7355) 100%) !important;
	border-radius: 0;
	height: 100%;
}

#apus-main-content .elementor-element-38901c0 .elementor-heading-title,
#apus-main-content .elementor-element-38901c0 p {
	color: #ffffff !important;
}

#apus-main-content .elementor-element-38901c0 .elementor-widget-text-editor p {
	color: rgba(255, 255, 255, .85) !important;
}

/* Botón "Carga tu CV": blanco sobre la tarjeta verde.
   Solo dentro del contenido (#apus-main-content); el "Publicar vacante"
   del header usa el mismo .widget-submit-btn y debe seguir verde. */
#apus-main-content .widget-submit-btn a.btn.btn-theme,
#apus-main-content .widget-submit-btn .btn.btn-theme {
	background: #ffffff !important;
	border: none;
	color: var(--jobtex-theme-hover-color, #0e7355) !important;
	box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .45) !important;
}

#apus-main-content .widget-submit-btn a.btn.btn-theme:hover {
	transform: translateY(-2px);
}