/* ==========================================================================
   Solicitud de empleo - Electroplast
   --------------------------------------------------------------------------
   El formulario aporta su propia superficie (una tarjeta blanca) en lugar de
   heredar el fondo del tema. El tema pinta un azul intenso detras, y cualquier
   texto gris sobre el resulta ilegible; con la tarjeta el contraste queda
   garantizado sea cual sea el fondo, hoy y despues de un rediseno del sitio.

   Todo va prefijado con .ee- y con especificidad suficiente para no depender
   de lo que declare la hoja del tema.
   ========================================================================== */

.ee-wrap {
	/* Superficie y tinta */
	--ee-card:      #ffffff;
	--ee-panel:     #f5f7f9;
	--ee-panel-2:   #eef2f5;
	--ee-line:      #dce3e9;
	--ee-line-soft: #e8edf1;

	--ee-ink:       #16222c;
	--ee-ink-2:     #4a5b68;
	--ee-ink-3:     #74858f;

	/* Acento: version mas profunda del azul corporativo, para que el texto
	   blanco encima cumpla contraste AA sin verse lavado. */
	--ee-accent:      #0a6ea8;
	--ee-accent-dark: #085a8a;
	--ee-accent-soft: #e8f2f8;

	--ee-ok:      #1f7a5c;
	--ee-ok-soft: #e6f4ee;
	--ee-err:     #b3261e;
	--ee-err-soft:#fdecea;
	--ee-warn:    #8a6100;

	--ee-r:   10px;
	--ee-r-s: 7px;

	--ee-shadow: 0 1px 2px rgba(16, 34, 46, .06),
	             0 8px 24px rgba(16, 34, 46, .10),
	             0 24px 48px rgba(16, 34, 46, .06);

	max-width: 940px;
	margin: 28px auto 56px;
	padding: 0;
	color: var(--ee-ink);
	font-size: 16px;
	line-height: 1.55;
	text-align: left;
	box-sizing: border-box;
}

.ee-wrap *,
.ee-wrap *::before,
.ee-wrap *::after { box-sizing: inherit; }

/* La tarjeta. Todo el formulario vive dentro. */
.ee-card {
	background: var(--ee-card);
	border-radius: var(--ee-r);
	box-shadow: var(--ee-shadow);
	overflow: hidden;
}

/* ---------- encabezado ---------- */
.ee-head {
	padding: 30px 34px 24px;
	border-bottom: 1px solid var(--ee-line-soft);
	background: linear-gradient(180deg, var(--ee-panel) 0%, var(--ee-card) 100%);
}

/* Cuando la pagina ya pinta su propio titulo, la cabecera se reduce
   a la linea de introduccion para no repetirlo. */
.ee-head-slim { padding: 22px 34px 18px; }

.ee-wrap .ee-title {
	margin: 0 0 8px;
	padding: 0;
	font-size: clamp(1.45rem, 3.4vw, 1.85rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.015em;
	color: var(--ee-ink);
	border: none;
	text-transform: none;
}

.ee-wrap .ee-lede {
	margin: 0;
	color: var(--ee-ink-2);
	font-size: 15px;
	max-width: 62ch;
}

/* ---------- barra de progreso ---------- */
.ee-progress {
	display: none;
	list-style: none;
	margin: 0;
	padding: 20px 34px 0;
	gap: 0;
	counter-reset: none;
}

.ee-wrap.js-steps .ee-progress { display: flex; }

.ee-progress-item {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	padding-bottom: 18px;
	color: var(--ee-ink-3);
	font-size: 12px;
	text-align: center;
	background: none;
	cursor: default;
}

/* Linea que une los pasos, por detras de los circulos. */
.ee-progress-item::before {
	content: "";
	position: absolute;
	top: 14px;
	left: -50%;
	width: 100%;
	height: 2px;
	background: var(--ee-line);
	z-index: 0;
}

.ee-progress-item:first-child::before { display: none; }
.ee-progress-item.is-done::before,
.ee-progress-item.is-active::before { background: var(--ee-accent); }

.ee-progress-dot {
	position: relative;
	z-index: 1;
	width: 29px;
	height: 29px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--ee-card);
	border: 2px solid var(--ee-line);
	color: var(--ee-ink-3);
	font-size: 12.5px;
	font-weight: 700;
	transition: background .18s, border-color .18s, color .18s;
}

.ee-progress-item.is-active .ee-progress-dot {
	background: var(--ee-accent);
	border-color: var(--ee-accent);
	color: #fff;
	box-shadow: 0 0 0 4px var(--ee-accent-soft);
}

.ee-progress-item.is-done .ee-progress-dot {
	background: var(--ee-accent);
	border-color: var(--ee-accent);
	color: #fff;
}

.ee-progress-item.is-done { cursor: pointer; }
.ee-progress-item.is-done:hover .ee-progress-dot { background: var(--ee-accent-dark); }

.ee-progress-label { line-height: 1.25; padding: 0 4px; }
.ee-progress-item.is-active .ee-progress-label { color: var(--ee-accent); font-weight: 600; }
.ee-progress-item.is-done .ee-progress-label { color: var(--ee-ink-2); }

/* ---------- pasos ---------- */
.ee-form { padding: 26px 34px 30px; margin: 0; }

.ee-step { display: block; }
.ee-wrap.js-steps .ee-step { display: none; animation: ee-in .2s ease-out; }
.ee-wrap.js-steps .ee-step.is-active { display: block; }

@keyframes ee-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

.ee-wrap .ee-step-title {
	margin: 0 0 6px;
	padding: 0 0 0 13px;
	font-size: 1.16rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--ee-ink);
	border-left: 3px solid var(--ee-accent);
	text-transform: none;
}

.ee-wrap .ee-sub {
	margin: 30px 0 4px;
	padding: 0 0 8px;
	font-size: .95rem;
	font-weight: 700;
	letter-spacing: .01em;
	color: var(--ee-ink);
	border-bottom: 1px solid var(--ee-line);
	text-transform: none;
}

.ee-wrap .ee-note {
	margin: 0 0 18px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--ee-ink-2);
	max-width: 66ch;
}

/* ---------- campos ---------- */
.ee-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
	gap: 17px;
	margin-top: 18px;
}

.ee-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ee-field-full { grid-column: 1 / -1; }
.ee-hidden { display: none; }

.ee-label {
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .015em;
	color: var(--ee-ink-2);
	text-transform: uppercase;
}

.ee-label b { color: var(--ee-err); font-weight: 700; }

.ee-wrap input[type="text"],
.ee-wrap input[type="email"],
.ee-wrap input[type="tel"],
.ee-wrap input[type="date"],
.ee-wrap input[type="number"],
.ee-wrap select,
.ee-wrap textarea {
	width: 100%;
	max-width: 100%;
	padding: 11px 13px;
	border: 1px solid var(--ee-line);
	border-radius: var(--ee-r-s);
	background: var(--ee-card);
	color: var(--ee-ink);
	font-family: inherit;
	font-size: 15px;
	line-height: 1.4;
	box-shadow: none;
	transition: border-color .15s, box-shadow .15s, background .15s;
	appearance: none;
	-webkit-appearance: none;
}

/* Flecha propia para los desplegables, porque la nativa varia mucho. */
.ee-wrap select {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%234a5b68' d='M6 8.5 1.5 4h9z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 11px;
	padding-right: 34px;
}

.ee-wrap input::placeholder,
.ee-wrap textarea::placeholder { color: var(--ee-ink-3); opacity: 1; }

.ee-wrap input:hover,
.ee-wrap select:hover,
.ee-wrap textarea:hover { border-color: #c3ced7; }

.ee-wrap input:focus,
.ee-wrap select:focus,
.ee-wrap textarea:focus {
	outline: none;
	border-color: var(--ee-accent);
	box-shadow: 0 0 0 3px var(--ee-accent-soft);
}

.ee-wrap input.ee-invalid,
.ee-wrap select.ee-invalid,
.ee-wrap textarea.ee-invalid {
	border-color: var(--ee-err);
	background: var(--ee-err-soft);
}

.ee-wrap input.ee-invalid:focus,
.ee-wrap select.ee-invalid:focus,
.ee-wrap textarea.ee-invalid:focus {
	box-shadow: 0 0 0 3px rgba(179, 38, 30, .13);
}

.ee-error-msg {
	display: block;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--ee-err);
	margin-top: 1px;
}

.ee-wrap textarea { resize: vertical; min-height: 70px; }

/* ---------- cedula y recuperacion de datos ---------- */
.ee-cedula {
	padding: 16px;
	background: var(--ee-accent-soft);
	border: 1px solid #cfe2f1;
	border-radius: var(--ee-r-s);
}

.ee-wrap .ee-cedula input {
	max-width: 320px;
	font-size: 16px;
	letter-spacing: .02em;
}

.ee-hint {
	font-size: 12.5px;
	color: var(--ee-ink-2);
	line-height: 1.45;
}

.ee-lookup-state {
	display: block;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.45;
	margin-top: 2px;
}

.ee-lookup-state.is-busy  { color: var(--ee-ink-3); font-weight: 500; }
.ee-lookup-state.is-ok    { color: var(--ee-ok); }
.ee-lookup-state.is-error { color: var(--ee-err); }

/* Marca los campos que se rellenaron solos, para que se revisen. */
.ee-wrap input.ee-recovered,
.ee-wrap textarea.ee-recovered {
	background: var(--ee-ok-soft);
	border-color: #a9cfc2;
}

/* ---------- repetibles ---------- */
.ee-repeat { display: flex; flex-direction: column; gap: 12px; }

.ee-repeat-row {
	position: relative;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
	gap: 14px;
	padding: 16px 46px 16px 16px;
	background: var(--ee-panel);
	border: 1px solid var(--ee-line-soft);
	border-radius: var(--ee-r-s);
}

.ee-wrap .ee-remove {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 27px;
	height: 27px;
	min-width: 0;
	display: grid;
	place-items: center;
	padding: 0;
	border: 1px solid var(--ee-line);
	border-radius: 50%;
	background: var(--ee-card);
	color: var(--ee-ink-3);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	transition: background .15s, color .15s, border-color .15s;
}

.ee-wrap .ee-remove:hover {
	background: var(--ee-err);
	border-color: var(--ee-err);
	color: #fff;
}

.ee-wrap .ee-add {
	margin-top: 13px;
	padding: 10px 17px;
	background: var(--ee-card);
	border: 1px solid var(--ee-accent);
	border-radius: var(--ee-r-s);
	color: var(--ee-accent);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s, color .15s;
}

.ee-wrap .ee-add:hover { background: var(--ee-accent); color: #fff; }

/* ---------- conocimientos ---------- */
.ee-skills {
	border: 1px solid var(--ee-line);
	border-radius: var(--ee-r-s);
	overflow: hidden;
}

.ee-skill {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 13px 16px;
	border-bottom: 1px solid var(--ee-line-soft);
	background: var(--ee-card);
}

.ee-skill:last-child { border-bottom: none; }
.ee-skill:nth-child(even) { background: var(--ee-panel); }

.ee-skill-name {
	flex: 1 1 210px;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--ee-ink);
}

.ee-skill-controls { display: flex; align-items: center; gap: 11px; }
.ee-wrap .ee-skill-controls select { width: auto; min-width: 112px; }

.ee-skill-years {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	color: var(--ee-ink-2);
	white-space: nowrap;
}

.ee-wrap .ee-skill-years input { width: 72px; text-align: center; }

/* ---------- documentos ---------- */
.ee-files {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
	gap: 15px;
	margin-top: 18px;
}

.ee-file {
	display: flex;
	flex-direction: column;
	gap: 9px;
	padding: 17px;
	border: 1.5px dashed var(--ee-line);
	border-radius: var(--ee-r-s);
	background: var(--ee-panel);
	cursor: pointer;
	transition: border-color .15s, background .15s;
}

.ee-file:hover { border-color: var(--ee-accent); background: var(--ee-accent-soft); }
.ee-file.has-file { border-style: solid; border-color: var(--ee-ok); background: var(--ee-ok-soft); }
.ee-file.has-error { border-style: solid; border-color: var(--ee-err); background: var(--ee-err-soft); }

.ee-file-label { font-size: 13px; font-weight: 700; color: var(--ee-ink); }
.ee-file-label b { color: var(--ee-err); }
.ee-wrap .ee-file input[type="file"] { font-size: 12.5px; color: var(--ee-ink-2); max-width: 100%; }
.ee-file-state { font-size: 12.5px; color: var(--ee-ink-3); word-break: break-word; line-height: 1.4; }
.ee-file.has-file .ee-file-state { color: var(--ee-ok); font-weight: 600; }
.ee-file.has-error .ee-file-state { color: var(--ee-err); font-weight: 600; }

/* ---------- resumen de peso de los adjuntos ---------- */
.ee-total {
	margin: 15px 0 0;
	padding: 11px 14px;
	border-radius: var(--ee-r-s);
	background: var(--ee-accent-soft);
	border: 1px solid #cfe2f1;
	color: var(--ee-ink-2);
	font-size: 13.5px;
	font-weight: 500;
}

.ee-total.is-over {
	background: var(--ee-err-soft);
	border-color: var(--ee-err);
	color: #8c1d17;
	font-weight: 600;
}

.ee-note-tip {
	padding: 10px 13px;
	background: var(--ee-panel);
	border-left: 3px solid var(--ee-line);
	border-radius: 0 var(--ee-r-s) var(--ee-r-s) 0;
	font-size: 13px;
}

/* ---------- consentimiento ---------- */
.ee-consent {
	margin-top: 26px;
	padding: 18px;
	background: var(--ee-panel);
	border: 1px solid var(--ee-line);
	border-left: 3px solid var(--ee-accent);
	border-radius: var(--ee-r-s);
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.ee-wrap .ee-consent label {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	margin: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.55;
	color: var(--ee-ink-2);
	cursor: pointer;
	text-transform: none;
}

.ee-wrap .ee-consent input[type="checkbox"] {
	margin: 3px 0 0;
	width: 17px;
	height: 17px;
	flex: 0 0 auto;
	accent-color: var(--ee-accent);
	cursor: pointer;
}

.ee-consent b { color: var(--ee-err); }
.ee-captcha { margin-top: 22px; }

/* ---------- navegacion ---------- */
.ee-nav {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 34px -34px -30px;
	padding: 20px 34px;
	border-top: 1px solid var(--ee-line);
	background: var(--ee-panel);
	flex-wrap: wrap;
}

.ee-nav-count {
	display: none;
	margin-right: auto;
	font-size: 13px;
	font-weight: 500;
	color: var(--ee-ink-2);
}

.ee-nav [data-nav="prev"],
.ee-nav [data-nav="next"] { display: none; }

.ee-wrap.js-steps .ee-nav-count { display: block; }
.ee-wrap.js-steps .ee-nav [data-nav="prev"],
.ee-wrap.js-steps .ee-nav [data-nav="next"] { display: inline-block; }
.ee-nav [hidden] { display: none !important; }

.ee-wrap .ee-btn {
	padding: 11px 24px;
	border: 1px solid var(--ee-accent);
	border-radius: var(--ee-r-s);
	background: var(--ee-accent);
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
	text-transform: none;
	transition: background .15s, border-color .15s, transform .06s;
}

.ee-wrap .ee-btn:hover { background: var(--ee-accent-dark); border-color: var(--ee-accent-dark); }
.ee-wrap .ee-btn:active { transform: translateY(1px); }
.ee-wrap .ee-btn:focus-visible { outline: 3px solid var(--ee-accent-soft); outline-offset: 2px; }
.ee-wrap .ee-btn:disabled { opacity: .65; cursor: progress; }

.ee-wrap .ee-btn-ghost {
	background: var(--ee-card);
	color: var(--ee-accent);
}

.ee-wrap .ee-btn-ghost:hover { background: var(--ee-accent-soft); border-color: var(--ee-accent); color: var(--ee-accent-dark); }

.ee-wrap .ee-btn-send { background: var(--ee-ok); border-color: var(--ee-ok); }
.ee-wrap .ee-btn-send:hover { background: #185f47; border-color: #185f47; }

.ee-required-note {
	margin: 16px 0 0;
	font-size: 12.5px;
	color: var(--ee-ink-3);
}

.ee-required-note b { color: var(--ee-err); }

/* ---------- avisos ---------- */
.ee-alert {
	display: flex;
	gap: 11px;
	padding: 16px 18px;
	margin: 0 0 20px;
	border-radius: var(--ee-r-s);
	font-size: 15px;
	line-height: 1.5;
	border: 1px solid;
	border-left-width: 4px;
	background: var(--ee-card);
}

.ee-alert-ok    { background: var(--ee-ok-soft);  border-color: var(--ee-ok);  color: #15563f; }
.ee-alert-error { background: var(--ee-err-soft); border-color: var(--ee-err); color: #8c1d17; }

.ee-alert::before {
	content: "";
	flex: 0 0 auto;
	width: 19px;
	height: 19px;
	margin-top: 2px;
	background-repeat: no-repeat;
	background-size: contain;
}

.ee-alert-ok::before {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%231f7a5c' d='M10 0a10 10 0 100 20 10 10 0 000-20zm-1 14l-5-5 1.5-1.5L9 11l6-6 1.5 1.5z'/%3E%3C/svg%3E");
}

.ee-alert-error::before {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23b3261e' d='M10 0a10 10 0 100 20 10 10 0 000-20zm1 15H9v-2h2zm0-4H9V5h2z'/%3E%3C/svg%3E");
}

/* ---------- trampa para robots ---------- */
.ee-hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------- movil ---------- */
@media (max-width: 720px) {
	.ee-wrap { margin: 16px auto 36px; font-size: 15px; }
	.ee-head { padding: 22px 18px 18px; }
	.ee-progress { padding: 16px 14px 0; }
	.ee-form { padding: 20px 18px 24px; }
	.ee-nav { margin: 26px -18px -24px; padding: 16px 18px; }
	.ee-grid { grid-template-columns: 1fr; gap: 15px; }
	.ee-repeat-row { grid-template-columns: 1fr; }
	.ee-progress-label { display: none; }
	.ee-progress-item { padding-bottom: 6px; }
	.ee-skill { flex-direction: column; align-items: stretch; gap: 10px; }
	.ee-skill-controls { justify-content: space-between; }
	.ee-nav { flex-direction: column-reverse; align-items: stretch; }
	.ee-wrap .ee-nav .ee-btn { width: 100%; }
	.ee-nav-count { text-align: center; margin: 6px 0 0; }
}

@media (prefers-reduced-motion: reduce) {
	.ee-wrap .ee-step { animation: none; }
	.ee-wrap *, .ee-wrap *::before { transition: none !important; }
}