/* ==========================================================================
   01-base.css — Tokens de diseño, base, botones, formularios y componentes
   compartidos (paginación, widgets, badges, breadcrumb, 404, back-to-top).
   ========================================================================== */

:root {
	/* No tocamos --jobtex-theme-color (#14A077): el padre deriva de él las
	   variantes alfa (--jobtex-theme-color-0xx) inline y deben seguir casando. */
	--jt-ink: #101828;
	--jt-ink-2: #475467;
	/* #667085 en vez de #98a2b3: contraste AA sobre blanco */
	--jt-ink-3: #667085;
	--jt-bg: #f6f8fa;
	--jt-surface: #ffffff;
	--jt-border: #e6eaf0;
	--jt-border-soft: #eef1f5;
	--jt-radius-sm: 10px;
	--jt-radius: 14px;
	--jt-radius-lg: 18px;
	--jt-pill: 999px;
	--jt-shadow-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
	--jt-shadow-md: 0 8px 20px -8px rgba(16, 24, 40, .14);
	--jt-shadow-lg: 0 18px 36px -14px rgba(16, 24, 40, .2);
	--jt-ring: 0 0 0 4px var(--jobtex-theme-color-015, rgba(20, 160, 119, .15));
	--jt-ease: cubic-bezier(.4, 0, .2, 1);
	--jt-grad: linear-gradient(135deg, var(--jobtex-theme-color) 0%, var(--jobtex-theme-hover-color) 100%);
}

html {
	scroll-behavior: smooth;
}

body {
	background-color: var(--jt-bg);
	color: var(--jt-ink-2);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

#wrapper-container {
	background-color: var(--jt-bg);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--jobtex-heading-color, var(--jt-ink));
	letter-spacing: -.02em;
	font-weight: 700;
}

a {
	transition: color .2s var(--jt-ease);
}

::selection {
	background: var(--jobtex-theme-color-015, rgba(20, 160, 119, .18));
	color: var(--jobtex-theme-hover-color, #0e7355);
}

::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

::-webkit-scrollbar-track {
	background: transparent;
}

::-webkit-scrollbar-thumb {
	background: #cbd5e1;
	border-radius: 999px;
	border: 2px solid var(--jt-bg);
}

::-webkit-scrollbar-thumb:hover {
	background: var(--jobtex-theme-color, #14a077);
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: none;
	box-shadow: var(--jt-ring);
}

/* Enlace "saltar al contenido": invisible hasta que recibe foco */
.skip-link {
	position: absolute;
	left: 16px;
	top: -60px;
	z-index: 10000;
	background: var(--jobtex-theme-color, #14a077);
	color: #fff;
	padding: .6rem 1.2rem;
	border-radius: 0 0 10px 10px;
	font-weight: 700;
	text-decoration: none;
	transition: top .2s var(--jt-ease);
}

.skip-link:focus {
	top: 0;
	color: #fff;
}

/* --------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */

.btn {
	border-radius: var(--jt-radius-sm);
	font-weight: 600;
	letter-spacing: .01em;
	transition: all .25s var(--jt-ease);
}

.btn.btn-theme {
	background: var(--jt-grad);
	border: none;
	color: #fff;
	box-shadow: 0 6px 14px -6px var(--jobtex-theme-color-08, rgba(20, 160, 119, .55));
}

.btn.btn-theme:hover,
.btn.btn-theme:focus {
	background: var(--jobtex-theme-hover-color, #0e7355);
	transform: translateY(-1px);
	box-shadow: 0 10px 22px -8px var(--jobtex-theme-color-08, rgba(20, 160, 119, .6));
	color: #fff;
}

.btn.btn-theme:active {
	transform: translateY(0);
}

.btn.btn-theme.btn-outline {
	background: transparent;
	border: 1.5px solid var(--jobtex-theme-color, #14a077);
	color: var(--jobtex-theme-color, #14a077);
	box-shadow: none;
}

.btn.btn-theme.btn-outline:hover {
	background: var(--jt-grad);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 8px 18px -8px var(--jobtex-theme-color-08, rgba(20, 160, 119, .55));
}

.btn.btn-theme.btn-inverse {
	background: linear-gradient(135deg, var(--jobtex-theme-color, #14a077) 0%, var(--jobtex-second-color, #1f4b3f) 100%);
	border: none;
	color: #fff;
	box-shadow: 0 6px 14px -6px rgba(31, 75, 63, .55);
}

.btn.btn-theme.btn-inverse:hover {
	background: linear-gradient(135deg, var(--jobtex-theme-hover-color, #0e7355) 0%, var(--jobtex-second-hover-color, #121212) 100%);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 10px 22px -8px rgba(31, 75, 63, .6);
}

/* Botones creados con Elementor */
.elementor-widget-button a.elementor-button,
.elementor-widget-button .elementor-button-wrapper .elementor-button {
	background: var(--jt-grad);
	border-radius: var(--jt-radius-sm);
	box-shadow: 0 6px 14px -6px var(--jobtex-theme-color-08, rgba(20, 160, 119, .55));
	transition: all .25s var(--jt-ease);
}

.elementor-widget-button a.elementor-button:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 22px -8px var(--jobtex-theme-color-08, rgba(20, 160, 119, .6));
}

.btn.btn-dark-outline,
.btn-dark-outline.btn {
	background: var(--jt-surface);
	border: 1.5px solid #d0d5dd;
	color: var(--jt-ink);
	border-radius: var(--jt-radius-sm);
}

.btn.btn-dark-outline:hover,
.btn-dark-outline.btn:hover {
	border-color: var(--jobtex-theme-color, #14a077);
	color: var(--jobtex-theme-color, #14a077);
	background: var(--jobtex-theme-color-005, rgba(20, 160, 119, .05));
}

/* Corazón / shortlist */
a.btn-follow {
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--jt-pill);
	background: var(--jt-surface);
	border: 1px solid var(--jt-border);
	box-shadow: var(--jt-shadow-sm);
	color: var(--jt-ink-3);
	transition: all .25s var(--jt-ease);
}

a.btn-follow:hover {
	color: #eb4d4d;
	border-color: #ffd5d5;
	background: #fff5f5;
	transform: scale(1.06);
}

a.btn-follow.added,
a.btn-follow.btn-added-job-shortlist.added {
	color: #eb4d4d;
	background: #fff0f0;
	border-color: #ffd5d5;
}

/* "Leer más" del blog */
a.btn-readmore {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--jobtex-theme-color, #14a077);
	font-weight: 700;
	text-decoration: none;
}

a.btn-readmore::after {
	content: "\2192";
	transition: transform .25s var(--jt-ease);
}

a.btn-readmore:hover::after {
	transform: translateX(4px);
}

/* Cargar más (listados) */
a.apus-loadmore-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--jt-surface);
	border: 1.5px solid var(--jt-border);
	border-radius: var(--jt-pill);
	color: var(--jt-ink);
	font-weight: 600;
	padding: .7rem 1.8rem;
	box-shadow: var(--jt-shadow-sm);
	transition: all .25s var(--jt-ease);
}

a.apus-loadmore-btn:hover {
	border-color: var(--jobtex-theme-color, #14a077);
	color: var(--jobtex-theme-color, #14a077);
	box-shadow: var(--jt-shadow-md);
	transform: translateY(-1px);
}

/* Botones de acción en tablas (dashboard) */
a.btn-action-icon,
.btn-action-icon {
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--jt-radius-sm);
	background: #f2f4f7;
	color: var(--jt-ink-2);
	transition: all .2s var(--jt-ease);
}

.btn-action-icon:hover {
	background: var(--jobtex-theme-color-008, rgba(20, 160, 119, .1));
	color: var(--jobtex-theme-color, #14a077);
}

.btn-action-icon.remove-btn:hover,
.btn-action-icon.deleted:hover {
	background: #fee4e2;
	color: #b42318;
}

/* --------------------------------------------------------------------------
   Formularios
   -------------------------------------------------------------------------- */

.form-control,
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="tel"],
.form-group input[type="url"],
.form-group input[type="number"],
.form-group input[type="date"],
.form-group select,
.form-group textarea,
select.form-control,
select.orderby,
.form-jobtex-ppp select {
	background: var(--jt-surface);
	border: 1px solid var(--jt-border);
	border-radius: var(--jt-radius-sm);
	color: var(--jt-ink);
	padding: .62rem 1rem;
	transition: border-color .2s var(--jt-ease), box-shadow .2s var(--jt-ease);
	box-shadow: none;
}

.form-control:focus,
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
select:focus {
	border-color: var(--jobtex-theme-color, #14a077);
	box-shadow: var(--jt-ring);
	outline: none;
}

.form-control::placeholder {
	color: var(--jt-ink-3);
}

.form-group label {
	color: var(--jt-ink);
	font-weight: 600;
	font-size: .9rem;
	margin-bottom: .4rem;
}

/* --------------------------------------------------------------------------
   Etiquetas, badges y metadatos
   -------------------------------------------------------------------------- */

.job-type,
.job-tags a.tag-job,
.count-more-tags {
	background: var(--jobtex-theme-color-008, rgba(20, 160, 119, .09));
	color: var(--jobtex-theme-hover-color, #0e7355);
	border: none;
	border-radius: var(--jt-pill);
	padding: .32rem .85rem;
	font-size: .78rem;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	transition: all .2s var(--jt-ease);
}

/* Evita el "doble botón": si .job-type envuelve un <a>, el enlace no
   debe repetir el fondo/padding de la pill. */
.job-type a,
a.type-job {
	background: transparent;
	padding: 0;
	margin: 0;
	border-radius: 0;
	color: inherit;
	text-decoration: none;
}

.job-tags a.tag-job:hover {
	background: var(--jobtex-theme-color, #14a077);
	color: #fff;
}

.urgent,
.urgent.urgent-icon {
	background: #fee4e2;
	color: #b42318;
	border-radius: var(--jt-pill);
	padding: .32rem .85rem;
	font-size: .78rem;
	font-weight: 600;
}

.featured-text {
	background: #fffaeb;
	color: #b54708;
	border-radius: var(--jt-pill);
	padding: .32rem .85rem;
	font-size: .78rem;
	font-weight: 600;
}

.badge {
	border-radius: var(--jt-pill);
	padding: .45em .9em;
	font-weight: 600;
	letter-spacing: .02em;
}

.job-location,
.job-deadline,
.job-metas,
.candidate-metas,
.employer-metas,
.job-meta {
	color: var(--jt-ink-3);
	font-size: .875rem;
}

.job-salary {
	color: var(--jt-ink);
	font-weight: 700;
}

.category-job,
.category-job a,
a.categories-name {
	color: var(--jobtex-theme-color, #14a077);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   Widgets (sidebars y paneles)
   -------------------------------------------------------------------------- */

aside.widget,
.widget {
	background: var(--jt-surface);
	border: 1px solid var(--jt-border);
	border-radius: var(--jt-radius);
	padding: 1.4rem;
	box-shadow: var(--jt-shadow-sm);
}

.widget-title,
aside.widget h2.widget-title,
aside.widget h4.widget-title {
	position: relative;
	padding-left: 14px;
	font-size: 1.05rem;
	margin-bottom: 1.1rem;
}

.widget-title::before {
	content: "";
	position: absolute;
	left: 0;
	top: .15em;
	bottom: .15em;
	width: 4px;
	border-radius: 4px;
	background: var(--jt-grad);
}

/* Títulos de sección en fichas (Job Description, Overview…) */
.job-detail-description h3.title,
.job-detail-detail h3.title,
.job-detail-video h3.title,
.job-detail-portfolio h3.title,
h3.title {
	position: relative;
	padding-left: 16px;
	font-size: 1.25rem;
}

.job-detail-description h3.title::before,
.job-detail-detail h3.title::before,
h3.title::before {
	content: "";
	position: absolute;
	left: 0;
	top: .12em;
	bottom: .12em;
	width: 4px;
	border-radius: 4px;
	background: var(--jt-grad);
}

/* --------------------------------------------------------------------------
   Paginación
   -------------------------------------------------------------------------- */

.apus-pagination .page-numbers,
.pagination .page-numbers,
.nav-links .page-numbers {
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0 4px;
	border: 1px solid var(--jt-border);
	border-radius: 12px;
	background: var(--jt-surface);
	color: var(--jt-ink-2);
	font-weight: 600;
	text-decoration: none;
	box-shadow: var(--jt-shadow-sm);
	transition: all .2s var(--jt-ease);
}

.apus-pagination .page-numbers:hover,
.pagination .page-numbers:hover,
.nav-links .page-numbers:hover {
	border-color: var(--jobtex-theme-color, #14a077);
	color: var(--jobtex-theme-color, #14a077);
	transform: translateY(-1px);
}

.apus-pagination .page-numbers.current,
.pagination .page-numbers.current,
.nav-links .page-numbers.current {
	background: var(--jt-grad);
	border-color: transparent;
	color: #fff;
	box-shadow: 0 6px 14px -6px var(--jobtex-theme-color-08, rgba(20, 160, 119, .55));
}

.jobs-pagination-wrapper,
.main-pagination-wrapper {
	margin-top: 2rem;
}

/* --------------------------------------------------------------------------
   Breadcrumb / títulos de página
   -------------------------------------------------------------------------- */

#apus-breadscrumb.breadcrumb-page {
	background: var(--jt-surface);
	border-bottom: 1px solid var(--jt-border);
}

#apus-breadscrumb .bread-title {
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	font-weight: 800;
	letter-spacing: -.03em;
}

#apus-breadscrumb .breadcrumb {
	margin-bottom: 0;
}

#apus-breadscrumb .breadcrumb li,
#apus-breadscrumb .breadcrumb a {
	font-size: .85rem;
	color: var(--jt-ink-3);
}

#apus-breadscrumb .breadcrumb li.active span,
#apus-breadscrumb .breadcrumb .active {
	color: var(--jobtex-theme-color, #14a077);
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */

.error-404 .slogan .title-big {
	font-size: clamp(3rem, 8vw, 6rem);
	font-weight: 800;
	background: var(--jt-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.error-404 .return .btn-theme {
	border-radius: var(--jt-pill);
	padding: .8rem 2.2rem;
}

/* --------------------------------------------------------------------------
   Volver arriba
   -------------------------------------------------------------------------- */

#back-to-top.add-fix-top {
	background: var(--jt-grad) !important;
	border-radius: var(--jt-pill) !important;
	box-shadow: 0 10px 24px -8px var(--jobtex-theme-color-08, rgba(20, 160, 119, .6)) !important;
	color: #fff !important;
	transition: transform .25s var(--jt-ease);
}

#back-to-top.add-fix-top:hover {
	transform: translateY(-3px);
}

/* --------------------------------------------------------------------------
   Búsqueda (widget)
   -------------------------------------------------------------------------- */

.widget-search .form-control {
	border-radius: var(--jt-pill);
	padding: .7rem 3rem .7rem 1.3rem;
	background: #f9fafb;
}

.widget-search .btn-search {
	color: var(--jobtex-theme-color, #14a077);
}