/*
 * Sistema visual base de Conekte Laboral.
 *
 * Paleta derivada por muestreo real de LOGO CONEKTE LABORAL SINFONDO.png
 * (ver 32_SISTEMA_VISUAL_CONEKTE.md) — no son colores genéricos de
 * Jobster ni elegidos a ojo. Solo se aplica dentro de los paneles propios
 * de Conekte (.conekte-panel, usado por el panel RH de Fase 5G y el
 * portal del candidato de Fase 6); no toca ningún selector de Jobster.
 *
 * Fase 7 (33_INFORME_SISTEMA_VISUAL_CONEKTE.md).
 */

:root {
	/* GUIA_IMPLEMENTACION_VISUAL_CONEKTE.md §6 (paleta V3 aprobada) —
	 * reemplaza la paleta de Fase 7 (32_SISTEMA_VISUAL_CONEKTE.md). */
	--ckt-primary: #0875ED;
	--ckt-secondary: #102447;
	--ckt-accent: #72D34E;
	--ckt-teal: #1C9B70;

	--ckt-background: #F7FAFD;
	--ckt-surface: #FFFFFF;

	--ckt-text: #102447;
	--ckt-text-muted: #718095;
	--ckt-border: #E1E8F1;

	--ckt-success: #21895F;
	--ckt-warning: #D99000;
	--ckt-danger: #D64545;
	--ckt-info: #12B9E8;

	/* Fase 101 (101_REFINAMIENTO_VISUAL_PWA_LOCAL_2026-09-11.md §Bloque 1):
	 * "Poppins" antepuesto — ya es el tipo real y visible en todo el resto
	 * del sitio (header, botones, hero, nav de Jobster), cargado desde
	 * antes de este proyecto vía Google Fonts en `jobster/functions.php`
	 * (`wp_enqueue_style('pxp-base-font', ...Poppins...)`). --ckt-font no
	 * lo incluía y por eso los paneles propios de Conekte (candidato/RH)
	 * caían al system-ui del dispositivo — visualmente distinto del resto
	 * de la página en la misma sesión. La referencia visual
	 * (00_SISTEMA_VISUAL_CONEKTE.html) especifica "Inter", que NO está
	 * cargado en ningún punto real del sitio — escribirlo aquí sin
	 * cargarlo no tendría efecto visual (el navegador cae igual al
	 * fallback) y cargar una fuente nueva de Google Fonts es una decisión
	 * de arquitectura fuera del alcance de una fase "solo visual, solo
	 * CSS existente" — se prioriza consistencia interna real (Poppins,
	 * ya en uso) sobre una coincidencia literal con el nombre de fuente
	 * de la referencia. Documentado, no decidido en silencio. */
	--ckt-font: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--ckt-text-xs: 0.75rem;
	--ckt-text-sm: 0.875rem;
	--ckt-text-base: 1rem;
	--ckt-text-lg: 1.25rem;
	--ckt-text-xl: 1.75rem;

	--ckt-space-xs: 0.25rem;
	--ckt-space-sm: 0.5rem;
	--ckt-space-md: 1rem;
	--ckt-space-lg: 1.5rem;
	--ckt-space-xl: 2rem;

	--ckt-radius-sm: 4px;
	--ckt-radius-md: 8px;
	/* Fase 101: coincide, valor por valor, con --radius de
	 * 00_SISTEMA_VISUAL_CONEKTE.html (16px) — antes no existía ningún
	 * token de radio "grande"; las tarjetas del panel candidato usaban
	 * --ckt-radius-md (8px), notablemente menos redondeadas que la
	 * referencia. Token nuevo, no reemplaza --ckt-radius-md (que sigue
	 * usándose en RH/público, fuera del alcance de esta fase). */
	--ckt-radius-lg: 16px;

	--ckt-shadow-sm: 0 1px 2px rgba(16, 30, 51, 0.06);
	--ckt-shadow-md: 0 4px 12px rgba(16, 30, 51, 0.08);
	/* Fase 101: coincide, valor por valor, con el box-shadow real de
	 * `.card` en 00_SISTEMA_VISUAL_CONEKTE.html — sombra más difusa que
	 * --ckt-shadow-sm, da el efecto "tarjeta flotante" de la referencia.
	 * Token nuevo, uso acotado a .ckt-card (panel candidato). */
	--ckt-shadow-card: 0 5px 18px rgba(16, 36, 71, 0.05);
}

/* ---------- Contenedor de panel ---------- */

.conekte-panel {
	max-width: 1100px;
	margin: var(--ckt-space-xl) auto;
	padding: 0 var(--ckt-space-md);
	font-family: var(--ckt-font);
	font-size: var(--ckt-text-sm);
	color: var(--ckt-text);
	background: var(--ckt-background);
}

.conekte-panel .ckt-logo {
	display: block;
	height: 40px;
	width: auto;
	margin-bottom: var(--ckt-space-md);
}

/* ---------- Tipografía ---------- */

.conekte-panel h1 {
	font-size: var(--ckt-text-xl);
	color: var(--ckt-secondary);
	margin: 0 0 var(--ckt-space-md);
}

.conekte-panel fieldset legend {
	font-size: var(--ckt-text-lg);
	color: var(--ckt-secondary);
	font-weight: 600;
	padding: 0 var(--ckt-space-xs);
}

/* ---------- Enlaces / navegación básica ---------- */

.conekte-panel a {
	color: var(--ckt-primary);
	text-decoration: none;
}

.conekte-panel a:hover {
	text-decoration: underline;
}

.conekte-panel a.conekte-volver {
	display: inline-block;
	margin-bottom: var(--ckt-space-md);
	font-weight: 600;
}

/* ---------- Paneles / tarjetas ---------- */

.conekte-panel fieldset {
	margin: var(--ckt-space-md) 0;
	padding: var(--ckt-space-lg);
	background: var(--ckt-surface);
	border: 1px solid var(--ckt-border);
	border-radius: var(--ckt-radius-md);
	box-shadow: var(--ckt-shadow-sm);
}

.conekte-panel .conekte-filtros {
	margin-bottom: var(--ckt-space-md);
	padding: var(--ckt-space-md);
	background: var(--ckt-surface);
	border: 1px solid var(--ckt-border);
	border-radius: var(--ckt-radius-md);
	display: flex;
	gap: var(--ckt-space-sm);
	flex-wrap: wrap;
	align-items: center;
}

/* ---------- Tablas ---------- */

.conekte-panel table {
	width: 100%;
	border-collapse: collapse;
	margin: var(--ckt-space-md) 0;
	background: var(--ckt-surface);
}

.conekte-panel th,
.conekte-panel td {
	border: 1px solid var(--ckt-border);
	padding: var(--ckt-space-sm) var(--ckt-space-md);
	text-align: left;
	font-size: var(--ckt-text-sm);
}

.conekte-panel th {
	background: var(--ckt-background);
	color: var(--ckt-secondary);
	font-weight: 600;
}

.conekte-panel tbody tr:hover td,
.conekte-panel table tr:hover td {
	background: rgba(8, 117, 237, 0.04);
}

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

.conekte-panel label {
	font-size: var(--ckt-text-sm);
	color: var(--ckt-text-muted);
	font-weight: 500;
}

.conekte-panel input[type="text"],
.conekte-panel input[type="date"],
.conekte-panel input[type="time"],
.conekte-panel input[type="url"],
.conekte-panel select,
.conekte-panel textarea {
	font-family: var(--ckt-font);
	font-size: var(--ckt-text-sm);
	color: var(--ckt-text);
	padding: var(--ckt-space-sm);
	border: 1px solid var(--ckt-border);
	border-radius: var(--ckt-radius-sm);
	background: var(--ckt-surface);
	margin: var(--ckt-space-xs) var(--ckt-space-xs) var(--ckt-space-xs) 0;
}

.conekte-panel input:focus,
.conekte-panel select:focus,
.conekte-panel textarea:focus {
	outline: none;
	border-color: var(--ckt-primary);
	box-shadow: 0 0 0 3px rgba(8, 117, 237, 0.15);
}

.conekte-panel textarea {
	width: 100%;
	display: block;
	box-sizing: border-box;
}

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

.conekte-panel button,
.conekte-panel button[type="submit"] {
	font-family: var(--ckt-font);
	font-size: var(--ckt-text-sm);
	font-weight: 600;
	color: #FFFFFF;
	background: var(--ckt-primary);
	border: none;
	border-radius: var(--ckt-radius-sm);
	padding: var(--ckt-space-sm) var(--ckt-space-md);
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.conekte-panel button:hover,
.conekte-panel button[type="submit"]:hover {
	background: var(--ckt-secondary);
}

/* Fase 18 (55_PLAN_EXPERIENCIA_CANDIDATO_CONEKTE.md §11): `.ckt-btn` ya se
   usaba en varias plantillas (candidato y RH) sobre elementos `<a>`, pero
   nunca tuvo una regla propia — `.conekte-panel button` no alcanza a un
   enlace, así que esos "botones" se veían como texto plano sin estilo.
   Se define aquí como componente base compartido, para que las 2 fases
   que ya lo usaban queden correctamente estilizadas sin tocar sus
   plantillas. */
.conekte-panel .ckt-btn {
	display: inline-block;
	font-family: var(--ckt-font);
	font-size: var(--ckt-text-sm);
	font-weight: 600;
	color: #FFFFFF !important;
	background: var(--ckt-primary);
	border: 1px solid var(--ckt-primary);
	border-radius: var(--ckt-radius-sm);
	padding: var(--ckt-space-sm) var(--ckt-space-md);
	cursor: pointer;
	text-decoration: none !important;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.conekte-panel .ckt-btn:hover {
	background: var(--ckt-secondary);
	border-color: var(--ckt-secondary);
}

/* Fase 102.3: `background`/`border-color` necesitan `!important` por el
   mismo motivo que `.ckt-btn-pausar`/`.ckt-btn-finalizar` más abajo —
   "Reactivar vacante" es un `<button type="submit">`, que calza también
   con `.conekte-panel button[type="submit"]` de arriba, MÁS específico
   (elemento + atributo) que una sola clase. Sin `!important` aquí,
   `background: transparent`/`border-color` perdían ese pulso y el botón
   quedaba con el fondo azul de esa regla genérica más el texto azul de
   este `!important` ya existente — el mismo "botón vacío" (texto
   invisible sobre su propio fondo) que tenían Pausar/Finalizar antes de
   esta fase. Los demás usos de `.ckt-btn-outline` en este archivo son
   `type="button"` (nunca calzan con `button[type="submit"]`), así que
   no cambian de apariencia con este ajuste. */
.conekte-panel .ckt-btn-outline {
	color: var(--ckt-primary) !important;
	background: transparent !important;
	border-color: var(--ckt-primary) !important;
}

.conekte-panel .ckt-btn-outline:hover {
	color: #FFFFFF !important;
	background: var(--ckt-primary) !important;
	border-color: var(--ckt-primary) !important;
}

/* ---------- Alertas ---------- */

.conekte-panel .conekte-msg-ok,
.conekte-panel .conekte-msg-error {
	padding: var(--ckt-space-sm) var(--ckt-space-md);
	margin-bottom: var(--ckt-space-md);
	border-radius: var(--ckt-radius-sm);
	border: 1px solid transparent;
	font-size: var(--ckt-text-sm);
}

.conekte-panel .conekte-msg-ok {
	background: rgba(12, 174, 116, 0.1);
	border-color: var(--ckt-success);
	color: var(--ckt-secondary);
}

.conekte-panel .conekte-msg-error {
	background: rgba(220, 38, 38, 0.08);
	border-color: var(--ckt-danger);
	color: var(--ckt-secondary);
}

/* ---------- Badges de estado de postulación ---------- */
/* Solo presentación — no representa ni modifica la lógica de estados. */

.conekte-panel .ckt-badge {
	display: inline-block;
	padding: 2px var(--ckt-space-sm);
	border-radius: 999px;
	font-size: var(--ckt-text-xs);
	font-weight: 600;
	white-space: nowrap;
}

.conekte-panel .ckt-badge--nueva_postulacion,
.conekte-panel .ckt-badge--examenes_completados {
	background: rgba(10, 185, 250, 0.15);
	color: #0A6E96;
}

.conekte-panel .ckt-badge--en_revision,
.conekte-panel .ckt-badge--examenes_solicitados {
	background: rgba(245, 158, 11, 0.15);
	color: #92610A;
}

.conekte-panel .ckt-badge--perfil_aprobado,
.conekte-panel .ckt-badge--entrevista_programada {
	background: rgba(0, 97, 231, 0.12);
	color: var(--ckt-primary);
}

.conekte-panel .ckt-badge--entrevista_realizada {
	background: rgba(0, 22, 65, 0.1);
	color: var(--ckt-secondary);
}

.conekte-panel .ckt-badge--favorable {
	background: rgba(12, 174, 116, 0.15);
	color: #0A8058;
}

.conekte-panel .ckt-badge--no_favorable {
	background: rgba(220, 38, 38, 0.12);
	color: var(--ckt-danger);
}

/* Estados propios de Entrevista/Evaluación (catálogos distintos al de
   Postulación — mismo tratamiento visual genérico por semántica). */
.conekte-panel .ckt-badge--solicitada,
.conekte-panel .ckt-badge--programada {
	background: rgba(0, 97, 231, 0.12);
	color: var(--ckt-primary);
}

.conekte-panel .ckt-badge--modificada {
	background: rgba(245, 158, 11, 0.15);
	color: #92610A;
}

.conekte-panel .ckt-badge--completada,
.conekte-panel .ckt-badge--realizada {
	background: rgba(12, 174, 116, 0.15);
	color: #0A8058;
}

.conekte-panel .ckt-badge--cancelada {
	background: rgba(220, 38, 38, 0.12);
	color: var(--ckt-danger);
}

/* Único estado del catálogo de Entrevista (5) sin agrupar visualmente con
   los de arriba — Fase 14: nunca lo crea el endpoint actual (siempre nace
   en "programada"), pero queda cubierto por completitud del catálogo. */
.conekte-panel .ckt-badge--pendiente {
	background: rgba(91, 107, 130, 0.12);
	color: var(--ckt-text-muted);
}

/* Estatus operativo de vacante (Fase 101.6) — catálogo propio
   (activa/pausada/finalizada), distinto del de postulación de arriba;
   mismo componente .ckt-badge, mismo criterio de "solo presentación". */
.conekte-panel .ckt-badge--activa {
	background: rgba(12, 174, 116, 0.15);
	color: #0A8058;
}

.conekte-panel .ckt-badge--pausada {
	background: rgba(245, 158, 11, 0.15);
	color: #92610A;
}

.conekte-panel .ckt-badge--finalizada {
	background: rgba(91, 107, 130, 0.12);
	color: var(--ckt-text-muted);
}

/* Botones de Pausar/Reactivar/Finalizar en la tarjeta de vacante del
   panel RH (Fase 101.6) — cada botón es su propio <form> (uno por
   acción, mismo patrón POST→redirect→GET que el resto del panel), así
   que se necesita separación horizontal explícita entre ellos. */
.conekte-panel .ckt-rh-vacante-acciones-estatus {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ckt-space-sm);
	margin: var(--ckt-space-sm) 0;
}

.conekte-panel .ckt-rh-vacante-acciones-estatus form {
	margin: 0;
}

/* Fase 102.3: "Pausar vacante" y "Finalizar vacante" son <button
   type="submit">, así que además de su propia clase también calzan con
   el selector genérico `.conekte-panel button[type="submit"]` de arriba
   — y ese selector es MÁS específico (elemento + atributo) que una sola
   clase, así que gana el pulso por `background`/`border` con cualquier
   clase que solo intente ponerlos en otra cosa sin !important (como le
   pasaba a `.ckt-btn-outline` aquí: quedaba con fondo Y texto en
   `--ckt-primary`, texto invisible sobre su propio fondo — el "bloque
   azul" reportado). Se usa `!important` en las tres propiedades, mismo
   recurso que ya usa `.ckt-btn`/`.ckt-btn-outline` para `color`, para
   que el color de cada botón no dependa de si es o no `type="submit"`. */
.conekte-panel .ckt-btn-pausar {
	color: var(--ckt-secondary) !important;
	background: var(--ckt-warning) !important;
	border: 1px solid var(--ckt-warning) !important;
	font-weight: 700 !important;
}

.conekte-panel .ckt-btn-pausar:hover {
	background: #B87400 !important;
	border-color: #B87400 !important;
}

.conekte-panel .ckt-btn-finalizar {
	color: #FFFFFF !important;
	background: var(--ckt-danger) !important;
	border: 1px solid var(--ckt-danger) !important;
	font-weight: 700 !important;
}

.conekte-panel .ckt-btn-finalizar:hover {
	background: #A93434 !important;
	border-color: #A93434 !important;
}

/* ---------- Tarjeta de entrevista/evaluación (Fase 14/15) ---------- */
/* Compartida entre el panel RH ("Entrevistas"/"Evaluaciones") y "Mi
   proceso" del candidato ("Tu entrevista"/"Mis evaluaciones") — mismo
   componente visual en los 4 casos, sin duplicar reglas por módulo. */

.conekte-panel .ckt-entrevista-item {
	margin-bottom: var(--ckt-space-md);
}

.conekte-panel .ckt-entrevista-modalidad {
	font-size: var(--ckt-text-xs);
	color: var(--ckt-text-muted);
	font-weight: 600;
	margin-left: var(--ckt-space-sm);
}

.conekte-panel .ckt-entrevista-unirse,
.conekte-panel .ckt-btn-externo {
	display: inline-block;
	margin: var(--ckt-space-sm) 0;
}

/* Checkbox "Resultado disponible" (Fase 15) — único control de casilla
   en estos formularios, se alinea junto a su etiqueta sin desbordar en
   móvil (flex-wrap ya provisto por .ckt-rh-form-inline). */
.conekte-panel .ckt-entrevista-checkbox {
	display: inline-flex;
	align-items: center;
	gap: var(--ckt-space-xs);
	font-size: var(--ckt-text-sm);
	white-space: nowrap;
}

/* ---------- Timeline / historial ---------- */
/* Disponible para uso futuro si el historial se rediseña como línea de
   tiempo; en esta fase el historial sigue siendo una tabla (§8 del
   informe 33 documenta por qué no se rehizo la estructura). */

.conekte-panel .ckt-timeline {
	list-style: none;
	margin: 0;
	padding: 0 0 0 var(--ckt-space-md);
	border-left: 2px solid var(--ckt-border);
}

.conekte-panel .ckt-timeline li {
	position: relative;
	padding-bottom: var(--ckt-space-md);
}

.conekte-panel .ckt-timeline li::before {
	content: "";
	position: absolute;
	left: calc(-1 * var(--ckt-space-md) - 5px);
	top: 4px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ckt-primary);
}

.conekte-panel .ckt-timeline .ckt-timeline-fecha {
	color: var(--ckt-text-muted);
	font-size: var(--ckt-text-xs);
}

/* ---------- Mensajes ---------- */

.conekte-panel .ckt-mensaje {
	background: var(--ckt-background);
	border: 1px solid var(--ckt-border);
	border-radius: var(--ckt-radius-sm);
	padding: var(--ckt-space-sm) var(--ckt-space-md);
	margin-bottom: var(--ckt-space-sm);
}

.conekte-panel .ckt-mensaje .ckt-mensaje-remitente {
	color: var(--ckt-text-muted);
	font-size: var(--ckt-text-xs);
}

/* ---------- Responsive ---------- */

@media (max-width: 992px) {
	.conekte-panel form:not(.conekte-filtros) {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--ckt-space-xs);
	}

	.conekte-panel form:not(.conekte-filtros) button {
		align-self: flex-start;
	}
}

@media (max-width: 600px) {
	.conekte-panel {
		margin: var(--ckt-space-md) auto;
	}

	.conekte-panel table {
		display: block;
		overflow-x: auto;
		white-space: nowrap;
	}

	.conekte-panel button,
	.conekte-panel button[type="submit"],
	.conekte-panel .ckt-btn {
		width: 100%;
		text-align: center;
		box-sizing: border-box;
		min-height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

/* ---------------------------------------------------------------------
 * Header nativo de Jobster (sitewide, no limitado a .conekte-panel):
 * Jobster fuerza max-height:43px en wp-content/themes/jobster/style.css
 * para el <img> del logo. Nuestro archivo de logo se generó con relleno
 * transparente vertical para sobrevivir el recorte fijo 1.5:1 que Jobster
 * aplica a todos los logos (add_image_size('pxp-full', 1920, 1280, true))
 * — así que dentro de esos 43px el wordmark real ocupa menos de 25px y se
 * ve diminuto. Se sube el límite para compensar sin tocar el tema padre.
 * ------------------------------------------------------------------- */
.pxp-logo > a > img {
	max-height: 60px;
}

/* Botón "Crear mi perfil" añadido junto al "Iniciar sesión" nativo (ver
 * assets/js/conekte-header.js) — mismo trato visual que .btn-primary de
 * la referencia V3 (nav .primary). */
.ckt-header-cta {
	/* !important: hereda .btn.rounded-pill (mismas clases que el trigger
	 * nativo "Iniciar sesión") cuyo estilo base es un botón outline con
	 * fondo transparente — sin !important el texto blanco quedaba
	 * invisible sobre el header blanco. */
	background-color: var(--pxpMainColor) !important;
	color: #fff !important;
	border: 1px solid var(--pxpMainColor) !important;
	padding: 10px 20px;
	font-size: 14px;
	font-weight: 700;
	margin-left: 10px;
}

.ckt-header-cta:hover {
	background-color: var(--pxpMainColorDark) !important;
	border-color: var(--pxpMainColorDark) !important;
	color: #fff !important;
}

/* ---------------------------------------------------------------------
 * QA visual — paneles Candidato y RH: .pxp-dashboard-side-panel es la
 * barra lateral nativa de Jobster que comparten AMBOS dashboards
 * (candidate-dashboard.php y company-dashboard.php reutilizan el mismo
 * markup/clase). Por defecto no trae color de fondo propio — hereda el
 * fondo claro de la página, que es por lo que se veía como una franja
 * verde clara en vez de la barra azul marino sólida de la referencia
 * (CANDIDATO/10_DASHBOARD_CANDIDATO.html, RH/18_DASHBOARD_RH.html).
 * ------------------------------------------------------------------- */
.pxp-dashboard-side-panel {
	background-color: var(--pxpMainColorDark);
}

.pxp-dashboard-side-panel .pxp-dashboard-side-label {
	color: rgba(255, 255, 255, 0.45);
}

.pxp-dashboard-side-panel nav > ul > li > a {
	color: rgba(255, 255, 255, 0.85);
}

.pxp-dashboard-side-panel nav > ul > li.pxp-active > a {
	background-color: var(--pxpMainColor);
	color: #fff;
}

.pxp-dashboard-side-panel nav > ul > li:not(.pxp-active) > a:hover {
	color: #fff;
	background-color: rgba(255, 255, 255, 0.08);
}

.pxp-dashboard-side-panel .pxp-dashboard-side-user-nav-name a,
.pxp-dashboard-side-panel .pxp-dashboard-side-user-nav-name {
	color: #fff;
}

/* El logo cargado (wp-content/uploads) tiene el wordmark en azul marino,
 * pensado para el header claro del sitio público — sobre esta barra
 * lateral, ahora también azul marino, quedaría invisible. Se invierte
 * por filtro CSS a blanco en vez de subir un segundo archivo de logo,
 * ya que Jobster no expone un slot de "logo alterno" para esta barra. */
.pxp-dashboard-side-panel .pxp-logo img {
	filter: brightness(0) invert(1);
}

/* El bloque fijo del usuario al pie de la barra (nombre + avatar +
 * dropdown de salir) trae su propio fondo claro nativo — quedaba como un
 * recuadro suelto sobre el verde de la página, desconectado del resto
 * de la barra ya repintada de azul marino. */
.pxp-dashboard-side-user-nav-container {
	/* !important: Jobster imprime esta franja con un style="" inline
	 * (background-color: var(--pxpSecondaryColorLight)) directamente en
	 * el markup del template, que gana sobre cualquier regla de hoja de
	 * estilos externa sin importar el orden de carga. */
	background-color: var(--pxpMainColor) !important;
}

.pxp-dashboard-side-user-nav-dropdown > .dropdown-toggle,
.pxp-dashboard-side-user-nav-name {
	color: #fff !important;
}

/* ---------------------------------------------------------------------
 * QA visual — popup nativo "Elige tu tipo de cuenta" (#pxp-account-type-
 * modal, jobster-plugin/views/user-modal.php): sus botones "Soy
 * candidato"/"Soy empresa" llevan la clase nativa .pxp-modal-cta, que en
 * wp-content/themes/jobster/style.css SÍ define fondo azul y texto
 * blanco — pero el .btn de Bootstrap (cargado después en este entorno)
 * gana la cascada y los deja como texto plano sin fondo. Se restaura
 * aquí el tratamiento de botón real, con los tokens de Conekte.
 * ------------------------------------------------------------------- */
.pxp-modal-cta {
	background-color: var(--pxpMainColor) !important;
	color: #fff !important;
	font-size: 15px;
	font-weight: 700;
	padding: 14px 20px !important;
	text-align: center;
}

.pxp-modal-cta:hover {
	background-color: var(--pxpMainColorDark) !important;
	color: #fff !important;
}

#pxp-account-type-modal .modal-content {
	border-radius: var(--ckt-radius-lg, 16px);
	border: none;
	box-shadow: 0 25px 60px rgba(16, 36, 71, 0.25);
}

#pxp-account-type-modal .modal-title {
	color: var(--pxpTextColor);
	font-weight: 800;
}