/*
 * BLOQUE 2 — páginas públicas (Vacantes, Detalle de vacante, Empresas,
 * Detalle de empresa, ¿Cómo funciona?, Contacto, Login/Registro, Aviso de
 * privacidad). Sistema visual maestro V3 aprobado en el checkpoint de
 * Home/Header/Paneles — mismos tokens, mismo header/footer nativos ya
 * restilados globalmente en conekte-style.css, aquí solo lo específico de
 * estas plantillas nativas de Jobster (job-search.php, company-search.php,
 * single_job_*, single_company_*, page.php, sign-in.php, etc.).
 *
 * .pxp-page-header-simple es la franja de título que comparten Vacantes,
 * Empresas y cualquier página de page.php con color de fondo configurado
 * — Jobster la imprime con background-color inline (var(--pxpMainColorLight)
 * o var(--pxpSecondaryColorLight) según la plantilla), así que se
 * necesita !important para convertirla en el mismo héroe azul marino que
 * ya usan el resto de páginas, en vez de restilar cada plantilla suelta.
 */
.pxp-page-header-simple {
	background-color: var(--pxpMainColorDark) !important;
}

.pxp-page-header-simple h1,
.pxp-page-header-simple h2 {
	color: #fff;
}

.pxp-page-header-simple .pxp-hero-subtitle {
	color: #d9e7f5 !important;
}

/* ---------------------------------------------------------------------
 * Detalle de vacante (single_job_wide.php): sin foto de portada
 * (job_cover), Jobster deja .pxp-single-job-cover.pxp-no-img como un
 * simple respiro de 1.5rem — no hay ninguna franja de color, el título
 * cae directo sobre blanco. Se le da presencia de héroe (mismo azul
 * marino que el resto del sitio) y el logo de la empresa flota encima,
 * igual que ya hacía de forma nativa sobre una foto de portada real.
 * ------------------------------------------------------------------- */
.pxp-single-job-cover.pxp-no-img {
	height: 180px !important;
	background-color: var(--pxpMainColorDark);
}

.pxp-single-job-cover-logo.pxp-no-cover {
	margin-top: -60px !important;
	margin-left: 60px !important;
	border: 3px solid #fff !important;
}

/* ---------------------------------------------------------------------
 * Detalle de empresa (single_company_*): sin foto de portada, el héroe
 * cae en su fondo por defecto (var(--pxpMainColorLight), un azul muy
 * claro) más el velo oscuro que Jobster superpone para dar contraste a
 * una foto real (.pxp-hero-opacity, 30% negro) — la mezcla de ambos da
 * un gris turbio en vez de un color intencional. Mismo tratamiento que
 * el héroe de vacante: azul marino sólido y se retira el velo, que ya
 * no hace falta sin foto de por medio.
 * ------------------------------------------------------------------- */
/* A diferencia de .pxp-page-header-simple y .pxp-single-job-cover, este
 * héroe SÍ arranca en y:0, detrás del header fijo (~80px) — y así debe
 * quedarse: header.php llama a jobster_get_user_nav('top', true) para
 * is_singular('company') con layout "wide" precisamente para que el
 * menú principal (.pxp-nav.pxp-light) se pinte en blanco sobre este
 * héroe oscuro. Empujar el héroe hacia abajo "arreglaba" el botón de
 * Iniciar sesión pero dejaba ese menú en blanco-sobre-blanco. El hueco
 * real es que el <a> de "Iniciar sesión" para visitante anónimo
 * (jobster-plugin/views/user-nav.php) no recibe ninguna clase clara
 * quando $is_light=true — ver el color explícito más abajo. */
.pxp-single-company-hero.pxp-no-cover {
	background-color: var(--pxpMainColorDark) !important;
}

.pxp-single-company-hero.pxp-no-cover .pxp-hero-opacity {
	display: none;
}

/* El trigger "Iniciar sesión" para visitante anónimo
 * (.pxp-user-nav-trigger) no recibe ninguna clase de contraste cuando
 * jobster_get_user_nav() se llama con $is_light=true (pasa un
 * $is_on_light_class vacío, no uno "claro") — se queda con el texto casi
 * negro por defecto de Bootstrap, invisible sobre el héroe oscuro. El
 * resto del menú (.pxp-nav.pxp-light) sí se pinta en blanco, así que se
 * iguala el trigger a ese mismo tratamiento cuando comparten header. */
.pxp-nav.pxp-light ~ .pxp-user-nav .pxp-user-nav-trigger {
	color: #fff !important;
	border-color: rgba(255, 255, 255, 0.6) !important;
}

/* El logo real de cada empresa (company_logo) se pinta como
 * background-image sobre .pxp-single-company-hero-logo, sin ningún
 * contenedor claro detrás — bien sobre el tinte claro por defecto de
 * Jobster, pero los tres logos oficiales (ABACO, DINAMO, REFACIL) tienen
 * zonas negras/oscuras que se pierden contra el héroe navy que ya usa
 * este sitio (ver .pxp-single-company-hero.pxp-no-cover más arriba). Se
 * agrega una placa blanca con margen interno (mismo recurso que ya usa
 * nativamente la tarjeta de /empresas/, que sí pone el logo sobre
 * blanco) — no se toca el archivo del logo, solo su fondo.
 */
.pxp-single-company-hero-logo {
	background-color: #fff;
	background-size: contain;
	box-sizing: border-box;
	padding: 10px;
}

/* El logo del header en modo pxp-light espera una variante "second logo"
 * blanca (jobster_second_logo) que nunca se configuró — sin ella, sigue
 * mostrando el mismo archivo azul marino de siempre, casi invisible
 * sobre este héroe oscuro. Se invierte por filtro, mismo recurso ya
 * usado en el sidebar de los paneles Candidato/RH. */
.pxp-header .pxp-logo.pxp-light > a > img {
	filter: brightness(0) invert(1);
}

/* El panel lateral de información adicional de la empresa (redes,
 * sitio web, etc.) queda con un nodo de texto en blanco cuando esos
 * campos no están cargados — CSS :empty no lo detecta porque ese nodo
 * (aunque solo tenga espacios) sigue contando como contenido, así que
 * el ocultamiento real está en assets/js/conekte-header.js. No se
 * inventa ningún dato: solo se oculta un contenedor real y vacío. */

/* ---------------------------------------------------------------------
 * Fase 2 de arquitectura RH (2026-08-29): bloque "Condiciones laborales"
 * (Vacante\Condiciones::bloque_html_publico(), inyectado desde
 * wp-content/themes/jobster-child/single-job.php) — sueldo/periodo de
 * pago/horario/ingresos adicionales de la vacante pública. Mismos tokens
 * --ckt-* que el resto del sitio, con la tarjeta clara ya usada en
 * .pxp-single-job-benefits-item como referencia de estilo.
 * ------------------------------------------------------------------- */
.ckt-condiciones-laborales h2 {
	margin-bottom: var(--ckt-space-md);
}

.ckt-condiciones-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--ckt-space-md);
}

.ckt-condicion-item {
	display: flex;
	gap: var(--ckt-space-sm);
	align-items: flex-start;
	background: var(--ckt-background);
	border: 1px solid var(--ckt-border);
	border-radius: var(--ckt-radius-md);
	padding: var(--ckt-space-md);
}

.ckt-condicion-item--full {
	grid-column: 1 / -1;
}

.ckt-condicion-icono {
	font-size: 1.25rem;
	line-height: 1;
	flex-shrink: 0;
}

.ckt-condicion-label {
	color: var(--ckt-text-muted);
	font-size: var(--ckt-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin-bottom: 2px;
}

.ckt-condicion-valor {
	font-weight: 600;
	color: var(--ckt-text);
}

.ckt-condicion-lista {
	margin: 0;
	padding-left: 1.1em;
	font-weight: 600;
	color: var(--ckt-text);
}

.ckt-condicion-lista li {
	margin-bottom: 2px;
}

/* ---------------------------------------------------------------------
 * Rediseño comercial 2026-08-29 — /vacantes/ sin resultados: bloque
 * añadido por assets/js/conekte-empty-states.js justo después de la
 * fila de tarjetas nativa cuando esta llega vacía (ver comentario en
 * ese archivo sobre por qué no es un selector :empty de CSS).
 * ------------------------------------------------------------------- */
.ckt-vacantes-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 1.25rem;
	background: var(--pxpMainColorLight);
	border-radius: 20px;
	padding: 3rem 2rem;
	margin-top: 1.5rem;
}

.ckt-vacantes-empty-image {
	width: 140px;
	height: 140px;
	border-radius: 16px;
	background-size: cover;
	background-position: center;
	box-shadow: 0 14px 30px rgba(15, 42, 72, 0.16);
}

.ckt-vacantes-empty-copy h3 {
	margin: 0 0 8px;
	font-size: 20px;
	font-weight: 800;
	color: var(--pxpMainColorDark);
}

.ckt-vacantes-empty-copy p {
	margin: 0;
	color: #4a5b72;
	font-size: 14px;
	max-width: 420px;
}

/* ---------------------------------------------------------------------
 * Rediseño comercial 2026-08-29 — /empresas/: CTA comercial añadido por
 * assets/js/conekte-empty-states.js justo debajo del listado nativo de
 * empresas (company-search.php es una plantilla del plugin Jobster, sin
 * hook de plantilla disponible sin tocar su código).
 * ------------------------------------------------------------------- */
.ckt-empresas-cta {
	position: relative;
	border-radius: 25px;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	padding: 60px 6%;
	display: flex;
	align-items: center;
}

.ckt-empresas-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(7, 30, 59, .92), rgba(7, 30, 59, .55) 60%, rgba(7, 30, 59, .18));
}

.ckt-empresas-cta-copy {
	position: relative;
	z-index: 2;
	max-width: 560px;
	color: #fff;
}

.ckt-empresas-cta-copy h2 {
	color: #fff;
	margin: 0 0 12px;
}

.ckt-empresas-cta-copy p {
	color: #d9e7f5;
	margin: 0 0 24px;
}

.ckt-empresas-cta-copy .pxp-section-cta {
	background: var(--ckt-green, #72d34e);
	color: var(--pxpMainColorDark);
	border: 0;
	font-weight: 900;
}

@media (max-width: 575.98px) {
	.ckt-empresas-cta {
		padding: 40px 6%;
	}

	.ckt-vacantes-empty-image {
		width: 110px;
		height: 110px;
	}
}

/* ---------------------------------------------------------------------
 * Rediseño comercial 2026-08-29 — /contacto/: layout de dos columnas
 * (formulario + información) construido directamente en Elementor sobre
 * la página "Contacto" (modo builder). El widget contact_form nativo de
 * Jobster no se toca — mismo destinatario configurado en el widget.
 * ------------------------------------------------------------------- */
.ckt-contact-grid {
	display: grid !important;
	grid-template-columns: 1.05fr 1fr;
	gap: 3rem;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 6% 80px;
	align-items: start;
}

/*
 * width:100% + min-width:0: al forzar display:grid sobre un container
 * de Elementor (que internamente asume un padre flex y reparte
 * flex-basis/flex-grow a sus hijos), esas propiedades flex dejan de
 * tener efecto dentro de una celda de grid — sin este ancho explícito
 * cada columna se encogía a su contenido mínimo (los campos del
 * formulario nativo quedaban de ~125px de ancho en vez de ocupar la
 * columna completa).
 */
.ckt-contact-grid > .e-con {
	width: 100%;
	min-width: 0;
}

.ckt-contact-form-col,
.ckt-contact-form-col .elementor-widget-contact_form,
.ckt-contact-form-col .elementor-widget-container {
	width: 100%;
}

/*
 * El formulario nativo de Jobster (contact_form) reparte su columna
 * Bootstrap por breakpoint de VIEWPORT (col-lg-6 col-xxl-4 = 33% en
 * pantallas ≥1400px), pensado para vivir en un contenedor a todo el
 * ancho de página. Al vivir ahora dentro de la mitad de
 * .ckt-contact-grid, ese 33% se calculaba sobre una columna ya angosta
 * y los campos quedaban de ~125px. Se fuerza a ocupar toda la columna
 * disponible, sin tocar el widget nativo.
 */
.ckt-contact-form-col .col-lg-6.col-xxl-4 {
	max-width: 100%;
	width: 100%;
	flex: 0 0 100%;
}

.ckt-contact-info-col h2 {
	color: var(--pxpMainColorDark);
}

.ckt-contact-points {
	margin-top: 1.5rem;
	display: grid;
	gap: 14px;
}

.ckt-contact-point {
	align-items: flex-start !important;
}

.ckt-contact-point span {
	margin-top: 2px;
	flex-shrink: 0;
}

.ckt-contact-point strong {
	display: block;
	color: var(--pxpMainColorDark);
	font-size: 14px;
}

.ckt-contact-point p {
	margin: 2px 0 0;
	color: #65748a;
	font-size: 13px;
	font-weight: 400;
}

/* Widget "image" nativo de Elementor (<img> real) en vez de
 * background-image de container — ver comentario equivalente en
 * conekte-home.css (.ckt-v3-split-image) sobre por qué el fondo de un
 * container Elementor no es fiable aquí (lazy-load nativo). */
.ckt-contact-image {
	margin-top: 2rem;
	height: 220px;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 18px 40px rgba(15, 42, 72, 0.14);
}

.ckt-contact-image .elementor-widget-image,
.ckt-contact-image .elementor-widget-container {
	height: 100%;
	width: 100%;
}

.ckt-contact-image img {
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	object-fit: cover !important;
	display: block !important;
}

@media (max-width: 991.98px) {
	.ckt-contact-grid {
		grid-template-columns: 1fr;
	}

	.ckt-contact-image {
		height: 180px;
	}
}

/* ---------------------------------------------------------------------
 * Fase 71 (2026-08-29) — ¿Cómo funciona? rediseñada por completo
 * (página Elementor, modo "builder"). Los pasos reutilizan las clases
 * ckt-process-step* ya rediseñadas en conekte-home.css (Inicio y esta
 * página comparten exactamente el mismo componente). Aquí solo lo
 * propio de esta página: la foto del Hero y el contenedor general.
 * ------------------------------------------------------------------- */
.ckt-cf-hero {
	padding: 50px 6% 10px;
	max-width: 1180px;
	margin: 0 auto;
}

.ckt-cf-hero-image {
	max-width: 1180px;
	margin: 30px auto 0;
	height: 380px;
	border-radius: 23px;
	overflow: hidden;
	box-shadow: 0 18px 40px rgba(15, 42, 72, 0.14);
}

.ckt-cf-hero-image .elementor-widget-image,
.ckt-cf-hero-image .elementor-widget-container {
	height: 100%;
	width: 100%;
}

.ckt-cf-hero-image img {
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	object-fit: cover !important;
	display: block !important;
}

.ckt-cf-steps {
	padding: 70px 6%;
	max-width: 1180px;
	margin: 0 auto;
}

@media (max-width: 575.98px) {
	.ckt-cf-hero-image {
		height: 220px;
	}
}

/* ---------------------------------------------------------------------
 * Fase 101.6: aviso de "vacante pausada/finalizada" en la página pública
 * de detalle de vacante (Vacante\Estatus::bloque_html_publico()). Vacío
 * en el caso "activa" (la inmensa mayoría), así que esta regla no se
 * activa para ninguna vacante normal.
 * ------------------------------------------------------------------- */
.ckt-vacante-estatus-aviso {
	max-width: 1180px;
	margin: 20px auto 0;
	padding: 16px 20px;
	border-radius: 12px;
	font-size: 14px;
}

.ckt-vacante-estatus-aviso strong {
	display: block;
	margin-bottom: 4px;
	font-size: 16px;
}

.ckt-vacante-estatus-aviso p {
	margin: 0;
}

.ckt-vacante-estatus-aviso--pausada {
	background: rgba(245, 158, 11, 0.12);
	color: #92610A;
	border: 1px solid rgba(245, 158, 11, 0.35);
}

.ckt-vacante-estatus-aviso--finalizada {
	background: rgba(91, 107, 130, 0.12);
	color: #4A5B72;
	border: 1px solid rgba(91, 107, 130, 0.3);
}

@media (max-width: 575.98px) {
	.ckt-vacante-estatus-aviso {
		margin: 14px 16px 0;
	}
}

/* ---------------------------------------------------------------------
 * Fase 101.9: guía de instalación PWA (/instala-la-app/).
 *
 * .ckt-guia-paso-numero — insignia numerada para los pasos de
 * instalación, reutilizando el mismo círculo/paleta/tamaño que
 * .ckt-process-step-number (página "¿Cómo funciona?", .ckt-process-row/
 * .ckt-process-step SÍ se reutilizan tal cual, sin ninguna regla nueva)
 * pero sin el icono en máscara CSS superpuesto: esos iconos son uno por
 * paso (.ckt-step-perfil, .ckt-step-vacante, etc.), específicos del
 * proceso de postulación, y no existe un equivalente ya hecho para
 * "abrir Safari"/"pulsar Compartir"/etc. Aquí basta mostrar el número.
 * ------------------------------------------------------------------- */
.ckt-guia-paso-numero {
	width: 48px !important;
	height: 48px !important;
	border-radius: 50% !important;
	background-color: var(--pxpMainColorLight) !important;
	color: var(--pxpMainColor) !important;
	display: flex !important;
	flex: 0 0 48px !important;
	align-items: center !important;
	justify-content: center !important;
	margin: 0 auto 0.85rem !important;
	font-weight: 700;
	font-size: 18px;
}

/* Placeholder visual para capturas de pantalla reales pendientes (no
 * disponibles en Local — brief 101.9 §4/§5/§6: "no inventar capturas...
 * dejar la estructura preparada"). Retirar en cuanto existan capturas
 * reales que insertar en su lugar. */
.ckt-captura-pendiente {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 180px;
	border: 2px dashed var(--pxpLightGrayColor);
	border-radius: 16px;
	color: var(--pxpDarkGrayColor);
	font-size: 13px;
	text-align: center;
	padding: 20px;
	max-width: 320px;
	margin: 24px auto 0;
}