/* =============================================
   RECUPERAR CONTRASEÑA — Texpro RSProyecto
   Extiende login.css — usa tokens.css
   ============================================= */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-secondary);
  background: var(--color-gray-light);
  color: var(--color-black);
  min-height: 100vh;
  display: flex;
}

.recover-wrapper { display: flex; width: 100%; min-height: 100vh; }

.recover-brand {
  flex: 1;
  background: linear-gradient(160deg, var(--color-primary-dark) 0%, var(--color-primary) 50%, #005ca8 100%);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-12); position: relative; overflow: hidden;
}

.recover-brand::before {
  content: ''; position: absolute; width: 400px; height: 400px;
  border-radius: var(--radius-full); background: rgba(0, 226, 167, 0.08);
  bottom: -100px; left: -100px;
}

.recover-brand::after {
  content: ''; position: absolute; width: 250px; height: 250px;
  border-radius: var(--radius-full); background: rgba(0, 226, 167, 0.05);
  top: -50px; right: -50px;
}

.brand-content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-8); text-align: center; }
.brand-logo { max-width: 280px; width: 100%; object-fit: contain; filter: brightness(0) invert(1); }
.brand-fallback { flex-direction: column; align-items: center; gap: var(--space-4); }
.brand-isotipo { font-size: 80px; }
.brand-name { font-family: var(--font-primary); font-size: var(--text-4xl); font-weight: var(--font-bold); color: var(--color-white); letter-spacing: 4px; }
.brand-tagline { font-size: var(--text-base); color: rgba(255,255,255,0.75); max-width: 260px; line-height: var(--line-height-normal); }
.brand-desc { max-width: 280px; }
.brand-desc p { font-size: var(--text-sm); color: rgba(255,255,255,0.65); line-height: var(--line-height-normal); text-align: center; }
.brand-footer { margin-top: var(--space-4); }
.brand-cert { font-size: var(--text-xs); color: rgba(255,255,255,0.4); letter-spacing: 1px; text-transform: uppercase; }

.recover-panel { width: 520px; min-width: 520px; display: flex; align-items: center; justify-content: center; padding: var(--space-8); background: var(--color-white); overflow-y: auto; }
.recover-card { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: var(--space-6); }
.recover-logo-mobile { display: none; justify-content: center; }
.recover-isotipo-mobile { width: 72px; height: 72px; object-fit: contain; border-radius: var(--radius-full); }

.steps-indicator { display: flex; align-items: center; justify-content: center; gap: 0; }
.step { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); }
.step-dot { width: 36px; height: 36px; border-radius: var(--radius-full); border: 2px solid var(--color-gray-mid); background: var(--color-white); color: var(--color-gray-mid); font-family: var(--font-primary); font-size: var(--text-sm); font-weight: var(--font-bold); display: flex; align-items: center; justify-content: center; transition: all var(--transition-normal); }
.step.active .step-dot { background: var(--color-green); border-color: var(--color-green); color: var(--color-white); box-shadow: 0 0 0 4px rgba(0,226,167,0.2); }
.step.done .step-dot { background: var(--color-green-dark); border-color: var(--color-green-dark); color: var(--color-white); }
.step-label { font-size: var(--text-xs); color: var(--color-gray-mid); font-weight: var(--font-medium); white-space: nowrap; transition: color var(--transition-normal); }
.step.active .step-label, .step.done .step-label { color: var(--color-green-dark); }
.step-line { flex: 1; height: 2px; background: var(--color-gray-mid); min-width: 40px; margin-bottom: 18px; transition: background var(--transition-normal); }
.step-line.done { background: var(--color-green-dark); }

.step-content { display: none; flex-direction: column; gap: var(--space-5); animation: fadeIn var(--transition-normal); }
.step-content.active { display: flex; }
@keyframes fadeIn { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } }

.step-header { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.step-icon { width: 56px; height: 56px; border-radius: var(--radius-lg); background: rgba(0, 226, 167, 0.12); color: var(--color-green-dark); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-2); }
.step-title { font-family: var(--font-primary); font-size: var(--text-2xl); font-weight: var(--font-bold); color: var(--color-primary); line-height: var(--line-height-tight); }
.step-subtitle { font-size: var(--text-sm); color: var(--color-gray-dark); line-height: var(--line-height-normal); }

.recover-form { display: flex; flex-direction: column; gap: var(--space-4); }
.form-group { display: flex; flex-direction: column; gap: var(--space-2); }
.form-label { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-corporate-gray); }
.form-input { width: 100%; padding: var(--space-3) var(--space-4); font-family: var(--font-secondary); font-size: var(--text-base); color: var(--color-black); background: var(--color-gray-light); border: 2px solid transparent; border-radius: var(--radius-md); outline: none; transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast); }
.form-input:hover { border-color: var(--color-gray-mid); }
.form-input:focus { background: var(--color-white); border-color: var(--color-green); box-shadow: 0 0 0 4px rgba(0,226,167,0.15); }
.form-input.is-error { border-color: var(--color-danger); background: var(--color-danger-light); }
.form-error { font-size: var(--text-xs); color: var(--color-danger); min-height: 16px; }
.input-password-wrapper { position: relative; }
.input-password-wrapper .form-input { padding-right: 44px; }
.btn-toggle-password { position: absolute; right: var(--space-3); top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--color-gray-dark); display: flex; align-items: center; justify-content: center; padding: var(--space-1); border-radius: var(--radius-sm); transition: color var(--transition-fast); }
.btn-toggle-password:hover { color: var(--color-primary); }

.otp-group { display: flex; align-items: center; justify-content: center; gap: var(--space-2); }
.otp-input { width: 48px; height: 56px; text-align: center; font-family: var(--font-primary); font-size: var(--text-xl); font-weight: var(--font-bold); color: var(--color-primary); background: var(--color-gray-light); border: 2px solid transparent; border-radius: var(--radius-md); outline: none; transition: all var(--transition-fast); caret-color: var(--color-green); }
.otp-input:focus { border-color: var(--color-green); background: var(--color-white); box-shadow: 0 0 0 4px rgba(0,226,167,0.15); }
.otp-input.is-filled { border-color: var(--color-green-dark); background: rgba(0,226,167,0.08); }
.otp-input.is-error { border-color: var(--color-danger); }
.otp-separator { font-size: var(--text-xl); color: var(--color-gray-mid); margin: 0 var(--space-1); user-select: none; }

.resend-row { display: flex; align-items: center; justify-content: center; gap: var(--space-2); font-size: var(--text-sm); }
.resend-text { color: var(--color-gray-dark); }
.btn-resend { background: none; border: none; cursor: pointer; font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-green-dark); transition: color var(--transition-fast); padding: 0; }
.btn-resend:disabled { color: var(--color-gray-mid); cursor: not-allowed; }
.btn-resend:not(:disabled):hover { color: var(--color-primary); }

.strength-bar { height: 4px; background: var(--color-gray-mid); border-radius: var(--radius-full); overflow: hidden; margin-top: var(--space-1); }
.strength-fill { height: 100%; width: 0%; border-radius: var(--radius-full); transition: width 0.3s ease, background 0.3s ease; }
.strength-label { font-size: var(--text-xs); font-weight: var(--font-medium); display: block; min-height: 16px; }

.btn-primary { width: 100%; padding: var(--space-4); background: linear-gradient(135deg, var(--color-green) 0%, var(--color-green-dark) 100%); color: var(--color-white); font-family: var(--font-primary); font-size: var(--text-base); font-weight: var(--font-semibold); border: none; border-radius: var(--radius-md); cursor: pointer; transition: opacity var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast); display: flex; align-items: center; justify-content: center; gap: var(--space-2); box-shadow: 0 4px 15px rgba(0,226,167,0.35); letter-spacing: 0.3px; text-decoration: none; }
.btn-primary:hover { opacity: 0.92; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,226,167,0.45); }
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled { opacity: 0.65; cursor: not-allowed; transform: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin 0.8s linear infinite; }

.success-container { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-4); padding: var(--space-8) 0; }
.success-icon { width: 88px; height: 88px; border-radius: var(--radius-full); background: rgba(0,226,167,0.12); color: var(--color-green-dark); display: flex; align-items: center; justify-content: center; animation: popIn 0.4s cubic-bezier(0.175,0.885,0.32,1.275); }
@keyframes popIn { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.success-title { font-family: var(--font-primary); font-size: var(--text-2xl); font-weight: var(--font-bold); color: var(--color-primary); }
.success-subtitle { font-size: var(--text-sm); color: var(--color-gray-dark); line-height: var(--line-height-normal); max-width: 320px; }
.btn-back-login { margin-top: var(--space-4); }

.back-login { text-align: center; }
.link-back { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); color: var(--color-green-dark); text-decoration: none; font-weight: var(--font-medium); transition: color var(--transition-fast); }
.link-back:hover { color: var(--color-primary); }

@media (max-width: 960px) { .recover-brand { display: none; } .recover-panel { width: 100%; min-width: unset; } .recover-logo-mobile { display: flex; } .recover-card { max-width: 440px; } }
@media (max-width: 480px) { .recover-panel { padding: var(--space-4); padding-top: var(--space-10); align-items: flex-start; } .recover-card { max-width: 100%; } .otp-input { width: 40px; height: 48px; font-size: var(--text-lg); } }