/* AltuRH — «Mi perfil» (page-mi-perfil.php). Usa las variables de main.css. */

.perfil-seccion { padding: 56px 0 80px; background: var(--light-color); }
.perfil-wrap { max-width: 880px; }

.perfil-card {
	background: var(--white);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	padding: 2rem 2.2rem;
	margin-bottom: 1.6rem;
	scroll-margin-top: 110px;
}
.perfil-card h2 { color: var(--primary-color); font-size: 1.45rem; margin-bottom: 1.1rem; }
.perfil-card h3 { color: var(--primary-color); font-size: 1.15rem; }
.perfil-card--acceso { max-width: 560px; margin: 0 auto; }
.perfil-intro { color: var(--text-dark); line-height: 1.6; margin-bottom: 1.3rem; }
.perfil-muted { color: var(--text-light); font-size: .92rem; }

/* Avisos */
.perfil-aviso { padding: .9rem 1.2rem; border-radius: var(--radius-md); margin-bottom: 1.4rem; font-weight: 600; }
.perfil-aviso--ok { background: #e3f4ea; color: #1e6b3d; border: 1px solid #b7e0c6; }
.perfil-aviso--error { background: #fdecea; color: #a12622; border: 1px solid #f5c2bd; }

/* Con la sesión abierta el aviso flota abajo (la página suele saltar a la sección editada) */
.perfil-aviso--flotante {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%);
	z-index: 1000;
	max-width: calc(100vw - 32px);
	width: max-content;
	margin: 0;
	box-shadow: var(--shadow-md);
	cursor: pointer;
	transition: opacity .4s ease, transform .4s ease;
}
.perfil-aviso--oculto { opacity: 0; transform: translate(-50%, 20px); pointer-events: none; }

/* Cabecera de tarjeta con botón «Editar» */
.perfil-card-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.perfil-btn-editar {
	flex: 0 0 auto;
	padding: .45rem 1.1rem;
	border: 1.5px solid var(--primary-color);
	border-radius: var(--radius-full);
	color: var(--primary-color);
	font-weight: 600;
	text-decoration: none;
	transition: all var(--transition-fast);
}
.perfil-btn-editar:hover { background: var(--primary-color); color: var(--white); }

/* Ficha (modo lectura) */
.perfil-ficha { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.6rem; margin: .3rem 0 0; }
.perfil-ficha dt { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-light); font-weight: 700; margin-bottom: .2rem; }
.perfil-ficha dd { margin: 0; color: var(--text-dark); font-size: 1rem; line-height: 1.55; word-break: break-word; }
.perfil-ficha a { color: var(--primary-color); }
.perfil-chip-ver {
	display: inline-block;
	padding: .3rem .8rem;
	border-radius: var(--radius-full);
	background: rgba(27, 79, 114, .08);
	color: var(--primary-color);
	font-size: .88rem;
	font-weight: 600;
}

/* Formularios */
.perfil-form { display: flex; flex-direction: column; gap: 1rem; }
.perfil-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.2rem; }
.perfil-ancho { grid-column: 1 / -1; }
.perfil-campo { display: flex; flex-direction: column; gap: .35rem; border: 0; padding: 0; margin: 0; min-width: 0; }
.perfil-campo > span, .perfil-campo legend { font-weight: 600; color: var(--text-dark); font-size: .95rem; margin-bottom: .1rem; }
.perfil-campo input, .perfil-campo select, .perfil-campo textarea {
	width: 100%;
	padding: .7rem .9rem;
	border: 1.5px solid #d5dde5;
	border-radius: var(--radius-sm);
	font: inherit;
	font-size: 1rem;
	color: var(--text-dark);
	background: var(--white);
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.perfil-campo input:focus, .perfil-campo select:focus, .perfil-campo textarea:focus {
	outline: none;
	border-color: var(--primary-color);
	box-shadow: 0 0 0 3px rgba(27, 79, 114, .15);
}
.perfil-campo input:disabled { background: #f2f4f6; color: #9aa5b1; }
.perfil-codigo { font-size: 1.8rem !important; letter-spacing: .5em; text-align: center; font-weight: 700; }

.perfil-check { display: flex; gap: .6rem; align-items: flex-start; font-size: .92rem; color: var(--text-dark); line-height: 1.5; }
.perfil-check input { margin-top: .25rem; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--primary-color); }

.perfil-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.perfil-chip { position: relative; cursor: pointer; }
.perfil-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.perfil-chip span {
	display: inline-block;
	padding: .45rem .95rem;
	border: 1.5px solid #d5dde5;
	border-radius: var(--radius-full);
	font-size: .9rem;
	color: var(--text-dark);
	background: var(--white);
	transition: all var(--transition-fast);
}
.perfil-chip input:checked + span { background: var(--primary-color); border-color: var(--primary-color); color: var(--white); }
.perfil-chip input:focus-visible + span { box-shadow: 0 0 0 3px rgba(27, 79, 114, .25); }

/* Trampa para robots: invisible para personas */
.perfil-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Enlaces-botón */
.perfil-links { display: flex; gap: 1.4rem; margin-top: 1.2rem; flex-wrap: wrap; }
.perfil-links form { margin: 0; }
.perfil-link {
	background: none;
	border: 0;
	padding: 0;
	color: var(--primary-color);
	font: inherit;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.perfil-link:hover { color: var(--accent-color); }
.perfil-link--peligro { color: #a12622; }

/* Barra superior con avance */
.perfil-barra {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	background: var(--white);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	padding: 1rem 1.4rem;
	margin-bottom: .8rem;
}
.perfil-barra form { margin: 0; }
.perfil-barra strong { display: block; color: var(--primary-color); font-size: 1.1rem; }
.perfil-avance { display: flex; align-items: center; gap: .7rem; font-weight: 600; color: var(--text-dark); font-size: .9rem; }
.perfil-avance-barra { width: 160px; height: 10px; border-radius: 5px; background: #e3e9ef; overflow: hidden; }
.perfil-avance-barra span { display: block; height: 100%; background: linear-gradient(90deg, var(--secondary-color), var(--accent-color)); border-radius: 5px; }
.perfil-falta { color: var(--text-light); font-size: .92rem; margin: 0 0 1.4rem .3rem; }

/* Listas de experiencia y formación */
.perfil-items { list-style: none; margin: 0 0 1.2rem; padding: 0; }
.perfil-item { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid #edf1f4; }
.perfil-item:first-child { padding-top: 0; }
.perfil-item-txt { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.perfil-item-txt strong { color: var(--text-dark); font-size: 1.05rem; }
.perfil-item-txt p { margin-top: .4rem; color: var(--text-dark); font-size: .95rem; line-height: 1.55; }
.perfil-item-acc { display: flex; gap: 1rem; align-items: flex-start; white-space: nowrap; }
.perfil-item-acc form { margin: 0; }
.perfil-form-item { background: #f7f9fb; border: 1px solid #e3e9ef; border-radius: var(--radius-md); padding: 1.3rem; scroll-margin-top: 110px; }
.perfil-botones { display: flex; align-items: center; gap: 1.2rem; }
/* .btn-secondary del sitio es blanco (para fondos oscuros): acá va sobre blanco. */
.perfil-btn-agregar.btn-secondary { display: inline-block; color: var(--primary-color); border-color: var(--primary-color); }
.perfil-btn-agregar.btn-secondary:hover { background: var(--primary-color); color: var(--white); }

/* Privacidad */
.perfil-card--privacidad p { color: var(--text-dark); line-height: 1.6; margin-bottom: 1rem; }
.perfil-btn-peligro {
	align-self: flex-start;
	background: var(--white);
	color: #a12622;
	border: 1.5px solid #a12622;
	border-radius: var(--radius-full);
	padding: .6rem 1.4rem;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}
.perfil-btn-peligro:hover { background: #a12622; color: var(--white); }

@media (max-width: 700px) {
	.perfil-card { padding: 1.4rem 1.2rem; }
	.perfil-grid, .perfil-ficha { grid-template-columns: 1fr; }
	.perfil-card-cab { flex-direction: column; gap: .2rem; margin-bottom: .8rem; }
	.perfil-item { flex-direction: column; }
	.perfil-avance-barra { width: 110px; }
}

/* Selector compacto de áreas (crece a muchas opciones sin ocupar más lugar) */
.perfil-multi-sel { display: flex; flex-wrap: wrap; gap: .4rem; min-height: 2rem; align-items: center; margin-bottom: .5rem; }
.perfil-multi-chip {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding: .35rem .5rem .35rem .85rem;
	border: 0;
	border-radius: var(--radius-full);
	background: var(--primary-color);
	color: var(--white);
	font: inherit;
	font-size: .88rem;
	cursor: pointer;
}
.perfil-multi-chip span { display: inline-flex; width: 1.2rem; height: 1.2rem; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, .22); font-size: 1rem; line-height: 1; }
.perfil-multi-chip:hover span, .perfil-multi-chip:focus-visible span { background: rgba(255, 255, 255, .45); }
.perfil-multi-buscar { margin-bottom: .5rem; }
.perfil-multi-lista {
	max-height: 190px;
	overflow-y: auto;
	border: 1.5px solid #d5dde5;
	border-radius: var(--radius-sm);
	padding: .35rem;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: .1rem .6rem;
	background: var(--white);
}
.perfil-multi-op { display: flex; align-items: center; gap: .5rem; padding: .4rem .5rem; border-radius: 6px; cursor: pointer; font-size: .95rem; color: var(--text-dark); }
.perfil-multi-op:hover { background: #f2f6f9; }
.perfil-multi-op input { width: 17px; height: 17px; accent-color: var(--primary-color); flex: 0 0 auto; }
.perfil-multi-op.is-marcada { font-weight: 600; color: var(--primary-color); }
.perfil-multi-op[hidden] { display: none; }
.perfil-multi-nada { grid-column: 1 / -1; padding: .4rem .5rem; margin: 0; }

/* Cursos: certificación */
.perfil-cert { display: inline-block; margin-top: .25rem; font-size: .9rem; color: #8a5300; }
.perfil-cert a { color: var(--primary-color); }
.perfil-cert-campos[hidden] { display: none; }
.perfil-cert-campos { gap: 1rem 1.2rem; }

/* Ofertas compatibles con el perfil */
.perfil-compat { list-style: none; margin: 0; padding: 0; }
.perfil-compat-item { display: flex; align-items: center; gap: 1.1rem; padding: 1rem 0; border-bottom: 1px solid #edf1f4; }
.perfil-compat-item:last-child { border-bottom: 0; }
.perfil-compat-pct { flex: 0 0 74px; height: 74px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 3px solid currentColor; line-height: 1.1; }
.perfil-compat-pct strong { font-size: 1.25rem; }
.perfil-compat-pct span { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.perfil-compat-pct--alta { color: #1e7a45; background: #e6f5ec; }
.perfil-compat-pct--media { color: #9a6200; background: #fdf3e0; }
.perfil-compat-pct--baja { color: #7b8794; background: #f2f4f6; }
.perfil-compat-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .2rem; font-size: .92rem; }
.perfil-compat-titulo { color: var(--primary-color); font-weight: 700; font-size: 1.05rem; text-decoration: none; }
.perfil-compat-titulo:hover { text-decoration: underline; }
.perfil-compat-si { color: #1e6b3d; }
.perfil-compat-no { color: #8a5300; }
.perfil-compat-acc { flex: 0 0 auto; }
.perfil-compat-btn { padding: .55rem 1.2rem; font-size: .92rem; }
.perfil-compat-ya { color: #1e6b3d; font-weight: 600; font-size: .92rem; }
.perfil-compat-mas { margin-top: .8rem; }
.perfil-compat-mas summary { cursor: pointer; color: var(--primary-color); font-weight: 600; padding: .4rem 0; }
@media (max-width: 700px) {
	.perfil-compat-item { flex-wrap: wrap; }
	.perfil-compat-pct { flex-basis: 60px; height: 60px; }
	.perfil-compat-txt { flex-basis: calc(100% - 80px); }
	.perfil-compat-acc { margin-left: 76px; }
}

/* CV */
.perfil-cv { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: .9rem 1rem; border: 1px solid #e3e9ef; border-radius: var(--radius-md); background: #f7f9fb; margin-bottom: .8rem; }
.perfil-cv form { margin: 0; }
.perfil-cv-icono { flex: 0 0 auto; width: 46px; height: 56px; border-radius: 6px; background: #c0392b; color: #fff; font-weight: 800; font-size: .8rem; display: flex; align-items: center; justify-content: center; }
.perfil-cv-txt { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: .15rem; word-break: break-word; }
.perfil-cv-form { margin-top: 1rem; }
.perfil-cv-form input[type="file"] { padding: .55rem; }
.perfil-cv-nota { margin-top: .9rem; }

/* Volver a la oferta después de ingresar */
.perfil-volver { display: block; margin-bottom: .8rem; padding: .85rem 1.2rem; border-radius: var(--radius-lg); background: var(--primary-color); color: var(--white); font-weight: 700; text-decoration: none; }
.perfil-volver:hover { background: var(--accent-color); color: var(--white); }

/* Desplegables de «Mi perfil» con la misma flecha propia que el resto del sitio
   (perfil.css carga después de main.css; acá se re-declara para no perder la imagen). */
.perfil-campo select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231b4f72' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 14px 14px;
	padding-right: 42px;
	cursor: pointer;
}
.perfil-campo select::-ms-expand { display: none; }