/* ============================================================
   OurVault — v2.0 Signup
   Archivo: v2-signup.css
   Requiere: variables.css + global.css cargados antes.
   ============================================================ */

body {
  background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--lavender-100) 100%);
  min-height: 100vh;
}

.signup-hidden { display: none !important; }

.signup-main {
  max-width: 480px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.signup-brand {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 600;
  color: var(--blue-500);
  letter-spacing: 0.02em;
  text-align: center;
  margin-bottom: var(--space-2);
}

.signup-preview {
  background: linear-gradient(135deg, var(--blue-100) 0%, var(--lavender-100) 100%);
  border: 1px solid var(--blue-200);
  text-align: center;
}

.signup-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  display: block;
  margin-bottom: var(--space-2);
}

.signup-vault-name {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--text-primary);
  display: block;
  margin-bottom: var(--space-2);
}

.signup-vault-meta {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.signup-error {
  background: var(--pink-100);
  border: 1px solid var(--pink-200);
  text-align: center;
}

.signup-error h2 {
  color: #b6526a;
  font-size: var(--text-xl);
  margin-bottom: var(--space-2);
}

.signup-error p {
  color: var(--text-secondary);
}

.signup-form-card {
  display: flex;
  flex-direction: column;
}

.signup-form-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  margin-bottom: var(--space-4);
}

.signup-banner {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  margin-bottom: var(--space-3);
}

.signup-banner-error {
  background: var(--pink-100);
  color: #b6526a;
  border: 1px solid var(--pink-200);
}

.signup-banner-ok {
  background: #e7f6ec;
  color: #2e7d4f;
  border: 1px solid #bfe5cc;
}

/* F6.1: el paso 2 (código) comparte el estilo de labels del formulario */
#signup-form label,
#codigo-form label {
  display: block;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-1);
  margin-top: var(--space-3);
  font-weight: 500;
}

#signup-form label:first-of-type,
#codigo-form label:first-of-type {
  margin-top: 0;
}

.signup-optional {
  font-weight: normal;
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.signup-req {
  color: #b6526a;
  font-weight: 700;
}

#signup-form .input {
  margin-bottom: 0;
}

.signup-input-error {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 3px rgba(240, 160, 168, 0.25) !important;
}

/* --- Password wrap (toggle ojo) --- */
.pwd-wrap {
  position: relative;
}

.pwd-wrap .input {
  padding-right: 44px;
}

.pwd-eye {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  opacity: 0.55;
  transition: opacity var(--transition), background var(--transition);
}
.pwd-eye:hover { opacity: 1; background: var(--bg-soft); }
.pwd-eye-on    { opacity: 1; color: var(--blue-500); }

/* --- Fortaleza --- */
.pwd-strength {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.pwd-strength-bar {
  flex: 1;
  height: 6px;
  background: var(--bg-soft);
  border-radius: var(--radius-full);
  overflow: hidden;
  border: 1px solid var(--border);
}

.pwd-strength-fill {
  height: 100%;
  width: 0%;
  border-radius: var(--radius-full);
  transition: width var(--transition), background var(--transition);
  background: var(--offline);
}

.pwd-strength-fill.pwd-weak   { background: var(--danger); }
.pwd-strength-fill.pwd-medium { background: var(--warning); }
.pwd-strength-fill.pwd-strong { background: var(--success); }

.pwd-strength-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  min-width: 64px;
  text-align: right;
}

.signup-submit {
  width: 100%;
  margin-top: var(--space-6);
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-base);
}

.signup-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.signup-footer-note {
  margin-top: var(--space-4);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* ============================================================
   Selector de planes (informativo)
   Reutiliza .planes-card, .planes-grid, .planes-feat* de v2-planes.css.
   Aquí solo lo específico del signup: ancho, badge "Próximamente" y descuento.
   ============================================================ */
.signup-planes {
  max-width: 920px;
  margin: 0 auto var(--space-8);
  padding: 0 var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.signup-planes-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--text-primary);
  text-align: center;
}

.signup-planes-intro {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  text-align: center;
  max-width: 620px;
  margin: 0 auto;
  line-height: 1.55;
}

/* Badge "Próximamente" en los planes de pago (mismo anclaje que .planes-card-badge) */
.planes-card-soon {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  background: var(--bg-soft);
  color: var(--text-muted);
  border: 1px solid var(--border);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
}

/* Precio completo tachado, antes del precio con descuento */
.planes-card-price-old {
  text-decoration: line-through;
  color: var(--text-muted);
  font-size: var(--text-xl);
  font-weight: 500;
  margin-right: var(--space-2);
}

/* Etiqueta "−20% por tu invitación" (paleta verde de los toasts) */
.planes-card-disc {
  display: inline-block;
  align-self: flex-start;
  background: #e6f7ef;
  color: #2e7d57;
  border: 1px solid #cdebda;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  margin-top: calc(var(--space-2) * -1);
}