/**
 * Fase 97 (97_IMPLEMENTACION_EXPERIENCIA_PWA_LOCAL_2026-09-08.md):
 * experiencia visual "app shell" — splash, navegación inferior, aviso de
 * instalación, y rediseño mobile-first de tarjetas/paneles existentes.
 *
 * Todas las reglas de rediseño de tarjetas/paneles están acotadas a
 * `max-width: 899.98px` a propósito: el requisito es "mobile-first, sin
 * afectar desktop" — por encima de ese punto de quiebre, Jobster/Conekte
 * conservan exactamente su presentación actual (tablas/columnas anchas
 * ya aprobadas en fases previas).
 *
 * Usa exclusivamente los tokens ya definidos en conekte-style.css
 * (--ckt-primary, --ckt-secondary, etc.) — no se define ninguna paleta
 * nueva.
 */

/* ==========================================================
   1. SPLASH SCREEN — solo visible en modo standalone (ver JS)
   ========================================================== */

.ckt-pwa-splash {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	background: var( --ckt-secondary );
	color: #fff;
	text-align: center;
	padding: 24px;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.ckt-pwa-splash-visible {
	display: flex;
	opacity: 1;
}

.ckt-pwa-splash-oculto {
	opacity: 0;
	pointer-events: none;
}

.ckt-pwa-splash-logo img {
	width: 88px;
	height: 88px;
	border-radius: 20px;
	background: #fff;
	padding: 12px;
}

.ckt-pwa-splash-nombre {
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: 0.02em;
}

.ckt-pwa-splash-nombre span {
	color: var( --ckt-accent, #72D34E );
	font-weight: 600;
}

.ckt-pwa-splash-slogan {
	font-size: 0.95rem;
	color: rgba( 255, 255, 255, 0.75 );
	max-width: 260px;
}

@media ( prefers-reduced-motion: reduce ) {
	.ckt-pwa-splash {
		transition: none;
	}
}

/* ==========================================================
   2. NAVEGACIÓN INFERIOR — mobile-first, oculta en desktop
   ========================================================== */

.ckt-pwa-bottom-nav {
	display: none;
}

@media ( max-width: 899.98px ) {
	/* El padding solo se aplica cuando la barra existe en el DOM (ver
	   conekte-pwa-shell.js) — el panel RH no la incluye (class-pwa-shell.php)
	   y no debe reservar un espacio en blanco que no usa. */
	body.ckt-pwa-has-bottom-nav {
		padding-bottom: calc( 58px + env( safe-area-inset-bottom, 0px ) );
	}

	.ckt-pwa-bottom-nav {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 2000;
		display: flex;
		justify-content: space-between;
		align-items: stretch;
		background: var( --ckt-surface, #fff );
		border-top: 1px solid var( --ckt-border, #e1e8f1 );
		padding-bottom: env( safe-area-inset-bottom, 0px );
		box-shadow: 0 -2px 10px rgba( 16, 36, 71, 0.06 );
	}

	.ckt-pwa-nav-item {
		flex: 1 1 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 2px;
		min-height: 56px;
		min-width: 44px;
		padding: 6px 2px;
		color: var( --ckt-text-muted, #718095 );
		text-decoration: none;
		font-size: 0.6875rem;
		line-height: 1.1;
	}

	.ckt-pwa-nav-item .fa {
		font-size: 1.1rem;
	}

	.ckt-pwa-nav-item.ckt-pwa-nav-active {
		color: var( --ckt-primary, #0875ED );
		font-weight: 600;
	}

	.ckt-pwa-nav-item:focus-visible {
		outline: 2px solid var( --ckt-primary, #0875ED );
		outline-offset: -2px;
	}
}

/* ==========================================================
   3. AVISO DE INSTALACIÓN
   ========================================================== */

.ckt-pwa-install-banner {
	display: none;
	position: fixed;
	left: 12px;
	right: 12px;
	z-index: 2500;
	bottom: calc( 12px + env( safe-area-inset-bottom, 0px ) );
	background: var( --ckt-secondary, #102447 );
	color: #fff;
	border-radius: 14px;
	padding: 16px;
	box-shadow: 0 8px 24px rgba( 16, 36, 71, 0.3 );
	flex-direction: column;
	gap: 12px;
}

@media ( max-width: 899.98px ) {
	.ckt-pwa-install-banner.ckt-pwa-install-visible {
		bottom: calc( 70px + env( safe-area-inset-bottom, 0px ) );
	}
}

.ckt-pwa-install-banner.ckt-pwa-install-visible {
	display: flex;
}

.ckt-pwa-install-texto {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 0.875rem;
}

.ckt-pwa-install-texto strong {
	font-size: 1rem;
}

.ckt-pwa-install-ios-instrucciones {
	color: rgba( 255, 255, 255, 0.8 );
}

.ckt-pwa-install-acciones {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
}

.ckt-pwa-install-btn {
	border: none;
	border-radius: 8px;
	padding: 10px 16px;
	font-size: 0.875rem;
	font-weight: 600;
	min-height: 44px;
	cursor: pointer;
}

.ckt-pwa-install-btn-primario {
	background: var( --ckt-primary, #0875ED );
	color: #fff;
}

.ckt-pwa-install-btn-secundario {
	background: transparent;
	color: rgba( 255, 255, 255, 0.85 );
}

.ckt-pwa-install-btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* ==========================================================
   4. TARJETAS DE VACANTES (Jobster nativo, .pxp-jobs-card-2*) — móvil
   ========================================================== */

@media ( max-width: 899.98px ) {
	.pxp-jobs-card-1,
	.pxp-jobs-card-2 {
		/* Fase 101: antes 14px/sombra propia, hardcodeados — ahora usa
		   los mismos tokens que el resto de tarjetas del sitio
		   (--ckt-radius-lg/--ckt-shadow-card, ver conekte-style.css),
		   para que las tarjetas de Vacantes y las del panel candidato
		   compartan el mismo lenguaje visual "de app". */
		border-radius: var( --ckt-radius-lg, 16px ) !important;
		padding: 14px !important;
		box-shadow: var( --ckt-shadow-card, 0 5px 18px rgba( 16, 36, 71, 0.05 ) );
	}

	.pxp-jobs-card-1-title,
	.pxp-jobs-card-2-title {
		font-size: 1rem !important;
		font-weight: 700 !important;
		line-height: 1.3 !important;
	}

	.pxp-jobs-card-1-location,
	.pxp-jobs-card-1-type,
	.pxp-jobs-card-1-date,
	.pxp-jobs-card-2-location,
	.pxp-jobs-card-2-type,
	.pxp-jobs-card-2-salary,
	.pxp-jobs-card-2-date,
	.pxp-jobs-card-2-date-small {
		font-size: 0.8125rem !important;
	}

	.pxp-jobs-card-1-company-logo,
	.pxp-jobs-card-2-company-logo {
		width: 44px !important;
		height: 44px !important;
	}
}

/* ==========================================================
   5. PANEL CANDIDATO / RH — tarjetas y resumen, móvil
   ========================================================== */

@media ( max-width: 899.98px ) {
	.ckt-card {
		/* Fase 101: antes 14px hardcodeado, distinto del token real
		   (--ckt-radius-lg, 16px, definido en conekte-style.css) — se
		   unifica para que esta regla nunca vuelva a desalinearse de la
		   definición base de .ckt-card. */
		border-radius: var( --ckt-radius-lg, 16px );
		padding: 16px;
	}

	.ckt-postulacion-card,
	.ckt-rh-stat {
		min-height: 44px;
	}

	.ckt-candidato-tabs {
		display: flex;
		overflow-x: auto;
		gap: 4px;
		padding-bottom: 4px;
		-webkit-overflow-scrolling: touch;
	}

	.ckt-candidato-tab {
		flex: 0 0 auto;
		min-height: 44px;
		display: flex;
		align-items: center;
		padding: 8px 14px;
		white-space: nowrap;
	}

	/* Notificaciones: el estado "no leída" no depende solo del color
	   (ya trae texto "No leída" en el marcado existente) — aquí solo se
	   refuerza el tamaño táctil y la jerarquía visual. */
	.ckt-notificacion {
		/* Fase 101: antes 12px hardcodeado — distinto tanto del token
		   real (--ckt-radius-lg) como del valor que ya usaba .ckt-card
		   en la misma vista (14px), una inconsistencia visible entre
		   tarjetas contiguas del mismo panel. Unificado. */
		padding: 14px;
		border-radius: var( --ckt-radius-lg, 16px );
	}

	.ckt-notificacion-ref {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}
}

/* ==========================================================
   6. LOGIN (modal nativo Jobster) — ajustes táctiles móviles
   ========================================================== */

@media ( max-width: 899.98px ) {
	#pxp-signin-modal .pxp-modal-cta,
	#pxp-signup-modal .pxp-modal-cta {
		min-height: 44px;
	}

	#pxp-signin-modal-remember,
	#pxp-signup-modal-consent-privacidad {
		width: 20px;
		height: 20px;
	}
}

/* ==========================================================
   7. SAFE AREAS — header sticky de Jobster (top), sin ocultar contenido
   ========================================================== */

@media ( max-width: 899.98px ) {
	.pxp-header {
		padding-top: env( safe-area-inset-top, 0px );
	}
}

/* ==========================================================
   8. HEADER COMPACTO — Fase 97B (item 1 y 8: "el header móvil
   debe ser compacto" / "todas las pantallas deben compartir
   header app"). Sitewide, no solo Home: el mismo header de
   Jobster (fixed-top) aparece en toda la app.
   ========================================================== */

@media ( max-width: 899.98px ) {
	.pxp-header {
		min-height: 56px;
	}

	.pxp-header img {
		max-height: 34px;
		width: auto;
	}
}

/* ==========================================================
   9. HOME MOBILE — Fase 97B (97B_CORRECCION_VISUAL_PWA_LOCAL):
   corrección de la Fase 97, que dejó la navegación inferior y
   las tarjetas móviles resueltas pero nunca tocó la Home V3
   (conekte-home.css, Fase 71/72) — esa Home sigue diseñada como
   sitio web corporativo (hero editorial + foto + sección de
   confianza) y en móvil ocupaba toda la pantalla inicial sin
   mostrar ninguna vacante. Aquí se colapsa esa composición a una
   pantalla de app real: header ya compactado arriba, hero
   reducido a lo esencial, sin foto decorativa, buscador plano, y
   "Vacantes destacadas" visible mucho antes en el scroll.
   Todo bajo `body.home` (clase nativa de WordPress en esta
   página) para no afectar ninguna otra plantilla, y solo hasta
   899.98px — encima de ese punto de quiebre la Home V3 aprobada
   en Fase 71/72 queda exactamente igual. `conekte-pwa-shell` se
   declaró dependiente de `conekte-home` en functions.php para
   ganar la cascada aquí sin depender de !important adicional.
   ========================================================== */

@media ( max-width: 899.98px ) {

	/* ---- Hero: de bloque editorial a encabezado de app ---- */
	body.home .ckt-v3-hero {
		padding: 18px 20px 22px;
		background: var( --ckt-surface, #fff );
	}

	/* El eyebrow ("Conecta talento con oportunidades") y la línea de
	   confianza ("Vacantes actualizadas / Registro gratuito / ...")
	   son copy de marketing de sitio web: no ayudan a la tarea
	   inmediata de quien abrió la app para buscar empleo, y son lo
	   primero que sobra antes de tocar el buscador o las vacantes
	   reales.
	   El eyebrow no tiene una clase .ckt-v3-eyebrow propia en el
	   marcado real (ese selector existe en la hoja pero nunca se
	   aplicó a ningún widget de Elementor) — el único gancho estable
	   es el <span class="ckt-v3-dot"> que sí imprime el editor, así
	   que se oculta el párrafo que lo contiene vía :has(), igual que
	   el patrón ya usado en la sección de vacantes de este archivo. */
	body.home .ckt-v3-hero-copy p:has( .ckt-v3-dot ),
	body.home .ckt-v3-hero-note {
		display: none;
	}

	body.home .ckt-v3-h1 {
		font-size: 22px;
		line-height: 1.15;
		letter-spacing: -0.3px;
		margin: 0 0 6px;
	}

	body.home .ckt-v3-lead {
		font-size: 13px;
		margin: 0 0 14px;
		max-width: none;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	/* Fase 101.3 (101.3_REFINAMIENTO_VISUAL_PROFUNDO_...): la referencia
	   visual maestra ("banner para APp.png") muestra la foto del Hero
	   como pieza dominante también en el viewport principal (PWA/móvil),
	   no solo en escritorio — directriz explícita de esta fase por
	   encima del criterio de "menos scroll" de la Fase 97 (comentario
	   histórico conservado abajo). Se reincorpora en una versión
	   compacta (190px vs. los 300px de escritorio, sin el párrafo largo
	   de la leyenda) para acercarse a la referencia sin regresar al
	   costo de scroll completo que motivó ocultarla entonces — decisión
	   documentada en 101.3, no un silencioso "deshacer" de la Fase 97.
	   Motivo original que llevó a ocultarla (ya no aplica como
	   prioridad #1 en esta fase): la pantalla de Inicio de la referencia
	   PWA pasaba del buscador directo a "Vacantes destacadas". */
	body.home .ckt-v3-hero-visual {
		display: block !important;
		margin-top: 16px;
	}

	body.home .ckt-v3-hero-photo {
		position: relative !important;
		width: 100% !important;
		height: 190px !important;
		border-radius: 18px;
	}

	body.home .ckt-v3-hero-caption {
		bottom: 14px;
		left: 16px;
	}

	body.home .ckt-v3-hero-caption h3 {
		font-size: 15px;
	}

	/* La leyenda larga ("Encuentra oportunidades...") se recorta a solo
	   el titular corto en esta altura reducida — el mismo criterio de
	   "menos texto de relleno en móvil" ya aplicado al eyebrow/nota de
	   confianza arriba. */
	body.home .ckt-v3-hero-caption p {
		display: none;
	}

	body.home .ckt-v3-floating {
		padding: 9px 14px;
		font-size: 10px;
		margin: -22px 0 0 16px;
	}

	body.home .ckt-v3-floating-b {
		font-size: 13px;
	}

	/* Buscador: de tarjeta con borde/sombra tipo widget de sitio web a
	   un componente plano tipo app, más bajo. Misma lógica de
	   flex-wrap y columnas ya resuelta en conekte-home.css — aquí
	   solo cambia la piel visual y la altura táctil de los campos. */
	body.home .pxp-search-jobs-img.pxp-no-img .pxp-hero-form {
		border: 0;
		box-shadow: none;
		background: var( --ckt-background, #f7fafd );
		border-radius: 14px;
		padding: 8px;
	}

	body.home .pxp-search-jobs-img.pxp-no-img .pxp-hero-form .form-control,
	body.home .pxp-search-jobs-img.pxp-no-img .pxp-hero-form .form-select {
		min-height: 44px;
		background: var( --ckt-surface, #fff );
	}

	body.home .pxp-search-jobs-img.pxp-no-img .pxp-hero-form button {
		min-height: 44px;
		border-radius: 10px;
	}

	/* En ≤575.98px las 3 columnas + botón (heredadas de
	   conekte-home.css, pensadas para el ancho de una columna de
	   escritorio) no caben sin recortar visualmente el placeholder de
	   cada campo ("Puesto o palabr…", "Ubicac…"). Se apilan a ancho
	   completo — más alto, pero cada campo se lee completo, más
	   "formulario de app" y menos "casillas apretadas". */
	@media ( max-width: 575.98px ) {
		body.home .pxp-search-jobs-img.pxp-no-img .pxp-hero-form form.row > [class*="col-"] {
			flex: 1 1 100% !important;
		}
	}

	/* Subtítulo vacío/leyenda del widget nativo de búsqueda — mismo
	   tipo de copy de relleno que el eyebrow, ver arriba. */
	body.home .pxp-search-jobs-img.pxp-no-img .pxp-hero-subtitle {
		display: none;
	}

	/* ---- Vacantes destacadas: acercarlas al primer scroll ----
	   conekte-home.css ya reduce el respiro entre secciones a 4.5rem
	   (72px) desde 991.98px — apropiado para separar bloques largos de
	   escritorio, pero de sitio web. En la Home app se aprieta más: la
	   meta es que las vacantes reales queden visibles con el mínimo
	   scroll posible después del buscador. */
	body.home .pxp-content-body section.mt-100 {
		margin-top: 2rem;
	}

	body.home .ckt-jobs-wrap {
		padding-top: 8px;
	}

	/* El widget nativo "Vacantes destacadas" de Home usa la variante
	   .pxp-jobs-card-5 de Jobster (banner de imagen grande + insignia
	   circular de empresa superpuesta) — una tarjeta pensada para una
	   cuadrícula ancha de escritorio, nunca tocada por el rediseño de
	   tarjetas de Fase 97 (que solo cubrió -card-1/-card-2, las de
	   /vacantes/ y "vacantes similares"). En una sola columna móvil
	   cada tarjeta ocupaba ~474px (200px de imagen + 40px de overlap
	   de la insignia + márgenes de escritorio de 30-40px entre
	   bloques) — con 3 vacantes destacadas eso son ~1400px de scroll
	   antes de llegar a cualquier otro contenido. Se compacta a un
	   formato de tarjeta de app real, conservando la insignia
	   circular de empresa centrada sobre el borde inferior de la
	   imagen (mismo mecanismo de posicionamiento de Jobster, solo con
	   las medidas recalculadas para el tamaño nuevo). */
	body.home .pxp-jobs-card-5-cover {
		height: 110px;
	}

	body.home .pxp-jobs-card-5-company-logo {
		width: 44px;
		height: 44px;
		top: calc( 100% - 22px );
		bottom: -22px;
		right: 16px;
	}

	body.home .pxp-jobs-card-5-category {
		padding: 28px 16px 0;
	}

	body.home .pxp-jobs-card-5-title {
		margin: 8px 0 0;
		padding: 0 16px;
		font-size: 16px;
	}

	body.home .pxp-jobs-card-5-details {
		padding: 0 16px;
	}

	body.home .pxp-jobs-card-5-bottom {
		margin-top: 16px;
		padding: 0 16px;
	}

	body.home .pxp-jobs-card-5 {
		padding-bottom: 16px;
	}

	/* ---- Propuesta de valor ("¿Por qué usar Conekte Laboral?" y, desde
	   la Fase 101.2, también "Beneficios de instalar la app"): de 4
	   tarjetas apiladas a pantalla completa (una por fila, ~290px de
	   alto cada una con el padding de escritorio) a una cuadrícula
	   2x2 compacta — mismo contenido real, mucho menos scroll. */
	body.home .ckt-value-block {
		flex: 1 1 45%;
		max-width: 45%;
		padding: 16px 12px !important;
	}

	body.home .ckt-value-badge {
		width: 44px !important;
		height: 44px !important;
		flex: 0 0 44px !important;
		margin-bottom: 0.5rem !important;
	}

	body.home .ckt-value-badge::before {
		width: 20px !important;
		height: 20px !important;
	}

	body.home .ckt-value-block .elementor-widget-text-editor p {
		font-size: 12px;
	}

	/*
	 * Fase 101.4 (101.4_DIRECCION_ARTE_COMPOSICION_FINAL_HOME_2026-09-11.md
	 * §6, Cambio 1 — diagnóstico corregido durante la implementación): la
	 * cuadrícula 2x2 de arriba ya existía desde esta misma Fase 97, pero
	 * el título de cada tarjeta (widget heading nativo de Elementor)
	 * nunca tuvo un tamaño de fuente propio para este breakpoint — hereda
	 * el tamaño h3 del tema (~23px), que en una columna de ~150px de
	 * ancho fuerza 2 líneas y, sumado a su margen por defecto, es la
	 * causa real de que "Beneficios"/"¿Por qué usar…" sigan siendo
	 * secciones muy altas en 390/375px pese a ya estar en 2x2 — no la
	 * cantidad de columnas. Se ajusta aquí el título y el espaciado entre
	 * filas de la cuadrícula, sin tocar la cuadrícula en sí (ya correcta).
	 */
	body.home .ckt-value-block .elementor-heading-title {
		font-size: 15px !important;
		line-height: 1.25 !important;
		margin-bottom: 6px !important;
	}

	/* El <p> del texto-editor conserva el margin-bottom por defecto del
	   navegador (16px) — visible de más en una tarjeta ya comprimida. */
	body.home .ckt-value-block .elementor-widget-text-editor p {
		margin-bottom: 0 !important;
	}

	body.home .ckt-beneficios-row,
	body.home .elementor-element-5e78bac {
		gap: 14px !important;
	}

	/* "¿Por qué usar Conekte Laboral?": no tiene el wrapper nativo
	   <section class="mt-100"> de los widgets pxp (es un container de
	   Elementor construido a mano en la Fase 71) — su respiro vertical
	   viene del padding-top de 40px del `.e-con-inner` que Elementor
	   genera para todo container "boxed". Se reduce solo para esta
	   sección específica (id fijo bec27b4): su función real aquí es de
	   transición breve hacia "Cómo funciona", no un bloque principal. */
	body.home .elementor-element-bec27b4 > .e-con-inner {
		padding-top: 20px !important;
	}
}