/*
 * Fase 11 (41_PLAN_EXPERIENCIA_RH.md): panel propio de RH — shell con
 * navegación lateral (Panel/Vacantes/Postulaciones/Candidatos/Mensajes/
 * Notificaciones/Empresa/Cerrar sesión), construido desde cero porque el
 * dashboard nativo de Jobster no es reutilizable para RH (ver
 * class-template-router.php). Se apoya en `.conekte-panel` (Fase 7) y en
 * `.ckt-card`/`.ckt-badge`/`.ckt-postulacion-*`/`.ckt-label`/`.ckt-valor`
 * ya existentes desde Fase 10 — aquí solo se agrega el layout de
 * navegación y lo específico de RH, sobre los mismos tokens --ckt-*.
 */

/* QA visual — logo duplicado en /panel-rh-postulaciones/: la plantilla
 * (dashboard-postulaciones.php) reutiliza a propósito get_header()/
 * get_footer() del tema (ver comentario de cabecera del archivo), y ese
 * header público es fixed-top de ~80px. .conekte-panel (Fase 7) solo trae
 * margin-top: var(--ckt-space-xl) = 32px, así que el panel arrancaba
 * detrás del header fijo y el logo propio de .ckt-rh-sidebar quedaba
 * literalmente encimado con el logo del header público. Se compensa aquí
 * — scoped a .ckt-rh-shell, no al .conekte-panel base, porque el otro
 * usuario de esa clase (dashboard-candidato.php) no llama a get_header(). */
.conekte-panel.ckt-rh-shell {
	margin-top: 112px;
}

/* QA visual — identidad V3 (RH/18_DASHBOARD_RH.html): la referencia
 * presenta sidebar + contenido como UNA sola tarjeta con esquinas
 * redondeadas, sombra suave y la barra lateral en azul marino sólido —
 * antes era un simple `display:flex` con espacio entre dos bloques
 * sueltos sobre el fondo de la página. */
.ckt-rh-shell {
	display: flex;
	align-items: stretch;
	max-width: 100%;
	background: var(--ckt-surface);
	border-radius: var(--ckt-radius-lg, 16px);
	box-shadow: 0 20px 45px rgba(16, 36, 71, 0.08);
	overflow: hidden;
}

.ckt-rh-sidebar {
	flex: 0 0 240px;
	display: flex;
	flex-direction: column;
	gap: var(--ckt-space-lg);
	background: var(--ckt-secondary);
	padding: var(--ckt-space-lg);
}

.ckt-rh-sidebar .ckt-logo {
	max-width: 140px;
	/* El archivo tiene el wordmark en azul marino, pensado para fondos
	 * claros — se invierte a blanco para esta barra, ya oscura. */
	filter: brightness(0) invert(1);
}

.ckt-rh-nav {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.ckt-rh-nav a {
	display: block;
	padding: var(--ckt-space-sm) var(--ckt-space-md);
	color: rgba(255, 255, 255, 0.85) !important;
	text-decoration: none !important;
	border-radius: var(--ckt-radius-md);
	font-weight: 600;
}

.ckt-rh-nav a:hover {
	background: rgba(255, 255, 255, 0.08);
	color: #fff !important;
}

.ckt-rh-nav a.ckt-active {
	background: var(--ckt-primary);
	color: #fff !important;
}

.ckt-rh-content {
	padding: var(--ckt-space-lg);
}

.ckt-rh-content {
	flex: 1 1 auto;
	min-width: 0;
}

/* ---------- Grid genérico de tarjetas (Vacantes/Postulaciones/Candidatos) ---------- */
.ckt-rh-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--ckt-space-md);
}

.ckt-rh-num-postulaciones {
	margin-top: var(--ckt-space-sm);
	font-weight: 600;
	color: var(--ckt-secondary);
}

/* ---------- Panel: tarjetas de estadísticas ---------- */
.ckt-rh-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--ckt-space-md);
}

.ckt-rh-stat {
	text-decoration: none !important;
	text-align: center;
}

.ckt-rh-stat-numero {
	font-size: var(--ckt-text-xl, 2rem);
	font-weight: 700;
	color: var(--ckt-primary);
	margin-bottom: var(--ckt-space-xs);
}

/* ---------- Detalle de candidato ---------- */
.ckt-rh-candidato-grid {
	display: flex;
	gap: var(--ckt-space-lg);
	align-items: flex-start;
	flex-wrap: wrap;
	margin-bottom: var(--ckt-space-md);
}

.ckt-rh-candidato-foto {
	width: 96px;
	height: 96px;
	object-fit: cover;
	border-radius: var(--ckt-radius-md);
	flex-shrink: 0;
}

.ckt-rh-candidato-grid .ckt-postulacion-detalle-grid {
	flex: 1 1 320px;
}

.ckt-rh-item {
	padding: var(--ckt-space-sm) 0;
	border-bottom: 1px solid var(--ckt-border);
}

.ckt-rh-item:last-child {
	border-bottom: none;
}

.ckt-rh-form-inline {
	display: flex;
	gap: var(--ckt-space-sm);
	flex-wrap: wrap;
	align-items: center;
}

/* ---------- Entrevistas (Fase 14) ---------- */
.ckt-rh-entrevistas-lista {
	display: flex;
	flex-direction: column;
	gap: var(--ckt-space-md);
	margin-bottom: var(--ckt-space-lg);
}

.ckt-entrevista-form {
	margin-top: var(--ckt-space-md);
}

.ckt-entrevista-form select,
.ckt-entrevista-form input:not([type="submit"]) {
	max-width: 220px;
}

.ckt-entrevista-crear-form {
	margin-top: var(--ckt-space-md);
}

/* ---------- Línea de tiempo del historial (Fase 12) ---------- */
.ckt-timeline {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
}

.ckt-timeline-item {
	position: relative;
	display: flex;
	gap: var(--ckt-space-md);
	padding-bottom: var(--ckt-space-lg);
}

.ckt-timeline-item:last-child {
	padding-bottom: 0;
}

/* Línea vertical conectando los eventos — .ckt-badge--* aporta el color
   de fondo de cada marca (Fase 7, conekte-style.css), aquí solo se fija
   la forma. */
.ckt-timeline-marca {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	margin-top: 4px;
	position: relative;
}

.ckt-timeline-item:not(:last-child) .ckt-timeline-marca::after {
	content: '';
	position: absolute;
	top: 14px;
	left: 50%;
	width: 2px;
	height: calc(100% + var(--ckt-space-lg) - 14px);
	background: var(--ckt-border);
	transform: translateX(-50%);
}

.ckt-timeline-cuerpo {
	flex: 1 1 auto;
	min-width: 0;
}

.ckt-timeline-titulo {
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: var(--ckt-space-sm);
	flex-wrap: wrap;
}

.ckt-timeline-meta {
	color: var(--ckt-text-muted);
	font-size: var(--ckt-text-xs);
	margin-top: 2px;
}

.ckt-timeline-observacion {
	margin-top: var(--ckt-space-xs);
	font-size: var(--ckt-text-sm);
}

@media (max-width: 820px) {
	.ckt-rh-shell {
		flex-direction: column;
	}

	.ckt-rh-sidebar {
		flex: 1 1 auto;
		position: static;
		width: 100%;
	}

	.ckt-rh-nav {
		flex-direction: row;
		flex-wrap: wrap;
	}
}

@media (max-width: 389.98px) {
	.ckt-rh-candidato-grid {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
}

/* ---------- Fase 2 de arquitectura RH (2026-08-29): Empresa/Sucursal en
   el formulario de vacante, y pestañas de empresa en "Empresa" cuando el
   RH tiene varias asignadas. ---------- */
.ckt-form-section-title {
	grid-column: 1 / -1;
	font-size: var(--ckt-text-base);
	color: var(--ckt-secondary);
	margin: var(--ckt-space-md) 0 0;
	padding-top: var(--ckt-space-md);
	border-top: 1px solid var(--ckt-border);
}

.ckt-form-row:first-of-type + .ckt-form-section-title,
.ckt-form > .ckt-form-section-title:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}

.ckt-radio-group {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ckt-space-md);
	font-weight: 400;
}

.ckt-radio-group label {
	display: flex;
	align-items: center;
	gap: var(--ckt-space-xs);
	font-weight: 400;
}

.ckt-rh-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ckt-space-xs);
	margin-bottom: var(--ckt-space-md);
}

.ckt-rh-tab {
	padding: var(--ckt-space-xs) var(--ckt-space-md);
	border-radius: var(--ckt-radius-md);
	background: var(--ckt-surface);
	border: 1px solid var(--ckt-border);
	color: var(--ckt-text) !important;
	text-decoration: none !important;
	font-weight: 600;
	font-size: var(--ckt-text-sm);
}

.ckt-rh-tab.ckt-active {
	background: var(--ckt-primary);
	border-color: var(--ckt-primary);
	color: #fff !important;
}

/* ---------- Repetidor "Ingresos adicionales" ---------- */
.ckt-extra-income-list {
	display: flex;
	flex-direction: column;
	gap: var(--ckt-space-sm);
	margin-bottom: var(--ckt-space-sm);
}

.ckt-extra-income-row {
	display: grid;
	grid-template-columns: minmax(110px, 0.9fr) minmax(160px, 1.6fr) minmax(90px, 0.7fr) auto minmax(110px, 0.9fr) auto;
	gap: var(--ckt-space-sm);
	align-items: center;
	background: var(--ckt-background);
	border: 1px solid var(--ckt-border);
	border-radius: var(--ckt-radius-sm);
	padding: var(--ckt-space-sm);
}

.ckt-extra-income-variable-label {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: var(--ckt-text-xs);
	white-space: nowrap;
	font-weight: 400;
}

/* Fase 78: select de categoría/ubicación + botón "+ Crear nueva/o". */
.ckt-select-con-crear {
	display: flex;
	align-items: center;
	gap: var(--ckt-space-sm);
}

.ckt-select-con-crear select {
	flex: 1;
}

.ckt-imagen-actual {
	margin-bottom: var(--ckt-space-sm);
}

.ckt-imagen-actual img {
	max-width: 220px;
	height: auto;
	border-radius: var(--ckt-radius-sm);
	display: block;
	margin-bottom: var(--ckt-space-sm);
	border: 1px solid var(--ckt-border);
}

@media (max-width: 767.98px) {
	.ckt-extra-income-row {
		grid-template-columns: 1fr 1fr;
	}

	.ckt-extra-income-row .ckt-extra-income-remove {
		grid-column: 1 / -1;
	}
}

/* Fase 87: checkboxes de "Prestaciones" + botón "+ Crear nueva" debajo. */
.ckt-checkbox-lista {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ckt-space-sm) var(--ckt-space-md);
	margin-bottom: var(--ckt-space-sm);
}

.ckt-checkbox-item {
	display: flex;
	align-items: center;
	gap: 6px;
	font-weight: 400;
	white-space: nowrap;
}