/*
 * Fase 10 (38_PLAN_EXPERIENCIA_CANDIDATO.md): estilos propios del panel
 * del candidato (Mis postulaciones / Detalle / Datos adicionales) —
 * convierte el look de tabla plana de Fase 5G/7 a tarjetas, sobre los
 * mismos tokens --ckt-*/--pxp* ya definidos, sin paleta nueva. Se apoya
 * en `.conekte-panel` (Fase 7, conekte-style.css) para tipografía, badges,
 * inputs y mensajes ya existentes; aquí solo se agrega lo nuevo de
 * esta fase.
 */

.ckt-candidato-panel {
	max-width: 100%;
}

.ckt-candidato-subtitulo {
	color: var(--ckt-text-muted);
	margin: -0.5rem 0 var(--ckt-space-lg);
}

.ckt-vacio {
	color: var(--ckt-text-muted);
}

/* ---------- Pestañas (Mis postulaciones / Datos adicionales) ---------- */
.ckt-candidato-tabs {
	display: flex;
	gap: var(--ckt-space-md);
	border-bottom: 1px solid var(--ckt-border);
	margin-bottom: var(--ckt-space-lg);
}

.ckt-candidato-tab {
	padding: var(--ckt-space-sm) 0;
	color: var(--ckt-text-muted) !important;
	font-weight: 600;
	text-decoration: none !important;
	border-bottom: 2px solid transparent;
}

.ckt-candidato-tab.ckt-active {
	color: var(--ckt-primary) !important;
	border-bottom-color: var(--ckt-primary);
}

/* QA visual responsive: en pantallas angostas el flex por defecto
 * comprimía cada pestaña hasta partir "Mis postulaciones"/"Mi CV" en dos
 * líneas dentro de la misma fila, dejando el texto ilegible/recortado.
 * Se deja cada pestaña en una sola línea y la fila entera se vuelve
 * desplazable en horizontal — patrón estándar de tabs en móvil. */
@media (max-width: 767.98px) {
	.ckt-candidato-tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.ckt-candidato-tab {
		white-space: nowrap;
		flex: 0 0 auto;
	}
}

/* ---------- Tarjeta genérica ----------
 * Fase 101 (101_REFINAMIENTO_VISUAL_PWA_LOCAL_2026-09-11.md): radio y
 * sombra actualizados a --ckt-radius-lg/--ckt-shadow-card (nuevos,
 * definidos en conekte-style.css), que replican valor por valor los de
 * .card en 00_SISTEMA_VISUAL_CONEKTE.html — antes esta tarjeta (base de
 * los stats del hub, la lista de accesos, las tarjetas de postulación y
 * de notificación) se veía notablemente menos redondeada/plana que la
 * referencia. Cambio puramente visual, mismas clases, mismo markup. */
.ckt-card {
	background: var(--ckt-surface);
	border: 1px solid var(--ckt-border);
	border-radius: var(--ckt-radius-lg);
	box-shadow: var(--ckt-shadow-card);
	padding: var(--ckt-space-lg);
	margin-bottom: var(--ckt-space-md);
}

.ckt-card h2 {
	font-size: var(--ckt-text-lg);
	color: var(--ckt-secondary);
	margin: 0 0 var(--ckt-space-md);
}

/* ---------- Fase 99.8: saludo + avatar del hub (Perfil) ----------
 * Reproduce la composición "saludo + foto circular" de la pantalla
 * "Perfil" de REFERENCIAS VISUALES/PWA/ sobre los mismos tokens --ckt-*
 * ya existentes. El avatar solo imprime una foto real (`candidate_photo`
 * de Jobster, ver dashboard-candidato.php); sin foto se usa un círculo
 * de respaldo neutro (ícono, no una imagen ficticia). */
.ckt-hub-saludo {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--ckt-space-md);
}

.ckt-hub-saludo-texto {
	min-width: 0;
	flex: 1 1 auto;
}

.ckt-hub-saludo-texto h1 {
	margin-bottom: 0;
}

.ckt-hub-avatar {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--ckt-background);
	border: 1px solid var(--ckt-border);
}

.ckt-hub-avatar--vacio {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ckt-text-muted);
	font-size: 1.4rem;
}

/* ---------- Fase 99.7: lista de accesos del hub (Perfil) ----------
 * Reproduce el patrón "ícono + etiqueta + flecha" de la pantalla "Perfil"
 * de REFERENCIAS VISUALES/PWA/ sobre los mismos tokens --ckt-* ya
 * existentes (sin paleta nueva). Los accesos sin funcionalidad real
 * todavía (.ckt-hub-acceso--pendiente) usan <span>, no <a> — nunca un
 * enlace que no lleva a ningún sitio real (ver dashboard-candidato.php). */
.ckt-hub-accesos {
	padding: var(--ckt-space-sm) var(--ckt-space-lg);
}

.ckt-hub-acceso {
	display: flex;
	align-items: center;
	gap: var(--ckt-space-md);
	padding: var(--ckt-space-md) 0;
	border-bottom: 1px solid var(--ckt-border);
	color: var(--ckt-text) !important;
	text-decoration: none !important;
}

.ckt-hub-acceso:last-child {
	border-bottom: none;
}

.ckt-hub-acceso-icono {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--ckt-background);
	color: var(--ckt-primary);
	font-size: 0.95rem;
}

.ckt-hub-acceso-label {
	flex: 1 1 auto;
	font-weight: 600;
}

.ckt-hub-acceso-flecha {
	flex: 0 0 auto;
	color: var(--ckt-text-muted);
}

.ckt-hub-acceso--pendiente {
	cursor: default;
}

.ckt-hub-acceso--pendiente .ckt-hub-acceso-icono {
	background: var(--ckt-background);
	color: var(--ckt-text-muted);
}

.ckt-hub-acceso--pendiente .ckt-hub-acceso-label {
	color: var(--ckt-text-muted);
}

.ckt-hub-acceso-badge {
	flex: 0 0 auto;
	font-size: var(--ckt-text-xs);
	font-weight: 700;
	color: var(--ckt-text-muted);
	background: var(--ckt-background);
	border: 1px solid var(--ckt-border);
	border-radius: 999px;
	padding: 2px 10px;
}

/* ---------- Grid de postulaciones ---------- */
.ckt-postulaciones-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--ckt-space-md);
}

.ckt-postulacion-card {
	display: flex;
	flex-direction: column;
	gap: var(--ckt-space-xs);
	text-decoration: none !important;
	color: var(--ckt-text) !important;
	transition: transform 150ms ease, box-shadow 150ms ease;
}

.ckt-postulacion-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--ckt-shadow-md);
}

.ckt-postulacion-card h3 {
	margin: var(--ckt-space-xs) 0 0;
	font-size: var(--ckt-text-base);
	color: var(--ckt-secondary);
}

.ckt-postulacion-card-meta {
	display: flex;
	flex-direction: column;
	color: var(--ckt-text-muted);
	font-size: var(--ckt-text-xs);
}

.ckt-postulacion-card-fecha {
	color: var(--ckt-text-muted);
	font-size: var(--ckt-text-xs);
}

.ckt-postulacion-card-link {
	margin-top: auto;
	padding-top: var(--ckt-space-sm);
	color: var(--ckt-primary);
	font-weight: 600;
	font-size: var(--ckt-text-sm);
}

/* ---------- Detalle de postulación ---------- */
.ckt-postulacion-detalle-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--ckt-space-md);
}

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

.ckt-valor {
	font-weight: 600;
}

/* ---------- Formulario "Datos adicionales" ---------- */
.ckt-form {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--ckt-space-md);
}

.ckt-form-row {
	display: flex;
	flex-direction: column;
}

.ckt-form-row label {
	margin-bottom: var(--ckt-space-xs);
}

.ckt-form .ckt-btn,
.ckt-form button[type="submit"] {
	grid-column: 1 / -1;
	justify-self: start;
}

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

/* ---------- Mensaje contextual de "Mi proceso" (Fase 13) ---------- */
/* Mismo tono de los 3 grupos ya usados en los badges de estado
   (informativo/éxito/no favorable) — sin paleta nueva. */
.ckt-postulacion-mensaje {
	margin: 0 0 var(--ckt-space-md);
	padding: var(--ckt-space-md);
	border-radius: var(--ckt-radius-md);
	border: 1px solid transparent;
	font-weight: 600;
	background: rgba(10, 185, 250, 0.1);
	border-color: var(--ckt-info);
	color: var(--ckt-secondary);
}

.ckt-postulacion-mensaje--favorable {
	background: rgba(12, 174, 116, 0.12);
	border-color: var(--ckt-success);
}

.ckt-postulacion-mensaje--no_favorable {
	background: rgba(220, 38, 38, 0.08);
	border-color: var(--ckt-danger);
}

/* ---------- Stepper de "Mi proceso" (Fase 18, brief §7) ---------- */
/* Agrupación puramente visual de los 9 estados reales en 6 etapas — ver
   CONEKTE_STEPPER_ETAPAS en dashboard-candidato.php. Los 3 estados
   (completada/actual/pendiente) nunca dependen solo del color: cada uno
   trae además un ícono (check/número) y texto distinto (brief §15). */
.ckt-stepper {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: flex-start;
	gap: var(--ckt-space-sm);
}

.ckt-step {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--ckt-space-xs);
	position: relative;
}

.ckt-step:not(:last-child)::after {
	content: '';
	position: absolute;
	top: 15px;
	left: calc(50% + 20px);
	width: calc(100% - 40px);
	height: 2px;
	background: var(--ckt-border);
}

.ckt-step--completada:not(:last-child)::after {
	background: var(--ckt-success);
}

.ckt-step-marca {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: var(--ckt-text-sm);
	background: var(--ckt-surface);
	border: 2px solid var(--ckt-border);
	color: var(--ckt-text-muted);
	position: relative;
	z-index: 1;
}

.ckt-step-label {
	font-size: var(--ckt-text-xs);
	font-weight: 600;
	color: var(--ckt-text-muted);
}

.ckt-step--completada .ckt-step-marca {
	background: var(--ckt-success);
	border-color: var(--ckt-success);
	color: #FFFFFF;
}

.ckt-step--completada .ckt-step-label {
	color: var(--ckt-secondary);
}

.ckt-step--actual .ckt-step-marca {
	background: var(--ckt-primary);
	border-color: var(--ckt-primary);
	color: #FFFFFF;
	box-shadow: 0 0 0 4px rgba(0, 97, 231, 0.15);
}

.ckt-step--actual .ckt-step-label {
	color: var(--ckt-primary);
	font-weight: 700;
}

.ckt-step--favorable .ckt-step-marca {
	background: var(--ckt-success);
	border-color: var(--ckt-success);
	color: #FFFFFF;
}

.ckt-step--favorable .ckt-step-label {
	color: var(--ckt-success);
	font-weight: 700;
}

.ckt-step--no-favorable .ckt-step-marca {
	background: var(--ckt-danger);
	border-color: var(--ckt-danger);
	color: #FFFFFF;
}

.ckt-step--no-favorable .ckt-step-label {
	color: var(--ckt-danger);
	font-weight: 700;
}

@media (max-width: 767.98px) {
	.ckt-stepper {
		flex-direction: column;
		align-items: stretch;
		gap: var(--ckt-space-md);
	}

	.ckt-step {
		flex-direction: row;
		text-align: left;
		gap: var(--ckt-space-md);
	}

	.ckt-step:not(:last-child)::after {
		top: 32px;
		left: 15px;
		width: 2px;
		height: calc(100% + var(--ckt-space-md) - 32px);
	}
}

/* ---------- Notificaciones (Fase 18, brief §10) ---------- */
.ckt-notificacion-top {
	display: flex;
	align-items: center;
	gap: var(--ckt-space-sm);
	margin-bottom: var(--ckt-space-xs);
}

.ckt-notificacion-fecha {
	margin-bottom: 0;
}

.ckt-notificacion--no-leida {
	border-left: 3px solid var(--ckt-primary);
}

.ckt-notificacion-punto {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ckt-primary);
	flex-shrink: 0;
}

.ckt-notificacion-estado {
	font-size: var(--ckt-text-xs);
	font-weight: 700;
	color: var(--ckt-primary);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.ckt-notificacion-mensaje {
	color: var(--ckt-text);
}

.ckt-notificacion-ref {
	display: inline-block;
	margin-top: var(--ckt-space-sm);
	font-weight: 600;
	font-size: var(--ckt-text-sm);
}

/* ---------- Mi CV (Fase 18, brief §12) ---------- */
.ckt-cv-acciones {
	display: flex;
	gap: var(--ckt-space-sm);
	flex-wrap: wrap;
	margin-top: var(--ckt-space-md);
}

@media (max-width: 389.98px) {
	.ckt-cv-acciones {
		flex-direction: column;
	}
}

/* ---------- Ancho amplio de escritorio (1440px, brief §13) ---------- */
@media (min-width: 1440px) {
	.conekte-panel.ckt-candidato-panel {
		max-width: 1320px;
	}

	.ckt-postulaciones-grid {
		grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	}
}