:root { --reladi-teal:#138b78; --reladi-ink:#183b4b; --reladi-mist:#eff7f5; }
.registro-empleado { min-height:100vh; background:linear-gradient(135deg,#f6fbfa 0%,#fff 48%,#eef7f5 100%); color:var(--reladi-ink); }
.registro-shell { max-width:1180px; margin:auto; padding:42px 20px 64px; }
.registro-brand { display:flex; align-items:center; gap:14px; margin:24px 0 28px; }
.registro-brand img:first-child { width:88px; }.registro-brand img:last-child { width:104px; }
.wizard-layout { display:grid; grid-template-columns:310px minmax(0,1fr); background:#fff; border:1px solid #dcebe7; border-radius:20px; box-shadow:0 18px 50px rgba(21,66,58,.10); overflow:hidden; }
.wizard-sidebar { padding:36px 28px; background:linear-gradient(160deg,#164c52,#137e70); color:white; }
.wizard-sidebar h1 { color:#fff; font-size:1.55rem; font-weight:600; margin:0 0 8px; }.wizard-sidebar > p { font-size:.9rem; opacity:.8; margin-bottom:32px; }
.wizard-steps { list-style:none; padding:0; margin:0; position:relative; }.wizard-steps:before { content:""; position:absolute; top:21px; bottom:21px; left:18px; width:1px; background:rgba(255,255,255,.28); }
.wizard-step { position:relative; z-index:1; display:flex; align-items:center; gap:12px; width:100%; padding:11px 0; border:0; background:transparent; color:rgba(255,255,255,.72); text-align:left; cursor:pointer; }
.wizard-step:disabled { cursor:default; }.wizard-step__number { display:grid; place-items:center; width:37px; height:37px; flex:0 0 37px; border:1px solid rgba(255,255,255,.42); border-radius:50%; background:#1b6966; font-size:.82rem; font-weight:600; }.wizard-step__text { font-size:.9rem; line-height:1.2; }.wizard-step__text small { display:block; font-size:.72rem; opacity:.72; margin-top:3px; }
.wizard-step.is-active { color:#fff; }.wizard-step.is-active .wizard-step__number { background:#fff; color:var(--reladi-teal); border-color:#fff; box-shadow:0 0 0 5px rgba(255,255,255,.13); }.wizard-step.is-complete .wizard-step__number { background:#bce9dd; color:#0c6759; border-color:#bce9dd; }
.wizard-trust { margin-top:40px; padding-top:22px; border-top:1px solid rgba(255,255,255,.2); font-size:.78rem; line-height:1.55; color:rgba(255,255,255,.82); }.wizard-trust i { font-size:1.15rem; margin-right:6px; vertical-align:-1px; }
.wizard-main { padding:38px 46px 34px; }.wizard-progress { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:32px; }.wizard-progress__bar { height:6px; flex:1; background:#e5f0ed; border-radius:999px; overflow:hidden; }.wizard-progress__bar span { display:block; height:100%; width:25%; background:linear-gradient(90deg,#20a78d,#138b78); border-radius:inherit; transition:width .35s ease; }.wizard-progress__label { white-space:nowrap; font-size:.78rem; color:#67817d; font-weight:600; }
.wizard-panel { display:none; animation:wizard-enter .32s ease both; }.wizard-panel.is-active { display:block; } @keyframes wizard-enter { from { opacity:0; transform:translateX(16px); } to { opacity:1; transform:none; } }
.wizard-kicker { color:var(--reladi-teal); font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }.wizard-panel h2 { margin:7px 0 8px; font-size:1.6rem; color:var(--reladi-ink); font-weight:600; }.wizard-intro { color:#6a817e; font-size:.92rem; margin-bottom:26px; }
.wizard-main .form-label { font-size:.84rem; font-weight:600; color:#385c5a; }.wizard-main .form-control,.wizard-main .form-select { border-color:#d6e3e0; min-height:46px; color:#264c49; }.wizard-main .form-control:focus,.wizard-main .form-select:focus { border-color:#38a792; box-shadow:0 0 0 .2rem rgba(27,143,121,.12); }.wizard-main input[readonly] { background:#f7faf9; }
.habilidades-lista { border-color:#d6e3e0!important; background:#fbfefd; }.habilidad-opcion { cursor:pointer; border:1px solid transparent; transition:.15s; }.habilidad-opcion:hover { background:#f1f8f6; }.habilidad-opcion.seleccionada { background:#e8f7f2; border-color:#16a085; color:#0d6655; }.habilidades-contador { background:var(--reladi-teal)!important; }
.wizard-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:28px; padding-top:22px; border-top:1px solid #e6efed; }.btn-empleado-primary { color:#fff; background-color:var(--reladi-teal); border-color:var(--reladi-teal); padding:.68rem 1.35rem; }.btn-empleado-primary:hover,.btn-empleado-primary:focus { color:#fff; background-color:#0d705f; border-color:#0d705f; }.wizard-actions .btn-link { color:#54706c; }
.wizard-legal { display:flex; align-items:flex-start; gap:10px; flex-wrap:wrap; padding:17px; border:1px solid #dcebe7; border-radius:10px; background:#f8fcfb; }.wizard-legal .form-check-input { flex:0 0 auto; margin:4px 0 0; }.wizard-legal .form-check-label { flex:1 1 0; min-width:0; line-height:1.55; }.wizard-legal .invalid-feedback { flex-basis:100%; }.wizard-legal .form-check-input:checked { background-color:var(--reladi-teal); border-color:var(--reladi-teal); }
/* Los formularios ya incluyen el acceso al inicio de sesión al final. */
body:has(#formRegistroEmpleado) .registro-shell > .btn-link,
body:has(#formRegistro) .registro-shell > .btn-link,
body:has(#formRegistroEmpleado) .registro-brand,
body:has(#formRegistro) .registro-brand { display:none; }
body:has(#formRegistroEmpleado) .registro-shell,
body:has(#formRegistro) .registro-shell { padding-top:42px; }
/* Empresa conserva la identidad azul usada en el resto del producto. */
body:has(#formRegistro) { --reladi-teal:#007bff; --reladi-ink:#173c66; }
body:has(#formRegistro) .wizard-sidebar { background:linear-gradient(160deg,#123f73,#007bff); }
body:has(#formRegistro) .wizard-progress__bar span { background:linear-gradient(90deg,#36a1ff,#007bff); }
body:has(#formRegistro) .wizard-step__number { background:#176ab7; border-color:rgba(255,255,255,.48); }
body:has(#formRegistro) .wizard-step.is-active .wizard-step__number { background:#fff; border-color:#fff; color:#007bff; }
body:has(#formRegistro) .wizard-step.is-complete .wizard-step__number { background:#cfe6ff; border-color:#cfe6ff; color:#075ba8; }
body:has(#formRegistro) .btn-empleado-primary:hover,
body:has(#formRegistro) .btn-empleado-primary:focus { background-color:#0069d9; border-color:#0069d9; }
@media (max-width: 767px) { .registro-shell { padding:22px 14px 40px; }.wizard-layout { display:block; border-radius:15px; }.wizard-sidebar { padding:25px 22px 19px; }.wizard-sidebar > p,.wizard-trust { display:none; }.wizard-steps { display:flex; justify-content:space-between; }.wizard-steps:before { left:12%; right:12%; top:18px; bottom:auto; width:auto; height:1px; }.wizard-step { width:auto; padding:0; flex-direction:column; gap:5px; text-align:center; }.wizard-step__text { display:none; }.wizard-main { padding:28px 22px; }.wizard-panel h2 { font-size:1.35rem; } }